/* Yoka Valle — "afiche de pelea".
   Look de atleta profesional, no de creadora: navy de noche de pelea, oro de cinturon y hueso.
   El rojo y el azul de Costa Rica aparecen solo en la cinta fina del eyebrow.
   Composicion: la foto 4:5 a todo el ancho arriba, fundida en navy; el nombre gigante se monta
   sobre el borde de la foto; debajo el marcador, la grilla 3x2 de redes y los patrocinadores.
   Diseno solo oscuro (no hay version clara a proposito: es un afiche). */
:root {
  color-scheme: dark;
  --ink: #0A0F1C;
  --ink-2: #121A2E;
  --oro: #D9B25F;
  --oro-hi: #F3D58A;
  --hueso: #F4F1EA;
  --muted: rgba(244, 241, 234, .62);
  --cr-red: #D21034;
  --cr-blue: #002B7F;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sans: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --golpe: cubic-bezier(.12, .9, .2, 1);
  --borde: 18px;                 /* margen lateral del contenido */
  --monta: 30px;                 /* cuanto se monta el nombre sobre el borde de la foto */
  --ceja: 26px;                  /* alto del eyebrow + su aire (0 cuando se oculta) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--ink); color: var(--hueso); }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* fondo de escritorio: el hero desenfocado detras de la tarjeta */
.backdrop {
  position: fixed; inset: -40px;
  background: url("/img/hero-720.webp?v=3") center 20% / cover no-repeat;
  filter: blur(40px) brightness(.3) saturate(1.15);
}

/* grano fino de papel de afiche, encima de todo y casi invisible */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .05;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- el escenario: foto arriba (lo que sobre), bloque abajo (lo que mida) ---------- */
.stage {
  position: relative; z-index: 1; isolation: isolate;
  width: 100%; height: 100vh; height: 100svh;
  margin: 0 auto;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  overflow-x: hidden; overflow-y: auto;          /* respaldo: si algo no cabe, se puede bajar */
  background: var(--ink);
}
@media (min-width: 700px) {
  .stage {
    /* cada svh lleva antes su version en vh: un WebView sin svh descarta la linea entera */
    width: 440px; height: min(100vh - 48px, 900px); height: min(100svh - 48px, 900px);
    margin-top: max(24px, calc((100vh - 900px) / 2));
    margin-top: max(24px, calc((100svh - 900px) / 2));
    border-radius: 28px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .65), 0 0 0 1px rgba(217, 178, 95, .14);
    scrollbar-width: none;
  }
  .stage::-webkit-scrollbar { display: none; }
}

/* ---------- la foto ---------- */
.top { position: relative; min-height: 0; overflow: hidden; }
.hero, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* la foto misma se desvanece abajo (no solo se tapa): asi no queda una raya donde termina */
.hero {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, .6) 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, .6) 89%, transparent 100%);
}
/* Encuadre: se recorta la pared de arriba (la foto sube 4 % del ancho, ~3 % de su alto: en la portada vigente la cabeza ya viene cerca del borde) para que
   el recuadro arranque justo sobre la cabeza y alcance a mostrar los cinturones, que son lo fuerte
   de la foto. Con el ancla arriba del todo el telefono mostraba pared, bandera y cara, y los
   cinturones caian en el degradado. */
.hero img {
  object-fit: cover; object-position: 50% -4vw;
  transform-origin: 50% 30%;
  animation: asienta 2.6s var(--ease) .05s both;
}
@keyframes asienta { from { transform: scale(1.07); } to { transform: none; } }

/* se funde en navy abajo, con un poco de sombra arriba y a los lados para enmarcar */
.shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(10, 15, 28, .38) 0%, transparent 14%, transparent 68%,
                    rgba(10, 15, 28, .28) 79%, rgba(10, 15, 28, .7) 89%,
                    rgba(10, 15, 28, .94) 96%, var(--ink) 100%),
    radial-gradient(130% 90% at 50% 30%, transparent 55%, rgba(10, 15, 28, .45) 100%);
}

/* barrido lento de luz de arena sobre la foto (opacidad baja, una pasada cada ~9 s) */
.top::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 34%, rgba(243, 213, 138, .10) 44%,
              rgba(255, 236, 196, .20) 50%, rgba(243, 213, 138, .10) 56%, transparent 66%);
  mix-blend-mode: screen;
  /* se apaga antes del borde de abajo: si no, aclara el navy y marca una raya donde termina la foto */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 82%);
  transform: translateX(-100%);
  animation: arena 9s ease-in-out 1.6s infinite;
}
@keyframes arena { 0% { transform: translateX(-100%); } 62%, 100% { transform: translateX(100%); } }

/* ---------- el bloque del afiche ---------- */
.bottom {
  position: relative; z-index: 3;
  margin-top: calc(-1 * (var(--monta) + var(--ceja)));
  padding: 0 var(--borde) calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; align-items: stretch; text-align: center;
}

/* eyebrow: cinta de Costa Rica (5 franjas) + texto */
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 14px; margin-bottom: calc(var(--ceja) - 14px);
  font: 600 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--hueso); opacity: .78;
  animation: aparece .9s ease .35s both;
}
.cinta {
  flex: none; width: 18px; height: 12px; border-radius: 1.5px;
  background: linear-gradient(to bottom,
    var(--cr-blue) 0 2px, #fff 2px 4px, var(--cr-red) 4px 8px, #fff 8px 10px, var(--cr-blue) 10px 12px);
  box-shadow: 0 0 0 1px rgba(244, 241, 234, .14), 0 2px 6px rgba(0, 0, 0, .4);
}

/* el nombre: gigante, condensado, en mayusculas; "Valle" en oro */
.name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: min(19vw, 11vh); font-size: min(19vw, 11svh); line-height: .84; letter-spacing: .01em;
  color: var(--hueso);
  text-shadow: 0 4px 26px rgba(0, 0, 0, .55);
}
/* nowrap: cada letra es un inline-block y entre ellos el navegador puede cortar; asi la palabra no
   se parte nunca y, si no cabe en una linea (tier B/C con la letra de respaldo), baja "VALLE" entera */
.name .plain, .name > span { display: block; white-space: nowrap; }
/* :not(.plain) importa: app.js envuelve el nombre suelto en un span.plain, y sin esto "Yoka" se
   llevaria tambien el oro. El oro va tambien en cada .ch: relleno tenue + contorno oro + sombra
   oscura, porque un contorno solo no se lee cuando cae sobre los cinturones. */
.name > span:not(.plain),
.name > span:not(.plain) .ch {
  color: rgba(217, 178, 95, .24);
  -webkit-text-stroke: 1.6px var(--oro);
  text-shadow: 0 3px 16px rgba(5, 8, 16, .75);
}
/* cada letra entra de golpe: grande y borrosa -> en su sitio */
.name .ch {
  display: inline-block;
  animation: golpe .6s var(--golpe) both;
}
@keyframes golpe {
  from { opacity: 0; transform: scale(1.08); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.tagline {
  margin-top: 10px;
  font: 500 15px/1.3 var(--sans); letter-spacing: .01em;
  color: var(--hueso); opacity: .86;
  animation: aparece .9s ease .55s both;
}
@keyframes aparece { from { opacity: 0; } }

/* ---------- marcador estilo tablero ---------- */
.marcador {
  margin-top: 16px;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: stretch;
  border-top: 1px solid rgba(217, 178, 95, .4);
  border-bottom: 1px solid rgba(217, 178, 95, .4);
  animation: aparece .9s ease .6s both;
}
.celda {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; text-align: left;
}
.celda + .celda { border-left: 1px solid rgba(244, 241, 234, .12); }
.num {
  display: inline-block;
  font: 900 40px/.9 var(--display); color: var(--hueso);
  animation: golpe-num .5s var(--golpe) .8s both;
}
.celda:nth-child(2) .num { animation-delay: .92s; }
@keyframes golpe-num {
  0%   { opacity: 0; transform: scale(1.6); filter: blur(6px); }
  60%  { opacity: 1; transform: scale(.94); filter: none; }
  100% { opacity: 1; transform: none; }
}
.lbl {
  width: min-content;            /* una palabra por linea y la celda tan angosta como la palabra mas larga */
  font: 600 9.5px/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.lema {
  text-align: center;
  font: italic 800 17px/.98 var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--oro);
}

/* ---------- grilla 3x2 de tiles iguales ---------- */
.tiles {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.tile {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 56px; min-height: 44px; min-width: 0; padding: 0 6px;
  border-radius: 12px;
  background: rgba(18, 26, 46, .78);
  border: 1px solid rgba(244, 241, 234, .13);
  color: var(--hueso); text-decoration: none;
  font: 600 12px/1.1 var(--sans); letter-spacing: 0; white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s, background-color .25s, transform .25s var(--ease);
  animation: sube .55s var(--ease) backwards;   /* backwards: al terminar suelta el transform y :active vuelve a funcionar */
}
.tile svg { flex: none; width: 18px; height: 18px; }
.tile:nth-child(1) { animation-delay: .85s; }
.tile:nth-child(2) { animation-delay: .91s; }
.tile:nth-child(3) { animation-delay: .97s; }
.tile:nth-child(4) { animation-delay: 1.03s; }
.tile:nth-child(5) { animation-delay: 1.09s; }
.tile:nth-child(6) { animation-delay: 1.15s; }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } }
.tile:hover { border-color: rgba(244, 241, 234, .32); background-color: rgba(26, 36, 62, .9); }
.tile:active { transform: scale(.97); }
.tile:focus-visible { outline: 2px solid var(--oro-hi); outline-offset: 2px; }

/* Club VIP: mismo tamano que las demas; resalta con un filete dorado y la estrellita, no domina */
.tile.vip {
  color: var(--oro-hi);
  border-color: rgba(217, 178, 95, .78);
  background: linear-gradient(180deg, rgba(217, 178, 95, .16), rgba(18, 26, 46, .82) 72%);
  box-shadow: inset 0 1px 0 rgba(243, 213, 138, .22), 0 6px 22px rgba(217, 178, 95, .12);
}
.tile.vip svg { color: var(--oro); fill: rgba(217, 178, 95, .28); }
.tile.vip:hover { border-color: var(--oro-hi); }

/* Rebote: un saltito doble cada ~4,5 s (no constante, para que llame la mirada sin desequilibrar la
   grilla) con un destello dorado y la estrella que gira un poco en el pico. Va con `translate` y no
   con `transform`, asi no pisa la entrada (sube) ni el :active. Arranca cuando ya entraron todas. */
.tile.vip {
  animation: sube .55s var(--ease) .91s backwards, rebote 4.6s cubic-bezier(.3, 0, .3, 1) 2.6s infinite;
}
.tile.vip svg { animation: brillo 4.6s ease 2.6s infinite; }
@keyframes rebote {
  0%, 21%, 100% {
    translate: 0 0;
    box-shadow: inset 0 1px 0 rgba(243, 213, 138, .22), 0 6px 22px rgba(217, 178, 95, .12);
  }
  6%  {
    translate: 0 -6px;
    box-shadow: inset 0 1px 0 rgba(243, 213, 138, .32), 0 12px 30px rgba(217, 178, 95, .3);
  }
  11% { translate: 0 0; }
  15% { translate: 0 -2.5px; }
  19% { translate: 0 0; }
}
@keyframes brillo {
  0%, 16%, 100% { transform: none; }
  6% { transform: scale(1.2) rotate(-14deg); }
}

/* ---------- patrocinadores: franja discreta, solo texto ---------- */
.apoyo {
  margin-top: 16px; opacity: .5;
  animation: aparece-medio 1s ease 1.2s both;
}
@keyframes aparece-medio { from { opacity: 0; } }
.apoyo-t {
  font: 600 9px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  margin-bottom: 7px;
}
.marcas {
  font: 600 12px/1.5 var(--sans); letter-spacing: .1em;
  font-variant-caps: all-small-caps;
}
.marcas span { display: block; }
.marcas i { display: none; font-style: normal; }

/* ---------- alturas ----------
   A (>= 700 px): todo. B (< 700): sin eyebrow, nombre en 1 linea, patrocinadores en 1 linea sin
   etiqueta. C (< 620): marcador en una fila de texto y tiles de 44 px. La cara siempre queda a la
   vista porque la foto se lleva lo que sobre y se ancla arriba.
   En escritorio cuenta el alto de la TARJETA (ventana - 48 px), no el de la ventana: por eso los
   cortes ahi son 747 y 667 (una ventana de 730 da una tarjeta de 682, que es tier B). */
@media (max-height: 699px), (min-width: 700px) and (max-height: 747px) {
  :root { --ceja: 0px; }
  .eyebrow { display: none; }
  .name .plain, .name > span { display: inline; }
  .name > span:not(.plain) { margin-left: .2em; }
  .tagline { margin-top: 8px; }
  .apoyo { margin-top: 14px; }
  .apoyo-t { display: none; }
  .marcas { white-space: nowrap; font-size: clamp(9px, 2.9vw, 12px); letter-spacing: .06em; }
  .marcas span, .marcas i { display: inline; }
}
@media (max-height: 619px), (min-width: 700px) and (max-height: 667px) {
  .tagline { margin-top: 6px; font-size: 14px; }
  .marcador {
    margin-top: 12px; padding: 8px 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0;
  }
  .celda { padding: 0; gap: 4px; border: 0 !important; }
  .celda + .celda::before { content: "·"; margin: 0 7px; color: var(--muted); }
  .num { font-size: 16px; line-height: 1; }
  .lbl { width: auto; white-space: nowrap; font-size: 9.5px; letter-spacing: .04em; }
  .lema { font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
  .tiles { margin-top: 12px; }
  .tile { height: 44px; }
  .apoyo { margin-top: 12px; }
}

/* bajito y angosto: la fila no cabe; el lema baja a su propia linea en vez de arrastrar el punto */
@media (max-height: 619px) and (max-width: 374px) {
  .lema { flex-basis: 100%; }
  .lema::before { display: none; }
}
/* telefonos angostos: un pelo menos de letra y de aire para que "Official site" quepa en linea */
@media (max-width: 399px) {
  .tile { gap: 6px; padding: 0 4px; font-size: 11.5px; }
}
/* por debajo de 360 px de ancho, el icono va sobre la etiqueta */
@media (max-width: 359px) {
  .tile { flex-direction: column; gap: 4px; font-size: 11px; }
  .tile svg { width: 17px; height: 17px; }
}

/* telefonos: el nombre va en UNA linea siempre ("YOKA VALLE"). Dos lineas se comian ~65 pt que la
   foto necesita para que entren los cinturones. */
@media (max-width: 699px) {
  .name { font-size: min(16.5vw, 10vh); font-size: min(16.5vw, 10svh); }
  .name .plain, .name > span { display: inline; }
  .name > span:not(.plain) { margin-left: .2em; }
  /* mas foto: la cinta de Costa Rica pasa a la linea del apodo (el eyebrow se comia su propia
     linea), tiles de 50 y marcador mas compacto. Asi entran los escudos de los cinturones. */
  :root { --ceja: 0px; }
  .eyebrow { display: none; }
  .tagline { display: flex; align-items: center; justify-content: center; gap: 9px; }
  .tagline::before {
    content: ""; flex: none; width: 16px; height: 11px; border-radius: 1.5px;
    background: linear-gradient(to bottom,
      var(--cr-blue) 0 2px, #fff 2px 4px, var(--cr-red) 4px 7px, #fff 7px 9px, var(--cr-blue) 9px 11px);
    box-shadow: 0 0 0 1px rgba(244, 241, 234, .14), 0 2px 6px rgba(0, 0, 0, .4);
  }
}
/* la compactacion solo en telefonos de 620 o mas de alto: por debajo manda el tier C (va antes en
   el archivo y estas reglas lo pisarian) */
@media (max-width: 699px) and (min-height: 620px) {
  .marcador { margin-top: 13px; }
  .celda { padding: 7px 10px; }
  .num { font-size: 36px; }
  .tiles { margin-top: 12px; }
  .tile { height: 50px; }
  .apoyo { margin-top: 13px; }
}

/* escritorio: el nombre se mide contra la tarjeta de 440, no contra la ventana. La foto se encuadra
   un poco mas abajo (20 %): la tarjeta es mas baja que el 4:5 y con el ancla arriba del todo el
   menton caia en el degradado */
@media (min-width: 700px) {
  .name { font-size: min(84px, 11vh); font-size: min(84px, 11svh); }
  :root { --borde: 22px; }
  .hero img { object-position: 50% -18px; transform-origin: 50% 30%; }   /* mismo recorte que en telefono: 4 % de 440 */
}

/* ---------- aviso de edad (solo al tocar Club VIP) ---------- */
.gate, .leap {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: 22px;
  background: radial-gradient(ellipse at 50% 34%, rgba(26, 38, 68, .55), rgba(4, 7, 14, .92) 70%);
  backdrop-filter: blur(26px) saturate(1.1); -webkit-backdrop-filter: blur(26px) saturate(1.1);
  animation: aparece .35s ease both;
}
.leap { z-index: 40; }
.gate[hidden], .leap[hidden] { display: none; }

.gate-card, .leap-card {
  position: relative; overflow: hidden;
  width: min(360px, 100%); padding: 30px 26px 16px; text-align: center;
  border-radius: 22px;
  background: linear-gradient(172deg, #172240 0%, #0D1428 58%, #0A0F1C 100%);
  border: 1px solid rgba(217, 178, 95, .34);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(243, 213, 138, .1);
  animation: entra .6s var(--ease) both;
}
@keyframes entra { from { opacity: 0; transform: translateY(16px) scale(.975); } }
/* filete de oro arriba, como el borde de un cinturon */
.gate-card::before, .leap-card::before {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-hi), transparent);
}
/* monograma YV */
.mono {
  display: inline-grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid var(--oro);
  color: var(--oro-hi);
  font: 900 23px/1 var(--display); letter-spacing: .03em;
  box-shadow: inset 0 0 0 4px rgba(217, 178, 95, .08), 0 0 34px rgba(217, 178, 95, .16);
}
.gate-title, .leap-title {
  margin-top: 16px;
  font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  color: var(--hueso);
}
.gate-text {
  margin: 10px auto 0; max-width: 272px;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.gate-yes, .leap-go {
  margin-top: 22px; width: 100%; min-height: 50px; padding: 14px 16px;
  cursor: pointer; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--oro-hi), var(--oro));
  color: #191306; font: 700 12.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 12px 32px rgba(217, 178, 95, .24), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .25s var(--ease), filter .25s;
}
.gate-yes:hover, .leap-go:hover { filter: brightness(1.06); }
.gate-yes:active, .leap-go:active { transform: scale(.98); }
.gate-no {
  margin-top: 6px; width: 100%; min-height: 44px; padding: 12px;
  border: 0; background: none; cursor: pointer;
  font: 500 12.5px var(--sans); color: rgba(244, 241, 234, .5);
  transition: color .25s;
}
.gate-no:hover, .gate-no:active { color: var(--hueso); }
.gate button:focus-visible, .leap button:focus-visible { outline: 2px solid var(--oro-hi); outline-offset: 3px; }

/* ---------- "Continuar al sitio" (solo webviews de redes) ---------- */
.leap-card { padding-bottom: 20px; }
.leap-hint {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(244, 241, 234, .1);
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
}
.leap-dots { flex: none; font-weight: 700; letter-spacing: 2px; color: var(--oro); }
.leap-hint-t { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.leap-copy {
  margin-top: 16px; width: 100%; min-height: 44px; padding: 12px; cursor: pointer;
  border: 1px solid rgba(217, 178, 95, .4); border-radius: 12px; background: none; color: var(--oro-hi);
  font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.leap-note { margin-top: 10px; font-size: 11px; color: rgba(244, 241, 234, .4); min-height: 14px; }

/* ---------- movimiento reducido: todo quieto y todo visible ----------
   Ninguna regla base esconde nada: las entradas viven solo en los "from" de las animaciones,
   asi que al apagarlas queda la pagina completa (los numeros 6 y 3 incluidos). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .top::after { display: none; }
}