:root{
  --bg-black: oklch(0.14 0.01 40);
  --card-black: oklch(0.11 0.01 40);
  --coral: oklch(0.74 0.19 55);
  --glow: oklch(0.78 0.2 60);
  --accent-red: #ff0606;
  --ink: oklch(0.97 0.005 90);
  --ink-dim: oklch(0.78 0.01 90);
  --ink-faint: oklch(0.55 0.01 90);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  height:100%;
  /* Pantalla fija tipo app -- no debe scrollear nunca. Sin esto, cualquier
     diferencia mínima de alto (o el rebote elástico nativo del navegador al
     arrastrar) deja ver el fondo de la página real por debajo del card. */
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  background: oklch(0.09 0.005 40);
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  /* 100dvh (alto visible real, sin la barra del navegador) pisa el 100vh de
     arriba solo donde el navegador lo soporta. */
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}

.stage{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, oklch(0.22 0.05 150 / 0.5), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, oklch(0.28 0.1 30 / 0.4), transparent 60%),
    var(--bg-black);
}

#screen-splash{
  position:relative;
  z-index:1;
  width:100%;
  max-width:430px;
  height:100vh;
  height:100dvh;
  max-height:932px;
  /* Fondo negro plano -- asi es el frame real de Figma (bg-black), sin
     imagen de fondo. El app-bg.png anterior era de una version vieja. */
  background: #000000;
  /* SIN lienzo fijo/canvas-fit.js (2026-09-01, Etapa 3.44, mismo fix que
     ya se aplico en /prepay y /posttournament el 2026-08-31 -- ver
     01 Memory/42_BUG_FRANJAS_LIENZO_FIJO). #screen-splash es ahora el
     contenedor REAL del contenido (flex-column: foto arriba, texto/boton
     abajo), no un host que centra un lienzo 430x932 escalado como unidad
     rigida -- ese escalado achicaba el ANCHO tambien aunque sobraba
     espacio, dejando franjas negras arriba/abajo (medido: 63px cada lado
     en iframe 390x780). */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: 0 40px 100px -20px oklch(0 0 0 / 0.6);
}
@media (min-width:561px){
  /* dvh acá también -- misma corrección que prepay.css: esta regla más
     específica pisaba el fix de 100dvh de la base con vh puro otra vez. */
  #screen-splash{ border-radius:44px; height:min(94dvh,932px); }
}

.hero{
  position:relative;
  width:100%;
  /* Flexible a proposito -- es el elemento que absorbe la diferencia de
     alto en pantallas cortas (mismo rol que .carousel-block en
     /posttournament), asi .content-slice (texto real + boton Start) nunca
     se achica ni se corta. Piso de 120px para que la foto no desaparezca
     del todo en un viewport extremo. */
  flex: 1 1 auto;
  min-height:120px;
  /* z-index mas alto que .content-slice: en Figma el orden real (atras
     hacia adelante) es contenido/glows -> foto -> stroke blur. Sin esto
     los glows (que sangran hacia arriba con top negativo) pintaban
     ENCIMA de la foto en vez de detras. */
  z-index:2;
  /* Esquinas inferiores redondeadas -- calcado del "FotoShape" real de
     Figma (mask SVG, radio 54px solo abajo, arriba recto contra el borde
     de la pantalla). */
  border-radius: 0 0 54px 54px;
  overflow:hidden;
}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* Causa real del bug reportado 2026-09-01 (bloque blanco pegado al logo):
     NO era la posicion del recorte -- hero.jpg (el archivo fuente) tenia
     fondo de estudio blanco en los 4 bordes (medido con Python/PIL, brillo
     por fila/columna). El crop fijo de Figma (offset -3.49/-39.38 dentro
     de una caja 430x453) lo eliminaba porque estaba calibrado para UN solo
     tamano de caja exacto; con .hero ahora flexible, object-fit:cover a
     veces recorta en el eje horizontal en vez del vertical (segun el
     aspect ratio de la caja en cada pantalla) y ahi el blanco volvia a
     aparecer, sin importar el object-position. Fix real: se recorto
     hero.jpg en el archivo (mismos bordes exactos que ya usaba el diseno
     de Figma, 434x453, ver hero_jpg_*_pre_crop.bak) -- ya no queda blanco
     en ningun borde de la imagen fuente, asi que cover puede recortar
     cualquier eje sin revelar nada. Si se reemplaza hero.jpg para un
     contest nuevo, la foto nueva debe venir recortada igual de ajustada
     al producto (sin fondo de estudio visible en los bordes). */
  object-fit:cover;
  object-position:50% 50%;
}
/* FotoShape_StrokeBlur (node 139:230, Figma) -- borde blanco difuminado
   que traza el contorno inferior de la foto. Se pasa 8px por encima del
   borde de .hero a proposito (igual que en Figma); .hero lo recorta con
   su propio overflow:hidden, mismo resultado visual que en el frame real
   donde lo recorta el borde superior del canvas. */
.hero-rim{
  position:absolute;
  inset:0;
  border-radius: 0 0 54px 54px;
  pointer-events:none;
  /* box-shadow en vez de border+filter:blur -- la combinacion
     border-radius + border + filter:blur generaba un artefacto
     cuadrado en la esquina (bug de recorte de Chrome). box-shadow
     inset da el mismo brillo difuminado sin ese bug, recortado limpio
     por el propio border-radius. Valor exacto de tu export:
     rgba(255,255,255,0.32). */
  box-shadow: inset 0 0 0 5px rgba(255,255,255,0.32), inset 0 0 6px 2px rgba(255,255,255,0.32);
}

/* Contenido real (texto/HTML/CSS real + 2 SVGs exportados de Figma para
   badge y boton, que llevan glass/blend-mode que CSS puro no replica).
   Todas las posiciones/colores de abajo son los valores exactos del Dev
   Mode de Figma (node 29:8, "div.content"), tomados 1:1 -- ver
   01 Memory/ para el proceso. */
.content-slice{
  /* position:relative (antes absolute con top:497px fijo, coordenada del
     lienzo de 932px) -- sigue siendo containing block real de los .glow
     (position:absolute) de abajo, mismo comportamiento de contencion,
     ahora como flex child normal de #screen-splash en vez de coordenada
     fija. flex:0 0 auto -- alto natural del contenido, nunca se achica
     (a diferencia de .hero arriba). Bug real 2026-09-01: se puso
     margin-top:-44px pensando que 497-453=44 era un SOLAPE con la foto --
     al reves, es el HUECO que ya tenia el diseno original (content
     empezaba en 497, 44px DESPUES de que la foto terminara en 453). El
     negativo jalaba el logo hacia arriba y quedaba tapado por el borde
     redondeado de la foto (reportado con foto real). Positivo reproduce
     el hueco real. */
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:100%;
  margin-top:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  padding: 6px 32px calc(56px + env(safe-area-inset-bottom, 0px));
}

#logo-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.logo-mark__badge{ display:block; }
#app-name{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:24px;
  line-height:1.3;
  color:#f8f8f8;
}
#app-tagline{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:12px;
  line-height:1.4;
  color:#74716b;
}

#headline{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:700;
  font-size:23px;
  line-height:1.34;
  letter-spacing:-0.23px;
  color:#ffffff;
  max-width:280px;
}
#headline .accent{ color: var(--accent-red); }

/* Outer Glow x4 (nodes 139:234, 139:239, 139:233, 141:2) -- posicion y
   color exactos de Figma; algunas suben por encima de .content-slice
   (top negativo) a proposito, sangrando hacia la foto igual que en el
   frame real. */
.glow{
  position:absolute;
  border-radius:999px;
  opacity:0.6;
  pointer-events:none;
}
.glow--1{
  left:31.51px; top:-102.38px; width:345px; height:88px;
  background:rgba(251,130,0,0.83);
  filter: blur(24.2px);
  mix-blend-mode:plus-lighter;
}
.glow--2{
  left:168.51px; top:52.62px; width:86px; height:44px;
  background:rgba(251,17,0,0.77);
  filter: blur(20.8px);
  mix-blend-mode:screen;
}
.glow--3{
  left:141.51px; top:275px; width:127px; height:44px;
  background:rgba(251,71,0,0.91);
  filter: blur(24.2px);
  mix-blend-mode:plus-lighter;
}
.glow--4{
  left:90.5px; top:275px; width:249px; height:44px;
  background:rgba(251,96,0,0.52);
  filter: blur(24.2px);
}

.start-btn{
  position:relative;
  display:block;
  width:283px;
  height:68px;
  border-radius:999px;
  overflow:hidden;
  text-decoration:none;
}
.start-btn__bg{
  display:block;
  width:100%;
  height:100%;
}
.start-btn__label{
  position:absolute;
  left:109.5px;
  top:20.5px;
  width:45px;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:1.5;
  color:#f8f8f8;
  text-shadow:1px 1px 1px rgba(0,0,0,0.35);
  pointer-events:none;
}
.start-btn__arrow{
  position:absolute;
  left:157.5px;
  top:26px;
  width:16px;
  height:16px;
  object-fit:contain;
  pointer-events:none;
}