/* ───────────────────────────────────────────────────────────────────────────
   La portada. Solo se carga en la página de inicio.

   Imagen a sangre bajo la cabecera, titular partido en dos esquinas, datos
   pequeños en los bordes y, al bajar, la cámara se acerca y aparece la frase.
   Es la gramática de las plantillas de scrolltide.co (NOPAL, Nordlys).

   Tres capas de seguridad:
   · Sin JavaScript: cabecera oscura sólida, primer cuadro quieto y la frase
     como un bloque normal debajo.
   · El fijado, la altura larga y la frase superpuesta cuelgan de
     `.cartel-viva`, que pone portada.js. Si el guion no llega, no queda una
     escena de 230 % de alto en la que no pasa nada.
   · Con «menos movimiento», portada.js no pone `.cartel-viva`.

   La imagen es generada (ver la nota en templates/inicio.html).
   ─────────────────────────────────────────────────────────────────────────── */

.con-portada {
  --cab: 69px;                          /* 68 de la fila + 1 del borde; portada.js lo mide */
  --crema-p: #F3EEE2;
  --noche: #08130E;
  --pad-x: clamp(20px, 3.2vw, 56px);
  --pad-y: clamp(18px, 3.4svh, 44px);
}

/* ── La cabecera sobre la imagen ─────────────────────────────────────────
   Base, solo con CSS: vidrio oscuro. Se lee sobre la imagen y también sobre
   el crema del resto de la página, así que no depende de ningún guion.
   Con portada.js, mientras se está sobre la imagen, se vuelve transparente
   (`.sobre`). El aviso verde de arriba se quita aquí: lo que dice —qué días
   se reparte— lo dice la portada con la fecha exacta. */
.con-portada .aviso-superior { display: none; }

.con-portada .cabecera {
  background: rgba(8, 19, 14, .86);
  border-bottom-color: rgba(243, 238, 226, .10);
  color: var(--crema-p);
  transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.con-portada .cabecera.sobre {
  background: transparent;
  border-bottom-color: rgba(243, 238, 226, .14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* La fila de la cabecera va al mismo borde que el titular, no en la caja de
   1200 px del resto del sitio: si no, el logotipo y «Del campo» quedan
   desalineados por cientos de píxeles. */
.con-portada .cabecera .contenedor { max-width: none; padding-inline: var(--pad-x); }
.con-portada .cabecera .logo { color: var(--crema-p); }
.con-portada .cabecera .nav a { color: rgba(243, 238, 226, .80); }
.con-portada .cabecera .nav a:hover,
.con-portada .cabecera .nav a.activo { background: rgba(243, 238, 226, .12); color: #fff; }
.con-portada .cabecera .buscador input {
  background: rgba(243, 238, 226, .08);
  border-color: rgba(243, 238, 226, .24);
  color: var(--crema-p);
}
.con-portada .cabecera .buscador input::placeholder { color: rgba(243, 238, 226, .66); }
.con-portada .cabecera .buscador input:focus {
  background: rgba(8, 19, 14, .7);
  border-color: rgba(243, 238, 226, .6);
  box-shadow: 0 0 0 3px rgba(243, 238, 226, .14);
}
.con-portada .cabecera .buscador .lupa,
.con-portada .cabecera .buscador .limpiar { color: rgba(243, 238, 226, .72); }
.con-portada .cabecera .icono-btn {
  background: rgba(243, 238, 226, .08);
  border-color: rgba(243, 238, 226, .24);
  color: var(--crema-p);
}
.con-portada .cabecera .icono-btn:hover { border-color: var(--crema-p); color: #fff; }
.con-portada .cabecera .contador { border-color: var(--noche); }
.con-portada .cabecera .nombre-cuenta { color: var(--crema-p); }

/* ── El escenario ───────────────────────────────────────────────────────── */
.cartel { position: relative; background: var(--noche); color: var(--crema-p); }
.con-portada .cartel { margin-top: calc(-1 * var(--cab)); }   /* la imagen sube bajo la cabecera */

.cartel-cuadro {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  container-type: size;                 /* el lienzo se mide contra esto */
  isolation: isolate;
}

/* El lienzo tiene la proporción exacta de la imagen y CUBRE el cuadro. Así
   los puntos, puestos en porcentaje de la imagen, caen siempre sobre el
   producto que señalan, sea cual sea la forma de la ventana. Con
   object-fit: cover a secas, el recorte movería la imagen y no los puntos. */
.cartel-lienzo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  translate: -50% -50%;
  transform-origin: 50% 56%;            /* el cajón: hacia ahí se acerca la cámara */
  will-change: transform;
}
@supports (width: 1cqh) {
  .cartel-lienzo { width: max(100cqw, 100cqh * 1.7797); height: auto; aspect-ratio: 1680 / 944; }
}
@media (max-aspect-ratio: 1/1) {
  @supports (width: 1cqh) {
    .cartel-lienzo { width: max(100cqw, 100cqh * .5619); aspect-ratio: 944 / 1680; }
  }
}
.cartel-lienzo picture,
.cartel-lienzo img { display: block; width: 100%; height: 100%; }
.cartel-lienzo img { object-fit: cover; }

/* Velo para que el texto se lea: oscuro arriba (cabecera y titular) y abajo
   (datos y botones), limpio en el centro, donde está el cajón. */
.cartel-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 19, 14, .70) 0%, rgba(8, 19, 14, .18) 26%, rgba(8, 19, 14, 0) 42%),
    linear-gradient(0deg, rgba(8, 19, 14, .78) 0%, rgba(8, 19, 14, .30) 24%, rgba(8, 19, 14, 0) 44%),
    radial-gradient(120% 90% at 50% 56%, rgba(8, 19, 14, 0) 55%, rgba(8, 19, 14, .45) 100%);
}
/* La sombra que cae sobre la imagen cuando entra la frase. Empieza en cero:
   no oculta nada si el guion no llega. */
.cartel-sombra {
  position: absolute;
  inset: 0;
  background: var(--noche);
  opacity: 0;
  pointer-events: none;
}

/* ── El texto sobre la imagen ──────────────────────────────────────────── */
.cartel-marco {
  position: absolute;
  inset: var(--cab) 0 0 0;
  padding: var(--pad-y) var(--pad-x);
  pointer-events: none;                 /* los hijos que se pulsan lo devuelven */
}
.cartel-marco a,
.cartel-marco button { pointer-events: auto; }

.cartel-titulo {
  position: absolute;
  inset: var(--pad-y) var(--pad-x);
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, min(9.4vw, 16.5svh), 11rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--crema-p);
  text-shadow: 0 2px 30px rgba(8, 19, 14, .35);
}
.cartel-titulo span { display: block; }
.pt-a, .pt-b { position: absolute; white-space: nowrap; will-change: transform, opacity; }
.pt-a { top: 0; left: -.04em; }
/* «a tu mesa.» se levanta lo justo para que el botón flotante de WhatsApp
   (abajo a la derecha, 54 px a 20 px del borde) quede debajo del punto y no
   encima de la última letra. */
.pt-b { right: -.02em; bottom: max(-.08em, 88px - var(--pad-y)); }
.pt-punto { display: inline !important; color: var(--brote); }

.cartel-sitio {
  position: absolute;
  top: calc(var(--pad-y) + .4rem);
  right: var(--pad-x);
  margin: 0;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 238, 226, .78);
}

.cartel-pie {
  position: absolute;
  left: var(--pad-x);
  bottom: var(--pad-y);
  width: min(440px, 40vw);
}
.cartel-reparto {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 15px 8px 12px;
  border-radius: var(--r-full);
  background: rgba(8, 19, 14, .52);
  border: 1px solid rgba(243, 238, 226, .18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(243, 238, 226, .86);
}
.cartel-reparto b { color: #fff; font-weight: 600; }
.luz {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--brote);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(140, 198, 63, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(140, 198, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(140, 198, 63, 0); }
}
.cartel-corte {
  margin: 9px 0 0 2px;
  font-size: 12.5px;
  color: rgba(243, 238, 226, .74);
}
.cartel-nota {
  margin: 18px 0 20px;
  max-width: 52ch;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(243, 238, 226, .82);
}
.cartel-botones { display: flex; flex-wrap: wrap; gap: 10px; }

.pbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.pbtn svg { width: 17px; height: 17px; transition: transform var(--transicion); }
.pbtn:hover svg { transform: translateX(3px); }
.pbtn-claro { background: var(--crema-p); color: #0E2A20; }
.pbtn-claro:hover { background: #fff; }
.pbtn-vidrio {
  background: rgba(243, 238, 226, .08);
  color: var(--crema-p);
  border: 1px solid rgba(243, 238, 226, .32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pbtn-vidrio:hover { background: rgba(243, 238, 226, .16); }
.cartel .pbtn:focus-visible,
.cartel .punto:focus-visible .punto-texto {
  outline: 2px solid var(--crema-p);
  outline-offset: 3px;
}

/* ── Los puntos: qué es cada cosa y cuánto vale ───────────────────────────
   El ancla mide cero y está clavada en el producto; la marca, la línea y la
   etiqueta cuelgan de ella hacia el lado vacío de la imagen. */
.punto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  color: var(--crema-p);
  text-decoration: none;
  z-index: 1;
}
.punto-marca {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid var(--crema-p);
  background: rgba(243, 238, 226, .22);
  box-shadow: 0 0 0 4px rgba(8, 19, 14, .25);
}
.punto-marca::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--crema-p);
}
.punto-linea {
  position: absolute;
  top: 0;
  width: 58px;
  height: 1px;
  background: rgba(243, 238, 226, .75);
}
.punto-izq .punto-linea { right: 10px; }
.punto-der .punto-linea { left: 10px; }
.punto-texto {
  position: absolute;
  top: 0;
  translate: 0 -50%;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: rgba(8, 19, 14, .55);
  border: 1px solid rgba(243, 238, 226, .2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(243, 238, 226, .84);
  transition: background-color var(--transicion), color var(--transicion);
}
.punto-texto b { color: #fff; font-weight: 600; margin-right: 4px; }
.punto-izq .punto-texto { right: 70px; }
.punto-der .punto-texto { left: 70px; }
.punto:hover .punto-texto { background: var(--crema-p); color: #0E2A20; }
.punto:hover .punto-texto b { color: #0E2A20; }

/* ── La frase ───────────────────────────────────────────────────────────
   Sin animación: un bloque oscuro debajo de la imagen. */
.cartel-frase {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: clamp(64px, 12svh, 120px) var(--pad-x);
  text-align: center;
  background: var(--noche);
}
.frase-ante {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brote-texto);
}
.frase {
  margin: 0;
  max-width: 16ch;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, min(5.6vw, 9.5svh), 5.6rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--crema-p);
}
.frase em { font-style: normal; color: var(--brote-texto); white-space: nowrap; }
.frase-pie {
  margin: 22px 0 30px;
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(243, 238, 226, .80);
}

/* ── Con animación (la clase la pone portada.js) ─────────────────────────── */
.cartel-viva { height: 230svh; }
.cartel-viva .cartel-fija {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}
.cartel-viva .cartel-cuadro { position: absolute; inset: 0; height: auto; min-height: 0; }
.cartel-viva .cartel-frase {
  position: absolute;
  inset: var(--cab) 0 0 0;
  align-content: center;
  padding-top: 0;
  padding-bottom: 0;
  background: none;
  opacity: 0;                           /* la saca portada.js; sin él no existe esta regla */
  pointer-events: none;
}
.cartel-viva .cartel-frase.visible { pointer-events: auto; }

/* ── Ventanas bajas y estrechas de escritorio ─────────────────────────────
   Los puntos necesitan sitio a los lados del cajón; si no lo hay, sobran. */
@media (max-width: 1099px), (max-height: 600px), (max-aspect-ratio: 1/1) {
  .punto { display: none; }
}

/* ── Teléfono y tableta vertical ─────────────────────────────────────────
   Imagen vertical: cielo arriba, cajón en medio, hojas abajo. El titular va
   en el cielo, escalonado; los datos y el botón, sobre las hojas. */
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .cartel-titulo {
    inset: var(--pad-y) var(--pad-x) auto;
    font-size: clamp(2.9rem, 15.5vw, 6rem);
    height: 2em;
  }
  .pt-a { left: -.03em; }
  .pt-b { top: .95em; bottom: auto; right: -.02em; }
  .cartel-sitio { display: none; }
  .cartel-pie { right: var(--pad-x); width: auto; bottom: calc(var(--pad-y) + env(safe-area-inset-bottom, 0px)); }
  .cartel-nota { max-width: 32ch; font-size: 11.5px; margin: 14px 0 16px; }
  .cartel-corte { font-size: 12px; }
  .frase { max-width: 13ch; }
}
@media (max-width: 479px) {
  .pbtn-vidrio { display: none; }       /* el botón flotante de WhatsApp necesita la esquina */
  .cartel-reparto { font-size: 11px; letter-spacing: .06em; padding: 7px 13px 7px 11px; }
}
@media (max-width: 899px) and (max-height: 700px), (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .cartel-nota { display: none; }
  .cartel-botones { margin-top: 14px; }
}

/* ── Menos movimiento ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .luz { animation: none; }
  .pbtn, .pbtn svg, .con-portada .cabecera { transition: none; }
}