/* Fichas Criollas — sistema de utilidades. Tokens + clases componibles. */

:root {
  --ink: #18181b;
  --gris-1: #3f3f46;
  --gris-2: #71717a;
  --linea: #e4e4e7;
  --panel: #f4f4f5;
  --fondo: #fafafa;
  --blanco: #ffffff;
  --acento: #d61f26;
  --acento-oscuro: #a3151b;
  --acento-suave: #fdecec;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --ancho: 1120px;
  --radio: 2px;
  --resorte: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%2318181b' fill-opacity='0.025'%3E%3Cpath d='M40 18c-5 0-8 4-8 8 0 6 8 12 8 12s8-6 8-12c0-4-3-8-8-8zM36 40h8l-4-8z'/%3E%3Crect x='108' y='24' width='20' height='20' rx='4'/%3E%3Ccircle cx='114' cy='30' r='2.4' fill='%23fafafa'/%3E%3Ccircle cx='122' cy='38' r='2.4' fill='%23fafafa'/%3E%3Ccircle cx='118' cy='34' r='2.4' fill='%23fafafa'/%3E%3Cpath d='M28 108c0-5 4-9 9-9 3 0 5 1 7 3 2-2 4-3 7-3 5 0 9 4 9 9 0 8-16 17-16 17s-16-9-16-17z' transform='rotate(180 44 116)'/%3E%3Ccircle cx='120' cy='120' r='11' fill='none' stroke='%2318181b' stroke-opacity='0.03' stroke-width='4' stroke-dasharray='5 4'/%3E%3C/g%3E%3C/svg%3E");
  padding-bottom: 44px; /* espacio para la barra +18 fija */
}

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

p { margin: 0; max-width: 68ch; }

a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover { color: var(--acento-oscuro); }

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

strong { font-weight: 700; }

/* ---------- composición ---------- */

.wrap {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.wrap--angosto { max-width: 860px; }

.stack > * + * { margin-top: var(--s-4); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.cluster--entre { justify-content: space-between; }

.grid { display: grid; gap: var(--s-5); }

@media (min-width: 720px) {
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-marco { grid-template-columns: 5fr 7fr; align-items: center; }
}

.seccion { padding-block: var(--s-8); }
.seccion--panel { background: var(--panel); }
.seccion--tinta { background: var(--ink); color: var(--blanco); }
.seccion--tinta p { color: #d4d4d8; }
.seccion--tinta h2, .seccion--tinta h3 { color: var(--blanco); }

/* ---------- etiquetas de sección (WILDCARD: versalitas) ---------- */

.label {
  display: block;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--acento);
}

.label--gris { color: var(--gris-2); }

/* regla corta de acento entre secciones */
.rule {
  width: 56px;
  height: 3px;
  background: var(--acento);
  border: 0;
  margin: 0;
}

.rule--centro { margin-inline: auto; }

/* ---------- tarjetas ---------- */

.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  position: relative;
  padding: var(--s-5);
}

.card--tinta {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--blanco);
}

.card--tinta p { color: #d4d4d8; }

.corner {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--ink);
  color: var(--blanco);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-bottom-left-radius: var(--radio);
}

.corner--rojo { background: var(--acento); }

/* ---------- distintivos (pastillas de relleno pleno) ---------- */

.badge {
  display: inline-block;
  background: var(--panel);
  color: var(--gris-1);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--rojo { background: var(--acento); color: var(--blanco); }
.badge--tinta { background: var(--ink); color: var(--blanco); }
.badge--suave { background: var(--acento-suave); color: var(--acento-oscuro); }

/* ---------- botones cápsula con etiqueta en mayúsculas ---------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--acento);
  color: var(--blanco);
  transition: var(--resorte), background-color 0.15s ease;
}

.btn:hover { background: var(--acento-oscuro); color: var(--blanco); }
.btn:active { transform: scale(0.94); }

.btn--sec {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--sec:hover { background: var(--ink); color: var(--blanco); }

.btn--claro {
  background: var(--blanco);
  color: var(--ink);
}

.btn--claro:hover { background: var(--panel); color: var(--ink); }

.btn--mini { padding: 9px 20px; font-size: 0.7rem; }

/* ---------- cabecera con regla inferior y línea de miga ---------- */

.cabecera {
  background: var(--blanco);
  border-bottom: 2px solid var(--ink);
}

.cabecera__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.marca:hover { color: var(--ink); }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.menu a:hover { color: var(--acento); }

.menu a[aria-current="page"] {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.miga {
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  font-size: 0.78rem;
  color: var(--gris-2);
}

.miga .wrap {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  padding-block: 6px;
}

.miga a { color: var(--gris-1); }

/* ---------- listas con sangría francesa, sin viñeta ---------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista li {
  padding-left: 1.4rem;
  text-indent: -1.4rem;
  max-width: 68ch;
}

.lista li + li { margin-top: var(--s-3); }

.lista li::before {
  content: "— ";
  color: var(--acento);
  font-weight: 700;
}

.lista--num { counter-reset: item; }

.lista--num li::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero) " ";
  font-variant-numeric: tabular-nums;
}

/* ---------- tabla cebra sin reglas verticales ---------- */

.tabla-marco { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--linea);
  font-size: 0.92rem;
}

.tabla th {
  text-align: left;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gris-2);
  background: var(--blanco);
  padding: 12px 16px;
  border-bottom: 2px solid var(--ink);
}

.tabla td {
  padding: 12px 16px;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

.tabla tbody tr:nth-child(even) { background: var(--panel); }

.tabla td:first-child { font-weight: 700; }

/* ---------- línea de tiempo compacta ---------- */

.tiempo {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 720px) {
  .tiempo { grid-template-columns: repeat(var(--pasos, 4), 1fr); }
}

.tiempo li {
  counter-increment: paso;
  position: relative;
  padding-top: var(--s-6);
}

.tiempo li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--blanco);
  background: var(--acento);
  border-radius: 999px;
  padding: 2px 10px;
  font-variant-numeric: tabular-nums;
}

.tiempo li::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 52px;
  right: 8px;
  height: 2px;
  background: var(--linea);
}

.tiempo li:last-child::after { display: none; }

@media (max-width: 719px) {
  .tiempo li::after { display: none; }
}

.tiempo h3, .tiempo h4 { font-size: 0.98rem; margin-bottom: var(--s-2); }
.tiempo p { font-size: 0.9rem; color: var(--gris-1); }

/* ---------- recortes fotográficos sobre el fondo ---------- */

.cutout {
  mix-blend-mode: multiply;
  filter: contrast(1.02);
}

.cutout--suelto {
  max-width: 420px;
  margin-inline: auto;
}

/* ---------- duelos cara a cara ---------- */

.duelo__cabeza {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--s-4);
}

.duelo__vs {
  font-weight: 900;
  color: var(--acento);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.duelo__logo { height: 30px; width: auto; object-fit: contain; justify-self: start; }
.duelo__logo--der { justify-self: end; }

/* ---------- FAQ a dos columnas ---------- */

.faq-grupo h3 {
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--acento);
  margin-bottom: var(--s-4);
}

.faq-item + .faq-item { margin-top: var(--s-5); }
.faq-item h4 { margin-bottom: var(--s-2); }
.faq-item p { font-size: 0.94rem; color: var(--gris-1); }

/* ---------- operadores ---------- */

.op-card { padding: 0; overflow: hidden; }

.op-card__cuerpo {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5);
}

@media (min-width: 860px) {
  .op-card__cuerpo { grid-template-columns: 1fr 260px; }
  .op-card__accion {
    border-left: 1px solid var(--linea);
    padding-left: var(--s-5);
  }
}

.op-card__logo {
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
}

.op-card__accion {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  justify-content: center;
}

.veredicto {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.veredicto small {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gris-2);
  font-weight: 700;
}

.ficha-licencia {
  font-size: 0.8rem;
  color: var(--gris-1);
  background: var(--panel);
  border-radius: var(--radio);
  padding: var(--s-3) var(--s-4);
}

.ficha-licencia dt {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--gris-2);
  margin-top: var(--s-2);
}

.ficha-licencia dt:first-child { margin-top: 0; }
.ficha-licencia dd { margin: 0; }

.nota-legal { font-size: 0.74rem; color: var(--gris-2); }

/* ---------- solape de secciones ---------- */

.solapa { margin-top: -128px; box-shadow: 0 12px 32px rgba(24, 24, 27, 0.1); }

/* ---------- barra fija +18 ---------- */

.barra-edad {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--ink);
  color: #d4d4d8;
  font-size: 0.74rem;
  line-height: 1.4;
  padding: 6px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.barra-edad strong {
  color: var(--blanco);
  background: var(--acento);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.barra-edad a { color: var(--blanco); }

/* ---------- aviso de cookies ---------- */

.cookies {
  position: fixed;
  bottom: 52px;
  left: 16px;
  right: 16px;
  z-index: 70;
  max-width: 520px;
  margin-inline: auto;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  box-shadow: 0 8px 28px rgba(24, 24, 27, 0.16);
  padding: var(--s-4) var(--s-5);
  display: none;
}

.cookies.visible { display: block; }

.cookies p { font-size: 0.82rem; color: var(--gris-1); }

/* ---------- volver arriba ---------- */

.arriba {
  position: fixed;
  right: 20px;
  bottom: 60px;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--blanco);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: var(--resorte);
}

.arriba.visible { display: flex; }
.arriba:hover { background: var(--ink); color: var(--blanco); }
.arriba:active { transform: scale(0.9); }

/* ---------- pie editorial ---------- */

.pie {
  background: var(--ink);
  color: #d4d4d8;
  padding-block: var(--s-8) var(--s-6);
  font-size: 0.88rem;
}

.pie a { color: var(--blanco); }
.pie h3, .pie h4 { color: var(--blanco); }

.pie__rejilla {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 860px) {
  .pie__rejilla { grid-template-columns: 4fr 2fr 2fr 3fr; }
}

.pie__declaracion { font-size: 0.86rem; color: #a1a1aa; max-width: 40ch; }

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie ul li + li { margin-top: var(--s-2); }

.pie__titulo {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #a1a1aa;
  font-weight: 700;
  margin-bottom: var(--s-3);
}

.pie__seguro {
  border: 1px solid #3f3f46;
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: var(--s-5);
  margin-top: var(--s-7);
}

.pie__legales {
  border-top: 1px solid #3f3f46;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  font-size: 0.76rem;
  color: #a1a1aa;
}

.pie details {
  border-bottom: 1px solid #3f3f46;
  padding-block: var(--s-3);
}

.pie details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--blanco);
  font-size: 0.86rem;
}

.pie details[open] summary { color: var(--acento); }

.pie details .stack-2 {
  margin-top: var(--s-3);
  font-size: 0.82rem;
  color: #a1a1aa;
}

.pie details p { max-width: 75ch; color: #a1a1aa; }

/* ---------- ayudas ---------- */

.mini { font-size: 0.82rem; color: var(--gris-2); }
.medida p, p.medida { max-width: 68ch; }
.centrado { text-align: center; }
.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .arriba { transition: none; }
  .btn:active, .arriba:active { transform: none; }
}

@media print {
  .barra-edad, .cookies, .arriba, .cabecera, .miga { display: none !important; }
}