/* ============================================================================
   home.css — LA PORTADA, UNA PANTALLA POR SECCION.
   ============================================================================
   Hasta WEB21 esto vivia en un <style> dentro de views/pages/public/index.ejs.
   Sale a su propio fichero por una razon concreta, no por orden: las reglas
   que hacen CABER cada seccion tocan las tripas de los seis componentes de
   WEB19-C, y un componente no puede llevar puesto el alto de la portada —
   /organizers incluye c-dissolve y c-layers y ahi no hay ninguna pantalla que
   llenar. Asi que el ajuste se escribe DESDE FUERA, colgado de .home, y el
   componente se queda como es.

   De ahi sale la unica convencion de este fichero, y conviene leerla antes de
   anadir nada:

     TODA regla que toque el interior de un componente empieza por `.home .sn`.

   No es namespacing decorativo, es la cascada: el <style> de cada parcial esta
   en el BODY, o sea mas tarde en el documento que este <link> del <head>, asi
   que a igual especificidad gana el parcial. `.home .sn .ms-grid` (0,3,0) le
   gana a `.ms-grid` (0,1,0) y no hace falta un solo !important.

   EL SISTEMA (WEB21)
   ------------------
   Nueve secciones, cada una de UNA pantalla exacta, con snap al soltar. Las
   tres piezas:

     1. main.home es la marca de pagina; el scroll-snap-type va en <html>,
        porque el contenedor de snap tiene que ser el que SCROLLEA y main no
        scrollea: puesto en main no haria absolutamente nada. Se escribe como
        html:has(main.home) para que siga siendo una regla de la portada y no
        del sitio entero.
     2. section.sn es una rejilla de tres filas — titular / componente /
        cierre — de 100svh, con el hueco de la cabecera descontado arriba
        (--header-h) y overflow:hidden. El alto lo pone la fila del medio
        (1fr), que es la que se come lo que sobra.
     3. Cada visual (svg o canvas) se mide en svh y nunca en px: max-height y
        width:auto, y el viewBox hace el resto. Un alto fijo en px es lo que
        hacia que la seccion 3 midiera 1.445px en una pantalla de 768.

   SOLO A PARTIR DE 900x700. Por debajo —movil, o una ventana de escritorio
   aplastada— no hay pantallas ni snap: las secciones se apilan con su alto
   natural, que es lo unico que no corta texto. Todo el sistema vive dentro de
   una sola @media y fuera de ella la portada es una pagina normal.

   NI UN #RRGGBB: todo var(--sn-*) de public/css/brand.css.
   ============================================================================ */

/* ============================================================================
   1 · LA BASE. Lo que vale a cualquier ancho, incluido el movil.
   ============================================================================
   La seccion es la PANTALLA y .sn-c es la COLUMNA (1200px). Van separadas
   porque los componentes de WEB19-C traen su propia caja y se centran solos:
   si la columna envolviera tambien al componente, se sumarian dos anchos
   maximos y el diagrama saldria estrecho. (Dentro del sistema de pantalla esto
   cambia: alli el ancho lo pone la propia seccion — ver la parte 2.) */
.sn {
  padding: 96px 0;
  background: var(--sn-bg);
}

.sn-c {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.sn-h2 {
  margin: 0;
  max-width: 20ch;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--sn-text);
}
/* UNA frase por pantalla en el acento. Nunca dos. */
.sn-h2 em { font-style: normal; color: var(--sn-accent); }

.sn-p {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--sn-muted);
}
.sn-p--acc { color: var(--sn-accent); }

/* La frase de cierre de una seccion: va DESPUES del componente y por eso
   lleva su propio aire por arriba. */
.sn-out {
  margin: 56px 0 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--sn-muted);
}

/* --- 5 · LAS TRES CIFRAS, COMO TILES (en el cierre desde el 27-sep-2026). --------------------------------------
   WEB21: eran tres pildoras de una linea en mono (.sn-fig), del tamano de una
   etiqueta. Ahora son tres tiles con la cifra grande arriba y el rotulo
   debajo, que es como estan en la slide de traccion: la cifra es el dato y la
   frase es su pie. Se reutiliza .deck-metric de brand.css —la forma unica de
   toda cifra del producto— y aqui solo se cambia el tamano. */
/* Los tiles y, a su lado o debajo, la accion. */
.og-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.og-tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 560px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.og-tile { flex: 1 1 210px; }
.og-tile .deck-metric-v { font-size: clamp(30px, 2.6vw, 42px); }

/* El boton vive en la MISMA fila que los tiles, a la derecha: es la accion de
   esta pantalla y tiene que estar donde esta la prueba, no tres bloques mas
   abajo. No crece con ellos (flex: none) y se centra contra su alto. */
.og-act { margin: 0; flex: none; display: flex; align-items: center; }

/* EL PIE, SIN HUECO. Su margen superior de 80px (footer.ejs) ensenaba el
   fondo del body —blanco— entre el cierre y el pie: una franja clara justo
   donde el snap deja al lector. En la portada el body es negro y el pie va
   pegado al cierre. */
body:has(main.home) { background: var(--sn-bg); }
.home ~ .site-footer { margin-top: 0; }

/* Los tiles dentro del cierre, a cualquier ancho: aire por arriba y el boton
   debajo de ellos, no a su derecha. */
.sn--close .og-row { margin-top: 28px; flex-direction: column; align-items: flex-start; }
.sn--close .og-tiles { flex: none; width: 100%; }
.sn--close .og-tile { flex: 1 1 140px; }

.sn-acts {
  margin: 48px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
/* El unico boton relleno de toda la portada. Si hubiera dos, no seria el
   primario de nadie. */
.sn-btn {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--sn-accent);
  border-radius: var(--radius);
  background: var(--sn-accent);
  color: var(--sn-bg);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--dur-1) var(--ease);
}
.sn-btn:hover { opacity: 0.88; }
.sn-a {
  font-size: var(--fs-small);
  color: var(--sn-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--sn-line);
  padding-bottom: 2px;
  transition: border-color var(--dur-1) var(--ease);
}
.sn-a:hover { border-bottom-color: var(--sn-accent); }

/* --- 9 · las tres peticiones y las dos pildoras --- */
.sn-asks {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  max-width: 640px;
  border-top: 1px solid var(--sn-line);
}
.sn-asks li {
  padding: 15px 0;
  border-bottom: 1px solid var(--sn-line);
  font-size: var(--fs-body);
  color: var(--sn-text);
}

.sn-pills {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sn-pill {
  padding: 9px 14px;
  border: 1px solid var(--sn-accent);
  border-radius: var(--radius);
  background: var(--sn-accent-soft);
  font-family: var(--sn-font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--sn-text);
}

.sn-notice {
  margin: 0 0 32px;
  padding: 12px 16px;
  border: 1px solid var(--sn-line);
  border-left: 1px solid var(--sn-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--sn-muted);
}

/* --- 9 · EL GRAFO DEL CIERRE. La portada dicha al reves. -------------------
   Mismo motor que el hero (public/js/hero-graph.js), en baja densidad y con
   deriva lenta: el cierre no puede competir con la apertura, tiene que
   RECONOCERSE. El canvas es atmosfera — aria-hidden y sordo al puntero. */
.sn-viz {
  position: relative;
  min-height: 0;
}
.sn-viz-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================================================
   LOS PUNTOS DE LA DERECHA. Un punto por pantalla; el nombre sale al pasar por
   encima y al llegar por teclado.
   ============================================================================ */
.sn-dots {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sn-dots a {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--sn-muted);
  background: transparent;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.sn-dots a:hover,
.sn-dots a.is-active {
  border-color: var(--sn-accent);
  background: var(--sn-accent);
  transform: scale(1.25);
}

/* El nombre. No se oculta con display:none porque entonces no lo leeria un
   lector de pantalla: se oculta a la vista y se sigue anunciando. */
.sn-dot-n {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border: 1px solid var(--sn-line);
  border-radius: var(--radius-sm);
  background: var(--sn-surface);
  color: var(--sn-text);
  font-family: var(--sn-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
.sn-dots a:hover .sn-dot-n,
.sn-dots a:focus-visible .sn-dot-n { opacity: 1; }

/* ============================================================================
   2 · EL SISTEMA DE PANTALLA. Solo de 900x700 en adelante.
   ============================================================================ */
@media (min-width: 900px) and (min-height: 520px) {

  /* EL BODY NO RESERVA SITIO PARA LA CABECERA EN ESTA PAGINA, y no es una
     licencia estetica: header.ejs pone `body { padding-top: var(--header-h) }`
     para que ninguna pagina empiece debajo de la barra fija, y aqui esos 64px
     desplazaban el DOCUMENTO entero. Con snap, el primer punto de encaje
     quedaba en y=64 en vez de en 0, asi que al cargar la portada el navegador
     la movia 64px sola — y el guion de la cabecera, que la esconde en cuanto
     detecta scroll hacia abajo, la escondia antes de que nadie tocase nada.
     Se entraba en la portada sin barra de navegacion.

     Aqui no hace falta: cada seccion reserva el hueco por dentro
     (padding-top), y el hero lo unico que quiere debajo de la barra es su
     grafo, que es justo lo que se busca. El documento empieza en 0, el primer
     encaje es 0 y no hay ningun movimiento al cargar.

     `:has()` para que siga siendo una regla de esta pagina; la especificidad
     (0,1,2) le gana al `body` del <style> de header.ejs, que va despues en el
     documento pero solo es (0,0,1). */
  body:has(main.home) { padding-top: 0; }

  /* ---- LA SECCION ES LA PANTALLA ----
     El ancho de 1200px lo pone AQUI el padding lateral y no un hijo con
     max-width: dentro de la rejilla de la seccion hay columnas (la 2, la 6 y
     la 9 son de dos), y una caja interna de 1200 no podria alinearlas con el
     titular. max() deja 24px de aire cuando la ventana es mas estrecha que
     1200 + aire. */
  .home .sn {
    height: 100svh;
    /* Arriba, el hueco exacto de la cabecera fija. Abajo, 28px y no 0: la
       tercera fila de varias secciones es una frase de cierre, y pegada al
       borde inferior de la ventana se lee como si estuviera CORTADA, que es
       justo lo que este trabajo quita. */
    padding: var(--header-h) max(24px, (100% - 1200px) / 2) 28px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    /* Sin esto una seccion que se pase de alto empujaria a la siguiente y el
       snap dejaria de caer donde cae la pantalla. Es tambien el seguro que
       hace VISIBLE un desajuste: si algo se corta, sale en la captura. */
    overflow: hidden;
  }

  /* Las filas no se encogen por defecto (min-height:auto): sin esto la fila
     1fr crece hasta el alto de su contenido y el overflow:hidden de arriba se
     come el final de la seccion en vez de ajustarla. Es LA linea que hace que
     todo lo demas funcione. */
  .home .sn > * { min-width: 0; min-height: 0; }

  /* Dentro del sistema, .sn-c ya no encuadra nada: el ancho y el aire lateral
     los pone la seccion. Dejarle su max-width:1200 + padding sumaria un
     segundo encuadre y meteria 24px de escalon en el borde izquierdo. */
  .home .sn > .sn-c { max-width: none; padding: 0; }

  /* EL COMPONENTE OCUPA SU FILA, toda y solo ella. Los seis traen su propio
     padding vertical (72px o 120px) y su propio max-width, pensados para una
     pagina que scrollea: dentro de una pantalla eso es justo el alto que
     falta. */
  .home .sn > [data-component] {
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  /* Y EL COMPONENTE REPARTE SU FILA EN FILAS, por la misma razon que la seccion:
     cuatro de los seis son un bloque con un rotulo arriba, el dibujo en medio y
     a veces una frase de cierre, y un `height: 100%` colgado del dibujo se mide
     contra el ALTO DEL PADRE ENTERO, no contra lo que le queda libre. Es
     exactamente lo que hacia que la seccion 4 midiera 913px: el lienzo se
     llevaba los 625px de la fila y el rotulo y el cierre sumaban 120 encima.
     Con la rejilla, el 1fr del medio es lo que sobra de verdad. */
  .home .sn > .c-layers {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px;
  }
  /* El rotulo ya esta separado por el gap de esa rejilla: su margen de 32-48px
     era el aire de una pagina que scrollea. */
  .home .sn .ly-kicker { margin-bottom: 0; }

  /* EL REVELADO ENTRA SOLO CON LA OPACIDAD, SIN LOS 12px DE SUBIDA.
     motion.css arranca todo [data-reveal] en translateY(12px) y lo suelta al
     entrar. En una pagina que scrollea eso es gratis; dentro de una seccion de
     alto EXACTO y overflow:hidden son 12px de caja que la seccion tiene que
     sostener y que nadie llega a ver: la seccion 8 media 780px en vez de 768
     por el desplazamiento de su ultima linea, clipado y contado. El movimiento
     no se pierde — el fundido y la cascada de 120ms siguen igual—, se pierden
     los 12px que sobraban. Solo lo llevan las secciones 8 y 9, que son las dos
     de texto. */
  .home .sn [data-reveal] { transform: none; }

  /* El titular de una pantalla ocupa DOS lineas, no cuatro: a 48px cada linea
     son 53px y un ancho de 20ch las multiplica. 30ch deja los titulares en dos
     lineas a 1366 y en una o dos a 1440. */
  .home .sn .sn-h2 { max-width: 30ch; }
  .home .sn .sn-p { margin-top: 14px; }
  .home .sn .sn-out { margin: 0; }

  /* ------------------------------------------------------------------------
     2 · NO SYSTEM OF RECORD — el libro de cuentas y, al lado, el grafo que se
     deshace en particulas. Media pantalla cada uno.
     ------------------------------------------------------------------------ */
  .home .sn > .c-ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
  }
  .home .sn .cl-text { min-width: 0; }
  .home .sn .cl-price { margin-top: 40px; padding-top: 22px; }
  .home .sn .cl-price-v { font-size: var(--fs-h1); }
  .home .sn .cl-viz { height: 100%; min-height: 0; }

  /* ------------------------------------------------------------------------
     3 · YOU HAVE A LIST — la afirmacion a la izquierda, la medida a la
     derecha. La derecha pesa mas porque ahi esta el grafo.
     ------------------------------------------------------------------------ */
  .home .sn .ms-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 40px;
    height: 100%;
    align-items: center;
  }
  /* La caja de la izquierda se lee ENTERA y en el cuerpo de texto del sitio:
     era --fs-small (14px) y es el contrapunto del argumento, no un pie. */
  .home .sn .ms-claim-rows li { font-size: var(--fs-body); }
  .home .sn .ms-claim-rows b { font-size: 26px; }

  /* La columna medida: la fila de KPI arriba, con su alto natural, y el grafo
     debajo comiendose el resto. */
  .home .sn .ms-truth {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    height: 100%;
    min-height: 0;
  }
  .home .sn .ms-metrics { margin: 0; }
  .home .sn .ms-metric { padding: 10px 12px 12px; }
  .home .sn .ms-metric dd { font-size: 22px; }
  .home .sn .ms-graph { min-height: 0; display: flex; }
  /* EL SVG ESCALA CON SU viewBox, nunca con un alto en px: width:auto +
     max-height es lo unico que mantiene la proporcion cuando la pantalla es
     mas baja que ancha. */
  .home .sn .ms-svg {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 55svh;
    margin: 0 auto;
  }
  .home .sn .ms-caption { margin: 0; }
  /* Con JavaScript la tarjeta del desglose flota (position:absolute) y no es
     un hermano del svg. Sin el —o con movimiento reducido, que es cuando
     c-measurement no la levanta— se queda en el flujo, al lado del grafo: es
     el estado correcto y se lee entero. Solo se le dice que no se estire a
     todo el alto, que es lo unico que la delataba. */
  .home .sn .ms-card { align-self: center; }

  /* ------------------------------------------------------------------------
     4 · THREE LAYERS — media 1.371px, y el brief la daba por buena. Los cuatro
     planos son un viewBox de 460x440: a media pantalla de ancho eso son 536px
     de alto, mas las tres bandas. Se topa el dibujo en svh y las bandas se
     aprietan.
     ------------------------------------------------------------------------ */
  .home .sn .ly-grid {
    gap: 40px;
    height: 100%;
    align-items: center;
  }
  .home .sn .ly-stack { min-height: 0; display: flex; }
  .home .sn .ly-svg {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 46svh;
    margin: 0 auto;
  }
  .home .sn .ly-band { padding: 14px 18px; }
  .home .sn .ly-band-k { margin-bottom: 8px; }
  .home .sn .ly-band-w { margin: -6px 0 8px; }
  .home .sn .ly-band-rows { gap: 6px; }
  .home .sn .ly-band-rows dd { font-size: var(--fs-small); }

  /* ------------------------------------------------------------------------
     5 · CLOSE — el titular a la izquierda, el grafo a la derecha. Es la
     portada dicha al reves, asi que reparte igual: texto y constelacion.
     ------------------------------------------------------------------------ */
  .home .sn--close {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 48px;
    /* stretch, para que el grafo ocupe la pantalla entera como en el hero. El
       texto se centra el solo; con `center` para los dos, el canvas media lo
       que midiera su contenido, que en un canvas es nada. */
    align-items: stretch;
  }
  .home .sn--close > .sn-c { align-self: center; }
  .home .sn--close .sn-asks { margin-top: 24px; }
  .home .sn--close .sn-pills { margin-top: 20px; }
  .home .sn--close .og-row { margin-top: 22px; gap: 12px; }

  /* ---- EL SNAP ----

     `mandatory`, Y EL BRIEF PEDIA `proximity`. Se cambia porque se ha medido,
     y lo medido dice lo contrario de lo que los dos esperabamos. Chrome 1366x768,
     gestos de rueda sinteticos, mirando donde queda el scroll al terminar:

                     proximity                  mandatory
       120px      vuelve a donde estaba      vuelve a donde estaba
       300px      queda en 364: MEDIA        vuelve a donde estaba
                  seccion arriba y media
                  abajo
       400px      queda en 464: MEDIA        832: la seccion siguiente,
                  seccion                    entera
       600px      832, entera                832, entera

     O sea: el que deja la pagina a medias es proximity, no mandatory. La razon
     es que el rango de proximidad de Chrome es corto —entre 120 y 300px aqui—,
     asi que en cuanto el gesto pasa de ese rango el navegador deja de snappear
     y te quedas exactamente donde caiste. mandatory no tiene termino medio: o
     no te mueves, o te mueves UNA pantalla. Que es lo que pide la fase 4 del
     brief: «cada tiron deja una seccion completa; ninguna se queda a medias».

     EL PELIGRO DE mandatory ES REAL Y ESTA TAPADO ABAJO: sin la regla del pie,
     el scroll se quedaba clavado en la seccion 9 (6208px) y no llegaba nunca al
     final del documento (6597px), o sea que los enlaces legales del pie dejaban
     de existir para quien usa la rueda. Con mandatory TODO sitio donde el
     scroll puede pararse tiene que ser un punto de encaje. Por eso el pie es
     uno.

     VA EN <html>, no en main: el contenedor de snap tiene que ser el elemento
     que SCROLLEA. main no scrollea —scrollea el documento—, asi que
     `main.home { scroll-snap-type }` no haria nada en ningun navegador. :has()
     lo deja igualmente colgado de la portada y no del sitio entero.

     Y NO HAY UN SOLO LISTENER DE wheel. El snap es CSS; interceptar la rueda es
     lo que hacen las librerias de fullpage y lo que rompe el scroll del
     trackpad, el de las flechas y el de la barra. */
  @media (prefers-reduced-motion: no-preference) {
    html:has(main.home) { scroll-snap-type: y mandatory; }
    .home > section {
      scroll-snap-align: start;
      /* Ninguna pantalla se puede saltar de un tiron largo: cada gesto deja una
         seccion entera delante. */
      scroll-snap-stop: always;
    }
    /* EL PIE ES EL DECIMO PUNTO DE ENCAJE, y no es un adorno: ver arriba. Con
       `end` el punto es el final del documento —el pie pegado al borde de abajo
       de la ventana—, que es donde el lector espera encontrarlo. */
    .home ~ .site-footer { scroll-snap-align: end; }
  }
}

/* ============================================================================
   2b · LA CAPA PREMIUM (WEB-02). Luz, profundidad y aristas; ningun color.
   ============================================================================
   La portada era correcta y plana: negro liso, lineas grises, un boton
   relleno. Esta capa le pone lo que le faltaba —una atmosfera, aristas de
   luz, bordes que se encienden en una esquina, un halo en la unica accion—
   y lo hace con los tokens de brand.css y nada mas. Ni un #RRGGBB, ni un
   segundo color: el acento y el texto en transparencias.

   LO QUE ESTA CAPA NO HACE: no anade ningun momento animado. La regla de un
   momento por pantalla sigue en pie. Todo lo de aqui es ESTADO, no
   movimiento; lo unico que se mueve es un hover, con --dur-1 y --ease.

   Va ANTES de la parte 3 (movil) para que las reglas de movil sigan ganando
   por orden, y las de movimiento reducido tambien.
   ========================================================================== */

/* -- La atmosfera de cada pantalla. El resplandor va en el fondo de la
      seccion, no en un pseudoelemento, para no discutir con el z-index de los
      componentes que ya usan position:absolute por dentro. -- */
.home .sn {
  position: relative;
  background: var(--sn-atmo), var(--sn-bg);
}
/* La regla electrica en el borde superior de cada pantalla: 1px que se
   enciende en el centro. Es lo que separa dos pantallas sin dibujar caja. */
.home .sn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--sn-rule-electric);
  pointer-events: none;
}
/* Un componente trae el fondo de la pagina pintado en su raiz (c-layers): sobre el negro liso no se notaba; sobre la atmosfera se veia
   su rectangulo. Dentro de la portada van transparentes; sus cajas interiores
   (.ly-band, .dv-canvas-box) conservan el suyo, que si es una caja. */
.home .sn > .c-layers { background: transparent; }
/* El cierre lleva el resplandor a la IZQUIERDA, detras del titular, y corto:
   la mitad derecha es el canvas del grafo, que funde sus bordes al fondo
   liso, y un resplandor debajo marcaria su rectangulo. */
.home .sn--close {
  background:
    radial-gradient(45% 55% at 16% 42%, rgb(var(--sn-accent-rgb) / 0.06), rgb(var(--sn-accent-rgb) / 0) 70%),
    var(--sn-bg);
}

/* -- LA LETRA DEL DECK. El pitch no tiene monoespaciada: los rotulos en
      versalita espaciada («WHAT WE CAN REACH NOW»), los ejes de los diagramas
      y las cifras grandes («$126B») van en la MISMA grotesca que los
      titulares, en negrita. En la portada, y solo en ella, el token de la
      mono se resuelve a la sans: los componentes, las tablas y los rotulos
      cambian de letra sin abrirse. El resto del sitio no cambia. -- */
main.home { --sn-font-mono: var(--sn-font); }
/* LAS BARRAS, EN CIAN (27-sep): toda linea de separacion de la portada —los
   filos de las peticiones, la regla del precio, el subrayado de los enlaces,
   las juntas de las rejillas— deja de ser gris y pasa al acento a media luz.
   Se hace reescribiendo el token de linea SOLO en la portada: ninguna regla
   tiene que saber cual es la barra; todas leen --sn-line. */
main.home { --sn-line: rgb(var(--sn-accent-rgb) / 0.38); }
/* La cifra grande, como en el deck: negrita y apretada. */
.home .deck-metric-v { font-weight: 700; letter-spacing: -0.01em; }
.home .deck-metric-k { font-weight: 600; letter-spacing: 0.12em; }

/* -- Los titulares, con la luz cayendo desde arriba. El recorte del fondo al
      texto; si un navegador no lo soporta, queda `color` y no pasa nada. -- */
.home .sn-h2 {
  font-weight: 700;
  /* -0.015 y no -0.03: con la grotesca actual las letras se tocaban. */
  letter-spacing: -0.015em;
  color: var(--sn-text);
  background: var(--sn-text-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
/* La palabra en el acento: su propio degradado —la punta de luz arriba— y un
   halo. El halo va con drop-shadow y no con text-shadow: con el texto
   recortado, text-shadow se ve A TRAVES de las letras y las emborrona. */
.home .sn-h2 em {
  color: var(--sn-accent);
  background: var(--sn-accent-lit);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgb(var(--sn-accent-rgb) / 0.35));
}

/* -- La seleccion de texto, en el acento y no en el azul del sistema. -- */
.home ::selection {
  background: rgb(var(--sn-accent-rgb) / 0.32);
  color: var(--sn-text);
}

/* -- EL BOTON: el unico relleno de la portada, y ahora con luz. Degradado de
      la punta de luz al acento, arista clara por dentro y halo por fuera. Al
      pasar por encima sube un pixel y el halo crece; no cambia de color. -- */
.home .sn-btn {
  border-color: transparent;
  background: var(--sn-accent-lit);
  box-shadow: var(--sn-glow), inset 0 1px 0 rgb(var(--sn-text-rgb) / 0.45);
  transition:
    box-shadow var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.home .sn-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--sn-glow-lg), inset 0 1px 0 rgb(var(--sn-text-rgb) / 0.55);
}
.home .sn-btn:active { transform: translateY(0); }

/* -- LOS DOS HECHOS DEL CIERRE, sin caja. El deck no enmarca nada: son una
      linea de texto en la letra del sitio, separados por un punto del acento.
      El marcado (ul.sn-pills > li.sn-pill) no cambia. -- */
.home .sn-pills { gap: 6px 0; }
.home .sn-pill {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sn-font);
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--sn-muted);
}
.home .sn-pill + .sn-pill::before {
  content: "\00B7";
  margin: 0 12px;
  color: var(--sn-accent);
  font-weight: 700;
}

/* -- LAS CAJAS: el borde encendido. Dos familias, una tecnica cada una.

      1 · Cajas SOLIDAS (relleno, padding, contenido dentro): el fondo va en
          dos capas, la superficie en padding-box y el degradado del borde en
          border-box, con el borde transparente. La arista de luz por dentro.
      2 · REJILLAS CON GAP DE 1px (el fondo del contenedor es la linea que se
          cuela por las juntas): basta con pintar el degradado como fondo y
          hacer el borde transparente; las juntas se tinen solas.

      Los selectores llevan `.home .sn` delante por la razon de siempre: el
      <style> de cada parcial va despues en el documento y a igual
      especificidad ganaria el. -- */
.home .og-tile,
.home .sn-notice,
.home .sn .ms-claims,
.home .sn .ms-card {
  border-color: transparent;
  background:
    linear-gradient(var(--sn-surface), var(--sn-surface)) padding-box,
    var(--sn-border-lit) border-box;
  box-shadow: var(--sn-edge-light), var(--sn-shadow);
}
/* El tile de metrica conserva su degradado sutil del acento por encima de la
   superficie: es la forma unica de toda cifra del producto (brand.css). */
.home .og-tile {
  background:
    var(--sn-card-gradient) padding-box,
    linear-gradient(var(--sn-surface), var(--sn-surface)) padding-box,
    var(--sn-border-lit) border-box;
}
/* Las claims de la seccion 3 no tenian relleno a proposito —«no es una
   medida»—: se les da el fondo de la pagina, opaco, y nada mas. */
.home .sn .ms-claims {
  background:
    linear-gradient(var(--sn-bg), var(--sn-bg)) padding-box,
    var(--sn-border-lit) border-box;
}

/* 2 · Las rejillas con juntas de 1px. */
.home .sn .ly-bands,
.home .sn .ms-metric-rows {
  border-color: transparent;
  background: var(--sn-border-lit);
  box-shadow: var(--sn-shadow);
}

/* -- LAS TRES PETICIONES del cierre: un punto del acento con halo delante de
      cada una, y la primera linea de la lista es la regla electrica. -- */
.home .sn-asks {
  border-top: 0;
  position: relative;
}
.home .sn-asks::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--sn-rule-electric);
}
.home .sn-asks li {
  position: relative;
  padding-left: 22px;
}
.home .sn-asks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--sn-accent);
  box-shadow: var(--sn-glow-sm);
}

/* -- LOS PUNTOS DE LA DERECHA: el activo, con halo. -- */
.sn-dots a.is-active { box-shadow: var(--sn-glow-sm); }

/* -- LOS ENLACES DE TEXTO: la linea de debajo se enciende en el acento al
      pasar, y ya lo hacia; ahora ademas sube al color del texto. -- */
.home .sn-a { transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.home .sn-a:hover { color: var(--sn-accent-hi); }

@media (prefers-reduced-motion: reduce) {
  .home .sn-btn, .home .sn-a { transition: none; }
}

/* ============================================================================
   2c · LA PANTALLA BAJA (WEB-02, 27-sep-2026). De 520 a 699px de alto.
   ============================================================================
   El sistema de una pantalla por seccion arrancaba a 700px de alto, y por
   debajo la portada volvia a ser una pagina normal: en un portatil de 768
   con la barra del navegador, o con el zoom al 125%, cada seccion se cortaba
   por abajo y habia que hacer scroll dentro de "una pantalla". El criterio
   del 27-sep es el contrario: TODA seccion cabe en la ventana, a cualquier
   alto razonable, y cada rueda deja la siguiente entera. Asi que la puerta
   baja a 520px y este bloque aprieta lo que hace falta para que quepa:
   tipografia un escalon mas pequena, aires mas cortos y los dibujos topados a
   menos svh. Los tokens se reescriben en main.home, no en :root, para que el
   resto del sitio no se entere.

   Por debajo de 520px de alto no hay sistema: ahi ya no cabe nada sin cortar
   texto, y cortar texto es lo unico prohibido.
   ========================================================================== */
@media (min-width: 900px) and (min-height: 520px) and (max-height: 699px) {
  main.home {
    --fs-h1: clamp(24px, 2.4vw + 6px, 34px);
    --fs-body: 15px;
    --fs-small: 13px;
  }
  .home .sn { padding-bottom: 16px; gap: 14px; }
  .home .sn .sn-h2 { max-width: 40ch; line-height: 1.08; }
  .home .sn .sn-p { margin-top: 8px; }

  /* 2 · las cuatro lineas y el precio */
  .home .sn .cl-line { font-size: clamp(20px, 2vw + 4px, 28px); margin-bottom: 6px; }
  .home .sn .cl-price { margin-top: 16px; padding-top: 12px; }
  .home .sn .cl-price-v { font-size: 26px; }
  .home .sn > .c-ledger { gap: 32px; }

  /* 3 · la lista y la medida */
  .home .sn .ms-grid { gap: 28px; }
  .home .sn .ms-claims { padding: 14px 18px; }
  .home .sn .ms-claim-rows li { font-size: 14px; }
  .home .sn .ms-claim-rows b { font-size: 20px; }
  .home .sn .ms-truth { gap: 10px; }
  .home .sn .ms-metric { padding: 7px 10px 8px; }
  .home .sn .ms-metric dd { font-size: 17px; }
  .home .sn .ms-svg { max-height: 46svh; }

  /* 4 · los planos y las bandas */
  .home .sn .ly-grid { gap: 28px; }
  .home .sn .ly-svg { max-height: 40svh; }
  .home .sn .ly-band { padding: 8px 14px; }
  .home .sn .ly-band-k { margin-bottom: 4px; }
  .home .sn .ly-band-w { margin: -4px 0 4px; }
  .home .sn .ly-band-rows { gap: 3px; }
  .home .sn .ly-band-rows dd { font-size: 13px; }

  /* 5 · el cierre, con los tiles y el boton */
  .home .sn--close .og-row { margin-top: 14px; gap: 10px; }
  .home .og-tile { padding: 10px 12px; }
  .home .og-tile .deck-metric-v { font-size: 24px; }
  .home .sn--close .sn-asks { margin-top: 14px; }
  .home .sn-asks li { padding-top: 8px; padding-bottom: 8px; }
  .home .sn--close .sn-pills { margin-top: 12px; }
}

/* ============================================================================
   3 · MOVIL Y VENTANAS BAJAS. Sin pantallas y sin snap, por definicion: es el
   estado que nunca corta nada.
   ============================================================================ */
@media (max-width: 900px) {
  /* Nueve puntos en una pantalla estrecha se comen el texto. */
  .sn-dots-nav { display: none; }
}

@media (max-width: 760px) {
  .sn { padding: 72px 0; }
  .sn-c { padding: 0 20px; }
  .sn-h2 { max-width: none; }
  .sn-acts { gap: 16px; }
  .sn-btn { width: 100%; text-align: center; }
  .og-tiles { gap: 10px; }
  .og-tile { flex: 1 1 100%; }
  .og-act { width: 100%; }
  .og-act .sn-btn { width: 100%; }
  /* El grafo del cierre no es informacion: en movil se lleva bateria y tapa el
     texto al que acompana. */
  .sn-viz { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-btn, .sn-a, .sn-dots a, .sn-dot-n { transition: none; }
}