.elementor-kit-8{--e-global-color-primary:#0A7033;--e-global-color-secondary:#488A25;--e-global-color-text:#1A1A1A;--e-global-color-accent:#71B920;--e-global-color-verdeoscuro:#0B3D1E;--e-global-color-verdesuave:#D9EBD9;--e-global-color-grisclaro:#F4F6F4;--e-global-color-textosuave:#4A554A;--e-global-color-blanco:#FFFFFF;--e-global-color-pendiente:#B25E00;--e-global-color-superficie:#FFFFFF;--e-global-color-superficie-2:#F6F8F6;--e-global-color-borde:#E2E8E2;--e-global-color-sobre-oscuro:#FFFFFF;--e-global-color-velo:rgba(7,38,23,0.86);--e-global-color-verde-noche:#072617;--e-global-color-verde-tenue:#EDF5EC;--e-global-color-texto-fuerte:#141A14;--e-global-color-crema:#DCE8DC;--e-global-color-salvia:#A9C4A9;--e-global-color-contorno-claro:rgba(255,255,255,0.6);--e-global-color-transparente:rgba(255,255,255,0);--e-global-color-pie-texto:#C7D8C7;--e-global-color-pie-tenue:#8FA88F;--e-global-color-pie-enlace:#B9D9B9;--e-global-color-campo-etiqueta:#3A453A;--e-global-color-campo-borde:#DCE3DC;--e-global-color-campo-fondo:#FBFCFB;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.15em;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:22px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.3em;--e-global-typography-accent-letter-spacing:1px;--e-global-typography-hero-font-family:"Montserrat";--e-global-typography-hero-font-size:68px;--e-global-typography-hero-font-weight:800;--e-global-typography-hero-line-height:1.06em;--e-global-typography-hero-letter-spacing:-1px;--e-global-typography-titulo-font-family:"Montserrat";--e-global-typography-titulo-font-size:46px;--e-global-typography-titulo-font-weight:800;--e-global-typography-titulo-line-height:1.15em;--e-global-typography-titulo-letter-spacing:-0.3px;--e-global-typography-subtitulo-font-family:"Montserrat";--e-global-typography-subtitulo-font-size:28px;--e-global-typography-subtitulo-font-weight:700;--e-global-typography-subtitulo-line-height:1.25em;--e-global-typography-tarjeta-font-family:"Montserrat";--e-global-typography-tarjeta-font-size:21px;--e-global-typography-tarjeta-font-weight:600;--e-global-typography-tarjeta-line-height:1.3em;--e-global-typography-cifra-font-family:"Montserrat";--e-global-typography-cifra-font-size:58px;--e-global-typography-cifra-font-weight:800;--e-global-typography-cifra-line-height:1em;--e-global-typography-cifra-letter-spacing:-1.5px;--e-global-typography-antetitulo-font-family:"Montserrat";--e-global-typography-antetitulo-font-size:14px;--e-global-typography-antetitulo-font-weight:600;--e-global-typography-antetitulo-text-transform:uppercase;--e-global-typography-antetitulo-line-height:1.4em;--e-global-typography-antetitulo-letter-spacing:0.12em;--e-global-typography-entradilla-font-family:"Inter";--e-global-typography-entradilla-font-size:19px;--e-global-typography-entradilla-font-weight:400;--e-global-typography-entradilla-line-height:1.55em;--e-global-typography-cuerpo-font-family:"Inter";--e-global-typography-cuerpo-font-size:17px;--e-global-typography-cuerpo-font-weight:400;--e-global-typography-cuerpo-line-height:1.65em;--e-global-typography-pequeno-font-family:"Inter";--e-global-typography-pequeno-font-size:15px;--e-global-typography-pequeno-font-weight:400;--e-global-typography-pequeno-line-height:1.55em;--e-global-typography-boton-font-family:"Inter";--e-global-typography-boton-font-size:15px;--e-global-typography-boton-font-weight:600;--e-global-typography-boton-text-transform:uppercase;--e-global-typography-boton-line-height:1.2em;--e-global-typography-boton-letter-spacing:0.5px;--e-global-typography-pestana-font-family:"Montserrat";--e-global-typography-pestana-font-size:34px;--e-global-typography-pestana-font-weight:800;--e-global-typography-pestana-text-transform:uppercase;--e-global-typography-pestana-line-height:1.15em;--e-global-typography-pestana-letter-spacing:-0.4px;--e-global-typography-pregunta-font-family:"Montserrat";--e-global-typography-pregunta-font-size:19px;--e-global-typography-pregunta-font-weight:700;--e-global-typography-pregunta-line-height:1.4em;--e-global-typography-legal-font-family:"Inter";--e-global-typography-legal-font-size:13px;--e-global-typography-legal-font-weight:400;--e-global-typography-legal-line-height:1.7em;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:34px;--e-global-typography-primary-line-height:1.18em;--e-global-typography-secondary-font-size:21px;--e-global-typography-secondary-line-height:1.32em;--e-global-typography-text-font-size:17px;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-size:15px;--e-global-typography-hero-font-size:48px;--e-global-typography-hero-line-height:1.12em;--e-global-typography-hero-letter-spacing:-0.5px;--e-global-typography-titulo-font-size:34px;--e-global-typography-titulo-line-height:1.18em;--e-global-typography-subtitulo-font-size:26px;--e-global-typography-subtitulo-line-height:1.28em;--e-global-typography-tarjeta-font-size:20px;--e-global-typography-tarjeta-line-height:1.32em;--e-global-typography-cifra-font-size:50px;--e-global-typography-cifra-line-height:1.05em;--e-global-typography-cifra-letter-spacing:-1px;--e-global-typography-antetitulo-font-size:14px;--e-global-typography-entradilla-font-size:18px;--e-global-typography-entradilla-line-height:1.58em;--e-global-typography-cuerpo-font-size:17px;--e-global-typography-cuerpo-line-height:1.65em;--e-global-typography-pequeno-font-size:15px;--e-global-typography-boton-font-size:15px;--e-global-typography-pestana-font-size:30px;--e-global-typography-pestana-line-height:1.15em;--e-global-typography-pregunta-font-size:19px;--e-global-typography-pregunta-line-height:1.4em;--e-global-typography-legal-font-size:13px;--e-global-typography-legal-line-height:1.7em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.22em;--e-global-typography-secondary-font-size:20px;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-text-font-size:16px;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-size:14px;--e-global-typography-hero-font-size:36px;--e-global-typography-hero-line-height:1.18em;--e-global-typography-hero-letter-spacing:-0.2px;--e-global-typography-titulo-font-size:28px;--e-global-typography-titulo-line-height:1.22em;--e-global-typography-titulo-letter-spacing:0px;--e-global-typography-subtitulo-font-size:23px;--e-global-typography-subtitulo-line-height:1.3em;--e-global-typography-tarjeta-font-size:19px;--e-global-typography-tarjeta-line-height:1.35em;--e-global-typography-cifra-font-size:46px;--e-global-typography-cifra-line-height:1.05em;--e-global-typography-cifra-letter-spacing:-1px;--e-global-typography-antetitulo-font-size:13px;--e-global-typography-antetitulo-line-height:1.45em;--e-global-typography-entradilla-font-size:17px;--e-global-typography-entradilla-line-height:1.6em;--e-global-typography-cuerpo-font-size:16px;--e-global-typography-cuerpo-line-height:1.7em;--e-global-typography-pequeno-font-size:15px;--e-global-typography-pequeno-line-height:1.6em;--e-global-typography-boton-font-size:15px;--e-global-typography-pestana-font-size:26px;--e-global-typography-pestana-line-height:1.18em;--e-global-typography-pestana-letter-spacing:-0.2px;--e-global-typography-pregunta-font-size:17px;--e-global-typography-pregunta-line-height:1.4em;--e-global-typography-legal-font-size:12px;--e-global-typography-legal-line-height:1.9em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Flor & Design: CSS del kit. GENERADO por tools/css.py: no se edita en
   Elementor > Ajustes del sitio > CSS personalizado, porque Update-PmoKit lo
   reemplaza entero en cada despliegue (trampa 27 del kit). */

/* ===== Tokens (estándar visual §3.2). En body, no en :root: ver css.py ===== */
body{
  --pmo-sombra-1:0 2px 4px rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.05);
  --pmo-sombra-2:0 10px 20px rgba(0,0,0,.07),0 26px 56px rgba(0,0,0,.13);
  --pmo-borde:1px solid var(--e-global-color-borde);
  /* De primary a verde oscuro, no a accent como el bloque de referencia del
     estándar: accent es un verde claro y el texto sobre oscuro no llega a
     4,5:1 en ese extremo (blanco 2,4:1, crema 1,9:1). Es el mismo degradado
     que la banda de cifras. */
  --pmo-deg-marca:linear-gradient(135deg,var(--e-global-color-primary) 0%,var(--e-global-color-verdeoscuro) 100%);
  --pmo-deg-velo:linear-gradient(180deg,transparent 0%,var(--e-global-color-velo) 76%);
  --pmo-radio-s:8px;--pmo-radio-m:16px;--pmo-radio-l:28px;
  --pmo-medida:36em;
  --pmo-ritmo:clamp(56px,7vw,112px);
  --fd-sombra-imagen:0 30px 60px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.16);
  --fd-sombra-imagen-2:0 40px 80px rgba(0,0,0,.32),0 10px 22px rgba(0,0,0,.18);
  --fd-sombra-galeria:0 6px 18px rgba(0,0,0,.10);
  --fd-sombra-boton:0 12px 28px rgba(0,0,0,.30);
  --fd-sombra-pestana:0 10px 24px rgba(0,0,0,.28);
  --fd-sombra-flotante:-8px 10px 30px rgba(0,0,0,.34);
  --fd-sombra-flotante-2:-10px 12px 36px rgba(0,0,0,.44);
  --fd-sombra-barra:0 -4px 20px rgba(0,0,0,.22);
  --fd-sombra-cabecera:0 6px 22px rgba(0,0,0,.10);
  --fd-sombra-formulario:0 28px 70px rgba(0,0,0,.32);
  --fd-anillo-foco:0 0 0 4px rgba(0,0,0,.12);
  --fd-linea-clara:rgba(0,0,0,.16);
  --fd-transicion:.28s cubic-bezier(.2,.7,.3,1);
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  body{
    --pmo-sombra-1:0 2px 4px color-mix(in srgb,var(--e-global-color-verde-noche) 4%,transparent),0 12px 28px color-mix(in srgb,var(--e-global-color-verde-noche) 5%,transparent);
    --pmo-sombra-2:0 10px 20px color-mix(in srgb,var(--e-global-color-verde-noche) 7%,transparent),0 26px 56px color-mix(in srgb,var(--e-global-color-verde-noche) 13%,transparent);
    --fd-sombra-imagen:0 30px 60px color-mix(in srgb,var(--e-global-color-verde-noche) 28%,transparent),0 8px 18px color-mix(in srgb,var(--e-global-color-verde-noche) 16%,transparent);
    --fd-sombra-imagen-2:0 40px 80px color-mix(in srgb,var(--e-global-color-verde-noche) 32%,transparent),0 10px 22px color-mix(in srgb,var(--e-global-color-verde-noche) 18%,transparent);
    --fd-sombra-galeria:0 6px 18px color-mix(in srgb,var(--e-global-color-verde-noche) 10%,transparent);
    --fd-sombra-boton:0 12px 28px color-mix(in srgb,var(--e-global-color-texto-fuerte) 30%,transparent);
    --fd-sombra-pestana:0 10px 24px color-mix(in srgb,var(--e-global-color-primary) 28%,transparent);
    --fd-sombra-flotante:-8px 10px 30px color-mix(in srgb,var(--e-global-color-verde-noche) 34%,transparent);
    --fd-sombra-flotante-2:-10px 12px 36px color-mix(in srgb,var(--e-global-color-verde-noche) 44%,transparent);
    --fd-sombra-barra:0 -4px 20px color-mix(in srgb,var(--e-global-color-verde-noche) 22%,transparent);
    --fd-sombra-cabecera:0 6px 22px color-mix(in srgb,var(--e-global-color-verde-noche) 10%,transparent);
    --fd-sombra-formulario:0 28px 70px color-mix(in srgb,var(--e-global-color-texto-fuerte) 32%,transparent);
    --fd-anillo-foco:0 0 0 4px color-mix(in srgb,var(--e-global-color-accent) 16%,transparent);
    --fd-linea-clara:color-mix(in srgb,var(--e-global-color-sobre-oscuro) 16%,transparent);
  }
}

html{scroll-behavior:smooth}

/* ===== Utilidades pmo-* (estándar visual §3.2; contrato §4.9.3) ===== */
.pmo-superficie{background:var(--e-global-color-superficie)}
.pmo-superficie-2{background:var(--e-global-color-superficie-2)}
.pmo-tarjeta{background:var(--e-global-color-superficie);border:var(--pmo-borde)}
/* fd-tarjeta-marca: la tarjeta en tono de marca (componentes.tarjeta(tono="marca")).
   Comparte radio, sombra y hover con pmo-tarjeta, pero no lleva esa clase:
   Test-PmoEstilo la lee como fondo «superficie» antes que el degradado y mediría
   el texto claro contra blanco (docs/decisiones.md, 07/10/2026). */
.pmo-tarjeta,.fd-tarjeta-marca{border-radius:var(--pmo-radio-m);box-shadow:var(--pmo-sombra-1);
  transition:box-shadow .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s cubic-bezier(.2,.7,.3,1)}
.pmo-tarjeta:hover,.pmo-tarjeta:focus-within,.fd-tarjeta-marca:hover,.fd-tarjeta-marca:focus-within{
  box-shadow:var(--pmo-sombra-2);transform:translateY(-3px)}
.pmo-tarjeta:hover,.pmo-tarjeta:focus-within{border-color:var(--e-global-color-accent)}
/* Una tarjeta que es un widget (el acordeón de preguntas, fd-faq): Elementor da a
   todo widget `transition:...transform .4s` con (0,2,0)
   (.elementor-element:not(:has(.elementor-widget-container))) y ganaba a la de
   .pmo-tarjeta: subía en 0,4 s, por encima de los 320 ms del estándar §7. */
.elementor-element.elementor-widget.pmo-tarjeta{transition:box-shadow .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s cubic-bezier(.2,.7,.3,1)}
.pmo-deg-marca{background:var(--pmo-deg-marca)}
.pmo-velo{position:relative;isolation:isolate}
.pmo-velo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--pmo-deg-velo)}
.pmo-medida p,.pmo-medida li{max-width:var(--pmo-medida)}
.pmo-ritmo{padding-block:var(--pmo-ritmo)}

/* Revelado al hacer scroll: las clases las pone componentes.seccion() y su
   efecto lo define snippets/revelado-scroll.php del kit, instalado en Code
   Snippets del sitio; sin el snippet no hacen nada y todo se ve igual. Aquí
   solo se anula en la vista previa del editor de Elementor: al editar un
   elemento, el editor lo vuelve a pintar sin la clase de «ya visto» del
   snippet y se quedaría con opacidad 0 en el lienzo mientras se edita.
   (El snippet ya no actúa en la vista previa desde su versión del 08/10/2026;
   esta regla queda de reserva.) El revelado nunca va en una tarjeta: su
   `.pmo-js .pmo-reveal.pmo-visto{transform:none}` pesa más que el hover de
   .pmo-tarjeta y lo anulaba (componentes.TARJETAS). */
body.elementor-editor-active .pmo-reveal,
body.elementor-editor-active .pmo-reveal-escalonado>*{opacity:1;transform:none;transition:none}

/* Medida de lectura (estándar §4): 36em sobre el propio párrafo, también en
   las tarjetas anchas del bento y en las respuestas del acordeón, que medían
   hasta 38 y 48 em; en las cajas de llamada (43-45 em a 1.024 px) y en la
   entradilla del contacto (42 em a 1.024 px, 39 a 768). La entradilla de una
   cabecera de sección va centrada: el párrafo se centra en su caja y sus
   líneas se equilibran, porque al recortarla a 36em dejaba una palabra sola
   en la segunda línea. En tablet la caja de llamada se apila y centra el
   botón, así que su párrafo también se centra en la caja. */
.pmo-tarjeta p,.fd-tarjeta-marca p,.fd-faq .elementor-widget-text-editor p,.fd-caja p,
.pmo-patron-formulario-partido .elementor-widget-text-editor p{max-width:var(--pmo-medida)}
.fd-entradilla p{max-width:var(--pmo-medida);margin-inline:auto;text-wrap:balance}
@media (max-width:1024px){.fd-caja p{margin-inline:auto}}

/* Margen lateral entre 1025 y 1328 px (trampa 54 del kit): se resta al ancho
   máximo, así que por encima de 1328 px no cambia nada. Ligado al
   container_width del kit (1200). Son 64 px por lado y no 48 porque en ese
   margen vive la pestaña del CTA flotante (48 px de ancho, ver más abajo):
   así no tapa contenido en ningún ancho de escritorio. */
@media (min-width:1025px){.e-con{--container-max-width:min(1200px,calc(100vw - 128px))}}

/* Un hijo flex sin min-width:0 no encoge por debajo de su contenido. */
.e-con>.e-con,.e-con-inner>.e-con{min-width:0}

/* ===== Titulares =====
   El <br> manual equilibra el titular en escritorio; en pantalla estrecha
   estorba. display:none no deja espacio: todo <br> de un H1/H2 lleva un
   espacio delante en el origen (trampa 5 de tools/README.md). */
h1,h2{text-wrap:balance}
@media (max-width:700px){h1 br,h2 br{display:none}}

/* Antetítulo con filete: heading con la clase fd-filete. inline-flex para que
   la alineación nativa del widget (izquierda / centro) siga mandando. */
.fd-filete .elementor-heading-title{display:inline-flex;align-items:center;gap:14px}
.fd-filete .elementor-heading-title::before{content:"";flex:none;width:46px;height:3px;border-radius:2px;
  background:var(--e-global-color-accent)}
/* Antetítulo centrado en móvil (fd-ante-centrado, componentes.antetitulo()):
   líneas equilibradas, como los H1/H2, para que no quede una palabra sola. */
@media (max-width:767px){.fd-ante-centrado .elementor-heading-title{text-wrap:balance}}

/* ===== Portada (patrón hero-velo): velo lateral, denso donde va el texto =====
   Tres tramos, medidos sobre la foto real con todo el texto de la portada
   (antetítulo, H1, entradilla y avales), no solo el antetítulo:
   - Hasta 1024 px el texto ocupa todo el ancho: velo plano. Antes empezaba en
     900 y entre 901 y 1024 el H1 y un aval quedaban sobre la parte clara del
     velo lateral (1,78:1 y 1,75:1 a 1.024 px).
   - De 1025 a 1366 px el bloque de texto (700 px) llega más a la derecha en
     proporción: velo lateral más denso hasta el 78 %. Antes la entradilla
     bajaba a 2,67:1 a 1.025 px y el H1 a 3,34:1.
   - Desde 1367 px, el velo de siempre, con más foto a la vista.
   Todos los textos de la portada por encima de 4,7:1 de 960 a 1.440 px
   (docs/decisiones.md, tanda v4). */
.fd-hero{--pmo-deg-velo:linear-gradient(100deg,color-mix(in srgb,var(--e-global-color-verde-noche) 94%,transparent) 0%,color-mix(in srgb,var(--e-global-color-verde-noche) 86%,transparent) 32%,color-mix(in srgb,var(--e-global-color-verde-noche) 58%,transparent) 62%,color-mix(in srgb,var(--e-global-color-verde-noche) 18%,transparent) 100%)}
@media (min-width:1025px) and (max-width:1366px){
  .fd-hero{--pmo-deg-velo:linear-gradient(100deg,color-mix(in srgb,var(--e-global-color-verde-noche) 94%,transparent) 0%,color-mix(in srgb,var(--e-global-color-verde-noche) 90%,transparent) 45%,color-mix(in srgb,var(--e-global-color-verde-noche) 62%,transparent) 78%,color-mix(in srgb,var(--e-global-color-verde-noche) 22%,transparent) 100%)}
}
@media (max-width:1024px){.fd-hero{--pmo-deg-velo:linear-gradient(var(--e-global-color-velo),var(--e-global-color-velo))}}

/* ===== Banda de cifras: textura diagonal y separadores ===== */
.fd-textura{position:relative}
.fd-textura::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--e-global-color-sobre-oscuro) 5%,transparent) 0 1px,transparent 1px 10px)}
.fd-textura>.e-con-inner{position:relative;z-index:1}
.fd-cifra+.fd-cifra{border-left:1px solid var(--fd-linea-clara)}
@media (max-width:1024px){
  .fd-cifra:nth-child(odd){border-left:0}
  .fd-cifra:nth-child(n+3){border-top:1px solid var(--fd-linea-clara)}
}

/* ===== Imagen tratada (widget imagen con fd-img): perspectiva, sombra y marco ===== */
.fd-img{position:relative}
.fd-img::before{content:"";position:absolute;right:-18px;bottom:-18px;width:62%;height:62%;z-index:0;
  border:3px solid var(--e-global-color-accent);border-radius:8px;opacity:.55;pointer-events:none}
.fd-img img{position:relative;z-index:1;display:block;border-radius:6px;box-shadow:var(--fd-sombra-imagen);
  transform:perspective(1400px) rotateY(-6deg) rotate(-1.4deg);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease}
.fd-img:hover img{transform:perspective(1400px) rotateY(-2deg) translateY(-6px);box-shadow:var(--fd-sombra-imagen-2)}
.fd-img--der img{transform:perspective(1400px) rotateY(6deg) rotate(1.4deg)}
.fd-img--der:hover img{transform:perspective(1400px) rotateY(2deg) translateY(-6px)}
@media (max-width:1024px){
  .fd-img img,.fd-img:hover img,.fd-img--der img,.fd-img--der:hover img{transform:none}
  .fd-img::before{display:none}
}

/* ===== Botones (widget botón con fd-boton) =====
   Los colores de reposo y de hover van en los controles del widget; aquí solo
   la elevación y el foco. Regla de la familia: un botón nunca pasa al color
   del fondo que tiene detrás (tools/README.md). */
.fd-boton .elementor-button{transition:background-color .28s cubic-bezier(.2,.7,.3,1),color .28s cubic-bezier(.2,.7,.3,1),border-color .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s cubic-bezier(.2,.7,.3,1)}
.fd-boton .elementor-button:hover,.fd-boton .elementor-button:focus{transform:translateY(-3px);box-shadow:var(--fd-sombra-boton)}
.elementor-button:focus-visible{outline:3px solid var(--e-global-color-accent);outline-offset:3px}

/* Enlaces dentro de un párrafo */
.elementor-widget-text-editor a{text-decoration:underline}

/* ===== Pestañas (widget pestañas anidadas con fd-pestanas) =====
   Colores, bordes y tipografía van en los controles del widget, que es donde
   el cliente los cambia. Aquí solo la sombra de la activa y el foco. */
.fd-pestanas .e-n-tab-title{transition:background-color .28s cubic-bezier(.2,.7,.3,1),color .28s cubic-bezier(.2,.7,.3,1),border-color .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s cubic-bezier(.2,.7,.3,1)}
.fd-pestanas .e-n-tab-title[aria-selected="true"]{box-shadow:var(--fd-sombra-pestana)}
.fd-pestanas .e-n-tab-title:focus-visible{outline:3px solid var(--e-global-color-accent);outline-offset:3px}
/* Pestañas con la navegación al lado (fd-pestanas--lateral, componentes.pestanas()).
   Entre 1025 y 1279 px la columna de texto del panel se queda estrecha y el
   titular del panel (rol pestana: 34 px en mayúsculas) se salía de ella: 41 px
   en una hermana, y en la maestra 2 px y a 14 px de la pestaña del CTA. Aquí se
   redefine la variable del rol en ese ámbito: el titular sigue leyendo el
   global del kit y no hay guerra de especificidad con el CSS del widget.
   Ojo: si el cliente cambia el tamaño del rol en Ajustes del sitio, en este
   tramo y en estas pestañas sigue mandando el 28 de aquí. */
@media (min-width:1025px) and (max-width:1279px){
  .fd-pestanas--lateral{--e-global-typography-pestana-font-size:28px}
}

/* ===== Cajas de llamada dentro de una banda ===== */
.fd-caja{border-radius:var(--pmo-radio-m)}

/* ===== Pasos: conector entre tarjetas (patrón pasos, en los tres anchos) =====
   Escritorio (fila de 4) y tablet (2 por fila, solo entre la 1.ª y la 2.ª de
   cada fila): chevrón dentro de un círculo de 28 px en verde tenue, a la
   altura del icono (relleno superior 34 + mitad del icono 54 / 2 - 14) y
   centrado en el hueco de 20 px entre tarjetas. El chevrón son dos trazos
   de degradado: ni un glifo que dependa de la fuente ni un color escrito.
   Móvil (una columna): línea discontinua vertical que baja desde el centro
   del icono (relleno 28 + 54 / 2) y cruza el hueco hasta la tarjeta siguiente. */
@media (min-width:768px){
  .fd-pasos>.fd-paso:not(:last-child)::after{content:"";position:absolute;z-index:2;top:47px;right:-24px;
    width:28px;height:28px;box-sizing:border-box;border:var(--pmo-borde);border-radius:50%;
    box-shadow:var(--pmo-sombra-1);pointer-events:none;
    background:
      linear-gradient(to top right,transparent calc(50% - 1.2px),var(--e-global-color-primary) calc(50% - 1.1px) calc(50% + 1.1px),transparent calc(50% + 1.2px)) 10px 6px/7px 7px no-repeat,
      linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--e-global-color-primary) calc(50% - 1.1px) calc(50% + 1.1px),transparent calc(50% + 1.2px)) 10px 13px/7px 7px no-repeat,
      var(--e-global-color-verde-tenue)}
}
@media (min-width:768px) and (max-width:1024px){
  .fd-pasos>.fd-paso:nth-child(even)::after{content:none}
}
@media (max-width:767px){
  .fd-pasos>.fd-paso:not(:last-child)::after{content:"";position:absolute;left:55px;top:100%;height:20px;
    border-left:2px dashed var(--e-global-color-accent);pointer-events:none}
}

/* ===== Galería (widget galería básica con fd-galeria): mosaico =====
   Selectores de cuatro clases: el CSS del propio widget (.elementor-image-gallery
   .gallery-columns-4 .gallery-item, tres clases) se carga DESPUÉS del kit y,
   con la misma especificidad, ganaba y dejaba cada foto al 25 %.
   La primera foto ocupa 2x2 y la sexta 2x1, así que n fotos (n >= 6) llenan
   n + 4 celdas: el mosaico cierra sin huecos si n es múltiplo de 4 en
   escritorio (4 columnas) y par en tablet y móvil (2 columnas). Con 8, las
   tres cosas. grid-auto-flow:dense sube las fotos a los huecos que dejan las
   grandes, pero no inventa celdas: con 7 queda una vacía al final. */
.fd-galeria .elementor-image-gallery .gallery{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;grid-auto-flow:dense;gap:14px;margin:0}
.fd-galeria .elementor-image-gallery .gallery .gallery-item{width:auto;max-width:none;margin:0;padding:0;
  position:relative;overflow:hidden;border-radius:12px;box-shadow:var(--fd-sombra-galeria)}
.fd-galeria .elementor-image-gallery .gallery .gallery-item:nth-child(1){grid-column:span 2;grid-row:span 2}
.fd-galeria .elementor-image-gallery .gallery .gallery-item:nth-child(6){grid-column:span 2}
.fd-galeria .elementor-image-gallery .gallery .gallery-icon,
.fd-galeria .elementor-image-gallery .gallery .gallery-icon a{display:block;height:100%}
.fd-galeria .elementor-image-gallery .gallery .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;
  border:0;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.fd-galeria .elementor-image-gallery .gallery .gallery-icon a::after{content:"";position:absolute;inset:0;opacity:0;
  pointer-events:none;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--e-global-color-verde-noche) 45%,transparent) 100%);transition:opacity .32s ease}
.fd-galeria .elementor-image-gallery .gallery .gallery-item:hover img{transform:scale(1.07)}
.fd-galeria .elementor-image-gallery .gallery .gallery-item:hover .gallery-icon a::after{opacity:1}
.fd-galeria .elementor-image-gallery .gallery br{display:none}
@media (max-width:1024px){
  .fd-galeria .elementor-image-gallery .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
}

/* Portada en móvil.
   Avales: uno por línea, alineados a la izquierda entre sí y el bloque
   centrado (centrados uno a uno, los iconos quedaban a tres alturas). El
   .elementor-kit-8 lleva body y una clase más porque el margen negativo de la lista
   en línea lo pone el CSS del widget con cinco clases y se carga después.
   Antetítulo: el filete pasa encima del texto, que en dos líneas centradas
   dejaba la raya colgando a la izquierda de la primera. */
@media (max-width:767px){
  body .e-con .elementor-element.fd-avales .elementor-icon-list-items.elementor-inline-items{flex-direction:column;
    align-items:flex-start;width:fit-content;margin-inline:auto}
  .fd-avales .elementor-icon-list-item{align-items:flex-start;text-align:start}
  .fd-hero .fd-filete .elementor-heading-title{flex-direction:column;gap:10px}
}

/* ===== Vídeo con póster (widget vídeo con fd-video, componentes.video(poster=...)) =====
   El póster se ve entero, sin recortar: el CSS del widget lo pone en «cover»
   (como fondo en modo en línea y como <img> en modo ventana), y un póster que
   no sea 16:9 perdía los bordes, que es donde suele ir su texto. Lo que no
   cubre queda en el fondo de reserva del widget (verde noche). Una clase más
   que el CSS del widget, que se carga después del kit (trampa 4 de
   tools/README.md). */
.fd-video.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay{
  background-size:contain;background-repeat:no-repeat}
.fd-video.elementor-widget-video .elementor-custom-embed-image-overlay img{object-fit:contain}

/* ===== Fichas (municipios, modelos, «Va bien en»): píldoras con borde y aire entre filas =====
   El hueco horizontal es el «Espacio entre» del widget (editable); aquí solo
   el vertical, que el widget no tiene en modo en línea. El .elementor-kit-8 de la
   píldora lleva tres clases: el CSS del widget (.elementor-widget
   .elementor-icon-list-item{padding:0}, dos clases) se carga después del kit
   y con dos el relleno nunca llegaba a aplicarse (trampa 4 de tools/README.md). */
.fd-fichas .elementor-icon-list-items{row-gap:8px}
.fd-fichas .elementor-icon-list-items .elementor-icon-list-item{background:var(--e-global-color-verde-tenue);border:var(--pmo-borde);
  border-radius:50px;padding:6px 14px}

/* ===== Preguntas frecuentes (acordeón anidado con fd-faq) ===== */
.fd-faq{overflow:hidden}
.fd-faq .e-n-accordion-item+.e-n-accordion-item{border-top:var(--pmo-borde)}
.fd-faq .e-n-accordion-item-title{transition:background-color .28s cubic-bezier(.2,.7,.3,1),color .28s cubic-bezier(.2,.7,.3,1)}
.fd-faq .e-n-accordion-item-title:focus-visible{outline:3px solid var(--e-global-color-accent);outline-offset:-3px}

/* ===== Contacto (patrón formulario-partido): velo y textura sobre la foto ===== */
.fd-contacto{--pmo-deg-velo:repeating-linear-gradient(135deg,color-mix(in srgb,var(--e-global-color-accent) 7%,transparent) 0 1px,transparent 1px 9px),
  linear-gradient(150deg,color-mix(in srgb,var(--e-global-color-verde-noche) 96%,transparent) 0%,color-mix(in srgb,var(--e-global-color-verdeoscuro) 93%,transparent) 55%,color-mix(in srgb,var(--e-global-color-verde-noche) 97%,transparent) 100%)}
@media (max-width:900px){
  .fd-contacto{--pmo-deg-velo:linear-gradient(150deg,color-mix(in srgb,var(--e-global-color-verde-noche) 96%,transparent) 0%,color-mix(in srgb,var(--e-global-color-verdeoscuro) 93%,transparent) 55%,color-mix(in srgb,var(--e-global-color-verde-noche) 97%,transparent) 100%)}
}
.fd-tarjeta-form{box-shadow:var(--fd-sombra-formulario)}
.fd-tarjeta-form .elementor-field-textual{padding:13px 15px;transition:border-color .2s ease,box-shadow .2s ease}
.fd-tarjeta-form .elementor-field-textual:focus{border-color:var(--e-global-color-accent);background-color:var(--e-global-color-superficie);
  box-shadow:var(--fd-anillo-foco);outline:none}
.fd-tarjeta-form .elementor-field-type-acceptance{font-size:14px}
/* El enlace de la casilla de privacidad salía en el rosa de enlace de Hello Elementor. */
.fd-tarjeta-form .elementor-field-type-acceptance a{color:var(--e-global-color-primary)}

/* ===== Cabecera fija (contenedor fd-cabecera de la plantilla de cabecera) =====
   La fija el efecto «Sticky» de Elementor Pro (componentes.cabecera_sitio). Al
   bajar 40 px el efecto le pone elementor-sticky--effects y aquí gana una
   sombra suave que la separa del contenido que pasa por debajo. El espaciador
   que deja el efecto (un clon invisible) no lleva sombra. */
.fd-cabecera.elementor-sticky--effects:not(.elementor-sticky__spacer){box-shadow:var(--fd-sombra-cabecera)}

/* ===== Pie ===== */
.fd-pie strong{color:var(--e-global-color-sobre-oscuro)}
.fd-pie a{text-decoration:none}
.fd-pie-grupo a,.fd-pie a[href*="publimarketing-online.com"]{text-decoration:underline}

/* ===== CTA flotante (contenedor fd-cta-flot de la plantilla de cabecera) =====
   Una sola acción primaria: pedir presupuesto (componentes.cta_flotante).
   Escritorio: una sola pestaña vertical, «Pide presupuesto», pegada al borde
   derecho con el texto girado (se lee de abajo arriba); el teléfono va oculto
   en escritorio con el control nativo y vive en la cabecera fija. Mide 48 px
   de ancho, así que cabe en el margen lateral (64 px como mínimo, ver
   --container-max-width) y no tapa contenido en ningún ancho. Solo se gira
   el contenido del botón, no el botón: el relleno y el radio de los
   controles siguen siendo los físicos.
   Tablet y móvil: barra a todo el ancho abajo con los dos, presupuesto en
   verde de marca. El relleno del body evita que la barra tape el pie si el
   JS no llega a ocultarla; con el JS activo (html.fd-cta-auto) sobra. */
.e-con.fd-cta-flot{position:fixed;right:0;top:50%;left:auto;bottom:auto;transform:translateY(-50%);
  z-index:9990;width:auto;transition:opacity .3s ease,transform .3s ease}
.e-con.fd-cta-flot.oculto{opacity:0;transform:translateY(-50%) translateX(120%);pointer-events:none}
.fd-cta-flot .elementor-button{box-shadow:var(--fd-sombra-flotante);white-space:nowrap;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.fd-cta-flot .elementor-button:hover,.fd-cta-flot .elementor-button:focus{box-shadow:var(--fd-sombra-flotante-2)}
@media (min-width:1025px){
  .e-con.fd-cta-flot{align-items:stretch}
  .fd-cta-flot .elementor-button{width:100%;writing-mode:vertical-rl}
  .fd-cta-flot .elementor-button-content-wrapper{transform:rotate(180deg)}
  .fd-cta-flot .elementor-button-icon svg{transform:rotate(90deg)}
}
@media (max-width:1024px){
  .e-con.fd-cta-flot{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;box-shadow:var(--fd-sombra-barra)}
  .e-con.fd-cta-flot.oculto{transform:translateY(110%)}
  .fd-cta-flot>.elementor-widget-button{flex:1 1 50%}
  .fd-cta-flot .elementor-button{width:100%;justify-content:center;box-shadow:none}
  body{padding-bottom:60px;background-color:var(--e-global-color-verde-noche)}
  html.fd-cta-auto body{padding-bottom:0}
}

/* ===== Piezas sin caja ===== */
/* Widgets que solo llevan datos o un script (JSON-LD, comportamiento del CTA):
   no son contenido visible y no deben ocupar hueco en el contenedor. */
.fd-datos{display:none}

/* Huecos pendientes del cliente, visibles a propósito (componentes.pendiente) */
.fd-falta{max-width:82ch;padding:13px 16px;border-left:4px solid var(--e-global-color-pendiente);border-radius:4px;
  background:color-mix(in srgb,var(--e-global-color-pendiente) 10%,transparent)}
.fd-falta strong{display:block;letter-spacing:.08em;font-size:11px;text-transform:uppercase;margin-bottom:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pmo-tarjeta,.fd-tarjeta-marca,.elementor-element.elementor-widget.pmo-tarjeta,
  .fd-img img,.fd-boton .elementor-button,.fd-pestanas .e-n-tab-title,
  .fd-galeria .elementor-image-gallery .gallery .gallery-item img,.e-con.fd-cta-flot,.fd-cta-flot .elementor-button{transition:none}
  .pmo-tarjeta:hover,.pmo-tarjeta:focus-within,.fd-tarjeta-marca:hover,.fd-tarjeta-marca:focus-within,
  .fd-boton .elementor-button:hover,
  .fd-galeria .elementor-image-gallery .gallery .gallery-item:hover img{transform:none}
}/* End custom CSS */