/* =========================================================
   ORTHOALIGN — Sistema visual
   Fuente: Manual de identidad (colores pág. 17, tipografía pág. 18)
   Títulos: Inter · Cuerpo: Open Sans
   ========================================================= */
:root{
  /* Colores del manual */
  --deep:    #0b343a;   /* Dark Azure — fondo oscuro principal */
  --deep-2:  #245a63;   /* Dark Azure 2 */
  --cyan:    #2F7F7B;   /* Cyan — acción sobre fondo claro */
  --turq:    #527c78;   /* Grey Turquoise */
  --turq-lt: #7fa9a4;   /* Gray Turquoise */
  --bg:      #f4f5f1;   /* Light yellow green */
  --white:   #ffffff;
  /* Tonos de las hojas del isotipo oficial — acento luminoso sobre fondo oscuro */
  --aqua:    #83c7c1;
  --aqua-lt: #b7e3de;
  /* Sombra del Dark Azure (mismo tono, 20% más oscuro) para profundidad */
  --night:   #092a2e;

  --text:  var(--deep-2);
  --line:  rgba(11,52,58,.12);
  --line-dk: rgba(183,227,222,.16);

  --f-title: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:  "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --nav-h: 84px;
  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  /* Forma "hoja", derivada de las curvas del isotipo */
  --leaf: 44% 0 44% 0 / 24% 0 24% 0;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) - 8px); }
/* Escala general de la letra (todos los tamaños de texto dependen de este valor) */
html{ font-size:87%; }
@media (max-width: 960px){ html{ font-size:89%; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--f-title); color:var(--deep); font-weight:700; margin:0; letter-spacing:-.03em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--aqua); color:var(--deep); }
:focus-visible{ outline:2px solid var(--aqua); outline-offset:4px; border-radius:6px; }
html{ scrollbar-color: var(--turq) var(--deep); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--deep); }
::-webkit-scrollbar-thumb{ background:var(--turq); border-radius:10px; border:2px solid var(--deep); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-999px; top:8px; z-index:300; background:var(--aqua); color:var(--deep); padding:10px 16px; border-radius:8px; font-weight:600; }
.skip:focus{ left:8px; }
.grid-2 > *, .grid-split > *{ min-width:0; }

/* ---------- Tipografía ---------- */
.overline{
  display:inline-flex; flex-direction:column; gap:14px;
  font-family:var(--f-body); font-weight:600; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
.overline::after{ content:""; width:96px; height:1.5px; background:linear-gradient(90deg, currentColor 50%, transparent); }
.dark .overline, .hero .overline, .product .overline{ color:var(--aqua); }
.h2{ font-size:clamp(2rem, 1.25rem + 2.8vw, 3.5rem); line-height:1.07; letter-spacing:-.035em; }
.h2 .light, .h1 .light{ font-weight:300; }
.h3{ font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height:1.15; }
.lead{ font-size:clamp(1.04rem, .98rem + .3vw, 1.2rem); line-height:1.7; max-width:56ch; }
.accent{ color:var(--cyan); }
.dark .accent{ color:var(--aqua); }
.numeral{ font-family:var(--f-title); font-weight:300; letter-spacing:-.04em; line-height:1; color:var(--cyan); }
.dark .numeral{ color:var(--aqua); }

/* ---------- Secciones oscuras ---------- */
.dark{ background:var(--deep); color:rgba(255,255,255,.76); }
.dark h1,.dark h2,.dark h3{ color:#fff; }
.dark .lead{ color:rgba(255,255,255,.74); }

/* ---------- Botones ---------- */
.btn{
  --b: var(--deep); --f:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 28px; border-radius:999px;
  background:var(--b); color:var(--f); border:1.5px solid var(--b);
  font-family:var(--f-title); font-weight:500; font-size:.98rem; letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.btn svg{ width:18px; height:18px; flex:none; transition: transform .45s var(--ease-out); }
.btn:hover svg{ transform: translateX(4px); }
.btn:hover{ --b: var(--cyan); }
.btn--ghost{ background:transparent; color:var(--deep); border-color:rgba(11,52,58,.35); }
.btn--ghost:hover{ background:var(--deep); color:#fff; border-color:var(--deep); }
.dark .btn, .btn--aqua{ --b: var(--aqua); --f: var(--deep); }
.dark .btn:hover, .btn--aqua:hover{ --b: var(--aqua-lt); box-shadow: 0 10px 40px -10px rgba(131,199,193,.55); }
.dark .btn--ghost{ background:transparent; color:#fff; border-color:rgba(183,227,222,.45); }
.dark .btn--ghost:hover{ background:rgba(183,227,222,.08); border-color:var(--aqua); color:#fff; box-shadow:none; }
.btn--sm{ min-height:44px; padding:0 22px; font-size:.92rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--f-title); font-weight:600; font-size:.95rem; color:var(--deep);
  padding-bottom:4px; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  transition: background-size .45s var(--ease-out), color .3s;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .45s var(--ease-out); }
.link-arrow:hover{ background-size:100% 1.5px; color:var(--cyan); }
.link-arrow:hover svg{ transform:translateX(4px); }
.dark .link-arrow{ color:#fff; }
.dark .link-arrow:hover{ color:var(--aqua); }

/* ---------- Recursos gráficos ---------- */
.leaf{ border-radius:var(--leaf); overflow:hidden; position:relative; isolation:isolate; transform:translateZ(0); }
.leaf img{ width:100%; height:100%; object-fit:cover; }
.arcs{ position:absolute; pointer-events:none; z-index:2; height:auto; aspect-ratio:1 / 1; overflow:visible; }
.grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(to right, rgba(183,227,222,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(183,227,222,.05) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 20% 20%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 55% 60% at 20% 20%, #000 10%, transparent 70%);
}

/* ---------- Ondas animadas (recuperadas de la v1) ----------
   Ocupan su propio espacio (no se superponen a textos ni fotos).
   Se dibujan de izquierda a derecha al entrar y luego se desplazan lentamente en bucle. */
.waves{
  position:relative; height:clamp(80px, 10vw, 140px); overflow:hidden; pointer-events:none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  clip-path: inset(0 100% 0 0); transition: clip-path 2.4s var(--ease-out);
}
.waves.is-in{ clip-path: inset(0 0 0 0); }
.waves svg{ position:absolute; left:0; top:0; width:200%; height:100%; overflow:visible; animation: wave-drift 46s linear infinite; animation-play-state:paused; }
.waves.is-playing svg{ animation-play-state:running; }
.waves svg:nth-child(2){ animation-duration:64s; animation-direction:reverse; }
.waves svg:nth-child(3){ animation-duration:82s; }
.waves path{ fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.waves .w1{ stroke:var(--turq-lt); }
.waves .w2{ stroke:var(--cyan); opacity:.55; }
.waves .w3{ stroke:var(--aqua); opacity:.5; }
.dark .waves .w1, .waves--dark .w1{ stroke:var(--aqua); opacity:.55; }
.dark .waves .w2, .waves--dark .w2{ stroke:var(--aqua-lt); opacity:.25; }
.dark .waves .w3, .waves--dark .w3{ stroke:var(--cyan); opacity:.8; }
.waves--section{ margin-top: clamp(56px, 9vh, 96px); margin-bottom: calc(-1 * clamp(40px, 6vh, 80px)); }
.waves--statement{ position:absolute; left:0; right:0; bottom:5vh; }
.waves--contact{ margin-top: clamp(64px, 10vh, 110px); }
@keyframes wave-drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="clip"]{ opacity:1; transform:none; clip-path: inset(14% 10% 14% 10% round 40px); transition: clip-path 1.4s var(--ease-out); transition-delay: var(--d,0s); }
[data-reveal="clip"].is-in{ clip-path: inset(0 0 0 0 round 0px); }

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); color:#fff; transition: transform .5s var(--ease); }
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(9,42,46,.94); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line-dk); transition:opacity .4s var(--ease);
}
.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-dk); transition:opacity .4s; }
.nav.is-scrolled::before{ opacity:1; }
.nav.is-scrolled::after{ opacity:0; }
.nav.is-hidden{ transform:translateY(-100%); }
.nav.is-open::before{ opacity:1; background:var(--night); -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav__inner{ height:100%; display:grid; grid-template-columns: auto 1fr auto; align-items:center; column-gap:clamp(32px, 4vw, 64px); }
.nav__brand{ display:flex; align-items:center; text-decoration:none; padding:8px 0; }
.nav__brand img{ height:34px; width:auto; }
.nav__links{ display:flex; align-items:center; justify-content:center; gap:clamp(20px, 2.3vw, 38px); }
.nav__links a{
  position:relative; display:block; padding:10px 2px; text-decoration:none; white-space:nowrap;
  font-family:var(--f-title); font-weight:400; font-size:.95rem; color:rgba(255,255,255,.82); transition: color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:2px; right:2px; bottom:2px; height:2px; border-radius:2px; background:var(--aqua);
  transform:scaleX(0); transform-origin:right; transition: transform .45s var(--ease-out);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:#fff; font-weight:500; }
.nav__toggle{ display:none; width:46px; height:46px; border-radius:50%; position:relative; border:1px solid var(--line-dk); }
.nav__toggle span{ position:absolute; left:13px; right:13px; height:1.5px; background:#fff; transition: transform .45s var(--ease); }
.nav__toggle span:nth-child(1){ top:18px; } .nav__toggle span:nth-child(2){ top:26px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ transform: translateY(-4px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:90; background:var(--night); color:#fff;
  /* contenido arriba (debajo del encabezado) y desplazable: nunca queda detrás del logo */
  display:flex; flex-direction:column; justify-content:flex-start; padding: calc(var(--nav-h) + 28px) var(--gut) 40px;
  clip-path: circle(0% at calc(100% - 44px) 42px); transition: clip-path .8s var(--ease); visibility:hidden; overflow-y:auto;
}
.menu.is-open{ clip-path: circle(150% at calc(100% - 44px) 42px); visibility:visible; }
.menu ol{ counter-reset:m; width:100%; max-width:560px; margin-top:auto; border-top:1px solid var(--line-dk); }
.menu li{ counter-increment:m; border-bottom:1px solid var(--line-dk); }
.menu ol a{
  display:flex; align-items:baseline; gap:18px; padding:14px 0; text-decoration:none;
  font-family:var(--f-title); font-weight:600; font-size:clamp(1.6rem, 6.5vw, 2.4rem); letter-spacing:-.03em;
  opacity:0; transform:translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.menu ol a::before{ content:"0" counter(m); font-weight:300; font-size:.85rem; color:var(--aqua); letter-spacing:0; }
.menu ol a:hover{ color:var(--aqua); }
.menu.is-open ol a{ opacity:1; transform:none; }
.menu.is-open li:nth-child(2) a{ transition-delay:.05s } .menu.is-open li:nth-child(3) a{ transition-delay:.1s }
.menu.is-open li:nth-child(4) a{ transition-delay:.15s } .menu.is-open li:nth-child(5) a{ transition-delay:.2s }
.menu.is-open li:nth-child(6) a{ transition-delay:.25s } .menu.is-open li:nth-child(7) a{ transition-delay:.3s }
.menu .btn{ margin-top:32px; margin-bottom:auto; align-self:flex-start; }
/* Pantallas anchas: menú en dos columnas, entra completo sin desplazarse */
@media (min-width: 900px){
  .menu ol{ max-width:980px; display:grid; grid-template-columns: 1fr 1fr; column-gap:64px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden;
  background: radial-gradient(ellipse 70% 80% at 0% 40%, var(--deep) 0%, var(--night) 100%);
  color:rgba(255,255,255,.8);
}
.hero__media{ position:absolute; top:0; right:0; bottom:0; width:64%; z-index:0; overflow:hidden; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position: 55% 50%;
  filter: brightness(.78) saturate(.92) contrast(1.06);
  transform: scale(1.08); transition: transform 2.4s var(--ease-out), opacity 1.4s var(--ease);
  opacity:0;
}
.is-loaded .hero__media img{ transform: scale(1.0); opacity:1; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--night) 0%, rgba(9,42,46,.82) 22%, rgba(9,42,46,.25) 52%, rgba(9,42,46,0) 70%),
    linear-gradient(0deg, var(--night) 0%, rgba(9,42,46,0) 34%),
    linear-gradient(180deg, rgba(9,42,46,.55) 0%, rgba(9,42,46,0) 22%);
}
.hero__arcs{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.hero__arcs circle{ fill:none; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.hero__arcs .draw{ stroke-dasharray:1; stroke-dashoffset:1; transition: stroke-dashoffset 2.6s var(--ease-out) .4s; }
.is-loaded .hero__arcs .draw{ stroke-dashoffset:0; }

.hero__content{ position:relative; z-index:2; flex:1; display:flex; align-items:center; padding: calc(var(--nav-h) + 28px) 0 44px; }
.hero__text{ max-width: 640px; }
.hero__title{
  margin: 24px 0 22px; color:#fff;
  font-size: clamp(2.6rem, 1.2rem + 3.6vw, 4.6rem); line-height:1.04; letter-spacing:-.035em; font-weight:300;
}
.hero__title strong{ font-weight:700; letter-spacing:-.04em; }
.hero__title .aq{ color:var(--aqua); }
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.hero__title .line > span{ display:block; transform:translateY(108%); transition: transform 1.2s var(--ease-out); transition-delay: var(--d,0s); }
.is-loaded .hero__title .line > span{ transform:none; }
.hero__sub{ max-width:48ch; color:rgba(255,255,255,.8); font-size:clamp(1.05rem, .98rem + .35vw, 1.22rem); }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero__fade{ opacity:0; transform:translateY(18px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d,0s); }
.is-loaded .hero__fade{ opacity:1; transform:none; }

.attrs{ position:relative; z-index:2; border-top:1px solid var(--line-dk); background:linear-gradient(180deg, rgba(9,42,46,.35), rgba(9,42,46,.85)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.attrs ul{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.attr{ display:flex; align-items:center; gap:18px; padding:24px clamp(12px, 2vw, 32px); position:relative; }
.attr + .attr::before{ content:""; position:absolute; left:0; top:28%; bottom:28%; width:1px; background:var(--line-dk); }
.attr:first-child{ padding-left:0; }
.attr__icon{ flex:none; width:58px; height:58px; border-radius:50%; border:1px solid rgba(183,227,222,.35); display:grid; place-items:center; transition: border-color .4s, background .4s; }
.attr__icon svg{ width:26px; height:26px; stroke:var(--aqua-lt); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.attr:hover .attr__icon{ border-color:var(--aqua); background:rgba(131,199,193,.08); }
.attr p{ font-family:var(--f-title); font-weight:400; font-size:1rem; line-height:1.35; color:#fff; }

/* =========================================================
   POR QUÉ ORTHOALIGN
   ========================================================= */
.story{ position:relative; height:300vh; }
.story__sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.story__grid{ display:grid; grid-template-columns: 5fr 7fr; gap:clamp(32px, 6vw, 96px); align-items:center; width:100%; }
.story__count{ font-size:clamp(6rem, 12vw, 11rem); margin:30px 0 30px; position:relative; height:1em; }
.story__count span{ position:absolute; left:0; top:0; opacity:0; transform:translateY(30px); transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
.story__count span.is-active{ opacity:1; transform:none; }
.story__count span::after{ content:"."; }
.story__tabs li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); font-family:var(--f-title); font-weight:500; color:rgba(11,52,58,.38); transition: color .5s var(--ease); }
.story__tabs li:last-child{ border-bottom:1px solid var(--line); }
.story__tabs li i{ width:18px; height:1.5px; background:currentColor; transition: width .6s var(--ease-out), background .5s; }
.story__tabs li.is-active{ color:var(--deep); }
.story__tabs li.is-active i{ width:42px; background:var(--cyan); }
.story__panels{ position:relative; min-height:22rem; }
.story__panel{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(40px); transition: opacity .7s var(--ease), transform 1s var(--ease-out); pointer-events:none; }
.story__panel.is-active{ opacity:1; transform:none; pointer-events:auto; }
.story__panel h3{ font-weight:600; color:var(--cyan); font-size:1rem; letter-spacing:0; margin-bottom:18px; }
.story__panel p{ font-family:var(--f-title); font-weight:500; color:var(--deep); font-size:clamp(1.55rem, 1.05rem + 2vw, 2.6rem); line-height:1.22; letter-spacing:-.03em; }
.story__panel p em{ font-style:normal; color:var(--cyan); }
.story__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line); }
.story__progress span{ display:block; height:100%; background:var(--cyan); transform-origin:left; transform:scaleX(0); }

/* =========================================================
   LA SOLUCIÓN (servicios + producto)
   ========================================================= */
.section{ position:relative; padding: clamp(96px, 14vh, 160px) 0; }
.section-head{ display:grid; grid-template-columns: 7fr 5fr; gap:48px; align-items:end; margin-bottom: clamp(48px, 8vh, 84px); }
.section-head .h2{ margin-top:24px; }
.section-head > *{ min-width:0; }

.legend{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-bottom:28px; font-size:.82rem; color:var(--deep-2); }
.legend span{ display:inline-flex; align-items:center; gap:10px; }
.legend i{ width:9px; height:9px; border-radius:50%; background:var(--cyan); }
.legend i.ring{ background:transparent; border:1.5px solid var(--cyan); }

.index{ border-top:1px solid var(--line); }
.index__item{ border-bottom:1px solid var(--line); position:relative; }
.index__btn{ width:100%; display:grid; grid-template-columns: 72px 1fr auto 48px; align-items:center; gap:20px; padding: clamp(22px, 3vh, 32px) 0; text-align:left; position:relative; isolation:isolate; }
.index__btn::before{ content:""; position:absolute; inset:0 calc(-1 * var(--gut)); background:var(--white); z-index:-1; transform:scaleY(0); transform-origin:bottom; transition: transform .6s var(--ease-out); }
.index__item:hover .index__btn::before, .index__item.is-open .index__btn::before{ transform:scaleY(1); }
.index__num{ font-family:var(--f-title); font-weight:300; font-size:1.05rem; color:var(--cyan); }
.index__name{ font-family:var(--f-title); font-weight:600; color:var(--deep); font-size:clamp(1.3rem, 1rem + 1.4vw, 2.2rem); letter-spacing:-.035em; line-height:1.12; transition: transform .6s var(--ease-out); }
.index__item:hover .index__name{ transform:translateX(10px); }
.index__stage{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--deep-2); white-space:nowrap; }
.index__icon{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition: background .4s, border-color .4s, transform .6s var(--ease-out); }
.index__icon svg{ width:16px; height:16px; stroke:var(--deep); }
.index__item.is-open .index__icon{ background:var(--deep); border-color:var(--deep); transform:rotate(45deg); }
.index__item.is-open .index__icon svg{ stroke:#fff; }
.index__panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .7s var(--ease-out); }
.index__item.is-open .index__panel{ grid-template-rows:1fr; }
.index__panel > div{ overflow:hidden; }
.index__content{ display:grid; grid-template-columns: 72px 1fr 1fr; gap:20px; padding: 0 0 clamp(28px, 4vh, 40px); }
.index__content p{ grid-column:2; max-width:52ch; }
.index__gain{ grid-column:3; border-left:1.5px solid var(--cyan); padding-left:22px; align-self:start; }
.index__gain span{ display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--deep-2); margin-bottom:8px; }
.index__gain strong{ font-family:var(--f-title); font-weight:600; color:var(--deep); font-size:1.1rem; line-height:1.4; letter-spacing:-.015em; }

.product{
  position:relative; margin-top: clamp(72px, 12vh, 130px); border-radius: 32px; overflow:hidden;
  background: radial-gradient(ellipse 80% 120% at 100% 0%, var(--deep-2) 0%, var(--deep) 45%, var(--night) 100%);
  /* Tarjeta compacta: entra completa en pantalla (máx. ~520px de alto en escritorio) */
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items:stretch; color:rgba(255,255,255,.78);
  max-height: 540px;
}
.product__media{ position:relative; min-height:340px; }
.product__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 50% 42%; }
.product__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(9,42,46,0) 60%, var(--deep) 100%); }
.product + .product{ margin-top: clamp(20px, 3vh, 32px); }
.product--rev .product__media{ order:2; }
.product--rev .product__media::after{ background: linear-gradient(270deg, rgba(9,42,46,0) 60%, var(--deep) 100%); }
.product--rev{ background: radial-gradient(ellipse 80% 120% at 0% 0%, var(--deep-2) 0%, var(--deep) 45%, var(--night) 100%); }
.product__body{ position:relative; z-index:2; padding: clamp(32px, 3.6vw, 56px); display:flex; flex-direction:column; justify-content:center; font-size:1rem; }
.product__body .h2{ color:#fff; margin:18px 0 10px; font-size:clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); }
.product__tag{ font-family:var(--f-title); color:var(--aqua); font-weight:500; font-size:1rem; margin-bottom:12px; }
.specs{ margin:20px 0 26px; border-top:1px solid var(--line-dk); }
.specs div{ display:grid; grid-template-columns: 100px 1fr; gap:16px; padding:10px 0; border-bottom:1px solid var(--line-dk); font-size:.95rem; }
.specs dt{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--aqua); padding-top:4px; }
.specs dd{ margin:0; font-family:var(--f-title); font-weight:500; color:#fff; }

/* =========================================================
   CÓMO TRABAJAMOS (proceso)
   ========================================================= */
.process{ position:relative; padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 12vh, 140px); overflow:clip; background: linear-gradient(180deg, var(--night) 0%, var(--deep) 40%, var(--deep) 100%); }
.process__head{ position:relative; display:grid; grid-template-columns: 7fr 5fr; gap:48px; align-items:end; margin-bottom: clamp(56px, 9vh, 100px); }
.process__head > *{ min-width:0; }
.process__head .h2{ margin-top:24px; }
.process__body{ position:relative; display:grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 6vw, 96px); }
.process__body > *{ min-width:0; }
.process__media{ position:sticky; top: calc(var(--nav-h) + 5vh); height: min(70vh, 640px); }
.process__frame{ position:absolute; inset:0; }
.process__layer{ position:absolute; inset:0; opacity:0; transform:scale(1.05); transition: opacity .9s var(--ease), transform 1.4s var(--ease-out); }
.process__layer.is-active{ opacity:1; transform:none; }
.process__layer img{ width:100%; height:100%; object-fit:cover; }
.process__label{
  position:absolute; left:22px; bottom:22px; z-index:3; display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px; background:rgba(9,42,46,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border:1px solid var(--line-dk); color:#fff; font-family:var(--f-title); font-size:.85rem; font-weight:500;
}
.process__label b{ color:var(--aqua); font-weight:500; }

.process__track{ position:relative; }
.process__rail{ position:absolute; left:0; top:8px; bottom:8px; width:1.5px; background:var(--line-dk); }
.process__rail span{ position:absolute; inset:0; background:var(--aqua); transform-origin:top; transform:scaleY(0); }
.process__steps{ position:relative; padding-left: clamp(28px, 3vw, 44px); }
.step{ min-height:64vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; position:relative; opacity:.35; transition: opacity .6s var(--ease); }
.step.is-active{ opacity:1; }
.step::before{ content:""; position:absolute; left: calc(-1 * clamp(28px, 3vw, 44px) - 5px); top:50%; width:11px; height:11px; border-radius:50%; background:var(--deep); border:1.5px solid var(--aqua); transform:translateY(-50%); transition: background .5s, transform .5s var(--ease-out); }
.step.is-active::before{ background:var(--aqua); transform:translateY(-50%) scale(1.25); }
.step__num{ font-size:clamp(3.2rem, 6vw, 5rem); margin-bottom:14px; }
.step__num::after{ content:"."; }
.step h3{ margin-bottom:16px; }
.step p{ max-width:44ch; }
.step__services{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.chip{ display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px; border:1px solid rgba(131,199,193,.4); color:var(--aqua-lt); font-size:.8rem; font-weight:600; text-decoration:none; transition: background .3s, color .3s, border-color .3s; }
.chip:hover{ background:var(--aqua); color:var(--deep); border-color:var(--aqua); }
.step__mobile-media{ display:none; }

/* =========================================================
   FORMACIÓN
   ========================================================= */
.training__grid{ display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items:center; }
.training__grid > *{ min-width:0; }
.training .h2{ margin:24px 0 24px; }
.training .lead{ color:var(--deep-2); }
.checks{ margin:34px 0 38px; border-top:1px solid var(--line); }
.checks li{ display:grid; grid-template-columns: 28px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); line-height:1.5; }
.checks svg{ width:22px; height:22px; stroke:var(--cyan); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }
.checks strong{ display:block; font-family:var(--f-title); font-weight:600; color:var(--deep); letter-spacing:-.01em; }
/* Tres pilares de la formación: ícono sutil + título + línea breve */
.pillars{ margin:34px 0 38px; border-top:1px solid var(--line); }
.pillars li{ display:grid; grid-template-columns: 48px 1fr; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); line-height:1.5; }
.pillars__icon{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(47,127,123,.35); display:grid; place-items:center; transition: background .4s, border-color .4s; }
.pillars__icon svg{ width:22px; height:22px; stroke:var(--cyan); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition: stroke .3s; }
.pillars li:hover .pillars__icon{ background:var(--deep); border-color:var(--deep); }
.pillars li:hover .pillars__icon svg{ stroke:var(--aqua-lt); }
.pillars strong{ display:block; font-family:var(--f-title); font-weight:600; color:var(--deep); font-size:1.08rem; letter-spacing:-.015em; margin-bottom:2px; }
.mosaic{ position:relative; display:grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap:16px; height: clamp(460px, 62vw, 680px); }
.mosaic figure{ margin:0; position:relative; overflow:hidden; border-radius:24px; }
.mosaic figure img{ width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease-out); }
.mosaic figure:hover img{ transform:scale(1.04); }
.mosaic .m1{ grid-row: 1 / span 2; border-radius:var(--leaf); }
.mosaic .m1 img{ object-position: 60% 40%; }
.mosaic .m2 img{ object-position: 50% 30%; }
.mosaic .m3 img{ object-position: 50% 35%; }

/* =========================================================
   EQUIPO / DIRECTORES
   ========================================================= */
.team{ background:var(--white); }
.team__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }
.member{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 40px); align-items:start; }
.portrait{ position:relative; aspect-ratio: 4 / 5; border-radius:var(--leaf); overflow:hidden; isolation:isolate; background: radial-gradient(ellipse 90% 80% at 80% 0%, var(--deep-2), var(--deep) 55%, var(--night)); }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.portrait img{ transition: transform 1.4s var(--ease-out); }
.member:hover .portrait img{ transform:scale(1.03); }
.member__role{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--cyan); }
.member__name{ font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing:-.035em; line-height:1.08; margin: 12px 0 8px; }
.member__spec{ font-family:var(--f-title); font-weight:500; color:var(--deep-2); }
.timeline{ margin:22px 0 0; position:relative; }
.timeline::before{ content:""; position:absolute; left:5px; top:14px; bottom:14px; width:1.5px; background:var(--line); }
.timeline li{ position:relative; padding:7px 0 7px 30px; line-height:1.5; font-size:.98rem; }
.timeline li::before{ content:""; position:absolute; left:0; top:14px; width:11px; height:11px; border-radius:50%; background:var(--white); border:1.5px solid var(--cyan); }

/* =========================================================
   FRASE PUENTE
   ========================================================= */
.statement{ position:relative; height:200vh; background:var(--night); }
.statement__sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden; }
.statement .arcs--a{ right:-6%; top:-12%; width:clamp(280px, 40vw, 600px); }
.statement .arcs--b{ left:-8%; bottom:-16%; width:clamp(220px, 30vw, 460px); transform: rotate(180deg); }
.statement__text{ font-family:var(--f-title); font-weight:600; color:#fff; font-size:clamp(2.2rem, 1.2rem + 4.2vw, 5rem); line-height:1.05; letter-spacing:-.045em; max-width:16ch; }
.statement__text .w{ display:inline-block; opacity:.15; transition: opacity .35s linear; }
.statement__text .w.is-lit{ opacity:1; }
.statement__text .w.is-accent{ color:var(--aqua); font-weight:300; }
.statement__foot{ margin-top:40px; display:flex; align-items:center; gap:18px; color:var(--aqua); font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600; }
.statement__foot img{ width:34px; }

/* =========================================================
   RECURSOS (+ preguntas frecuentes)
   ========================================================= */
.faq__grid{ display:grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items:start; }
.faq__grid > *{ min-width:0; }
.faq__aside{ position:sticky; top: calc(var(--nav-h) + 40px); }
.faq__aside .h2{ margin:24px 0 20px; }
.faq__aside p{ margin-bottom:28px; }
.qa{ border-bottom:1px solid var(--line); }
.qa:first-child{ border-top:1px solid var(--line); }
.qa__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; text-align:left; font-family:var(--f-title); font-weight:500; font-size:clamp(1.05rem, .95rem + .35vw, 1.22rem); color:var(--deep); letter-spacing:-.015em; line-height:1.35; transition: color .3s; }
.qa__btn:hover{ color:var(--cyan); }
.qa__icon{ flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition: transform .6s var(--ease-out), background .4s, border-color .4s; }
.qa__icon svg{ width:14px; height:14px; stroke:var(--deep); }
.qa.is-open .qa__icon{ transform:rotate(45deg); background:var(--deep); border-color:var(--deep); }
.qa.is-open .qa__icon svg{ stroke:#fff; }
.qa__panel{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .6s var(--ease-out); }
.qa.is-open .qa__panel{ grid-template-rows:1fr; }
.qa__panel > div{ overflow:hidden; }
.qa__panel p{ padding:0 60px 26px 0; max-width:62ch; }

/* =========================================================
   CONTACTO + FOOTER
   ========================================================= */
.contact{ position:relative; padding: clamp(110px, 16vh, 180px) 0 0; overflow:hidden; background: radial-gradient(ellipse 70% 60% at 100% 0%, var(--deep-2) 0%, var(--deep) 40%, var(--night) 100%); }
.contact .arcs--a{ right:-14%; top:-24%; width:clamp(260px, 34vw, 520px); opacity:.7; }
.contact__grid{ position:relative; z-index:3; display:grid; grid-template-columns: 6fr 6fr; gap: clamp(40px, 6vw, 96px); align-items:start; }
.contact__grid > *{ min-width:0; }
.contact .h2{ font-size:clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); letter-spacing:-.045em; line-height:1.03; margin:24px 0 26px; }
.contact__ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.channels{ border-top:1px solid var(--line-dk); }
.channels li{ border-bottom:1px solid var(--line-dk); }
.channel{ display:grid; grid-template-columns: 48px 1fr auto; align-items:center; gap:18px; padding:22px 0; text-decoration:none; color:#fff; }
.channel__icon{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(183,227,222,.3); display:grid; place-items:center; transition: background .4s, border-color .4s; }
.channel__icon svg{ width:20px; height:20px; stroke:var(--aqua-lt); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition: stroke .3s; }
.channel__label{ display:block; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--aqua); margin-bottom:4px; }
.channel__value{ display:block; font-family:var(--f-title); font-weight:500; font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem); letter-spacing:-.02em; line-height:1.3; overflow-wrap:anywhere; }
.channel__go{ width:20px; height:20px; stroke:#fff; fill:none; opacity:.5; transition: transform .5s var(--ease-out), opacity .3s; }
a.channel:hover .channel__icon{ background:var(--aqua); border-color:var(--aqua); }
a.channel:hover .channel__icon svg{ stroke:var(--deep); }
a.channel:hover .channel__go{ transform:translate(4px,-4px); opacity:1; }

.footer{ position:relative; z-index:3; margin-top: 8px; border-top:1px solid var(--line-dk); padding: 48px 0 40px; }
/* Logo con el eslogan debajo (columna propia) + navegación en su propia columna: nunca se pisan */
.footer__grid{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap:40px 64px; align-items:end; }
.footer__brand{ display:flex; flex-direction:column; gap:18px; }
.footer__logo{ height:38px; width:auto; align-self:flex-start; }
.footer__claim{ font-family:var(--f-title); font-weight:500; color:#fff; font-size:1.05rem; line-height:1.45; letter-spacing:-.01em; max-width:30ch; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:flex-end; }
.footer__nav a{ text-decoration:none; font-size:.9rem; color:rgba(255,255,255,.7); transition: color .3s; }
.footer__nav a:hover{ color:var(--aqua); }
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; font-size:.82rem; color:rgba(255,255,255,.5); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Menú horizontal solo cuando entra completo (logo + 6 enlaces + botón) */
@media (max-width: 1300px){
  .nav__links, .nav__cta{ display:none; }
  .nav__inner{ grid-template-columns: auto 1fr auto; }
  .nav__toggle{ display:block; grid-column:3; }
}
@media (max-width: 1100px){
  .attr p{ font-size:.92rem; }
  .attr__icon{ width:50px; height:50px; }
  .attr__icon svg{ width:22px; height:22px; }
  .member{ grid-template-columns: 1fr; }
  .portrait{ max-width:340px; }
}
/* ===== CELULAR Y TABLET (≤960px): versión compacta, mismas animaciones de scroll que en computadora ===== */
@media (max-width: 960px){
  /* Ritmo general más compacto */
  .section{ padding: 72px 0; }
  .section-head, .process__head{ grid-template-columns:1fr; gap:16px; margin-bottom:36px; }
  .h2{ font-size: clamp(1.7rem, 1.25rem + 2vw, 2.3rem); line-height:1.1; }
  .section-head .h2, .process__head .h2{ margin-top:18px; }
  .lead{ font-size:1rem; line-height:1.65; }
  .overline{ gap:10px; font-size:.68rem; }
  .overline::after{ width:64px; }

  /* Portada (celular): todo fluye en orden, sin alturas fijas → nunca se superpone con el logo.
     Foto visible arriba · texto debajo · beneficios en 2×2 */
  .hero{ height:auto; min-height:100svh; }
  .hero__media{ width:100%; height:min(52svh, 440px); bottom:auto; }
  .hero__media img{ filter: brightness(.95) saturate(1) contrast(1.04); object-position: 58% 45%; }
  .hero__media::after{ background: linear-gradient(180deg, rgba(9,42,46,.55) 0%, rgba(9,42,46,.12) 26%, rgba(9,42,46,.18) 55%, rgba(9,42,46,.82) 82%, var(--night) 100%); }
  .hero__content{ flex:1 0 auto; padding-top: calc(var(--nav-h) + max(140px, 30svh)); padding-bottom:28px; align-items:flex-start; }
  .hero__text{ max-width:none; }
  .hero__title{ font-size: clamp(2.05rem, 1.4rem + 3.4vw, 3rem); margin:14px 0 14px; }
  .hero__sub{ font-size:1rem; line-height:1.55; }
  .hero__ctas{ margin-top:22px; gap:10px; }
  .attrs{ flex:none; }
  .attrs ul{ grid-template-columns: 1fr 1fr; gap:0 16px; }
  .attr, .attr:first-child, .attr:nth-child(odd){ flex-direction:column; align-items:flex-start; gap:10px; padding:16px 0 18px; }
  .attr + .attr::before{ display:none; }
  .attr:nth-child(n+3){ border-top:1px solid var(--line-dk); }
  .attr__icon{ width:36px; height:36px; }
  .attr__icon svg{ width:17px; height:17px; }
  .attr p{ font-size:.86rem; line-height:1.35; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
  .attr p br{ display:none; }
  /* Por qué Orthoalign: fijo en pantalla, los textos se reemplazan con el scroll (como en computadora) */
  .story{ height:260svh; }
  .story__sticky{ height:100svh; }
  .story__grid{ grid-template-columns:1fr; gap:10px; }
  .story__count{ font-size:3.4rem; margin:18px 0 0; }
  .story__tabs{ display:none; }
  .story__panels{ min-height:15rem; }
  .story__panel p{ font-size: clamp(1.3rem, 1rem + 1.6vw, 1.7rem); line-height:1.28; }
  .story__panel h3{ margin-bottom:12px; }

  /* Servicios */
  .legend{ font-size:.76rem; gap:6px 18px; margin-bottom:18px; }
  .index__btn{ grid-template-columns: 34px 1fr 40px; gap:12px; padding:18px 0; }
  .index__name{ font-size:1.18rem; }
  .index__stage{ grid-column:2; grid-row:2; margin-top:-6px; font-size:.62rem; }
  .index__icon{ grid-column:3; grid-row:1; width:38px; height:38px; }
  .index__content{ grid-template-columns: 34px 1fr; gap:12px; font-size:.95rem; }
  .index__content p, .index__gain{ grid-column:2; }

  /* Productos (celular): la tarjeta mide lo que necesita su contenido (botón siempre visible).
     Solo se "apila" al hacer scroll si entra completa en la pantalla (lo decide el script). */
  .product{ display:flex; flex-direction:column; max-height:none; height:auto; border-radius:24px; margin-top:40px; }
  .product + .product{ margin-top:20px; }
  .product.can-stick{ position:sticky; top: calc(var(--nav-h) + 10px); box-shadow: 0 -18px 40px -24px rgba(9,42,46,.55); }
  .product__media{ flex:none; height: clamp(150px, 26svh, 240px); min-height:0; aspect-ratio:auto; }
  .product__media img{ object-position: 50% 45%; }
  .product__media::after, .product--rev .product__media::after{ background: linear-gradient(180deg, rgba(9,42,46,0) 45%, var(--deep) 100%); }
  .product--rev .product__media{ order:0; }
  .product__body{ flex:none; padding: 18px 22px 24px; font-size:.95rem; line-height:1.55; }
  .product__body .h2{ font-size:1.55rem; margin:12px 0 6px; }
  .product__tag{ font-size:.92rem; line-height:1.4; margin-bottom:8px; }
  .specs{ margin:14px 0 20px; display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
  .specs div, .product .specs div{ grid-template-columns:1fr; gap:2px; padding:9px 0; font-size:.88rem; }
  .product__body .btn{ width:100%; white-space:normal; text-align:center; }
  .waves--section{ margin-top:40px; margin-bottom:-36px; }  /* Cómo trabajamos: la imagen queda fija arriba y cambia con cada etapa (como en computadora) */
  .process{ padding: 72px 0 40px; }
  .process__body{ grid-template-columns:1fr; gap:0; }
  .process__media{
    display:block; position:sticky; top:var(--nav-h); z-index:4; align-self:start;
    height:34svh; background:var(--deep); margin:0 calc(-1 * var(--gut)); padding:0 var(--gut);
  }
  .process__frame{ inset:8px var(--gut) 14px; }
  .process__label{ left: calc(var(--gut) + 12px); bottom:26px; padding:7px 12px; font-size:.78rem; }
  .step{ min-height:56svh; padding:24px 0; }
  .step__mobile-media{ display:none; }
  .step__num{ font-size:2.4rem; margin-bottom:8px; }
  .step h3{ font-size:1.3rem; margin-bottom:10px; }
  .step p{ font-size:.95rem; }
  .step__services{ margin-top:16px; }

  /* Formación */
  .training__grid{ grid-template-columns:1fr; gap:36px; }
  .pillars{ margin:24px 0 28px; }
  .pillars li{ grid-template-columns: 40px 1fr; gap:14px; padding:14px 0; font-size:.93rem; }
  .pillars__icon{ width:40px; height:40px; }
  .pillars__icon svg{ width:19px; height:19px; }
  .pillars strong{ font-size:1rem; }
  .mosaic{ height: clamp(280px, 78vw, 440px); gap:10px; }
  .mosaic figure{ border-radius:16px; }

  /* Directores: foto chica al lado del nombre */
  .team__grid{ grid-template-columns:1fr; gap:40px; }
  .member{ grid-template-columns: 120px 1fr; gap:18px; }
  .portrait{ max-width:none; aspect-ratio: 4/5; }
  .member__role{ font-size:.62rem; letter-spacing:.18em; }
  .member__name{ font-size:1.35rem; margin:8px 0 4px; }
  .member__spec{ font-size:.92rem; line-height:1.4; }
  .timeline{ grid-column: 1 / -1; margin-top:14px; }
  .timeline li{ font-size:.92rem; padding:5px 0 5px 28px; }
  .timeline li::before{ top:11px; }

  /* Frase puente: fija y se ilumina palabra por palabra (como en computadora) */
  .statement{ height:180svh; }
  .statement__sticky{ height:100svh; }
  .statement__text{ font-size: clamp(1.9rem, 1.2rem + 4vw, 2.8rem); }
  .statement__foot{ margin-top:26px; font-size:.62rem; letter-spacing:.2em; gap:12px; white-space:normal; }
  .statement__foot img{ width:26px; }
  .waves--statement{ bottom:3svh; }

  /* Recursos / preguntas */
  .faq__grid{ grid-template-columns:1fr; gap:28px; }
  .faq__aside{ position:relative; top:0; }
  .qa__btn{ padding:18px 0; font-size:1rem; gap:16px; }
  .qa__icon{ width:32px; height:32px; }
  .qa__panel p{ padding-right:0; font-size:.95rem; }

  /* Contacto */
  .contact{ padding-top:80px; }
  .contact .arcs--a{ display:none; }
  .contact .h2{ font-size: clamp(2rem, 1.3rem + 3vw, 2.8rem); margin:18px 0 18px; }
  .contact__grid{ grid-template-columns:1fr; gap:36px; }
  .contact__ctas{ margin-top:24px; }
  .channel{ padding:16px 0; }
  .channel__value{ font-size:1.02rem; }
  .waves--contact{ margin-top:48px; }
  .footer{ padding:36px 0 32px; }
  .footer__grid{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .footer__nav{ justify-content:flex-start; gap:8px 20px; }
}
@media (max-width: 600px){
  :root{ --nav-h: 64px; }
  .nav__brand img{ height:27px; }
  .btn{ min-height:48px; font-size:.94rem; }
  .hero__ctas .btn, .contact__ctas .btn{ width:100%; }
  .channel{ grid-template-columns: 40px 1fr auto; gap:14px; }
  .channel__icon{ width:40px; height:40px; }
  .member{ grid-template-columns: 104px 1fr; gap:16px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  [data-reveal], [data-reveal="clip"]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero__title .line > span, .hero__fade{ transform:none !important; opacity:1 !important; }
  .hero__media img{ opacity:1 !important; transform:none !important; }
  .hero__arcs .draw{ stroke-dashoffset:0 !important; }
  .statement__text .w{ opacity:1 !important; }
  .waves{ clip-path:none !important; }
  .waves svg{ animation:none !important; }
}

/* =========================================================
   INTERNACIONAL · selector de país (encabezado, menú y pantalla de bienvenida)
   ========================================================= */
.nav__end{ display:flex; align-items:center; gap:14px; }
.country{ position:relative; }
.country__btn{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 12px 0 10px; border-radius:999px;
  border:1px solid var(--line-dk); color:#fff; transition: border-color .3s, background .3s;
}
.country__btn:hover, .country__btn[aria-expanded="true"]{ border-color:var(--aqua); background:rgba(131,199,193,.08); }
.country__btn img{ width:22px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.country__btn svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; opacity:.7; transition: transform .35s var(--ease-out); }
.country__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.country__menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:230px; z-index:120;
  background:var(--night); border:1px solid var(--line-dk); border-radius:18px; padding:8px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition: opacity .25s var(--ease), transform .35s var(--ease-out);
}
.country__menu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.country__title{ padding:8px 12px 6px; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--aqua); }
.country__opt{
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  text-decoration:none; color:#fff; font-family:var(--f-title); font-size:.95rem; transition: background .25s;
}
.country__opt img{ width:28px; height:19px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.country__opt small{ font-family:var(--f-body); font-size:.72rem; color:rgba(255,255,255,.55); }
.country__opt:hover, .country__opt:focus-visible{ background:rgba(131,199,193,.12); }
.country__opt[aria-current="true"]{ background:rgba(131,199,193,.16); }
.country__opt[aria-current="true"] small{ color:var(--aqua); }

.menu__countries{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; margin-bottom:auto; }
.menu__countries a{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; border:1px solid var(--line-dk);
  text-decoration:none; color:#fff; font-family:var(--f-title); font-size:.92rem;
}
.menu__countries a[aria-current="true"]{ border-color:var(--aqua); background:rgba(131,199,193,.12); }
.menu__countries img{ width:22px; height:15px; border-radius:3px; object-fit:cover; }
.menu .btn{ margin-bottom:0; }

/* Trayectoria completa desplegable (biografías largas) */
.bio-more{ margin-top:12px; }
.bio-more summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-title); font-weight:600; font-size:.9rem; color:var(--cyan);
}
.bio-more summary::-webkit-details-marker{ display:none; }
.bio-more summary::after{ content:"+"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); font-weight:500; transition: transform .4s var(--ease-out); }
.bio-more[open] summary::after{ transform:rotate(45deg); }
.bio-more ul{ margin-top:10px; }
.bio-more li{ position:relative; padding:5px 0 5px 18px; font-size:.92rem; line-height:1.5; }
.bio-more li::before{ content:""; position:absolute; left:2px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--turq-lt); }

/* Contacto pendiente de confirmación */
.channel--pending .channel__value{ color:rgba(255,255,255,.6); font-weight:400; font-size:1rem; }

/* ---------- Pantalla de bienvenida / selección de país ---------- */
.gate{
  position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
  padding: 56px var(--gut) 72px; text-align:center; color:rgba(255,255,255,.78);
  background: radial-gradient(ellipse 80% 70% at 50% 0%, var(--deep-2) 0%, var(--deep) 45%, var(--night) 100%);
}
.gate .grid-bg{ -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 10%, transparent 70%); }
.gate .arcs--a{ right:-10%; top:-18%; width:clamp(260px, 40vw, 560px); }
.gate .arcs--b{ left:-12%; bottom:-22%; width:clamp(220px, 32vw, 460px); transform:rotate(180deg); }
.gate__inner{ position:relative; z-index:3; width:100%; max-width:980px; }
.gate__logo{ height:44px; width:auto; margin:0 auto 48px; }
.gate h1{ color:#fff; font-size:clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height:1.06; letter-spacing:-.04em; font-weight:600; }
.gate h1 span{ color:var(--aqua); font-weight:300; }
.gate__sub{ margin:18px auto 0; max-width:46ch; font-size:clamp(1.02rem, .96rem + .3vw, 1.18rem); }
.gate__sub-pt{ margin:28px auto 0; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--aqua); }
.gate__list{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top:52px; }
.gate__opt{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; padding:34px 22px 28px; border-radius:24px;
  border:1px solid var(--line-dk); background:rgba(9,42,46,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-decoration:none; color:#fff; transition: transform .5s var(--ease-out), border-color .4s, background .4s, box-shadow .5s;
}
.gate__opt:hover, .gate__opt:focus-visible{ transform:translateY(-6px); border-color:var(--aqua); background:rgba(36,90,99,.45); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.gate__flag{ width:96px; height:64px; border-radius:10px; object-fit:cover; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 14px 30px -12px rgba(0,0,0,.6); }
.gate__name{ font-family:var(--f-title); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; }
.gate__opt > span:not(.gate__go){ display:flex; flex-direction:column; align-items:center; gap:4px; }
.gate__lang{ font-size:.82rem; color:rgba(255,255,255,.55); }
.gate__go{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-dk); display:grid; place-items:center; transition: background .4s, border-color .4s; }
.gate__go svg{ width:16px; height:16px; color:#fff; }
.gate__opt:hover .gate__go{ background:var(--aqua); border-color:var(--aqua); }
.gate__opt:hover .gate__go svg{ color:var(--deep); }
.gate__opt.is-last::after{
  content:attr(data-last); position:absolute; top:12px; right:12px; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep); background:var(--aqua); padding:4px 8px; border-radius:999px; font-weight:600;
}
.gate .waves{ position:absolute; left:0; right:0; bottom:4vh; }
.gate__fade{ opacity:0; transform:translateY(16px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay:var(--d,0s); }
.is-loaded .gate__fade{ opacity:1; transform:none; }
@media (max-width: 760px){
  .gate{ justify-content:flex-start; padding-top:40px; }
  .gate__logo{ height:34px; margin-bottom:36px; }
  .gate__list{ grid-template-columns:1fr; gap:12px; margin-top:34px; }
  .gate__opt{ flex-direction:row; align-items:center; text-align:left; gap:16px; padding:16px 18px; border-radius:18px; }
  .gate__flag{ width:54px; height:36px; border-radius:7px; }
  .gate__name{ font-size:1.12rem; }
  .gate__lang{ margin:0; }
  .gate__opt > span:not(.gate__go){ align-items:flex-start; flex:1; gap:2px; }
  .gate__opt.is-last::after{ top:50%; right:62px; transform:translateY(-50%); }
}
@media (prefers-reduced-motion: reduce){ .gate__fade{ opacity:1 !important; transform:none !important; } }

/* Trayectorias largas: no estiran la tarjeta; se desplazan dentro de un recuadro de altura limitada */
.bio-more ul{ max-height:320px; overflow-y:auto; padding-right:10px; scrollbar-width:thin; scrollbar-color: var(--turq-lt) transparent; }
.bio-more ul::-webkit-scrollbar{ width:4px; }
.bio-more ul::-webkit-scrollbar-thumb{ background:var(--turq-lt); border-radius:4px; }
@media (max-width: 960px){ .bio-more{ grid-column:1 / -1; } .bio-more ul{ max-height:280px; } }