/* Madertino — Taller Azul
   1. Apertura del mega menú del encabezado.
   2. Estilo de los formularios de WPForms.
   El contenido vive en las plantillas de Elementor; aquí solo lo que el
   editor gratuito no cubre. */

/* ---------- 1. MEGA MENÚ ---------- */

.mad-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.mad-header > .e-con-inner,
.mad-header {
  position: relative;
}

.mad-header .mad-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  width: 100%;
  max-width: 100%;
  border-top: 1px solid #E4E4E7;
  border-bottom: 1px solid #E4E4E7;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 60;
}

.mad-header:has(.menu-item-19:hover) .mad-mega,
.mad-header:has(.menu-item-19:focus-within) .mad-mega,
.mad-header .mad-mega:hover,
.mad-header .mad-mega:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* El item activo se marca con filete inferior en escritorio; ver bloque 34. */

@media (max-width: 1024px) {
  .mad-header .mad-mega {
    display: none;
  }
}

/* ---------- 2. FORMULARIOS WPFORMS ---------- */

.wpforms-container .wpforms-field {
  padding: 0 0 14px;
}

.wpforms-container .wpforms-field-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #18181B;
  margin-bottom: 6px;
}

.wpforms-container .wpforms-required-label {
  color: #0B4C85;
}

.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container select,
.wpforms-container textarea {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  color: #3F3F46;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  padding: 11px 14px;
  width: 100%;
  box-shadow: none;
  transition: border-color .15s ease;
}

.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: #0B4C85;
  outline: 2px solid #EFF4F9;
  outline-offset: 0;
}

.wpforms-container textarea {
  min-height: 130px;
  line-height: 1.6;
}

.wpforms-container ::placeholder {
  color: #9CA3AF;
}

/* Casilla de autorización */
.wpforms-container .wpforms-field-gdpr-checkbox label,
.wpforms-container .wpforms-field-checkbox label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.55;
}

.wpforms-container input[type=checkbox] {
  accent-color: #0B4C85;
  margin-right: 8px;
}

/* Botón de envío en pastilla */
.wpforms-container button[type=submit],
.wpforms-container .wpforms-submit {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: #0B4C85;
  border: none;
  border-radius: 999px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background .15s ease;
}

.wpforms-container button[type=submit]:hover,
.wpforms-container .wpforms-submit:hover {
  background: #093C6B;
}

/* Errores y confirmación */
.wpforms-container label.wpforms-error {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  color: #B4341C;
  margin-top: 5px;
}

.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error {
  border-color: #B4341C;
}

.wpforms-confirmation-container-full {
  font-family: Inter, system-ui, sans-serif;
  background: #EFF4F9;
  border: 1px solid #D3E1EE;
  border-radius: 12px;
  color: #0B4C85;
  padding: 16px 18px;
}

/* ---------- 3. TARJETAS DE CATEGORÍA (Fabricamos) ---------- */

.mad-cat {
  position: relative;
  overflow: hidden;
}

/* La insignia flota sobre la esquina superior derecha de la foto */
.mad-cat > .mad-cat-badge,
.mad-cat > .e-con-inner > .mad-cat-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: auto;
  box-shadow: 0 1px 2px rgba(10, 37, 64, .10);
}

.mad-cat-badge p {
  margin: 0;
  white-space: nowrap;
}

/* La imagen ocupa todo el ancho de la tarjeta, sin hueco bajo ella */
.mad-cat .elementor-widget-image,
.mad-cat .elementor-widget-image img {
  display: block;
  width: 100%;
}

@media (max-width: 767px) {
  .mad-cat > .mad-cat-badge,
  .mad-cat > .e-con-inner > .mad-cat-badge {
    top: 10px;
    right: 10px;
  }
}

/* ---------- 4. HOVER DE LAS TARJETAS DE CATEGORIA ---------- */
/* Movimiento contenido: la direccion trabaja con dial de motion bajo,
   asi que nada de sombras ni saltos grandes. Solo un leve alzado,
   el borde tomando el azul de marca y un acercamiento suave de la foto. */

.mad-cat {
  transition: transform .22s ease, border-color .22s ease;
  will-change: transform;
}

.mad-cat:hover,
.mad-cat:focus-within {
  transform: translateY(-4px);
}

body .elementor-element.mad-cat:hover,
body .elementor-element.mad-cat:focus-within {
  border-color: #0B4C85;
}

.mad-cat .elementor-widget-image img {
  transition: transform .4s ease;
}

.mad-cat:hover .elementor-widget-image img,
.mad-cat:focus-within .elementor-widget-image img {
  transform: scale(1.045);
}

/* La insignia pasa a azul de marca */
.mad-cat .mad-cat-badge {
  transition: background-color .22s ease;
}

body .mad-cat:hover .elementor-element.mad-cat-badge,
body .mad-cat:focus-within .elementor-element.mad-cat-badge {
  background-color: #0B4C85;
}

.mad-cat:hover .mad-cat-badge p,
.mad-cat:focus-within .mad-cat-badge p {
  color: #FFFFFF;
}

/* Respeta a quien pide menos animacion en su sistema */
@media (prefers-reduced-motion: reduce) {
  .mad-cat,
  .mad-cat .elementor-widget-image img,
  .mad-cat .mad-cat-badge {
    transition: none;
  }

  .mad-cat:hover,
  .mad-cat:focus-within {
    transform: none;
  }

  .mad-cat:hover .elementor-widget-image img,
  .mad-cat:focus-within .elementor-widget-image img {
    transform: none;
  }
}
/* ---------- 5. CARRUSEL DE CASOS REALES ---------- */
/* Tres fichas a la vista en escritorio, dos en tablet y una y pico en movil.
   Desplazamiento nativo con anclaje: funciona con dedo, trackpad y las
   flechas que anade madertino-carrusel.js. Sin libreria externa. */

.mad-carrusel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 24px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Los anchos de las fichas se fijan en el widget (31.5 / 47 / 76 %).
   Aqui solo el anclaje del desplazamiento. */
.mad-carrusel > .elementor-element {
  flex: 0 0 auto;
  scroll-snap-align: start;
}



@media (max-width: 767px) {
  .mad-carrusel {
    gap: 16px;
  }
  
}

/* Sin barra de desplazamiento visible: las flechas hacen de guia.
   El contenedor sigue siendo desplazable con dedo y trackpad. */
.mad-carrusel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mad-carrusel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Flechas inyectadas por el script */
.mad-carrusel-wrap {
  position: relative;
}

.mad-carrusel-btn {
  position: absolute;
  /* Valor de reserva; el script lo recalcula sobre la foto real */
  top: 38%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .94);
  color: #0B4C85;
  border: 1px solid #E4E4E7;
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.mad-carrusel-btn svg {
  width: 19px;
  height: 19px;
  display: block;
}

.mad-carrusel-btn:hover {
  background: #0B4C85;
  color: #FFFFFF;
  border-color: #0B4C85;
}

.mad-carrusel-btn:focus-visible {
  outline: 2px solid #0B4C85;
  outline-offset: 2px;
}

.mad-carrusel-btn.is-inicio,
.mad-carrusel-btn.is-final {
  opacity: .35;
}

.mad-carrusel-btn.prev {
  left: -10px;
}

.mad-carrusel-btn.next {
  right: -10px;
}

/* En movil las flechas se muestran igualmente; ver bloque 12. */
/* ---------- 6. HOVER DE LAS FICHAS DE PROYECTO ---------- */

.mad-proyecto {
  transition: transform .22s ease;
}

.mad-proyecto .elementor-widget-image {
  overflow: hidden;
  border-radius: 16px;
}

.mad-proyecto .elementor-widget-image img {
  transition: transform .4s ease;
  display: block;
  width: 100%;
}

.mad-proyecto:hover,
.mad-proyecto:focus-within {
  transform: translateY(-4px);
}

.mad-proyecto:hover .elementor-widget-image img,
.mad-proyecto:focus-within .elementor-widget-image img {
  transform: scale(1.045);
}

.mad-proyecto .elementor-widget-heading .elementor-heading-title {
  transition: color .2s ease;
}

body .mad-proyecto:hover .elementor-widget-heading .elementor-heading-title,
body .mad-proyecto:focus-within .elementor-widget-heading .elementor-heading-title {
  color: #0B4C85;
}

@media (prefers-reduced-motion: reduce) {
  .mad-carrusel {
    scroll-behavior: auto;
  }
  .mad-proyecto,
  .mad-proyecto .elementor-widget-image img {
    transition: none;
  }
  .mad-proyecto:hover,
  .mad-proyecto:focus-within,
  .mad-proyecto:hover .elementor-widget-image img,
  .mad-proyecto:focus-within .elementor-widget-image img {
    transform: none;
  }
}
/* ---------- 7. PASOS DE "COMO TRABAJAMOS" ---------- */
/* Icono y numero van en una fila dentro de la tarjeta, sin flotar sobre
   el borde. Sin chevrones entre tarjetas: el numero ya indica el orden. */

.mad-paso {
  position: relative;
  transition: transform .2s ease, border-color .2s ease, box-shadow .22s ease;
}

.mad-paso:hover,
.mad-paso:focus-within {
  transform: translateY(-3px);
}

body .elementor-element.mad-paso:hover,
body .elementor-element.mad-paso:focus-within {
  border-color: #D8DDE3;
}

/* Fila superior: icono a la izquierda, numero a la derecha */
.mad-paso .mad-paso-top {
  margin-bottom: 16px;
}

.mad-paso .mad-paso-icono {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid #F1E2D4;
  border-radius: 999px;
}

.mad-paso .mad-paso-icono .elementor-widget-container,
.mad-paso .mad-paso-icono .elementor-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.mad-paso .mad-paso-num {
  flex: 0 0 auto;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mad-paso { transition: none; }
  .mad-paso:hover,
  .mad-paso:focus-within { transform: none; }
}

/* ---------- 8. ESQUINAS DEL HERO ---------- */
/* El carrusel de Xpro no expone control de radio, asi que se redondea
   aqui. El overflow recorta las fotos de fondo de cada diapositiva. */

.mad-hero-slider,
.mad-hero-slider > .elementor-widget-container,
.mad-hero-slider .xpro-hero-slider-wrapper,
.mad-hero-slider .swiper,
.mad-hero-slider .swiper-container {
  border-radius: 20px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .mad-hero-slider,
  .mad-hero-slider > .elementor-widget-container,
  .mad-hero-slider .xpro-hero-slider-wrapper,
  .mad-hero-slider .swiper,
  .mad-hero-slider .swiper-container {
    border-radius: 16px;
  }
}
/* ---------- 9. PIE DE FOTO DEL HERO ---------- */
/* La descripcion de cada diapositiva baja a la esquina inferior izquierda,
   alineada con el titular. Se saca del flujo, asi que los botones suben
   y quedan pegados al titulo. */

.mad-hero-slider .xpro-hero-slider-slide-content-wrapper {
  position: relative;
}

.mad-hero-slider .xpro-hero-slider-description-wrapper {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 48px));
  margin: 0;
  text-align: left;
  z-index: 2;
}

.mad-hero-slider .xpro-hero-slider-description p {
  margin: 0;
}

/* Un respiro extra entre el titular y los botones al desaparecer el hueco */
.mad-hero-slider .xpro-hero-slider-slide-button-wrapper {
  margin-top: 22px;
}

@media (max-width: 767px) {
  .mad-hero-slider .xpro-hero-slider-description-wrapper {
    bottom: 54px;
    width: calc(100% - 36px);
  }
}
/* ---------- 10. AJUSTES DE MOVIL ---------- */

@media (max-width: 767px) {

  /* El separador vertical de la franja de promesas no tiene sentido
     cuando los dos bloques se apilan: pasa a filete superior. */
  .mad-promesa-div {
    border-left-width: 0 !important;
    border-top-width: 1px !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
    margin-top: 4px;
  }

  /* Las tarjetas de paso se apilan; el icono flotante necesita hueco
     arriba para no comerse el borde de la tarjeta anterior. */
  .mad-pasos-fila {
    row-gap: 44px !important;
  }

  .mad-paso .mad-paso-icono {
    width: 46px;
    height: 46px;
  }

  /* Los dos botones del hero se apilan antes de desbordar */
  .mad-hero-slider .xpro-hero-slider-slide-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mad-hero-slider .xpro-hero-slider-button-default {
    margin: 0 !important;
  }

  /* Insignia de categoria algo menor para no tapar la foto */
  .mad-cat-badge p {
    font-size: 9.5px;
  }
}
/* ---------- 11. SOMBRA AL PASAR EL CURSOR ---------- */
/* Unica excepcion a la regla de "sin sombras" de la direccion: solo en
   reposo activo, nunca en estado normal. Va tenida de azul de marca en
   lugar de negro, y con desenfoque amplio y desplazamiento corto para
   que se lea como elevacion y no como contorno oscuro. */

body .elementor-element.mad-cat,
body .elementor-element.mad-paso {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

body .elementor-element.mad-cat:hover,
body .elementor-element.mad-cat:focus-within,
body .elementor-element.mad-paso:hover,
body .elementor-element.mad-paso:focus-within {
  box-shadow: 0 14px 30px -16px rgba(11, 76, 133, .30);
}

/* En las fichas de proyecto no hay tarjeta: la sombra va bajo la foto,
   que es el elemento con forma propia. */
.mad-proyecto .elementor-widget-image {
  transition: box-shadow .22s ease;
}

body .mad-proyecto:hover .elementor-widget-image,
body .mad-proyecto:focus-within .elementor-widget-image {
  box-shadow: 0 14px 30px -16px rgba(11, 76, 133, .34);
}

@media (prefers-reduced-motion: reduce) {
  body .elementor-element.mad-cat,
  body .elementor-element.mad-paso,
  .mad-proyecto .elementor-widget-image {
    transition: none;
  }
}
/* ---------- 12. MOVIL: DESBORDE Y AIRE ---------- */
/* Xpro fija width:1140px y min-height:600px en el contenedor de contenido
   de cada diapositiva. En un telefono eso desbordaba por los lados y
   estiraba el hero. Aqui se anula. */

@media (max-width: 767px) {

  html,
  body {
    overflow-x: hidden;
  }

  /* Solo el ancho se fuerza. El min-height NO se toca: es donde Xpro
     aplica la altura del carrusel, y anularlo dejaba el hero del alto
     del texto. */
  .mad-hero-slider .xpro-hero-slider-slide-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mad-hero-slider .xpro-hero-slider-slide-content-area {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
  }

  .mad-hero-slider .swiper,
  .mad-hero-slider .swiper-slide,
  .mad-hero-slider .xpro-hero-slider-slide {
    overflow: hidden;
  }

  .mad-hero-slider .xpro-hero-slider-title,
  .mad-hero-slider .xpro-hero-slider-subtitle {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* En movil se ocultan el pie de foto y el boton secundario: el hero
     se queda con antetitulo, titular y una sola llamada a la accion. */
  .mad-hero-slider .xpro-hero-slider-description-wrapper,
  .mad-hero-slider .xpro-hero-slider-description {
    display: none;
  }

  .mad-hero-slider .xpro-hero-slider-button-secondary {
    display: none;
  }

  .mad-hero-slider .xpro-hero-slider-description {
    display: block;
    margin-bottom: 0;
  }

  /* Los dos botones se apilan */
  .mad-hero-slider .xpro-hero-slider-slide-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mad-hero-slider .xpro-hero-slider-button-default {
    width: auto;
    margin: 0 !important;
  }

  /* Franja de garantias: menos hueco entre item e item */
  .mad-garantias {
    row-gap: 18px !important;
  }

  .mad-garantias .elementor-icon-box-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .mad-garantias .elementor-icon-box-icon {
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* --- Carrusel de casos reales en movil --- */
  /* La ficha se estrecha para que asome de verdad la siguiente, y las
     flechas dejan de ocultarse: sin ellas no se ve que hay carrusel. */
  

  /* Sin flechas en movil: la ficha siguiente asomando ya indica que
     hay mas, y ahi se desliza con el dedo. */
  .mad-carrusel-btn {
    display: none;
  }
}
/* ---------- 13. MOVIL: LA FOTO MANDA ---------- */
/* En el telefono el texto ocupaba el centro y aplastaba la imagen.
   Aqui el contenido baja al pie, el velo plano se aclara y la
   legibilidad se resuelve con un degradado solo en la franja inferior:
   asi los dos tercios de arriba de la foto se ven limpios. */

@media (max-width: 767px) {

  .mad-hero-slider .xpro-hero-slider-slide-content-wrapper {
    align-items: flex-end !important;
  }

  .mad-hero-slider .xpro-hero-slider-slide-content-area {
    padding-bottom: 52px !important;
  }

  /* Velo general mucho mas suave */
  .mad-hero-slider .xpro-hero-slider-slide-bg::before {
    opacity: .28 !important;
  }

  /* Degradado inferior para que el texto siga legible */
  .mad-hero-slider .xpro-hero-slider-slide-bg::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(to top, rgba(10, 37, 64, .88) 0%, rgba(10, 37, 64, .55) 45%, rgba(10, 37, 64, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .mad-hero-slider .xpro-hero-slider-slide-content-wrapper {
    position: relative;
    z-index: 2;
  }

  /* Boton principal mas discreto: la foto es la protagonista */
  .mad-hero-slider .xpro-hero-slider-button-primary,
  .mad-hero-slider .xpro-hero-slider-button-primary.xpro-hero-slider-button-default {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }

  /* Los puntos suben para no quedar bajo el boton */
  .mad-hero-slider .swiper-pagination {
    bottom: 14px !important;
  }
}
/* ---------- 14. FICHAS DE PROYECTO: CONTENCION ---------- */
/* La foto se salia de la ficha en movil. Aqui se ata tanto la ficha
   como la imagen, y se fija proporcion 4:3 para que las seis midan
   igual y ninguna pueda desbordar. */

.mad-carrusel > .elementor-element {
  min-width: 0;
  max-width: 100%;
}

.mad-proyecto .elementor-widget-image,
.mad-proyecto .elementor-widget-image > .elementor-widget-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.mad-proyecto .elementor-widget-image figure,
.mad-proyecto .elementor-widget-image a {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.mad-proyecto .elementor-widget-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* El texto de la ficha tampoco debe empujar el ancho */
.mad-proyecto .elementor-heading-title,
.mad-proyecto .elementor-icon-list-text {
  overflow-wrap: break-word;
}
/* ---------- 15. CARRUSEL: ANCHO FORZADO ---------- */
/* Elementor escribe el ancho con tres clases encadenadas y gana a casi
   cualquier regla propia. Aqui se fuerza por las cuatro vias que puede
   usar un elemento flexible, para que no quede ninguna suelta. */

.mad-carrusel {
  box-sizing: border-box;
  max-width: 100%;
}

body .mad-carrusel > .elementor-element {
  box-sizing: border-box;
  --width: 31.5%;
  width: 31.5%;
  max-width: 31.5%;
  flex: 0 0 31.5%;
}

@media (max-width: 1024px) {
  body .mad-carrusel > .elementor-element {
    --width: 47%;
    width: 47%;
    max-width: 47%;
    flex: 0 0 47%;
  }
}

@media (max-width: 767px) {
  /* Se mide contra la PANTALLA (vw), no contra el contenedor. Si algun
     ancestro se pasa de ancho, el porcentaje heredaba ese error; vw no. */
  body .mad-carrusel > .elementor-element {
    --width: 78vw;
    width: 78vw;
    max-width: 78vw;
    flex: 0 0 78vw;
  }

  body .mad-carrusel,
  body .mad-carrusel > .elementor-element > .e-con-inner {
    max-width: 100vw;
  }

  /* La foto nunca puede pasar del ancho de su tarjeta */
  body .mad-proyecto .elementor-widget-image,
  body .mad-proyecto .elementor-widget-image img {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ---------- 16. MENU MOVIL ---------- */
/* Panel desplegable de Xpro, vestido: logo arriba, filas con icono y
   chevron, y las dos tarjetas del pie que anade madertino-menu.js.
   Los iconos van por numero de item (menu-item-NN de Apariencia > Menus). */

@media (max-width: 1024px) {

  .mad-header .xpro-elementor-horizontal-navbar-wrapper {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 0 20px 24px;
    overflow-y: auto;
  }

  .mad-menu-cabecera { padding: 20px 0 12px; }
  .mad-menu-logo img { height: 34px; width: auto; display: block; }

  .mad-header .xpro-elementor-horizontal-navbar-nav { display: block; width: 100%; }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #EDEFF2;
  }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li:last-child { border-bottom: 0; }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 4px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #18181B;
    background: transparent;
    border-radius: 0;
  }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 19px;
    width: 26px;
    text-align: center;
    color: #0B4C85;
    flex: 0 0 auto;
  }

  .mad-header .menu-item-18 > a::before { content: "\f015"; }
  .mad-header .menu-item-19 > a::before { content: "\f7d9"; }
  .mad-header .menu-item-20 > a::before { content: "\f059"; }
  .mad-header .menu-item-21 > a::before { content: "\f095"; }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
    color: #9CA3AF;
    margin-left: auto;
  }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a { color: #EE751B; background: transparent; }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::before,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a::before { color: #EE751B; }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::after,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a::after { content: none; }

  .mad-menu-pie { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }

  .mad-menu-cta { background: #F5F6F8; border-radius: 20px; padding: 22px; }

  .mad-menu-cta-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

  .mad-menu-cta-icono {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #F1E2D4;
    border-radius: 999px;
    color: #EE751B;
    font-size: 17px;
  }

  .mad-menu-cta strong { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 16px; font-weight: 700; color: #18181B; }

  .mad-menu-cta p { margin: 0 0 16px; font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #6B7280; }

  .mad-menu-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #EE751B;
    color: #FFFFFF;
    border-radius: 999px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
  }

  .mad-menu-boton:hover, .mad-menu-boton:focus { background: #D2620F; color: #FFFFFF; }

  .mad-menu-contacto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #F5F6F8;
    border-radius: 20px;
    padding: 16px 20px;
  }

  .mad-menu-tel { display: flex; align-items: center; gap: 12px; font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #18181B; }

  .mad-menu-tel i, .mad-menu-red i { font-size: 19px; color: #0B4C85; }

  .mad-menu-red { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }

  .mad-header .xpro-elementor-horizontal-menu-close {
    top: 22px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F6F8;
    border-radius: 10px;
    color: #18181B;
  }
}

/* ---------- 17. MENU MOVIL: AJUSTES ---------- */
/* Correcciones tras verlo en el telefono: cabecera en linea, filas que
   no se salen, colores de texto uniformes y respeto del area segura. */

@media (max-width: 1024px) {

  /* Logo y boton de cierre en la misma fila */
  .mad-menu-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .mad-header .xpro-elementor-horizontal-menu-close {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }

  /* Las filas no pueden pasarse del panel */
  .mad-header .xpro-elementor-horizontal-navbar-wrapper,
  .mad-header .xpro-elementor-horizontal-navbar-nav,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li {
    box-sizing: border-box;
    max-width: 100%;
  }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a {
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
  }

  /* Un solo color de texto y de icono para todos los items */
  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a .xpro-elementor-nav-link,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li > a span {
    color: #18181B !important;
  }

  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a span,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a,
  .mad-header .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a span {
    color: #EE751B !important;
  }

  /* Texto de la tarjeta alineado a la izquierda, como la referencia */
  .mad-menu-cta,
  .mad-menu-cta p {
    text-align: left;
  }

  /* Hueco inferior para la barra de gestos del telefono */
  .mad-header .xpro-elementor-horizontal-navbar-wrapper {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* ---------- 18. MENU MOVIL: ALTURA COMPLETA ---------- */
/* El panel llena la pantalla y las dos tarjetas se van al pie, separadas
   de la navegacion por un filete. dvh en vez de vh para que la barra del
   navegador movil no deje un hueco al aparecer y desaparecer. */

@media (max-width: 1024px) {

  .mad-header .xpro-elementor-horizontal-navbar-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* La lista ocupa el espacio libre y empuja el pie hacia abajo */
  .mad-header .xpro-elementor-horizontal-navbar-nav {
    margin-bottom: 0;
  }

  .mad-menu-pie {
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid #EDEFF2;
  }

  /* Algo mas de aire entre la cabecera y el primer enlace */
  .mad-menu-cabecera {
    padding-bottom: 18px;
  }
}

/* ---------- 19. PIE DE PAGINA EN MOVIL ---------- */
/* Cuatro columnas no caben en un telefono. Aqui: marca a lo ancho,
   enlaces y contacto en dos columnas, y la lista de servicios oculta
   por duplicar lo que ya ofrece la navegacion. */

@media (max-width: 767px) {

  .mad-footer .mad-pie-servicios { display: none; }

  .mad-footer .mad-pie-marca ~ *,
  .mad-footer .mad-pie-enlaces,
  .mad-footer .mad-pie-contacto { min-width: 0; }

  /* flex 0 0 100% para que ocupe fila entera y no absorba el encogimiento
     de las otras dos columnas, que si lo tienen bloqueado. */
  .mad-footer .mad-pie-marca {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0;
  }

  .mad-footer .mad-pie-enlaces,
  .mad-footer .mad-pie-contacto {
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
  }

  /* Nada de palabras partidas ni correos desbordados */
  .mad-footer .elementor-icon-list-text,
  .mad-footer .elementor-widget-text-editor,
  .mad-footer p {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  .mad-footer .mad-pie-contacto .elementor-icon-list-text { font-size: 13.5px; }

  /* Iconos sociales en fila */
  .mad-footer .elementor-social-icons-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }

  .mad-footer .elementor-social-icons-wrapper .elementor-grid-item { margin: 0 !important; }

  /* Barra inferior apilada y centrada */
  .mad-footer .mad-pie-base {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .mad-footer .mad-pie-base p { text-align: center !important; width: 100%; }

  .mad-footer .mad-pie-base > .elementor-widget { width: 100% !important; max-width: 100% !important; }

}

/* ---------- 20. PIEZAS SOLO DE MOVIL ---------- */
/* El script inyecta el logo y las tarjetas dentro del contenedor del
   menu, que en escritorio es la barra de navegacion normal. Se ocultan
   siempre y solo se muestran cuando el menu es panel desplegable. */

.mad-menu-cabecera,
.mad-menu-pie {
  display: none !important;
}

@media (max-width: 1024px) {
  .mad-menu-cabecera { display: flex !important; }
  .mad-menu-pie { display: flex !important; }
}

/* ---------- 21. PIE: FORZAR ENVOLTURA ---------- */
/* Por si la variable de Elementor no llega a aplicarse. */

@media (max-width: 767px) {
  /* La fila del pie es e-con-boxed: el flex real es su .e-con-inner,
     no el contenedor exterior. Ahi hay que forzar la envoltura. */
  .mad-footer .e-con-inner,
  .mad-footer > .elementor-element,
  .mad-footer > .e-con-inner > .elementor-element {
    flex-wrap: wrap !important;
  }
}

/* ---------- 22. ENCABEZADO MOVIL: LOGO A LA IZQUIERDA ---------- */

@media (max-width: 1024px) {
  /* El widget lleva width:100% y margenes negativos que lo centran
     dentro de su propia caja. Se anulan solo aqui. */
  body .mad-header .elementor-widget-xpro-site-logo {
    width: auto !important;
    max-width: 62% !important;
    margin: 0 auto 0 0 !important;
    text-align: left !important;
    flex: 0 0 auto !important;
  }

  body .mad-header .xpro-site-logo {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body .mad-header .xpro-site-logo img {
    margin: 0 !important;
  }
}

/* ---------- 23. GARANTIAS EN MOVIL ---------- */
/* Icono en linea con el titulo y descripcion debajo: cada item pasa de
   tres alturas de linea a una y media. */

@media (max-width: 767px) {
  .mad-garantias .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }

  .mad-garantias .elementor-icon-box-icon {
    margin: 2px 0 0 !important;
    flex: 0 0 auto;
  }

  .mad-garantias .elementor-icon-box-content { text-align: left; }
}

/* ---------- 24. LOGO A RAS DE BORDE EN MOVIL ---------- */
/* Anulacion sin matices de las tres capas del widget: contenedor,
   envoltura del logo y enlace. Alguna de ellas centraba la imagen. */

@media (max-width: 1024px) {
  body .mad-header .elementor-widget-xpro-site-logo,
  body .mad-header .xpro-site-logo,
  body .mad-header .xpro-site-logo a {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
    align-self: flex-start !important;
  }

  body .mad-header .xpro-site-logo img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Barra pegada al borde: el logo marca el margen izquierdo */
  body .mad-header .elementor-element > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- 25. ENCABEZADO: E-CON-INNER A ANCHO COMPLETO ---------- */
/* La barra es e-con-boxed: su .e-con-inner lleva max-width y margin auto,
   asi que se centra. En movil eso deja el logo lejos del borde aunque
   este alineado a la izquierda dentro de su caja. */

@media (max-width: 1024px) {
  body .mad-header > .elementor-element > .e-con-inner,
  body .mad-header .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---------- 26. LOGO: CAJA AJUSTADA AL CONTENIDO ---------- */
/* La imagen tenia una caja de 300px con object-fit:contain, asi que el
   logo (161px reales a 33px de alto) quedaba centrado dentro de ella.
   width:auto ajusta la caja al logo; object-position es la red de
   seguridad por si alguna regla vuelve a fijar un ancho. */

@media (max-width: 1024px) {
  body .mad-header .xpro-site-logo img {
    width: auto !important;
    max-width: 100% !important;
    object-position: left center !important;
  }
}

/* ---------- 27. PASOS COMPACTOS EN MOVIL ---------- */
/* Las cinco tarjetas ocupaban demasiado alto. Lo mayor no era la tarjeta
   sino la separacion de 44px entre ellas, que existia para dejar sitio al
   icono cuando flotaba sobre el borde. Ya no flota. */

@media (max-width: 767px) {

  .mad-pasos-fila {
    row-gap: 14px !important;
  }

  body .elementor-element.mad-paso {
    padding: 16px 18px 18px !important;
  }

  .mad-paso .mad-paso-top {
    margin-bottom: 6px;
  }

  .mad-paso .mad-paso-icono {
    width: 40px;
    height: 40px;
  }

  .mad-paso .mad-paso-icono .elementor-icon i,
  .mad-paso .mad-paso-icono svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .mad-paso .mad-paso-num {
    font-size: 32px !important;
  }

  /* Titulo y filete mas juntos */
  .mad-paso .elementor-widget-heading .elementor-heading-title {
    font-size: 16px !important;
  }

  .mad-paso .elementor-widget-heading {
    margin-top: 0 !important;
  }

  .mad-paso .elementor-widget-divider {
    margin: 4px 0 2px !important;
  }

  .mad-paso .elementor-widget-divider .elementor-divider {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mad-paso .elementor-widget-text-editor {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .mad-paso .elementor-widget-text-editor p {
    margin: 0 !important;
  }

  /* La franja de promesas tampoco necesita tanto aire */
  .mad-promesa-div { margin-top: 0; }
}

/* ---------- 28. PASOS: TITULO JUNTO AL ICONO (MOVIL) ---------- */
/* La tarjeta pasa a rejilla de 3 columnas. display:contents disuelve la
   fila superior para que icono y numero sean celdas junto al titulo. */

@media (max-width: 767px) {
  body .elementor-element.mad-paso {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 14px 16px 16px !important;
  }

  .mad-paso .mad-paso-top {
    display: contents;
    margin: 0;
  }

  .mad-paso .mad-paso-icono {
    grid-column: 1;
    grid-row: 1;
  }

  .mad-paso > .elementor-widget-heading {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
  }

  .mad-paso .mad-paso-num {
    grid-column: 3;
    grid-row: 1;
    font-size: 26px !important;
  }

  .mad-paso > .elementor-widget-divider {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 6px 0 4px !important;
  }

  .mad-paso > .elementor-widget-text-editor {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .mad-pasos-fila {
    row-gap: 12px !important;
  }
}

/* ---------- 29. GARANTIAS COMPACTAS EN MOVIL ---------- */
/* Cada item ocupaba unos 94px para dos lineas de texto: mas de la mitad
   era relleno y margenes. Aqui se recortan sin quitar contenido. */

@media (max-width: 767px) {
  body .elementor-element.mad-garantias {
    row-gap: 10px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .mad-garantias .elementor-icon-box-wrapper {
    gap: 10px;
  }

  .mad-garantias .elementor-icon-box-icon {
    margin: 1px 0 0 !important;
  }

  .mad-garantias .elementor-icon-box-icon i,
  .mad-garantias .elementor-icon-box-icon svg {
    font-size: 15px;
    width: 15px;
    height: 15px;
  }

  .mad-garantias .elementor-icon-box-title {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .mad-garantias .elementor-icon-box-description {
    margin: 1px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .mad-garantias .elementor-icon-box-content {
    display: block;
  }
}

/* ---------- 30. GARANTIAS EN DOS COLUMNAS (MOVIL) ---------- */
/* Con la mitad de ancho, el texto necesita algo mas de aire vertical
   y no puede partir palabras. */

@media (max-width: 767px) {
  .mad-garantias .elementor-icon-box-title {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  .mad-garantias .elementor-icon-box-description {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .mad-garantias .elementor-icon-box-wrapper {
    gap: 8px;
    align-items: flex-start;
  }

  .mad-garantias .elementor-icon-box-content,
  .mad-garantias .elementor-icon-box-title,
  .mad-garantias .elementor-icon-box-description {
    overflow-wrap: break-word;
    hyphens: none;
    min-width: 0;
  }

  .mad-garantias .elementor-icon-box-icon i,
  .mad-garantias .elementor-icon-box-icon svg {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }
}

/* ---------- 31. CARRUSEL DE RESENAS ---------- */
/* Sobre fotos las flechas centradas funcionan; sobre texto estorban.
   En el carrusel de resenas suben a la esquina superior derecha. */

@media (min-width: 768px) {
  .mad-carrusel-wrap:has(.mad-resena) .mad-carrusel-btn {
    top: -66px;
    transform: none;
  }

  .mad-carrusel-wrap:has(.mad-resena) .mad-carrusel-btn.prev {
    left: auto;
    right: 54px;
  }

  .mad-carrusel-wrap:has(.mad-resena) .mad-carrusel-btn.next {
    right: 0;
  }
}

/* Las tarjetas de resena reparten el alto: pie siempre abajo */
.mad-resena {
  justify-content: flex-start;
}

.mad-resena > .elementor-element:last-child {
  margin-top: auto !important;
}

/* El avatar no puede deformarse en ningun ancho */
.mad-resena-avatar {
  width: 40px !important;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px !important;
  aspect-ratio: 1 / 1;
}

/* ---------- 32. RESENAS: PIE Y COMPACTADO ---------- */
/* Avatar y nombre siempre en linea, iniciales centradas de verdad,
   y tarjeta mas compacta en movil. */

body .mad-resena .mad-resena-pie {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  flex-wrap: nowrap !important;
}

/* El circulo centra sus iniciales por flex, no por relleno */
body .mad-resena .mad-resena-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 40px !important;
  min-width: 40px;
  height: 40px;
  flex: 0 0 40px !important;
}

body .mad-resena .mad-resena-avatar > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

body .mad-resena .mad-resena-avatar p {
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* El bloque de nombre ocupa lo que queda */
body .mad-resena .mad-resena-pie > .elementor-element:last-child {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}

@media (max-width: 767px) {
  body .elementor-element.mad-resena {
    padding: 18px 18px 20px !important;
    gap: 10px;
  }

  .mad-resena .elementor-widget-text-editor {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .mad-resena .elementor-widget-star-rating .elementor-star-rating {
    font-size: 13px !important;
  }

  body .mad-resena .mad-resena-avatar {
    width: 36px !important;
    min-width: 36px;
    height: 36px;
    flex: 0 0 36px !important;
  }

  .mad-resena .elementor-heading-title {
    font-size: 14px !important;
  }
}

/* ---------- 33. ETIQUETAS ANTES / DESPUES ---------- */
/* Sin la etiqueta, dos fotos del mismo espacio no se leen como
   comparacion. El texto va por CSS sobre la propia imagen. */

.mad-antes,
.mad-despues {
  position: relative;
}

.mad-antes::before,
.mad-despues::before {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

.mad-antes::before {
  content: 'Antes';
  background: rgba(255, 255, 255, .92);
  color: #18181B;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mad-despues::before {
  content: 'Despu\00e9s';
  background: #EE751B;
  color: #FFFFFF;
}

@media (max-width: 767px) {
  .mad-antes::before,
  .mad-despues::before {
    top: 12px;
    left: 12px;
    font-size: 11px;
    padding: 6px 13px;
  }
}

/* ---------- 34. MENU: ITEM ACTIVO CON FILETE ---------- */
/* En escritorio la pagina actual se marca con un filete naranja bajo
   el texto y tinta mas oscura, en lugar de la pastilla tintada. */

@media (min-width: 1025px) {
  body .mad-header .xpro-elementor-horizontal-navbar-nav > li > a {
    position: relative;
  }

  body .mad-header .current-menu-item > a,
  body .mad-header .current_page_item > a,
  body .mad-header .current-menu-item > a span,
  body .mad-header .current_page_item > a span {
    background: transparent !important;
    border-radius: 0 !important;
    color: #18181B !important;
    font-weight: 600;
  }

  body .mad-header .current-menu-item > a::after,
  body .mad-header .current_page_item > a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #EE751B;
  }
}

/* ---------- 35. PAGINA DE CONTACTO ---------- */

/* Icono de WhatsApp en cuadro verde redondeado */
.mad-wa-icono .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 16px;
}

/* El separador vertical se retiro: con un solo boton no separaba nada. */

/* Pin de ubicacion en cuadro tintado */
.mad-pin .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #EFF4F9;
  border-radius: 14px;
}

/* Separador entre los dos lados del bloque del taller */
@media (min-width: 1025px) {
  .mad-taller-lado {
    border-left: 1px solid #E4E4E7;
  }
}

/* Filete naranja delante del antetitulo */
.mad-eyebrow-dash p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.mad-eyebrow-dash p::before {
  content: '';
  width: 26px;
  height: 2px;
  background: #EE751B;
  flex: 0 0 auto;
}

/* ---------- 36. CONTACTO: AJUSTES FINOS ---------- */

/* Los parrafos de las tarjetas dejaban huecos irregulares entre lineas.
   Se controla la separacion en vez de heredar el margen por defecto. */
.mad-contacto-card .elementor-widget-text-editor p {
  margin: 0 0 10px;
}

.mad-contacto-card .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Contenido de la tarjeta anclado arriba, no repartido */
.mad-contacto-card {
  justify-content: flex-start;
}

/* El icono se separa del titulo lo justo */
.mad-contacto-card .elementor-widget-icon {
  margin-bottom: 2px;
}

/* Bloque de WhatsApp: todo alineado al mismo margen izquierdo */
.mad-wa-caja .elementor-widget-button .elementor-button-wrapper {
  text-align: left;
}

.mad-wa-caja .elementor-widget-text-editor p {
  margin: 0;
}

/* Las dos insignias, juntas y a la izquierda */
.mad-wa-caja .elementor-widget-icon-box .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mad-wa-caja .elementor-widget-icon-box .elementor-icon-box-icon {
  margin: 0 !important;
}

/* Bloque del taller: los dos lados con el mismo alto de linea base */
.mad-taller-caja .elementor-widget-icon-list .elementor-icon-list-item {
  align-items: center;
}

/* ---------- 37. CONTACTO EN MOVIL ---------- */
/* Cuatro tarjetas apiladas eran demasiado scroll: pasan a dos columnas
   y se aprieta todo lo interno. */

@media (max-width: 767px) {
  body .elementor-element.mad-contacto-card {
    padding: 16px 14px 18px !important;
    gap: 6px;
  }

  .mad-contacto-card .elementor-widget-icon .elementor-icon {
    font-size: 20px;
  }

  .mad-contacto-card .elementor-widget-icon svg,
  .mad-contacto-card .elementor-widget-icon i {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .mad-contacto-card .elementor-widget-heading {
    margin-top: 4px !important;
  }

  .mad-contacto-card .elementor-heading-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .mad-contacto-card .elementor-widget-text-editor {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .mad-contacto-card .elementor-widget-text-editor p {
    margin: 0 0 7px !important;
  }

  .mad-contacto-card .elementor-widget-text-editor p:last-child {
    margin-bottom: 0 !important;
  }

  /* El hero no necesita tanto aire entre el texto y el bloque de accion */
  .mad-contacto-hero .mad-wa-caja {
    border-left: 0;
  }

  /* Bloque del taller: menos relleno interno */
  .mad-taller-caja > .elementor-element {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}

/* ---------- 38. CONTACTO: EQUILIBRIO DE TARJETAS ---------- */
/* Las cuatro tarjetas comparten alto por la rejilla, pero el contenido
   se apoya arriba para que la fila se lea pareja. */

.mad-contacto-card {
  justify-content: flex-start;
}

.mad-contacto-card .elementor-widget-text-editor {
  line-height: 1.6;
}

/* El boton del hero no se estira al ancho de su columna */
.mad-wa-caja .elementor-widget-button {
  width: auto;
}

/* ---------- 39. HUECO ENTRE CONTENIDO Y PIE ---------- */
/* Astra añade relleno y margen al contenedor de contenido. Con paginas
   construidas en Elementor, que ya traen su propio espaciado, eso deja
   una franja blanca antes del pie. */

body #content.site-content,
body #content.site-content > .ast-container,
body #primary {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body .ast-container > .elementor {
  margin: 0;
}

/* ---------- 40. TALLER: LADO DERECHO CENTRADO ---------- */
@media (min-width: 1025px) {
  .mad-taller-lado {
    justify-content: center;
  }
}