/* =========================================================================
   CHILIGROUP — Landing Page
   Tipografía: Nexa (Adobe Fonts / Typekit)

   ESCALA
   El archivo de Illustrator mide 1920 x 6766 px, pero es un lienzo 2x:
   reproducido 1:1 la tipografía sale al doble de tamaño en pantalla real.
   Por eso se conserva TODA la diagramación y las proporciones del diseño,
   pero cada medida va reescalada:

     · Tipografía  → escala fluida: 40% del .ai a 768px de ancho,
                     55% al tope de lienzo (ver bloque --fs-*)
     · Ritmo vertical (paddings y márgenes)          → 0.68 del .ai
     · Elementos gráficos (logos, iconos, reglas)    → 0.72 del .ai
     · Secciones con fotografía (hero y Hablemos)    → 0.80 del .ai,
       para que la imagen conserve la presencia que tiene en el diseño
     · Proporciones de caja (tarjetas, rejillas, anchos) → sin reescalar:
       son diagramación, no tamaño
     · Lienzo: 88vw con tope de 1400px (alcanzado a 1591px de viewport)

   Cada medida lleva anotado su valor original del archivo con la marca ".ai".
   ========================================================================= */

:root{
  /* ---- Color (muestreado del .ai) ---- */
  --red:        #ED1C23;
  --red-hover:  #FF2A33;
  --card-1:     #ED1C23;
  --card-2:     #CF1418;
  --card-3:     #960502;
  --card-4:     #790000;

  --ink:        #17191D;
  --ink-hero:   #181A1E;
  --ink-deep:   #0E1520;
  --chip:       #25292F;
  --cream:      #EFF0EB;
  --line-red:   #E96462;
  --white:      #FFFFFF;
  --grey-txt:   #7A7E82;   /* aprox. de Nexa Light: el kit sólo publica 400/700 */

  /* ---- Tipografía ----------------------------------------------------
     Escala fluida de dos anclas: cada tamaño vale 40% del .ai a 768px de
     ancho y crece hasta 1591px, que es donde el lienzo alcanza su tope de
     1400px. A partir de ahí todo queda fijo y la página sólo se centra,
     así la relación tipografía/lienzo es constante en monitores grandes.  */
  --fs-display:    clamp(32px, calc(22.7px + 2.26vw), 59px);   /* .ai 100  */
  --fs-talk:       clamp(29px, calc(19.9px + 1.99vw), 52px);   /* .ai  88  */
  --fs-year:       clamp(26px, calc(13.1px + 1.94vw), 44px);   /* .ai  94 — bajado
                                                                  para no competir
                                                                  con el titular   */
  --fs-card-title: clamp(17px, calc( 8.6px + 0.86vw), 22px);   /* .ai  38  */
  --fs-chip:       clamp(15px, calc( 8.3px + 0.82vw), 21px);   /* .ai  36.5*/
  --fs-body:       clamp(15px, calc( 7.3px + 0.72vw), 19px);   /* .ai  32  */
  --fs-eyebrow:    clamp(11px, calc( 9.2px + 0.36vw), 15px);   /* rótulo: en el .ai
                                                                  era mayor que el
                                                                  cuerpo, impropio
                                                                  en pantalla      */
  --fs-link:       clamp(15px, calc( 7.1px + 0.71vw), 18px);   /* .ai  31.4*/
  --fs-strip:      clamp(14px, calc( 6.9px + 0.68vw), 18px);   /* .ai  30.3*/
  --fs-note:       clamp(14px, calc( 6.7px + 0.66vw), 17px);   /* .ai  29.4*/
  --fs-fhead:      clamp(12px, calc( 6.6px + 0.66vw), 17px);   /* .ai  29.3*/
  --fs-tag:        clamp(11px, calc( 6.5px + 0.65vw), 17px);   /* .ai  28.7*/
  --fs-card-desc:  clamp(13px, calc( 6.1px + 0.60vw), 16px);   /* .ai  26.8*/
  --fs-btn:        clamp(14px, calc( 7.6px + 0.75vw), 20px);   /* .ai  33.4*/
  --fs-pill:       clamp(13px, calc(10.3px + 0.49vw), 18px);   /* .ai  51 (rótulo) */
  --fs-copy:       clamp(10px, calc( 4.3px + 0.43vw), 12px);   /* .ai  19  */

  /* ---- Layout ---- */
  --cw:         min(88vw, 1400px);              /* lienzo: tope 1400px en escritorio */
  /* El nav usa el MISMO lienzo que el contenido. En el .ai iba algo más
     ancho, pero en pantalla eso desalineaba el logo respecto al resto. */
  /* Separación entre el rótulo rojo y el titular de sección (misma en todas) */
  --gap-rotulo: clamp(10px, 1.55vw, 25px);
  /* Aire vertical de "Quiénes somos" y "Nuestro ecosistema": mismo arriba
     y abajo, y el mismo valor en ambas secciones. */
  --pad-seccion: clamp(38px, 4.40vw, 70px);
  --radius:     clamp(10px, 1.20vw, 19px);      /* .ai 32 */
  --radius-lg:  clamp(14px, 1.95vw, 31px);      /* .ai 52 */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------- Reset ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"nexa","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--red); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--red); outline-offset:3px; border-radius:4px;
}

.container{ width:var(--cw); margin-inline:auto; }

/* --------------------------- Tipografía base --------------------------- */
.display{
  font-size:var(--fs-display);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.005em;
}
.lead{ font-size:var(--fs-body); line-height:1.45; }
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.3;
}
.eyebrow--red{ color:var(--red); }

/* Regla roja bajo los titulares — .ai 262 x 12 */
.rule{
  display:block;
  width:clamp(78px, 9.83vw, 156px);
  height:clamp(4px, .45vw, 7px);
  background:var(--red);
}

/* ------------------------------ Botones ------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.85em;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--red{ background:var(--red); color:var(--white); }
.btn--red:hover{ background:var(--red-hover); transform:translateY(-2px); box-shadow:0 .5vw 1.2vw rgba(237,28,35,.32); }
.btn--red:active{ transform:translateY(0); }
.btn--lg{
  font-size:var(--fs-btn);
  padding:clamp(12px, .92vw, 15px) clamp(20px, 1.74vw, 28px);
}
.btn__arrow{ display:inline-block; transition:transform .25s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(6px); }

/* ================================ NAV ================================ */
.nav{ background:var(--white); }
.nav__inner{
  width:var(--cw);
  margin-inline:auto;
  padding-block:clamp(14px, 1.50vw, 24px);
  display:flex; align-items:center; justify-content:space-between; gap:2vw;
}
.nav__logo img{ height:clamp(34px, 3.00vw, 48px); width:auto; }

.nav__menu{ display:flex; align-items:center; gap:clamp(12px, 1.4vw, 22px); }
.nav__list{ display:flex; align-items:center; gap:clamp(4px, .45vw, 7px); }
.nav__link{
  display:inline-block;
  padding:.62em 1.15em;
  border-radius:999px;
  font-size:var(--fs-link);
  color:var(--ink);
  transition:background-color .25s var(--ease);
}
.nav__link:hover,
.nav__link.is-active{ background:#EDEDED; }
.nav__cta{ font-size:var(--fs-link); padding:.72em 1.4em; }

.nav__toggle{
  display:none; width:46px; height:46px;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.nav__toggle span{
  display:block; width:26px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ================================ HERO ================================ */
.hero{
  position:relative;
  background:var(--ink-hero);
  min-height:clamp(470px, 40.30vw, 641px);        /* .ai 968 — las secciones con foto
                                                     usan escala 0.80 para que la
                                                     imagen conserve su presencia */
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:url("../img/hero-fondo.webp") center/cover no-repeat;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,22,26,.82) 0%, rgba(20,22,26,.55) 46%, rgba(20,22,26,.26) 100%);
}
.hero__inner{ position:relative; color:var(--white); padding-block:clamp(44px, 3.2vw, 51px); }
.hero__title{ margin-top:clamp(10px, 1.45vw, 23px); }                /* .ai 41 */
.hero .rule{ margin-top:clamp(14px, 1.52vw, 24px); }                 /* .ai 43 */
.hero .lead{ margin-top:clamp(16px, 2.52vw, 40px); color:rgba(255,255,255,.92); }  /* .ai 71 */
.hero .btn{ margin-top:clamp(20px, 2.05vw, 33px); }                  /* .ai 58 */

/* =========================== BANNER BUILDER =========================== */
.banner{
  position:relative;
  background:var(--red) url("../img/banner-particulas.webp") center/cover no-repeat;
  color:var(--white);
  min-height:clamp(160px, 14.34vw, 228px);        /* .ai 405 */
  display:flex; align-items:center;
}
.banner__inner{
  width:var(--cw);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(8px, 1vw, 16px);
  padding-block:clamp(22px, 1.77vw, 28px);
}
.banner__title{ line-height:1.14; }
.banner__since{ font-size:var(--fs-body); padding-bottom:.2em; }

/* =============================== STRIP =============================== */
.strip{ background:var(--white); }
.strip__inner{
  /* Mismo aire arriba y abajo. En el .ai era asimétrico (71 / 159); se
     reparte a partes iguales conservando la altura total de la franja. */
  padding-block:clamp(28px, 4.24vw, 67px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(16px, 2.85vw, 45px);
}
.strip__item{ font-size:var(--fs-strip); color:var(--ink); }
.strip__dot{
  width:clamp(4px, .29vw, 5px); aspect-ratio:1; border-radius:50%;
  background:var(--ink); flex:0 0 auto;
}

/* ========================== QUIÉNES SOMOS ========================== */
.about{
  position:relative;
  background:var(--cream);
  border-radius:clamp(10px, 1.08vw, 17px) clamp(10px, 1.08vw, 17px) 0 0;
  overflow:hidden;
}
.about__bg{
  position:absolute; inset:0;
  background:url("../img/quienessomos-fondo.webp") left top/cover no-repeat;
  pointer-events:none;
}
.about__inner{
  position:relative;
  /* Mismo aire arriba y abajo (en el .ai era 24 / 147). */
  padding-block:var(--pad-seccion);
  display:grid;
  grid-template-columns:1.7fr 1fr;                /* texto ancho · card angosta */
  column-gap:clamp(22px, 2.34vw, 37px);             /* .ai 66 */
  align-items:start;
}
.about__title{ margin-top:var(--gap-rotulo); }
.about__text{ margin-top:clamp(20px, 3.19vw, 51px); color:var(--ink); }  /* .ai 90 */
.about__note{
  margin-top:clamp(22px, 3.36vw, 53px);             /* .ai 95 */
  display:flex; align-items:flex-start; gap:clamp(14px, 1.77vw, 28px);
}
.about__note-icon{ width:clamp(48px, 5.47vw, 87px); height:auto; flex:0 0 auto; } /* .ai 146 */
.about__note p{ font-size:var(--fs-note); line-height:1.55; color:var(--grey-txt); }

/* ---- Card oscura + timeline ---- */
.timeline{
  position:relative;
  background:var(--ink);
  border-radius:var(--radius-lg);
  /* .ai 94 / 60 / 79 / 146 */
  padding:clamp(24px, 3.33vw, 53px) clamp(18px, 2.13vw, 34px) clamp(22px, 2.80vw, 45px) clamp(30px, 5.17vw, 82px);
  color:var(--white);
  min-height:clamp(0px, 42.18vw, 671px);            /* .ai 1191 */
}
/* Línea roja vertical, altura completa — .ai a 85px del borde */
.timeline::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:clamp(6px, 3.01vw, 48px);
  width:2px; background:var(--line-red);
}
.timeline__item{ position:relative; }
.timeline__item + .timeline__item{ margin-top:clamp(20px, 3.61vw, 57px); }  /* .ai 102 */
.timeline__dot{
  position:absolute;
  left:calc(-1 * clamp(12px, 2.16vw, 34px));        /* centrado sobre la línea */
  top:.42em;
  width:clamp(14px, 1.46vw, 23px); aspect-ratio:1; border-radius:50%;
  transform:translateX(-50%);
}
.timeline__item--red  .timeline__dot{ background:var(--red); }
.timeline__item--now  .timeline__dot{ background:var(--white); }
.timeline__year{ font-size:var(--fs-year); font-weight:700; line-height:1; }
.timeline__item--red .timeline__year{ color:var(--red); }
.timeline__item--now .timeline__year{ color:var(--white); }
.timeline__desc{
  margin-top:clamp(8px, .83vw, 13px);
  font-size:var(--fs-note);
  line-height:1.45;
}
.timeline__item--red .timeline__desc{ color:var(--red); }
.timeline__item--now .timeline__desc{ color:rgba(255,255,255,.92); }

.chips{
  margin-top:clamp(18px, 2.37vw, 38px);             /* .ai 67 */
  display:flex; flex-direction:column;
  gap:clamp(6px, .53vw, 8px);                      /* .ai 15 */
  width:clamp(170px,65.4%,540px);                 /* .ai 364 sobre 557 de caja */
}
.chip{
  background:var(--chip);
  border-radius:clamp(5px, .45vw, 7px);
  padding:clamp(9px, .85vw, 14px) clamp(11px, .92vw, 15px);
  font-size:var(--fs-chip);
  line-height:1;
  white-space:nowrap;
  color:var(--white);
  transition:background-color .25s var(--ease);
}
.chip:hover{ background:#333842; }

/* ============================ ECOSISTEMA ============================ */
.eco{
  background:var(--white);
  padding-block:var(--pad-seccion);   /* en el .ai era 99 / 90 (asimétrico) */
}
.eco__title{ margin-top:var(--gap-rotulo); }
.eco__grid{
  margin-top:clamp(24px, 2.79vw, 44px);             /* .ai 79 */
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:clamp(10px, 1.06vw, 17px);             /* .ai 30 */
  row-gap:clamp(10px, 1.31vw, 21px);                /* .ai 37 */
}

.card{
  position:relative;
  border-radius:var(--radius);
  /* .ai 29 / 70 / 59 */
  padding:clamp(16px, 1.03vw, 16px) clamp(18px, 2.48vw, 39px) clamp(20px, 2.09vw, 33px);
  color:var(--white);
  min-height:0;   /* la altura la define el contenido; la rejilla iguala la fila */
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card--c1{ background:var(--card-1); }
.card--c2{ background:var(--card-2); }
.card--c3{ background:var(--card-3); }
.card--c4{ background:var(--card-4); }
.card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 130% at 86% 14%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 .8vw 1.8vw rgba(0,0,0,.24); }

/* Zona de logo de altura fija e igual en las cuatro tarjetas: la píldora
   queda arriba a la derecha y los logos apoyan en una base común, de modo
   que todos los títulos arrancan exactamente a la misma altura. */
.card__top{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(8px, 1vw, 16px);
  min-height:clamp(58px, 5.15vw, 82px);
}
.card__logo{ width:auto; align-self:flex-end; }
/* Se dimensionan por ALTURA (no por ancho) para que pesen ópticamente igual */
.card__logo--cloud{ height:clamp(36px, 3.45vw, 55px); }
.card__logo--mkt{   height:clamp(46px, 4.45vw, 71px);
                    /* el PNG trae ~31% de alto transparente bajo la tinta */
                    margin-bottom:calc(-1 * clamp(14px, 1.38vw, 22px)); }
.card__logo--one{   height:clamp(15px, 1.42vw, 23px); }
.card__logo--data{  height:clamp(17px, 1.60vw, 26px); }

.card__tag{
  flex:0 0 auto;
  display:inline-block;
  background:rgba(0,0,0,.50);
  border-radius:999px;
  padding:clamp(5px, .50vw, 8px) clamp(9px, .71vw, 11px);
  font-size:var(--fs-tag);
  font-weight:400;
  line-height:1;
  white-space:nowrap;
  transition:background-color .25s var(--ease);
}
.card__tag b{ font-weight:700; }
.card__tag:hover{ background:rgba(0,0,0,.68); }
.card__tag-arrow{ display:inline-block; margin-left:.35em; transition:transform .25s var(--ease); }
.card__tag:hover .card__tag-arrow{ transform:translateX(4px); }

.card__title{
  position:relative; z-index:1;
  margin-top:clamp(16px, 1.70vw, 27px);
  font-size:var(--fs-card-title);
  font-weight:700;
  line-height:1.28;
}
.card__desc{
  position:relative; z-index:1;
  margin-top:clamp(5px, .67vw, 11px);
  font-size:var(--fs-card-desc);
  line-height:1.45;
  color:rgba(255,255,255,.90);
}

/* ============================== HABLEMOS ============================== */
.talk{
  position:relative;
  background:var(--ink);
  min-height:clamp(470px, 42.20vw, 671px);        /* .ai 1014 (escala 0.80) */
  display:flex; align-items:center;
  overflow:hidden;
}
/* La foto se ajusta a la ALTURA de la sección y se ancla a la derecha,
   de modo que la figura se ve completa a cualquier ancho. */
.talk__photo{
  position:absolute; inset:0;
  background-image:url("../img/hablemos-hombre.webp");
  background-repeat:no-repeat;
  background-size:auto 100%;
  /* Separada del borde derecho para acercar la figura al centro. */
  background-position:right 4vw center;
}
.talk__inner{ position:relative; color:var(--white); padding-block:clamp(40px, 2.4vw, 38px); }
.talk__title{ margin-top:clamp(14px, 1.52vw, 24px); font-size:var(--fs-talk); line-height:1.12; }
.talk .rule{ margin-top:clamp(14px, 1.52vw, 24px); }
.talk .lead{ margin-top:clamp(16px, 1.95vw, 31px); color:rgba(255,255,255,.92); }
.talk .btn{ margin-top:clamp(20px, 1.95vw, 31px); }

/* Píldora "HABLEMOS" con colita de globo de diálogo */
.pill{
  position:relative;
  display:inline-block;
  background:var(--red);
  border-radius:999px;
  padding:clamp(8px, .92vw, 15px) clamp(14px, 1.42vw, 23px);
  font-size:var(--fs-pill);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  text-transform:uppercase;
}
.pill::after{
  content:"";
  position:absolute; left:clamp(14px, 1.5vw, 24px); top:100%;
  border-style:solid;
  border-width:clamp(7px, .73vw, 12px) clamp(6px, .57vw, 9px) 0 0;
  border-color:var(--red) transparent transparent transparent;
}

/* =============================== OUTRO =============================== */
.outro{
  background:var(--white);
  padding-block:clamp(38px, 5.81vw, 92px);         /* .ai 164 */
  text-align:center;
}

/* =============================== FOOTER =============================== */
.footer{ background:var(--ink-deep); color:var(--white); }
.footer__inner{
  /* El aire superior del footer iguala al inferior de .footer__bottom. */
  padding-top:var(--pad-seccion);
  padding-bottom:clamp(28px, 2.98vw, 47px);   /* separación interna con el copyright */
  display:grid;
  grid-template-columns:1.6fr 1fr 1.25fr .95fr;
  gap:clamp(24px, 1.6vw, 25px);
}
.footer__brand{ display:flex; align-items:flex-start; }
.footer__brand img{ width:clamp(140px, 12.03vw, 191px); height:auto; }   /* .ai 321 */
.footer__head{
  font-size:var(--fs-fhead);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:clamp(9px, .64vw, 10px);
}
.footer__col ul{ display:flex; flex-direction:column; gap:0; }
.footer__col li,
.footer__col a{ font-size:var(--fs-link); line-height:1.42; color:rgba(255,255,255,.88); }
.footer__col a{ transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--red); }

.footer__social{
  margin-top:clamp(14px, 1.20vw, 19px);
  display:flex; align-items:center; gap:clamp(12px, 1.46vw, 23px);
}
.footer__social img{ height:clamp(16px, 1.46vw, 23px); width:auto; }     /* .ai 39 */
.footer__social a{ transition:opacity .2s var(--ease), transform .2s var(--ease); }
.footer__social a:hover{ opacity:.75; transform:translateY(-2px); }

.footer__bottom{ padding-bottom:var(--pad-seccion); text-align:center; }
.footer__bottom p{
  width:var(--cw); margin-inline:auto;   /* dentro del lienzo, como el resto */
  font-size:var(--fs-copy); letter-spacing:.02em; color:rgba(255,255,255,.55);
}

/* ============================ Animaciones ============================ */
.js .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* ============================= Responsive ============================= */
/* Por debajo de 980px se apilan las dos columnas; por encima se conserva
   la diagramación del diseño (texto + card, y footer a 4 columnas). */
@media (max-width:980px){
  .about__inner{ grid-template-columns:1fr; row-gap:36px; }
  .timeline{ min-height:0; padding-left:clamp(46px,7vw,90px); }
  .chips{ width:min(100%,540px); }
  .footer__inner{ grid-template-columns:1fr 1fr; row-gap:38px; }
  .footer__brand{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .nav{ position:relative; }
  .nav__inner{ padding-block:14px; }
  .nav__toggle{ display:flex; }
  .nav__menu{
    position:absolute; left:0; right:0; top:100%; z-index:50;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white);
    padding:14px clamp(22px,6vw,40px) 28px;
    border-top:1px solid #EAEAEA;
    box-shadow:0 18px 34px rgba(0,0,0,.12);
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav__menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__link{ padding:.9em 1em; font-size:16px; }
  .nav__cta{ margin-top:14px; justify-content:center; font-size:15px; padding:1em 1.5em; }

  .eco__grid{ grid-template-columns:1fr; }
  .card{ min-height:0; }
  .hero, .talk{ min-height:0; }
  .hero__inner, .talk__inner{ padding-block:clamp(44px,8vw,80px); }

  /* En vertical la foto no cabe completa: se recorta y se atenúa. */
  .talk__photo{ background-size:cover; background-position:74% center; opacity:.34; }

  /* --- Áreas táctiles --------------------------------------------------
     En escritorio basta el tamaño visual, pero en táctil los enlaces y
     píldoras se quedaban en 16–21px de alto. Se amplía la zona pulsable
     por encima del mínimo recomendado (24px) sin alterar la maqueta. */
  .card__tag{ padding-block:12px; }
  .footer__col a{ display:inline-block; padding-block:9px; }
  .footer__social{ gap:6px; }
  .footer__social a{ display:grid; place-items:center; min-width:40px; min-height:40px; }

  .banner__inner{ flex-direction:column; align-items:flex-start; }
  .banner__since{ padding-bottom:0; }
  .strip__inner{ gap:14px 26px; }
}

@media (max-width:640px){
  .footer__inner{ grid-template-columns:1fr; row-gap:32px; }
  .about__note{ flex-direction:column; }
  .timeline{ padding-left:clamp(40px,12vw,60px); }

  /* Los saltos del diseño se dejan fluir; cada <br> lleva un espacio previo. */
  .hero__title br, .lead br, .talk__title br, .about__title br,
  .about__note p br, .timeline__desc br, .eco__title br,
  .card__title br, .card__desc br, .banner__title br{ display:none; }
}

/* ========================= Accesibilidad motion ========================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}

/* ============================== Print ============================== */
@media print{
  .nav,.footer__social{ display:none; }
  .hero__bg,.talk__photo{ display:none; }
  body{ color:#000; }
}