/* ¿Quién Gana? — quiengana.app · css/site.css
   Hoja de la LANDING DE CONVERSIÓN (index.html + 404.html).
   Las páginas internas (/juego/, legales, /soporte/) siguen usando /assets/styles.css.
   SINCRONÍA: las variables :root, el header y el footer están duplicados desde
   /assets/styles.css — si cambias colores o navegación allá, cámbialos acá también.
   Estética = la del juego real: felt granate, crema naipe, oro, coral, banda picante.
   HTML/CSS puro, sin dependencias, sin build. */

:root {
  /* Felt rojo del juego (packages/ui theme: feltRedLight/feltRed/feltRedDark) */
  --felt-light: #9b2434;
  --felt:       #6a0f1f;
  --felt-dark:  #3a060d;
  --red-bg:     #6a0f1f;
  --red-bg-2:   #5c0e1b;
  --red-glow:   #8d1a2f;

  /* Coral de marca */
  --red:      #ff5b6e;
  --red-soft: #ff8a98;

  /* Oro = acción */
  --gold:      #f0c24b;
  --gold-soft: #ffe08a;
  --gold-vision: #E7C66B;

  --green: #3dbf71;

  /* Crema naipe (cartas del juego) */
  --naipe:      #f5efe6;
  --naipe-ink:  #1a1a1a;
  --naipe-line: rgba(0,0,0,0.18);

  /* Texto sobre rojo */
  --ink:   #ffffff;
  --muted: #f3dde0;
  --faint: #d8b3b8;

  /* Superficies translúcidas */
  --glass:   rgba(0,0,0,0.22);
  --glass-2: rgba(0,0,0,0.14);
  --line:    rgba(255,255,255,0.20);
  --line-2:  rgba(255,255,255,0.12);

  /* Banda picante — firma del juego */
  --picante: linear-gradient(90deg, #3dbf71 0%, #a3d957 26%, #ffd166 50%, #ff8a3d 74%, #ff453a 100%);
  --picante-loop: linear-gradient(90deg,
    #3dbf71 0%, #a3d957 18%, #ffd166 36%, #ff8a3d 54%, #ff453a 72%,
    #ff5b6e 84%, #ff8a3d 92%, #3dbf71 100%);

  --max: 980px;
  --radius: 16px;
  --radius-card: 18px; /* Radii.lg del juego (cartas) */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--felt);
  background-image: radial-gradient(1100px 520px at 50% -170px, var(--red-glow) 0%, rgba(141,26,47,0) 70%);
  background-repeat: no-repeat;
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ---------- Accesibilidad ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: var(--gold); color: #2a0509; padding: 10px 16px; border-radius: 0 0 var(--radius) 0; z-index: 100; font-weight: 800; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---------- Header (duplicado de assets/styles.css — mantener en sincronía) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--red-bg-2) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease;
}
.scrolled .site-header { border-bottom-color: rgba(255,255,255,.14); }
.site-header nav { max-width: var(--max); margin-inline: auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand .q { color: var(--red); }
.site-header ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; align-items: center; }
.site-header ul a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.site-header ul a:hover, .site-header ul a[aria-current="page"] { color: var(--ink); }
.site-header .nav-cta {
  color: #2a0509; background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-radius: 999px; padding: 7px 16px; font-weight: 800;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-header .nav-cta:hover { color: #2a0509; filter: brightness(1.05); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6vw, 3.3rem); font-weight: 800; margin: 0.3em 0 0.4em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; margin: 0 0 0.5em; }
h3 { font-size: 1.12rem; font-weight: 700; margin: 1.2em 0 0.3em; }
p { margin: 0.7em 0; }
.lead { font-size: clamp(1.08rem, 2.3vw, 1.25rem); color: var(--muted); max-width: 34em; }
.kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; font-weight: 800; margin: 0; color: var(--gold-soft); }
a { color: var(--gold-soft); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
strong { color: var(--ink); }

/* ---------- Banda picante ---------- */
.picante-band {
  display: block; height: 4px; border-radius: 4px;
  background: var(--picante-loop); background-size: 220% 100%;
  box-shadow: 0 0 16px rgba(255,209,102,.35);
  animation: picanteShift 11s linear infinite;
}
@keyframes picanteShift { to { background-position: -220% 0; } }

/* ---------- Botones genéricos ---------- */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #2a0509;
  font-weight: 800; text-decoration: none; border: 0; border-radius: 999px;
  padding: 13px 28px; font-size: 1.02rem; cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 22px rgba(240,194,75,.28);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-2px); color: #2a0509; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); filter: none; }

/* ===================== HERO — mesa de felt del juego ===================== */
.hero-download {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(3rem, 9vh, 5.6rem) 24px clamp(2.6rem, 7vh, 4.4rem);
  /* Verde casino ("mesa verde" del juego): feltGreenLight → feltGreen → feltGreenDark + viñeta.
     Solo el hero; el resto de la página se queda en el felt rojo. */
  background:
    radial-gradient(130% 100% at 50% -10%, #1d8c5d 0%, #0d6b3e 52%, #053a1f 100%);
  box-shadow: inset 0 -60px 120px rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(0,0,0,.35);
}
.hero-download > .hero-inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
.hero-download .kicker { margin-bottom: .5rem; }
.wordmark { display: inline-block; margin: 0.1em 0 0; font-size: clamp(2.7rem, 9.5vw, 5.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; }
.wordmark .q1, .wordmark .q2 { color: var(--red); text-shadow: 0 0 32px rgba(255,91,110,.55); }
.wordmark .gana { background: linear-gradient(180deg, #fff, var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-download .lead { margin: 1.2rem auto 0; max-width: 26em; }

/* Fichas de casino decorativas (PlayerChip del juego, SVG 1:1) */
.hero-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.chip { position: absolute; filter: drop-shadow(0 14px 26px rgba(0,0,0,.45)); }
.chip text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 800; font-size: 104px; }
.chip--zafiro  { --chip-base:#2A4D8F; --chip-edge:#F0C24B; --chip-center:#36589C; --chip-ink:#F0C24B; }
.chip--magenta { --chip-base:#A8285C; --chip-edge:#F0C24B; --chip-center:#BE376E; --chip-ink:#F0C24B; }
.chip--oro     { --chip-base:#C99A3C; --chip-edge:#5A1B29; --chip-center:#D8AC53; --chip-ink:#5A1B29; }
.chip-1 { width: 150px; left: max(-30px, 2%); top: 16%; transform: rotate(-14deg); opacity: .95; }
.chip-2 { width: 118px; right: max(-24px, 3%); top: 10%; transform: rotate(11deg); opacity: .9; }
.chip-3 { width: 96px; right: 9%; bottom: 8%; transform: rotate(-7deg); opacity: .8; }
@media (max-width: 760px) {
  .chip-1 { width: 92px; left: -32px; top: 15%; opacity: .8; }
  .chip-2 { width: 72px; right: -26px; top: 3%; opacity: .75; }
  .chip-3 { display: none; }
}

/* Botones de tienda — arquitectura multi-store: una lista, cada tienda un <a> */
.store-buttons { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.45); border-radius: 13px;
  padding: 10px 20px 10px 16px; min-height: 60px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.store-badge:hover { transform: translateY(-2px); border-color: var(--gold); color: #fff; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.store-badge .sb-logo { width: 30px; height: 30px; flex: none; }
.store-badge .sb-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.16; text-align: left; }
.store-badge .sb-txt small { font-size: .72rem; font-weight: 500; opacity: .9; letter-spacing: .01em; }
.store-badge .sb-txt strong { font-size: 1.28rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.store-note { margin: 1rem auto 0; font-size: .95rem; color: var(--muted); }
.store-note .sep { margin: 0 7px; opacity: .5; }
.store-note .free { color: var(--gold-soft); font-weight: 800; }
.age-note { margin: .5rem auto 0; font-size: .82rem; color: var(--faint); max-width: 32em; }

/* Barra fija de descarga: solo móvil, aparece al pasar el hero (.show-dlbar) */
.dl-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; display: none; align-items: center; gap: 12px; min-height: 56px; padding: 10px 20px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #2a0509;
  font-weight: 800; text-decoration: none; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: translateY(160%); transition: transform .3s ease;
}
.dl-bar .sb-logo { width: 26px; height: 26px; flex: none; }
.dl-bar .dl-bar-txt { display: flex; flex-direction: column; line-height: 1.15; }
.dl-bar .dl-bar-txt small { font-weight: 600; opacity: .82; font-size: .74rem; }
.show-dlbar .dl-bar { transform: none; }
@media (max-width: 767px) { .dl-bar { display: flex; } }
@media (prefers-reduced-motion: reduce) { .dl-bar { transition: none; } }

/* Pills */
.hero-meta { margin-top: 1.4rem; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--muted); background: var(--glass); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 14px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.pill .dot.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
.pill .dot.gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ===================== Secciones ===================== */
section.block { padding: clamp(2.6rem, 6.5vw, 4rem) 0; }
.section-head { text-align: center; max-width: 38em; margin-inline: auto; }
.section-head .lead { margin-inline: auto; }
.section-head .picante-band { width: min(220px, 50%); margin: 1.1rem auto 0; }

/* ---------- Grid de los 13 juegos ---------- */
.game-grid { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.game-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 16px; height: 100%;
  text-decoration: none; color: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
a.game-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent, var(--gold)) 65%, transparent); background: rgba(0,0,0,.30); color: inherit; }
/* Mini naipe: la ficha del ícono es crema como las cartas del juego */
.game-card .gc-tile {
  flex: none; width: 46px; height: 58px; border-radius: 9px;
  background: var(--naipe); border: 1px solid var(--naipe-line);
  display: grid; place-items: center; font-size: 1.35rem;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.3);
  position: relative;
}
.game-card .gc-tile::after {
  content: ''; position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px;
  border-radius: 3px; background: var(--accent, var(--gold)); opacity: .85;
}
.game-card .gc-name { display: block; font-weight: 700; color: var(--ink); line-height: 1.25; }
.game-card .gc-desc { display: block; font-size: .88rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
/* Carta del juego secreto: borde punteado dorado, como algo por descubrir */
.game-card--secret { border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); background: rgba(0,0,0,.22); }
a.game-card--secret:hover { border-style: solid; }
.gc-badge {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #2a0509; background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-radius: 99px; padding: 2px 8px;
}
.secret-tease { color: var(--gold-soft); font-weight: 700; white-space: nowrap; }
.game-grid-note { text-align: center; color: var(--faint); font-size: .88rem; margin-top: 1.2rem; }

/* ---------- Cómo funciona: 3 pasos como naipes ---------- */
.steps { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: paso; }
.step-card {
  position: relative;
  background: var(--naipe); color: var(--naipe-ink);
  border: 1px solid var(--naipe-line); border-radius: var(--radius-card);
  padding: 52px 20px 24px; min-height: 190px; text-align: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 16px 34px rgba(0,0,0,.35);
}
.step-card:nth-child(1) { transform: rotate(-1.6deg); }
.step-card:nth-child(2) { transform: rotate(0.8deg) translateY(6px); }
.step-card:nth-child(3) { transform: rotate(1.8deg); }
/* Índice de esquina como carta de póker */
.step-card .idx {
  position: absolute; top: 12px; left: 14px;
  font-weight: 800; font-size: 1.05rem; line-height: 1.05; text-align: center;
}
.step-card .idx small { display: block; font-size: .95rem; }
.step-card .idx-b { top: auto; left: auto; bottom: 12px; right: 14px; transform: rotate(180deg); }
.step-card .idx.s1 { color: #1f4ea3; } /* V♦ azul del juego */
.step-card .idx.s2 { color: #a3201f; } /* R♠ rojo del juego */
.step-card .idx.s3 { color: #b8860b; } /* C★ dorado castigo */
.step-card h3 { margin: 0 0 .35rem; color: var(--naipe-ink); font-size: 1.18rem; }
.step-card p { margin: 0; font-size: .93rem; color: #4a4038; line-height: 1.5; }
.step-card .e { display: block; font-size: 1.7rem; margin-bottom: .5rem; }

/* ---------- Features ---------- */
.feature-list { list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 42em; }
.feature-list li { padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--line-2); color: var(--muted); }
.feature-list li:last-child { border-bottom: 0; }
.feature-list li strong { color: var(--ink); }
.feature-list li::before { content: '♠'; position: absolute; left: 0; top: 12px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: var(--felt); background: var(--gold); }
.picante-scale { margin: 1.6rem auto 0; max-width: 34em; }
.picante-scale .track { height: 12px; border-radius: 999px; background: var(--picante); }
.picante-scale .labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.82rem; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { max-width: 46em; margin: 1.8rem auto 0; }
.faq details { background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--radius); margin: 10px 0; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 15px 46px 15px 18px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-52%); font-size: 1.3rem; font-weight: 700; color: var(--gold-soft); transition: transform .2s ease; }
.faq details[open] summary::after { content: '–'; }
.faq details[open] summary { border-bottom: 1px solid var(--line-2); }
.faq .fa { padding: 4px 18px 14px; color: var(--muted); font-size: .95rem; }

/* ---------- CTA final ---------- */
.final-cta {
  text-align: center;
  background: linear-gradient(135deg, rgba(255,91,110,.18), rgba(240,194,75,.10));
  border: 1px solid rgba(240,194,75,.32); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem) 24px; margin-top: 1rem;
}
.final-cta h2 { margin-top: 0; }
.final-cta .store-buttons { margin-top: 1.4rem; }

/* ---------- Footer (duplicado de assets/styles.css — mantener en sincronía) ---------- */
.site-footer { margin-top: clamp(3rem, 8vw, 5rem); padding: 0 0 2.6rem; font-size: 0.92rem; color: var(--muted); }
.site-footer .fbar { height: 2px; background: var(--picante); opacity: .65; margin-bottom: 2rem; }
.site-footer .brand { font-size: 1.1rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0.9rem 0; }
.site-footer nav a { color: var(--muted); }
.site-footer nav a:hover { color: var(--gold); }
.legal-name { margin: 0.7rem 0 0.2rem; font-size: 0.82rem; color: var(--faint); }
.site-footer .eco { font-size: 0.82rem; color: var(--faint); }
.site-footer .eco a { color: var(--gold-soft); }
/* Enlace de marca al hub del ecosistema Createdby™ (footer + kicker del hero). */
.eco-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); transition: color .15s ease, border-color .15s ease; }
.eco-link:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.eco-link::after { content: " \2197"; font-size: .82em; opacity: .75; }
.site-footer a { overflow-wrap: anywhere; }

/* ---------- Hero simple (404) ---------- */
.hero { position: relative; text-align: center; padding: clamp(2.6rem, 8vh, 5rem) 24px clamp(2.2rem, 6vh, 4rem); }
.hero .lead { margin: 1.2rem auto 0; }
.hero .cta-row { justify-content: center; margin-top: 1.6rem; }
.hero .picante-band { width: min(300px, 66%); margin: 1.2rem auto 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .step-card { min-height: 0; padding-top: 46px; }
  .step-card:nth-child(2) { transform: rotate(-0.8deg); }
}
@media (max-width: 560px) {
  /* Grid de juegos: 2 columnas compactas (mitad de alto) en vez de 1 */
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game-card { flex-direction: column; gap: 8px; padding: 13px; }
  .site-header ul { gap: 14px; }
  .site-header ul a { font-size: 0.9rem; }
  .store-badge { min-height: 56px; }
  .store-badge .sb-txt strong { font-size: 1.18rem; }
  /* En la landing pagada, el header móvil = marca + Descargar (sin fugas ni 2ª fila) */
  .lp-home .site-header ul li:not(.cta-li) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .picante-band { animation: none; }
  .btn:hover, .store-badge:hover, a.game-card:hover { transform: none; }
}