/* La Novela de las 13 · página del kit · mismo mundo que la guía ("Revista de TV") */
@import url("fonts/fonts.css");

:root {
  --rojo: #e3161c;
  --rojo-hondo: #b80f14;
  --amarillo: #ffe100;
  --tinta: #111;
  --tinta-2: #333;
  --gris: #5b5b5b;
  --filete: #d4d0c8;
  --papel: #fff;
  --codigo: #f3f1ec;
  --margen: clamp(18px, 4.5vw, 56px);
  --ancho: 1180px;
  --salida: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-color: var(--rojo) var(--papel); }
body {
  margin: 0;
  font: 400 clamp(17px, 1.05vw + 12px, 19px)/1.55 "Source Serif 4", Georgia, serif;
  font-optical-sizing: auto;
  color: var(--tinta);
  background: var(--papel);
  text-rendering: optimizeLegibility;
  caret-color: var(--rojo);
}
::selection { background: var(--amarillo); color: var(--tinta); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--tinta); }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
b, strong { font-weight: 600; }
code { font: 400 max(.82em, 14px)/1.4 "JetBrains Mono", monospace; background: var(--codigo); padding: .1em .3em; }

.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 20;
  padding: 10px 14px; background: var(--tinta); color: #fff;
  font: 800 16px/1 "Saira Condensed", sans-serif; text-transform: uppercase; text-decoration: none;
}
.saltar:focus { top: 8px; }

/* ---------- voz de revista ---------- */
.btn, .cabezal, .h2r { font-family: "Saira Condensed", sans-serif; text-transform: uppercase; }
.marca {
  font: 900 clamp(30px, 4.2vw, 46px)/.82 "Saira Condensed", sans-serif;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--rojo);
  text-decoration: none;
}

/* ---------- cabezal ---------- */
.cabezal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  background: var(--papel);
  border-bottom: 6px solid var(--tinta);
  position: sticky;
  top: 0;
  z-index: 5;
}
.cabezal nav { display: flex; gap: 10px; align-items: center; }

/* ---------- botones: bloques planos, esquina viva ---------- */
.btn {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  padding: .55em .9em .5em;
  font-weight: 800;
  font-size: clamp(16px, 1.1vw + 10px, 20px);
  line-height: 1;
  letter-spacing: .03em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .18s var(--salida), color .18s var(--salida);
}
.btn-comprar { background: var(--rojo); color: #fff; }
/* el amarillo chico sobre rojo no llega a contraste: en el botón el precio va en blanco y más negro */
.btn-comprar b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.btn-comprar:hover { background: var(--rojo-hondo); }
.btn-guia { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 3px var(--tinta); }
.btn-guia:hover { background: var(--amarillo); }
.btn-chico { font-size: 15px; padding: .5em .7em .45em; white-space: nowrap; }

/* los dos de pago: hoja blanca sobre el rojo; el amarillo queda para el precio */
.pagos { display: grid; gap: 10px; }
.btn-pagar {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 12px 16px 11px;
  background: var(--papel);
  color: var(--tinta);
  font-size: clamp(22px, 1vw + 16px, 26px);
  font-weight: 900;
  line-height: .95;
}
.btn-pagar span { font-size: 14px; font-weight: 700; letter-spacing: .05em; color: var(--tinta-2); }
.btn-pagar:hover { background: var(--amarillo); }
.btn-pagar:focus-visible { outline-color: var(--amarillo); }
/* pendiente: el bloque queda sin llenar, solo el contorno, hasta que estén las cuentas */
.btn-pagar[aria-disabled="true"],
.btn-pagar[aria-disabled="true"]:hover { cursor: not-allowed; background: transparent; color: #fff; box-shadow: inset 0 0 0 3px #fff; }
.btn-pagar[aria-disabled="true"] span { color: #fff; }

/* ---------- bloque de horario (firma del sistema) ---------- */
.horario {
  display: inline-block;
  padding: 6px 12px 5px;
  background: var(--rojo);
  color: #fff;
  font: 800 13px/1 "Saira Condensed", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.horario b { margin-right: 6px; font-weight: 900; font-size: 19px; letter-spacing: .02em; color: var(--amarillo); font-variant-numeric: tabular-nums; }

/* ---------- la nota mano a mano ---------- */
.nota {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 52px) var(--margen) 0;
  display: grid;
  grid-template-columns: 1fr minmax(290px, 350px);
  gap: 0 clamp(28px, 4vw, 64px);
  align-items: start;
}
.cita { grid-column: 1; margin: 0; }
.cita blockquote { margin: 0; }
.cita blockquote p {
  font: 900 clamp(48px, 7vw, 96px)/.95 "Saira Condensed", sans-serif;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--rojo);
}
.cita figcaption {
  margin-top: 16px;
  max-width: 50ch;
  font-style: italic;
  font-size: clamp(18px, 1.1vw + 12px, 22px);
  color: var(--tinta-2);
}
.cita figcaption b { font-style: normal; font-weight: 600; color: var(--tinta); }

/* la ficha roja: el recuadro de compra de la revista */
.ficha-roja {
  grid-column: 2;
  grid-row: 1 / span 3;
  background: var(--rojo);
  color: #fff;
  padding: 18px 22px 20px;
}
/* fija mientras se lee, solo si la pantalla es lo bastante alta para que entre entera */
@media (min-width: 861px) and (min-height: 860px) { .ficha-roja { position: sticky; top: 96px; } }
.ficha-roja h2 { font: 900 28px/.95 "Saira Condensed", sans-serif; text-transform: uppercase; }
.ficha-roja .precio { margin-top: 10px; font: 900 64px/.9 "Saira Condensed", sans-serif; color: var(--amarillo); font-variant-numeric: tabular-nums; }
.ficha-roja .precio small { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: .05em; color: #fff; text-transform: uppercase; }
.ficha-roja ul { list-style: none; margin: 14px 0 16px; padding: 0; border-top: 4px solid #fff; font-size: 16px; line-height: 1.3; }
.ficha-roja li { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.ficha-roja li b { font: 800 16px/1 "Saira Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.gratis { display: block; margin-top: 14px; font-size: 16px; color: #fff; text-decoration-color: var(--amarillo); }
.gratis:hover { text-decoration-color: #fff; }
.ficha-roja a:focus-visible, .cierre a:focus-visible { outline-color: var(--amarillo); }

/* las preguntas */
.preguntas { grid-column: 1; margin-top: clamp(34px, 4vw, 56px); border-top: 8px solid var(--tinta); }
.pr { padding: 22px 0 26px; border-bottom: 1px solid var(--filete); max-width: 68ch; }
.pr h3 {
  font: 800 clamp(22px, 1.6vw + 12px, 30px)/1 "Saira Condensed", sans-serif;
  text-transform: uppercase;
  color: var(--tinta);
}
.pr h3 + * { margin-top: 12px; }
.pr p + p, .pr ul + p { margin-top: 10px; }

.lista { margin: 0; padding: 0; list-style: none; }
.lista li { position: relative; padding-left: 20px; }
.lista li + li { margin-top: 8px; }
.lista li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--rojo); }

.lista-kit { list-style: none; margin: 16px 0 0; padding: 0; border-top: 4px solid var(--tinta); }
.lista-kit li {
  display: grid;
  grid-template-columns: minmax(128px, 30%) 1fr;
  gap: 4px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--filete);
  font-size: .94em;
}
.lista-kit .q { font: 800 clamp(18px, 1vw + 12px, 22px)/1 "Saira Condensed", sans-serif; text-transform: uppercase; }
.lista-kit .q code { display: block; margin-top: 6px; font: 400 14px/1.3 "JetBrains Mono", monospace; text-transform: none; background: none; padding: 0; color: var(--gris); }
@media (max-width: 560px) { .lista-kit li { grid-template-columns: 1fr; } }

.foto-nota { margin: 30px 0 4px; position: relative; background: var(--tinta); }
.foto-nota img { width: 100%; height: clamp(240px, 32vw, 420px); object-fit: cover; object-position: 50% 28%; }
.foto-nota-alta img { object-position: 50% 32%; }
.foto-nota .horario { position: absolute; left: 0; bottom: 0; }

/* ---------- el cierre: la contratapa ---------- */
.cierre {
  position: relative;
  margin: clamp(56px, 7vw, 96px) 0 0;
  background: var(--tinta);
  min-height: clamp(460px, 52vw, 640px);
  display: grid;
  align-items: end;
}
.cierre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cierre-bloque {
  position: relative;
  width: min(100% - 2 * var(--margen), 520px);
  margin: 0 0 var(--margen) max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  background: var(--rojo);
  color: #fff;
  padding: 22px 22px 24px;
}
.cierre h2 { font: 900 clamp(44px, 5vw, 68px)/.9 "Saira Condensed", sans-serif; text-transform: uppercase; }
.cierre-bloque > p { margin: 12px 0 18px; font-size: 18px; }

/* pie */
.pie {
  padding: 28px var(--margen) 36px;
  background: var(--papel);
  border-top: 6px solid var(--tinta);
  font-size: 15px;
  color: var(--tinta-2);
}
.pie .cuenta { font: 900 clamp(26px, 3vw, 34px)/1 "Saira Condensed", sans-serif; color: var(--rojo); }
.pie .cuenta a { text-decoration: none; }
.pie .cuenta a:hover { text-decoration: underline; text-decoration-color: var(--tinta); }
.pie p + p { margin-top: 8px; max-width: 70ch; }

/* ---------- la tira de compra (celular) ---------- */
.tira {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
  background: var(--rojo);
  color: #fff;
  border-top: 4px solid var(--tinta);
  font: 800 18px/1 "Saira Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .42s var(--salida), visibility 0s linear .42s;
}
.tira b { color: var(--amarillo); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; margin-left: 4px; }
.tira.visible { transform: none; visibility: visible; transition: transform .42s var(--salida), visibility 0s; }
.btn-tira { background: var(--papel); color: var(--tinta); font-size: 18px; }
.btn-tira:hover { background: var(--amarillo); }
.btn-tira:focus-visible { outline-color: var(--amarillo); }

.pendiente:focus { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.pendiente {
  margin-top: 0;
  padding: 7px 10px 6px;
  background: var(--tinta);
  color: #fff;
  font: 700 13px/1.25 "Saira Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .nota { grid-template-columns: 1fr; }
  .ficha-roja { grid-column: 1; grid-row: auto; position: static; margin-top: 24px; }
  .preguntas, .cita { grid-column: 1; }
}
@media (min-width: 861px) {
  .tira { display: none; }
  .cierre {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    align-items: end;
    padding: 0 max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  }
  .cierre > img { position: static; grid-column: 2; grid-row: 1; height: clamp(520px, 46vw, 640px); }
  .cierre-bloque { grid-column: 1; grid-row: 1; align-self: stretch; width: auto; margin: 0 -48px 0 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 40px 32px; }
}
@media (max-width: 560px) {
  .cierre { min-height: 0; padding-top: 300px; }
  .cierre > img { object-position: 50% 22%; }
  .cierre-bloque { width: 100%; margin: 0; }
}
@media (max-width: 420px) {
  .cabezal { padding-top: 10px; padding-bottom: 10px; }
  .btn-chico { font-size: 14px; padding: .5em .55em .45em; }
  .ficha-roja { padding: 18px 18px 20px; }
  .ficha-roja .precio { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}