/* ============================================================
   bplay argentina · app — base
   Concepto: "casino de fieltro" — sukno verde, esmeralda Bplay,
   hilo de oro, marfil. Léxico bespoke (NO rejilla heredada).
   Tokens propios de este proyecto · nada de utilidades genéricas.
   ============================================================ */

:root {
  /* — paleta extraída de los assets (fieltro de casino + esmeralda) — */
  --fieltro-hondo: #06130c;   /* fondo más profundo */
  --fieltro:       #0a1d13;   /* fondo base */
  --fieltro-alto:  #102a1b;   /* superficie elevada */
  --fieltro-humo:  #16331f;   /* superficie 2 */
  --linde:         #21402d;   /* hairline verde */
  --linde-suave:   rgba(243,239,226,.10);

  --esmeralda:      #11b46e;  /* acento principal Bplay */
  --esmeralda-viva: #28e08c;  /* brillo */
  --esmeralda-honda:#0a774a;  /* sombra del acento */

  --oro:        #c8a24a;      /* hilo de oro / detalle lujo */
  --oro-tenue:  rgba(200,162,74,.38);

  --marfil:       #f3efe2;          /* texto principal */
  --marfil-medio: rgba(243,239,226,.70);
  --marfil-tenue: rgba(243,239,226,.42);

  /* — tipografías — */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* — medidas fluidas (clamp, sin vw+vh+vmin) — */
  --medida:  78rem;                          /* ancho de lectura máx */
  --canal:   clamp(1.15rem, 5.2vw, 5rem);    /* margen de página */
  --aire-xs: clamp(.5rem, 1vw, .85rem);
  --aire-s:  clamp(.85rem, 1.6vw, 1.4rem);
  --aire-m:  clamp(1.4rem, 3vw, 2.6rem);
  --aire-l:  clamp(2.6rem, 6vw, 5.5rem);
  --aire-xl: clamp(4rem, 10vw, 9rem);        /* respiro entre capítulos */

  /* — escala tipográfica fluida — */
  --t-folio: .74rem;
  --t-micro: .82rem;
  --t-cuerpo: clamp(1rem, .55vw + .9rem, 1.14rem);
  --t-guia:  clamp(1.15rem, 1vw + .95rem, 1.42rem);   /* lead */
  --t-h3:    clamp(1.35rem, 1.4vw + 1rem, 1.9rem);
  --t-h2:    clamp(2rem, 3.4vw + 1rem, 3.4rem);
  --t-h1:    clamp(2.7rem, 6vw + 1rem, 5.4rem);

  --radio: 14px;
  --sombra-mesa: 0 30px 70px -30px rgba(0,0,0,.75);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--marfil);
  background: var(--fieltro-hondo);
  /* sukno: dos vetas de luz esmeralda, asimétricas a propósito */
  background-image:
    radial-gradient(120% 80% at 82% -10%, rgba(17,180,110,.16), transparent 55%),
    radial-gradient(90% 70% at -5% 18%, rgba(10,119,74,.14), transparent 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--esmeralda); color: var(--fieltro-hondo); }

/* envoltura de lectura — asimétrica por diseño, no centrada rígida */
.lienzo {
  width: 100%;
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* folio editorial — Nº de capítulo, vuela al margen */
.folio {
  font-family: var(--sans);
  font-size: var(--t-folio);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.folio::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: var(--oro-tenue);
}

/* — ficha: CTA principal, cápsula esmeralda (chip de casino) — */
.ficha {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--fieltro-hondo);
  background: linear-gradient(150deg, var(--esmeralda-viva), var(--esmeralda) 65%);
  padding: 1.05em 1.7em;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(40,224,140,.4),
              0 14px 30px -12px rgba(17,180,110,.7);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ficha:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(40,224,140,.6),
              0 20px 40px -12px rgba(17,180,110,.85);
}
.ficha__pico { font-size: 1.1em; line-height: 0; }

/* — canto: CTA secundario, contorno con hilo de oro — */
.canto {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--marfil);
  background: transparent;
  padding: 1.05em 1.6em;
  border: 1px solid var(--oro-tenue);
  border-radius: 999px;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.canto:hover { border-color: var(--oro); background: rgba(200,162,74,.08); }

/* aparición tranquila — un solo gesto, sin cascada ni stagger */
@media (prefers-reduced-motion: no-preference) {
  [data-surge] { opacity: 0; transform: translateY(14px); animation: surge .7s ease forwards; }
  @keyframes surge { to { opacity: 1; transform: none; } }
}

@media (max-width: 720px) {
  body { background-attachment: scroll; }
  .ficha, .canto { width: 100%; justify-content: center; padding-block: 1.15em; }
}