/* parimatch-arg.ar — dark editorial review theme. Navy base, coral verdicts, serif headlines. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/fraunces-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/karla-var.woff2') format('woff2');
}

:root {
  --bg: #0f172a;
  --bg-raised: #1e293b;
  --bg-deep: #0b1222;
  --accent: #fb7185;
  --accent-strong: #f43f5e;
  --accent-soft: rgba(251, 113, 133, 0.14);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --max: 1100px;
  --copy: 72ch;
  --radius: 8px;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  color: #f8fafc;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 3rem 0 1rem; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin: 2rem 0 0.75rem; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Top bar (18+ / RG) ---------- */

.barra-rg {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.45rem 0;
}

.barra-rg .wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sello-18 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.72rem;
}

.barra-rg a { color: var(--text-muted); }
.barra-rg a:hover { color: var(--accent); }

/* ---------- Header / nav ---------- */

.cabecera {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.cabecera .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: #f8fafc;
  text-decoration: none;
}

.logo-mark img { border-radius: 6px; }

nav.principal { margin-left: auto; }

ol.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

ol.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

ol.nav-links a:hover { color: var(--accent); }

ol.nav-links li.nav-conv a {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
}

ol.nav-links li.nav-conv a:hover {
  background: var(--accent);
  color: var(--bg);
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 3.5rem 0 3rem;
}

.hero .wrap { max-width: 880px; }

.hero p { color: var(--text-muted); font-size: 1.06rem; max-width: var(--copy); }

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.boton {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.7rem;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}

.boton-lleno {
  background: var(--accent);
  color: #0f172a;
}

.boton-lleno:hover { background: var(--accent-strong); color: #0f172a; }

.boton-borde {
  border: 2px solid var(--accent);
  color: var(--accent);
}

.boton-borde:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- Main content ---------- */

main.contenido { padding: 2.5rem 0 4rem; }

main.contenido .wrap { max-width: 880px; }

main.contenido p, main.contenido ul, main.contenido ol { max-width: var(--copy); }

main.contenido section { margin-bottom: 1rem; }

/* ---------- Tables ---------- */

.tabla-scroll { overflow-x: auto; margin: 1.5rem 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

caption {
  caption-side: top;
  text-align: left;
  font-family: var(--serif);
  font-weight: 600;
  color: #f8fafc;
  padding: 0 0 0.6rem;
  font-size: 1.05rem;
}

th, td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--bg-deep);
  color: var(--accent);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

tbody tr:last-child td { border-bottom: none; }

.tabla-veredicto thead th { border-bottom: 2px solid var(--accent); }
.tabla-veredicto tbody th, .tabla-veredicto td:first-child {
  color: #f8fafc;
  font-weight: 700;
  border-left: 3px solid var(--accent);
}

/* ---------- Payment icons inline row ---------- */

.fila-pagos {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1.25rem 0;
}

.fila-pagos img {
  height: 34px;
  width: auto;
  background: #f8fafc;
  border-radius: 6px;
  padding: 4px 10px;
}

/* ---------- RG section ---------- */

#juego-responsable {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem 1.75rem;
  margin: 3rem 0;
}

#juego-responsable h2 { margin-top: 0.25rem; }

/* ---------- FAQ ---------- */

.faq details {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0.7rem 0;
  padding: 0.25rem 1.15rem;
}

.faq summary {
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: #f8fafc;
  padding: 0.7rem 0;
  list-style-position: outside;
}

.faq summary:hover { color: var(--accent); }

.faq details[open] { border-color: var(--accent); }

.faq details p { margin: 0.25rem 0 1rem; color: var(--text); }

/* ---------- CTA band ---------- */

.banda-cta {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 3rem 0 1rem;
  text-align: center;
}

.banda-cta p { margin: 0 auto 1.2rem; max-width: 60ch; }

/* ---------- Footer ---------- */

footer.pie {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 2rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pie-columnas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.pie h2 {
  font-size: 0.85rem;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin: 0.4rem 0; }
.pie a { color: var(--text-muted); }
.pie a:hover { color: var(--accent); }

.footer-payments {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.footer-payments .pay-badge {
  display: inline-flex;
  background: #f8fafc;
  border-radius: 6px;
  padding: 4px 10px;
}

.footer-payments img { height: 26px; width: auto; display: block; }

.pie-legal { font-size: 0.8rem; max-width: none; }

/* ---------- Breadcrumbs ---------- */

.migas {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.migas ol { list-style: none; display: flex; gap: 0.5rem; margin: 0; padding: 0; flex-wrap: wrap; }
.migas li + li::before { content: '›'; margin-right: 0.5rem; color: var(--border); }

/* ---------- Legal pages ---------- */

.legal-fecha { color: var(--text-muted); font-size: 0.9rem; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .pie-columnas { grid-template-columns: 1fr 1fr; }
  .cabecera .wrap { flex-wrap: wrap; gap: 0.75rem; }
  nav.principal { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .pie-columnas { grid-template-columns: 1fr; }
  ol.nav-links { gap: 0.9rem; }
  .hero { padding: 2.5rem 0 2rem; }
  table { min-width: 560px; }
}

/* Capturas de pantalla del producto */
.muestra{margin:2rem 0}
.muestra img{display:block;width:100%;height:auto;border:1px solid var(--line,rgba(128,128,128,.32));border-radius:var(--radius,8px)}
.muestra figcaption{margin-top:.55rem;font-size:.85rem;line-height:1.45;opacity:.72}
.muestra-fila{display:flex;flex-wrap:wrap;gap:1.1rem;margin:2rem 0}
.muestra-fila .muestra{margin:0;flex:0 1 258px;max-width:258px}