:root{--container-max:1180px;--green:#2EB98F;--green-dark:#239572;--green-soft:rgba(46,185,143,.10);--purple:#4B2E83;--purple-dark:#3a2367;--purple-soft:rgba(75,46,131,.10);--black:#262626;--gray-700:#555;--gray-500:#8a8a8a;--gray-300:#d8d8d2;--gray-100:#efeee5;--cream:#fcfcf2;--white:#fff;--serif-h:'Manrope',system-ui,sans-serif;--serif-b:'Inter',system-ui,sans-serif;--r-sm:8px;--r-md:14px;--r-lg:20px;--r-pill:999px;--shadow-sm:0 2px 8px rgba(38,38,38,.06);--shadow-md:0 6px 24px rgba(38,38,38,.08);--shadow-lg:0 16px 48px rgba(38,38,38,.10);--t:.22s cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--serif-b);background:var(--cream);color:var(--black);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;display:block;height:auto}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none}ul{list-style:none}svg{display:block}
h1,h2,h3,h4{font-family:var(--serif-h);line-height:1.15;letter-spacing:-.015em}h1{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:800}h2{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700}h3{font-size:1.25rem;font-weight:700}h4{font-size:1.05rem;font-weight:700}p{color:var(--gray-700)}
.container{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem}section{padding:5.5rem 0}
.page-hero{padding:3.5rem 0 2.5rem;text-align:center}.page-hero .section-intro{margin:0 auto}
.section-label{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:.85rem}.section-title{margin-bottom:1rem}.section-intro{max-width:720px;font-size:1.05rem;color:var(--gray-700);margin-bottom:3rem}
.cg-topbar{background:var(--black);color:rgba(252,252,242,.82);font-size:.8rem;position:relative;z-index:101}
.topbar-inner{max-width:var(--container-max);margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.topbar-hours{display:flex;align-items:center;gap:.4rem;color:rgba(252,252,242,.65);white-space:nowrap}
.topbar-hours svg{width:14px;height:14px;flex:none;color:var(--green)}
.topbar-right{display:flex;align-items:center;gap:1.15rem}
.topbar-whatsapp{display:inline-flex;align-items:center;gap:.4rem;color:rgba(252,252,242,.9);font-weight:600;transition:color var(--t)}
.topbar-whatsapp:hover{color:#3ddc84}
.topbar-whatsapp svg{width:15px;height:15px;flex:none;fill:#3ddc84}
.topbar-newsletter{display:inline-flex;align-items:center;gap:.4rem;color:rgba(252,252,242,.9);font-weight:600;font-size:inherit;transition:color var(--t)}
.topbar-newsletter:hover{color:var(--green)}
.topbar-newsletter svg{width:14px;height:14px;flex:none}
.cg-topbar .lang-sw a{color:rgba(252,252,242,.68)}
.cg-topbar .lang-sw a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.cg-topbar .lang-sw a.active{color:var(--green);background:rgba(46,185,143,.16)}
.cg-topbar .lang-sw .sep{color:rgba(252,252,242,.25)}
.cg-topbar .lang-sw .flag-icon{outline-color:rgba(255,255,255,.2)}
.site-header{position:sticky;top:0;z-index:100;background:rgba(252,252,242,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(38,38,38,.07);transition:background var(--t)}
/* Bug real (reportado por el usuario 2 veces — la primera vez, v0.28.1,
   se "corrigió" mal): WordPress agrega su propio overflow a
   `.wp-site-blocks` (el contenedor que envuelve TODO el sitio, incluido
   el header) cuando `useRootPaddingAwareAlignments` está activo en
   theme.json, para que las secciones de ancho completo no generen scroll
   horizontal.
   El arreglo de v0.28.1 (forzar aquí `overflow-y:visible!important`)
   parecía razonable pero NO funciona: por especificación de CSS, si un
   eje tiene un valor distinto de "visible" (aquí, overflow-x:hidden) y
   el otro está en "visible", ESE TAMBIÉN se recalcula a "auto" — pasa
   con la resolución del valor computado, después de la cascada, así que
   ningún !important sobre overflow-y lo puede evitar. Cualquier overflow
   que no sea "visible" en AMBOS ejes de este contenedor sigue rompiendo
   el `position:sticky`/`position:fixed` del header (child directo), sin
   importar qué tan "visible" se vea overflow-y en el CSS fuente.
   Arreglo real: el recorte horizontal se quita de aquí — `.wp-site-blocks`
   se queda con overflow:visible en los 2 ejes (su valor por default, el
   único que no rompe nada) — y se aplica en su lugar a `<main>` y al
   footer, que sí pueden vivir clippeados porque ninguno de los dos
   contiene un position:sticky/fixed que necesite escapar hacia arriba. */
/* body:not(.home) en el primer selector — no en el segundo — porque en
   la portada el Hero necesita salirse literalmente del ancho de <main>
   con la técnica 100vw/margen negativo de más abajo; un <main>
   recortado (overflow-x:hidden) se lo cortaría de vuelta. El resto de
   las secciones de Inicio nunca se salen del ancho normal, así que
   perder esta protección ahí no representa ningún riesgo real. */
body:not(.home) .wp-site-blocks>main,
.wp-site-blocks>footer{overflow-x:hidden}
/* La protección contra scroll horizontal se mueve de <main> a <body>
   SOLO en la portada — el "escape" de 100vw del Hero necesita que nada
   entre él y el borde real de la pantalla lo recorte, pero conviene un
   límite de emergencia por si 100vw mide un pixel de más que el ancho
   visible real (pasa en algunos navegadores, por la barra de scroll).
   Seguro aquí porque en la portada el header ya va con position:fixed
   siempre (ver más abajo) — a diferencia de position:sticky, fixed no
   depende de que los ancestros tengan overflow:visible. */
body.home{overflow-x:hidden}

/**
 * Comportamiento del encabezado al hacer scroll — configurable desde
 * Apariencia → Common Ground → Header (pedido explícito del usuario).
 * Por default ("Solo el menú"), sin ninguna de estas 2 clases: el topbar
 * se desplaza normal y solo la barra de logo/menú (.site-header) se queda
 * fija — mismo comportamiento de siempre, ya reparado arriba.
 * :not(.home) en las 3 reglas de abajo: en la portada, el header fijo y
 * su compensación de espacio ya los maneja por completo el bloque
 * "body.home .cg-topbar/.site-header" de más abajo — si esta regla
 * genérica también aplicara ahí (p. ej. con el modo "Todo el header"
 * elegido en el panel), el padding-top que reserva quedaría DUPLICADO
 * con el de "body.home main", dejando un espacio en blanco de más
 * arriba del Hero (bug real reportado por el usuario: "espacio grande
 * del menu blanco" que desaparecía solo al hacer scroll, porque scroll
 * simplemente lo deja atrás — no es que algo se oculte). */
body.cg-header-mode-all:not(.home) .cg-topbar{position:fixed;top:0;left:0;right:0;z-index:101}
body.cg-header-mode-all:not(.home) .site-header{position:fixed;top:var(--cg-topbar-h,0px);left:0;right:0;z-index:100}
body.cg-header-mode-all:not(.home){padding-top:var(--cg-header-h,0px)}
body.cg-header-mode-none .cg-topbar,
body.cg-header-mode-none .site-header{position:static}

/* "Volverse semitransparente al hacer scroll" (casilla aparte, cualquier
   modo) — site.js agrega/quita .is-scrolled según la posición del scroll. */
body.cg-header-transparent-on-scroll .cg-topbar.is-scrolled{background:rgba(38,38,38,.55)}
body.cg-header-transparent-on-scroll .site-header.is-scrolled{background:rgba(252,252,242,.55)}
.header-inner{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;height:78px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo-mark{display:flex;align-items:center;flex-shrink:0}.logo-mark img{height:48px;width:auto}
.nav-main{display:flex;align-items:center}.nav-main .wp-block-navigation__container{display:flex;align-items:center;gap:1.75rem;font-size:.92rem;font-weight:500;list-style:none;margin:0;padding:0}.nav-main .wp-block-navigation-item__content,.nav-mobile .wp-block-navigation-item__content{color:var(--gray-700);padding:0;transition:color var(--t)}.nav-main .wp-block-navigation-item__content:hover,.nav-mobile .wp-block-navigation-item__content:hover{color:var(--purple)}
/* !important aquí y en ".nav-main{display:none}" del @media de abajo:
   bug real, encontrado inspeccionando el sitio en vivo con un navegador
   (no se veía ni en capturas ni leyendo el CSS) — el propio bloque
   core/navigation de WordPress agrega la clase "is-layout-flex", y el
   CSS global de WordPress (global-styles-inline-css) trae la regla
   "body .is-layout-flex{display:flex}", que por tener 1 clase + 1
   elemento (especificidad 0-1-1) le gana a un simple ".nav-mobile" o
   ".nav-main" (0-1-0) — sin importar el orden en el archivo ni el
   media query. Resultado real, confirmado con getComputedStyle() en
   vivo: los DOS menús (el de escritorio Y el completo de hamburguesa,
   este último incluso sin la clase .open) se mostraban encimados
   SIEMPRE en celular, en cualquier ancho de pantalla. Mismo motivo por
   el que las casillas de "Visibilidad por dispositivo" del panel
   (Apariencia → Common Ground) ya usaban !important desde antes.

   v0.64.6: ese !important tiene un efecto secundario que se rompió al
   agregarlo — ".nav-mobile.open{display:flex}" (más abajo, en el
   @media) ya NO podía volver a mostrar el menú al abrirlo con el botón
   de hamburguesa: un !important le gana a un rival SIN !important sin
   importar qué tan específico sea su selector. Hubo que agregarle
   !important también a esa regla ".open" para que el propio JS del
   menú de hamburguesa volviera a funcionar. */
.nav-mobile{display:none!important}
.header-right{display:flex;align-items:center;gap:1rem}.lang-sw{display:flex;align-items:center;gap:.15rem;font-size:.78rem;font-weight:700;letter-spacing:.04em}.lang-sw a{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .5rem;border-radius:6px;color:var(--gray-700);transition:color var(--t),background var(--t)}.lang-sw a:hover{color:var(--purple)}.lang-sw a.active{color:var(--green-dark);background:var(--green-soft)}.lang-sw .sep{color:var(--gray-300);user-select:none}.lang-sw .flag-icon{width:16px;height:11px;flex:none;border-radius:2px;outline:1px solid rgba(38,38,38,.15);outline-offset:-1px}
/* Reservado para WooCommerce (fase 7) — ver PLAN-MIGRACION.md §8. Oculto de fábrica (Apariencia → Common Ground → Header) hasta que la tienda esté activa; el espacio y el estilo ya quedan listos para no rehacer el header ese día. */
.currency-sw{display:flex;align-items:center;margin-left:.15rem;padding-left:.5rem;border-left:1px solid rgba(252,252,242,.18)}.currency-sw button{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;padding:.35rem .5rem;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:rgba(252,252,242,.68);cursor:pointer;transition:color var(--t)}.currency-sw button:hover{color:var(--white)}.currency-sw .cy-caret{width:9px;height:9px;opacity:.7}
.header-commerce{display:flex;align-items:center;gap:.35rem;padding-right:.35rem;margin-right:.35rem;border-right:1px solid rgba(38,38,38,.1)}.header-account{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--gray-700);transition:color var(--t),background var(--t)}.header-account:hover{color:var(--purple);background:var(--gray-100)}.header-account svg{width:20px;height:20px}.header-cart{display:inline-flex;align-items:center;gap:.35rem;height:38px;padding:0 .6rem 0 .4rem;border-radius:var(--r-pill);color:var(--gray-700);transition:color var(--t),background var(--t)}.header-cart:hover{color:var(--purple);background:var(--gray-100)}.header-cart .cart-icon-wrap{position:relative;display:inline-flex}.header-cart svg{width:20px;height:20px}.cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 3px;border-radius:50%;background:var(--green);color:var(--white);font-size:.62rem;font-weight:700;line-height:16px;text-align:center}.header-cart .cart-total{font-size:.82rem;font-weight:600}
@media (max-width:980px){.header-commerce{padding-right:0;margin-right:0;border-right:0}.header-cart .cart-total{display:none}}

/* Header minimalista de checkout (parts/header-checkout.html) + indicador de
   pasos (templates/page-checkout.html) — pedido explícito del usuario.
   Mismo lenguaje visual que .lf-step-num/.lf-step-label (formularios de
   cg-forms) para que se sienta consistente con el resto del sitio. */
.checkout-header{background:var(--white);border-bottom:1px solid var(--gray-100);padding:1.1rem 0}
.checkout-header-inner{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;display:flex;justify-content:center}
.checkout-header .logo-mark{display:inline-flex}
.checkout-header .logo-mark img{height:44px;width:auto}

.wc-steps{display:flex;justify-content:center;align-items:center;gap:1.75rem;max-width:var(--container-max);margin:1.75rem auto 0;padding:0 1.5rem;flex-wrap:wrap;list-style:none}
.wc-step{display:flex;align-items:center;gap:.55rem;opacity:.5}
.wc-step-num{width:26px;height:26px;border-radius:50%;background:var(--gray-300);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex:none}
.wc-step-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-700)}
.wc-step-current{opacity:1}
.wc-step-current .wc-step-num{background:var(--purple)}
.wc-step-current .wc-step-label{color:var(--purple)}
.wc-step-done{opacity:1}
.wc-step-done .wc-step-num{background:var(--green)}
.wc-step-done .wc-step-label{color:var(--black)}
@media (max-width:640px){.wc-steps{gap:.9rem}.wc-step-label{display:none}}
@media (max-width:540px){.currency-sw{display:none}}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.35rem;border-radius:var(--r-pill);font-size:.92rem;font-weight:700;transition:all var(--t);white-space:nowrap;border:2px solid transparent}.btn-primary{background:var(--green);color:var(--white);box-shadow:0 4px 16px rgba(46,185,143,.28)}.btn-primary:hover{background:var(--purple);box-shadow:0 6px 22px rgba(75,46,131,.38);transform:translateY(-1px)}.btn-secondary{background:var(--purple);color:var(--white);box-shadow:0 4px 16px rgba(75,46,131,.28)}.btn-secondary:hover{background:var(--purple-dark);box-shadow:0 6px 22px rgba(58,35,103,.38);transform:translateY(-1px)}.btn .arrow{transition:transform var(--t)}.btn:hover .arrow{transform:translateX(3px)}.btn-icon{display:inline-flex;flex:none}.btn-icon svg{width:18px;height:18px}
/* [cg_form_gate] (plugin CG Forms) — botón/enlace ya existente, envuelto
   cuando su formulario está desactivado en Ajustes → CG Forms → Formularios:
   se queda visible pero apagado y sin clic, con el motivo en el title
   (tooltip nativo). Vive en el tema (no en forms.css del plugin) porque se
   usa en el header/footer/Hero — páginas sin ningún formulario embebido,
   donde forms.css nunca se llega a cargar. */
.cg-form-disabled{display:inline-flex;pointer-events:none;filter:grayscale(1);opacity:.45;cursor:not-allowed}
.cg-form-disabled a,.cg-form-disabled button{pointer-events:none}
.menu-toggle{display:none}.btn-text-sm{display:none}
/* margin vertical real (antes 0): sin esto, el separador dependía por
   completo del padding de las secciones vecinas para tener aire — junto
   al Hero (padding:0 en la portada) quedaba pegado a él sin ningún
   espacio, y entre secciones normales se sentía apretado. Reportado por
   el usuario ("aquí está muy pegado al hero" / "arriba el logo debe
   estar alineado y no pegado"). */
.section-divider{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 1.5rem;margin:4rem auto;max-width:880px}.section-divider.sd-inner{margin:.5rem auto 2.5rem}.section-divider .sd-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--gray-300),transparent)}.section-divider .sd-dot{width:6px;height:6px;border-radius:50%;background:var(--green);opacity:.55;flex-shrink:0}.section-divider .sd-dot.purple{background:var(--purple);opacity:.45}.section-divider .sd-mark{width:42px;height:42px;flex-shrink:0;animation:sdFloat 5s ease-in-out infinite}.section-divider .sd-mark svg{width:100%;height:100%;display:block}@keyframes sdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@media (prefers-reduced-motion:reduce){.section-divider .sd-mark{animation:none}}
.hero{padding:4.5rem 0 5rem;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:3.5rem;align-items:center;position:relative}
.hero-content h1{margin-bottom:1.5rem}.hero-content h1 .accent{color:var(--green-dark)}.hero-lead{font-size:1.12rem;color:var(--gray-700);margin-bottom:2.25rem}
.hero-bullets{display:flex;flex-direction:column;gap:.85rem;margin-bottom:2.25rem}.hero-bullets li{display:flex;align-items:flex-start;gap:.7rem;font-size:.96rem;color:var(--black);font-weight:500}.hero-bullets .check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;margin-top:2px}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}.hero-cta .meta{font-size:.84rem;color:var(--gray-500)}.hero-asterisk{margin-top:1.25rem;font-size:.78rem;color:var(--gray-500);font-style:italic}.hero-asterisk a{color:var(--green-dark);font-weight:600}.hero-asterisk a:hover{text-decoration:underline}
.hero-illustration{width:100%;max-width:480px;margin-left:auto}.hero-illustration img{width:100%;height:auto}
.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* v0.44.0: Hero con video de fondo — pedido explícito del usuario, mismo
   concepto (video + degradado + un "ticker" de puntos clave en movimiento
   al pie) que un par de mockups de referencia que compartió, adaptado a
   los colores de marca de Common Ground (menta/morado/carbón/crema) en vez
   de la paleta ámbar/tinta oscura de esos mockups. Sin la ilustración
   lateral (hero-isotype.svg): con el video de fondo, un isotipo aparte
   competía por atención en vez de sumar — el video ES la ilustración ahora.
   Los 4 puntos que antes vivían en .hero-bullets (lista estática) se
   movieron al ticker; .hero-bullets-sr los deja igual de accesibles para
   lector de pantalla sin duplicar el texto en movimiento infinito. */
/* Pantalla completa de verdad (pedido explícito del usuario) — 100dvh
   (alto de viewport "dinámico", ajustado al chrome real del navegador en
   celular) con 100vh como respaldo para navegadores que no soportan
   unidades dv*. ".hero.hero-video" (2 clases) en vez de ".hero-video"
   solo, para ganarle en especificidad al padding de .hero que el
   @media(max-width:980px) de más abajo redefine — antes de esto, en
   celular ese padding competía con el padding:0 de aquí. */
.hero.hero-video{padding:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;isolation:isolate;
  /* La clase "alignfull" no bastó para que el Hero llegara de verdad a
     los bordes de la pantalla (bug real, reportado con captura — se
     quedaba con el ancho del contenedor, ~1180px, con espacio en blanco
     a los lados en pantallas anchas). Técnica de "escape" directa, sin
     depender de que WordPress reconozca alignfull: ancho = 100% del
     viewport, con márgenes negativos que lo sacan de donde sea que esté
     su contenedor — funciona sin importar qué max-width tenga ese
     contenedor. Requirió también quitar overflow-x:hidden de <main> en
     la portada (ver más arriba) para que estos márgenes negativos no se
     recorten de vuelta. */
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
/* Con sesión de administrador iniciada, WordPress agrega su barra
   superior (#wpadminbar) empujando TODA la página hacia abajo — 46px en
   celular, 32px en escritorio (mismo punto de quiebre que usa WordPress,
   783px). El Hero mide 100dvh igual que antes, así que esos pixeles de
   más empujan la barra de puntos clave (.hero-ticker-wrap, pegada al
   fondo del Hero) justo fuera de la pantalla — reportado en vivo con
   captura. Un visitante real nunca ve esto (no tiene esta barra), pero
   se ajusta para que la vista de quien administra el sitio también se
   vea completa sin necesidad de hacer scroll. */
body.admin-bar.home .hero.hero-video{min-height:calc(100vh - 46px);min-height:calc(100dvh - 46px)}
@media (min-width:783px){
  body.admin-bar.home .hero.hero-video{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
}
.hero-bg-video-wrap{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#141410}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El iframe de YouTube no acepta object-fit (solo aplica a elementos
   "replaced" como <video>/<img>) — se sobredimensiona centrado con el
   truco clásico de "video de YouTube de fondo a pantalla completa" para
   lograr el mismo efecto "cover" que ya tiene el <video> nativo. */
.hero-bg-youtube{position:absolute;inset:0;pointer-events:none}
.hero-bg-youtube iframe{position:absolute;top:50%;left:50%;width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%)}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(38,38,38,.92) 0%,rgba(38,38,38,.68) 48%,rgba(75,46,131,.4) 100%),linear-gradient(0deg,rgba(38,38,38,.85) 0%,rgba(38,38,38,.05) 42%,rgba(38,38,38,.55) 100%)}
.hero-video .container{padding-top:5rem;padding-bottom:6.5rem}
/* En la portada el header queda fijo y opaco ENCIMA del Hero (ver más
   abajo) — sin este ajuste el título quedaría tapado debajo de esa barra.
   calc() con var(--cg-header-h) en vez de un valor fijo: se adapta solo
   a la altura real del header en cada pantalla (cambia si se activa/
   desactiva algo en Apariencia → Common Ground → Header). */
body.home .hero-video .container{padding-top:calc(var(--cg-header-h,126px) + 2rem)}
.hero-video .hero-content{max-width:640px}
.hero-video .hero-content h1,.hero-video .hero-content h1 .accent{color:var(--cream)}
.hero-video .hero-content h1 .accent{color:var(--green)}
.hero-video .hero-lead{color:rgba(252,252,242,.82)}
.hero-video .hero-cta .meta{color:rgba(252,252,242,.6)}
.hero-video .hero-asterisk{color:rgba(252,252,242,.5)}
.hero-video .hero-asterisk a{color:var(--green)}

/* Header fijo arriba, en sus colores normales (opaco, sin transparencia
   — pedido explícito del usuario: "no necesito que se vea transparente"),
   solo en la portada (body.home, clase que WordPress ya agrega solo a la
   página de inicio). Se queda SIEMPRE fijo, sin reservar su propio
   espacio en el flujo normal — así, al entrar al sitio, lo único que se
   ve es el Hero a pantalla completa con su menú encima; el resto de las
   secciones aparece normal al hacer scroll. Independiente del modo
   elegido en Apariencia → Common Ground → Header → "Comportamiento al
   hacer scroll" (ese ajuste sigue aplicando igual en el resto del sitio
   — estas reglas van después en el archivo, con !important en las
   únicas 3 propiedades que de verdad necesitan ganarle pase lo que
   pase, para que aplique solo en la portada). */
body.home .cg-topbar,
body.home .site-header{position:fixed!important;left:0!important;right:0!important}
body.home .cg-topbar{top:0!important;z-index:101}
body.home .site-header{top:var(--cg-topbar-h,47px)!important;z-index:100}
body.home main{padding-top:var(--cg-header-h,120px)}
body.home .hero.hero-video{margin-top:calc(-1 * var(--cg-header-h,120px))}

.hero-ticker-wrap{position:absolute;left:0;right:0;bottom:0;overflow:hidden;background:rgba(18,18,15,.55);border-top:1px solid rgba(252,252,242,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-ticker{display:flex;width:max-content;gap:2.5rem;padding:.85rem 0;animation:heroTickerScroll 32s linear infinite}
.hero-ticker-item{display:inline-flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:600;color:var(--cream);white-space:nowrap}
.hero-ticker-item .check{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--green);color:var(--black);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.66rem}
@keyframes heroTickerScroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.hero-ticker{animation:none}}
@media (max-width:768px){.hero-video .container{padding-top:6.5rem;padding-bottom:5.5rem}.hero-content h1{font-size:clamp(1.9rem,7vw,2.4rem)}.hero-lead{font-size:1rem;margin-bottom:1.5rem}.hero-cta{gap:.75rem}.hero-asterisk{margin-top:.85rem}.hero-ticker-item{font-size:.8rem}.section-divider{margin:2.75rem auto}}
/* En celular no hay espacio para el número de WhatsApp junto al ícono —
   pedido explícito del usuario ("el whatsapp solo el icono sin el
   telefono"). El botón "Agenda una cita" del header se quita del todo en
   este ancho (mismo punto de quiebre en el que el menú ya se vuelve
   hamburguesa, línea de abajo) — pedido explícito: "en el celular solo
   poner el menú de hamburguesa", ya que ese botón y la selección de
   idioma compitiendo por el mismo espacio angosto se sentía apretado. La
   llamada a la acción sigue disponible en el propio Hero, que es lo
   primero que se ve al entrar. */
@media (max-width:768px){.topbar-whatsapp-number{display:none}}
@supports (animation-timeline: scroll()){.hero-illustration{animation:cgParallax linear;animation-timeline:scroll(root block);animation-range:0vh 110vh}@keyframes cgParallax{to{transform:translateY(-180px)}}}
.how{background:var(--white)}.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}.step{padding:2rem 1.75rem;background:var(--cream);border-radius:var(--r-lg);border:1px solid var(--gray-100);position:relative;transition:transform var(--t),box-shadow var(--t)}.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.step-num{width:42px;height:42px;background:var(--green);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif-h);font-weight:800;font-size:1.1rem;margin-bottom:1.25rem}.step h3{margin-bottom:.6rem}.step p{font-size:.94rem;color:var(--gray-700)}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.pillar{padding:2rem;background:var(--white);border-radius:var(--r-lg);border:1px solid var(--gray-100);transition:border-color var(--t),box-shadow var(--t)}.pillar:hover{border-color:var(--green);box-shadow:var(--shadow-sm)}.pillar-icon{width:48px;height:48px;background:var(--green-soft);color:var(--green-dark);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:1.15rem}.pillar-icon svg{width:24px;height:24px}.pillar h3{margin-bottom:.55rem}.pillar p{font-size:.96rem}.pillar p a{color:var(--green-dark);font-weight:600}.pillar p a:hover{text-decoration:underline}
.services{background:var(--white)}.svc-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:4rem}.svc-card{padding:1.75rem;background:var(--cream);border-radius:var(--r-lg);border:1px solid var(--gray-100)}.svc-card h3{margin-bottom:.5rem}.svc-card .svc-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);background:var(--green-soft);padding:.25rem .55rem;border-radius:var(--r-sm);margin-bottom:.75rem}.svc-card ul{margin-top:.85rem}.svc-card li{font-size:.9rem;color:var(--gray-700);padding:.4rem 0;border-bottom:1px solid var(--gray-100);display:flex;align-items:flex-start;gap:.5rem}.svc-card li:last-child{border-bottom:none}.svc-card li::before{content:'·';color:var(--green);font-weight:800;font-size:1.4rem;line-height:1;margin-top:-2px}
.svc-models{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem}.svc-model{padding:2rem;background:var(--cream);border-radius:var(--r-lg);border:1px solid var(--gray-100)}.svc-model>h3{margin-bottom:.4rem}.svc-model>p{font-size:.94rem;margin-bottom:1.5rem}.svc-tier{padding:1rem 0;border-top:1px solid var(--gray-100)}.svc-tier:first-of-type{border-top:1px solid var(--gray-300)}.svc-tier h4{font-size:.92rem;color:var(--green-dark);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3rem}.svc-tier p{font-size:.92rem;color:var(--gray-700);margin:0}.svc-cta{text-align:center;margin-top:2.5rem}.svc-cta p{margin-bottom:1.25rem;color:var(--gray-700)}
.warranty{background:linear-gradient(180deg,var(--cream) 0%,var(--gray-100) 100%)}.warranty-card{background:var(--white);border-radius:var(--r-lg);padding:3rem 2.5rem;box-shadow:var(--shadow-md);max-width:920px;margin:0 auto}.warranty-card .seal{display:inline-flex;align-items:center;gap:.5rem;background:var(--purple);color:var(--white);padding:.4rem .9rem;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.25rem}.warranty-card h2{margin-bottom:1rem}.warranty-card .intro{font-size:1.02rem;margin-bottom:2rem;color:var(--gray-700)}.warranty-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem}.warranty-col h4{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.96rem}.warranty-col .icon{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0}.icon-yes{background:var(--green-soft);color:var(--green-dark)}.icon-no{background:rgba(38,38,38,.07);color:var(--gray-500)}.warranty-col ul li{font-size:.92rem;color:var(--gray-700);padding:.4rem 0;padding-left:1rem;position:relative}.warranty-col ul li::before{content:'';position:absolute;left:0;top:14px;width:4px;height:4px;background:var(--gray-300);border-radius:50%}.warranty-note{padding-top:1.5rem;border-top:1px solid var(--gray-100);font-size:.86rem;color:var(--gray-500);font-style:italic}.warranty-note a{color:var(--green-dark);font-style:normal;font-weight:600}.warranty-note a:hover{text-decoration:underline}
/* Eventos y webinars (inc/seed-pages.php) — sin CPT propio todavía (fase 5),
   así que estas clases no tenían ningún CSS real hasta ahora. */
.ev-hero{padding:3.5rem 0 2.5rem;text-align:center}
.ev-wrap{max-width:820px;margin:0 auto}
.ev-lede{font-size:1.05rem;color:var(--gray-700);max-width:640px;margin:.75rem auto 0}
.ev-section{padding:1rem 0 5rem}
.ev-card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-lg);padding:2.5rem;box-shadow:var(--shadow-md)}
.ev-card-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.ev-card-tag,.ev-card-format{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:.4rem .85rem;border-radius:var(--r-pill)}
.ev-card-tag{background:var(--purple);color:var(--white)}
.ev-card-format{background:var(--green-soft);color:var(--green-dark)}
.ev-card h2{margin:0 0 .5rem}
.ev-card-sub{font-size:1.05rem;color:var(--gray-700);margin:0 0 1.25rem}
.ev-card-date{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--purple);font-size:.92rem;margin-bottom:1.75rem}
.ev-card-date svg{flex:none}
.ev-card-btn{margin-bottom:1rem}
.ev-card-body{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--gray-100)}
.ev-card-body p{margin-bottom:1.1rem;line-height:1.7;color:var(--gray-700)}
.ev-card-body h3{margin:2rem 0 1rem;font-size:1.15rem}
.ev-agenda{list-style:none;margin:0 0 .5rem;padding:0;display:flex;flex-direction:column;gap:.85rem}
.ev-agenda li{position:relative;padding-left:1.5rem;color:var(--gray-700);line-height:1.6}
.ev-agenda li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.ev-speaker{background:var(--cream);border-radius:var(--r-lg);padding:1.75rem;margin:.5rem 0 2rem;display:flex;gap:1.25rem;align-items:flex-start}
.ev-speaker-photo{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--gray-100)}
.ev-speaker-info{display:flex;flex-direction:column;min-width:0}
.ev-speaker-name{font-weight:700;color:var(--black);font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.ev-speaker-linkedin{display:inline-flex;color:var(--gray-500);transition:color var(--t)}
.ev-speaker-linkedin:hover{color:#0D66C2}
.ev-speaker-role{color:var(--purple);font-size:.86rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:1rem}
.ev-speaker p{margin-bottom:.85rem;line-height:1.65;color:var(--gray-700)}
.ev-speaker p:last-child{margin-bottom:0}
@media (max-width:480px){.ev-speaker{flex-direction:column;align-items:flex-start}}
.ev-contact-meta{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--gray-100);font-size:.9rem;color:var(--gray-500)}
.ev-contact-meta a{color:var(--green-dark);font-weight:600}
.ev-share{display:flex;align-items:center;gap:.65rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--gray-100)}
.ev-share-label{font-size:.82rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin-right:.25rem}
.ev-share-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--gray-700);transition:background var(--t),color var(--t)}
.ev-share-link:hover{background:var(--purple);color:var(--white)}
.ev-share-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:var(--black);color:var(--white);padding:.7rem 1.25rem;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:1000;box-shadow:var(--shadow-lg);max-width:calc(100vw - 2rem);text-align:center}
.ev-share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Estado vacío del listado de /eventos-y-webinars/ cuando no hay eventos
   próximos (wp:query-no-results, ver inc/seed-pages.php). */
.ev-empty{text-align:center;padding:3rem 1.5rem;background:var(--cream);border-radius:var(--r-lg)}
.ev-empty-icon{width:56px;height:56px;border-radius:50%;background:var(--purple-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.ev-empty h3{margin:0 0 .5rem}
.ev-empty p{color:var(--gray-700);max-width:440px;margin:0 auto 1.5rem}
/* Página 404 — templates/404.html renderiza [cg_error_404] (ver
   inc/shortcodes.php), textos configurables en Apariencia → Common Ground
   → Página 404. Ícono de brújula (guía, no alarma) en vez de un tache o
   signo de exclamación — tono calmado a propósito. */
.error-404{padding:5.5rem 0 6.5rem}
.error-404-wrap{max-width:560px;margin:0 auto;text-align:center}
.error-404-icon{width:72px;height:72px;border-radius:50%;background:var(--purple-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}
.error-404-eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.85rem}
.error-404-title{margin-bottom:1rem}
.error-404-message{color:var(--gray-700);font-size:1.05rem;margin-bottom:2.25rem}
.error-404-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@media (max-width:540px){.error-404{padding:3.5rem 0 4.5rem}.error-404-icon{width:60px;height:60px}.error-404-actions{flex-direction:column;align-items:stretch}.error-404-actions .btn{justify-content:center}}
/* Título/imagen destacada del CPT "evento" viven dentro de .ev-card (ver
   templates/single-evento.html) — mismo tratamiento tipográfico que el
   resto del sitio, solo ajustando el espaciado dentro de la tarjeta. */
.ev-card .wp-block-post-featured-image{margin:0 0 2rem;border-radius:var(--r-md);overflow:hidden}
.ev-card > h1{margin-bottom:1.5rem}
@media (max-width:540px){.ev-card{padding:1.75rem}.ev-share{flex-wrap:wrap}}
/* Listado real (Query Loop, CPT "evento") en /eventos-y-webinars/ — cada
   tarjeta enlaza a su ficha propia en /evento/{slug}/. */
.ev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}
.ev-teaser{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-lg);padding:1.5rem;transition:transform var(--t),box-shadow var(--t);display:flex;flex-direction:column;height:100%}
.ev-teaser:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.ev-teaser .wp-block-post-featured-image{margin:0 0 1.25rem;border-radius:var(--r-md);overflow:hidden}
.ev-teaser .wp-block-post-featured-image img{aspect-ratio:16/9;object-fit:cover;width:100%}
.ev-teaser h3{margin:0 0 .5rem;font-size:1.05rem}
.ev-teaser h3 a{color:var(--black)}
.ev-teaser h3 a:hover{color:var(--purple)}
.ev-teaser-meta{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--purple);margin:0 0 .85rem}
.ev-teaser-meta svg{flex:none}
.ev-teaser .wp-block-post-excerpt{font-size:.92rem;color:var(--gray-700);margin-bottom:1.25rem}
.ev-teaser .wp-block-post-excerpt__more-link{color:var(--green-dark);font-weight:600}
.ev-teaser-btn{margin-top:auto;align-self:flex-start}
.ev-teaser-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto}
/* "Evento pasado": badge junto a la fecha en la tarjeta del listado, y
   etiqueta a color neutro (no de marca) en la ficha individual — a
   diferencia de .ev-card-tag/.ev-card-format, que sí llevan color de marca
   porque describen al evento en sí, no su estado. */
.ev-badge-past{background:var(--gray-100);color:var(--gray-700);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:.15rem .55rem;border-radius:var(--r-pill);margin-left:.35rem}
.ev-card-tag-past{background:var(--gray-100);color:var(--gray-700)}
/* Insignia de vigencia de vacantes ("Vigente hasta.../Cierra pronto...") —
   pedido explícito del usuario: la fecha límite ya decidía sola cuándo
   cerrar una vacante, esto solo la hace visible. Ámbar de urgencia cuando
   quedan 7 días o menos — mismo lenguaje visual (pill con color de marca)
   que .ev-card-tag/.ev-card-format, ninguno de los dos alcanza para
   "cuidado, se cierra pronto" sin un tercer color. */
.ev-card-format-urgent{background:rgba(184,134,11,.14);color:#8a6508}
.ev-past-title{margin-top:4rem}
/* Grabación embebida (single-evento.html, evento ya pasado) — contenedor
   16:9 fijo por proporción (padding-top truco), sin depender del tamaño
   real del iframe de YouTube. */
.ev-video-embed{position:relative;width:100%;padding-top:56.25%;margin-bottom:1.75rem;border-radius:var(--r-md);overflow:hidden;background:var(--black)}
.ev-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Preguntas y respuestas del evento (single-evento.html) — mismo acordeón
   que .faq (patterns/cg-faq-accordion.php), clases .contact-acc-* ya
   traen su propio JS (assets/js/site.js) sin nada nuevo que enganchar. */
.ev-qa{margin:1.5rem 0}
.ev-qa .contact-acc-item{background:var(--cream)}
.ev-qa .contact-acc-item.open{background:var(--green-soft);border-color:var(--green)}
.ev-qa .ca-title strong{color:var(--black)}
.ev-qa .ca-chevron{color:var(--gray-500)}
.ev-qa .contact-acc-item.open .ca-chevron{color:var(--green-dark)}
.ev-qa .contact-acc-panel-inner-content p{color:var(--gray-700)}
/* Aviso de "esta pregunta viene del evento X" en la ficha de una Pregunta
   frecuente promovida (single-pregunta_frecuente.html, ver
   CG_Faq_CPT::append_backlink()). */
.ev-qa-origin{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--gray-100)}
.ev-qa-origin p{margin-bottom:1rem}
.ev-qa-origin-links{display:flex;gap:.75rem;flex-wrap:wrap}
/**
 * "A quién ayudamos" (Home, sección editorial con 3 fotos reales — ver
 * inc/seed-pages.php). v0.29.2, rediseñada a pedido explícito del usuario
 * ("que se vea un trabajo de diseño editorial"): en vez de 3 tarjetas
 * idénticas, va como una portada de revista — 1 historia destacada +
 * 2 notas secundarias, mismo principio que una plana de "historia
 * principal + breves" en cualquier editorial impresa.
 *
 * v0.29.5 — la primera versión de este layout hacía que la destacada
 * ocupara 2 FILAS (alta y angosta): en un contenedor de ~1180px con esa
 * proporción de columnas, la celda resultante quedaba casi cuadrada —
 * mucho más recorte del que parecía en el CSS (el aspect-ratio real de
 * una celda de grid con alto fijo no es obvio a simple vista, hay que
 * calcularlo). Con una foto panorámica (familia repartida a lo ancho del
 * auto) eso volvía a cortar gente, el mismo problema que ya se había
 * arreglado una vez. Ahora la destacada va ANCHA arriba (ocupa las 2
 * columnas, alto fijo por aspect-ratio en vez de por celda de grid — así
 * el recorte real es exactamente el que dice el CSS) y las 2 notas van
 * cuadradas, una junto a la otra, debajo — geometría mucho más predecible
 * y con más margen para que quepa todo el grupo.
 *
 * La etiqueta de cada tarjeta ya NO es un chip con fondo (se sentía más
 * "badge de producto" que editorial) — es texto plano en mayúsculas con
 * tracking, el mismo tratamiento que .section-label en el resto del
 * sitio, para que la tarjeta se sienta parte de la misma identidad en
 * vez de un componente aparte.
 */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.75rem}
.audience-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--t),box-shadow var(--t)}
.audience-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.audience-card-feature{grid-column:1/3;aspect-ratio:2.1/1}
.audience-card:not(.audience-card-feature){aspect-ratio:1/1}
.audience-card .wp-block-image{margin:0;height:100%}
.audience-card .wp-block-image img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03);transition:transform .6s ease}
.audience-card:hover .wp-block-image img{transform:scale(1.05)}
/*
 * v0.29.4 — la v0.29.3 usaba backdrop-filter:blur() sobre el bloque de
 * texto: pedido explícito del usuario para quitarlo ("no borroso"), el
 * desenfoque manchaba la foto en vez de leerse como una capa de texto
 * intencional (backdrop-filter difumina TODO lo que hay detrás del
 * bloque, incluida la zona donde el degradado ya es transparente). Ahora
 * es solo un bloque plano semitransparente, sin desenfoque, más chico
 * (las 2 tarjetas secundarias ya no llevan descripción, solo
 * etiqueta+título+enlace) para que se vea más foto y menos texto.
 */
.audience-card-overlay{position:absolute;left:0;right:0;bottom:0;padding:1.35rem 1.6rem;background:linear-gradient(to top,rgba(16,14,12,.94) 0%,rgba(16,14,12,.86) 55%,rgba(16,14,12,0) 100%)}
.audience-card-tag{display:flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:.5rem}
.audience-card-tag::before{content:'';width:18px;height:2px;background:currentColor;flex:none}
.audience-card h3{color:var(--white);font-size:1.1rem;line-height:1.25;margin-bottom:.4rem;letter-spacing:-.01em;max-width:26ch}
.audience-card-feature .audience-card-overlay{padding:2.25rem}
.audience-card-feature .audience-card-tag{font-size:.8rem}
.audience-card-feature h3{font-size:2rem;margin-bottom:.6rem;max-width:16ch}
.audience-card-feature p{color:rgba(252,252,242,.82);font-size:1rem;line-height:1.5;margin-bottom:1rem;max-width:44ch}
.audience-card-cta{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:700;color:var(--white);padding-bottom:2px;border-bottom:1px solid rgba(252,252,242,.35);transition:border-color var(--t)}
.audience-card-cta svg{flex:none;transition:transform var(--t)}
.audience-card:hover .audience-card-cta{border-color:var(--green)}
.audience-card:hover .audience-card-cta svg{transform:translateX(3px)}
@media (max-width:640px){
	.audience-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
	.audience-card-feature{grid-column:1;aspect-ratio:4/3}
	.audience-card:not(.audience-card-feature){aspect-ratio:16/9}
	.audience-card-feature h3{font-size:1.5rem}
	.audience-card-feature .audience-card-overlay{padding:1.6rem}
}
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:center}.about-photo{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}.about-photo img{width:100%;height:100%;object-fit:cover}.about-content h2{margin-bottom:1rem}.about-content .role{font-size:.92rem;color:var(--green-dark);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}.about-content p{margin-bottom:1rem}.credentials{margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid var(--gray-100);display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.5rem}.credentials .cred{font-size:.9rem}.credentials .cred .label{font-size:.72rem;color:var(--gray-500);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.15rem}.credentials .cred .value{color:var(--black);font-weight:600}
.about-more{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:3rem;padding:2.75rem 3rem;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--purple) 0%,var(--purple-dark) 100%);text-decoration:none;transition:transform var(--t),box-shadow var(--t)}
.about-more:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.about-more-mark{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:220px;height:220px;opacity:.14;pointer-events:none}
.about-more-mark img{width:100%;height:100%;filter:brightness(0) invert(1)}
.about-more-text{position:relative;z-index:1;max-width:640px}
.about-more-eyebrow{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.6rem}
.about-more-text h3{color:var(--white);font-size:1.4rem;margin-bottom:.4rem;font-family:var(--serif-h)}
.about-more-text p{color:rgba(255,255,255,.8);margin:0;font-size:.95rem;line-height:1.6}
.about-more-cta{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--white);color:var(--purple);font-weight:700;font-size:.92rem;padding:.85rem 1.5rem;border-radius:var(--r-pill);white-space:nowrap;transition:gap var(--t)}
.about-more-cta svg{width:16px;height:16px;transition:transform var(--t)}
.about-more:hover .about-more-cta svg{transform:translateX(3px)}
/* v0.30.0 — reportado por el usuario: Contacto y el footer son el mismo
   negro plano, uno justo debajo del otro — se leía como un solo bloque
   sin querer, en vez de 2 secciones distintas. Un degradado morado→negro
   (mismos 2 tonos que ya usa .about-more, no un color nuevo) hace que
   Contacto abra con un tono propio y termine fundiéndose HACIA el negro
   del footer — la transición se ve intencional, no un corte. */
.contact{background:linear-gradient(180deg,var(--purple-dark) 0%,var(--black) 100%);color:var(--cream)}.contact h2{color:var(--cream);margin-bottom:1rem}.contact .section-label{color:var(--green)}.contact .section-intro{color:rgba(252,252,242,.7)}.contact-acc{display:flex;flex-direction:column;gap:.85rem}
.contact-acc-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);transition:border-color var(--t),background var(--t)}
.contact-acc-item:hover{border-color:rgba(46,185,143,.4)}
.contact-acc-item.open{background:rgba(46,185,143,.07);border-color:var(--green)}
.contact-acc-header{width:100%;display:flex;align-items:center;gap:1rem;padding:1.15rem 1.35rem;background:none;border:none;color:inherit;cursor:pointer;text-align:left;font-family:inherit}
.ca-icon{flex:none;width:46px;height:46px;border-radius:var(--r-md);background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;transition:all var(--t)}
.ca-icon svg{width:22px;height:22px}
.contact-acc-item.open .ca-icon{background:var(--green);color:var(--black)}
.ca-title{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ca-title strong{color:var(--cream);font-size:1.02rem;font-family:var(--serif-h);font-weight:700}
.ca-sub{font-size:.84rem;color:rgba(252,252,242,.55)}
.ca-badge{flex:none;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.32rem .7rem;border-radius:var(--r-pill);background:rgba(252,252,242,.08);color:rgba(252,252,242,.65);white-space:nowrap}
.ca-badge.ca-badge-urgent{background:rgba(46,185,143,.15);color:var(--green)}
.ca-chevron{flex:none;width:20px;height:20px;color:rgba(252,252,242,.4);transition:transform var(--t)}
.contact-acc-item.open .ca-chevron{transform:rotate(180deg);color:var(--green)}
.contact-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.contact-acc-item.open .contact-acc-panel{grid-template-rows:1fr}
.contact-acc-panel-inner{overflow:hidden}
.contact-acc-panel-inner-content{padding:0 1.35rem 1.35rem calc(46px + 1rem + 1.35rem)}
.contact-acc-panel-inner-content p{color:rgba(252,252,242,.65);font-size:.9rem;line-height:1.55;margin-bottom:1rem}
/* .faq reutiliza el mismo acordeón que .contact (patterns/cg-faq-accordion.php)
   pero sobre fondo claro, no negro — mismas clases, colores propios. */
.faq{padding:4rem 0}
.faq .contact-acc-item{background:var(--cream)}
.faq .contact-acc-item.open{background:var(--green-soft);border-color:var(--green)}
.faq .ca-title strong{color:var(--black)}
.faq .ca-sub{color:var(--gray-500)}
.faq .ca-badge{background:var(--gray-100);color:var(--gray-700)}
.faq .ca-chevron{color:var(--gray-500)}
.faq .contact-acc-item.open .ca-chevron{color:var(--green-dark)}
.faq .contact-acc-panel-inner-content p{color:var(--gray-700)}
.contact-meta{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;font-size:.86rem;color:rgba(252,252,242,.6)}.contact-meta strong{color:var(--cream);font-weight:700}
/* Banner "¿Aún no sabes qué trámite necesitas?" arriba del acordeón de
   Contacto — pedido explícito del usuario: no es un canal más para abrir
   (no es un acordeón), es una invitación aparte al prediagnóstico, con el
   mismo acento verde que ya usa el resto de esta sección oscura. */
.contact-cta-banner{background:rgba(46,185,143,.08);border:1px solid rgba(46,185,143,.35);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.contact-cta-banner-icon{flex:none;width:52px;height:52px;border-radius:var(--r-md);background:var(--green);color:var(--black);display:flex;align-items:center;justify-content:center}
.contact-cta-banner-text{flex:1 1 260px}
.contact-cta-banner-title{color:var(--cream);font-family:var(--serif-h);font-weight:700;font-size:1.05rem;margin-bottom:.35rem}
.contact-cta-banner-sub{color:rgba(252,252,242,.7);font-size:.88rem;line-height:1.55}
.contact-cta-banner-btn{flex:none;white-space:nowrap}
@media (max-width:640px){
  .contact-cta-banner{flex-direction:column;align-items:flex-start}
  .contact-cta-banner-btn{width:100%;justify-content:center}
}
.site-footer{position:relative;background:var(--black);color:rgba(252,252,242,.65);padding:2.75rem 0 0;border-top:1px solid rgba(255,255,255,.08);font-size:.86rem}
.site-footer::before{content:'';position:absolute;top:-1px;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--green))}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.75rem}
.footer-links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.65rem 1.5rem;padding-bottom:1.5rem}
/* Fila 2 se recorre una columna a la derecha (deja la 1 vacía a propósito)
   — solo tiene sentido con las 4 columnas reales del escritorio; en
   tablet/móvil (ver medias abajo) todo se apila en su orden natural. */
@media (min-width:981px){
  .footer-col-services{grid-column:2}
  .footer-col-legal{grid-column:3}
  .footer-col-contact{grid-column:4}
}
.footer-brand{display:flex;flex-direction:column;gap:.85rem;padding-right:1rem}
.footer-logo{display:inline-flex;width:fit-content}
.footer-logo img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.94}
.footer-tagline{font-size:.86rem;color:rgba(252,252,242,.5);line-height:1.6;max-width:34ch;margin:0}
.footer-col-contact .footer-social{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.5rem;margin-top:.85rem}
.footer-social.is-style-logos-only .wp-social-link{width:auto;height:auto;background:none;flex:none;color:rgba(252,252,242,.65);transition:color var(--t)}
.footer-social.is-style-logos-only .wp-social-link:hover{background:none;color:var(--white)}
.footer-social .wp-social-link svg{width:18px;height:18px}
.footer-social-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(252,252,242,.35)}
.footer-social-icons{display:flex;flex-wrap:wrap;gap:.6rem}
.social-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(252,252,242,.7);transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.social-badge svg{width:18px;height:18px}
.social-badge:hover,.social-badge:focus-visible{background:var(--green);border-color:var(--green);color:var(--black);transform:translateY(-2px)}
.social-badge:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* Footer — columnas convertidas en acordeón responsivo, pedido explícito
   del usuario ("que no se vea tan grande la sección", "delux y moderno y
   dinámico"): en escritorio (>980px) se ven exactamente igual que antes,
   las 6 columnas abiertas una junto a otra — el botón del título es
   inerte ahí (pointer-events:none, sin flecha). Debajo de 980px, donde 6
   columnas apiladas hacían el footer larguísimo, cada columna arranca
   CERRADA y se abre con un toque — mismo mecanismo grid-template-rows
   0fr→1fr que ya usa el acordeón de Contacto/FAQ (.contact-acc-panel),
   reescrito con sus propias clases porque aquí el fondo es oscuro. La
   entrada suave de cada columna al hacer scroll (clase .reveal, ver
   site.js) es el mismo mecanismo que ya usan las tarjetas de Servicios/
   Contacto — nada nuevo que mantener por separado. */
.footer-acc-header{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;background:none;border:none;padding:0;margin-bottom:.75rem;
  font:inherit;text-align:left;cursor:default;color:inherit;
}
.footer-acc-title{font-family:var(--serif-h);font-size:.76rem;font-weight:700;color:var(--cream);text-transform:uppercase;letter-spacing:.07em}
.footer-acc-chevron{display:none;flex:none;color:rgba(252,252,242,.4);transition:transform .3s ease}
.footer-acc-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s ease}
.footer-acc-panel-inner{overflow:hidden}
@media (min-width:981px){.footer-acc-header{pointer-events:none}}
@media (max-width:980px){
  .footer-acc-header{cursor:pointer;padding:.95rem 0;margin-bottom:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .footer-acc-header:hover .footer-acc-title{color:var(--green)}
  .footer-acc-chevron{display:block}
  .footer-acc-item.open .footer-acc-chevron{transform:rotate(180deg);color:var(--green)}
  .footer-acc-panel{grid-template-rows:0fr}
  .footer-acc-item.open .footer-acc-panel{grid-template-rows:1fr}
  .footer-acc-panel-inner-content{padding:.95rem 0 1.2rem}
  .footer-acc-item:last-child .footer-acc-header{border-bottom:none}
}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{color:rgba(252,252,242,.65);transition:color var(--t)}
.footer-links a:hover{color:var(--green)}
.footer-links button{font:inherit;text-align:left;padding:0;color:rgba(252,252,242,.65);transition:color var(--t)}
.footer-links button:hover{color:var(--green)}
.footer-links-col{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
/* Contacto sigue siendo <a> planas dentro de <nav> (no es un menú real, ver
   footer.html) — los otros 2 son bloques core/navigation, cuyo <ul>
   necesita las mismas reglas de layout que antes vivían en el <nav>. */
.footer-links .wp-block-navigation__container{display:flex;gap:1.5rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-links .wp-block-navigation-item__content{padding:0}
.footer-links-col .wp-block-navigation__container{flex-direction:column;align-items:flex-start;gap:.5rem}
.footer-col .topbar-whatsapp{color:rgba(252,252,242,.65);font-weight:400}
.footer-col .topbar-whatsapp:hover{color:var(--green)}
.footer-col .topbar-whatsapp svg{fill:rgba(252,252,242,.65)}
.footer-col .topbar-whatsapp:hover svg{fill:var(--green)}
.footer-payments{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.5rem 0 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
.footer-payments-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(252,252,242,.35)}
.footer-payments-icons{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.pm-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:var(--r-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.74rem;font-weight:600;color:rgba(252,252,242,.5);letter-spacing:.01em;white-space:nowrap}
.pm-icon{display:inline-flex;flex:none;width:18px;height:18px}
.pm-icon svg{width:100%;height:100%}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.1rem 0;text-align:center}
.footer-copy{font-size:.8rem;color:rgba(252,252,242,.5)}
/* Enlace de baja del newsletter — vive en la columna Contacto, junto a
   "Suscribirse al newsletter" (pedido explícito del usuario: antes vivía
   escondido junto al copyright, difícil de encontrar para quien de verdad
   quería darse de baja). Más chico y apagado que sus vecinos en esa misma
   columna para no competir con la llamada a suscribirse. */
.footer-links .footer-nl-unsub-link{font-size:.74rem;opacity:.7}
@media (max-width:980px){.hero-grid,.about-grid{grid-template-columns:1fr;gap:2.5rem}.hero-illustration{max-width:360px;margin:0 auto;order:-1}.about-photo{max-width:420px;margin:0 auto;width:100%}.how-steps,.svc-cats{grid-template-columns:1fr}.why-grid,.svc-models,.warranty-cols,.credentials,.contact-meta{grid-template-columns:1fr;gap:1rem}.nav-main{display:none!important}.nav-mobile.open{display:flex!important;position:absolute;top:78px;left:0;right:0;background:var(--cream);padding:1.5rem;border-bottom:1px solid rgba(38,38,38,.07)}.nav-mobile.open .wp-block-navigation__container{display:flex!important;flex-direction:column;gap:1rem;list-style:none;margin:0;padding:0}.menu-toggle{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:var(--r-sm)}.btn-header-cta{display:none}.lang-sw{font-size:.72rem}section{padding:4rem 0}.warranty-card{padding:2rem 1.5rem}.footer-grid{grid-template-columns:1fr 1fr;row-gap:2.25rem}.footer-brand{grid-column:1/-1;padding-right:0;margin-bottom:.5rem}.footer-links-grid{grid-template-columns:1fr 1fr;row-gap:0;column-gap:1.5rem}.topbar-inner{padding:.45rem 1rem}.about-more{flex-direction:column;align-items:flex-start;text-align:left;padding:2.25rem}.about-more-cta{width:100%;justify-content:center}}
@media (max-width:540px){h1{font-size:2rem}h2{font-size:1.6rem}.container{padding:0 1rem}.header-inner{padding:0 1rem;gap:.6rem;height:68px}.logo-mark img{height:44px}.header-right{gap:.5rem}.btn-header-cta{padding:.55rem .9rem;font-size:.82rem}.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{justify-content:center}.hero-illustration{max-width:280px}.btn-text{display:none}.btn-text-sm{display:inline}.topbar-hours{display:none}.topbar-right{gap:.8rem}.footer-grid{grid-template-columns:1fr;text-align:center;gap:2rem}.footer-links-grid{grid-template-columns:1fr;text-align:center;row-gap:0}.footer-brand{align-items:center;margin-bottom:.25rem}.footer-tagline{max-width:none}.footer-social-icons{justify-content:center}.footer-links-col{align-items:center}.footer-col .topbar-whatsapp{justify-content:center}.footer-col-contact .footer-social{justify-content:center}.contact-acc-header{padding:1rem;gap:.7rem}.ca-icon{width:38px;height:38px}.ca-icon svg{width:18px;height:18px}.ca-badge{display:none}.contact-acc-panel-inner-content{padding:0 1rem 1.1rem calc(38px + .7rem + 1rem)}.about-more-mark{display:none}.about-more{padding:1.75rem}}
@media (max-width:380px){.topbar-newsletter span{display:none}}
@media (prefers-reduced-motion:no-preference){.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease;transition-delay:.2s}.reveal.in{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.cookie-banner{transition:opacity .15s linear,visibility .15s;transform:none}.cookie-banner.show{transform:none}}
.cookie-banner{position:fixed;bottom:1rem;left:1rem;right:1rem;max-width:460px;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:1.35rem 1.5rem;z-index:1000;display:flex;gap:.9rem;align-items:flex-start;opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility .3s}.cookie-banner.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.cookie-banner-icon{flex:none;width:38px;height:38px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:flex;align-items:center;justify-content:center}.cookie-banner-icon svg{width:20px;height:20px}.cookie-banner-body{flex:1;min-width:0}.cookie-banner h4{font-family:var(--serif-h);margin-bottom:.4rem;font-size:1rem;font-weight:700}.cookie-banner p{color:var(--gray-700);font-size:.86rem;line-height:1.55;margin-bottom:1rem}.cookie-banner p a{color:var(--green-dark);font-weight:600}.cookie-banner p a:hover{text-decoration:underline}.cookie-banner .ck-actions{display:flex;gap:.6rem;flex-wrap:wrap}.cookie-banner .btn-cookie{padding:.55rem 1.1rem;border-radius:var(--r-sm);font-size:.84rem;font-weight:600;cursor:pointer;transition:all var(--t);border:1px solid;font-family:inherit}.cookie-banner .btn-cookie.btn-accept{background:var(--green);color:var(--white);border-color:var(--green)}.cookie-banner .btn-cookie.btn-accept:hover{background:var(--purple);border-color:var(--purple)}.cookie-banner .btn-cookie.btn-decline{background:transparent;color:var(--gray-700);border-color:var(--gray-300)}.cookie-banner .btn-cookie.btn-decline:hover{background:var(--gray-100);color:var(--black)}
@media (max-width:540px){.cookie-banner{left:.5rem;right:.5rem;bottom:.5rem;padding:1.25rem}.cookie-banner .ck-actions{flex-direction:column}.cookie-banner .btn-cookie{width:100%}}
  /* WhatsApp Floating Action Button */
.wa-fab{position:fixed;bottom:1.5rem;right:1.5rem;width:56px;height:56px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.35),0 2px 8px rgba(0,0,0,.12);z-index:999;transition:transform var(--t),box-shadow var(--t);cursor:pointer}
.wa-fab:hover{transform:scale(1.06);box-shadow:0 10px 32px rgba(37,211,102,.45),0 4px 12px rgba(0,0,0,.16)}
.wa-fab:focus{outline:3px solid var(--purple);outline-offset:3px}
.wa-fab svg{width:32px;height:32px;fill:#fff}
.wa-fab::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;opacity:.7;animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (max-width:540px){.wa-fab{bottom:1rem;right:1rem;width:52px;height:52px}.wa-fab svg{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none}}

/* "Conócenos" editorial page (conocenos.html) — alternating bands instead of
   one long scroll of text, so the philosophy content reads like a magazine
   feature rather than a wall of paragraphs. */
.co-wrap{max-width:720px;margin:0 auto;padding:0 1.5rem}
.co-hero{position:relative;overflow:hidden;background:var(--black);padding:5rem 0 4.5rem}
.co-hero-mark{position:absolute;top:50%;right:-10%;transform:translateY(-50%);width:520px;height:520px;opacity:.07;pointer-events:none}
.co-hero-mark img{width:100%;height:100%}
.co-eyebrow{position:relative;z-index:1;display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:1rem}
.co-hero h1{position:relative;z-index:1;color:var(--cream);margin-bottom:1.5rem;max-width:14ch}
.co-lede{position:relative;z-index:1;font-size:1.15rem;color:rgba(252,252,242,.8);line-height:1.65;max-width:52ch}
.co-section{padding:4rem 0}
.co-section.co-bg-white{background:var(--white)}
.co-section h2{position:relative;padding-left:1.1rem;margin-bottom:1.25rem;font-size:1.5rem}
.co-section h2::before{content:'';position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:2px;background:var(--green)}
.co-section p{font-size:1rem;line-height:1.7;color:var(--gray-700);margin-bottom:1.1rem}
.co-section p:last-child{margin-bottom:0}
.co-section p a{color:var(--green-dark);font-weight:600}
.co-section p a:hover{text-decoration:underline}
.co-highlight-box{background:var(--cream);border:1px solid var(--gray-100);border-radius:var(--r-lg);padding:1.5rem 1.75rem;margin-top:1.5rem}
.co-section.co-bg-white .co-highlight-box{background:var(--gray-100)}
.co-highlight-box p{margin-bottom:.9rem;font-size:.95rem}
.co-highlight-box p:last-child{margin-bottom:0}
.co-langs{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.co-lang-pill{display:inline-flex;align-items:center;gap:.6rem;background:var(--white);border:1px solid var(--gray-100);border-radius:var(--r-pill);padding:.6rem 1.1rem;font-size:.88rem;font-weight:600;color:var(--black)}
.co-lang-pill img{width:22px;height:15px;border-radius:2px;outline:1px solid rgba(38,38,38,.12);outline-offset:-1px}
.co-cta-band{background:linear-gradient(135deg,var(--green-soft) 0%,var(--purple-soft) 100%);padding:3.5rem 0;text-align:center}
.co-cta-band .co-wrap{max-width:640px}
.co-cta-band h2{padding-left:0;margin-bottom:.75rem;justify-content:center}
.co-cta-band h2::before{display:none}
.co-cta-band p{margin-bottom:2rem}
.co-cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.co-quote{padding:4.5rem 0;text-align:center}
.co-quote blockquote{max-width:640px;margin:0 auto;font-family:var(--serif-h);font-size:1.5rem;font-weight:700;line-height:1.45;color:var(--black);letter-spacing:-.01em}
.co-tagline{background:var(--black);padding:3rem 0;text-align:center}
.co-tagline p{margin:0;font-family:var(--serif-h);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);font-size:1.05rem}
.co-tagline p span{color:var(--green)}
@media (max-width:768px){
  .co-hero{padding:3.5rem 0 3rem}
  .co-hero-mark{width:320px;height:320px;right:-20%}
  .co-hero h1{max-width:none}
  .co-lede{max-width:none}
  .co-section{padding:3rem 0}
  .co-cta-row{flex-direction:column;align-items:stretch}
  .co-quote blockquote{font-size:1.2rem}
}

/* v0.32.0 — página "Vive en México", historias editoriales de extranjeros
   que ya viven en el país (pedido explícito del usuario). Fila alternada
   imagen/texto con aspect-ratio fijo en la imagen a propósito: un layout
   de grid con celdas que abarcan varias filas ya nos causó recortes
   impredecibles dos veces antes en este proyecto (ver audience-card) —
   aquí cada imagen tiene su proporción calculada directamente, nunca
   heredada de la altura de una fila. */
.ex-stories{padding:5rem 0}
.ex-story{display:flex;align-items:center;gap:3.5rem;margin-bottom:5rem}
.ex-story:last-child{margin-bottom:0}
.ex-story-reverse{flex-direction:row-reverse}
.ex-story-img{flex:1 1 50%;min-width:0}
.ex-story-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.ex-story-text{flex:1 1 50%;min-width:0}
.ex-story-tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--purple);background:var(--purple-soft);border-radius:var(--r-pill);padding:.4rem .9rem;margin-bottom:.9rem}
.ex-story-text h2{padding-left:0;margin-bottom:.9rem}
.ex-story-text h2::before{display:none}
.ex-story-text p{font-size:1.02rem;line-height:1.7;color:var(--gray-700)}
@media (max-width:820px){
  .ex-story,.ex-story-reverse{flex-direction:column;gap:1.5rem;margin-bottom:3rem}
  .ex-story-img,.ex-story-text{flex:1 1 100%}
}

/* v0.34.0: el gancho a "Vive en México" ya no es su propia sección después
   de "A quién ayudamos" — pedido explícito del usuario: se movió DENTRO de
   "A quién ayudamos", arriba de las 3 fotos, como una tarjeta más chica que
   antecede al grid en vez de competir con él en su propia banda. Sigue
   siendo una sola foto, no otro grid — es un gancho hacia la página
   completa, no una sección que se autodenomine "audiencia" #4. */
.ex-teaser-box{display:flex;align-items:stretch;gap:0;background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);margin:2.5rem 0 3rem}
.ex-teaser-img{flex:1 1 42%;min-width:0}
.ex-teaser-img img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.ex-teaser-text{flex:1 1 58%;min-width:0;padding:2.5rem 3rem;display:flex;flex-direction:column;justify-content:center}
.ex-teaser-text .ex-story-tag{margin-bottom:.6rem}
.ex-teaser-text h3{margin-bottom:.75rem;font-size:1.5rem}
.ex-teaser-text p{color:var(--gray-700);margin-bottom:1.4rem;line-height:1.65}
.ex-teaser-text .btn{align-self:flex-start}
@media (max-width:820px){
  .ex-teaser-box{flex-direction:column;margin:2rem 0}
  .ex-teaser-img img{aspect-ratio:16/9}
  .ex-teaser-text{padding:2rem}
}