:root {
  --bg: #08080b; --superficie: rgba(16, 17, 22, .72); --linea: #26272e; --linea-viva: #3a4a5e;
  --texto: #f6f7f8; --apagado: #a8aab3; --tenue: #6d707b;
  --azul: #86bcf4; --accion: #3f74ac; --navy: #1f4e79; --brasa: #ff7a2f; --rojo: #e63946;
  --sans: Geist, ui-sans-serif, system-ui, sans-serif; --display: Anton, Impact, "Arial Narrow", sans-serif; --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --t-heroe: clamp(2.6rem, 1.2rem + 5.2vw, 5.6rem);
  --t-h2: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  --seccion: clamp(5rem, 3rem + 8vw, 10rem);
  --facil: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: inherit; }

/* Fondo vivo: el mar de datos detrás de toda la página. */
#mar { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; opacity: 0; pointer-events: none; }
main, .nav, .pie { position: relative; z-index: 1; }

/* Navegación */
.nav { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 4vw, 48px);
       background: rgba(8, 8, 11, .72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(38, 39, 46, .6); z-index: 10; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
#logo-nav { width: 40px; height: 40px; }
#texto-nav { width: 118px; height: auto; }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--apagado); font-size: 14px; transition: color .2s; }
.nav nav a:hover { color: var(--texto); }

/* Botones */
/* Botones en medios tonos: en reposo son una retícula de puntos; al pasar el cursor los puntos crecen
   hasta fundirse en sólido (la misma idea puntos ⇄ sólido de la marca). */
@property --punto { syntax: '<length>'; inherits: false; initial-value: 1.4px; }
@property --alfa { syntax: '<number>'; inherits: false; initial-value: .42; }
.boton { --punto: 1.4px; --tinta: 134, 188, 244; --base: #10233a;
         display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 4px; color: #eaf3fd;
         background: radial-gradient(circle, rgba(var(--tinta), var(--alfa, .42)) var(--punto), transparent calc(var(--punto) + .7px)) 0 0 / 6px 6px, var(--base);
         text-shadow: 0 0 6px var(--base);
         text-decoration: none; font: 600 14px var(--mono); letter-spacing: .06em; text-transform: uppercase;
         border: 1px solid rgba(var(--tinta), .55);
         transition: --punto .55s var(--facil), --alfa .55s, color .35s, transform .3s var(--facil), box-shadow .35s; }
.boton::after { content: '→'; transition: transform .35s var(--facil); }
.boton:hover { --punto: 4.6px; --alfa: 1; color: #08080b; text-shadow: none; transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(var(--tinta), .8); }
.boton:hover::after { transform: translateX(4px); }
.boton:active { transform: translateY(0); }
.boton:focus-visible, .nav a:focus-visible { outline: 2px solid #a7d2ff; outline-offset: 3px; }
.boton-chico { padding: 9px 14px; font-size: 12px; }
.boton-chico::after { content: none; }
.boton-fantasma { --punto: .6px; --base: transparent; border-color: rgba(var(--tinta), .3); }
.boton-fantasma:hover { --punto: 4.6px; }
.boton-rojo { --tinta: 230, 57, 70; --base: #2a0d11; }

/* Héroe: 260vh de scroll con el contenido fijo; el progreso mueve la transformación al mar. */
.heroe { height: 260vh; }
.heroe-fijo { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
              gap: clamp(16px, 4vw, 64px); padding: 90px clamp(16px, 5vw, 72px) 40px; overflow: hidden; }
.sobre { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); margin: 0 0 18px; }
.sobre.rojo { color: var(--rojo); }
h1 { font: 400 var(--t-heroe)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 26px; }
h1 em { font-style: normal; color: var(--azul); }
.bajada { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); color: var(--apagado); max-width: 34em; margin: 0 0 32px; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.heroe-texto { will-change: transform, opacity; }
.heroe-logo { position: relative; aspect-ratio: 1; width: min(560px, 100%); justify-self: center; }
/* Los lienzos del logo son más grandes que su caja: el río y el mar tienen espacio para no salirse de cuadro. */
.heroe-logo canvas { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; touch-action: pan-y; }
#logo-mar { opacity: 0; }
#forja-intro { pointer-events: none; z-index: 2; }
.frase-mar { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; margin: 0; font: 400 var(--t-h2)/1.02 var(--display); text-transform: uppercase;
             letter-spacing: .01em; opacity: 0; pointer-events: none; }
.baja { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font: 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }

/* Secciones sobre el mar */
.seccion { max-width: 1180px; margin: 0 auto; padding: var(--seccion) clamp(16px, 4vw, 40px); }
h2 { font: 400 var(--t-h2)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 40px; max-width: 16em; }
h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.01em; }
.tarjeta p, .pasos p, .manifiesto p { color: var(--apagado); margin: 0; }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta { background: var(--superficie); backdrop-filter: blur(10px); border: 1px solid var(--linea); border-radius: 20px; padding: 24px;
           transition: border-color .3s, transform .4s var(--facil); }
.tarjeta:hover { border-color: var(--linea-viva); transform: translateY(-4px); }
.tarjeta canvas { width: 120px; height: 120px; display: block; margin: -8px 0 12px -8px; }
.tarjeta.grande { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; }
.tarjeta.grande canvas { width: min(280px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto 20px; }
/* Personas: el ícono va a un lado del texto para que la tarjeta no crezca y la grande no quede con hueco. */
.tarjeta.ancha { grid-column: span 2; display: flex; gap: 24px 32px; align-items: center; }
.tarjeta.ancha canvas { flex: 0 0 auto; width: 150px; height: 150px; margin: 0; }
.tarjeta.ancha > div { flex: 1 1 auto; min-width: 0; }
.tarjeta.ancha .cita { margin-bottom: 18px; }
.cita { font: 400 clamp(2.2rem, 1.4rem + 3vw, 4rem)/.95 var(--display); text-transform: uppercase; color: var(--texto) !important; flex: 0 0 auto; margin: 0; }
.cita em { font-style: normal; color: var(--azul); }
.cifra span { display: block; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--azul); }
.cifra small { font: 12px var(--mono); color: var(--tenue); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.pasos li { padding: 28px 24px 0 0; }
.pasos span { font: 500 13px var(--mono); color: var(--rojo); display: block; margin-bottom: 18px; }

.producto { display: grid; grid-template-columns: 1fr minmax(220px, 380px); gap: clamp(24px, 5vw, 80px); align-items: center; }
.producto p:not(.sobre) { color: var(--apagado); max-width: 34em; margin: 0 0 28px; }
#hf-producto { width: 100%; aspect-ratio: 1; touch-action: pan-y; }
.manifiesto { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
#logo-rs { width: 100%; aspect-ratio: 1; touch-action: pan-y; }
.manifiesto h2 { margin-bottom: 28px; }
.fuerzas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fuerzas li { color: var(--apagado); padding-left: 22px; position: relative; }
.fuerzas li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); }
.fuerzas b { color: var(--texto); font-weight: 600; }

.cierre { text-align: center; display: grid; justify-items: center; }
.cierre h2 { margin: 0 auto 14px; }
.cierre > p { color: var(--apagado); margin: 0 0 30px; font-size: 18px; }
#texto-cierre { width: min(1000px, 100%); height: auto; margin-top: clamp(2rem, 4vw, 4rem); touch-action: pan-y; }
.pie { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 28px clamp(16px, 4vw, 48px); border-top: 1px solid var(--linea); color: var(--tenue); font: 12px var(--mono); }

@media (max-width: 900px) {
  .nav nav, .baja { display: none; }
  .nav .boton-chico { margin-left: auto; }
  /* Celular: el símbolo más chico arriba y el título visible sin hacer scroll. */
  /* Celular: primero el texto (se lee de inmediato) y abajo la forja con el símbolo. */
  .heroe-fijo { grid-template-columns: 1fr; padding-top: 84px; padding-bottom: 24px; align-content: start; gap: 4px; }
  .heroe-logo { width: min(200px, 50vw); grid-row: 2; }
  .sobre { margin-bottom: 12px; }
  h1 { margin-bottom: 16px; }
  .bajada { margin-bottom: 22px; }
  .bento, .pasos { grid-template-columns: 1fr; }
  .tarjeta.ancha { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .manifiesto, .producto { grid-template-columns: 1fr; }
  #texto-nav { width: 96px; }
}
/* Solo teléfonos (las tabletas y la computadora se quedan igual). */
@media (max-width: 640px) {
  /* «Tu equipo, aumentado» y la tarjeta grande: sin filas dobles ni espacio vacío. */
  .tarjeta.grande { grid-row: auto; }
  .tarjeta.grande canvas { width: min(200px, 60%); }
  .tarjeta.ancha { padding: 22px; gap: 10px; }
  .cita { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.4rem); }
  /* HyperForge: texto, luego el símbolo y al final el botón. */
  .producto > div { display: contents; }
  .producto > div > .sobre { order: 1; } .producto h2 { order: 2; margin-bottom: 16px; }
  .producto > div > p:not(.sobre) { order: 3; margin-bottom: 8px; }
  #hf-producto { order: 4; width: min(260px, 70vw); justify-self: center; }
  .producto > div > .boton { order: 5; justify-self: start; }
  .producto { gap: 12px; }
  /* Manifiesto: primero «Somos Riverstar» y la estrella abajo, para alternar logo y texto al bajar. */
  .manifiesto > div { order: 1; }
  #logo-rs { order: 2; width: min(300px, 80vw); justify-self: center; }
  .frase-mar { bottom: 25vh; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tarjeta, .boton { transition: none; } }

/* Títulos que reaccionan al cursor (titulos-puntos.js). */
@property --rv { syntax: '<length>'; inherits: true; initial-value: 0px; }
.titulo-oculto { position: relative; --rv: 0px; --mx: -999px; --my: -999px; transition: --rv .45s cubic-bezier(.16, 1, .3, 1); }
.titulo-oculto.activo { --rv: clamp(80px, 10vw, 140px); }
/* La máscara solo existe mientras el efecto está activo: Safari en iOS dejaba el título invisible
   con un círculo de radio 0 (el h1 desaparecía en el celular). */
.titulo-oculto.con-mascara > h1 {
  -webkit-mask-image: radial-gradient(circle max(var(--rv), 1px) at var(--mx) var(--my), transparent 92%, #000 100%);
          mask-image: radial-gradient(circle max(var(--rv), 1px) at var(--mx) var(--my), transparent 92%, #000 100%); }
/* La frase escondida: misma tipografía del título, en puntos rojos de Riverstar. */
.capa-oculta { position: absolute; inset: 0; margin: 0; display: none; align-items: center; pointer-events: none;
  font: 400 var(--t-heroe)/.92 var(--display); text-transform: uppercase; color: transparent;
  background: radial-gradient(circle, #e63946 1.25px, transparent 1.8px) 0 0 / 3.6px 3.6px; -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: radial-gradient(circle max(var(--rv), 1px) at var(--mx) var(--my), #000 92%, transparent 100%);
          mask-image: radial-gradient(circle max(var(--rv), 1px) at var(--mx) var(--my), #000 92%, transparent 100%); }
.titulo-oculto.con-mascara .capa-oculta { display: flex; }
h2.forjado { cursor: default; }
.palabra { display: inline-block; white-space: nowrap; }
.letra { display: inline-block; transition: transform .28s cubic-bezier(.16, 1, .3, 1), color .28s; }