/* ==========================================================================
   Los Tranquilos · Rediseño festivo
   Sistema de diseño «La Gran Función Tranquila»
   Sin fuentes ni recursos remotos. Sin estilos inline.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --color-ink: #1B1033;
  --color-paper: #FFF6E5;
  --color-white: #FFFFFF;
  --color-magenta: #C8175F;
  --color-magenta-dark: #9E0F49;
  --color-violet: #4A2599;
  --color-violet-dark: #2E1566;
  --color-sun: #FFC83D;
  --color-teal: #007F7A;
  --color-orange: #E8531C;
  --color-mint: #CDEFE6;
  --color-pink: #FFD9E8;
  --color-lav: #E6DCFF;
  --color-muted: #4D4560;
  --color-disabled: #6A607D;
  --color-sun-hover: #FFD966;
  --color-field-off: #E9E4F0;
  --overlay: rgba(27, 16, 51, .92);
  --font-display: "Arial Rounded MT Bold", "Avenir Next Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.75rem, 9vw, 5.75rem);
  --fs-h2: clamp(2rem, 5.5vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-eyebrow: .8125rem;
  --fs-micro: .75rem;
  --fs-lead: 1.25rem;
  --fs-page-h1: clamp(2.5rem, 8vw, 4.5rem);
  --fs-brand: 1.25rem;
  --lh-tight: 1.05;
  --lh-body: 1.6;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --gutter: 1rem;
  --container: 76rem;
  --reading: 42rem;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --border: 3px solid var(--color-ink);
  --shadow-sticker: 6px 6px 0 var(--color-ink);
  --shadow-sticker-sm: 3px 3px 0 var(--color-ink);
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --z-header: 50;
  --z-lightbox: 80;
  --z-burst: 90;
  --z-toast: 95;
  --z-skip: 100;
  --tap: 44px;
}

@media (min-width: 768px) { :root { --gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0 0 var(--space-4); }
a {
  color: var(--color-magenta-dark);
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--color-violet); }
:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-sun);
}
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; box-shadow: none; }
[hidden] { display: none !important; }

.m0 { margin: 0; }
.mb2 { margin-bottom: .5rem; }
.mt3 { margin-top: var(--space-3); }
.mt5 { margin-top: var(--space-7); }
.mtl { margin: var(--space-4) 0 0; }
.nm { margin: 0; }
.rel { position: relative; }
.self-start { align-self: flex-start; }
.mask--magenta { color: var(--color-magenta); }
.mask--sun { color: var(--color-sun); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr, .sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-8); }
.page-section { padding-top: var(--space-7); }
.eyebrow {
  display: inline-block;
  font: 800 var(--fs-eyebrow)/1.35 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--color-lav);
  color: var(--color-violet-dark);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-pill);
  padding: .5rem .9rem;
  margin-bottom: var(--space-4);
}
.lead { font-size: var(--fs-lead); max-width: 36rem; }
.muted { color: var(--color-muted); }
.metadata { color: var(--color-muted); font-size: var(--fs-small); }
.small { font-size: var(--fs-small); }
.inline { display: inline; }
.inline-form { display: inline; margin-inline-start: var(--space-4); }

/* ---------- Skip link ---------- */
.skip, .skip-link {
  position: absolute;
  left: var(--space-4);
  top: -5rem;
  z-index: var(--z-skip);
  background: var(--color-sun);
  color: var(--color-ink);
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  border-radius: var(--radius-m);
  font-weight: 800;
  text-decoration: none;
}
.skip:focus, .skip-link:focus { top: var(--space-3); }

/* ---------- Motivos decorativos ---------- */
.stripe {
  height: 14px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-magenta) 0 48px,
    var(--color-sun) 48px 96px,
    var(--color-teal) 96px 144px,
    var(--color-violet) 144px 192px,
    var(--color-orange) 192px 240px
  );
}
.bunting {
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='34' viewBox='0 0 200 34'%3E%3Cpath d='M0 0H200' stroke='%231B1033' stroke-width='3' fill='none'/%3E%3Cpath d='M4 2L36 2L20 30Z' fill='%23C8175F'/%3E%3Cpath d='M44 2L76 2L60 30Z' fill='%23FFC83D'/%3E%3Cpath d='M84 2L116 2L100 30Z' fill='%23007F7A'/%3E%3Cpath d='M124 2L156 2L140 30Z' fill='%234A2599'/%3E%3Cpath d='M164 2L196 2L180 30Z' fill='%23E8531C'/%3E%3C/svg%3E") repeat-x center top / 200px 34px;
}
.harlequin {
  background-color: var(--color-violet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 0L96 48L48 96L0 48Z' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E");
}
.wave {
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28' viewBox='0 0 96 28'%3E%3Cpath d='M0 14Q12 2 24 14T48 14T72 14T96 14' fill='none' stroke='%23C8175F' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 96px 28px;
}

/* Confeti estático: posiciones en CSS, sin atributos style */
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confetti i, .cf {
  position: absolute;
  width: var(--s, 14px);
  height: var(--s, 14px);
  background: var(--c, var(--color-magenta));
  left: var(--x, 2%);
  top: var(--y, 2%);
  transform: rotate(var(--r, 0deg));
  border-radius: var(--br, 2px);
  animation: float var(--d, 8s) ease-in-out infinite alternate;
}
@keyframes float {
  to { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 40deg)); }
}
/* 16 posiciones de borde (0-3 % / 96-100 %). */
.cf--1  { --x: 1%;  --y: 4%;  --c: #C8175F; --r: 12deg;  --s: 13px; --d: 7s;  --br: 50%; }
.cf--2  { --x: 97%; --y: 6%;  --c: #FFC83D; --r: 48deg;  --s: 11px; --d: 9s; }
.cf--3  { --x: 4%;  --y: 97%; --c: #007F7A; --r: 36deg;  --s: 15px; --d: 8s;  --br: 50%; }
.cf--4  { --x: 96%; --y: 94%; --c: #4A2599; --r: 72deg;  --s: 12px; --d: 10s; }
.cf--5  { --x: 2%;  --y: 38%; --c: #E8531C; --r: 18deg;  --s: 10px; --d: 6s; }
.cf--6  { --x: 98%; --y: 42%; --c: #C8175F; --r: 60deg;  --s: 14px; --d: 8s;  --br: 50%; }
.cf--7  { --x: 16%; --y: 1%;  --c: #4A2599; --r: 92deg;  --s: 11px; --d: 9s; }
.cf--8  { --x: 84%; --y: 2%;  --c: #FFC83D; --r: 24deg;  --s: 15px; --d: 7s; }
.cf--9  { --x: 12%; --y: 98%; --c: #FFC83D; --r: 8deg;   --s: 12px; --d: 10s; --br: 50%; }
.cf--10 { --x: 88%; --y: 97%; --c: #007F7A; --r: 56deg;  --s: 10px; --d: 6s; }
.cf--11 { --x: 33%; --y: 1%;  --c: #E8531C; --r: 100deg; --s: 13px; --d: 8s;  --br: 50%; }
.cf--12 { --x: 67%; --y: 2%;  --c: #C8175F; --r: 30deg;  --s: 12px; --d: 9s; }
.cf--13 { --x: 1%;  --y: 68%; --c: #FFC83D; --r: 66deg;  --s: 14px; --d: 7s; }
.cf--14 { --x: 98%; --y: 70%; --c: #E8531C; --r: 84deg;  --s: 11px; --d: 10s; --br: 50%; }
.cf--15 { --x: 28%; --y: 98%; --c: #4A2599; --r: 20deg;  --s: 12px; --d: 8s; }
.cf--16 { --x: 73%; --y: 98%; --c: #C8175F; --r: 52deg;  --s: 14px; --d: 6s;  --br: 50%; }
.confetti--free { inset: -12%; }
.confetti--free .cf--1  { --x: 18%; --y: 22%; }
.confetti--free .cf--2  { --x: 78%; --y: 12%; }
.confetti--free .cf--3  { --x: 12%; --y: 76%; }
.confetti--free .cf--4  { --x: 86%; --y: 82%; }
.confetti--free .cf--5  { --x: 42%; --y: 8%;  }
.confetti--free .cf--6  { --x: 58%; --y: 92%; }
.confetti--free .cf--7  { --x: 6%;  --y: 48%; }
.confetti--free .cf--8  { --x: 92%; --y: 50%; }
.confetti--free .cf--9  { --x: 32%; --y: 38%; }
.confetti--free .cf--10 { --x: 70%; --y: 66%; }

/* ---------- Botones ---------- */
.btn, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: .75rem 1.5rem;
  font: 800 1rem/1 var(--font-body);
  color: var(--color-white);
  background: var(--color-magenta);
  border: var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sticker-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast);
}
.btn:hover, .button:hover {
  background: var(--color-magenta-dark);
  color: var(--color-white);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--color-ink);
}
.btn:active, .button:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--color-ink); }
.btn[disabled], .btn[aria-disabled="true"], .button[disabled], .button[aria-disabled="true"] {
  background: var(--color-disabled);
  color: var(--color-white);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn--sun, .button-light { background: var(--color-sun); color: var(--color-ink); }
.btn--sun:hover, .button-light:hover { background: var(--color-sun-hover); color: var(--color-ink); }
.btn--ghost, .button-secondary { background: var(--color-white); color: var(--color-ink); }
.btn--ghost:hover, .button-secondary:hover { background: var(--color-lav); color: var(--color-ink); }
.btn--ink { background: var(--color-ink); color: var(--color-white); }
.btn--ink:hover { background: var(--color-violet-dark); color: var(--color-white); }
.btn--sm, .button-small { min-height: var(--tap); padding: .4rem .9rem; font-size: .875rem; }
.btn:focus-visible, .menu-btn:focus-visible, .thumb:focus-visible {
  box-shadow: var(--shadow-sticker-sm), 0 0 0 6px var(--color-sun);
}
.link-arrow, .text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 800;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-magenta);
  text-decoration-thickness: 4px;
}
.link-arrow:hover, .text-link:hover { color: var(--color-magenta-dark); }
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block: var(--space-5);
}
.rows-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Barra de utilidades y pausa global ---------- */
.utility {
  background: var(--color-violet);
  color: var(--color-white);
  font-size: var(--fs-small);
}
.utility .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: flex-end;
  padding-block: var(--space-2);
}
.utility p { margin: 0; }
.utility .btn { min-height: var(--tap); }
.util-note { display: none; }
html.no-js .utility { display: none; }
@media (min-width: 768px) {
  .util-note { display: block; flex: 1; }
}

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-paper);
  border-bottom: var(--border);
}
.header-in, .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  min-width: 0;
}
.brand-text { min-width: 0; }
.brand-logo {
  display: block;
  flex: none;
  width: 56px;
  height: auto;
}
@media (min-width: 768px) {
  .brand-logo { width: 72px; }
}
.brand small {
  display: block;
  font: 800 var(--fs-micro)/1.35 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-violet);
}
.brand strong {
  display: block;
  font: 900 var(--fs-brand)/1 var(--font-display);
}
.lema {
  display: none;
  margin: .35rem 0 0;
  font: 700 var(--fs-micro)/1.2 var(--font-body);
  color: var(--color-muted);
}
.menu-btn {
  white-space: nowrap;
  min-height: 48px;
  padding: .5rem 1rem;
  background: var(--color-sun);
  color: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-pill);
  font: 800 1rem var(--font-body);
  cursor: pointer;
  box-shadow: var(--shadow-sticker-sm);
}
.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-paper);
  border-bottom: var(--border);
  padding: var(--space-4) var(--gutter) var(--space-5);
}
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .75rem 1rem;
  border-radius: var(--radius-m);
  font: 800 1.125rem var(--font-body);
  color: var(--color-ink);
  text-decoration: none;
  border: 2px solid transparent;
}
.nav a:not(.btn):hover { background: var(--color-lav); }
.nav a[aria-current="page"] { background: var(--color-ink); color: var(--color-sun); }
.nav .btn { margin-top: var(--space-3); width: 100%; justify-content: center; }
.nav-account { overflow-wrap: anywhere; text-align: center; }
@media (max-width: 1023px) {
  .nav.open {
    display: block;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
  }
  html.no-js .nav {
    display: block;
    position: static;
    border-bottom: 0;
    padding: 0 var(--gutter) var(--space-4);
  }
  html.no-js .menu-btn { display: none; }
}
@media (min-width: 768px) { .lema { display: block; } }
@media (min-width: 1024px) {
  .menu-btn { display: none; }
  .nav {
    display: flex;
    position: static;
    border: 0;
    padding: 0;
    background: none;
    align-items: center;
    gap: var(--space-4);
  }
  .nav ul { display: flex; gap: var(--space-1); }
  .nav a:not(.btn) { padding: .5rem .9rem; font-size: 1rem; min-height: var(--tap); }
  .nav .btn { margin: 0; width: auto; min-height: 44px; padding: .6rem 1.1rem; }
}

/* Compatibilidad con la cabecera antigua mientras se convierten las vistas. */
.header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.header-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.utility-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 700;
  color: var(--color-ink);
}
.main-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-2) var(--space-4); }
.main-nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink); font-weight: 700; }
.main-nav a[aria-current] { color: var(--color-magenta-dark); text-decoration-thickness: 4px; }
.menu-toggle { min-height: var(--tap); padding: .5rem .9rem; background: var(--color-sun); border: var(--border); border-radius: var(--radius-pill); font-weight: 800; }
.nav-note { margin-left: auto; color: var(--color-muted); font-size: var(--fs-small); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-paper);
  padding-block: var(--space-7) var(--space-8);
}
.hero-grid { display: grid; gap: var(--space-6); align-items: center; position: relative; }
.hero h1 { text-wrap: wrap; }
.hero h1 mark {
  background: var(--color-sun);
  color: var(--color-ink);
  padding: 0 .15em;
  border-radius: .15em;
  display: inline-block;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-sticker-sm);
  border: var(--border);
}
.hero h1 em { font-style: normal; color: var(--color-magenta); }
.hero-art { position: relative; max-width: 15rem; margin-inline: auto; width: 100%; }
.hero-art .logo-card {
  aspect-ratio: 1;
  border: var(--border);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-sticker);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 5%;
  position: relative;
}
.hero-art .logo-card img { width: 100%; height: 100%; object-fit: contain; }
.hero-art .sticker {
  position: absolute;
  right: -4px;
  bottom: 6%;
  background: var(--color-sun);
  border: var(--border);
  border-radius: 50%;
  width: 6rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  text-align: center;
  font: 900 .9375rem/1.1 var(--font-display);
  transform: rotate(12deg);
  box-shadow: var(--shadow-sticker-sm);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-block: var(--space-5); }
.place { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.hero-art .confetti { inset: -12%; }
@media (min-width: 768px) {
  .hero-art { max-width: 26rem; }
  .hero-grid { grid-template-columns: 1.25fr .85fr; }
  .hero { padding-block: var(--space-8) var(--space-9); }
}
/* Compatibilidad con el hero antiguo. */
.hero-copy, .hero-photo { min-width: 0; }
.hero-copy h1 { font-size: var(--fs-hero); }
.hero-lead { font-size: var(--fs-lead); max-width: 30rem; }
.hero-location { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-weight: 700; }
.hero-photo-frame { border: var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--color-lav); box-shadow: var(--shadow-sticker); }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-slide figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); font-size: var(--fs-small); color: var(--color-muted); }
.hero-carousel-controls { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.hero-stamp { display: none; }
.hero-confetti { display: none; }

.hero-reserve { min-height: 20rem; display: grid; place-items: center; text-align: center; padding: var(--space-5); }
.hero-reserve span { font: 900 2rem var(--font-display); color: var(--color-magenta); }

/* ---------- Marquesina ---------- */
.marquee {
  background: var(--color-ink);
  color: var(--color-sun);
  border-block: var(--border);
  overflow: hidden;
  white-space: nowrap;
}
.marquee div {
  display: inline-flex;
  gap: var(--space-6);
  padding: var(--space-3) 0;
  font: 900 1.125rem var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  animation: marquee 32s linear infinite;
}
.marquee:hover div, .marquee:focus-within div { animation-play-state: paused; }
.marquee span::after { content: "✦"; margin-left: var(--space-6); color: var(--color-magenta); }
.marquee .dup { display: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (min-width: 768px) { .marquee .dup { display: inline; } }

/* ---------- Carrusel ---------- */
.carousel { background: var(--color-violet-dark); color: var(--color-white); position: relative; overflow: hidden; }
.carousel h2 { color: var(--color-white); }
.car-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.car-stage {
  position: relative;
  border: var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-ink);
  box-shadow: 6px 6px 0 var(--color-sun);
}
.car-track { display: flex; transition: transform var(--dur-slow) var(--ease); }
.car-slide { flex: 0 0 100%; aspect-ratio: 4 / 3; position: relative; max-height: 26rem; }
.car-slide img { width: 100%; height: 100%; object-fit: cover; }
.car-cap {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  background: var(--color-sun);
  color: var(--color-ink);
  border: var(--border);
  border-radius: var(--radius-pill);
  padding: .4rem .9rem;
  font: 800 .875rem var(--font-body);
}
.car-ctrl { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
.car-ctrl .count { font: 800 var(--fs-eyebrow) var(--font-body); letter-spacing: .14em; margin-left: auto; }
.car-link { display: block; height: 100%; }
html.no-js .car-track { display: block; }
html.no-js .car-slide { max-height: none; }
html.no-js .car-slide + .car-slide { margin-top: var(--space-4); }
html.no-js .car-ctrl { display: none; }
@media (min-width: 768px) {
  .car-slide { aspect-ratio: 16 / 8; }
  .car-head { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- Rejillas y tarjetas ---------- */
.grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sticker);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.card:hover, .card:focus-within { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 9px 9px 0 var(--color-ink); }
.card:has(a:focus-visible) { outline: 3px solid var(--color-ink); outline-offset: 3px; box-shadow: var(--shadow-sticker), 0 0 0 6px var(--color-sun); }
.card h2 a:focus-visible, .card h3 a:focus-visible { outline: none; box-shadow: none; }
.card-media { border-bottom: var(--border); aspect-ratio: 16 / 7; background: var(--color-lav); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card-body h2, .card-body h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.2; }
.card-body h2 a, .card-body h3 a { color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.card-body h2 a::after, .card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.card-body p { margin: 0; color: var(--color-muted); }
.tag {
  display: inline-block;
  align-self: flex-start;
  font: 800 var(--fs-eyebrow)/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .7rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-ink);
  background: var(--color-mint);
  color: var(--color-ink);
}
.tag--b { background: var(--color-lav); }
.card:nth-child(3n+2) .tag { background: var(--color-pink); }
.card:nth-child(3n) .tag { background: var(--color-sun); }
.card--album .card-media { aspect-ratio: 1; }
.card--album .year { font: 900 2rem/1 var(--font-display); color: var(--color-magenta); }
.card--static:hover { transform: none; box-shadow: var(--shadow-sticker); }
.card--static:focus-within { transform: none; box-shadow: var(--shadow-sticker); }
.card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, .7) 0 6%, transparent 6.5%),
    linear-gradient(135deg, var(--color-lav), var(--color-pink));
  color: var(--color-violet-dark);
  font: 900 3rem/1 var(--font-display);
}
@media (min-width: 768px) {
  .card-media { aspect-ratio: 4 / 3; }
  .grid--albums, .grid--albums3, .grid--albums4 { grid-template-columns: repeat(3, 1fr); }
  .grid--albums { gap: var(--space-6); }
  .grid--albums .card-body { padding: var(--space-5); }
  .grid--albums .card-body h2, .grid--albums .card-body h3 { font-size: var(--fs-h3); }
  .card--album .year { font-size: 3rem; }
}
@media (min-width: 1024px) { .grid--albums4 { grid-template-columns: repeat(4, 1fr); } }
/* Álbumes en móvil: 2 columnas compactas. */
.grid--albums, .grid--albums3, .grid--albums4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .grid--albums, .grid--albums3, .grid--albums4 { gap: var(--space-6); grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid--albums4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
  .grid--albums .card-body { padding: var(--space-3); }
  .grid--albums .card-body h2, .grid--albums .card-body h3 { font-size: 1rem; }
  .grid--albums .card--album .year { font-size: 2rem; }
}

/* Compatibilidad con las rejillas antiguas. */
.article-grid, .album-grid, .video-grid, .photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 768px) {
  .article-grid, .album-grid, .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .article-grid, .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.article-card, .album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sticker);
  overflow: hidden;
}
.article-card > a, .album-card > a { color: inherit; text-decoration: none; display: block; }
.card-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-lav); }
.card-image img { width: 100%; height: 100%; object-fit: cover; }
.card-copy, .album-copy { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.album-copy { flex-direction: row; justify-content: space-between; align-items: flex-end; }
.article-card h3, .album-card h3 { margin: 0; font-size: var(--fs-h3); }
.article-card h3 a, .album-card h3 a { color: var(--color-ink); text-decoration: none; }
.article-card h3 a::after, .album-card h3 a::after { content: ""; position: absolute; inset: 0; }
.card-arrow, .album-arrow { color: var(--color-magenta); font-weight: 900; }
.image-reserve { display: grid; place-items: center; min-height: 12rem; padding: var(--space-4); background: var(--color-lav); color: var(--color-violet-dark); font-weight: 700; text-align: center; }

/* ---------- Bandas y bloques ---------- */
.band-violet { color: var(--color-white); position: relative; overflow: hidden; }
.band-violet h2 { color: var(--color-white); }
.band-violet .eyebrow { background: var(--color-sun); color: var(--color-ink); }
.band-violet a:not(.btn) { color: var(--color-sun); }
.band-sun { background: var(--color-sun); border-block: var(--border); }
.member-cta { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 768px) { .member-cta { grid-template-columns: 1fr auto; } }
.archive-strip { border-block: var(--border); background: var(--color-white); }
.archive-strip .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-4); }
.archive-strip p { margin: 0; font: 900 1.25rem var(--font-display); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-heading h2 { margin: 0; }
.history-panel { background: var(--color-violet); color: var(--color-white); border-radius: var(--radius-l); border: var(--border); padding: var(--space-6); }
.history-panel h2 { color: var(--color-white); }
.history-panel .eyebrow { background: var(--color-sun); color: var(--color-ink); }
.members-strip { display: grid; gap: var(--space-4); align-items: center; margin-top: var(--space-6); background: var(--color-sun); border: var(--border); border-radius: var(--radius-l); padding: var(--space-6); }
@media (min-width: 768px) { .members-strip { grid-template-columns: 1fr auto; } }

/* ---------- Cabecera de página y migas ---------- */
.page-head {
  background: var(--color-pink);
  border-bottom: var(--border);
  padding-block: var(--space-7) var(--space-6);
  position: relative;
  overflow: hidden;
}
.page-head h1 { font-size: var(--fs-page-h1); }
.page-head--work { background: var(--color-mint); }
.page-head--work h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
.page-head--art h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); }
.breadcrumb { font-size: var(--fs-small); margin-bottom: var(--space-3); }
.breadcrumb ol { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; font-weight: 700; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); margin-bottom: var(--space-4); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--tap); }
.page-heading { max-width: 48rem; margin-bottom: var(--space-6); }
.page-heading h1 { font-size: var(--fs-page-h1); }
.page-heading > p:last-child { max-width: var(--reading); color: var(--color-muted); font-size: var(--fs-lead); }

/* ---------- Prosa, historia y artículos ---------- */
.reading { max-width: var(--reading); margin-inline: auto; }
.prose { max-width: var(--reading); overflow-wrap: anywhere; }
.prose h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-top: var(--space-6); }
.prose h3 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose img { max-width: 100% !important; height: auto !important; margin-block: var(--space-5); border-radius: var(--radius-m); }
.prose iframe, .prose video { max-width: 100%; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose td, .prose th { padding: .5rem; border: 2px solid var(--color-ink); }
.prose blockquote { border-left: 6px solid var(--color-magenta); margin: var(--space-6) 0; padding-left: var(--space-5); font-family: var(--font-display); font-size: 1.5rem; }
.article-detail header { margin-bottom: var(--space-6); }
.article-detail h1 { font-size: var(--fs-page-h1); }
.article-cover { margin-block: var(--space-6); }
.article-cover img { width: 100%; max-height: 55rem; object-fit: contain; background: var(--color-lav); border: var(--border); border-radius: var(--radius-l); }
.article-cover figcaption { padding-top: var(--space-3); color: var(--color-muted); font-size: var(--fs-small); }
.article-back { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border); }
.hist-fig, .art-fig { margin: 0 0 var(--space-6); max-width: none; }
.hist-fig img, .art-fig img { border: var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-sticker); aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.hist-fig figcaption, .art-fig figcaption { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--fs-small); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: var(--border); margin-left: .75rem; }
.timeline li { position: relative; padding: 0 0 var(--space-5) var(--space-6); max-width: var(--reading); }
.timeline li::before { content: ""; position: absolute; left: -.8rem; top: .35rem; width: 1.1rem; height: 1.1rem; background: var(--color-sun); border: var(--border); transform: rotate(45deg); }
.timeline .y { display: block; font: 900 1.75rem/1 var(--font-display); color: var(--color-magenta); margin-bottom: var(--space-2); }
.tl-fig { padding-bottom: var(--space-5); }
.toolbar { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 768px) { .toolbar { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Formularios ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); min-width: 0; }
.field label { font-weight: 800; }
.field .hint, .field-help { font-size: var(--fs-small); color: var(--color-muted); line-height: 1.5; }
input, select, textarea {
  font: inherit;
  color: var(--color-ink);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-m);
  padding: .75rem 1rem;
  min-height: 48px;
  width: 100%;
}
input:hover, select:hover, textarea:hover { background: var(--color-lav); }
input:focus-visible, select:focus-visible, textarea:focus-visible { background: var(--color-white); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--color-magenta-dark);
  box-shadow: 4px 4px 0 var(--color-magenta-dark);
}
input[aria-invalid="true"]:focus-visible { box-shadow: 4px 4px 0 var(--color-magenta-dark), 0 0 0 6px var(--color-sun); }
input:disabled, select:disabled, textarea:disabled { background: var(--color-field-off); color: var(--color-muted); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
textarea { resize: vertical; }
input[type="file"] { padding: .5rem; }
input[type="file"]::file-selector-button { font: inherit; padding: .5rem .75rem; border: 2px solid var(--color-ink); border-radius: var(--radius-m); background: var(--color-sun); color: var(--color-ink); margin-right: var(--space-3); cursor: pointer; }
.err { color: var(--color-magenta-dark); font-weight: 700; font-size: var(--fs-small); }
.form-card, .form-panel {
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sticker);
  padding: var(--space-5);
  min-width: 0;
}
.form-card { max-width: 34rem; }
.form-card.wide { max-width: none; }
.form-card.wide2 { max-width: 48rem; }
.container > .form-card:not(.wide):not(.wide2) { margin-inline: auto; }
.form-panel h2 { font-size: 1.75rem; }
.form-note { margin-top: var(--space-6); max-width: 34rem; }
.cols-2 { display: grid; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.cols-2 > .field { margin-bottom: 0; }
@media (min-width: 768px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
fieldset { border: var(--border); border-radius: var(--radius-m); padding: var(--space-4); margin: 0 0 var(--space-4); min-width: 0; }
legend { font-weight: 800; padding-inline: var(--space-2); }
.search-form { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; max-width: 48rem; }
.search-form .field { flex: 1 1 15rem; margin: 0; }
.search-form > .text-link { align-self: flex-end; }
.filter-form { margin-bottom: var(--space-5); }
.results-summary { margin-block: var(--space-5); color: var(--color-muted); font-weight: 700; }
.result-count { margin: 0 0 var(--space-4); font-weight: 800; }
.result-count .muted { font-weight: 600; }
.more { margin: var(--space-6) 0 0; text-align: center; }
.search-results { margin-top: var(--space-7); }
.search-prompt { margin-top: var(--space-7); border-top: var(--border); padding-top: var(--space-5); font: 900 2rem/1.15 var(--font-display); color: var(--color-muted); }
.empty-state { padding: var(--space-6); border: var(--border); background: var(--color-white); border-radius: var(--radius-m); box-shadow: var(--shadow-sticker-sm); }
.empty-state p { max-width: var(--reading); }
.empty-state h2 { font-size: 1.5rem; }
.empty-note { color: var(--color-muted); }

/* ---------- Avisos, toast y estados ---------- */
.notice, .flash {
  background: var(--color-sun);
  border: var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  margin-bottom: var(--space-5);
}
.notice p, .flash p { margin: 0 0 var(--space-2); }
.notice p:last-child, .flash p:last-child { margin-bottom: 0; }
.notice a, .flash a { color: inherit; }
.notice-success, .notice--success, .flash.success { background: var(--color-mint); }
.notice-error, .notice--error, .flash.error { background: var(--color-pink); color: var(--color-magenta-dark); }
.notice-warning, .notice--warning, .flash.notice, .flash.info { background: var(--color-sun); }
.toast {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  max-width: 28rem;
  margin: 0;
  background: var(--color-sun);
  border: var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
}
.toast:empty { border: 0; padding: 0; opacity: 0; height: 0; overflow: hidden; pointer-events: none; box-shadow: none; }
.pending {
  display: inline-block;
  background: var(--color-sun);
  color: var(--color-ink);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-small);
  padding: var(--space-1) var(--space-3);
  border: 2px dashed var(--color-ink);
  border-radius: var(--radius-m);
}
.source { background: var(--color-lav); border: var(--border); border-radius: var(--radius-m); padding: var(--space-4); }

/* ---------- Zona de miembros ---------- */
.members-bar { background: var(--color-ink); color: var(--color-white); padding-block: var(--space-3); }
.members-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.members-session { margin: 0; }
.members-bar nav { width: 100%; }
.members-bar ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0; padding: 0; }
.members-bar a, .members-logout {
  color: var(--color-white);
  padding: .5rem .9rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  background: none;
  border: 0;
  font-size: inherit;
  cursor: pointer;
}
.members-bar a:hover, .members-logout:hover { background: var(--color-violet); color: var(--color-white); }
.members-bar a[aria-current="page"] { background: var(--color-sun); color: var(--color-ink); }
.members-bar form { margin: 0; }
@media (min-width: 768px) {
  .members-bar nav { width: auto; }
  .members-bar ul { display: flex; flex-wrap: wrap; }
}
.badge {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-ink);
  font: 800 .75rem var(--font-body);
  background: var(--color-mint);
}
.badge--draft { background: var(--color-pink); }
.badge--priv { background: var(--color-lav); }
.badge--on-dark { background: var(--color-sun); color: var(--color-ink); }

/* ---------- Tablas ---------- */
.table-wrap {
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius-m);
  background: var(--color-white);
}
table { border-collapse: collapse; width: 100%; }
@media (min-width: 768px) { table { min-width: 34rem; } }
.rowh { background: none; text-transform: none; letter-spacing: 0; font-size: 1rem; }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 2px solid var(--color-ink); vertical-align: middle; }
th { background: var(--color-lav); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
@media (max-width: 767px) {
  .table-wrap { border: 0; background: none; overflow: visible; }
  table.stack, table.stack tbody, table.stack tr, table.stack td, table.stack th { display: block; min-width: 0; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack tr {
    background: var(--color-white);
    border: var(--border);
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sticker-sm);
  }
  table.stack td, table.stack th { border: 0; padding: .25rem 0; }
  table.stack td::before { content: attr(data-label); display: block; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
}

/* ---------- Galería y visor ---------- */
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); padding: 0; margin: 0 0 var(--space-6); }
.gallery li { list-style: none; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.thumb {
  border: var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  padding: 0;
  background: var(--color-white);
  cursor: pointer;
  box-shadow: var(--shadow-sticker-sm);
  aspect-ratio: 1;
  display: block;
  width: 100%;
  transition: transform var(--dur-fast) var(--ease);
}
.thumb:hover { transform: translate(-2px, -2px) rotate(-1deg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-card { min-width: 0; }
.photo-card > a { display: block; position: relative; background: var(--color-lav); border: var(--border); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-sticker-sm); }
.photo-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-expand { position: absolute; bottom: .5rem; right: .5rem; background: var(--color-sun); color: var(--color-ink); border: 2px solid var(--color-ink); padding: .35rem .65rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 800; }
.photo-card figcaption { padding-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }
.pager, .pagination { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-5) 0; }
.pager p, .pagination p { margin: 0; font-weight: 800; flex: 1 1 100%; }
.lightbox {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.lb-in { max-width: 60rem; width: 100%; background: var(--color-paper); border: var(--border); border-radius: var(--radius-l); overflow: auto; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.lb-img img { width: 100%; max-height: 70dvh; object-fit: contain; background: var(--color-ink); }
.lb-bar { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
body.lb-open { overflow: hidden; }
/* Diálogo antiguo conservado por compatibilidad; ya no se inserta en el layout. */
.photo-dialog { max-width: calc(100% - 2rem); width: 70rem; max-height: calc(100dvh - 2rem); padding: var(--space-4); border: var(--border); border-radius: var(--radius-m); background: var(--color-white); color: var(--color-ink); overflow: auto; }
.photo-dialog::backdrop { background: var(--overlay); }

/* ---------- Vídeos ---------- */
.video-card .card-media, .video-card .play { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--color-violet); border-bottom: var(--border); }
.video-card .play span { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--color-sun); border: var(--border); display: grid; place-items: center; font-size: 1.75rem; box-shadow: var(--shadow-sticker-sm); }
.video-art { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--color-violet); color: var(--color-white); border-bottom: var(--border); }
.video-art span { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--color-sun); color: var(--color-ink); border: var(--border); display: grid; place-items: center; box-shadow: var(--shadow-sticker-sm); }
.video-art small { display: block; margin-top: var(--space-3); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Pie ---------- */
.site-footer { background: var(--color-ink); color: var(--color-white); margin-top: var(--space-8); }
.site-footer .bunting { background-color: var(--color-paper); }
.site-footer a { color: var(--color-sun); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer h2 { font-size: 1.125rem; color: var(--color-sun); }
.foot-grid { display: grid; gap: var(--space-6); padding-block: var(--space-7); }
.foot-brand { font: 900 1.5rem var(--font-display); margin: 0 0 var(--space-3); }
@media (min-width: 768px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer p a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* Compatibilidad con el pie antiguo. */
.footer-grid { display: grid; gap: var(--space-6); padding-block: var(--space-7); }
.footer-grid p { color: var(--color-white); }
.footer-brand { font: 900 1.5rem var(--font-display); color: var(--color-sun); text-decoration: none; }
.footer-grid nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid a:not(.footer-brand) { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-sun); }
.footer-bottom { border-top: 2px solid var(--color-violet); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-5); color: var(--color-lav); font-size: var(--fs-small); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Confeti de ráfaga ---------- */
.burst { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-burst); overflow: hidden; }
.burst i { position: absolute; left: 50%; top: 60%; width: 10px; height: 14px; background: var(--c); animation: burst 1.4s var(--ease) forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* ---------- Compatibilidad: cuenta, panel, subida y administración ---------- */
.account-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .account-grid { grid-template-columns: 1fr 1fr; } }
.account-page .page-heading { max-width: none; }
.account-facts { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); min-width: 0; }
.account-facts div { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.account-facts dt { font-weight: 800; color: var(--color-muted); }
.account-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.account-grid > * { min-width: 0; }
.account-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.account-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.session-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: center; border: 2px solid var(--color-ink); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); background: var(--color-paper); }
.session-identity { display: grid; gap: var(--space-1); min-width: 0; }
.session-identity small { color: var(--color-muted); }
.status-badge { display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 800; border: 2px solid var(--color-ink); background: var(--color-mint); }
.status-current { background: var(--color-sun); }
.status-active { background: var(--color-mint); }
.status-suspended { background: var(--color-pink); }
.session-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.admin-layout { display: grid; gap: var(--space-6); }
.admin-layout > * { min-width: 0; }
@media (min-width: 1024px) { .admin-layout { grid-template-columns: 1fr 1fr; align-items: start; } }
.admin-user-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.admin-user-list li { border-top: 2px solid var(--color-ink); padding-top: var(--space-4); }
.account-row { display: grid; gap: var(--space-3); }
.account-identity { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.account-identity small { color: var(--color-muted); }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.account-actions form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.account-actions select { min-width: 10rem; }
.account-profile { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 768px) { .account-profile { grid-template-columns: 1fr 1fr auto; align-items: end; } .account-profile .field { margin-bottom: 0; } }
.account-sent { display: block; }
.admin-logout { margin-top: var(--space-6); }
.temporary-password { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.1rem; background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius-m); padding: .5rem .75rem; display: inline-block; }
.member-upload { max-width: 48rem; margin-inline: auto; }
.member-session { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.member-session p { margin: 0; }
.upload-publication-note { background: var(--color-lav); border: var(--border); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); font-weight: 700; }
.file-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.file-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: center; border: 2px solid var(--color-ink); border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); background: var(--color-paper); }
.file-list button { min-height: var(--tap); padding: .35rem .8rem; background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); font-weight: 800; cursor: pointer; }
.file-invalid { color: var(--color-magenta-dark); font-weight: 800; }
.editorial-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.editorial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.editorial-list li { border-top: 2px solid var(--color-ink); padding-top: var(--space-3); display: grid; gap: var(--space-1); }
.editorial-list small { color: var(--color-muted); }
.editorial-badge { display: inline-block; font-size: var(--fs-small); font-weight: 800; color: var(--color-violet-dark); }
.editorial-fields { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .editorial-fields { grid-template-columns: 1fr 1fr 1fr; } .editorial-fields .field { margin-bottom: 0; } }
.editorial-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.editorial-toolbar button { min-height: var(--tap); padding: .35rem .8rem; background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); font-weight: 800; cursor: pointer; }
.editorial-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-block: var(--space-3); }
@media (min-width: 768px) { .editorial-selector { grid-template-columns: repeat(4, 1fr); } }
.editorial-selector button { background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius-m); padding: var(--space-2); cursor: pointer; font-weight: 700; }
.editorial-cover { max-width: min(20rem, 100%); height: auto; border: var(--border); border-radius: var(--radius-m); }
.editorial-photos .photo-card { background: var(--color-white); border: 2px solid var(--color-ink); border-radius: var(--radius-m); padding: var(--space-2); }
.editorial-danger { margin-top: var(--space-6); }
.editorial-danger summary { cursor: pointer; font-weight: 800; color: var(--color-magenta-dark); }
.create-album { margin-block: var(--space-4); }
.create-album summary { cursor: pointer; font-weight: 800; }
.error-page { max-width: var(--reading); }
.gallery-section { background: var(--color-paper); }
.form-note { color: var(--color-muted); }

/* ---------- Compatibilidad menor ---------- */
.card.narrow { max-width: 34rem; margin-inline: auto; padding: var(--space-5); }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.stack input { width: 100%; }
.link { background: none; border: 0; color: var(--color-magenta-dark); padding: 0; font-weight: 700; text-decoration: underline; cursor: pointer; }
button.link { min-height: var(--tap); }
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -.22em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-lockup { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-ink); }
.brand-symbol { display: grid; place-items: center; flex: none; width: 3.6rem; height: 3.6rem; border: var(--border); border-radius: 50%; background: var(--color-sun); color: var(--color-violet); box-shadow: var(--shadow-sticker-sm); }
.brand-symbol .icon { width: 2.15rem; height: 2.15rem; }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.65rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.wordmark-small { display: block; font-weight: 800; letter-spacing: .12em; margin-bottom: .2rem; color: var(--color-violet); }
.caption-index { font-size: var(--fs-micro); letter-spacing: .06em; }

/* ---------- Movimiento reducido y pausa global ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .marquee { white-space: normal; }
  .marquee div { flex-wrap: wrap; transform: none; padding-inline: var(--gutter); }
  .marquee .dup { display: none !important; }
  .card:hover, .card:focus-within { transform: none; }
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="off"] .marquee { white-space: normal; }
html[data-motion="off"] .marquee div { flex-wrap: wrap; transform: none; }
html[data-motion="off"] .marquee .dup { display: none !important; }
@media (max-width: 767px) {
  .hero > .confetti, .hero .confetti, .page-head .confetti { display: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .site-footer, .utility, .members-bar, .article-back, .lightbox, .toast, .actions { display: none !important; }
  .section { padding-block: 0; }
  body { background: #fff; color: #000; }
  .reading, .prose { max-width: none; }
  a { color: #000; }
  .prose img { break-inside: avoid; }
}