/* GADE · somosgade.com · v3
   Marca: tinta #0E121B, menta #2EE0AE como único toque de color, Instrument Sans en títulos e
   Inter en texto. Sello propio: el cursor menta del logo y la puerta menta de la escena. Al bajar
   se atraviesa la puerta, el recorrido es un índice que se escribe y la misión se teclea. */

:root {
  --tinta: #0E121B;
  --texto: #262626;
  --gris: #63666B;            /* gris de marca #7B7B7B oscurecido para contraste AA */
  --linea: #EBECEF;
  --suave: #DDE3EB;
  --fondo: #FFFFFF;
  --arena: #F7F3EC;           /* tono de la escena, para fondos de tarjetas */
  --arena-2: #EFE8DC;
  --punto: #D9D2C5;
  --menta: #2EE0AE;
  --menta-osc: #0B8F68;       /* menta legible sobre blanco para textos chicos */
  --radio: 16px;
  --sombra: 0 1px 2px rgba(14,18,27,.04), 0 8px 24px rgba(14,18,27,.06);
  --ancho: 1120px;
  --facil: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 17px/1.6 Inter, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: "Instrument Sans", Inter, sans-serif; color: var(--tinta); margin: 0; letter-spacing: -0.025em; }
p { margin: 0; }

.saltar { position: absolute; left: -999px; top: 12px; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 22px; border-radius: 12px; font: 500 16px/1 Inter, sans-serif; text-decoration: none;
  transition: transform .2s var(--facil), background-color .2s, box-shadow .2s; cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-tinta { background: var(--tinta); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px rgba(14,18,27,.18); }
.btn-tinta:hover { background: #1c2230; }
.btn-claro { background: rgba(255,255,255,.8); color: var(--tinta); border: 1px solid var(--suave); }
.btn-chico { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }

/* Marca */
.marca { display: inline-flex; align-items: flex-end; gap: 4px; text-decoration: none; }
.marca b { font-family: "Instrument Sans", sans-serif; font-weight: 700; font-size: 22px; line-height: 1; color: var(--tinta); letter-spacing: -0.01em; }
.marca i { display: block; width: 7px; height: 18px; background: var(--menta); }
.marca-clara b { color: #fff; }

/* Menú flotante */
.nav { position: fixed; inset: 16px 0 auto; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav-pildora {
  pointer-events: auto; display: flex; align-items: center; gap: 28px; width: 100%; max-width: 800px;
  padding: 8px 8px 8px 20px; border-radius: 16px; border: 1px solid transparent;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.nav.flota .nav-pildora { background: rgba(255,255,255,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--linea); box-shadow: var(--sombra); }
.nav-links { display: flex; gap: 22px; list-style: none; margin: 0 auto 0 12px; padding: 0; }
.nav-links a { text-decoration: none; color: var(--gris); font-size: 15px; transition: color .2s; }
.nav-links a:hover, .nav-links a.actual { color: var(--tinta); }

/* El contenido va encima del pie, que queda fijo abajo y se descubre al final */
main { position: relative; z-index: 1; background: var(--fondo); border-radius: 0 0 32px 32px; }

/* Portada fija: al bajar, la cámara avanza por el camino y atraviesa la puerta menta */
.portada-pin { position: relative; z-index: 1; height: 240svh; }
.portada { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; align-items: center; background: var(--fondo); }
.portada-texto { position: relative; z-index: 2; max-width: 860px; padding: clamp(112px, 17vh, 176px) 24px 0; text-align: center; }
.etiqueta { font-size: 14px; color: var(--gris); margin-bottom: 18px; letter-spacing: .01em; }
h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.bajada { font-size: clamp(17px, 1.6vw, 20px); color: var(--gris); max-width: 600px; margin: 22px auto 0; }
.bajada strong { color: var(--tinta); font-weight: 500; }
.acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.portada-escena { position: absolute; inset: auto 0 0 0; z-index: 1; transform-origin: 50% 65.6%; }
/* la luz de la puerta crece hasta llenar la pantalla; el centro está donde está la puerta en la imagen */
.portal {
  position: absolute; left: 50%; top: var(--puerta-y, 70%); z-index: 3; pointer-events: none; opacity: 0;
  width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0, #fff 52%, rgba(226,251,243,.95) 66%, rgba(46,224,174,.30) 82%, rgba(46,224,174,0) 100%);
  transform: scale(0);
}
.portada-escena img { width: 100%; height: auto; }
/* el cielo de la escena es apenas más cálido que el blanco: un degradado blanco lo funde arriba.
   Va como capa y no como máscara, porque la máscara sobre una imagen que se amplía se dibuja mal
   en algunos navegadores al volver arriba */
.portada-escena::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%); }
.bruma { z-index: 2; }

/* Bruma que flota sobre la escena */
.bruma { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bruma span {
  position: absolute; width: 60%; height: 34%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));
  filter: blur(6px); animation: deriva 26s ease-in-out infinite alternate;
}
.bruma span:nth-child(1) { left: -12%; bottom: 30%; }
.bruma span:nth-child(2) { left: 40%; bottom: 14%; width: 48%; animation-duration: 32s; animation-delay: -9s; }
.bruma span:nth-child(3) { left: 8%; bottom: 2%; width: 70%; height: 26%; animation-duration: 38s; animation-delay: -18s; }
.bruma-capa { position: absolute; left: -20%; right: -20%; bottom: 6%; height: 70%; background: url(/img/bruma.webp) repeat-x bottom / auto 100%; opacity: .85; animation: deriva 40s linear infinite alternate; }
@keyframes deriva { from { transform: translateX(-6%); } to { transform: translateX(10%); } }

/* Lo que sigue a la portada entra después de atravesar la puerta */
.cortina { position: relative; z-index: 2; background: var(--fondo); }

/* Secciones */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: clamp(80px, 12vw, 140px) 24px; }
.encabezado { text-align: center; max-width: 660px; margin: 0 auto 56px; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; text-wrap: balance; }
.encabezado p { color: var(--gris); margin-top: 16px; font-size: 18px; }
.centro { text-align: center; margin-top: 56px; }
.oportunidad { padding-top: clamp(64px, 9vw, 112px); }

/* La oportunidad: lo de hoy converge en GADE */
.oportunidad-mapa { display: grid; grid-template-columns: 1fr minmax(80px, 180px) 1fr; align-items: stretch; max-width: 980px; margin: 0 auto; }
.hoy { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 12px; }
.hoy li {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px;
  background: #fff; border: 1px solid var(--linea); font-size: 16px; color: var(--texto);
  opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--facil), transform .6s var(--facil), border-color .3s;
}
.hoy li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--punto); flex: none; transition: background-color .4s; }
.hoy li:hover { border-color: var(--suave); }
.oportunidad-mapa.visible .hoy li { opacity: 1; transform: none; }
.oportunidad-mapa.visible .hoy li::before { background: var(--tinta); }
.hoy li:nth-child(2), .hoy li:nth-child(2)::before { transition-delay: .1s; }
.hoy li:nth-child(3), .hoy li:nth-child(3)::before { transition-delay: .2s; }
.hoy li:nth-child(4), .hoy li:nth-child(4)::before { transition-delay: .3s; }
.hoy li:nth-child(5), .hoy li:nth-child(5)::before { transition-delay: .4s; }
.lineas { width: 100%; height: 100%; overflow: visible; }
.lineas path { fill: none; stroke: var(--suave); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--facil) .5s, stroke .6s 1.4s; }
.oportunidad-mapa.visible .lineas path { stroke-dashoffset: 0; stroke: #C6CCD5; }
.oportunidad-mapa.visible .lineas path:nth-child(3) { stroke: var(--menta); }
.con-gade {
  align-self: center; background: var(--tinta); color: #C9CDD6; border-radius: 22px; padding: clamp(24px, 3vw, 36px);
  opacity: 0; transform: scale(.96); transition: opacity .7s var(--facil) 1.2s, transform .7s var(--facil) 1.2s;
}
.oportunidad-mapa.visible .con-gade { opacity: 1; transform: none; }
.con-gade .mini-marca { background: #fff; margin-bottom: 18px; }
.con-gade-titulo { font-family: "Instrument Sans", sans-serif; font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -0.02em; margin-bottom: 8px; }

/* Cómo funciona: 4 pasos con ilustración quieta */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.paso:nth-child(2) { transition-delay: .08s; }
.paso:nth-child(3) { transition-delay: .16s; }
.paso:nth-child(4) { transition-delay: .24s; }
.paso-num { display: block; color: var(--gris); font-size: 14px; margin-bottom: 8px; }
.paso h3 { font-size: 21px; line-height: 1.2; font-weight: 600; margin-bottom: 8px; }
.paso p { color: var(--gris); font-size: 16px; }
.paso-ilustracion {
  position: relative; aspect-ratio: 1 / 1; border-radius: 20px; margin-bottom: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, #FFFDF9 0%, var(--arena) 50%, var(--arena-2) 100%);
}
.paso-ilustracion img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }

/* A la medida: sala oscura fija. A la izquierda un índice que avanza con el cursor de la marca,
   a la derecha cada caso sube como una persiana sobre el anterior */
.recorrido { position: relative; height: 440svh; }
.recorrido-fijo { position: sticky; top: 0; height: 100svh; padding: 84px 16px 16px; }
.recorrido-marco {
  height: 100%; max-width: 1360px; margin: 0 auto; border-radius: 28px; background: var(--tinta); color: #A9B0BC;
  display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(28px, 4vw, 64px);
  background-image: radial-gradient(60% 50% at 0% 100%, rgba(46,224,174,.10), transparent 70%);
}
.recorrido .etiqueta { color: #8E96A3; }
.recorrido h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); }
.recorrido-bajada { margin-top: 14px; font-size: 17px; max-width: 420px; }
.indice { list-style: none; margin: clamp(24px, 4svh, 44px) 0 0; padding: 0 0 0 20px; position: relative; }
.indice::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: #262D3B; }
.indice::after { content: ""; position: absolute; left: 0; top: 6px; width: 2px; height: calc((100% - 12px) * var(--avance, 0)); border-radius: 1px; background: var(--menta); }
.indice-item {
  display: flex; align-items: center; gap: 16px; padding: 10px 0; cursor: pointer; color: #8E96A3;
  font-family: "Instrument Sans", sans-serif; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.015em;
  transition: color .35s, transform .35s var(--facil);
}
.indice-num { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: #6F7886; min-width: 22px; transition: color .35s; }
.indice-item:hover { color: #C9CED6; }
.indice-item.hecho { color: #C9CED6; }
.indice-item.activo { color: #fff; transform: translateX(6px); }
.indice-item.activo .indice-num { color: var(--menta); }
.indice-cursor { width: 9px; height: 22px; background: var(--menta); opacity: 0; transform: scaleY(.3); transition: opacity .3s, transform .3s var(--facil); }
.indice-item.activo .indice-cursor { opacity: 1; transform: none; }

.modulos { display: grid; align-self: center; }
.modulo {
  grid-area: 1 / 1; background: var(--tinta); clip-path: inset(100% 0 0 0 round 24px); visibility: hidden;
  transition: clip-path .75s cubic-bezier(.7,0,.2,1), visibility 0s .75s;
}
.modulo.antes, .modulo.activo { clip-path: inset(0 0 0 0 round 24px); visibility: visible; transition-delay: 0s; }
.modulo.activo { z-index: 2; }
.modulo h3 { color: #fff; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 600; margin: 24px 0 10px; }
.modulo p { max-width: 560px; }
.modulo-visual {
  position: relative; border-radius: 24px; height: clamp(240px, 40svh, 400px); display: grid; place-items: center; padding: 24px;
  background-size: cover; background-position: center; overflow: hidden;
}
.modulo-ilustracion { position: absolute; left: 18px; top: 18px; width: clamp(72px, 7vw, 104px); height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.fondo-1 { background-image: url(/img/fondos/fondo-1.webp); }
.fondo-2 { background-image: url(/img/fondos/fondo-2.webp); }
.fondo-3 { background-image: url(/img/fondos/fondo-3.webp); }
.fondo-4 { background-image: url(/img/fondos/fondo-4.webp); }

.panel { position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: var(--radio); padding: 18px; box-shadow: 0 1px 2px rgba(14,18,27,.05), 0 16px 40px rgba(14,18,27,.12); transform: translateY(18px); transition: transform .8s var(--facil) .25s; }
.modulo.activo .panel { transform: none; }
.panel-titulo { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--tinta); margin-bottom: 12px; }
.panel-cifra { font-family: "Instrument Sans", sans-serif; font-size: 44px; font-weight: 600; line-height: 1; color: var(--tinta); letter-spacing: -0.03em; margin: 4px 0 12px; }
.panel-cifra span { font-family: Inter, sans-serif; font-size: 15px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.panel-pie { margin-top: 12px; font-size: 14px; color: var(--gris); }
.mini-marca { width: 20px; height: 20px; border-radius: 6px; background: var(--tinta); position: relative; flex: none; display: block; }
.mini-marca::after { content: ""; position: absolute; right: 5px; top: 5px; width: 3px; height: 10px; background: var(--menta); }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 76px; }
.barras i { flex: 1; height: var(--h); border-radius: 4px; background: var(--arena-2); transform-origin: bottom; transform: scaleY(0); transition: transform .6s var(--facil) .35s; }
.barras i:last-child { background: var(--menta); }
.modulo.activo .barras i { transform: none; }
.barras i:nth-child(2) { transition-delay: .4s; } .barras i:nth-child(3) { transition-delay: .45s; }
.barras i:nth-child(4) { transition-delay: .5s; } .barras i:nth-child(5) { transition-delay: .55s; }
.barras i:nth-child(6) { transition-delay: .6s; } .barras i:nth-child(7) { transition-delay: .65s; }
.barras i:nth-child(8) { transition-delay: .7s; }
.fila { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 14px; color: var(--texto); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--facil), transform .5s var(--facil); }
.fila + .fila { margin-top: 8px; }
.fila .ok { color: var(--menta-osc); font-weight: 500; white-space: nowrap; }
.fila-destacada { border-color: rgba(46,224,174,.55); box-shadow: 0 0 0 3px rgba(46,224,174,.12); }
.modulo.activo .fila { opacity: 1; transform: none; }
.modulo.activo .fila:nth-of-type(1) { transition-delay: .4s; }
.modulo.activo .fila:nth-of-type(2) { transition-delay: .6s; }
.modulo.activo .fila:nth-of-type(3) { transition-delay: .8s; }

/* Cinta de capacidades que se desliza sola */
.cinta-seccion { padding: clamp(40px, 6vw, 72px) 0 clamp(80px, 10vw, 120px); }
.cinta-titulo { text-align: center; font-family: "Instrument Sans", sans-serif; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; color: var(--tinta); letter-spacing: -0.02em; margin: 0 24px 32px; }
.cinta {
  display: flex; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cinta + .cinta { margin-top: 12px; }
.cinta ul { flex: none; display: flex; gap: 12px; padding: 0 12px 0 0; margin: 0; list-style: none; animation: desliza 60s linear infinite; }
.cinta[data-direccion="der"] ul { animation-direction: reverse; animation-duration: 68s; }
.cinta:hover ul { animation-play-state: paused; }
.cinta li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); font-size: 15px; color: var(--texto); }
.chip-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--menta); flex: none; }
@keyframes desliza { to { transform: translateX(-100%); } }

/* Misión: la frase se teclea con el cursor de la marca y la escena se abre como una ventana */
.mision-pin { position: relative; height: 260svh; }
.mision { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; max-width: var(--ancho); margin: 0 auto; padding: clamp(96px, 14svh, 132px) 24px 24px; }
.mision-texto { max-width: 900px; }
.mision-frase { font-family: "Instrument Sans", sans-serif; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--tinta); }
.mision-frase .w { white-space: nowrap; }
.mision-frase .c { visibility: hidden; }
.mision-frase .c.on { visibility: visible; }
.mision-frase .c.ultimo::after { content: ""; display: inline-block; width: .38em; height: .82em; margin-left: .05em; vertical-align: -0.06em; background: var(--menta); visibility: visible; }
.mision-ventana { margin-top: clamp(24px, 4svh, 48px); min-height: 0; overflow: hidden; border-radius: 24px; clip-path: inset(0 38% 0 38% round 24px); }
.mision-ventana picture, .mision-ventana img { width: 100%; height: 100%; }
.mision-ventana img { object-fit: cover; object-position: 50% 62%; transform: scale(1.15); }

/* Sobre mí y cierre */
.sobre { padding-top: clamp(64px, 9vw, 112px); }
.sobre-adentro { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.retrato { position: relative; margin: 0; width: 184px; }
.retrato img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--arena); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--menta), 0 14px 34px rgba(14,18,27,.10); }
.sobre-texto .etiqueta { margin-bottom: 10px; }
.sobre-rol { color: var(--tinta); font-weight: 500; margin-top: 6px; }
.sobre-texto p:not(.etiqueta):not(.sobre-rol) { color: var(--gris); font-size: 18px; margin-top: 16px; }
.btn-linkedin { margin-top: 24px; gap: 10px; background: #fff; color: var(--tinta); border: 1px solid var(--suave); }
.btn-linkedin svg { width: 18px; height: 18px; fill: #0A66C2; }
.btn-linkedin:hover { border-color: var(--tinta); }
.cierre-adentro { max-width: 680px; margin: 0 auto; text-align: center; }
.cierre-adentro p { color: var(--gris); font-size: 18px; margin-top: 18px; }
.cierre { background: linear-gradient(180deg, #fff 0%, var(--arena) 100%); border-radius: 0 0 32px 32px; }
.cierre-adentro { padding: clamp(80px, 12vw, 140px) 24px; }
.cierre .btn { margin-top: 32px; }

/* Pie oscuro que se descubre al final */
.pie { position: sticky; bottom: 0; z-index: 0; background: var(--tinta); color: #A3A9B4; overflow: hidden; padding: clamp(56px, 8vw, 96px) 24px 0; }
.pie-adentro { max-width: var(--ancho); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pie-marca { max-width: 420px; }
.pie-marca p { margin-top: 16px; font-size: 16px; }
.pie-links { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 40px; align-content: start; font-size: 15px; }
.pie-links a { text-decoration: none; color: #D4D8DF; transition: color .2s; }
.pie-links a:hover { color: #fff; }
.pie-gigante { max-width: var(--ancho); margin: clamp(24px, 4vw, 48px) auto -0.16em; display: flex; align-items: flex-end; gap: .04em; font-family: "Instrument Sans", sans-serif; font-weight: 700; font-size: clamp(96px, 22vw, 300px); line-height: 1; letter-spacing: -0.05em; color: #1A2030; user-select: none; }
.pie-gigante i { display: block; width: .3em; height: .7em; margin-bottom: .14em; background: var(--menta); }

/* Aparecer al bajar */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--facil), transform .7s var(--facil); }
.aparece.visible { opacity: 1; transform: none; }
.oportunidad-mapa.aparece { transform: none; opacity: 1; }

/* Responsivo */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-pildora { justify-content: space-between; max-width: 520px; }
  .pasos { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}
/* Sin fijado del recorrido en pantallas angostas o bajas: los casos se apilan */
@media (max-width: 900px), (max-height: 640px) {
  /* en el celular nada se queda fijo más de un deslizamiento: la portada es corta y la misión fluye */
  /* la portada se queda quieta y la sección siguiente sube encima, al ritmo normal del dedo */
  .portada-pin { position: sticky; top: 0; height: 100svh; }
  .portada { position: relative; }
  .portal { display: none; }
  .cortina { border-radius: 28px 28px 0 0; box-shadow: 0 -16px 40px rgba(14,18,27,.08); }
  .mision-pin { height: auto; }
  .mision { position: static; height: auto; padding: clamp(72px, 12vw, 112px) 24px 24px; }
  .mision-ventana { clip-path: inset(0 round 24px) !important; aspect-ratio: 4 / 5; max-height: 70svh; }
  .mision-ventana img { transform: none !important; }
  .recorrido { height: auto; }
  .recorrido-fijo { position: static; height: auto; padding: 24px 12px; }
  .recorrido-marco { grid-template-columns: 1fr; padding: 40px 20px; border-radius: 24px; }
  .indice { display: none; }
  .modulos { gap: 48px; }
  .modulo { grid-area: auto; clip-path: none; visibility: visible; }
  .modulo .panel { transform: none; }
  .modulo .barras i { transform: none; }
  .modulo .fila { opacity: 1; transform: none; }
  .modulo-visual { height: auto; min-height: 300px; padding-top: 104px; }
}
@media (max-width: 760px) {
  .oportunidad-mapa { grid-template-columns: 1fr; gap: 20px; }
  .lineas { display: none; }
  .con-gade { transition-delay: .5s; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Cómo funciona como línea de tiempo: la línea se pinta de tinta al bajar y cada número se rellena al alcanzarlo */
  .pasos { position: relative; padding-left: 46px; row-gap: 56px; }
  .pasos::before, .pasos::after { content: ""; position: absolute; left: 13px; top: var(--inicio, 14px); width: 2px; border-radius: 1px; }
  .pasos::before { height: var(--largo, 0); background: var(--linea); }
  .pasos::after { height: var(--llenado, 0); background: var(--tinta); }
  .paso { position: relative; display: flex; flex-direction: column; }
  .paso-num {
    position: absolute; left: -46px; top: 0; z-index: 1; width: 28px; height: 28px; margin: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--gris);
    background: #fff; border: 1.5px solid var(--suave); transition: background-color .3s, color .3s, border-color .3s;
  }
  .paso.alcanzado .paso-num { background: var(--tinta); border-color: var(--tinta); color: #fff; }
  .paso h3 { margin-top: 2px; }
  .paso-ilustracion { order: 3; margin: 20px 0 0; }
  .sobre-adentro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .retrato { width: 156px; }
  .mision-ventana { clip-path: inset(0 20% 0 20% round 24px); }
  .portada { min-height: 0; }
  .pasos { grid-template-columns: 1fr; }
  .paso-ilustracion { aspect-ratio: 16 / 11; }
  .pie-links { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .aparece, .hoy li, .con-gade { opacity: 1; transform: none; }
  .lineas path { stroke-dashoffset: 0; }
  .cinta ul { flex-wrap: wrap; justify-content: center; }
  .cinta { mask-image: none; -webkit-mask-image: none; }
  .mision-ventana { clip-path: inset(0 round 24px); }
  .modulo.activo, .modulo.antes { clip-path: inset(0 round 24px); }
}