/* ============================================================
   publico.css — Común del frontend público («Crisálida»)
   Compartido por TODAS las páginas públicas (home, tour, música…):
     · Tokens de paleta/tipografía/layout (colores reales del CD).
     · Reset + fondo firma del sitio (gradiente en <body>, fixed).
     · Header + navegación + hamburguesa (partial layout/header.php).
     · Botones .btn y variantes genéricas.
     · Footer «Sígueme» + redes + copyright (partial layout/footer.php).
     · Scroll-reveal (.reveal) — interacciones en assets/js/publico.js.
   Cada página añade después su hoja propia (home.css, tour.css…).
   Las fuentes llegan de fonts.css (autoalojadas, regla del proyecto).
   NO se apoya en style.css (esa hoja es del backend/login/errores).
   ============================================================ */

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* palette — sampled from the CD */
  --crimson-deep: #8f0c30;
  --crimson: #b30f3d;
  --magenta: #d9184f;
  --magenta-2: #e8285f;
  --pink-glow: #f4658a;
  --ink: #160409;
  --paper: #ffffff;

  /* tweakable */
  --bg-hue: 0;            /* shifts the whole palette */
  --reveal-dist: 46px;    /* scroll-reveal travel */
  --reveal-dur: 900ms;    /* scroll-reveal duration */
  --font-display: "Chulapa", "Times New Roman", serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; background: var(--ink); }

body {
  font-family: var(--font-body);
  color: var(--paper);
  background-color: var(--crimson-deep);
  background-image:
    radial-gradient(70% 60% at 30% 36%, rgba(255,255,255,0.07), rgba(255,255,255,0) 60%),
    radial-gradient(80% 65% at 84% 4%, var(--pink-glow) 0%, rgba(244,101,138,0) 50%),
    radial-gradient(95% 110% at 10% 26%, var(--magenta-2) 0%, rgba(232,40,95,0) 56%),
    linear-gradient(152deg, var(--magenta) 0%, var(--crimson) 68%, var(--crimson-deep) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the signature Crisálida backdrop lives on <body> with background-attachment:fixed */

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(100% - calc(var(--gutter) * 2), var(--maxw)); margin-inline: auto; }

/* accesibilidad mínima */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* reserve the device safe-area (notch / Dynamic Island / status bar) so the
     logo + nav never sit underneath it on real phones */
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  transition: background .35s ease, backdrop-filter .35s ease, height .35s ease;
}
.site-header.scrolled {
  height: calc(66px + env(safe-area-inset-top, 0px));
  background: color-mix(in oklab, var(--crimson-deep) 62%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo img { height: 57px; width: auto; filter: brightness(0) invert(1); }
.logo .logo-sub {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  opacity: .8;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.4);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 44px);
}
/* Los enlaces del menú son hijos DIRECTOS del nav: el selector se acota a `>`
   para que el switcher de idioma (que vive en su propio bloque, también dentro
   del nav) no herede el subrayado animado ni el tamaño del panel móvil. */
.nav > a {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
  opacity: .92;
}
.nav > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav > a:hover::after, .nav > a.active::after { transform: scaleX(1); }
.nav > a.cta {
  padding: 9px 20px;
  border: 1.5px solid var(--paper);
  border-radius: 999px;
  letter-spacing: .12em;
}
.nav > a.cta::after { display: none; }
.nav > a.cta:hover { background: var(--paper); color: var(--crimson); }

/* Header reducido: solo logo y selector de idioma, sin menú ni CTA. Lo pintan
   las páginas que se sirven al público mientras el frontend está en
   «Próximamente» (hoy, las legales), donde el menú destaparía páginas todavía
   sin abrir y además todos sus enlaces devolverían el splash. Sin enlaces que
   separar, el hueco del flex sobra. El override del panel móvil está abajo. */
.nav--minimo { gap: 0; }

/* ---- Switcher de idioma ----
   A la derecha del todo, después del CTA (GUIDELINES §6). El idioma activo es
   un <span> con aria-current; el otro, un enlace real a la página equivalente
   —nada de JS: debe funcionar sin él y ser rastreable—. En el panel móvil cae
   al final por el mismo orden del marcado. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.lang-switch__item {
  /* 48px de alto también en desktop: convive con el CTA y se pulsa en táctil */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 48px;
  opacity: .55;
  transition: opacity .3s ease;
}
.lang-switch__item[aria-current] { opacity: 1; font-weight: 700; }
a.lang-switch__item:hover { opacity: 1; }
/* Separador dibujado, no escrito: un "·" en el HTML lo leería el lector de
   pantalla como contenido. Va centrado en el hueco del flex. */
.lang-switch__item + .lang-switch__item { position: relative; }
.lang-switch__item + .lang-switch__item::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 1px;
  height: 13px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: .45;
}

/* hamburger */
.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  position: relative;
  z-index: 60;
}
.burger span {
  position: absolute;
  left: 9px; right: 9px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: transform .35s ease, opacity .25s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Hero de página interior (imagen de cabecera + título)
   Compartido por Tour y Música: misma cabecera, distinto contenido.
   La imagen la sirve un <picture> AVIF+WebP; sin imagen subida se ve
   el fondo firma del sitio.
   ============================================================ */
.page-hero {
  position: relative;
  height: 78svh;
  min-height: 520px;
  max-height: 880px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero picture,
.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
}
.page-hero::before {
  /* velo cálido que integra la foto en la paleta carmesí */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,4,9,.35) 0%, rgba(20,4,9,0) 36%, rgba(143,12,48,.20) 72%, rgba(143,12,48,.55) 100%);
  pointer-events: none;
}
.page-hero::after {
  /* viñeta suave para que el título lea sobre texturas complicadas */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(60% 50% at 18% 90%, rgba(20,4,9,.55), transparent 70%);
  pointer-events: none;
}
.page-hero .hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(40px, 7vh, 88px);
}
.page-hero .eyebrow {
  font-size: 13px;
  letter-spacing: .42em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .92;
  margin-bottom: 18px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 12.6vw, 196px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.page-hero__texto {
  margin-top: 22px;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  max-width: 46ch;
  color: rgba(255,255,255,.92);
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--paper);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, color .3s;
}
.btn:hover { transform: translateY(-3px); }
.btn--ghost { background: transparent; color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
/* estado informativo sin enlace (Próximamente / Agotado):
   relleno claro casi opaco, como el botón normal pero no clicable */
.btn--muted {
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-color: transparent;
  pointer-events: none;
}
/* variante compacta (listados: fechas del tour, etc.) */
.btn--small {
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: .18em;
  white-space: nowrap;
}
.btn .arrow { transition: transform .3s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Olas de fondo — telón animado del sitio
   Compartido por Home (bajo «La artista» + «El álbum») y Música
   (bajo las plataformas). Se envuelven las secciones en .waves-zone.
   ============================================================ */
.waves-zone { position: relative; isolation: isolate; }
.waves-zone > section { position: relative; z-index: 1; }
.waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
/* capa del tamaño del viewport que queda pegada mientras se recorre la
   zona: mantiene el área animada en una sola pantalla (barato + fluido) */
.waves__vp {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* Dos oleajes de colores distintos que se cruzan. Anchos/periodos
   diferentes para que el cruce parezca orgánico (sin repetición
   evidente); repeat-x + translate de un tile = costuras invisibles. */
.waves .wave {
  position: absolute;
  top: 0; bottom: 0;
  background-repeat: repeat-x;
  will-change: transform;
}
/* oleaje rosa — cresta alta, deriva a la izquierda */
.wave--1 {
  left: -1800px; right: -1800px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1800'%20height='1000'%20viewBox='0%200%201800%201000'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23f4658a'/%3E%3Cstop%20offset='1'%20stop-color='%23c01045'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='340'%20cy='430'%20r='262'%20fill='url(%23g)'/%3E%3Ccircle%20cx='840'%20cy='560'%20r='180'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1230'%20cy='410'%20r='322'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1560'%20cy='600'%20r='210'%20fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: 1800px 100%;
  opacity: .62;
  animation: ola-a 76.9s linear infinite;
}
/* oleaje carmesí — cresta baja, deriva a la derecha */
.wave--2 {
  left: -1400px; right: -1400px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='1000'%20viewBox='0%200%201400%201000'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23b30f3d'/%3E%3Cstop%20offset='1'%20stop-color='%237a0a29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='250'%20cy='560'%20r='240'%20fill='url(%23g)'/%3E%3Ccircle%20cx='720'%20cy='430'%20r='292'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1150'%20cy='600'%20r='195'%20fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: 1400px 100%;
  opacity: .6;
  animation: ola-b 61.5s linear infinite;
}
@keyframes ola-a { from { transform: translate3d(0,0,0); }     to { transform: translate3d(-1800px,0,0); } }
@keyframes ola-b { from { transform: translate3d(-1400px,0,0); } to { transform: translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .wave--1, .wave--2 { animation: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  position: relative;
  padding: clamp(70px, 10vh, 120px) 0 48px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.footer-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-follow .kicker {
  font-size: 13px;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .85;
  margin-bottom: 18px;
}
.footer-follow h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(60px, 11vw, 168px);
  line-height: .82;
  text-transform: uppercase;
}
.socials {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.socials a {
  width: 54px; height: 54px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .3s, color .3s, transform .3s, border-color .3s;
}
.socials a svg { width: 22px; height: 22px; fill: currentColor; }
.socials a:hover {
  background: var(--paper);
  color: var(--crimson);
  border-color: var(--paper);
  transform: translateY(-4px);
}
.footer-base {
  margin-top: clamp(50px, 8vh, 90px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
}
.footer-base img { height: 26px; opacity: .9; }

/* Línea legal: aviso legal · privacidad · cookies. Al otro extremo de la misma
   fila que el copyright, y a la izquierda debajo cuando ya no caben las dos.
   El separador es un pseudoelemento y no un carácter en el HTML para que los
   lectores de pantalla lean tres enlaces y no tres enlaces con puntos. */
.footer-legal {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.footer-legal a {
  position: relative;
  opacity: .78;
  transition: opacity .25s;
}
.footer-legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-legal a + a::before {
  content: "·";
  position: absolute;
  left: -10px;
  opacity: .5;
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-dist));
  transition: opacity var(--reveal-dur) cubic-bezier(.2,.7,.2,1),
              transform var(--reveal-dur) cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Mobile — común (menú, footer, botones)
   ============================================================ */
@media (max-width: 860px) {
  :root { --header-h: 70px; }
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: linear-gradient(160deg, var(--magenta) 0%, var(--crimson-deep) 100%);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.7,0,.2,1);
    z-index: 55;
  }
  body.menu-open .nav { transform: translateX(0); }
  .nav > a { font-size: 26px; letter-spacing: .04em; }
  .nav > a.cta { border-width: 2px; padding: 14px 34px; font-size: 18px; }
  /* El switcher cierra el panel, y se agranda para dedos. */
  .lang-switch { font-size: 18px; gap: 12px; letter-spacing: .1em; }
  .lang-switch__item { min-width: 48px; }

  /* Entrada escalonada de TODO lo que hay en el panel —enlaces, CTA y
     switcher—, de ahí el `> *` en vez de `> a`. El número de hijos varía con
     las páginas activas del menú, así que se cubren más posiciones de las que
     hoy se pintan. */
  .nav > * { opacity: 0; transform: translateY(14px); }
  body.menu-open .nav > * {
    opacity: 1; transform: none;
    transition: opacity .4s ease, transform .4s ease;
  }
  body.menu-open .nav > *:nth-child(1){transition-delay:.12s}
  body.menu-open .nav > *:nth-child(2){transition-delay:.18s}
  body.menu-open .nav > *:nth-child(3){transition-delay:.24s}
  body.menu-open .nav > *:nth-child(4){transition-delay:.30s}
  body.menu-open .nav > *:nth-child(5){transition-delay:.36s}
  body.menu-open .nav > *:nth-child(6){transition-delay:.42s}

  /* El header reducido no tiene hamburguesa que despliegue el panel, así que
     no puede convertirse en uno: se queda en línea, junto al logo, y visible.
     Sin esto el selector de idioma quedaría fuera de pantalla y sin forma de
     traerlo de vuelta. */
  .nav--minimo {
    position: static;
    inset: auto;
    flex-direction: row;
    background: none;
    transform: none;
    z-index: auto;
  }
  .nav--minimo > * { opacity: 1; transform: none; }

  .page-hero { height: 64svh; min-height: 460px; }

  .footer-grid { flex-direction: column; align-items: flex-start; gap: 36px; }

  /* En móvil la línea legal baja bajo el copyright en vez de pelearse con él
     por el ancho. */
  .footer-base { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-legal { margin-left: 0; }

  /* hamburger open: instantly clear the header's backdrop-filter so the
     fixed .nav escapes the filter-induced containing block and covers the
     full viewport again. `transition: none` keeps it snappy — no fade-
     through that would briefly reveal the page beneath. */
  body.menu-open .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
  body.menu-open .logo { visibility: hidden; }
}

@media (max-width: 520px) {
  .btn { padding: 13px 24px; font-size: 13px; }
  .socials a { width: 48px; height: 48px; }

  /* Se alargan las olas un tile extra por lado para que el borde derecho
     del elemento no llegue nunca al viewport durante el ciclo (el corte
     aparece cuando borde_derecho = viewport_derecho con translate =
     -ancho_tile). En móvil el artefacto se nota más que en desktop. */
  .wave--1 { left: -3600px; right: -3600px; }
  .wave--2 { left: -2800px; right: -2800px; }

  /* En móvil entran SVGs más anchos (dos ciclos de ola por tile) y se
     desplaza el patrón con background-position para que la costura del
     tile quede siempre a la derecha del viewport. La animación sigue
     trasladando UN ciclo, así que el bucle sigue siendo continuo. */
  .wave--1 {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='3600'%20height='1000'%20viewBox='0%200%203600%201000'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23f4658a'/%3E%3Cstop%20offset='1'%20stop-color='%23c01045'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='340'%20cy='430'%20r='262'%20fill='url(%23g)'/%3E%3Ccircle%20cx='840'%20cy='560'%20r='180'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1230'%20cy='410'%20r='322'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1560'%20cy='600'%20r='210'%20fill='url(%23g)'/%3E%3Ccircle%20cx='2140'%20cy='430'%20r='262'%20fill='url(%23g)'/%3E%3Ccircle%20cx='2640'%20cy='560'%20r='180'%20fill='url(%23g)'/%3E%3Ccircle%20cx='3030'%20cy='410'%20r='322'%20fill='url(%23g)'/%3E%3Ccircle%20cx='3360'%20cy='600'%20r='210'%20fill='url(%23g)'/%3E%3C/svg%3E");
    background-size: 3600px 100%;
    background-position: 2900px 0;
  }
  .wave--2 {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='2800'%20height='1000'%20viewBox='0%200%202800%201000'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23b30f3d'/%3E%3Cstop%20offset='1'%20stop-color='%237a0a29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='250'%20cy='560'%20r='240'%20fill='url(%23g)'/%3E%3Ccircle%20cx='720'%20cy='430'%20r='292'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1150'%20cy='600'%20r='195'%20fill='url(%23g)'/%3E%3Ccircle%20cx='1650'%20cy='560'%20r='240'%20fill='url(%23g)'/%3E%3Ccircle%20cx='2120'%20cy='430'%20r='292'%20fill='url(%23g)'/%3E%3Ccircle%20cx='2550'%20cy='600'%20r='195'%20fill='url(%23g)'/%3E%3C/svg%3E");
    background-size: 2800px 100%;
    background-position: 2300px 0;
  }
}

/* ============================================================
   Tarjeta de álbum / fachada de reproductor  (.embed-cta)
   Subida aquí desde musica.css el 2026-08-13, al pasar a usarla dos
   páginas (regla de GUIDELINES §15). Un mismo aspecto, dos usos que se
   distinguen por la etiqueta HTML:

     sin data-embed  → plataformas sin reproductor embebible (YouTube
                       Music, Amazon Music): un enlace normal al servicio.
     con data-embed  → fachada de consentimiento de Spotify y Apple Music,
                       en Home y Música. publico.js intercepta el click y
                       la sustituye por el <iframe>. Hasta ese click no se
                       ha cargado NADA de terceros, que es lo que mantiene
                       el inventario de cookies en dos y al sitio sin
                       banner (RULES §1). Sin JS sigue siendo un enlace al
                       servicio, que también es una acción del usuario.

   Tres capas: imagen de fondo (<picture> AVIF+WebP, subible desde el
   admin) → velo de legibilidad (::before) → contenido. Sin imagen subida
   queda el degradado de marca de --cta-fondo.
   ============================================================ */
.embed-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 20px);
  text-align: center;
  padding: 26px;
  color: var(--paper);
  background: var(--cta-fondo, linear-gradient(150deg, var(--crimson) 0%, var(--crimson-deep) 100%));
  overflow: hidden;
}
.embed-cta--youtube { --cta-fondo: linear-gradient(150deg, #7a0f16 0%, #1a0407 100%); }
.embed-cta--amazon  { --cta-fondo: linear-gradient(150deg, #14707a 0%, #0b1b26 100%); }
.embed-cta--spotify { --cta-fondo: linear-gradient(150deg, #0f6b3c 0%, #04160d 100%); }
.embed-cta--apple   { --cta-fondo: linear-gradient(150deg, #8f2740 0%, #1a0407 100%); }

.embed-cta__bg { position: absolute; inset: 0; z-index: 0; display: block; }
.embed-cta__bg img { width: 100%; height: 100%; object-fit: cover; }

/* velo carmesí sobre la foto: mismo degradado del prototipo, que se
   aclara al pasar el ratón */
.embed-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--crimson-deep) 74%, transparent) 0%,
    color-mix(in oklab, var(--crimson-deep) 55%, transparent) 42%,
    color-mix(in oklab, var(--crimson-deep) 90%, black) 100%);
  transition: opacity .3s ease;
}
.embed-cta:hover::before { opacity: .84; }

.embed-cta__art,
.embed-cta__meta,
.embed-cta__brand,
.embed-cta__aviso { position: relative; z-index: 2; }

/* igual que en Linkfire: el ancho lo lleva el contenedor (item flex) para que
   la portada quede centrada respecto al álbum, el artista y la marca */
.embed-cta__art {
  display: block;
  line-height: 0;
  width: clamp(140px, 40%, 188px);
  margin-inline: auto;
}
.embed-cta__art picture { display: block; }
/* sin portada subida: el play se coloca solo, sin superponerse a nada */
.embed-cta__art--solo { line-height: 1; width: auto; }
.embed-cta__cover {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0,0,0,.5);
}
.embed-cta__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  padding-left: 3px;
  color: var(--paper);
  background: rgba(12,4,7,.5);
  border: 1.5px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform .25s ease, background .25s ease;
}
.embed-cta:hover .embed-cta__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(12,4,7,.68); }
.embed-cta__art--solo .embed-cta__play { position: static; transform: none; margin-inline: auto; }
.embed-cta:hover .embed-cta__art--solo .embed-cta__play { transform: scale(1.08); }
.embed-cta__meta { display: flex; flex-direction: column; gap: 5px; }
.embed-cta__album {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.embed-cta__artist {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.embed-cta__brand {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.5);
}

/* Aviso de la fachada: qué pasa al pulsar. Es lo que convierte el click en
   una petición informada de cargar el tercero, y por eso se muestra siempre,
   no en un tooltip. */
.embed-cta__aviso {
  max-width: 34ch;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: rgba(255,255,255,.66);
}

/* El iframe que sustituye a la fachada hereda el hueco entero. */
.embed-slot { position: relative; }
.embed-slot > iframe { display: block; border: 0; width: 100%; height: 100%; }

@media (max-width: 520px) {
  .embed-cta__aviso { font-size: 10.5px; max-width: 30ch; }
}

/* ============================================================
   Suscripción — modal y página
   ============================================================
   Del diseño «Newsletter suscripción modal» de Claude Design. Vive aquí y no
   en una hoja propia porque la modal está en TODAS las páginas públicas: el
   CTA que la abre es parte del header compartido (GUIDELINES §15, regla de
   «si lo usan dos páginas o más, sube a publico.css»).

   El mismo bloque sirve para los dos sitios donde aparece el panel:
     .nl              → capa flotante (modal), fija y centrada
     .nl.nl--pagina   → el mismo panel incrustado en /{lang}/{slug_suscribete}
   Lo que decide qué vista se ve es `data-view` en .nl__dialog, así que la
   regla funciona igual dentro y fuera de la modal.
   ============================================================ */

body.nl-open { overflow: hidden; }

.nl {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vh, 44px) clamp(14px, 4vw, 44px);
  font-family: var(--font-body);
}
.nl[hidden] { display: none; }

.nl__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12,2,6,.74);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
  opacity: 0;
  transition: opacity .38s ease;
}
.nl.is-open .nl__scrim { opacity: 1; }

.nl__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 960px);
  max-height: 100%;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--magenta) 0%, var(--crimson) 58%, var(--crimson-deep) 100%);
  box-shadow: 0 48px 110px rgba(9,1,4,.66);
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.nl.is-open .nl__dialog { opacity: 1; transform: none; }
.nl__dialog > * { min-height: 0; min-width: 0; }

/* Las tres vistas del panel. `data-view` lo escribe el servidor al pintar y lo
   cambia el JS al enviar o al abrir un documento legal. */
.nl__dialog[data-view="form"]  .nl__done,
.nl__dialog[data-view="form"]  .nl__legal,
.nl__dialog[data-view="done"]  .nl__form,
.nl__dialog[data-view="done"]  .nl__legal,
.nl__dialog[data-view="legal"] .nl__form,
.nl__dialog[data-view="legal"] .nl__done { display: none; }

.nl__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(12,2,6,.42);
  border: 1px solid rgba(255,255,255,.28);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .25s ease, transform .25s ease;
}
.nl__close:hover { background: rgba(12,2,6,.72); transform: rotate(90deg); }
.nl__close svg { width: 18px; height: 18px; }

/* ---- Lateral ---- */
.nl__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(26px, 2.6vw, 38px);
}
/* Retrato de fondo. Es un asset FIJO del repositorio, no una imagen subida
   desde el admin, así que no le aplica la prohibición de background-image de
   RULES §4.8: su nombre no lleva versión y no hay fallback AVIF→WebP que
   perder. Si algún día se hace editable, tendrá que pasar a <picture>. */
.nl__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/maria_01.avif") center 20% / cover no-repeat;
}
.nl__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,4,9,.3) 0%, rgba(143,12,48,.52) 44%, rgba(20,4,9,.88) 100%);
}
/* `align-self` es imprescindible, no cosmético: `.nl__aside` es un flex en
   columna, así que el eje transversal es el horizontal y el `stretch` por
   defecto estira la CAJA del <img> a todo el ancho. Como el logo es un SVG con
   `preserveAspectRatio`, no se deforma: se centra dentro de esa caja enorme, y
   acaba en mitad del lateral en vez de arriba a la izquierda, encima de la cara
   de la foto. Con `flex-start` la caja se ajusta al contenido. */
.nl__logo { align-self: flex-start; height: 42px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.nl__aside .kicker {
  font-size: 11px;
  letter-spacing: .36em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .86;
  margin-bottom: 12px;
}
.nl__aside h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4vw, 58px);
  line-height: .88;
  text-transform: uppercase;
}
.nl__lede {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.9);
  max-width: 26ch;
  text-wrap: pretty;
}
.nl__perks { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.nl__perks li { display: flex; gap: 11px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.86); }
.nl__perks li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  background: var(--paper);
  transform: rotate(45deg);
}

/* ---- Cuerpo ---- */
.nl__body {
  position: relative;
  overflow-y: auto;
  max-height: 100%;
  padding: clamp(24px, 2.6vw, 40px);
  background: color-mix(in oklab, var(--crimson-deep) 74%, black);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.nl__body::-webkit-scrollbar { width: 8px; }
.nl__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 99px; }
.nl__intro {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.76);
  max-width: 46ch;
  margin-bottom: 24px;
  padding-right: 56px;
  text-wrap: pretty;
}

/* Trampa para robots. Fuera de la pantalla en vez de `display: none`: hay
   robots que descartan los campos ocultos y así siguen picando. */
.nl__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso general del servidor (sesión caducada, demasiados intentos). */
.nl__aviso {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid var(--pink-glow);
  border-radius: 12px;
  background: rgba(244,101,138,.12);
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
}

.nl__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.nl__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nl__field[data-for="nombre"], .nl__field[data-for="email"] { grid-column: 1 / -1; }
.nl__field label {
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.72);
}
.nl__field label i { font-style: normal; color: var(--pink-glow); }
.nl__field input, .nl__field select {
  font: inherit;
  font-size: 15px;
  color: #fff;
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nl__field input::placeholder { color: rgba(255,255,255,.38); }
.nl__field input:focus, .nl__field select:focus {
  outline: none;
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,.13);
}
.nl__field select {
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='.7'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.nl__field select:invalid { color: rgba(255,255,255,.44); }
.nl__field select option { color: #160409; background: #fff; }
.nl__field.has-error input, .nl__field.has-error select {
  border-color: var(--pink-glow);
  background: rgba(244,101,138,.12);
}
.nl__err { display: none; font-size: 12px; line-height: 1.4; color: var(--pink-glow); }
.nl__err:not(:empty) { display: block; }
.nl__err--check { margin: -4px 0 0 34px; }

.nl__consents { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.nl__check { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 5px 0; }
.nl__check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.nl__box {
  flex: 0 0 auto;
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nl__check input:checked + .nl__box { background: var(--paper); border-color: var(--paper); }
.nl__check input:checked + .nl__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--crimson-deep);
  border-bottom: 2px solid var(--crimson-deep);
  transform: rotate(40deg);
}
.nl__check input:focus-visible + .nl__box { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.nl__check.has-error .nl__box { border-color: var(--pink-glow); background: rgba(244,101,138,.14); }
.nl__checkText { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.84); text-wrap: pretty; }
.nl__checkText a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nl__checkText i { font-style: normal; color: var(--pink-glow); }

.nl__submit { width: 100%; justify-content: center; margin-top: 24px; }
.nl__submit:disabled { opacity: .7; cursor: progress; transform: none; }

.nl__fine { margin-top: 18px; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.56); }
.nl__fine:empty { display: none; }
.nl__fine a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Resultado ---- */
.nl__done { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(6px, 3vh, 26px) 0; }
.nl__done:focus { outline: none; }
.nl__seal {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  display: grid;
  place-items: center;
  margin-bottom: 26px;
}
.nl__seal::after {
  content: "";
  width: 11px;
  height: 19px;
  margin-top: -3px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}
.nl__done .kicker {
  font-size: 11px;
  letter-spacing: .36em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.72);
}
.nl__done h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 54px);
  line-height: .9;
  text-transform: uppercase;
  margin: 12px 0 16px;
}
.nl__doneText { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 42ch; text-wrap: pretty; }
.nl__doneText b { font-weight: 600; color: #fff; }
.nl__doneText b[hidden] { display: none; }
.nl__doneBtn { margin-top: 28px; }

/* ---- Documento legal dentro del panel ---- */
.nl__legal { display: flex; flex-direction: column; gap: 14px; }
.nl__back {
  align-self: flex-start;
  font: inherit;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}
.nl__back:hover { color: #fff; }
.nl__legal h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: .92;
  text-transform: uppercase;
}
/* El articulado no es un texto corto escrito a medida para la modal: es el
   documento real, traído de su propia página, con sus encabezados, sus listas
   y la tabla de cookies. */
.nl__legalBody { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.82); text-wrap: pretty; }
.nl__legalBody > * + * { margin-top: 11px; }
.nl__legalBody h2, .nl__legalBody h3 {
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}
.nl__legalBody ul { padding-left: 18px; }
.nl__legalBody li + li { margin-top: 6px; }
.nl__legalBody b, .nl__legalBody strong { font-weight: 600; color: #fff; }
.nl__legalBody a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.nl__legalBody table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.nl__legalBody th, .nl__legalBody td {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  text-align: left;
  vertical-align: top;
}
.nl__legalBody .legal-tabla__scroll { overflow-x: auto; }
.nl__legalBody .legal-tabla__caption { text-align: left; padding-bottom: 8px; opacity: .7; }

/* ---- El mismo panel, incrustado en su página ---- */
.susc-pagina { padding: calc(var(--header-h) + clamp(40px, 9vh, 110px)) 0 clamp(50px, 10vh, 120px); }
.nl--pagina {
  position: static;
  padding: 0;
  z-index: auto;
  display: block;
}
.nl--pagina .nl__dialog {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  max-height: none;
  opacity: 1;
  transform: none;
}
.nl--pagina .nl__body { max-height: none; overflow: visible; }
.nl--pagina .nl__aside { min-height: 340px; }

@media (max-height: 760px) {
  .nl:not(.nl--pagina) .nl__perks { display: none; }
}
@media (max-width: 860px) {
  .nl:not(.nl--pagina) { align-items: flex-end; padding: 0; }
  .nl__dialog {
    width: 100%;
    max-height: 94svh;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    transform: translateY(44px);
  }
  .nl--pagina .nl__dialog {
    border-radius: 22px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    transform: none;
    max-height: none;
  }
  /* El logo pasa a `absolute` y deja de ocupar sitio en el flujo, así que el
     padding superior tiene que reservárselo a mano: 22 (top) + 34 (alto) + aire.
     Sin esto el antetítulo «Newsletter» se le monta encima en cuanto el texto
     del lateral crece — que es lo que pasaba con el texto real, más largo que
     el del prototipo. */
  .nl__aside { min-height: 176px; justify-content: flex-end; gap: 0; padding: 72px 22px 24px; }
  .nl--pagina .nl__aside { min-height: 220px; }
  .nl__logo { position: absolute; top: 22px; left: 22px; height: 34px; }
  .nl__aside h2 { font-size: 34px; }
  .nl__lede { font-size: 13.5px; max-width: 34ch; }
  .nl__perks { display: none; }
  .nl__grid { grid-template-columns: 1fr; }
  .nl__intro { padding-right: 0; }
}
@media (max-width: 520px) {
  .nl:not(.nl--pagina) .nl__dialog { max-height: 96svh; }
  .nl__body { padding: 22px 18px 28px; }
  .nl__intro { font-size: 13.5px; margin-bottom: 20px; }
  .nl__done h3 { font-size: 34px; }
  .nl__doneText { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl__scrim, .nl__dialog { transition: none; }
  .nl__dialog { transform: none; }
}