/* =========================================================================
   LOS AMIGOS DEL FÚTBOL — Sistema de diseño
   Dirección: "revista deportiva de barrio impresa esta mañana en Lagos de Moreno".
   Papel cálido, tinta roja con disciplina de titular, bronce-medalla SAGRADO
   (solo en el 100 y en el Salón). Mobile-first. 100% vanilla, sin CDNs.
   Fuente display autoalojada: Oswald (SIL OFL) — solo titulares/dorsales/ratings.
   ========================================================================= */

/* ---- Fuente display autoalojada (Oswald, SIL OFL) — subset latino ---- */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/oswald-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/oswald-700.woff2") format("woff2");
}

:root {
  /* --- Paleta cálida (papel, no pantalla clínica) --- */
  --bg:        #f4f1ee;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f6f2ee;
  --line:      #e7ded6;   /* hueso cálido, no gris-azul */
  --text:      #181311;
  --muted:     #6b5d54;   /* cálido, ~5.6:1 sobre blanco (AA) */
  --ink:       #14100e;   /* negro CÁLIDO: header / barras */

  /* Dos tintas con oficios distintos */
  --gold:      #c40000;   /* ROJO = energía/actualidad/acción (nombre histórico) */
  --gold-2:    #9b0000;
  --gold-rgb:  196,0,0;   /* el mismo acento en formato r,g,b (para los rgba) */
  --rojo-hero: #e84545;   /* la palabra destacada de los títulos del carrusel */
  --medal:     #c79a3e;   /* BRONCE = consagración (solo 100 e Inmortales) */
  --medal-2:   #9c6f1f;
  --medal-ink: #2a1d05;

  /* Estados afinados a la temperatura */
  --green:     #2f7d4e;   /* cancha */
  --red:       #b3261e;   /* error ≠ rojo de marca */
  --blue:      #2f6f8f;   /* pizarra (mata el azul Bootstrap) */

  /* Escala tipográfica (Major Third 1.25, anclada en 16px) */
  --fs-300: 12.8px;
  --fs-400: 16px;
  --fs-500: 20px;
  --fs-600: 25px;
  --fs-700: 31.25px;
  --fs-800: 39px;
  --fs-900: 48.8px;

  /* Espaciado base-4 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Radios concéntricos */
  --r-xs: 7px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  /* Elevación cálida de doble capa (sombra tintada de tierra, no negra) */
  --e1: 0 1px 2px rgba(43,24,14,.10), 0 1px 1px rgba(43,24,14,.05);
  --e2: 0 2px 4px rgba(43,24,14,.07), 0 4px 10px rgba(43,24,14,.09);
  --e3: 0 4px 8px rgba(43,24,14,.08), 0 12px 22px rgba(43,24,14,.12);
  --e4: 0 10px 20px rgba(43,24,14,.12), 0 24px 48px rgba(43,24,14,.18);
  --hair: inset 0 1px 0 rgba(255,255,255,.7);
  --shadow: var(--e4);    /* alias de compatibilidad */

  --header-h: 84px; /* ampliado para que el logo oficial luzca en grande (petición del cliente) */
  --nav-h: 64px;
  --maxw: 1100px;

  /* Movimiento */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .14s;
  --t: .22s;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-quote: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* Accesibilidad: foco visible por teclado (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .chip:focus-visible, .nav-item:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* Respeta la preferencia de movimiento reducido (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
html { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100svh;
  overscroll-behavior-y: contain;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: #fff; }

/* Títulos con voz de cartel de estadio (display condensada) */
.hero h1, .carousel-slide.hero h1, .section-head h2, .carousel-slide.aviso h2,
.carousel-slide.desta h2, .profile h1, .auth-box h2, .empty h2, .modal h3 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .2px;
}
.section-head h2, .eyebrow, .cintillo-tag, .ad-label, .s-lab {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Encabezado ---------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  height: var(--header-h);
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  background: var(--ink);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #2a2018;
}
/* Motivo de cancha grabado, como sello del producto */
.app-header::before {
  content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cline x1='200' y1='0' x2='200' y2='120'/%3E%3Ccircle cx='200' cy='60' r='34'/%3E%3Crect x='0' y='28' width='34' height='64'/%3E%3Crect x='366' y='28' width='34' height='64'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; background-position: center;
}
.app-header > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: #fff; padding: 0; cursor: pointer; }
.app-header .brand-text strong { color: #fff; }
/* Logo OFICIAL (sustituye al cuadro "LAF"): placa blanca para que luzca sobre el header oscuro */
.brand-logo { height: 64px; width: auto; border-radius: 10px; background: #fff; padding: 3px 8px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.brand-text { display: flex; flex-direction: column; justify-content: center; }
/* El eslogan toma el lugar del nombre, en MAYÚSCULAS, en UNA SOLA LÍNEA corrida (sin saltos)
   centrada a la altura del logo (petición del cliente) */
.brand-slogan { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1120px) { .brand-slogan { font-size: 13px; letter-spacing: 1.4px; } .search-bar { width: min(250px, 30vw); } }
/* En celular angosto no caben eslogan + buscador: se muestra solo el logo (que ya trae el nombre completo) */
@media (max-width: 700px) { .brand-text { display: none; } }
@media (max-width: 560px) { .brand-logo { height: 54px; } }

/* ESTILOS DE LA BARRA SUPERIOR (configurable en el panel; el café actual es el default).
   blanco = fondo blanco con buscador gris que detona · negro = negro BRILLANTE (acabado piano). */
html[data-navbar="blanco"] .app-header { background: #ffffff; border-bottom-color: var(--line); }
html[data-navbar="blanco"] .app-header::before { opacity: .04; filter: invert(1); }
html[data-navbar="blanco"] .app-header .brand-text strong { color: var(--text); }
html[data-navbar="blanco"] .brand-logo { box-shadow: none; border: 1px solid var(--line); }
html[data-navbar="blanco"] .search-bar { background: #ece7e0; border-color: #ddd4ca; }
html[data-navbar="blanco"] .icon-btn { background: #ece7e0; border-color: #ddd4ca; color: #5b5048; }
html[data-navbar="negro"] .app-header { background: linear-gradient(180deg, #313131 0%, #0d0d0d 52%, #000 100%);
  border-bottom-color: #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 12px rgba(0,0,0,.45); }
html[data-navbar="negro"] .app-header::before { opacity: .07; }

.search-bar {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; color: var(--muted); width: min(320px, 42vw);
  transition: border-color .15s, box-shadow .15s;
}
.search-bar:focus-within { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.12); }
.search-bar input { background: none; border: 0; outline: 0; color: var(--text); width: 100%; font-size: 14px; }
.search-bar svg { flex: none; color: var(--muted); }

.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.icon-btn:hover { color: var(--gold); border-color: var(--gold-2); }

/* ---------- Layout ---------- */
.view { max-width: var(--maxw); margin: 0 auto; padding: 16px 14px 32px; animation: fade .25s var(--ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.section-head h2 { font-size: var(--fs-500); margin: 0; letter-spacing: .4px; text-transform: uppercase; }
.link { color: var(--gold); font-weight: 600; }
.section-head .link { font-size: 13px; }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; font-family: var(--font-display); }

.grid { display: grid; gap: 12px; }
/* Cromos: columnas fijas por breakpoint (densidad de álbum, no perfiles gigantes) */
.grid.cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 380px) { .grid.cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 560px) { .grid.cards { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }
@media (min-width: 820px) { .grid.cards { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px){ .grid.cards { grid-template-columns: repeat(6, 1fr); } }
.grid.wide  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid.two   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Entrada escalonada de tarjetas (sensación de "se reparten los cromos") */
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.grid.cards > *, .grid.wide > *, .grid.two > * { animation: cardIn .3s var(--ease-out) both; }
.grid > *:nth-child(2){animation-delay:.03s}.grid > *:nth-child(3){animation-delay:.06s}
.grid > *:nth-child(4){animation-delay:.09s}.grid > *:nth-child(5){animation-delay:.12s}
.grid > *:nth-child(6){animation-delay:.15s}.grid > *:nth-child(7){animation-delay:.18s}
.grid > *:nth-child(8){animation-delay:.21s}.grid > *:nth-child(n+9){animation-delay:.24s}

/* ---------- Botones / chips ---------- */
.btn { border: 1px solid var(--line); background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; display: inline-flex; gap: 8px; align-items: center;
  box-shadow: var(--e1); transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast); }
.btn:hover { border-color: var(--muted); box-shadow: var(--e2); }
.btn-gold { background: linear-gradient(160deg, var(--gold), var(--gold-2)); color: #fff; border: 0; }
.btn-gold:hover { border: 0; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-danger { color: var(--red); border-color: rgba(179,38,30,.4); background: rgba(179,38,30,.07); box-shadow: none; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 12px; min-height: 36px; }
/* Estado deshabilitado y feedback táctil (pressed) */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:not(:disabled):active, .chip:active, .icon-btn:active, .nav-item:active { transform: scale(.97); }
.module-card:active, .player-card:active, .mag-card:active, .video-card:active, .legend-card:active { transform: translateY(-1px) scale(.995); box-shadow: var(--e1); }
.row-actions .btn { min-height: 40px; min-width: 40px; justify-content: center; }

/* TEMA DE COLOR de la plataforma (configurable en el panel). Cambia el ACENTO (botones, bordes,
   badges, puntos) sin tocar la base clara del sitio. Cada --gold es lo bastante oscuro para texto
   BLANCO AA; --gold-2 es su versión más profunda y --rojo-hero la palabra clara del hero.
   OJO (sync): estos colores ESPEJAN las muestras de "Colores y apariencia" en admin.js (webApariencia). */
html[data-tema="azul"]      { --gold: #1d4f91; --gold-2: #143a6d; --gold-rgb: 29,79,145;  --rojo-hero: #7fb2e5; }
html[data-tema="negro"]     { --gold: #23201d; --gold-2: #000000; --gold-rgb: 35,32,29;  --rojo-hero: #cfc8c0; }
html[data-tema="esmeralda"] { --gold: #0f6b4f; --gold-2: #0b5540; --gold-rgb: 15,107,79; --rojo-hero: #6cc7a4; }
html[data-tema="vino"]      { --gold: #7c1f3d; --gold-2: #5e1530; --gold-rgb: 124,31,61; --rojo-hero: #e07a92; }
html[data-tema="purpura"]   { --gold: #5b2a86; --gold-2: #46206a; --gold-rgb: 91,42,134; --rojo-hero: #b79be0; }
html[data-tema="teal"]      { --gold: #0f6d78; --gold-2: #0a545d; --gold-rgb: 15,109,120;--rojo-hero: #66c4cd; }
html[data-tema="ambar"]     { --gold: #a2521a; --gold-2: #7f3f12; --gold-rgb: 162,82,26; --rojo-hero: #eaa564; }
html[data-tema="indigo"]    { --gold: #33357a; --gold-2: #262861; --gold-rgb: 51,53,122; --rojo-hero: #9aa0e6; }
html[data-tema="bronce"]    { --gold: #7a5a26; --gold-2: #5e451b; --gold-rgb: 122,90,38; --rojo-hero: #d8b878; }

/* COLOR DE FONDO de la web (lienzo detrás de las tarjetas). Configurable en el panel.
   CLAROS: solo tiñen --bg (+ --surface-2); las tarjetas blancas y los textos oscuros no cambian.
   OSCUROS: lienzo oscuro con las tarjetas CLARAS flotando (estética de revista); requieren la capa
   de overrides de "texto sobre el lienzo" de más abajo (marcada con data-fondo-tono="oscuro"). */
:root { --canvas-text: var(--text); --canvas-muted: var(--muted); } /* red de seguridad: por defecto = base clara */
html[data-fondo="arena"]   { --bg: #f3ede3; --surface-2: #f6f0e7; }
html[data-fondo="perla"]   { --bg: #f2f1ef; --surface-2: #f5f4f2; }
html[data-fondo="niebla"]  { --bg: #edf1f5; --surface-2: #f1f4f8; }
html[data-fondo="menta"]   { --bg: #ecf3ee; --surface-2: #f0f6f2; }
html[data-fondo="champan"] { --bg: #f5efe2; --surface-2: #f8f2e7; }
html[data-fondo="lavanda"] { --bg: #f1eef6; --surface-2: #f4f1f8; }
html[data-fondo="humo"]    { --bg: #efece7; --surface-2: #f3f0eb; }
/* Oscuros: fijan --bg y los colores CLAROS del texto que va sobre el lienzo (--canvas-*). NO tocan
   --surface/--surface-2/--bg-2, así las tarjetas, campos y el modal legal siguen claros y legibles. */
html[data-fondo="carbon"]     { --bg: #1a1613; --canvas-text: #f2ece5; --canvas-muted: #b3a89f; }
html[data-fondo="noche"]      { --bg: #121a2b; --canvas-text: #e8edf6; --canvas-muted: #9fb0c8; }
html[data-fondo="bosque"]     { --bg: #10201a; --canvas-text: #e6f0ea; --canvas-muted: #9fbdb0; }
html[data-fondo="vino-noche"] { --bg: #23121a; --canvas-text: #f4e7ec; --canvas-muted: #c39fac; }

/* CAPA DE OVERRIDES PARA FONDO OSCURO: aclara SOLO el texto que se pinta directo sobre el lienzo
   (títulos de sección, intros, enlaces de volver, expediente, cintillo, pie y el tablero del admin).
   No se pueden reasignar --text/--muted globalmente porque también los usan las tarjetas claras;
   por eso cada regla apunta a --canvas-text/--canvas-muted. */
html[data-fondo-tono="oscuro"] .section-head h2,
html[data-fondo-tono="oscuro"] .profile h1,
html[data-fondo-tono="oscuro"] .empty h3,
html[data-fondo-tono="oscuro"] .dash-head h3 { color: var(--canvas-text); }
/* Los encabezados de grupo del tablero ya NO van sobre el lienzo: viven en su caja clara (.dash-grupo),
   así que conservan --gold-2/--muted normales aunque el fondo del sitio sea oscuro (si no, claro-sobre-claro). */
html[data-fondo-tono="oscuro"] .section-head .muted,
html[data-fondo-tono="oscuro"] .detail-back,
html[data-fondo-tono="oscuro"] .profile .p-sub,
html[data-fondo-tono="oscuro"] .empty p,
html[data-fondo-tono="oscuro"] .loading,
html[data-fondo-tono="oscuro"] .dash-head p,
html[data-fondo-tono="oscuro"] .dash-nav-label,
html[data-fondo-tono="oscuro"] .admin-nav-title,
html[data-fondo-tono="oscuro"] .site-foot,
html[data-fondo-tono="oscuro"] .site-foot a { color: var(--canvas-muted); }
/* párrafos-intro y enlaces "Volver" que son hijos directos de la vista (no dentro de tarjetas) */
html[data-fondo-tono="oscuro"] .view > p.muted,
html[data-fondo-tono="oscuro"] .view > .muted { color: var(--canvas-muted); }
html[data-fondo-tono="oscuro"] .admin-nav-item { color: var(--canvas-muted); }
html[data-fondo-tono="oscuro"] .admin-nav-item.active { color: var(--canvas-text); }
/* enlaces y antetítulos de ACENTO que van sobre el lienzo: usar la versión CLARA del acento
   (--rojo-hero) para que no queden tenues sobre el fondo oscuro (resuelve también el acento negro). */
html[data-fondo-tono="oscuro"] .view > .eyebrow,
html[data-fondo-tono="oscuro"] .view > .profile .eyebrow,
html[data-fondo-tono="oscuro"] .section-head .link { color: var(--rojo-hero); }
/* cintillo de patrocinador: su fondo es un velo translúcido del acento sobre el lienzo → aclarar su texto */
html[data-fondo-tono="oscuro"] .cintillo, html[data-fondo-tono="oscuro"] .cintillo-msg { color: var(--canvas-text); }
/* franja de pendientes del tablero: cada renglón ahora es una tarjeta blanca dentro de su caja,
   ya no va sobre el lienzo → texto oscuro normal (si no, claro-sobre-blanco e ilegible) */
html[data-fondo-tono="oscuro"] .dash-pend-item { color: var(--text); }
/* dorsal fantasma del expediente: es tinta oscura translúcida; sobre lienzo oscuro se aclara */
html[data-fondo-tono="oscuro"] .p-dorsal { color: var(--canvas-text); }
/* tarjetas digitales: SOLO lo que va fuera de la tarjeta (la tarjeta es clara y conserva su tinta oscura) */
html[data-fondo-tono="oscuro"] .tj-lienzo-eyebrow { color: var(--rojo-hero); }
html[data-fondo-tono="oscuro"] .tj-nota { color: var(--canvas-muted); }
html[data-fondo-tono="oscuro"] .tj-nota .link { color: var(--rojo-hero); }
html[data-fondo-tono="oscuro"] .tjv-hero h2 { color: var(--canvas-text); } /* faltaba: el título quedaba invisible */
html[data-fondo-tono="oscuro"] .tjv-hero p { color: var(--canvas-muted); }
html[data-fondo-tono="oscuro"] .tjv-pasos li { color: var(--text); } /* van dentro de tarjeta clara */
html[data-fondo-tono="oscuro"] .tjr-nota { color: var(--canvas-muted); } /* esta nota sí va sobre el lienzo */
html[data-fondo-tono="oscuro"] .tjv-vista-tit { color: var(--canvas-muted); }
html[data-fondo-tono="oscuro"] .tj-card { box-shadow: 0 6px 22px rgba(0,0,0,.45); }
/* las tarjetas pierden su sombra "tierra" sobre lienzo oscuro: reponerles elevación con sombra negra real */
html[data-fondo-tono="oscuro"] .module-card,
html[data-fondo-tono="oscuro"] .player-card,
html[data-fondo-tono="oscuro"] .mag-card,
html[data-fondo-tono="oscuro"] .video-card,
html[data-fondo-tono="oscuro"] .news-item,
html[data-fondo-tono="oscuro"] .panel,
html[data-fondo-tono="oscuro"] .top-sponsors,
html[data-fondo-tono="oscuro"] .stat { box-shadow: 0 6px 22px rgba(0,0,0,.45); }

/* Solo para lectores de pantalla (texto accesible no visible) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px; font-weight: 600; scroll-snap-align: start; transition: border-color var(--t-fast), color var(--t-fast); }
.chip:hover { border-color: var(--muted); }
.chip.active { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: var(--e1); }

/* ---------- HERO (portada editorial) ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(155deg, #ffffff 0%, #f1ece6 80%);
  border: 1px solid var(--line); padding: 30px 22px; margin-top: 6px; box-shadow: var(--e2);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 100% 0%, rgba(var(--gold-rgb),.10), transparent 62%);
}
.hero h1 { font-size: clamp(31.25px, 7vw, 48.8px); margin: 6px 0 10px; line-height: 1.02; text-wrap: balance; }
.hero p { color: var(--muted); max-width: 60ch; margin: 0 0 16px; font-size: var(--fs-400); line-height: 1.6; }
.hero .tagline { font-family: var(--font-quote); font-style: italic; color: var(--text); font-size: 17px;
  border-left: 3px solid var(--gold); padding-left: 12px; max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; position: relative; }
.hero-meta b { font-family: var(--font-display); font-size: var(--fs-600); color: var(--text); font-variant-numeric: tabular-nums; display: block; line-height: 1; }
.hero-meta span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* Patrón sutil de cancha en el hero (cal a la derecha, rayado de pasto) */
.hero::before { content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image:
    repeating-linear-gradient(95deg, rgba(47,125,78,.05) 0 26px, rgba(47,125,78,0) 26px 52px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23c40000' stroke-width='2'%3E%3Crect x='8' y='8' width='384' height='284' rx='6'/%3E%3Cline x1='280' y1='8' x2='280' y2='292'/%3E%3Ccircle cx='280' cy='150' r='52'/%3E%3Crect x='340' y='95' width='52' height='110'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, cover; background-position: center, right center; background-repeat: repeat, no-repeat; }

/* ---------- Tarjetas de módulo ---------- */
.module-card {
  position: relative; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); padding: 18px;
  min-height: 118px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--e1); transition: transform var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t);
}
.module-card:hover { transform: translateY(-3px); border-color: #d8ccc1; box-shadow: var(--e3); }
.module-card .mc-ico { width: 42px; height: 42px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: rgba(var(--gold-rgb),.10); color: var(--gold); box-shadow: var(--hair); }
.module-card h3 { margin: 14px 0 2px; font-size: 16px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.module-card p { margin: 0; color: var(--muted); font-size: 12px; }
.module-card .mc-tag { position: absolute; top: 14px; right: 14px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Tarjeta de jugador (CROMO) ---------- */
.player-card {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  position: relative; box-shadow: var(--e1);
  transition: transform var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t);
}
.player-card:hover { transform: translateY(-3px); border-color: #d8ccc1; box-shadow: var(--e3); }
.player-card .pc-photo-wrap { position: relative; aspect-ratio: 1/1; width: 100%; overflow: hidden; }
.player-card .pc-photo { aspect-ratio: 1/1; width: 100%; height: 100%; object-fit: cover; background: var(--bg-2); }
/* Dorsal fantasma (marca de agua de cromo) */
.player-card .pc-dorsal { position: absolute; right: 6px; bottom: -10px; z-index: 1; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: 86px; line-height: .8; color: #fff; opacity: .14;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
/* Banda de posición troquelada en la esquina */
.player-card .pc-pos { position: absolute; left: 0; top: 0; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .5px; color: #fff;
  background: var(--pos, var(--muted)); padding: 3px 10px 3px 8px; border-radius: 0 0 var(--r-xs) 0; box-shadow: var(--e1); }
.player-card .pc-body { padding: 10px 12px 13px; position: relative; }
.player-card .pc-body::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; background: var(--pos, transparent); opacity: .7; border-radius: 2px; }
.player-card .pc-name { font-weight: 700; font-size: 14px; }
.player-card .pc-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.player-card .pc-code { display: inline-block; margin-top: 7px; font-size: 10px; color: var(--gold-2); letter-spacing: .5px;
  font-family: ui-monospace, "Cascadia Code", monospace; border: 1px dashed rgba(155,0,0,.45); border-radius: 5px; padding: 1px 6px; background: var(--surface-2); }

/* Insignia de calificación — material según rango (solo el 100 es bronce SAGRADO) */
.rating {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 42px; height: 42px; border-radius: var(--r-xs); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.03em; color: #1b1f22;
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(160deg, #cdd2d6, #9aa1a8);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.35);
}
.rating.r80 { background: linear-gradient(160deg, #b9bfc4, #868d94); }
.rating.r85 { background: linear-gradient(160deg, #c4cace, #8f969d); }
.rating.r90 { background: linear-gradient(160deg, #d7dbdf, #a3aab1); }
.rating.r95 { background: linear-gradient(160deg, #eef1f3, #bcc3c9); }
.rating.r100 { background: linear-gradient(150deg, #e8c878, #c79a3e 45%, #9c6f1f); color: var(--medal-ink);
  box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.3); }
.premium-ring { box-shadow: inset 0 0 0 2px var(--medal); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.badge.gold { color: var(--gold); border-color: rgba(var(--gold-rgb),.4); background: rgba(var(--gold-rgb),.08); }
.badge.medal { color: var(--medal-ink); border-color: var(--medal-2); background: linear-gradient(150deg, #f0dca6, #d7b878); }
.badge.green { color: var(--green); border-color: rgba(47,125,78,.35); background: rgba(47,125,78,.08); }

/* ---------- Ficha de jugador (EXPEDIENTE) ---------- */
.detail-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.detail-back:hover { color: var(--gold); }
.profile { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
@media (max-width: 620px) { .profile { grid-template-columns: 1fr; } }
.profile .p-photo { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--e2); }
.profile .p-photo img { width: 100%; display: block; }
.p-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; z-index: 2;
  background: linear-gradient(0deg, rgba(20,16,14,.85), transparent); color: #fff; }
.p-photo-cap strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.p-photo-cap span { font-size: 11px; color: #e3d8cd; }
.p-main { position: relative; min-width: 0; }
.p-dorsal { position: absolute; top: -6px; right: 0; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(90px, 16vw, 150px); line-height: .8;
  color: var(--text); opacity: .06; font-variant-numeric: tabular-nums; }
.p-main > * { position: relative; z-index: 1; }
.profile h1 { margin: 2px 0 4px; font-size: clamp(28px, 5.5vw, 39px); line-height: 1.04; }
.profile .p-sub { color: var(--muted); margin-bottom: 10px; }
.p-folio { display: inline-block; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 11px; letter-spacing: .5px;
  color: var(--gold-2); border: 1px dashed rgba(155,0,0,.5); border-radius: 6px; padding: 3px 8px; background: var(--surface-2); margin-bottom: 12px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; min-width: 84px; box-shadow: var(--e1); position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--line); }
.stat .s-val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.stat .s-lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.stat.stat-hero { background: linear-gradient(160deg, #fff, var(--surface-2)); }
.stat.stat-hero::before { background: var(--gold); }
.stat.stat-hero .s-val { color: var(--gold-2); }
.stat .s-rate { font-size: 10px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-top: 14px; box-shadow: var(--e1); }
.panel h3 { margin: 0 0 10px; font-size: 15px; font-family: var(--font-display); font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.p-historia { color: var(--text); line-height: 1.65; max-width: 64ch; }
.p-historia.has-cronica::first-letter { font-family: var(--font-quote); font-weight: 700; font-size: 3.1em; line-height: .8; float: left; padding: 4px 10px 0 0; color: var(--medal-2); }
.p-firma { display: block; margin-top: 12px; font-family: var(--font-quote); font-style: italic; color: var(--muted); font-size: 13px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline li { display: flex; gap: 14px; padding: 9px 0 9px 16px; position: relative; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.timeline li:first-child::before { background: var(--gold); border-color: var(--gold); }
.timeline .t-year { color: var(--gold); font-weight: 700; min-width: 52px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.gallery img { aspect-ratio: 1/1; border-radius: var(--r-sm); border: 1px solid var(--line); object-fit: cover; width: 100%; }
.g-img { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.lightbox img { cursor: zoom-out; }

/* ---------- Revistas / flipbook (objeto-papel) ---------- */
.mag-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); position: relative; box-shadow: var(--e1);
  transition: transform var(--t) var(--ease-out), border-color var(--t), box-shadow var(--t); }
.mag-card:hover { transform: translateY(-3px) rotate(-.35deg); border-color: #d8ccc1; box-shadow: var(--e3); }
.mag-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; z-index: 2;
  background: linear-gradient(90deg, var(--gold-2), rgba(155,0,0,.25)); }
.mag-card::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 0; width: 3px; z-index: 2;
  background: repeating-linear-gradient(90deg, #fff 0 1px, #e7ded6 1px 2px); opacity: .8; }
.mag-card .mc-cover { aspect-ratio: 3/4; width: 100%; object-fit: cover; }
.mag-card .mc-info { padding: 10px 12px; }
.mag-card .mc-info strong { font-size: 13px; }
.mag-card .mc-info span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* LECTOR DE REVISTA estilo Kindle: sala de lectura oscura, página al centro, controles discretos */
.lector { display: grid; place-items: center; gap: 12px; padding: clamp(12px, 3vw, 26px);
  background: linear-gradient(180deg, #201914, #171210); border: 1px solid #2e241d; border-radius: var(--r); box-shadow: var(--e3); }
.flip { display: grid; place-items: center; gap: 14px; }
.flip-stage { position: relative; width: min(560px, 100%); aspect-ratio: 7/10; border-radius: 10px;
  max-height: calc(100dvh - var(--header-h) - var(--nav-h) - 150px); /* cabe sin scroll en móvil/landscape */
  overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); background: #fff;
  touch-action: pan-y; user-select: none; } /* la perspectiva de la hoja 3D vive en .flip-zoom (su padre directo) */
/* Pliegue de lomo sutil */
.flip-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.07), transparent 5%, transparent 95%, rgba(0,0,0,.07)); }
.flip-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff;
  transform-origin: left center; backface-visibility: hidden; will-change: transform; }
#flipBase { z-index: 1; }
#flipLeaf { z-index: 3; box-shadow: 3px 0 16px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { .flip-stage img { transition: none !important; } }
/* Zonas de toque laterales (como Kindle): tocar izquierda/derecha pasa página; chevron visible al pasar el mouse */
.lz { position: absolute; top: 0; bottom: 0; width: 26%; z-index: 4; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .15s; padding: 0; }
.lz svg { background: rgba(0,0,0,.42); border-radius: 999px; padding: 9px; box-sizing: content-box; }
.lz:hover, .lz:focus-visible { opacity: 1; }
.lz-prev { left: 0; } .lz-next { right: 0; }
@media (hover: none) { .lz { opacity: 0; } } /* en táctil no estorban: el gesto es tocar/deslizar */
/* ZOOM de lectura: separar 2 dedos, doble toque/clic y botones +/− (para quien no ve bien de cerca).
   El wrapper .flip-zoom recibe el transform del zoom y aporta la perspectiva de la hoja 3D
   (debe vivir aquí: la perspectiva solo actúa sobre los hijos DIRECTOS, que ahora son las páginas). */
.flip-zoom { position: absolute; inset: 0; transform-origin: 0 0; perspective: 1900px; z-index: 1; }
.flip-zoom.zoom-anim { transition: transform .22s ease-out; }
.flip-stage.zoomed { touch-action: none; cursor: grab; } /* con zoom, un dedo arrastra la página (no la ventana) */
.flip-stage.zoomed:active { cursor: grabbing; }
.flip-stage.zoomed .lz { display: none; } /* los laterales de pasar página no roban el arrastre */
.zoom-ctrls { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.zoom-btn { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(20,15,12,.62); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .15s; }
.zoom-btn:hover { background: rgba(20,15,12,.85); }
.zoom-btn:disabled { background: rgba(20,15,12,.62); color: rgba(255,255,255,.45); cursor: default; } /* atenúa solo el glifo: sobre página blanca el botón no debe "desaparecer" */
.zoom-hud { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(20,15,12,.72); color: #fff; font-family: var(--font-display); font-size: 12.5px; letter-spacing: .5px; padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.lector-tip { width: min(560px, 100%); margin: -6px 0 0; color: #b7a99d; font-size: 13.5px; text-align: center; } /* legible para el público con poca vista (contraste ~7.6:1) */
@media (prefers-reduced-motion: reduce) { .flip-zoom.zoom-anim { transition: none; } }
/* Barra de lectura: anterior · deslizador · página · miniaturas · pantalla completa · siguiente */
.lector-bar { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); }
.lb-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid #3a2e25; background: rgba(255,255,255,.06); color: #e8ddd3; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s; }
.lb-btn:hover { background: rgba(255,255,255,.12); }
.lb-btn:disabled { opacity: .35; cursor: default; }
.lector-slider { flex: 1; min-width: 60px; accent-color: var(--gold); cursor: pointer; }
.lector-bar .pg { flex: none; color: #cfc3ba; font-family: var(--font-display); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .4px; }
/* Miniaturas de páginas (se abren desde la barra) */
.lector-thumbs { display: flex; gap: 8px; width: min(560px, 100%); overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.lt { flex: none; width: 54px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; padding: 0; cursor: pointer; position: relative; }
.lt img { display: block; width: 100%; height: 74px; object-fit: cover; }
.lt span { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 6px; }
.lt.active { border-color: var(--gold); }
.lector-pdf { color: #b7a99d; font-size: 12.5px; text-decoration: underline; }
.lector-pdf:hover { color: #e8ddd3; }
/* Pantalla completa: lectura inmersiva */
.lector:fullscreen { border-radius: 0; border: 0; place-content: center; overflow: auto; }
.lector:fullscreen .flip-stage { height: min(calc(100vh - 130px), 1400px); width: auto; max-width: 94vw; max-height: none; }

/* ---------- Videos ---------- */
.video-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--e1);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t); }
.video-card:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-2); }
.video-thumb .vp { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; }
.video-card .v-info { padding: 11px 13px; }
.video-frame { aspect-ratio: 16/9; width: 100%; border: 0; border-radius: var(--r); background: #000; }
/* Reproductor de audio (podcasts/entrevistas subidas por creadores) */
.audio-player { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--e2); }
.audio-cover { display: flex; align-items: center; gap: 12px; padding: 22px 18px; color: #fff; background: linear-gradient(135deg, var(--ink), var(--gold-2)); }
.audio-cover svg { flex: none; opacity: .92; }
.audio-cover span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .3px; font-size: 16px; line-height: 1.2; }
.audio-player audio { display: block; padding: 12px 14px; }
.audio-thumb { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--ink), var(--gold-2)); }

/* ---------- Patrocinadores ---------- */
.sponsor-strip { display: flex; align-items: center; gap: 14px; overflow-x: auto; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--e1); }
.sponsor-strip::-webkit-scrollbar { display: none; }
.sponsor-strip .s-logo { flex: none; height: 54px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; }
.sponsor-banner { display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); margin: 16px 0; box-shadow: var(--e1); }

/* ---------- Legado (archivo sepia: el color "se revela" al pasar) ---------- */
.leg-archive .mag-card img { filter: sepia(.5) saturate(.82) contrast(1.02); transition: filter var(--t) var(--ease-out); }
.leg-archive .mag-card:hover img { filter: none; }

/* ---------- Salón de Leyendas (bóveda de bronce) ---------- */
.salon { position: relative; margin: 0 -14px; padding: 20px 14px 28px; border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #241c12, #0d0b09); color: #efe6d2; }
.salon::before { content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23c79a3e' stroke-width='2'%3E%3Crect x='8' y='8' width='384' height='284' rx='6'/%3E%3Cline x1='200' y1='8' x2='200' y2='292'/%3E%3Ccircle cx='200' cy='150' r='52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; }
.salon > * { position: relative; z-index: 1; }
.salon .eyebrow { color: #e8c97a; }
.salon h2 { color: #fbf3e2; }
.salon .salon-intro { color: #cdbfa6; }
.legend-card { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--medal-2);
  background: linear-gradient(180deg, #221b12, #14110c); box-shadow: var(--e3), inset 0 0 0 1px rgba(199,154,62,.25);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t); }
.legend-card:hover { transform: translateY(-3px); box-shadow: var(--e4), inset 0 0 0 1px rgba(199,154,62,.4); }
.legend-card .lc-photo { aspect-ratio: 4/5; width: 100%; object-fit: cover; }
.legend-card .lc-body { padding: 12px 14px; }
.legend-card .lc-body strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fbf3e2; letter-spacing: .3px; }
.legend-card .lc-year { color: #c79a3e; font-size: 12px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.legend-card .lc-body .lc-why { color: #e9d4a0; font-size: 12px; margin-top: 4px; line-height: 1.4; }
.legend-card .lc-link { color: #e8c97a; font-size: 12px; display: inline-block; margin-top: 6px; }

/* ---------- Empty / utilidades ---------- */
.loading { display: grid; place-items: center; gap: 12px; padding: 70px 20px; color: var(--muted); }
.spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; color: var(--muted); padding: 44px 20px; display: grid; place-items: center; gap: 6px; }
.empty .empty-disc { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: radial-gradient(circle, var(--surface) 60%, var(--surface-2)); border: 2px dashed var(--line); color: var(--gold); }
.empty h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); letter-spacing: .3px; }
.empty p { margin: 0; max-width: 42ch; }
.empty svg { color: var(--line); }
.empty .btn { margin-top: 10px; }
.muted { color: var(--muted); }
.spacer { height: 8px; }
.center { text-align: center; }
.flexrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Inicio estilo "portal deportivo" (base: TV Azteca Deportes, diseño propio) ---------- */
/* Banner de PATROCINADORES (lo primero que se ve al abrir la página, petición del cliente).
   VARIOS logos a la vez (2 en celular, 3-4 en web) que se deslizan solos, con flechas. */
.top-sponsors { position: relative; margin: 6px 0 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--e1); overflow: hidden; padding: 22px 34px 10px; }
.top-sponsors::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 3;
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); }
.ts-tag { position: absolute; top: 7px; left: 14px; z-index: 3; font-family: var(--font-display); font-size: 10px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
/* Tira paginada: avanza por PÁGINAS COMPLETAS de logos (transform, como el carrusel principal),
   así NUNCA se ve un logo partido en el borde (petición del cliente). */
.ts-viewport { overflow: hidden; }
.ts-track { display: flex; transition: transform .5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ts-track { transition: none; } }
.ts-slide { flex: 0 0 50%; min-width: 50%; display: flex; align-items: center;
  justify-content: center; min-height: 84px; padding: 4px 8px; text-decoration: none; } /* celular: 2 a la vez */
@media (min-width: 560px) { .ts-slide { flex-basis: 33.333%; min-width: 33.333%; } } /* tablet: 3 */
@media (min-width: 860px) { .ts-slide { flex-basis: 25%; min-width: 25%; } }                /* web: 4 */
/* ESTÁNDAR del logo: altura FIJA, el ancho se adapta a la proporción (1:1 se ve cuadrado, 4:3 rectangular). */
.ts-logo { height: 68px; width: auto; max-width: 94%; object-fit: contain; border-radius: var(--r-sm); }
/* Flechas de navegación (como el ejemplo del cliente) */
.ts-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--e1); }
.ts-arrow:hover { background: #fff; color: var(--text); }
.ts-prev { left: 3px; } .ts-next { right: 3px; }
/* Explicación clara al inicio del registro de Crack (para que se entienda qué es y qué se obtiene) */
.reg-intro { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--r); padding: 14px 16px; margin: 10px 0 4px; box-shadow: var(--e1); }
.reg-intro p { margin: 0 0 8px; font-size: 14px; }
.reg-intro ol { margin: 4px 0 10px; padding-left: 20px; }
.reg-intro li { margin: 4px 0; font-size: 14px; }
/* Explicación clara al inicio del registro de Crack (para que se entienda qué es y qué se obtiene) */
.reg-intro { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--r); padding: 14px 16px; margin: 10px 0 4px; box-shadow: var(--e1); }
.reg-intro p { margin: 0 0 8px; font-size: 14px; }
.reg-intro ol { margin: 4px 0 10px; padding-left: 20px; }
.reg-intro li { margin: 4px 0; font-size: 14px; }
/* Cintillo: barra de noticiero con etiqueta tipo barber-pole (sin parpadeo agresivo, WCAG 2.3.1) */
.cintillo { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; padding: 10px 14px; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.14), rgba(var(--gold-rgb),.04)); border: 1px solid var(--gold-2); color: var(--text);
  text-decoration: none; box-shadow: var(--e1); }
.cintillo-tag { position: relative; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff;
  background: var(--gold); padding: 3px 9px 3px 18px; border-radius: 999px; flex: none; overflow: hidden; }
.cintillo-tag::before { content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: livedot 2.4s ease-in-out infinite; }
@keyframes livedot { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); } }
.cintillo-msg { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cintillo-cta { color: var(--gold); font-weight: 700; flex: none; font-size: 13px; }

/* Carrusel de contenido */
.carousel { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); margin-top: 6px; box-shadow: var(--e2); }
.carousel-track { display: flex; transition: transform .5s var(--ease-out); }
.carousel-slide { flex: 0 0 100%; min-width: 100%; }
/* Fondo panorámico de cada diapositiva (el sujeto vive a la derecha; el texto, a la izquierda) */
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% center; z-index: 0; }
.carousel-slide.hero, .carousel-slide.desta { min-height: clamp(320px, 52vw, 440px); padding: clamp(24px, 4.5vw, 46px) clamp(18px, 4vw, 46px) clamp(38px, 6vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.carousel-slide.hero { border: 0; border-radius: 0; box-shadow: none; position: relative; overflow: hidden; background: linear-gradient(155deg, #ffffff 0%, #f1ece6 80%); }
/* Velo claro sobre la niebla izquierda: garantiza el texto oscuro aunque el recorte cambie en móvil */
.carousel-slide.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.68) 40%, rgba(255,255,255,.14) 70%, transparent 84%); }
@media (max-width: 640px) { /* en móvil el recorte muestra más cancha: velo más ancho para que el texto no se pierda */
  .carousel-slide.hero::after { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 52%, rgba(255,255,255,.42) 78%, rgba(255,255,255,.12) 100%); }
  .carousel-slide.desta::after { background: linear-gradient(90deg, rgba(12,9,8,.90) 0%, rgba(12,9,8,.66) 52%, rgba(12,9,8,.28) 78%, rgba(12,9,8,.08) 100%); }
}
.carousel-slide.hero > *:not(.slide-bg) { position: relative; z-index: 2; }
.carousel-slide.hero p { max-width: 44ch; }
/* Diapositivas DESTACADO (Cracks / Minuto 90 / Legado): fondo nocturno, texto claro a la izquierda */
.carousel-slide.desta { position: relative; overflow: hidden; gap: 10px; background: #14100e; }
.carousel-slide.desta::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(12,9,8,.86) 0%, rgba(12,9,8,.52) 46%, rgba(12,9,8,.10) 74%, transparent 88%); }
.carousel-slide.desta > *:not(.slide-bg) { position: relative; z-index: 2; }
.desta-eyebrow { color: #ff8a8a; display: inline-flex; align-items: center; gap: 9px; }
.desta-eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--gold); }
.carousel-slide.desta h2 { margin: 2px 0 4px; color: #fff; text-transform: uppercase; font-size: clamp(29px, 6.4vw, 46px); line-height: 1.03; max-width: 16ch; text-wrap: balance; }
.carousel-slide.desta h2 .rojo { color: var(--rojo-hero); }
.carousel-slide.desta p { margin: 0 0 14px; color: #e7dcd3; max-width: 44ch; font-size: 15px; line-height: 1.55; }
.carousel-slide.desta .desta-btn { align-self: flex-start; }
.desta-btn .chev { font-size: 18px; line-height: 1; margin-left: 2px; }
/* AVISO = cartel/imagen COMPLETA del cliente: se muestra limpia y sin velo oscuro (petición del cliente).
   object-fit: contain para que se vea TODO el cartel; el fondo oscuro rellena el sobrante con elegancia. */
.carousel-slide.aviso { position: relative; overflow: hidden; display: block; text-decoration: none; background: #14100e; cursor: pointer; }
.carousel-slide.aviso .aviso-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; }
/* Pastilla de esquina: señala que el cartel es clicable SIN taparlo ni oscurecerlo. */
.carousel-slide.aviso .aviso-cta { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 3px;
  padding: 7px 13px; border-radius: 999px; background: rgba(20,15,12,.62); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.carousel-slide.aviso .aviso-cta .chev { font-size: 16px; line-height: 1; }
.carousel-dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; z-index: 3; padding: 0 12px; }
.cdot { position: relative; height: 5px; width: 18px; border-radius: 999px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.cdot::after { content: ''; position: absolute; inset: -12px -4px; } /* área táctil ~29px sin alterar el layout */
.cdot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cdot.active { background: var(--gold); width: 34px; }

/* Fila de MÓDULOS: BOTONES 4:3 pequeños, deslizable, con puntos que muestran cuántos hay */
.mod-rail-wrap { margin: 4px 0 2px; }
.mod-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mod-rail::-webkit-scrollbar { display: none; }
.mod-tile { flex: 0 0 56%; max-width: 240px; scroll-snap-align: start; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e1); transition: transform .14s var(--ease-out), box-shadow .14s; }
.mod-tile:hover { box-shadow: var(--e3); }
.mod-tile:active { transform: scale(.97); }
.mod-tile-img { display: block; aspect-ratio: 4 / 3; background: #0c0e12; }
.mod-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 9px 11px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .3px; font-size: 13px; line-height: 1.15; min-height: calc(2 * 1.15em + 18px); color: var(--text); }
@media (min-width: 560px) { .mod-tile { flex-basis: 230px; } }
.mod-dots { display: flex; gap: 2px; justify-content: center; margin-top: 4px; }
.mod-dot { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-grid; place-items: center; }
.mod-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); opacity: .5; transition: width .2s, opacity .2s, background .2s; }
.mod-dot.active::before { background: var(--gold); opacity: 1; width: 20px; }
.mod-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 999px; }
/* Botón de módulo SIN destino todavía (lo agregó el admin; la función se programa después) */
.mod-tile-off { cursor: default; }
.mod-tile-off .mod-tile-img { position: relative; }
.mod-tile-off .mod-tile-img img { filter: saturate(.55) brightness(.75); }
.mod-prox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.65); color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .6px; font-size: 11px; padding: 5px 10px; border-radius: 999px; }

/* Carrusel de logos de patrocinadores (marquee, orden aleatorio por JS) */
.ad-logos { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--e1); }
.ad-label { font-size: 12px; color: var(--muted); flex: none; text-transform: uppercase; letter-spacing: .6px; }
.ad-marquee { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ad-track { display: flex; gap: 18px; align-items: center; width: max-content; animation: marquee 26s linear infinite; }
.ad-track:hover { animation-play-state: paused; }
.ad-track img.s-logo { height: 46px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Temas de interés (noticias / enlaces) */
.news { display: grid; gap: 8px; }
.news-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--e1); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.news-item:hover { border-color: #d8ccc1; box-shadow: var(--e2); }
.news-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-top: 6px; flex: none; }
.news-body strong { font-size: 14px; display: block; }
.news-body small { color: var(--muted); }

/* ---------- Navegación inferior ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 11px; font-weight: 600; }
.nav-item svg { width: 22px; height: 22px; fill: currentColor; transition: transform var(--t-fast) var(--ease-spring); }
.nav-item.active { color: var(--gold); }
.nav-item.active svg { transform: translateY(-1px); }
.nav-item.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); transition: width var(--t) var(--ease-spring); }

/* TIRA DE PATROCINADORES inferior (reunión 13-jul). En pantalla grande SUSTITUYE a la barra de
   navegación; en el CELULAR también se ve (petición de Roberto: "como en computadora"), pero más
   delgada y ENCIMA de la navegación — la navegación no se puede quitar, es el menú del teléfono. */
.bottom-sponsors { display: flex; align-items: center; position: fixed; left: 0; right: 0; z-index: 60;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); height: 44px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); overflow: hidden; }
.bottom-sponsors[hidden] { display: none; } /* sin patrocinadores activos NO dejar la barra blanca vacía (el [hidden] del navegador pierde contra el display:flex de autor) */
.bottom-sponsors .bs-track { display: flex; gap: 46px; align-items: center; width: max-content; padding: 0 23px; animation: marquee 45s linear infinite; } /* 2×padding == gap: el bucle de -50% cae exacto */
.bottom-sponsors .bs-track:hover { animation-play-state: paused; } /* pausa al pasar el mouse (WCAG 2.2.2) */
/* max-width:none es OBLIGATORIO: el max-width:100% global (línea ~121) crea un ciclo
   (ancla flex se encoge al contenido ↔ img limitada al ancho del ancla) que Chromium
   resuelve en 0 cuando la imagen sale del caché de memoria (sin evento load que re-acomode). */
.bottom-sponsors img { height: 30px; width: auto; max-width: none; object-fit: contain; }
@media (min-width: 920px) {
  .bottom-nav { display: none; }
  .bottom-sponsors { bottom: 0; height: var(--nav-h); }
  .bottom-sponsors img { height: 42px; }
}
/* Con la tira visible en el celular, el contenido necesita más aire abajo (dos barras apiladas);
   la clase la pone app.js SOLO cuando hay patrocinadores (sin ellos no hay tira ni hueco de más). */
@media (max-width: 919px) {
  body.con-tira { padding-bottom: calc(var(--nav-h) + 44px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .bottom-sponsors .bs-track { animation: none; } }

/* ---------- Toast instalación (RETIRADO por preferencia del cliente) ---------- */
.install-toast { display: none !important; } /* no mostrar nunca (cubre HTML cacheado viejo) */
.install-toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 14px); z-index: 70;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--e4); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 560px; margin: 0 auto; animation: fade .3s var(--ease-out);
}
.install-toast span { font-size: 13px; }
.install-toast > div { display: flex; gap: 8px; flex: none; }

/* ---------- Formularios (admin) ---------- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); padding: 11px 12px; font-size: 14px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.1); }
.field textarea { min-height: 90px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* Tabla admin */
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab { flex: none; display: inline-flex; align-items: center; min-height: 38px; box-sizing: border-box; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; }
.admin-tab.active { background: var(--surface-2); color: var(--gold); border-color: var(--gold-2); }
/* Tablero de inicio del admin: pendientes que GRITAN, descripciones que HABLAN, conteos que SUSURRAN.
   Tipografías generosas: el dueño (Margarito) es adulto mayor. Cada grupo vive en su propia caja. */
.dash-head h3 { margin: 0 0 4px; font-size: 22px; }
.dash-head p { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.dash-ok { color: var(--green) !important; display: flex; align-items: center; gap: 6px; font-weight: 600; }
/* Franja de pendientes: una sola caja de "lo de hoy" con el número grande, separada de la rejilla de navegación */
.dash-pend { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; padding: 14px;
  background: rgba(var(--gold-rgb),.05); border: 1px solid rgba(var(--gold-rgb),.28); border-radius: var(--r-lg); }
.dash-pend-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1px solid rgba(var(--gold-rgb),.35); border-left: 4px solid var(--gold); background: var(--surface);
  color: var(--text); font-family: inherit; font-size: 16px; cursor: pointer; transition: background var(--t-fast); }
.dash-pend-item:hover { background: rgba(var(--gold-rgb),.1); }
.dash-pend-item svg { color: var(--gold); flex: none; }
.dash-pend-item .dp-txt { flex: 1; min-width: 0; }
.dash-pend-item .dp-txt strong { font-size: 19px; color: var(--gold); }
.dash-pend-item .dp-cta { flex: none; color: var(--gold); font-weight: 700; font-size: 15px; }
/* Índice de secciones: chips que SALTAN a cada zona (no abren) sin recorrer todo el tablero.
   El rótulo aclara la acción; los chips miden 44px de alto (objetivo táctil cómodo para el dueño). */
.dash-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.dash-nav-label { font-size: 15px; color: var(--muted); margin-right: 2px; }
.dash-nav-b { padding: 12px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-2); cursor: pointer; }
.dash-nav-b:hover { border-color: var(--gold-2); background: rgba(var(--gold-rgb),.06); }
.dash-nav-b:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Cada grupo en su propia "zona": caja surface-2 con las tarjetas blancas encima → 6 cuartos legibles */
.dash-grupo { margin-bottom: 16px; padding: 14px 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
/* al saltar con un chip, un realce breve confirma a dónde llegaste (sobre la caja, legible en claro y oscuro) */
.dash-grupo--foco { animation: dashFoco 1.6s ease; }
@keyframes dashFoco { 0%, 100% { box-shadow: none; } 15% { box-shadow: 0 0 0 3px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .dash-grupo--foco { animation: none; } }
.dash-grupo-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 12px; padding-bottom: 8px; border-bottom: 2px solid rgba(var(--gold-rgb),.18); flex-wrap: wrap; }
.dash-grupo-head h4 { margin: 0; font-family: var(--font-display); font-size: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--gold-2); }
.dash-grupo-head .muted { font-size: 13.5px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.dash-card { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; min-height: 108px; padding: 14px 34px 14px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--e1);
  color: var(--text); font-family: inherit; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dash-card:hover { border-color: var(--gold-2); box-shadow: var(--e2); }
.dash-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* chevron persistente: dice "esto abre una sección" aun sin hover (clave en táctil). Vive dentro de la
   tarjeta clara, por eso usa --muted (tinta oscura) y NO necesita override de modo oscuro. */
.dash-card::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 26px; line-height: 1; color: var(--muted); transition: color var(--t-fast), transform var(--t-fast); }
.dash-card:hover::after { color: var(--gold-2); transform: translateY(-50%) translateX(2px); }
/* disco del ícono: es el ancla estructural de la tarjeta, debe pesar MÁS que el badge (.12), no menos.
   Relleno .14 + aro interior de 1px para que no se pierda sobre el blanco (el dueño ve mal de cerca).
   Vive dentro de la tarjeta clara → se ve igual en claro y en los 4 fondos oscuros, sin override. */
.dc-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--gold-rgb),.14); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb),.22); color: var(--gold); }
.dc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-main strong { font-size: 17px; margin-bottom: 1px; }
.dc-desc { font-size: 15px; color: #3f352e; line-height: 1.45; } /* alto contraste: el admin es adulto mayor */
.dc-foot { display: flex; gap: 8px; align-items: center; margin-top: 2px; font-size: 13px; color: var(--muted); }
.dc-badge { background: rgba(var(--gold-rgb),.12); color: var(--gold); font-weight: 700; font-size: 12.5px; padding: 2px 10px; border-radius: 20px; }
/* Sugerencias de apodo libre cuando el que eligió ya está tomado (registro de Amigo del Fútbol) */
.nick-sug { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nick-sug-txt { font-size: 13px; color: var(--muted); }
.nick-sug-b { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--gold-2); background: rgba(var(--gold-rgb),.08); color: var(--gold-2); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.nick-sug-b:hover { background: rgba(var(--gold-rgb),.16); }
.nick-sug-b:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Popup de bienvenida: los dos caminos (Creador / Amigo) apilados para leerse con calma */
.bienv-foot { display: flex; flex-direction: column; gap: 8px; }

/* "Colores y apariencia" (admin): muestras de color reales + vista previa acotada a su caja.
   Los colores fijos de aquí ESPEJAN html[data-tema] y html[data-navbar] (arriba en este archivo);
   si cambia esa paleta, actualizar también estas muestras (trampa de defaults duplicados). */
.apar-sw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 6px; }
.apar-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 14px 0 2px; }
.apar-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 15px 12px 13px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font-family: inherit;
  text-align: center; transition: border-color .15s, box-shadow .15s; }
.apar-sw:hover { border-color: var(--gold-2); }
.apar-sw.is-active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.15); }
.apar-sw:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.apar-chip { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.apar-name { font-weight: 700; font-size: 14.5px; color: var(--text); line-height: 1.25; }
.apar-name small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); margin-top: 1px; }
.apar-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
  color: #fff; display: none; place-items: center; font-size: 13px; font-weight: 800; }
.apar-sw.is-active .apar-check { display: grid; }
/* mini barra de ejemplo para las muestras de "barra de arriba" */
.apar-bar { width: 100%; height: 40px; border-radius: 9px; display: flex; align-items: center; gap: 7px; padding: 0 9px; box-sizing: border-box; }
.apar-bar i { width: 17px; height: 17px; border-radius: 50%; flex: none; background: #c40000; }
.apar-bar b { height: 13px; border-radius: 999px; flex: 1; background: rgba(255,255,255,.35); display: block; }
.apar-bar-cafe { background: linear-gradient(180deg, #2a1c12, #14100e); }
.apar-bar-blanco { background: #fff; border: 1px solid var(--line); }
.apar-bar-blanco b { background: #ece7e0; }
.apar-bar-negro { background: linear-gradient(180deg, #313131, #000); }
/* muestra de FONDO: enseña el color del lienzo con una "tarjeta" blanca flotando encima
   (así el cliente ve que las tarjetas siguen claras aunque el fondo sea oscuro). */
.apar-fondo { width: 100%; height: 52px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; }
.apar-fondo span { width: 62%; height: 22px; background: #fff; border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
/* vista previa ACOTADA a su caja: usa --acc, --pv-bg y --pv-text locales + data-nav; NO toca el documento */
.apar-preview { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); margin-top: 6px; }
.apar-prev-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: linear-gradient(180deg, #2a1c12, #14100e); }
.apar-prev-bar .apar-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--acc); flex: none; }
.apar-prev-bar .apar-brand { color: #fff; font-weight: 700; font-size: 14px; }
.apar-prev-bar .apar-search { margin-left: auto; width: 120px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.14); }
.apar-prev-canvas { background: var(--pv-bg, var(--surface-2)); padding: 14px 16px 18px; }
.apar-prev-title { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; color: var(--pv-text, #181311); margin: 2px 0 10px; }
.apar-prev-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.apar-prev-btn { background: var(--acc); color: #fff; border-radius: 10px; padding: 11px 18px; font-weight: 700; font-size: 14px; }
.apar-prev-link { color: var(--acc); font-weight: 700; font-size: 14px; }
.apar-preview[data-nav="blanco"] .apar-prev-bar { background: #fff; border-bottom: 1px solid var(--line); }
.apar-preview[data-nav="blanco"] .apar-brand { color: var(--text); }
.apar-preview[data-nav="blanco"] .apar-search { background: #ece7e0; }
.apar-preview[data-nav="negro"] .apar-prev-bar { background: linear-gradient(180deg, #313131, #000); }
/* aviso de combinación no recomendada (fondo oscuro + acento negro) */
.apar-aviso { display: none; margin-top: 8px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: #7f3f12; background: #fdf1e3; border: 1px solid #f0d3aa; }
.apar-aviso.show { display: block; }

/* Panel de Patrocinadores (admin): espacios publicitarios con vista previa del banner y tarjetas */
.spa-preview { display: flex; gap: 22px; align-items: center; overflow-x: auto; padding: 16px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); scrollbar-width: thin; }
.spa-preview img { height: 56px; width: auto; object-fit: contain; flex: none; border-radius: 6px; }
.spa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.spa-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--e1); }
.spa-card.off { opacity: .62; }
.spa-logo { height: 52px; display: flex; align-items: center; }
.spa-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; }
.spa-name { font-weight: 700; font-size: 14px; color: var(--text); }
.spa-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Panel admin AGRUPADO: barra lateral con secciones (escritorio) + selector agrupado (móvil) */
.admin-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 8px; }
.admin-nav { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 12px; }
.admin-nav-group { margin-top: 14px; }
.admin-nav-group:first-child { margin-top: 0; }
.admin-nav-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px; color: var(--muted); padding: 2px 12px 5px; }
.admin-nav-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.admin-nav-item:hover { background: var(--surface-2); }
.admin-nav-item.active { background: rgba(var(--gold-rgb),.08); color: var(--gold); border-color: rgba(var(--gold-rgb),.18); }
.admin-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; }
.admin-panel { min-width: 0; }
.admin-nav-select { display: none; width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
@media (max-width: 760px) {
  .admin-shell { grid-template-columns: 1fr; gap: 10px; }
  .admin-nav { display: none; }
  .admin-nav-select { display: block; }
}
.row-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--e1); }
.row-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.row-item:last-child { border-bottom: 0; }
.row-item .ri-thumb { width: 44px; height: 44px; border-radius: var(--r-xs); flex: none; border: 1px solid var(--line); object-fit: cover; }
.row-item .ri-main { flex: 1; min-width: 0; }
.row-item .ri-main strong { font-size: 14px; display: block; }
.row-item .ri-main small { color: var(--muted); font-size: 12px; }
.row-actions { display: flex; gap: 6px; flex: none; }

/* Modal */
.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(20,16,14,.6); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px; animation: fade .2s var(--ease-out); }
.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--e4); }
.modal h3 { margin: 0 0 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 110; background: rgba(20,16,14,.92); display: grid; place-items: center; padding: 20px; }
.lightbox img { max-width: 96vw; max-height: 86vh; border-radius: var(--r); box-shadow: var(--e4); }
.lightbox .lb-cap { position: absolute; bottom: 24px; color: #cdbfa6; font-size: 13px; text-align: center; width: 100%; }

/* Truncado de títulos en tarjetas (evita romper el layout con nombres largos) */
.pc-name, .mag-card .mc-info strong, .video-card .v-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pc-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Brillo de celebración para la calificación 100 — disparo ÚNICO al revelar (no loop) */
.rating.r100 { position: relative; overflow: hidden; }
.rating.r100::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-130%); animation: shine 1.1s var(--ease-out) .25s 1 both; }
@keyframes shine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* Rankings (podio con medalla + barra proporcional al líder) */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.rank li:last-child { border-bottom: 0; }
.rk-pos { width: 28px; height: 28px; flex: none; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; box-shadow: var(--e1); }
.rk-pos.m1 { background: linear-gradient(150deg, #e8c878, #c79a3e 50%, #9c6f1f); color: var(--medal-ink); }
.rk-pos.m2 { background: linear-gradient(150deg, #eef1f3, #b9c0c6); color: #2a2f33; }
.rk-pos.m3 { background: linear-gradient(150deg, #e0a878, #b3826b 50%, #8a5a36); color: #2a1606; }
.rk-main { flex: 1; min-width: 0; }
.rk-name { display: block; font-weight: 600; min-width: 0; }
.rk-name small { font-weight: 400; }
.rk-bar { height: 4px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rk-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.rk-val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); font-variant-numeric: tabular-nums; flex: none; }
.rk-unit { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; display: block; text-align: right; }

/* Llamado a aportar */
.cta-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(160deg, #221a13, var(--ink)); border: 1px solid #2f2318; color: #f3ece4;
  border-radius: var(--r); padding: 14px 16px; margin: 12px 0; box-shadow: var(--e2); }
.cta-bar strong { font-size: 14px; font-family: var(--font-display); font-weight: 600; letter-spacing: .3px; }
.cta-bar .muted { color: #c4b6a8; }

/* Bloque ÚNETE de la portada: incentiva el registro con los TRES caminos como botones directos. */
.cta-join { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(160deg, #221a13, var(--ink));
  border: 1px solid #2f2318; border-left: 4px solid var(--gold); color: #f3ece4; border-radius: var(--r);
  padding: 16px; margin: 12px 0; box-shadow: var(--e2); }
.cta-join-head { display: flex; align-items: center; gap: 12px; }
.cta-join-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--gold-rgb),.18); color: #ffb3a6; }
.cta-join-head strong { display: block; font-size: 16px; font-family: var(--font-display); font-weight: 600; letter-spacing: .3px; }
.cta-join-head .muted { color: #c4b6a8; font-size: 13.5px; }
.cta-join-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cta-join .btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.cta-join .btn-ghost:hover { background: rgba(255,255,255,.08); }
.cta-join-all { color: #d8b25a; font-size: 13px; font-weight: 700; text-decoration: none; margin-left: auto; }
.cta-join-all:hover { text-decoration: underline; }

/* Controles de subida de archivos (admin / aportar) */
.up { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.up-pick { cursor: pointer; }
.up-prev { max-height: 130px; border-radius: var(--r-sm); border: 1px solid var(--line); object-fit: cover; }
.up-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.up-thumbs img { width: 60px; height: 60px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.up-status { font-size: 12px; }

/* Auth admin (mesa de redacción) */
.auth-box { max-width: 360px; margin: 40px auto; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #221a13, var(--ink)); border: 1px solid #2f2318; color: #f3ece4;
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--e3); }
.auth-box::before { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg fill='none' stroke='%23c40000' stroke-width='2'%3E%3Crect x='8' y='8' width='384' height='284' rx='6'/%3E%3Cline x1='200' y1='8' x2='200' y2='292'/%3E%3Ccircle cx='200' cy='150' r='52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover; }
.auth-box > * { position: relative; z-index: 1; }
.auth-box h2 { margin: 0 0 4px; color: #fff; }
.auth-box p { color: #c4b6a8; margin: 0 0 18px; font-size: 13px; }
.auth-box .field label { color: #c4b6a8; }
.auth-box .field input { background: rgba(255,255,255,.06); border-color: #3a2c20; color: #fff; }

/* ---------- Por Siempre en la Cancha (memorial) ---------- */
.eterno-detail .memorial-head { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; margin-bottom: 18px; }
@media (max-width: 620px) { .eterno-detail .memorial-head { grid-template-columns: 1fr; } }
.eterno-detail .memorial-head .p-photo { border-radius: var(--r); overflow: hidden; border: 1px solid var(--medal-2); box-shadow: var(--e3); }
.eterno-detail .memorial-head .p-photo img { width: 100%; display: block; }
.eterno-detail .memorial-info h1 { color: #fbf3e2; margin: 4px 0; }
.eterno-detail .memorial-info .eyebrow { color: #e8c97a; }
.eterno-detail .memorial-info .p-sub { color: #cdbfa6; }
.memorial-dates { color: #e0c178; font-family: var(--font-display); font-variant-numeric: tabular-nums; margin: 6px 0 12px; }
.veladora-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.vela-count { color: #e9d4a0; font-size: 13px; font-variant-numeric: tabular-nums; }
#velaBtn { transition: box-shadow var(--t) var(--ease-out); }
#velaBtn.lit { box-shadow: 0 0 18px rgba(232,201,120,.75); }

/* ---------- Comentarios públicos (instantáneos) ---------- */
.comentarios .cmt-list { display: grid; gap: 10px; margin-bottom: 14px; }
.cmt { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.cmt-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cmt-head strong { font-size: 14px; }
.cmt-head .muted { font-size: 11px; flex: none; font-variant-numeric: tabular-nums; }
.cmt-body { margin-top: 4px; color: var(--text); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-report { margin-top: 6px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 11px; cursor: pointer; text-decoration: underline; }
.cmt-report:hover { color: var(--gold); }
.cmt-report:disabled { color: var(--green); text-decoration: none; cursor: default; }
.cmt-form { display: grid; gap: 8px; }
.cmt-form input, .cmt-form textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); padding: 10px 12px; font-size: 14px; font-family: inherit; }
.cmt-form textarea { min-height: 70px; resize: vertical; }
.cmt-form input:focus, .cmt-form textarea:focus { outline: 0; border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.1); }
.report-content { color: var(--muted); }
.report-content:disabled { color: var(--green); }

/* ---------- Listas de selección (Amigo del Fútbol) ---------- */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
/* Campo con error de validación: borde rojo + halo (se limpia al corregir, ver marcarError) */
.input-error, .input-error:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(179,38,30,.15) !important; }
input[type="checkbox"].input-error, input[type="file"].input-error { outline: 2px solid var(--red); outline-offset: 2px; }
.chk-scroll { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; }
/* (Los documentos legales ya no se vuelcan inline: abren en .priv-modal. Filas limpias = .legal-row más abajo.) */

/* Pop-up del Aviso de Privacidad (primera visita / reabrible) */
.priv-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: end center; padding: 14px;
  background: rgba(20,16,14,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
@media (min-width: 600px) { .priv-modal { place-items: center; } }
.priv-modal.show { opacity: 1; }
.priv-card { width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--e4);
  transform: translateY(18px) scale(.985); transition: transform .28s var(--ease-out); }
.priv-modal.show .priv-card { transform: none; }
.priv-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); } /* --surface-2 (no --bg): el modal es SIEMPRE una isla clara, aunque el fondo de la web sea oscuro */
.priv-head .priv-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; background: rgba(var(--gold-rgb),.10); color: var(--gold); }
.priv-head strong { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .3px; font-size: 17px; color: var(--text); }
.priv-head small { color: var(--muted); }
.priv-intro { padding: 14px 18px 0; color: var(--text); font-size: 14px; line-height: 1.5; }
/* Resumen de puntos clave (primera visita): lo esencial, amable, antes del texto completo */
.priv-key { list-style: none; margin: 12px 18px 2px; padding: 12px 14px; display: grid; gap: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-sm); background: rgba(var(--gold-rgb),.05); }
.priv-key li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.priv-key li svg { flex: none; margin-top: 2px; color: var(--gold); }
.priv-body { margin: 12px 18px 4px; padding: 15px 16px; flex: 1 1 auto; min-height: 80px; overflow-y: auto; font-size: 13.5px; line-height: 1.62; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); } /* --surface-2 (no --bg): legible aunque el fondo de la web sea oscuro */
.priv-body p { margin: 0 0 10px; }
.priv-body p:last-child { margin-bottom: 0; }
/* Documento legal formateado (kicker, secciones, capítulos, artículos) */
.priv-doc-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .3px; font-size: 11px; color: var(--muted); margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.lg-kick { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .4px; font-size: 12px; color: var(--gold); margin: 0 0 3px; line-height: 1.3; }
.lg-meta { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.lg-quote { font-style: italic; color: var(--muted); margin: 0 0 12px; }
.lg-cap { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .3px; font-size: 13px; color: var(--gold); margin: 16px 0 8px; padding-top: 13px; border-top: 1px solid var(--line); }
.lg-cap:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lg-sec { margin: 0 0 13px; }
.lg-h { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2px; font-size: 12.5px; color: var(--text); margin: 0 0 5px; }
.lg-num { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 17px; padding: 0 5px; border-radius: 5px; background: var(--gold); color: #1a1410; font-size: 10.5px; letter-spacing: 0; }
.lg-sec p { color: var(--muted); margin: 0; }
.lg-art { margin: 0 0 7px; }
.lg-art strong { color: var(--text); }
.priv-foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.priv-head .priv-x { margin-left: auto; flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.priv-head .priv-x:hover { color: var(--text); border-color: var(--muted); }
.legal-row { align-items: flex-start; gap: 9px; margin: 9px 0; font-size: 14px; }
.legal-row input { margin-top: 2px; }
.site-foot { text-align: center; padding: 22px 16px 8px; color: var(--muted); font-size: 13px; }
.site-foot a { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .priv-modal, .priv-card { transition: opacity .01s; } }

/* ==========================================================================
   TARJETAS DE PRESENTACIÓN DIGITALES (.tj-*) — servicio de pago (acuerdo 17-jul).
   Legible a un brazo de distancia: el cliente rechazó la tarjeta de referencia por
   "mucha información y letra muy chiquita". Aquí manda el tamaño.
   La tarjeta es SIEMPRE clara (--surface): su texto usa --text/--muted/--gold-2 y
   NUNCA --canvas-*, o quedaría claro-sobre-claro en los 4 fondos oscuros.
   ========================================================================== */
.tj-lienzo { max-width: 460px; margin: 0 auto; }
.tj-lienzo-eyebrow { margin: 0 0 12px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.tj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2); overflow: hidden; text-align: center; color: var(--text); }
.tj-cinta { position: relative; height: 96px; background: linear-gradient(160deg, var(--gold), var(--gold-2)); }
.tj-cinta-tag { position: absolute; left: 18px; top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; }
.tj-foto { display: block; width: 128px; height: 128px; margin: -64px auto 0; border-radius: 50%; object-fit: cover; border: 5px solid var(--surface); background: var(--surface-2); box-shadow: var(--e2); }
.tj-foto--logo { object-fit: contain; padding: 12px; background: var(--surface); } /* un escudo o logo no se recorta */
.tj-id { padding: 14px 20px 2px; }
.tj-nombre { margin: 0; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 7.4vw, 34px); line-height: 1.06; }
.tj-rol { margin: 8px 0 0; color: var(--gold-2); font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase; }
/* el lema es UNA frase: se recorta a 3 renglones para que nadie rompa el diseño pegando un párrafo */
.tj-lema { margin: 12px auto 0; max-width: 32ch; font-size: 17px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tj-contactos { display: grid; gap: 10px; padding: 20px 16px 0; }
.tj-btn { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; text-align: left; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); box-shadow: var(--e1);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.tj-btn:hover { border-color: var(--muted); box-shadow: var(--e2); }
.tj-btn:active { transform: translateY(1px); }
.tj-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tj-btn-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--gold-2); }
.tj-ico { width: 26px; height: 26px; display: block; }
.tj-btn-txt { min-width: 0; }
.tj-btn-etq { display: block; font-size: 14px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.tj-btn-dato { display: block; font-size: 17px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* WhatsApp es la acción principal: es por donde de verdad contesta la gente aquí */
.tj-btn--wa { background: var(--green); border-color: var(--green); }
.tj-btn--wa .tj-btn-ico { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; }
.tj-btn--wa .tj-btn-etq { color: rgba(255,255,255,.92); }
.tj-btn--wa .tj-btn-dato { color: #fff; }
.tj-btn--tel { background: var(--surface); border-color: rgba(var(--gold-rgb),.35); }
.tj-btn--tel .tj-btn-ico { background: rgba(var(--gold-rgb),.10); border-color: transparent; }
.tj-redes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px 0; }
.tj-redes .tj-btn { min-height: 52px; gap: 10px; padding: 8px 12px; justify-content: center; }
.tj-redes .tj-btn-ico { width: 36px; height: 36px; }
.tj-redes .tj-ico { width: 22px; height: 22px; }
.tj-redes .tj-btn-dato { font-size: 16px; }
@media (max-width: 359px) { .tj-redes { grid-template-columns: 1fr; } }
/* El QR se muestra para que el dueño lo enseñe y otro lo escanee (desde fuera no es recursivo) */
.tj-compartir { margin-top: 18px; padding: 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.tj-qr-img { display: block; width: 168px; height: 168px; margin: 0 auto; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.tj-qr-pie { margin: 10px auto 0; max-width: 30ch; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tj-pie { margin: 0; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: var(--surface); font-family: var(--font-display); font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.tj-nota { max-width: 34ch; margin: 16px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (min-width: 720px) { .tj-cinta { height: 108px; } .tj-foto { width: 140px; height: 140px; margin-top: -70px; } .tj-contactos, .tj-redes { padding-left: 22px; padding-right: 22px; } }
/* Al imprimir: fuera la cinta de color (gasta tinta) y sin sombras */
@media print { .tj-cinta { height: 40px; background: none; border-bottom: 2px solid #000; } .tj-btn { box-shadow: none; } .tj-nota, .tj-lienzo-eyebrow { display: none; } }

/* Embudo de venta del servicio (.tjv-*) */
.tjv-hero { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.tjv-hero h2 { font-size: clamp(24px, 6vw, 32px); margin: 0 0 10px; }
.tjv-hero p { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0 auto; max-width: 46ch; }
.tjv-precio { display: inline-block; margin-top: 14px; padding: 8px 18px; border-radius: 20px; background: rgba(var(--gold-rgb),.10); border: 1px solid rgba(var(--gold-rgb),.32); color: var(--gold); font-weight: 700; font-size: 17px; }
.tjv-benes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 22px 0; }
.tjv-bene { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--e1); }
.tjv-bene strong { display: block; font-size: 16.5px; margin-bottom: 4px; color: var(--text); }
.tjv-bene span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.tjv-pasos { counter-reset: paso; display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.tjv-pasos li { counter-increment: paso; position: relative; padding: 12px 14px 12px 54px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; color: var(--text); }
.tjv-pasos li::before { content: counter(paso); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; font-weight: 700; font-size: 15px; }
.tjv-cols { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .tjv-cols { grid-template-columns: 1fr 1fr; align-items: start; } }
.tjv-vista-tit { text-align: center; font-family: var(--font-display); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
/* Resumen de datos del formulario (.tjr-*): NO es una maqueta de la tarjeta a propósito — el diseño
   final se hace aparte, así que aquí solo se le devuelve a la persona lo que escribió, para revisar. */
.tjr-caja { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 16px; box-shadow: var(--e1); }
.tjr-fila { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tjr-fila:last-child { border-bottom: 0; }
.tjr-etq { flex: none; font-size: 13.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.tjr-val { text-align: right; font-size: 16px; color: var(--text); word-break: break-word; }
.tjr-falta .tjr-val { color: var(--gold); font-weight: 700; }
.tjr-vacio { margin: 10px 0; font-size: 15px; color: var(--muted); }
.tjr-nota { margin: 12px 2px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* La tarjeta ya diseñada (imagen que suben desde el panel): manda sobre la maqueta de datos */
.tj-diseno { display: block; width: 100%; height: auto; }

/* ==========================================================================
   IMAGEN DE BIENVENIDA (.bv-*) — lo PRIMERO que ve quien llega (acuerdo 17-jul).
   Va ANTES del aviso de privacidad: primero despierta la curiosidad ("¿qué es esto?")
   y de ahí pasa al aviso legal. La imagen la sube el cliente desde el panel.
   ========================================================================== */
.bv-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 8, 7, .72); opacity: 0; transition: opacity .32s ease; }
@supports (backdrop-filter: blur(6px)) { .bv-modal { backdrop-filter: blur(7px); } }
.bv-modal.show { opacity: 1; }
.bv-card { position: relative; width: 100%; max-width: min(560px, calc(100vw - 32px)); max-height: 96vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16, 1, .3, 1); } /* salida suave tipo "expo": elegante, sin rebote */
.bv-modal.show .bv-card { opacity: 1; transform: none; }
/* La imagen se ve SIEMPRE COMPLETA: nada de desplazarse para leerla (petición del cliente). El
   contenedor toma el alto que sobra y la imagen se ajusta dentro con 'contain', así que se achica
   sola en pantallas bajas en vez de recortarse. El JS afina el ancho de la tarjeta para que no
   queden franjas a los lados. El fondo va del color de la infografía, para que no se note el borde. */
.bv-scroll { flex: 0 1 auto; min-height: 0; overflow: hidden; background: #0b1020; line-height: 0; font-size: 0; } /* line-height/font-size 0: matan el espacio fantasma que el navegador deja bajo una imagen (dejaba 4 px y recortaba el pie de la infografía) */
.bv-img { display: block; width: 100%; height: auto; opacity: 0; transform: scale(1.015);
  transition: opacity .6s ease .12s, transform .8s cubic-bezier(.16, 1, .3, 1) .12s; }
.bv-modal.show .bv-img { opacity: 1; transform: none; }
.bv-zoom { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 0; border-radius: 20px; background: rgba(12, 10, 9, .72); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .4s ease .5s, background var(--t-fast); }
.bv-modal.show .bv-zoom { opacity: 1; }
.bv-zoom:hover { background: rgba(12, 10, 9, .9); }
.bv-zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Pie con el botón: entra al final, para que la vista vaya imagen -> acción */
.bv-foot { flex: none; padding: 16px; background: var(--surface); border-top: 1px solid var(--line); text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease .34s, transform .45s ease .34s; }
.bv-modal.show .bv-foot { opacity: 1; transform: none; }
.bv-foot p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.bv-btn { display: block; width: 100%; min-height: 56px; padding: 14px 18px; border: 0; border-radius: var(--r);
  background: var(--gold); color: #fff; font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; box-shadow: 0 8px 22px rgba(var(--gold-rgb), .32);
  animation: bvLatido 3.2s ease-in-out 1.6s infinite; } /* latido MUY suave: llama la atención sin marear */
.bv-btn:hover { filter: brightness(1.06); animation-play-state: paused; }
.bv-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; animation-play-state: paused; }
@keyframes bvLatido { 0%, 92%, 100% { transform: none; box-shadow: 0 8px 22px rgba(var(--gold-rgb), .32); }
  96% { transform: scale(1.017); box-shadow: 0 10px 28px rgba(var(--gold-rgb), .46); } }
.bv-saltar { display: inline-block; margin-top: 10px; padding: 6px; background: none; border: 0; color: var(--muted);
  font-family: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
@media (min-width: 760px) { .bv-card { max-width: 620px; } .bv-foot { padding: 18px 22px; } }
/* Quien pidió menos movimiento: aparece y ya, sin animaciones ni latido */
@media (prefers-reduced-motion: reduce) {
  .bv-modal, .bv-card, .bv-img, .bv-foot, .bv-zoom { transition: opacity .01s; transform: none; }
  .bv-btn { animation: none; }
}

/* LUPA de la bienvenida: la imagen se ve MÁS GRANDE aquí mismo, sin mandar a otra pestaña como si
   fuera un archivo suelto. Se puede acercar (botones, doble toque, rueda) y arrastrar para recorrer. */
.bv-lupa { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  background: #06090f; opacity: 0; transition: opacity .26s ease; }
.bv-lupa.show { opacity: 1; }
.bv-lupa-marco { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center; touch-action: pan-x pan-y; cursor: zoom-in; }
.bv-lupa-marco.arrastrando { cursor: grabbing; }
.bv-lupa-img { display: block; width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.bv-lupa-barra { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 12px; background: rgba(6, 9, 15, .96); border-top: 1px solid rgba(255,255,255,.12); }
.bv-lupa-btn { min-width: 46px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #fff;
  font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer; }
.bv-lupa-btn:hover { background: rgba(255,255,255,.18); }
.bv-lupa-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bv-lupa-cerrar { font-size: 15px; font-weight: 600; padding: 0 18px; background: var(--gold); border-color: var(--gold); }
.bv-lupa-nivel { min-width: 62px; text-align: center; color: #fff; font-size: 15px; font-weight: 600; }
.bv-img { cursor: zoom-in; } /* tocar la imagen también acerca */
@media (prefers-reduced-motion: reduce) { .bv-lupa { transition: opacity .01s; } }

/* En pantallas anchas la infografía se ve MÁS GRANDE: el texto y el botón pasan al lado, y la imagen
   se queda con casi todo el alto de la pantalla (antes el pie le comía espacio por abajo). */
@media (min-width: 900px) and (min-height: 560px) {
  .bv-card.bv-h { flex-direction: row; align-items: stretch; max-width: min(96vw, 1100px); }
  .bv-card.bv-h .bv-scroll { flex: 1 1 auto; }
  .bv-card.bv-h .bv-foot { width: 300px; flex: none; display: flex; flex-direction: column; justify-content: center;
    border-top: 0; border-left: 1px solid var(--line); padding: 22px; }
  .bv-card.bv-h .bv-foot p { font-size: 16.5px; margin-bottom: 16px; }
  /* el botón de acercar va sobre la IMAGEN, no sobre la columna del texto (300 px + su aire) */
  .bv-card.bv-h .bv-zoom { right: 312px; }
}

/* Orden de la portada (panel): lista con botones grandes ▲ ▼, pensada para el dueño en táctil */
.ord-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ord-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.ord-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--gold-rgb),.12); color: var(--gold); font-weight: 700; font-size: 14px; }
.ord-nom { flex: 1; min-width: 0; font-size: 15.5px; color: var(--text); }
.ord-btns { flex: none; display: flex; gap: 6px; }
.ord-btns .btn { min-height: 40px; }
.ord-btns .btn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 480px) { .ord-item { flex-wrap: wrap; } .ord-btns { width: 100%; justify-content: flex-end; } }