/* ==========================================================================
   fomup-web — hoja de estilos
   --------------------------------------------------------------------------
   Un solo archivo a proposito: los @import encadenados obligan al navegador a
   pedir las hojas EN SERIE, y cada viaje retrasa el primer pintado. En la
   carpeta de opciones eso daba igual; aqui no.

   Diseno: docs/superpowers/specs/2026-08-26-fomup-web-design.md
   Tema claro con bandas grafito · el cyan NUNCA es texto sobre blanco (2,43:1);
   sobre grafito si (5,67:1).
   ========================================================================== */

/* ==========================================================================
   Base compartida por las tres opciones de diseño.
   Lo que NO cambia entre ellas: reset, tipografías, envoltorio, botones,
   footer, páginas legales y la regla de movimiento reducido.
   Cada opción trae encima su propio sistema gráfico.
   ========================================================================== */

@font-face {
  font-family: 'Funnel Display';
  src: url('../fonts/FunnelDisplay-var.woff2') format('woff2-variations');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Funnel Sans';
  src: url('../fonts/FunnelSans-var.woff2') format('woff2-variations');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  --sp-xs: .5rem; --sp-sm: .75rem; --sp-md: 1rem; --sp-lg: 1.5rem;
  --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4rem; --sp-4xl: 6rem;
  --sp-seccion: clamp(5rem, 3rem + 9vw, 11rem);

  --t-micro: .72rem;
  --t-chico: .875rem;
  --t-base:  clamp(1rem, .96rem + .2vw, 1.09rem);
  --t-medio: clamp(1.05rem, .97rem + .45vw, 1.25rem);

  --ancho: 1240px;

  /* El marco de la pagina en dos tramos: el aire entre el panel y el borde de
     la pantalla, y el aire entre el borde del panel y su texto. La suma es la
     LINEA sobre la que se alinea todo, incluido el logotipo. */
  --marco: clamp(.75rem, 3vw, 2.5rem);
  --dentro: clamp(2rem, 6vw, 5rem);
  --linea-texto: calc(var(--marco) + var(--dentro));
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Grano: una sola textura SVG, sin pedir ninguna imagen a la red.
     Es lo que separa una superficie plana de una que se siente impresa. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* clip y no hidden: hidden convierte al html en contenedor de scroll y rompe
   position:sticky mas abajo. clip recorta sin ese efecto secundario. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  /* ⚠️ ESTE FONDO NO ES EL QUE SE VE. Mas abajo se vuelve a declarar el fondo
     del body como --fomup-gris-100, y gana esa. El fondo real de la pagina es
     gris-100 (240,244,245), NO blanco puro. Si necesitas que algo se funda con
     la pagina, usa gris-100. */
  background: var(--fomup-blanco);
  color: var(--fomup-grafito);
  font-family: var(--fomup-fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Nada de overflow-x aqui: convertiria al body en contenedor de scroll y
     romperia position:sticky. El clip del html ya recorta el desbordamiento. */
}

h1, h2, h3 {
  font-family: var(--fomup-fuente-titular);
  font-weight: 800; line-height: .95;
  letter-spacing: -.03em; margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }

.env {
  width: 100%; max-width: var(--ancho); margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
section { padding-block: var(--sp-seccion); position: relative; }

/* El anillo de foco usa el cyan de TEXTO, no el de marca. El de marca da 2,19:1
   contra el fondo real de la pagina y WCAG 2.2 pide 3:1 para el indicador de
   foco (2.4.11). Sobre fondo oscuro se vuelve al cyan de marca, que ahi si
   despega (5,67:1 sobre grafito, 6,77:1 sobre el gris del pie). */
:focus-visible { outline: 3px solid var(--fomup-cyan-texto); outline-offset: 3px; }
.panel--oscuro :focus-visible,
.paso--oscuro :focus-visible,
.pie :focus-visible { outline-color: var(--fomup-cyan); }
/* Se destapa al recibir foco. Faltaba justo esta mitad: estaba recortado a 1x1
   px y nada lo devolvia, asi que quien navega con teclado enfocaba un enlace
   que no podia ver. Un salto de contenido invisible no salta nada. */
.solo-lectores:focus {
  position: static;
  inline-size: auto; block-size: auto; margin: 0;
  clip-path: none; white-space: normal;
  display: inline-block;
  padding: .6em 1em;
  background: var(--fomup-grafito);
  color: var(--fomup-blanco);
  font-size: var(--t-chico);
}
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Etiquetas pequeñas: el otro extremo de la escala tipográfica -------- */

/* --- Botones: solo la letra y un subrayado -------------------------------
   Sin pastilla. El subrayado esta SIEMPRE puesto —si apareciera solo al pasar
   el raton, en un celular no habria nada que indicara que es pulsable— y al
   pasar por encima engorda y el texto se levanta.

   El cyan va en la LINEA, nunca en la letra: sobre blanco da 2,43:1 y no sirve
   para texto. Como subrayado es grafica, que es el uso que el manual permite. */
.btn {
  display: inline-block;
  position: relative;
  padding-block-end: .34em;
  font-family: var(--fomup-fuente-texto);
  font-size: var(--t-medio);
  font-weight: 700;
  line-height: 1.15;
  color: var(--fomup-grafito);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform .3s var(--ease);
}
.btn::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 4px;
  /* Cyan de TEXTO sobre fondo claro. Este subrayado no es decoracion: es la
     UNICA senal de que el texto es pulsable —no hay pastilla, ni subrayado
     tipografico, ni cambio de color—, asi que WCAG lo trata como objeto
     grafico y le exige 3:1 (1.4.11). El cyan de marca daba 2,43:1.
     Sobre fondo oscuro se vuelve al de marca, que ahi si despega. */
  background: var(--fomup-cyan-texto);
  transform: scaleY(.5);
  transform-origin: bottom;
  transition: transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: scaleY(1); }
.btn:focus-visible { outline-offset: 6px; }

/* Sobre grafito la letra va en blanco; la linea sigue en cyan (5,67:1) */
.btn--sobre-oscuro { color: var(--fomup-blanco); }

/* Red de seguridad: cualquier boton dentro de un panel oscuro se aclara solo.
   Se olvido una vez la clase en el hero y quedo grafito sobre grafito. */
.panel--oscuro .btn, .paso--oscuro .btn { color: var(--fomup-blanco); }
.panel--oscuro .btn::after,
.paso--oscuro .btn::after,
.pie .btn::after { background: var(--fomup-cyan); }

/* --- Header ------------------------------------------------------------- */
.cab {
  position: fixed; inset-block-start: 0; inline-size: 100%; z-index: 100;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* --- El logotipo, escrito como TEXTO -------------------------------------
   Antes era un SVG escalado con transform, y salia borroso: el navegador
   rasteriza la imagen a su tamano original y despues la estira. Como texto se
   dibuja nitido a cualquier tamano, que es justo lo que hace falta cuando
   arranca ocupando la pantalla entera.

   Va posicionado ABSOLUTO para que la barra no crezca con el: el logo gigante
   desborda hacia abajo y el header conserva su altura compacta. */
/* El header comparte el marco de la pagina en vez de su propio contenedor
   centrado. Antes el logo caia en 92 px y el texto en 120: la F nunca iba a
   alinearse con la A. */
.cab__fila {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  min-block-size: 56px;
  max-inline-size: none;
  padding-block: clamp(.8rem, 1.6vw, 1.2rem);
  padding-inline: var(--linea-texto);
}
.logo {
  position: absolute;
  /* Un elemento absoluto se ancla al borde del PADDING del contenedor, no a
     donde empieza su contenido. Por eso hay que repetir aqui la linea. */
  inset-inline-start: var(--linea-texto);
  inset-block-start: clamp(.8rem, 1.6vw, 1.2rem);
  /* Alineacion OPTICA: la "F" trae 0,063 em de aire propio dentro del glifo y
     la "A" del titular casi ninguno, asi que con las cajas cuadradas la F se
     veia corrida a la derecha. Se compensa en em para que la correccion
     escale sola cuando el logotipo cambia de tamano. */
  margin-inline-start: -0.063em;
  font-family: var(--fomup-fuente-titular);
  font-weight: 800;
  font-size: var(--logo-tam, 34px);
  line-height: .78;
  letter-spacing: -.045em;
  color: var(--fomup-grafito);
  text-decoration: none;
  white-space: nowrap;
  will-change: font-size;
}
.logo i { font-style: normal; color: var(--fomup-cyan); }
.cab--scroll { background: var(--fomup-blanco); box-shadow: 0 1px 0 var(--fomup-gris-200); }
/* Sin GSAP el logo nace ya en su tamano de header: nada se rompe */
.cab--scroll { z-index: 120; }
.cab .btn { font-size: var(--t-chico); }


/* --- Footer ------------------------------------------------------------- */
/* Aire proporcional al contenido: el pie es corto, asi que no necesita el
   respiro de una seccion completa. */
.pie { background: var(--fomup-gris-950); color: var(--fomup-gris-400); padding-block: clamp(2rem, 4vw, 3rem); position: relative; }
/* Mismo marco que el resto de la pagina, para que la marca del pie caiga en la
   misma linea vertical que el logotipo del header y que todos los titulares. */
.pie .env { max-inline-size: none; padding-inline: var(--linea-texto); }
.pie::after { content: ''; position: absolute; inset: 0; background-image: var(--grano); opacity: .3; pointer-events: none; mix-blend-mode: overlay; }
.pie > * { position: relative; z-index: 1; }
.pie__top { display: flex; flex-wrap: wrap; gap: var(--sp-2xl); justify-content: space-between; }
/* La marca, como TEXTO igual que en el header: hereda la misma compensacion
   optica de la "F" y el "Up" en cyan, en vez de ser una imagen que se alinea
   por su cuenta. */
.pie__logo {
  font-family: var(--fomup-fuente-titular);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--fomup-blanco);
  margin-block-end: var(--sp-md);
  margin-inline-start: -0.063em;
}
/* En el pie la marca va toda en blanco: el cyan se reserva para el header,
   donde el logotipo es el protagonista. */
.pie__logo i { font-style: normal; color: inherit; }
/* El icono va PEGADO a la marca, no en una columna propia. Tenia su propio
   titulo ("Siguenos") y su propio bloque para un solo enlace: tres lineas de
   estructura para 20px de icono, que en movil se apilaban y engordaban el pie.
   Al lado del logotipo se entiende igual sin necesidad de rotulo. */
.pie__marca { display: flex; align-items: center; gap: .9rem; margin-block-end: var(--sp-md); }
.pie__marca .pie__logo { margin-block-end: 0; }
.pie__cat { font-size: var(--t-chico); max-inline-size: 34ch; }
.pie__cols { display: flex; flex-wrap: wrap; gap: var(--sp-2xl); }
.pie h2 { font-family: var(--fomup-fuente-texto); font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fomup-gris-400); margin-block-end: var(--sp-sm); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--t-chico); }
.pie a { text-decoration: none; transition: color .25s var(--ease); }
/* Los dos legales comparten renglón, así que la posición ya no dice cuál es
   enlace y cuál no: sin subrayado, "Política y Términos" se lee como un solo
   texto y nadie adivina que son DOS destinos. La "y" que los separa se queda
   apagada a propósito, para que el corte entre ambos sea evidente. */
.pie__legal a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.pie__legal { color: var(--fomup-gris-500); }
.pie a:hover { color: var(--fomup-cyan); }
.pie__ig { display: inline-flex; padding: .6rem; border: 1px solid var(--fomup-gris-500); border-radius: 999px; transition: border-color .25s var(--ease), color .25s var(--ease); }
.pie__ig:hover { border-color: var(--fomup-cyan); color: var(--fomup-cyan); }
.pie__ig svg { inline-size: 20px; block-size: 20px; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   OPCIÓN C — Capas y profundidad
   --------------------------------------------------------------------------
   Paneles que se superponen, cards que se salen de su banda, y una cinta de
   cyan que atraviesa toda la página pasando por detrás de los paneles y por
   delante de los huecos. Lo que más se siente "diseñado".
   ========================================================================== */

:root {
  --t-hero:    clamp(2.5rem, 1rem + 6.8vw, 7.4rem);
  --t-titular: clamp(2rem, 1.1rem + 4.2vw, 4.8rem);
  --t-grande:  clamp(1.35rem, 1rem + 1.8vw, 2.3rem);
  --radio: 26px;
  --sombra: 0 40px 80px -50px rgba(20, 26, 28, .55), 0 12px 24px -18px rgba(20, 26, 28, .3);
}

/* El fondo REAL de la pagina. Pisa al blanco declarado arriba. */
body { background: var(--fomup-gris-100); }

/* El escenario donde vive la cinta */
.escena { position: relative; }
/* La cinta vive ENTRE capas: por encima del hero y por debajo de todo lo que
   viene despues. Por eso el hero se queda en z-index 1 y el resto sube a 3. */
.cinta-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.cinta-svg path { fill: none; stroke: var(--fomup-cyan); stroke-width: 26; stroke-linecap: round; opacity: .9; }

/* Todo panel se levanta del fondo: eso es la profundidad */
.panel { position: relative; z-index: 1; border-radius: var(--radio); box-shadow: var(--sombra); }

/* La cinta va ENTRE capas. Las secciones del medio la tapan (z-index 3); el
   hero y el cierre quedan por debajo (z-index 1), asi que la cinta les pasa por
   delante. Abre y cierra la pagina pasando por encima. */
.dolor, .hacemos, .descanso { position: relative; z-index: 3; }
.cierre { position: relative; z-index: 1; }
.panel--oscuro { background: var(--fomup-grafito); color: var(--fomup-blanco); overflow: hidden; }
.panel--oscuro::after { content: ''; position: absolute; inset: 0; background-image: var(--grano); opacity: .34; mix-blend-mode: overlay; pointer-events: none; }
.panel--oscuro > * { position: relative; z-index: 1; }
.panel--claro { background: var(--fomup-blanco); }

.marco { padding-inline: var(--marco); }
.dentro { padding: var(--dentro); }

/* --- Hero: el panel no llega a los bordes, y el cyan asoma por detrás --- */
/* Aire suficiente para que el logotipo gigante quepa en la zona clara: si
   cayera sobre el panel oscuro seria grafito sobre grafito, invisible otra vez */
/* El hueco de arriba lo calcula el JS segun el alto real del logotipo: es su
   diapositiva. Sin esto, el "Fom" grafito cae sobre el panel oscuro. */
.hero { padding-block: var(--hero-tope, 15rem) 0; }
/* El panel siguiente lo pisa por arriba, asi que este necesita fondo de sobra:
   sin esto, el boton del hero quedaba debajo del panel del dolor. */
/* El panel toma LO QUE QUEDA de pantalla despues del logotipo. Con una altura
   fija se iba debajo del pliegue y el titular no se veia al cargar. */
.hero__panel {
  min-block-size: max(360px, calc(100svh - var(--hero-tope, 15rem) - 2rem));
  display: flex;
  align-items: flex-end;
  padding-block-end: clamp(2rem, 5vw, 3.5rem);
}
/* Sin versalitas y con peso medio: el titular deja de gritar y toma el mismo
   tono que antes tenia el subtitulo. */
.hero__t {
  font-size: var(--t-hero);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.02;
  max-inline-size: 13ch;
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
}
.hero__t i { font-style: normal; color: var(--fomup-cyan); }
/* Y el subtitulo baja al cuerpo: misma letra que la descripcion de las cards */
.hero__sub {
  font-family: var(--fomup-fuente-texto);
  font-weight: 400;
  font-size: var(--t-medio);
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--fomup-gris-300);
  max-inline-size: 34ch;
  margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
}

/* --- El dolor: panel claro que sube y pisa al hero --------------------- */
.dolor { padding-block: 0; margin-block-start: clamp(-4rem, -6vw, -2.5rem); }
.dolor__t { font-size: var(--t-titular); max-inline-size: 14ch; }
.dolor__t em { display: block; font-style: normal; color: var(--fomup-gris-500); }
/* --- El giro ------------------------------------------------------------
   Sin cajas: las herramientas se destacan solo con peso y color, que es lo que
   hace la tipografia cuando se la deja trabajar. Y va en DOS COLUMNAS a lo
   ancho del panel — antes iba en una columna de 24ch y el remate caia a una
   palabra por linea. */
/* --- El giro ------------------------------------------------------------
   UNA sola frase. Estaba partida en dos columnas y dejaba de leerse como frase:
   el ojo terminaba la izquierda y tenia que ir a buscar la derecha.
   Ahora fluye seguida y el color marca solo el giro. */
.dolor__giro {
  margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
  margin-inline-start: auto;
  max-inline-size: 22ch;
  font-family: var(--fomup-fuente-titular);
  /* Toda la frase con el MISMO peso y el MISMO color: sin grises ni negritas
     que compitan. Asi la unica distincion que queda es el cyan, y por eso pesa. */
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.6rem);
  line-height: 1.32;
  letter-spacing: -.028em;
  color: var(--fomup-grafito);
  text-wrap: pretty;
}
/* La frase entera en grafito: el unico acento es el bloque de cyan del giro.
   Las etiquetas <b> se mantienen porque marcan las herramientas para quien lea
   el codigo o use un lector de pantalla, pero no cambian nada a la vista. */
.dolor__giro b { font-weight: inherit; color: inherit; }

/* El cyan entra como FONDO, no como letra: grafito sobre cyan da 5,67:1 y pasa
   AA; al reves da 2,43 y no se lee. box-decoration-break hace que el resaltado
   se pinte completo en cada linea cuando la frase parte en dos. */
/* Bloque de cyan con la letra en GRAFITO: 5,67:1, cumple AA. Sobre el bloque no
   cabe ni el gris (1,62) ni el blanco (2,43) — solo el grafito.
   El trazo se pinta con el scroll: se anima el ancho, no el layout. */
.resalte {
  font-weight: inherit;
  color: var(--fomup-grafito);
  padding: .04em .18em .1em;
  background-image: linear-gradient(var(--fomup-cyan), var(--fomup-cyan));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* --- Qué hacemos: las cards se escalonan y una se sale --------------- */
/* Era un atributo style= en el marcado. Se mueve aqui para poder quitar
   'unsafe-inline' de la CSP: con este fuera, NINGUNA pagina del sitio necesita
   estilos en linea y la politica puede prohibirlos del todo.
   Selector de dos niveles a proposito: tiene que ganarle a .env, y asi el
   resultado no depende del orden del archivo. */
.hacemos > .hacemos__cab { max-inline-size: none; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.hacemos { padding-block: clamp(3.5rem, 8vw, 6rem); }
.hacemos__t { font-size: var(--t-titular); max-inline-size: 13ch; margin-block: var(--sp-md) clamp(2.5rem, 6vw, 4rem); }
.pasos { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
/* SIN overflow hidden: el numero tiene que poder salirse por arriba. El grano
   de la card oscura, que era lo que necesitaba el recorte, se queda dentro
   heredando el radio en su lugar. */
.paso {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--fomup-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: clamp(1.8rem, 3.6vw, 2.8rem);
}
/* Cascada: cada card arranca mas abajo que la anterior. Rompe la fila, crea
   tension, y de paso dice el orden sin numerarlo dos veces. */
.paso:nth-child(2) { margin-block-start: clamp(0rem, 4vw, 3rem); }
.paso:nth-child(3) { margin-block-start: clamp(0rem, 8vw, 6rem); }
/* El numero cabalga sobre el borde superior de la card */
.paso__n {
  position: absolute;
  inset-block-start: -.36em;
  inset-inline-end: .04em;
  font-family: var(--fomup-fuente-titular);
  font-weight: 800;
  font-size: clamp(7.5rem, 18vw, 14rem);
  line-height: 1;
  color: var(--fomup-cyan);
  opacity: .22;
  pointer-events: none;
  user-select: none;
}
.paso__t { font-size: var(--t-grande); margin-block-end: .6em; position: relative; }
.paso__d { color: var(--fomup-gris-600); max-inline-size: 34ch; position: relative; }
.paso__sep { block-size: 3px; inline-size: 54px; background: var(--fomup-cyan); border: 0; margin-block: clamp(1.4rem, 3vw, 2rem); }
.paso__r { font-weight: 800; font-size: var(--t-medio); max-inline-size: 28ch; position: relative; }

/* La tercera card cierra la secuencia con otro peso */
/* Sin overflow hidden: el grano ya se queda dentro heredando el radio, y sin
   recorte el numero puede sobresalir igual que en las otras dos. */
.paso--oscuro { background: var(--fomup-grafito); color: var(--fomup-blanco); }
.paso--oscuro::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grano); opacity: .34; mix-blend-mode: overlay; pointer-events: none; }
.paso--oscuro .paso__d { color: var(--fomup-gris-400); }
.paso--oscuro .paso__n { opacity: .3; }
/* El boton vive dentro de la card 3, abajo a la derecha. margin-block-start
   auto lo empuja al fondo si la card creciera.
   SIN relleno propio arriba: el separador ya trae su margen inferior, y los dos
   juntos abrian un hueco del doble de lo necesario. */
.paso__acc {
  margin-block-start: auto;
  align-self: flex-end;
}
/* Una sola linea: se prohibe el salto y se baja el cuerpo para que quepan.
   Va pegada a la descripcion, antes del separador. */
.fichas { display: flex; flex-wrap: nowrap; gap: .55em; list-style: none; margin: .9em 0 0; padding: 0; white-space: nowrap; }
/* Sin caja: solo texto, separado por un punto. En la card clara el cyan de
   marca no se podria leer (2,43:1), asi que aqui manda el cyan oscuro (4,67). */
.fichas li {
  font-size: var(--t-chico);
  font-weight: 700;
  color: var(--fomup-cyan-texto);
}
.fichas li:not(:last-child)::after {
  content: '·';
  margin-inline-start: .55em;
  color: var(--fomup-gris-300);
}
.paso--oscuro .fichas li { color: var(--fomup-cyan); }
.paso--oscuro .fichas li::after { color: var(--fomup-gris-700); }
.fichas { margin-block-end: 0; position: relative; }

/* --- Descanso ---------------------------------------------------------- */
.descanso { padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 7vw, 5rem); }
/* Sin relleno propio: el bloque interior ya aporta el suyo, y los dos juntos
   estiraban la card a mas del doble de lo que pide su contenido. */
.descanso__panel { padding-block: clamp(.5rem, 2vw, 1.5rem); }
.descanso__t { font-size: var(--t-titular); max-inline-size: 16ch; line-height: 1.04; }
/* La segunda frase pasa a bloque propio con aire encima: son dos ideas —decidir
   y controlar— y pegadas se leian como un solo parrafo largo. */
.descanso__t b {
  display: block;
  margin-block-start: .42em;
  color: var(--fomup-cyan);
  font-weight: 800;
}

/* --- Cierre ------------------------------------------------------------ */
.cierre { padding-block: 0 clamp(4rem, 9vw, 7rem); }
.cierre__pre { font-size: var(--t-grande); color: var(--fomup-gris-400); max-inline-size: none; text-wrap: initial; margin-block-end: var(--sp-sm); }
.cierre__t { font-size: clamp(3.4rem, 1rem + 12vw, 13rem); line-height: .84; letter-spacing: -.05em; margin-block-end: clamp(2rem, 5vw, 3rem); }
.cierre__acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-lg); }


/* El footer, por encima de la cinta. El SVG lleva overflow visible para que el
   trazo no se recorte en las curvas, y eso hacia que se derramara sobre el pie. */
.pie { background: var(--fomup-gris-950); border-radius: 0; position: relative; z-index: 5; }

/* El logotipo es uno solo, con el "Up" en cyan — asi es la marca. Funciona
   sobre la zona clara de arriba y sobre el header blanco al bajar. */


/* ==========================================================================
   OPCIÓN D — C, con el revelado de líneas de B
   --------------------------------------------------------------------------
   Es C sin tocar: mismos paneles, misma cinta, mismas cards. Lo único que
   cambia es el hero.

   No SUMA el efecto de B, lo REEMPLAZA: en C el panel del hero entraba con un
   fundido y encima habrían entrado las líneas — dos animaciones apiladas que se
   leen como indecisión. Aquí el panel ya está puesto al cargar y lo único que
   se mueve son las líneas dentro de él. Un solo gesto.

   Se hereda todo de C para que las dos no se separen: si C cambia, D cambia.
   ========================================================================== */

/* --- Máscaras por línea -------------------------------------------------
   Un revelado de líneas bien hecho necesita que cada una salga DE DETRÁS DE UN
   BORDE, no que aparezca flotando desde abajo. Eso es este overflow.
   (B no las tiene: funciona de milagro porque el hero recorta al final.) */
.hero__t .linea {
  display: block;
  overflow: hidden;
  /* El descuelgue de la tipografía se cortaría con el overflow: se compensa */
  padding-block-end: .08em;
  margin-block-end: -.08em;
}
.hero__t .linea > span { display: block; }

/* ⚠️ El titular NUNCA arranca en opacity: 0.
   Es el elemento más grande de la página, o sea el que mide el LCP. Si nace
   invisible, el navegador no lo cuenta como pintado y el LCP se lleva encima
   toda la animación. Aquí solo se desplaza: ya está pintado desde el primer
   fotograma. En datos móviles colombianos eso se paga de verdad. */

@media (prefers-reduced-motion: reduce) {
  .hero__t .linea > span { transform: none !important; }
}

/* ==========================================================================
   PÁGINAS LEGALES — Política de Datos y Términos
   --------------------------------------------------------------------------
   Estas reglas NO EXISTÍAN. Las dos páginas se escribieron en los primeros
   commits del sitio con estas clases, y la hoja se rehízo entera al adoptar el
   diseño definitivo sin llevárselas. Resultado: el h1 quedaba tapado por la
   barra fija, el texto corría de borde a borde y los párrafos iban pegados.

   Son las dos páginas que abre un revisor de Mercado Pago o de Meta, y las que
   tiene que leer un abogado. Eran las peores para estar rotas.
   ========================================================================== */
.legal {
  /* La barra es fija y en estas páginas nace ya opaca: sin este respiro el
     titular arranca DEBAJO de ella. Cubre los 56px mínimos más su relleno. */
  padding-block: clamp(7rem, 11vw, 9.5rem) clamp(4rem, 8vw, 6rem);
}
.legal__cuerpo {
  /* Medida de lectura, no ancho de pantalla: un párrafo legal a 1300px es
     ilegible por más correcto que sea su contenido. */
  max-inline-size: 62ch;
  margin-inline: auto;
}
.legal__volver {
  display: inline-block;
  margin-block-end: clamp(2rem, 4vw, 3rem);
  font-size: var(--t-chico);
  color: var(--fomup-gris-600);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.legal__volver:hover { color: var(--fomup-cyan-texto); }

.legal h1 {
  font-family: var(--fomup-fuente-titular);
  font-weight: 800;
  font-size: clamp(2.1rem, 1rem + 3.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-inline-size: 20ch;
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
}
/* El bloque de identidad del responsable: separado del cuerpo por una línea,
   no por una caja. La página ya tiene suficiente estructura. */
.legal__meta {
  border-block: 1px solid var(--fomup-gris-200);
  padding-block: 1.25rem;
  margin-block-end: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--t-chico);
  color: var(--fomup-gris-600);
}
.legal__meta p { line-height: 1.7; }
.legal__vigencia { display: block; margin-block-start: .75rem; color: var(--fomup-gris-500); }

.legal h2 {
  font-family: var(--fomup-fuente-titular);
  font-weight: 800;
  font-size: clamp(1.25rem, .9rem + 1vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  /* El ritmo vertical lo pone el encabezado, no los párrafos: así el aire
     siempre queda ANTES del título y nunca se suma con el del bloque previo.
     Es la trampa que ya mordió cinco veces a este sitio. */
  margin-block: clamp(2.5rem, 4vw, 3.25rem) .9rem;
}
.legal p, .legal li { font-size: var(--t-medio); line-height: 1.75; color: var(--fomup-gris-700); }
.legal p + p { margin-block-start: 1rem; }
.legal ul { margin-block: 1rem 0; padding-inline-start: 1.35rem; }
.legal li + li { margin-block-start: .6rem; }
.legal strong { color: var(--fomup-grafito); font-weight: 700; }
.legal a { color: var(--fomup-cyan-texto); text-underline-offset: .18em; }

/* ==========================================================================
   TABLET — hasta 900 px
   --------------------------------------------------------------------------
   Todo lo de aqui vive DENTRO de una media query por una razon que no es de
   estilo: una regla en max-width es incapaz de alcanzar una pantalla mas ancha.
   Es lo que garantiza que el desktop aprobado no se mueva.

   Y por eso mismo NO se toca ningun clamp() de arriba: un clamp si afecta todos
   los anchos a la vez.
   ========================================================================== */

@media (max-width: 900px) {

  /* El alto del panel dejaba de depender de su contenido y pasaba a depender de
     la ventana. En una tablet —alta y angosta— eso lo dejaba lleno al 48%: una
     caja oscura casi vacia. Aqui manda el contenido. */
  .hero__panel {
    min-block-size: auto;
    padding-block-end: clamp(3.5rem, 9vw, 5.5rem);
  }

  /* El boton del hero quedaba a 42 px del panel siguiente, que lo pisa por
     arriba. Con menos ancho, ese roce se nota mucho mas que en desktop. */
  .dolor { margin-block-start: clamp(-3rem, -4vw, -2rem); }

  /* La cascada de las cards solo tiene sentido en UNA fila. Al pasar a dos
     columnas, esos margenes escalonados descuadran la reticula. */
  .paso:nth-child(2), .paso:nth-child(3) { margin-block-start: 0; }

  /* Una sola columna en ZIG-ZAG: 1 a la derecha, 2 a la izquierda, 3 a la
     derecha. Ninguna ocupa el ancho completo, y ese vaiven acompana el
     serpenteo de la cinta en vez de pelearse con el. */
  .pasos { grid-template-columns: minmax(0, 1fr); }
  /* Ancho EXPLICITO, no maximo: al alinear a un lado, la card se encoge a su
     contenido. Asi el desplazamiento es real y el texto conserva su medida. */
  .paso { inline-size: 72%; max-inline-size: none; }

  /* EL NUMERO ENTRA DENTRO DE SU CARD. Un solo cambio que cierra tres sintomas
     que veniamos parcheando por separado, porque todos salian de lo mismo: el
     36% del numero caia FUERA de la card, sobre el fondo claro de la pagina.

       1. "la cinta pasa por encima del numero" — no era un problema de capas.
          La cinta se veia A TRAVES de la parte que sobresalia, que no tenia la
          card opaca detras.
       2. "el 2 se ve mas oscuro" y 3. "el 2 se ve mas claro" — son el mismo
          fallo por los dos lados. Ese trozo suelto quedaba 64% sobre grafito y
          36% sobre fondo claro, y ningun color solido puede servir a los dos.

     Con el numero dentro, la card opaca queda detras: la cinta ya no se cuela y
     el cyan translucido se adapta solo, igual que en desktop. */
  .paso__n { inset-block-start: 0; }

  /* Los numeros NO llevan color solido: siguen translucidos como en desktop.

     El 36% de cada numero cae FUERA de su card, sobre el fondo claro de la
     pagina. En las cards 1 y 3 da igual (blanco sobre casi-blanco), pero el 2
     queda 64% sobre grafito y 36% sobre fondo claro: ningun color solido puede
     verse bien en los dos a la vez. Se veia oscuro o claro segun cual se
     eligiera, nunca equilibrado.

     El cyan translucido se adapta solo a lo que tenga detras — que es
     exactamente por lo que desktop nunca tuvo este problema. */
  .paso:nth-child(odd)  { justify-self: end; }
  .paso:nth-child(even) { justify-self: start; }
}

/* ==========================================================================
   MOVIL
   Va DESPUES del bloque de tablet a proposito: comparte el 900 y necesita
   ganarle. Igual que tablet, no toca ni un clamp — una media query no puede
   afectar a una pantalla mas ancha, un clamp si.
   ========================================================================== */
@media (max-width: 480px) {
  /* La cascada alternada al 72% es lo correcto en tablet y contraproducente
     aqui: a 360 deja 90px muertos al lado de cada card y aprieta el contenido
     contra un ancho que ya no sobra. A ancho completo el desplazamiento deja de
     leerse como composicion y pasa a ser solo margen perdido. */
  .paso:nth-child(odd), .paso:nth-child(even) { justify-self: stretch; }

  /* --- El título se queda quieto y las cards pasan por debajo ------------ */
  .hacemos > .env {
    position: sticky;
    inset-block-start: 4.25rem;   /* justo debajo de la barra */
    z-index: 2;
    /* --fomup-gris-100 es el fondo REAL de la página, no --fomup-blanco: ese es
       blanco puro y se veía como un bloque recortado sobre el gris.

       Tiene que llevar fondo, no ser transparente: las cards pasan por detrás
       del título cuando se despegan, y sin nada que las tape se leerían a
       través de las letras. Con el color exacto de la página el bloque deja de
       existir a la vista y el título queda sobre el fondo de la web, que es el
       resultado buscado. */
    background: var(--fomup-gris-100);
    padding-block: .75rem;
  }
  /* El margen inferior del titular vive DENTRO de la caja fija, así que ahí
     suma altura en vez de separar. Se reduce y el aire lo pone la card. */
  .hacemos__t { margin-block: 0 .5rem; }

  /* --- La pila ---------------------------------------------------------- */
  .pasos { display: block; }
  .paso {
    position: sticky;
    inline-size: 100%;
    margin-block-end: 1.5rem;
  }
  /* Cada una se detiene 24 px más abajo que la anterior: lo justo para que
     asome el borde de la que quedó debajo y se lea como pila, no como
     reemplazo. Arrancan por debajo del título fijo (4,25rem + su alto). */
  .paso:nth-child(1) { inset-block-start: 11rem; }
  .paso:nth-child(2) { inset-block-start: 12.5rem; }
  .paso:nth-child(3) { inset-block-start: 14rem; }

  /* La sombra va HACIA ARRIBA: es lo que separa una card de la que tapa. */
  .paso { box-shadow: 0 -10px 28px -12px rgb(0 0 0 / .22); }
  .paso--oscuro { box-shadow: 0 -10px 28px -12px rgb(0 0 0 / .38); }

  /* --- El salto a "Decide con datos" ------------------------------------- */
  /* Eran 136 px en el sitio real: 64 de la sección de cards más 80 del respiro siguiente. Dos
     separaciones puestas por lados distintos que nadie sumó. Ahora 24 + 32,
     en la misma escala que el hueco entre cards. */
  .hacemos { padding-block-end: 1.5rem; }
  .descanso { padding-block-start: 2rem; }

  /* --- Las dos ultimas NO se apilan ------------------------------------- */
  /* "Decide con datos" y "Hablemos" se quedan en el flujo normal. Solo se
     apilan las tres del proceso, que es donde el apilado SIGNIFICA algo: son
     pasos de una misma secuencia. Aplicarlo tambien al cierre convertia el
     recurso en decoracion y le quitaba peso justo donde esta la llamada.

     Al no solaparse ya no hace falta tocar el orden de capas: se quedan como
     vienen del sitio. */

  /* El boton de la cabecera entra CON la barra, no antes.
     A 360 el logotipo de apertura ocupa casi todo el ancho, asi que el boton
     —que ya esta en su sitio definitivo desde el primer fotograma— se le monta
     encima y lo corta. Se ata a la misma clase que ya enciende el fondo de la
     barra, para que aparezcan juntos y se lea como una sola cosa.

     Va condicionado a .cab--animado a proposito: si no hay animacion (movimiento
     reducido, GSAP caido, o las paginas legales) el logo nace pequeno, no hay
     nada que tapar, y el boton debe verse desde el principio. */
  .cab--animado .btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  .cab--animado.cab--scroll .btn { opacity: 1; pointer-events: auto; }

  /* LA CINTA NO VA EN MOVIL.
     En desktop traza un camino entre tres cards repartidas a lo ancho: conecta
     algo que esta separado. Aqui las cards ya van en una sola columna y el
     camino es el scroll, asi que la cinta no conecta nada — solo cruza la
     columna y la parte en dos.

     Se apaga por CSS y no por JS a proposito: el trazado sigue existiendo y se
     vuelve a ver solo con cambiar el ancho, sin recargar. */
  .cinta-svg { display: none; }

  /* EL FOOTER RESPIRABA CON MEDIDAS DE ESCRITORIO.
     Medía 370 px de alto para seis líneas de texto. El grueso no era el
     contenido: eran DOS separaciones de 48 px (--sp-2xl) encadenadas —una entre
     la marca y las columnas, otra entre las columnas al plegarse— más 64 de
     relleno propio. En una fila de escritorio esa medida separa bloques que
     están uno al lado del otro; apilados, se suman en vertical.

     Solo cambia el espaciado: ni el cuerpo de letra ni el área de toque de los
     enlaces se tocan. */
  .pie { padding-block: 1.5rem; }
  .pie__top { gap: 1.5rem; }
  /* Vertical más apretado que horizontal: al plegarse, la separación que
     importa es la de arriba abajo. */
  .pie__cols { gap: 1.5rem 2rem; }
  .pie h2 { margin-block-end: .4rem; }

  /* EL LOGOTIPO DE APERTURA PASA POR DEBAJO DE LA PRIMERA CARD.
     Mientras es gigante se le monta encima y se lee sobre el texto de la card.
     No es un problema de tamano sino de capa: la cabecera esta fija en z-index
     100, o sea por encima de todo el contenido.

     Se le baja la capa SOLO mientras el logo esta creciendo. En cuanto se forma
     la barra, .cab--scroll la devuelve a 120 y vuelve a mandar — que es lo que
     tiene que pasar cuando ya es una barra de navegacion.

     Condicionado a .cab--animado: sin animacion el logo nace pequeno, nunca se
     monta sobre nada, y la cabecera debe seguir por encima desde el principio. */
  .cab--animado:not(.cab--scroll) { z-index: 0; }
}

@media (max-width: 400px) {
  /* El titular del hero pedia 298px dentro de un panel de 321 al que el relleno
     del .dentro ya le quitaba 64. No cabia por 41px, y el desborde no venia del
     titular sino del .dentro, que crecia para contenerlo. */
  .hero__t { font-size: 2.25rem; }

  /* La pregunta del cierre va en DOS lineas, que es como esta escrita: el <br>
     parte la frase por la mitad. A 22,5px la primera mitad no cabia en 252 y se
     quebraba otra vez, asi que se leian tres lineas con un corte que nadie
     eligio ("¿Que parte de tu / operacion"). */
  .cierre__pre { font-size: 1.25rem; }
}