/*
Theme Name:  ADD México
Theme URI:   https://addmexico.org/
Author:      ADD — Suma de Empresas Creativas
Author URI:  https://addmexico.org/
Description: Tema a medida para ADD, Suma de Empresas Creativas (Puebla). Una sola
             página con las 21 agencias afiliadas, la trayectoria, la galería de
             fotos y el formulario de afiliación vía Contact Form 7.
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: add-mexico
*/

/* =========================================================
   ADD México — Suma de Empresas Creativas
   Arquitectura y sistema de interacción: patrón Biofarma
   Paleta y tipografía: marca ADD (presentación institucional)
   ========================================================= */

:root{
  --ink:#0D2A6E;
  --ink-2:#1A47B0;
  --ink-3:#3B6FD4;
  --ink-soft:rgba(13,42,110,.66);
  --ink-faint:rgba(13,42,110,.14);
  --bg:#F5F7FC;
  --bg-alt:#E8EDF9;
  --white:#fff;
  /* azul de marca, tomado del logo oficial (ADD LOGO.ai) */
  --brand:#3B51FA;
  --brand-2:#6072FF;
  /* rojo reservado exclusivamente para Premios ADD */
  --ember:#D42B2B;
  --ember-2:#FF4444;
  --brand-soft:rgba(59,81,250,.45);
  --blue-soft:rgba(96,114,255,.45);

  --r-sm:14px;
  --r-md:24px;
  --r-lg:40px;
  --r-xl:56px;
  --pill:999px;

  --wrap:1320px;
  --gap:24px;
  --sec-y:clamp(52px,6.4vw,98px);

  --ease:cubic-bezier(.22,.61,.36,1);
  /* salida lenta y prolongada: el crecimiento se asienta en vez de frenar de golpe */
  --ease-grow:cubic-bezier(.2,.9,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.025em}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,880px);margin-inline:auto}
.section{padding-block:var(--sec-y);position:relative;z-index:1}

/* ---------- tipografía de sistema ---------- */
.display{
  font-size:clamp(2.05rem,4.4vw,3.7rem);
  font-weight:300;line-height:1.08;letter-spacing:-.03em;
}
.display--center{text-align:center;max-width:20ch;margin-inline:auto}
.title-md{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:600;line-height:1.15}
.title-md--center{text-align:center;max-width:22ch;margin-inline:auto}
.lead{font-size:clamp(1rem,1.15vw,1.1rem);color:var(--ink-soft);line-height:1.6;max-width:62ch}
.lead--center{text-align:center;margin:1.4rem auto 0}
.eyebrow{
  display:block;font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:1.1rem;
}
.eyebrow--center{text-align:center}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;font-weight:500;padding:.85rem 1.7rem;
  border:0;cursor:pointer;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.btn--pill{border-radius:var(--pill)}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--brand);transform:translateY(-2px)}
.btn--brand{background:var(--brand);color:var(--white)}
.btn--brand:hover{background:var(--ink);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.btn--ghost:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.btn--light{background:var(--white);color:var(--ink)}
.btn--light:hover{transform:translateY(-2px)}

/* ---------- glows ---------- */
.glow{
  position:fixed;width:340px;height:340px;border-radius:50%;
  filter:blur(100px);pointer-events:none;z-index:0;opacity:.55;
  transform:translate(-50%,-50%);will-change:transform;
}
.glow--brand{background:var(--brand-soft)}
.glow--blue{background:var(--blue-soft)}

/* =========================================================
   CURSOR PERSONALIZADO
   Un punto que sigue al mouse al instante y un anillo que llega con
   retardo. Solo en dispositivos con puntero fino: en tactil no hay
   cursor que sustituir, y con prefers-reduced-motion se devuelve el
   del sistema, porque hay gente que lo necesita para orientarse.
   ========================================================= */
@media (pointer:fine){
  html.cursor-propio, html.cursor-propio *{cursor:none}
  html.cursor-propio a,
  html.cursor-propio button,
  html.cursor-propio summary,
  html.cursor-propio input,
  html.cursor-propio select,
  html.cursor-propio textarea{cursor:none}
}
.cur-punto,.cur-anillo{
  position:fixed;top:0;left:0;z-index:9999;
  pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cur-punto{
  width:7px;height:7px;background:var(--brand);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease);
}
.cur-anillo{
  width:34px;height:34px;
  border:1.5px solid var(--brand);opacity:.55;
  transition:width .3s var(--ease),height .3s var(--ease),
             opacity .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
/* sobre algo pulsable el anillo crece y el punto se achica: el foco pasa
   del puntero al elemento */
.cur-activo .cur-anillo{width:56px;height:56px;opacity:.9;background:rgba(59,81,250,.10)}
.cur-activo .cur-punto{width:4px;height:4px}
/* sobre fondos oscuros el azul de marca se pierde: pasa a blanco */
.cur-claro .cur-punto{background:var(--white)}
.cur-claro .cur-anillo{border-color:var(--white)}
.cur-claro.cur-activo .cur-anillo{background:rgba(255,255,255,.14)}

@media (prefers-reduced-motion:reduce){
  html.cursor-propio, html.cursor-propio *{cursor:auto}
  .cur-punto,.cur-anillo{display:none}
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:fixed;inset:1rem 1rem auto;z-index:60;transition:transform .45s var(--ease)}
.site-header.is-hidden{transform:translateY(calc(-100% - 1.5rem))}
.header-bar{
  height:80px;border-radius:var(--pill);
  padding:0 1rem 0 1.9rem;
  display:flex;align-items:center;justify-content:space-between;
  /* translúcido: deja ver la foto del hero por detrás. El desenfoque y la
     saturación evitan que el texto se ensucie con lo que pasa debajo. */
  background:rgba(255,255,255,.055);
  /* saturate por DEBAJO de 1 desatura lo que se ve a través: es lo que
     quita el tinte azul del hero. Subirlo lo intensificaba. */
  backdrop-filter:blur(32px) saturate(.5);
  -webkit-backdrop-filter:blur(32px) saturate(.5);
  transition:background .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 10px 40px rgba(13,42,110,.09);
}
/* ---- Estado sobre el hero ----
   Cristal casi transparente para que se lea la foto por detrás. El bisel
   es un borde claro más un reflejo interior arriba, que es lo que separa
   el panel del fondo sin necesidad de opacar.
   El contenido pasa a blanco: con 12% de blanco, el menú en azul marino
   sobre la foto quedaría ilegible. */
.site-header--hero .header-bar{
  background:rgba(255,255,255,.006);
  /* El desenfoque es lo que empañaba la foto, no el relleno: bajarlo de 46
     a 22 px es lo que de verdad la deja verse. El bisel se atenúa en la
     misma proporción para que el marco no pese más que el cristal. */
  backdrop-filter:blur(10px) saturate(.62);
  -webkit-backdrop-filter:blur(10px) saturate(.62);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 10px 40px rgba(6,20,54,.16);
}
/* El :not(.btn) es imprescindible: `.site-header--hero .nav > a` tiene más
   especificidad que `.site-header--hero .btn--ink` (dos clases + elemento
   contra dos clases), así que sin él pintaba de blanco el texto del botón
   Afíliate, que sobre el hero ya tiene fondo blanco. */
.site-header--hero .nav > a:not(.btn),
.site-header--hero .nav-drop__btn{color:var(--white)}
.site-header--hero .nav > a:not(.btn)::after{background:var(--white)}
.site-header--hero .burger span{background:var(--white)}
/* el logotipo va en azul: invertirlo lo deja en blanco pleno */
.site-header--hero .logo img{filter:brightness(0) invert(1)}
.site-header--hero .btn--ink{background:var(--white);color:var(--ink)}
.site-header--hero .btn--ink:hover{background:var(--brand);color:var(--white)}

/* si el navegador no soporta backdrop-filter, volvemos a fondo sólido
   antes que dejar el texto ilegible sobre la imagen */
@supports not (backdrop-filter: blur(1px)){
  .header-bar{background:rgba(255,255,255,.9)}
}
.logo{display:flex;align-items:center}
.logo img{width:clamp(128px,13vw,168px);height:auto}

.nav{display:flex;align-items:center;gap:2rem}
.nav > a{font-size:.97rem;font-weight:500;position:relative;padding-block:.4rem}
.nav > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--brand);transition:width .3s var(--ease);
}
.nav > a:not(.btn):hover::after{width:100%}

.nav-drop{position:relative}
.nav-drop__btn{
  background:none;border:0;cursor:pointer;font:inherit;font-weight:500;font-size:.97rem;
  color:inherit;display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 0;
}
.nav-drop__btn svg{width:12px;height:8px;transition:transform .3s var(--ease)}
.nav-drop.is-open .nav-drop__btn svg{transform:rotate(180deg)}
.nav-drop__panel{
  position:absolute;top:calc(100% + 1.6rem);left:50%;transform:translate(-50%,10px);
  width:min(92vw,900px);background:var(--white);border-radius:var(--r-lg);
  padding:1.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  box-shadow:0 24px 70px rgba(13,42,110,.14);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav-drop.is-open .nav-drop__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.drop-card{display:block;border-radius:var(--r-md);padding:1.1rem;transition:background .3s var(--ease)}
.drop-card:hover{background:var(--bg)}
.drop-card__num{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  color:var(--brand);margin-bottom:.7rem;
}
.drop-card strong{display:block;font-size:1.05rem;font-weight:600;margin-bottom:.35rem}
.drop-card span:not(.drop-card__num){display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.drop-card em{display:block;font-style:normal;color:var(--brand);font-size:.86rem;font-weight:500;margin-top:.7rem}

.burger{display:none;background:none;border:0;cursor:pointer;padding:.6rem;width:44px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* =========================================================
   HERO
   ========================================================= */
/* Hero con foto a sangre: la imagen cubre toda la sección y el texto
   se monta encima, alineado a la izquierda. */
.hero{
  position:relative;z-index:1;
  min-height:clamp(520px,72vh,720px);
  display:flex;align-items:center;
  padding-top:calc(80px + 3rem);
  padding-bottom:clamp(3rem,6vw,5rem);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  /* espejo horizontal + encuadre más alto para que los rostros no
     queden cortados por el borde superior */
  transform:scaleX(-1);
  object-position:30% 10%;
}
/* Degradado direccional, no un velo parejo: opaco donde va el texto y
   transparente sobre la gente, para no apagar la foto entera. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(9,26,64,.52) 0%, rgba(9,26,64,.34) 34%,
                           rgba(9,26,64,.12) 64%, rgba(9,26,64,0) 100%),
    linear-gradient(180deg, rgba(9,26,64,.10) 0%, rgba(9,26,64,0) 38%);
}
.hero__copy{
  position:relative;z-index:2;
  width:min(100% - 2.5rem,var(--wrap));
  margin-inline:auto;
  color:var(--white);
}
.hero__kicker{
  display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);
  border:1px solid rgba(255,255,255,.55);border-radius:var(--pill);
  padding:.4rem 1rem;margin-bottom:1.8rem;
}
.hero h1{
  font-size:clamp(2.3rem,5.2vw,4rem);font-weight:300;line-height:1.05;
  letter-spacing:-.035em;max-width:16ch;color:var(--white);
}
.hero__copy p{margin-top:1.8rem;color:rgba(255,255,255,.82);font-size:1.05rem;max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero__cta .btn--ghost{color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.hero__cta .btn--ghost:hover{background:var(--white);color:var(--ink)}

@media (max-width:880px){
  /* en vertical la foto se estrecha y el grupo se pierde: centramos el
     encuadre y reforzamos el velo desde abajo */
  .hero__bg{object-position:50% 10%}
  .hero__scrim{
    background:linear-gradient(180deg, rgba(9,26,64,.28) 0%, rgba(9,26,64,.58) 65%, rgba(9,26,64,.72) 100%);
  }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{overflow:hidden;position:relative;z-index:1}
.marquee--stats{padding-block:clamp(56px,7vw,96px)}
.marquee__track{display:flex;width:max-content;animation:slide 48s linear infinite}
.marquee__track--slow{animation-duration:34s}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:var(--gap);padding-right:var(--gap)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

.stat{
  width:300px;min-height:300px;flex:none;
  background:var(--white);border-radius:var(--r-lg);padding:1.8rem;
  display:flex;flex-direction:column;transition:transform .65s var(--ease-grow);
}
.stat:hover{transform:translateY(-6px) scale(1.02)}
.stat p{font-size:1.1rem;line-height:1.32;letter-spacing:-.01em}
.stat .eyebrow{margin-bottom:.9rem;font-size:.68rem}
.stat--accent{background:var(--ink);color:var(--white)}
.stat--accent .eyebrow{color:var(--brand-2)}
.stat__fig{margin-top:auto;display:block;padding-top:1.4rem;line-height:1}
.stat__fig--num{font-size:3.4rem;font-weight:300;color:var(--brand);letter-spacing:-.05em}
.stat--accent .stat__fig--num{color:var(--brand-2)}
.stat__fig--word{font-size:2.1rem;font-weight:300;color:var(--brand);letter-spacing:-.03em;line-height:1.05}
/* Tarjeta con foto a sangre: la imagen cubre toda la tarjeta y el texto
   se monta encima. El degradado no es decorativo — sin él, el texto
   blanco queda ilegible sobre las zonas claras de la foto. */
.stat--foto{
  position:relative;
  overflow:hidden;
  color:var(--white);
}
.stat--foto .eyebrow{color:var(--white)}
.stat--foto p,
.stat--foto .eyebrow{position:relative;z-index:2}

.stat__fig--foto{
  position:absolute;
  inset:0;
  margin:0;padding:0;height:auto;
  border-radius:0;
  z-index:0;
}
.stat__fig--foto img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--ease);
}
/* Velo oscuro, calibrado foto por foto.
   Un valor único no sirve: lo que rompe el texto blanco no es el brillo
   promedio de la imagen sino sus zonas claras. Medido sobre el área que
   ocupa el texto (percentil 95 de luminancia), estas cuatro van de 74 a
   234 — de casi negro a casi blanco. De ahí que cada una lleve lo suyo. */
.stat__fig--foto::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(9,26,64,var(--velo,.30));
}
.stat--foto[data-foto="premios"]     { --velo:0    } /* p95 74  · ya es oscura */
.stat--foto[data-foto="vinculacion"] { --velo:.25  } /* p95 154 */
.stat--foto[data-foto="comunidad"]   { --velo:.35  } /* p95 169 */
.stat--foto[data-foto="eventos"]     { --velo:.45  } /* p95 234 · pantalla encendida */

.stat--foto:hover .stat__fig--foto img{transform:scale(1.06)}
.stat--accent .stat__fig--word{color:var(--brand-2)}

/* Tarjeta blanca: unifica logotipos de fondos y valores tonales dispares
   (17 PNG con alfa + 2 JPEG con fondo sólido) en una sola retícula. */
.agency{
  margin:0;flex:none;
  /* proporción ~1.37:1 mantenida al reducir */
  width:clamp(148px,14.5vw,186px);height:clamp(108px,10.6vw,136px);
  background:var(--white);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  padding:1.2rem 1.25rem;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
/* Ajuste óptico por logo: estos cinco son lockups muy apaisados y, al
   llenar el ancho de la tarjeta, pesaban más que el resto del muro.
   Se reducen en proporción; el margin:auto los mantiene centrados. */
/* Flow lleva su propio ajuste: el isotipo circular le da más peso visual
   que a los lockups puramente tipográficos, aun al mismo ancho. */
.agency img[src*="flow"]{ max-width:95% }

.agency img[src*="urbanic"],
.agency img[src*="impulso"],
.agency img[src*="v-mas-ideas"],
.agency img[src*="pixel-mxo"],
.agency img[src*="dosis-media"],
.agency img[src*="carmesi"],
.agency img[src*="comarka"],
.agency img[src*="conektica"],
.agency img[src*="xy"],
.agency img[src*="nobula"]{ max-width:80% }

.agency:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 44px rgba(13,42,110,.12)}
/* sin width/height fijos: cada logo trae su propia proporción y debe
   centrarse ópticamente dentro de la tarjeta, no estirarse */
.agency img{
  display:block;margin:auto;
  width:100%;height:100%;
  object-fit:contain;
  /* Tope de altura: sin esto, un logo cuadrado ocupa todo el alto de la
     caja mientras los apaisados quedan en 20px. WPBR (proporción 0.9) se
     veía 5.6 veces más alto que LK Asociados (5.25). */
  max-height:54px;
}
/* WPBR es el único casi cuadrado (208x230): con el tope común se leía más
   pequeño que el resto. Se le sube el techo un 12% (54 -> 60.5px), que es
   lo que iguala su presencia óptica sin desbordar la tarjeta. */
.agency img[src*="wpbr"]{ max-height:60.5px }
/* VOLMOR es un logo apilado (símbolo sobre wordmark, 1.26:1): con el tope
   común el «VOLMOR GROUP» quedaba ilegible entre lockups apaisados. */
.agency img[src*="volmor"]{ max-height:62px }

/* Mosaico: las 17 agencias visibles de una sola vez, sin espera.
   Flex en lugar de grid estricto porque 17 no cierra en filas parejas:
   así la última fila queda centrada en vez de dejar un hueco al costado. */
.agencies{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:clamp(48px,6vw,80px);
}

/* =========================================================
   MANIFIESTO + PROPÓSITO
   ========================================================= */
.manifesto{padding-block:var(--sec-y);text-align:center;position:relative;z-index:1}
.manifesto .display{margin-inline:auto}
.manifesto .lead{margin:2rem auto 0;text-align:center}
.quote{
  margin:2.8rem auto 0;max-width:52ch;
  font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:300;font-style:italic;
  line-height:1.4;letter-spacing:-.02em;color:var(--ink);
  padding-top:2rem;border-top:1px solid var(--ink-faint);
}
.quote::before{content:"“"}
.quote::after{content:"”"}

.purpose{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.purpose__card{
  background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.8rem,3vw,2.8rem);
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.purpose__card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 26px 60px rgba(13,42,110,.12)}
.purpose__card--dark:hover{box-shadow:0 26px 60px rgba(13,42,110,.28)}
.purpose__card p{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.45;letter-spacing:-.015em}
.purpose__card--dark{background:var(--ink);color:var(--white)}
.purpose__card--dark .eyebrow{color:var(--brand-2)}

/* =========================================================
   PILARES (oferta de valor)
   ========================================================= */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:clamp(48px,6vw,80px)}
.pillar{
  background:var(--white);border-radius:var(--r-lg);padding:2rem 1.6rem 2.2rem;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.pillar:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 60px rgba(13,42,110,.12)}
.pillar__num{
  display:block;font-size:2.4rem;font-weight:300;color:var(--brand);
  letter-spacing:-.05em;line-height:1;margin-bottom:1.4rem;
}
.pillar h3{font-size:1.25rem;font-weight:600;margin-bottom:.6rem}
.pillar p{color:var(--ink-soft);font-size:.95rem}

/* =========================================================
   BENEFICIOS
   ========================================================= */
.benefits-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start}
.benefits-grid__aside .lead{margin-top:1.3rem}
.benefits-grid__aside .btn{margin-top:2rem}
.benefits li{
  display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;
  padding:1.5rem 0;border-top:1px solid var(--ink-faint);
}
.benefits li:last-child{border-bottom:1px solid var(--ink-faint)}
.benefits li span{font-size:.85rem;font-weight:600;color:var(--brand);letter-spacing:.1em;padding-top:.25rem}
.benefits h4{font-size:1.2rem;font-weight:600;margin-bottom:.4rem}
.benefits p{color:var(--ink-soft);font-size:.95rem}

/* =========================================================
   COMITÉS / TARJETAS SUAVES
   ========================================================= */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:clamp(48px,6vw,80px)}
.soft-card{
  background:var(--white);border-radius:var(--r-lg);padding:2rem 1.7rem 2.2rem;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.soft-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(13,42,110,.12)}
.soft-card__num{
  display:block;font-size:.8rem;font-weight:600;letter-spacing:.16em;
  color:var(--brand);margin-bottom:1rem;
}
.soft-card h4{font-size:1.25rem;font-weight:600;margin-bottom:.6rem}
.soft-card p{color:var(--ink-soft);font-size:.95rem}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
  margin-top:clamp(48px,6vw,80px);
}
.timeline li{
  background:var(--white);border-radius:var(--r-lg);padding:1.8rem 1.6rem 2rem;
  position:relative;border-top:3px solid var(--brand);
  transition:transform .65s var(--ease-grow);
}
.timeline li:hover{transform:translateY(-6px) scale(1.02)}
.timeline__tag{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:.9rem;
}
.timeline h4{font-size:1.15rem;font-weight:600;margin-bottom:.5rem}
.timeline p{color:var(--ink-soft);font-size:.93rem}

/* =========================================================
   PREMIOS ADD
   ========================================================= */
.awards{
  margin-inline:1rem;border-radius:var(--r-xl);
  background:linear-gradient(140deg,var(--ink),#3a0f1f 55%,var(--ember));
  color:var(--white);padding-block:clamp(64px,8vw,120px);
  position:relative;z-index:1;overflow:hidden;
}
.awards::before{
  content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;
  background:radial-gradient(ellipse at center,rgba(255,68,68,.45),transparent 65%);
}
.awards__inner{position:relative;text-align:center}
.awards__badge{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.45);
  border-radius:var(--pill);padding:.42rem 1.1rem;margin-bottom:1.8rem;
}
.awards__title{font-size:clamp(2.8rem,8vw,6rem);font-weight:700;letter-spacing:-.05em;line-height:.95}
.awards__claim{
  font-size:clamp(1.2rem,2.4vw,1.9rem);font-weight:300;font-style:italic;
  margin-top:.8rem;color:rgba(255,255,255,.9);
}
.awards__text{
  max-width:62ch;margin:1.8rem auto 0;color:rgba(255,255,255,.75);font-size:1.02rem;
}
.awards__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  max-width:760px;margin:clamp(40px,5vw,64px) auto 0;
}
.awards__winner{
  background:rgba(255,255,255,.1);border-radius:var(--r-md);padding:1.6rem;
  backdrop-filter:blur(6px);
  transition:transform .65s var(--ease-grow),background .65s var(--ease-grow);
}
.awards__winner:hover{transform:translateY(-6px) scale(1.03);background:rgba(255,255,255,.16)}
.awards__winner .eyebrow{color:rgba(255,255,255,.8);margin-bottom:.7rem}
.awards__winner strong{display:block;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em}
.awards__list{margin-top:2.6rem}
.awards__list .eyebrow{color:rgba(255,255,255,.7)}
.awards__list p{font-size:clamp(1rem,1.6vw,1.2rem);font-weight:300;color:rgba(255,255,255,.92)}

/* =========================================================
   ACTIVIDADES
   ========================================================= */
.split-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end}
.activity{
  background:var(--white);border-radius:var(--r-lg);padding:1.8rem 1.6rem 2rem;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.activity:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 60px rgba(13,42,110,.12)}
.tag{
  display:inline-block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);font-weight:600;margin-bottom:.8rem;
}
.activity h4{font-size:1.22rem;font-weight:600;line-height:1.22;margin-bottom:.6rem}
.activity p{color:var(--ink-soft);font-size:.94rem}
.section--activities .cards-3{margin-top:clamp(40px,5vw,64px)}
/* Subtítulo que separa los tres bloques de la sección Trayectoria
   (hitos / programa anual / fotos) sin competir con el h2 de la sección. */
.bloque-titulo{
  font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:300;letter-spacing:-.02em;
  margin-top:clamp(56px,6vw,88px);
}
.section--history .timeline,
.section--history .cards-3{margin-top:1.6rem}
.galeria__titulo{margin-top:0}

/* ---------- Galería de fotos de la Memoria ----------
   Carrusel de scroll nativo con scroll-snap: sin JS ya funciona con dedo,
   trackpad y teclado; las flechas solo desplazan una tarjeta. */
.galeria{margin-top:clamp(56px,6vw,88px)}
.galeria__cab{
  display:flex;align-items:end;justify-content:space-between;
  gap:var(--gap);margin-bottom:1.6rem;
}
.galeria__titulo{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:300;letter-spacing:-.02em}
.galeria__mandos{display:flex;gap:.6rem;flex:none}
.galeria__flecha{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(13,42,110,.18);background:var(--white);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease-grow);
}
.galeria__flecha svg{width:19px;height:19px}
.galeria__flecha:hover:not(:disabled){background:var(--brand);color:var(--white);border-color:var(--brand);transform:scale(1.06)}
.galeria__flecha:disabled{opacity:.32;cursor:default}

.galeria__pista{
  display:flex;gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.galeria__pista::-webkit-scrollbar{display:none}
.galeria__pista:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:var(--r-md)}

.foto{
  margin:0;flex:0 0 auto;scroll-snap-align:start;
  width:clamp(248px,26vw,340px);
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.foto:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 60px rgba(13,42,110,.12)}
.foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.foto figcaption{padding:1.15rem 1.3rem 1.5rem;color:var(--ink-soft);font-size:.9rem;line-height:1.45}
.foto figcaption .tag{display:block;margin-bottom:.45rem}

@media (prefers-reduced-motion:reduce){
  .galeria__pista{scroll-behavior:auto}
}

/* =========================================================
   ECOSISTEMA
   ========================================================= */
.eco-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start}
.eco-grid .lead{margin-top:1.3rem}
.eco-list li{
  padding:1.3rem 0 1.3rem 2.4rem;border-top:1px solid var(--ink-faint);
  position:relative;font-size:1.02rem;color:var(--ink-soft);
}
.eco-list li:last-child{border-bottom:1px solid var(--ink-faint)}
.eco-list li::before{
  content:"+";position:absolute;left:0;top:1.15rem;
  color:var(--brand);font-size:1.3rem;font-weight:300;line-height:1;
}

/* =========================================================
   CONSEJO DIRECTIVO
   ========================================================= */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:clamp(48px,6vw,80px)}
.member{
  background:var(--white);border-radius:var(--r-lg);padding:1.8rem 1.4rem 2rem;text-align:center;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.member:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 26px 60px rgba(13,42,110,.12)}
.member__avatar{
  width:88px;height:88px;margin:0 auto 1.3rem;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--ink),var(--ink-3));
  color:var(--white);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;
}
/* Avatar con foto: conserva el círculo de las iniciales para que la
   ficha sin retrato (Jessica) no rompa la fila. Al mezclar retratos de
   origen dispar, el recorte circular es lo que más los unifica. */
.member__avatar--foto{
  padding:0;overflow:hidden;
  background:var(--bg-alt);
}
.member__avatar--foto img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  display:block;
  transition:transform .6s var(--ease);
}
.member:hover .member__avatar--foto img{transform:scale(1.06)}
/* Los cuatro retratos vienen ya recortados sobre el rostro desde el
   archivo, así que no necesitan anclajes individuales: el encuadre
   dejó de ser un problema de CSS. */

.member__role{
  display:block;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:.5rem;
}
.member h4{font-size:1.1rem;font-weight:600;margin-bottom:.25rem}
.member p{font-size:.9rem;color:var(--ink-soft)}

/* =========================================================
   FAQ / REQUISITOS
   ========================================================= */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq-grid__aside .lead{margin-top:1.2rem}
.faq-grid__aside .btn{margin-top:1.8rem}
.process{
  margin-top:1.6rem;padding:1rem 1.3rem;background:var(--bg-alt);
  border-radius:var(--r-sm);font-size:.92rem;font-weight:500;
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow);
}
.process:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 44px rgba(13,42,110,.10)}
.faq details{border-top:1px solid var(--ink-faint);padding:1.35rem 0}
.faq details:last-child{border-bottom:1px solid var(--ink-faint)}
.faq summary{
  list-style:none;cursor:pointer;font-size:1.06rem;font-weight:500;
  display:flex;justify-content:space-between;gap:1.5rem;align-items:center;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--brand);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--brand)}
.faq details p{margin-top:.9rem;color:var(--ink-soft);max-width:62ch;font-size:.96rem}

/* =========================================================
   CONTACTO / AFÍLIATE
   ========================================================= */
.section--contact{background:var(--ink);color:var(--white);border-radius:var(--r-xl);margin-inline:1rem}
.section--contact .lead{color:rgba(255,255,255,.72);margin-top:1.4rem}
.section--contact .eyebrow{color:var(--brand-2)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.contact-direct{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:2.4rem}
.contact-direct a{font-size:1.05rem;font-weight:500;transition:color .3s var(--ease)}
.contact-direct a:hover{color:var(--brand-2)}

.form{display:grid;gap:1.1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form label{display:grid;gap:.45rem;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.form input,.form select,.form textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);
  color:var(--white);font:inherit;font-size:1rem;padding:.7rem 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.form select option{color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brand-2)}
.form textarea{resize:vertical}
.form .btn{justify-self:start;margin-top:.8rem}
.form__ok{color:var(--brand-2);font-size:.95rem}

/* =========================================================
   SLOT del formulario (solo en la versión estática)
   ========================================================= */
.form-slot{
  border:1.5px dashed rgba(255,255,255,.32);
  border-radius:var(--r-md);
  padding:clamp(2rem,4vw,3rem);
  text-align:center;color:rgba(255,255,255,.75);
}
.form-slot__label{
  display:inline-block;font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);
  border:1px solid var(--brand-2);border-radius:var(--pill);
  padding:.35rem 1rem;margin-bottom:1.2rem;
}
.form-slot p{font-size:1.05rem;font-weight:300}
.form-slot__hint{margin-top:.6rem;font-size:.9rem;color:rgba(255,255,255,.45)}

/* =========================================================
   CONTACT FORM 7
   El plugin genera su propio marcado. Estas reglas apuntan a
   sus clases para que, al pegar el shortcode, el formulario
   herede el diseño del panel oscuro sin editar el plugin.
   ========================================================= */
.section--contact .wpcf7-form{display:grid;gap:1.1rem}
.section--contact .wpcf7-form p{margin:0;display:grid;gap:.45rem}

/* CF7 envuelve cada campo en <p>; la fila de dos columnas se
   arma marcando ese <p> con la clase .fila desde el shortcode */
.section--contact .wpcf7-form p.fila{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
}
.section--contact .wpcf7-form label{
  display:grid;gap:.45rem;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.section--contact .wpcf7-form-control{
  background:transparent;border:0;
  border-bottom:1px solid rgba(255,255,255,.3);
  color:var(--white);font:inherit;font-size:1rem;
  padding:.7rem 0;border-radius:0;width:100%;
  transition:border-color .3s var(--ease);
}
.section--contact .wpcf7-form-control:focus{outline:none;border-color:var(--brand-2)}
.section--contact select.wpcf7-form-control option{color:var(--ink)}
.section--contact textarea.wpcf7-form-control{resize:vertical}

.section--contact .wpcf7-submit{
  width:auto;justify-self:start;
  background:var(--brand);color:var(--white);
  border:0;border-radius:var(--pill);
  padding:.85rem 1.7rem;font-size:.95rem;font-weight:500;
  cursor:pointer;margin-top:.8rem;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.section--contact .wpcf7-submit:hover{background:var(--white);color:var(--ink);transform:translateY(-2px)}

/* mensajes de estado y validación */
.section--contact .wpcf7-response-output{
  margin:.6rem 0 0;padding:.9rem 1.2rem;
  border:0;border-radius:var(--r-sm);
  background:rgba(255,255,255,.08);font-size:.93rem;
}
.section--contact .wpcf7-not-valid-tip{
  color:var(--brand-2);font-size:.82rem;text-transform:none;letter-spacing:0;
}
.section--contact .wpcf7-spinner{margin:0 0 0 .6rem}

@media (max-width:880px){
  .section--contact .wpcf7-form p.fila{grid-template-columns:1fr}
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding-top:var(--sec-y);position:relative;z-index:1}
.footer__top{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap);align-items:start;padding-bottom:clamp(48px,6vw,80px)}
.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.footer__nav div{display:grid;gap:.6rem;align-content:start}
.footer__nav a{font-size:1rem;transition:color .3s var(--ease)}
.footer__nav a:hover{color:var(--brand)}
.footer__nav .eyebrow{margin-bottom:.2rem}

.footer__panel{
  background:var(--ink);color:var(--white);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:clamp(2rem,4vw,3.2rem);
  display:grid;grid-template-columns:1.4fr auto;gap:var(--gap);align-items:center;
  transition:background .5s var(--ease);
}
.footer__panel:hover{background:var(--brand)}
.footer__logo{width:clamp(150px,16vw,210px);height:auto;grid-column:1/-1;margin-bottom:.6rem}
.footer__panel p{font-size:clamp(1.05rem,1.8vw,1.45rem);font-weight:300;line-height:1.35;max-width:44ch}
.footer__legal{
  background:var(--ink);color:rgba(255,255,255,.6);
  padding:1.4rem clamp(2rem,4vw,3.2rem) 2.2rem;
  display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;
  font-size:.85rem;
}
.footer__legal a{margin-right:1.4rem;transition:color .3s var(--ease)}
.footer__legal a:hover{color:var(--white)}
.footer__social{display:flex;gap:1rem;align-items:center}

/* =========================================================
   EVENTOS — pastillas
   Lista abierta: el conjunto crece, por eso se resuelve con
   pastillas que fluyen en varias líneas y no con una retícula fija.
   ========================================================= */
/* Banda oscura: la sección necesita peso propio para sostenerse sin
   logotipos ajenos. El "+" como separador es el mismo signo que
   construye la marca (add + méxico) y literaliza la idea de suma. */
.section--events{
  background:var(--ink);color:var(--white);
  border-radius:var(--r-xl);
  margin-inline:1rem;
}
.section--events .eyebrow{color:var(--brand-2)}
.section--events .lead{color:rgba(255,255,255,.68)}

.events{
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:baseline;
  gap:.1em .5em;
  margin-top:clamp(48px,6vw,84px);
}
.events li{
  font-size:clamp(1.3rem,3.3vw,2.7rem);
  font-weight:300;letter-spacing:-.03em;line-height:1.2;
  transition:color .3s var(--ease);
}
.events li:not(:last-child)::after{
  content:"+";
  margin-left:.42em;
  color:var(--brand-2);
  font-weight:400;
}
.events li:hover{color:var(--brand-2)}
.events__more{
  color:rgba(255,255,255,.42);
  font-size:clamp(1rem,1.6vw,1.35rem)!important;
  font-style:italic;letter-spacing:0;
}
.events__more:hover{color:rgba(255,255,255,.6)}

/* =========================================================
   ÍCONOS DE SECCIÓN
   Los archivos llevan canal alfa generado a partir del blanco, así que
   funcionan igual sobre fondo claro y sobre la banda azul de Eventos.
   ========================================================= */
.sec-ico{
  display:block;
  width:clamp(114px,11.5vw,160px);
  height:auto;
  margin-bottom:1.3rem;
  /* bajan de intensidad para acompañar al encabezado y no competir con él:
     menos saturación y contraste, y más luz */
  opacity:.56;
  filter:saturate(.38) contrast(.78) brightness(1.26);
  animation:flotar 6s ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:translate,rotate,transform;
  transition:transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
}
/* al pasar el mouse recupera color y crece; la flotación sigue corriendo
   porque usa translate/rotate y deja transform libre para el hover */
.sec-ico:hover{
  transform:scale(1.16);
  opacity:.92;
  filter:saturate(1) contrast(1) brightness(1.02);
}
.sec-ico--center{margin-inline:auto}

/* Sobre la banda azul oscura hay que aclarar, no desvanecer: bajar la
   opacidad ahí lo hundiría en el fondo en vez de blanquearlo. */
.section--events .sec-ico{
  opacity:.78;
  filter:saturate(.35) brightness(1.95);
}
.section--events .sec-ico:hover{opacity:.95;filter:saturate(.7) brightness(1.9)}

/* flotación leve: sube y baja con una inclinación mínima, para que
   parezca suspendido y no un elemento deslizándose */
/* usa translate y rotate (propiedades independientes) en lugar de
   transform, para que el scale del hover pueda componerse sin pisarla */
@keyframes flotar{
  0%,100%{ translate:0 0;     rotate:0deg    }
  50%    { translate:0 -10px; rotate:-1.5deg }
}

@media (prefers-reduced-motion:reduce){
  .sec-ico{animation:none}
}

/* =========================================================
   BANNERS DE ANCHO COMPLETO
   Mismo gesto que las tarjetas, pero con una escala mucho menor:
   en un bloque de 1300px un 2% son 26px de crecimiento y se vería
   como un salto. A esta escala se percibe como que el banner
   "responde" sin desacomodar la página.
   ========================================================= */
.section--events,
.section--contact,
.awards,
.footer__panel{
  transition:transform .65s var(--ease-grow),box-shadow .65s var(--ease-grow),background .5s var(--ease);
}
.section--events:hover,
.section--contact:hover,
.awards:hover{
  transform:scale(1.008);
  box-shadow:0 30px 80px rgba(13,42,110,.18);
}
.footer__panel:hover{transform:scale(1.006)}

/* =========================================================
   REVEAL
   ========================================================= */
/* Usa translate (propiedad independiente), NO transform: con transform
   esta regla ganaba por orden y anulaba el scale de todos los :hover. */
/* Entrada de secciones.
   Tres papeles, no uno solo: el encabezado entra primero y con recorrido
   corto, el contenido cascadea dentro de su propio grupo, y las bandas a
   sangre solo funden — una franja de ancho completo deslizándose se ve
   barata. Los tiempos y distancias van por variables para que main.js
   solo tenga que fijar el retardo.

   El estado inicial cuelga de .js (la clase la pone un script en el head):
   sin JavaScript no hay observer que lo deshaga, así que la página se
   queda legible en vez de en blanco. */
.js .reveal{
  opacity:0;
  translate:0 var(--rev-y, 26px);
  filter:blur(var(--rev-blur, 0px));
  transition:
    opacity   var(--rev-dur, .85s) var(--ease) var(--rev-delay, 0ms),
    translate var(--rev-dur, .85s) var(--ease) var(--rev-delay, 0ms),
    filter    var(--rev-dur, .85s) var(--ease) var(--rev-delay, 0ms);
}
.js .reveal.is-in{opacity:1;translate:0 0;filter:blur(0)}

/* Textos: recorrido más largo que el de las tarjetas y un desenfoque que
   los deja «enfocar» al entrar. Es el gesto que más se nota, y son pocos
   elementos, así que el filtro no pesa. */
.js .reveal--cabeza{--rev-y:24px;--rev-dur:.95s;--rev-blur:8px}

/* Bandas y bloques grandes: fundido largo, sin desplazamiento. */
.js .reveal--fundido{--rev-y:0px;--rev-dur:1.05s}

/* Ojo: el estado inicial usa `translate`, no `transform`, así que aquí
   hay que anular `translate` — un `transform:none` dejaba las tarjetas
   26 px desplazadas para quien pide menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal.is-in{opacity:1;translate:none;filter:none;transition:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .pillars{grid-template-columns:1fr 1fr}
  .board{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .cards-3,.timeline{grid-template-columns:1fr 1fr}
  .purpose{grid-template-columns:1fr}
}
@media (max-width:880px){
  body{font-size:16px}
  .burger{display:block}
  .nav{
    position:absolute;top:calc(100% + .8rem);left:0;right:0;
    background:var(--white);border-radius:var(--r-lg);
    flex-direction:column;align-items:stretch;gap:.4rem;padding:1.2rem;
    box-shadow:0 24px 70px rgba(13,42,110,.14);display:none;
  }
  .nav.is-open{display:flex}
  .nav > a,.nav-drop__btn{padding:.7rem .4rem;font-size:1.05rem}
  .nav .btn{justify-content:center;margin-top:.6rem}
  .nav-drop__panel{
    position:static;transform:none;width:auto;grid-template-columns:1fr;
    box-shadow:none;padding:.4rem 0;display:none;
  }
  .nav-drop.is-open .nav-drop__panel{display:grid;transform:none}
  .hero{padding-top:calc(80px + 3.5rem)}
  .pillars,.cards-3,.timeline,.board{grid-template-columns:1fr}
  .split-head,.faq-grid,.contact-grid,.benefits-grid,.eco-grid,
  .footer__top,.footer__panel,.awards__grid,.contact-direct{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .display--center,.title-md--center{max-width:none}
  .stat{width:255px;min-height:270px}
  .footer__legal{flex-direction:column;align-items:flex-start}
}