/* ==========================================================================
   Macarena Olávarri
   Un solo lienzo: el fondo es un degradado continuo con su paleta y no hay
   bloques de color por sección. Las cosas flotan encima.
   ========================================================================== */

@font-face { font-family: "Bastardo"; src: url("../fonts/BastardoRounded-Thin.woff2") format("woff2"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Bastardo"; src: url("../fonts/BastardoRounded-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Bastardo"; src: url("../fonts/BastardoRounded-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bastardo"; src: url("../fonts/BastardoRounded-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bastardo"; src: url("../fonts/BastardoRounded-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bastardo"; src: url("../fonts/BastardoRounded-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Dogica"; src: url("../fonts/dogicapixel.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dogica"; src: url("../fonts/dogicapixelbold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Las letras que se prueban en el panel de ?demo ("Letra", opciones.js) para
   la frase y los títulos. Ambas de Google Fonts (licencia OFL), solo latín.
   El navegador las baja solo si se eligen */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-Variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  /* Paleta del brand kit (sacada del .ai) */
  --vino: #701F39;
  --vino-hondo: #2A0A16;
  --mantequilla: #FFE3A1;
  --rosa: #F29BCB;
  --cian: #0093D4;
  --violeta: #311BB4;
  --cielo: #B8D3E3;
  --verde: #00B88B;
  --amarillo: #ECD550;
  --plata: #D7D2D1;

  /* El recorrido del fondo, de arriba a abajo: sale del video en vino
     profundo (así el fundido no se ensucia) y amanece en rosa, lila, cielo
     y mantequilla al final */
  --f-noche: #2A0A16;
  --f-brillo: #9C3A62;
  --f-rosa-vivo: #EDA2C4;
  --f-rosa: #F8CFE2;
  --f-lila: #DFD0EC;
  --f-cielo: #BCD7E8;
  --f-final: #FFE6B0;

  /* Dónde cambia cada color (main.js los ajusta a la altura real) */
  --s0: 11%; --s1: 13%; --s2: 15%; --s3: 21%; --s4: 44%; --s5: 66%; --s6: 88%;

  /* El video: sus nubes de espera (mientras llega el video), su tinta y el velo
     de arriba. Cada fondo de fondos.css trae los suyos; --hero-claro: 1 pone la
     barra y el visor en tinta desde el inicio (para los videos claros) */
  --h-a: #5b1733; --h-b: #2A0A16; --h-c: #1b0610;
  --h-n1: rgba(242,155,203,.72); --h-n2: rgba(0,147,212,.55); --h-n3: rgba(49,27,180,.75); --h-n4: rgba(255,227,161,.42);
  --h-tinta: #fff; --h-esquina: rgba(255,255,255,.85); --h-fecha: var(--mantequilla);
  --h-velo: rgba(20,4,10,.42); --h-rayas: rgba(0,0,0,.14);
  --hero-claro: 0;

  /* La frase va en Dogica, en negro y estirada a todo el ancho, como el
     ejemplo de SEE ME que mandó Maca: el primer renglón ("Social media, but
     make it") mide lo que la pantalla y la palabra que cambia va abajo. Ese
     renglón mide 19.25 veces el tamaño de la letra (medido en Chrome); 19.6
     deja holgura para la barra de scroll. El video deja abajo el alto de la
     frase, para que la primera pantalla muestre los dos sin hacer scroll.
     Con las otras letras del panel (html.letra-*, al final) cambian la
     medida del renglón, el interlineado y el tope */
  --frase-ratio: 19.6;
  --frase-ratio-tel: 10.4; /* "Social media," en teléfono */
  --frase-tope: 150px;
  --frase-fs: min(calc((100vw - 2 * var(--margen)) / var(--frase-ratio)), var(--frase-tope));
  --frase-lh: 1.22;
  --frase-alto: calc(var(--frase-fs) * var(--frase-lh) * 2 + 9vh);
  --negro: #000;

  /* Oct 2026, la versión más formal que pidió Maca, con menos colores: todo
     en negro y blanco (letra, logo, líneas, botones y etiquetas) y un color
     de acento para lo que tiene que resaltar: los garabatos, la cinta, el
     telón y lo que se ilumina al pasar el cursor. La palabra que cambia
     siempre lleva color: tres tonos que combinan (--palabra-1 a -3). Ya no van el
     rosa ni el azul morado (no amarraban, dijo Eddy) ni vino con amarillo (a
     Maca le recordaba a Morena). La paleta la pone opciones.js (?color= o el
     panel de ?demo); estos son los de su paleta ("Maca", 15 oct), por si
     falla el JS. --hover es el color de los botones al pasar el mouse o
     picarles (vino, lo pidió Maca) y --tono-1 a -3 son los de apoyo: vino,
     rosa clarito y azul marino (stickers, portadas y marcos) */
  --tinta: var(--negro);
  --accion: var(--tinta);
  --accion-tinta: #fff;
  --acento: #E64B3C; /* el naranja de su brand kit */
  --acento-tinta: #fff;
  --palabra-1: #E64B3C; --palabra-2: #0A2977; --palabra-3: #7A1E3A; --palabra-4: #EBCFD6; --palabra-4-borde: #7A1E3A;
  --hover: #7A1E3A; --hover-tinta: #fff;
  --tono-1: #7A1E3A; --tono-1-tinta: #fff;
  --tono-2: #EBCFD6; --tono-2-tinta: #000;
  --tono-3: #0A2977; --tono-3-tinta: #fff;

  --f-display: "Bastardo", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-pixel: "Dogica", ui-monospace, monospace;
  --f-editorial: "Instrument Serif", Georgia, serif;
  --f-moderna: "Inter Tight", system-ui, sans-serif;

  --margen: clamp(16px, 2.4vw, 36px);
  --alto-barra: clamp(76px, 10.5vh, 100px);
  --marca-w: 150px;
  --muelle: cubic-bezier(.34, 1.56, .64, 1);
  --salida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  /* Si el navegador rebota: el color del video arriba, el del final abajo */
  background: linear-gradient(var(--f-noche) 50%, var(--f-final) 50%);
  /* Safari en iPhone pinta sus barras con el color de la página: que sea el
     del fondo (antes salían rosas por el telón, ver abajo) */
  background-color: var(--f-noche);
}
html.js { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--f-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; }

/* Safari < 16 no tiene overflow: clip; en body se propaga al viewport y no
   rompe las escenas sticky */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: fixed; left: var(--margen); top: -80px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 16px; }

:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; }

/* ==========================================================================
   El lienzo: un degradado para toda la página, con grano adentro del fondo
   (no encima con mix-blend-mode: eso traba el scroll)
   ========================================================================== */
.lienzo {
  position: relative;
  overflow-x: clip; /* clip y no hidden: hidden rompería las escenas sticky */
  background-image:
    url("../img/grano.png"),
    linear-gradient(180deg,
      var(--f-noche) 0%,
      var(--f-noche) var(--s0),
      var(--f-brillo) var(--s1),
      var(--f-rosa-vivo) var(--s2),
      var(--f-rosa) var(--s3),
      var(--f-lila) var(--s4),
      var(--f-cielo) var(--s5),
      var(--f-cielo) var(--s6),
      var(--f-final) 100%);
  background-size: 180px 180px, 100% 100%;
}

/* ==========================================================================
   La marca (v2): en la esquina superior izquierda desde el inicio, como en
   REF 1, para que el video se vea completo. Centrada en la altura de la barra.
   ========================================================================== */
.marca {
  position: fixed; z-index: 60;
  left: var(--margen);
  top: calc((var(--alto-barra) - var(--marca-w) / 2.4375) / 2);
  width: var(--marca-w);
}
.marca__trazo { position: relative; display: block; }
/* Entrada: el logo aparece cuando ya cargó la fuente y la página */
html.js .marca__trazo { opacity: 0; scale: .94; transition: opacity 1.1s ease .15s, scale 1.8s var(--salida) .15s; }
html.js.is-cargado .marca__trazo { opacity: 1; scale: 1; }
.marca__img { width: 100%; height: auto; transition: opacity .5s ease; }
/* Opción "logo grande" (la v1), solo en home: vive grande en el video y al
   bajar se encoge hasta la esquina de la barra (lo mueve main.js) */
html.logo-grande:not(.pagina) .marca { left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.marca--grande .marca__trazo { filter: url(#temblor); }
/* Sobre fondo claro el logo va en negro (lo pidió Maca; antes era vino) */
.marca__img--tinta { position: absolute; inset: 0; opacity: 0; }
.is-claro .marca__img--blanco { opacity: 0; }
.is-claro .marca__img--tinta { opacity: 1; }

/* ==========================================================================
   Barra
   ========================================================================== */
.barra {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  height: var(--alto-barra);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--margen);
  color: #fff;
  transition: color .5s ease;
  pointer-events: none;
}
.is-claro .barra { color: var(--tinta); }
.barra__nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); pointer-events: auto; }
.barra__nav a {
  font-weight: 600; font-size: 15px; letter-spacing: .005em; text-decoration: none;
  text-underline-offset: 7px; text-decoration-thickness: 1.5px;
}
.barra__nav a:hover { text-decoration: underline wavy; }
/* La acción principal del sitio: llevar al curso */
.barra__nav .barra__cursos {
  padding: 10px 18px 11px; border-radius: 999px;
  border: 1.5px solid currentColor;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.barra__nav .barra__cursos:hover { text-decoration: none; background: #fff; color: var(--tinta); border-color: #fff; }
.is-claro .barra__nav .barra__cursos:hover { background: var(--hover); color: var(--hover-tinta); border-color: var(--hover); }
/* Para las alumnas que ya compraron: el login de su Kajabi (Maca, 29 oct) */
.barra__nav .barra__sesion { display: inline-flex; align-items: center; gap: 7px; }
.barra__sesion svg, .menu__sesion svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.barra__sesion svg { width: 17px; height: 17px; }
.barra__menu {
  display: none; pointer-events: auto;
  font-family: var(--f-pixel); font-size: 12px; letter-spacing: .04em;
  padding: 11px 14px 10px; border: 1.5px solid currentColor; border-radius: 999px;
}

/* Menú en teléfono */
.menu {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  color: var(--tinta);
  background: url("../img/grano.png"), linear-gradient(160deg, var(--f-rosa-vivo), var(--f-rosa) 45%, var(--f-final) 100%);
  background-size: 180px 180px, 100% 100%;
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; text-align: center; }
.menu nav a { font-weight: 900; font-size: clamp(44px, 13vw, 72px); letter-spacing: -.04em; line-height: 1.08; text-decoration: none; }
.menu nav .menu__sesion {
  display: inline-flex; align-items: center; gap: 8px; justify-self: center; margin-top: 34px;
  padding: 11px 16px 10px; border: 1.5px solid currentColor; border-radius: 999px;
  font-family: var(--f-pixel); font-weight: 400; font-size: 12px; letter-spacing: .04em; line-height: 1;
}
.menu__sesion svg { width: 15px; height: 15px; stroke-width: 2; }
.menu__cerrar {
  position: absolute; right: var(--margen); top: 18px;
  font-family: var(--f-pixel); font-size: 12px;
  padding: 11px 14px 10px; border: 1.5px solid currentColor; border-radius: 999px;
}
html.menu-abierto { overflow: hidden; }

/* ==========================================================================
   1 · Su foto
   A todo lo ancho de la pantalla, como la franja de fotos de SEE ME, y casi
   toda la primera pantalla (Maca sentía que se cortaba mucho): abajo se asoma
   el primer renglón de la frase. En teléfono va completa (3:2). Las orillas
   de arriba y abajo se desvanecen en la página. El video que iba aquí (y
   luego después de las cabezas) salió el 26 oct; sus archivos siguen en
   assets/video por si vuelve
   ========================================================================== */
.hero { position: relative; padding-top: var(--alto-barra); }
.hero__medio {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent);
  height: min(66.667vw, max(36vw, 100vh - var(--alto-barra) - var(--frase-fs) * var(--frase-lh) - 4vh));
  height: min(66.667vw, max(36vw, 100svh - var(--alto-barra) - var(--frase-fs) * var(--frase-lh) - 4vh));
}
/* Las fotos que compara Maca ("Foto de inicio" en el panel; opciones.js
   pone html.foto-*): solo se ve, y se baja, una. Sin JS sale la Opción 1. El
   recorte cuida su cabeza, que en las tres va arriba */
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 5%; display: none; }
.hero__foto--actual { object-position: 50% 20%; }
html.foto-actual .hero__foto--actual,
html:is(.foto-camara, .foto-camara-chica) .hero__foto--camara,
html:not(.foto-actual, .foto-camara, .foto-camara-chica) .hero__foto--abrigo { display: block; }
/* "Opción 2 chica" (26 oct, la pidió Maca; la eligió el 29 oct): la misma
   foto del sillón, más chica, sin llegar a las orillas. Va completa (3:2) y
   al centro, al 56% del ancho (el que eligió en el panel), salvo que no
   quepa con la frase en la primera pantalla. En teléfono, 82% (abajo): al
   56% quedaba chiquita. Sin el desvanecido de arriba y abajo: ya no toca
   las orillas de la página */
html.foto-camara-chica .hero__medio {
  width: min(56%, (100vh - var(--alto-barra) - var(--frase-fs) * var(--frase-lh) - 10vh) * 1.5);
  width: min(56%, (100svh - var(--alto-barra) - var(--frase-fs) * var(--frase-lh) - 10vh) * 1.5);
  height: auto; aspect-ratio: 3 / 2; margin: 3vh auto 0;
  -webkit-mask-image: none; mask-image: none;
}
/* Con ?tam= (de .4 a 1), otro ancho, para probar */
html.foto-camara-chica.foto-tam .hero__medio { width: calc(var(--foto-tam) * 100%); }
/* El grano de la página, también sobre la foto (sin textura no va) */
.hero__medio::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/grano.png"); background-size: 180px 180px;
}
html.sin-textura .hero__medio::after { content: none; }

/* Las esquinas de cámara y el punto de REC: hoy solo las usa la tele de
   TEDx en About me */
.visor__esq { position: absolute; width: 22px; height: 22px; border: 0 solid var(--h-esquina); }
.visor__esq--1 { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.visor__esq--2 { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.visor__esq--3 { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.visor__esq--4 { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.visor__punto { width: 10px; height: 10px; border-radius: 50%; background: #FF4747; animation: parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* ==========================================================================
   2 · La frase
   ========================================================================== */
.frase {
  position: relative;
  min-height: var(--frase-alto);
  display: grid; align-content: center;
  padding: 1vh var(--margen) 8vh;
}
.frase__txt {
  margin: 0; text-align: center;
  font-family: var(--f-pixel); font-weight: 400;
  font-size: var(--frase-fs);
  line-height: var(--frase-lh);
  color: var(--tinta);
}
.frase__l { display: block; white-space: nowrap; will-change: transform; }
.frase__l > span { display: inline-block; } /* translate no aplica a cajas inline */
.frase__fun { position: relative; display: inline-block; }
/* La palabra que cambia: va cambiando de color y con cada clic pasa a la
   siguiente (main.js); la última es un enlace. Pasa por los tres tonos de su
   paleta, sin brincar: se queda en cada uno y se funde al siguiente (el
   arcoíris que parpadeaba se sentía infantil, lo pidió Maca) */
.frase__palabra {
  display: inline-block; font-weight: 700; text-decoration: none;
  color: var(--palabra-1); cursor: pointer;
  animation: colores 7.5s ease-in-out infinite;
  transition: scale .4s var(--muelle);
}
.frase__palabra:hover { scale: 1.06; }
.frase__palabra:active { scale: .96; }
.frase__palabra--link {
  text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .2em;
  animation: colores 7.5s ease-in-out infinite, latido 1.6s var(--muelle) infinite;
}
@keyframes colores {
  0%, 28%  { color: var(--palabra-1); }
  33%, 61% { color: var(--palabra-2); }
  66%, 94% { color: var(--palabra-3); }
  100%     { color: var(--palabra-1); }
}
/* Con cuatro tonos (su paleta: naranja, azul, vino y rosa) pasa por los
   cuatro. Su rosa clarito casi no se lee sobre blanco: mientras la palabra va
   en rosa lleva un contorno vino (--palabra-4-borde, lo pone opciones.js;
   con un cuarto tono que sí se lee, el contorno es del mismo color). El
   contorno va debajo del relleno: encima se le verían los trazos encimados
   de la letra moderna */
html.palabra-4 .frase__palabra { animation-name: colores-4; animation-duration: 10s; -webkit-text-stroke: .05em transparent; paint-order: stroke fill; }
html.palabra-4 .frase__palabra--link { animation-name: colores-4, latido; animation-duration: 10s, 1.6s; }
@keyframes colores-4 {
  0%, 21%  { color: var(--palabra-1); -webkit-text-stroke-color: transparent; }
  25%, 46% { color: var(--palabra-2); -webkit-text-stroke-color: transparent; }
  50%, 71% { color: var(--palabra-3); -webkit-text-stroke-color: transparent; }
  75%, 96% { color: var(--palabra-4); -webkit-text-stroke-color: var(--palabra-4-borde, transparent); }
  100%     { color: var(--palabra-1); -webkit-text-stroke-color: transparent; }
}
@keyframes latido { 0%, 55%, 100% { scale: 1; } 25% { scale: 1.08; } }
/* El círculo va en su vino (lo pidió Maca el 26 oct; antes, en el acento) */
.frase__circulo {
  position: absolute; left: -13%; top: -6%; width: 124%; height: 114%;
  overflow: visible; pointer-events: none;
  fill: none; stroke: var(--tono-1); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.frase__circulo path { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }

/* Entrada de la frase: sube línea por línea (translate, no transform: el
   transform lo usa la deriva con el scroll) */
html.js .frase__l > span { opacity: 0; translate: 0 .28em; transition: opacity .9s ease, translate 1.2s var(--salida); }
html.js .frase.is-visible .frase__l > span { opacity: 1; translate: 0 0; }
html.js .frase.is-visible .frase__l--2 > span { transition-delay: .12s; }
html.js .frase.is-visible .frase__l--3 > span { transition-delay: .24s; }
html.js .frase.is-visible .frase__circulo path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.45, .1, .2, 1) .85s; }
/* Al cambiar de palabra el círculo se vuelve a dibujar, sin esperar */
html.js .frase.is-visible .frase__fun.is-redibuja .frase__circulo path { transition: stroke-dashoffset .8s cubic-bezier(.45, .1, .2, 1); }

/* Un meneo leve (el isotipo del editor de Cursos) */
@keyframes respira { 50% { rotate: 14deg; } }

/* ==========================================================================
   2b · Trayectoria: lo que respalda a Maca, en una fila con líneas finas,
   como ficha de revista. Es la propuesta para que home se sienta menos plano
   y más de autoridad (lo pidió Maca). Cada celda lleva a donde se ve más
   ========================================================================== */
.trayectoria { position: relative; padding: 4vh var(--margen) 16vh; color: var(--tinta); }
.trayectoria__eti {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--f-pixel); font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
}
.trayectoria__eti::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.trayectoria__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--tinta); border-bottom: 1.5px solid var(--tinta);
}
.trayectoria__lista li + li { border-left: 1.5px solid var(--tinta); }
.trayectoria__a {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto; gap: 18px;
  padding: 22px clamp(16px, 1.6vw, 26px) 24px;
  color: inherit; text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.trayectoria__a:hover, .trayectoria__a:focus-visible { background: var(--hover); color: var(--hover-tinta); outline: none; }
.trayectoria__num { font-family: var(--f-pixel); font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.trayectoria__dato { font-weight: 900; font-size: clamp(26px, 2.9vw, 50px); line-height: .95; letter-spacing: -.035em; align-self: end; }
.trayectoria__dato--largo { font-size: clamp(20px, 1.9vw, 32px); line-height: 1.02; letter-spacing: -.025em; }
.trayectoria__txt { font-size: clamp(14px, 1.05vw, 17px); line-height: 1.3; }
.trayectoria__ir { position: absolute; right: clamp(16px, 1.6vw, 26px); top: 18px; font-size: 20px; line-height: 1; transition: translate .4s var(--muelle); }
.trayectoria__a:hover .trayectoria__ir { translate: 4px -4px; }
/* Entran una por una */
html.js .trayectoria li { opacity: 0; translate: 0 24px; transition: opacity .8s ease, translate 1s var(--salida); }
html.js .trayectoria.is-visible li { opacity: 1; translate: 0 0; }
html.js .trayectoria.is-visible li:nth-child(2) { transition-delay: .08s; }
html.js .trayectoria.is-visible li:nth-child(3) { transition-delay: .16s; }
html.js .trayectoria.is-visible li:nth-child(4) { transition-delay: .24s; }

/* ==========================================================================
   3 · Cabezas: escena fija mientras el scroll las pasa, como los libros de
   Seasoned, con los trazos de los CDs de A24. Cada cabeza es un botón: el
   recorte de Maca, sin fondo y de frente, con su etiqueta pegada abajo
   ========================================================================== */
.caras { position: relative; height: calc(var(--n, 6) * 70vh + 100vh); }
.caras__escena {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.caras__pista { position: absolute; inset: 0; z-index: 1; }
/* La escena deja pasar los clics (en teléfono se encima con la
   Trayectoria); solo responden las cabezas */
.caras__escena, .caras__pista { pointer-events: none; }
.cara { pointer-events: auto; }
/* --d es el cuadro de la cabeza: el lazo la rodea y la etiqueta va abajo */
.cara {
  --d: min(56vh, 44vw);
  position: absolute; left: 50%; top: 47%;
  width: var(--d); height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  will-change: transform, opacity;
}
/* Con el teclado, aunque esté lejos del centro, la que tiene foco se ve */
.cara:focus-within { opacity: 1 !important; }
.cara__boton { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
/* Los recortes vienen encuadrados distinto: cada uno se acomoda para que la
   cara mida lo mismo (36% del cuadro, de cejas a barbilla) y quede a la misma
   altura, con la barbilla al 64%. Las 4 que mandó Maca el 14 de octubre; a la
   2 y la 4 (pelo largo) se les corta el pelo al 115% del cuadro, desvanecido */
.cara__cabeza {
  position: absolute; left: 50%; top: var(--arriba); height: var(--alto);
  width: auto; max-width: none; translate: -50% 0;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .16));
  transition: scale .5s var(--muelle);
}
.cara__cabeza--1 { --alto: 90%; --arriba: -6.2%; }   /* cara-01: chongo con palitos */
.cara__cabeza--2 { --alto: 114%; --arriba: .6%; }    /* cara-02: gorro verde, pelo largo */
.cara__cabeza--3 { --alto: 86%; --arriba: -6.3%; }   /* cara-03: chongo, guiñando */
.cara__cabeza--4 { --alto: 116%; --arriba: -1.1%; }  /* cara-04: gorro tejido, pelo largo */
a.cara__boton:hover .cara__cabeza { scale: 1.04; }

/* La etiqueta: el nombre del botón siempre; la de la cabeza del centro
   (main.js marca .is-activa) abre además su texto. En negro con letra blanca
   y derecha; al pasar el cursor, en el acento (antes vino con amarillo) */
.cara__etiqueta {
  position: absolute; left: 50%; top: 70%; z-index: 1;
  width: min(124%, 440px); translate: -50% 0;
  display: grid; justify-items: center;
  padding: 12px 20px 13px; border-radius: 12px;
  background: var(--accion); color: var(--accion-tinta);
  box-shadow: 0 16px 28px -18px rgba(0, 0, 0, .5);
  text-align: center;
  transition: background-color .25s ease, color .25s ease;
}
a.cara__boton:hover .cara__etiqueta, a.cara__boton:focus-visible .cara__etiqueta { background: var(--hover); color: var(--hover-tinta); }
a.cara__boton:focus-visible { outline: none; }
a.cara__boton:focus-visible .cara__etiqueta { outline: 2px dashed var(--tinta); outline-offset: 4px; }
.cara__titulo { font-family: var(--f-pixel); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
a.cara__boton .cara__titulo::after { content: " →"; }
.cara__txt {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  font-weight: 600; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.25;
  transition: max-height .5s var(--salida), opacity .3s ease, margin-top .5s var(--salida);
}
.cara.is-activa .cara__txt, .cara:focus-within .cara__txt { max-height: 7em; margin-top: 8px; opacity: 1; }
.cara__redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cara__redes a {
  padding: 8px 12px 7px; border: 1.5px solid currentColor; border-radius: 999px;
  font-family: var(--f-pixel); font-size: 11px; line-height: 1; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
/* Al pasar el mouse, en vino como las etiquetas de las otras cabezas (--hover;
   lo pidió Maca el 26 oct: antes se ponían en blanco) */
.cara__redes a:hover, .cara__redes a:focus-visible { background: var(--hover); color: var(--hover-tinta); border-color: var(--hover); outline: none; }

/* El lazo va detrás de las cabezas, como dibujado en el fondo (a Maca le
   gustan: se quedan, sin estrellas alrededor). En vino desde el 29 oct (lo
   pidió Maca; antes, negro) */
.caras__trazos {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  fill: none; stroke: var(--tono-1); stroke-linecap: round; stroke-linejoin: round;
}
.trazo__lazo { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .4s ease-in; }
.trazo.is-activa .trazo__lazo { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.45, .05, .25, 1) .08s; }

.caras__contador {
  position: absolute; left: var(--margen); bottom: var(--margen); margin: 0;
  font-family: var(--f-pixel); font-size: 16px; line-height: 1;
}

/* ==========================================================================
   3a · Las Macarenas (26 oct, en lugar del video), como la página de J.Crew
   de Emma Chamberlain y sus suéteres: el título en pixel ("Maca y sus minis
   te dan la bienvenida"), las seis en una fila, cada una en su lugar (desde
   el 29 oct sin recuadro: lo pidió Maca), y abajo un botón chiquito ("Play"
   en lugar de "Shop now"). Al
   arrastrarla, main.js mueve el botón (transform, con --x y --y); crecer
   (scale) y bailar o brincar (translate y rotate) van en la foto: así no se
   pelean
   ========================================================================== */
.macarenas { position: relative; padding: 14vh var(--margen) 16vh; text-align: center; color: var(--tinta); }
.macarenas__titulo {
  margin: 0; font-family: var(--f-pixel); font-weight: 700;
  font-size: clamp(22px, 3vw, 46px); line-height: 1.15; letter-spacing: .02em;
  text-wrap: balance;
}
.macarenas__sub { margin: 16px 0 0; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.3; }
.macarenas__fila {
  list-style: none; margin: 6vh auto 0; padding: 0; max-width: 1200px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 1.2vw, 18px);
}
/* Su lugar: 2:3, y la más alta mide 78% (así la de los brazos abiertos
   cabe a lo ancho y queda aire arriba para crecer) */
.macarena { position: relative; aspect-ratio: 2 / 3; }
.macarena__boton {
  position: absolute; left: 50%; bottom: 6%; z-index: var(--z, 1);
  height: calc(var(--alto, 1) * 78%); translate: -50% 0;
  transform: translate(var(--x, 0px), var(--y, 0px));
  cursor: grab; touch-action: none;
  transition: transform .9s var(--muelle);
}
/* Sin recuadro, el teclado necesita ver cuál está elegida */
.macarena__boton:focus-visible { outline: 2px dashed var(--tinta); outline-offset: 6px; }
.macarena__boton:focus-visible .macarena__img { scale: 1.14; }
.macarena__img {
  display: block; height: 100%; width: auto; max-width: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .12));
  transition: scale .45s var(--muelle), filter .3s ease;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.macarena__boton:hover .macarena__img, .macarena.is-activa .macarena__img { scale: 1.14; }
.macarena__boton.is-arrastrando { cursor: grabbing; transition: none; }
.macarena__boton.is-arrastrando .macarena__img { scale: 1.2; filter: drop-shadow(0 24px 18px rgba(0, 0, 0, .22)); }
/* Al picarle brinca; con "Play" bailan todas en ola (--i es su lugar) */
.macarena__img.is-brinca { animation: brinca .75s var(--muelle); }
.macarenas.is-baile .macarena__img { animation: baile .9s ease-in-out calc(var(--i) * .12s) infinite; }
.macarenas.is-baile .macarena__img.is-brinca { animation: brinca .75s var(--muelle); }
@keyframes brinca {
  30% { translate: 0 -18%; rotate: -8deg; }
  55% { translate: 0 0; rotate: 6deg; }
  75% { translate: 0 -5%; rotate: -3deg; }
}
@keyframes baile {
  25% { translate: 0 -12%; rotate: -7deg; }
  50% { translate: 0 0; rotate: 0deg; }
  75% { translate: 0 -12%; rotate: 7deg; }
}
.macarenas__acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 5vh; }
.macarenas__play, .macarenas__acomodar {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 10px; border-radius: 2px;
  border: 1.5px solid var(--acento); background: var(--acento); color: var(--acento-tinta);
  font-family: var(--f-pixel); font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, scale .4s var(--muelle);
}
.macarenas__play:hover { background: var(--hover); border-color: var(--hover); color: var(--hover-tinta); }
.macarenas__play:active, .macarenas__acomodar:active { scale: .95; }
.macarenas__acomodar { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.macarenas__acomodar:hover { background: var(--tinta); color: #fff; }
.macarenas__acomodar[hidden] { display: none; }
/* El triángulo de play; bailando, las dos rayitas de pausa */
.macarenas__icono { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.macarenas__play[aria-pressed="true"] .macarenas__icono { width: 9px; height: 10px; border: 0; border-left: 3px solid; border-right: 3px solid; }
.macarenas__pista { margin: 22px 0 0; font-family: var(--f-pixel); font-size: 11px; opacity: .6; }

/* ==========================================================================
   4 · Maca sube (el tostador de Seasoned): su caricatura sale de detrás del
   logo y se queda acostada encima (lo pidió Maca); la cinta corre al frente
   ========================================================================== */
/* Empieza antes de que se acaben las cabezas, para que no quede tanto hueco
   entre la última cabeza y el final (lo pidió Eddy). Cuánto se encima lo
   calcula main.js (encimarFinal) para dejar ~3 cm entre el pelo de la última
   cabeza y la caricatura; este margen es solo por si no corre el JS */
.maca { position: relative; height: 200vh; margin-top: -25vh; }
/* Como se enciman, la escena deja pasar los clics a las cabezas de abajo;
   solo responden ella (easter egg) y el pie */
.maca { pointer-events: none; }
.maca__foto, .pie { pointer-events: auto; }
/* Aterrizan donde ella ya subió (termina poco después de que la escena se fija) */
.ancla { position: absolute; left: 0; top: 100vh; }
.ancla--fin { top: auto; bottom: 0; }
.maca__escena {
  --cinta-alto: clamp(96px, 16vh, 150px);
  --cinta-abajo: clamp(34px, 6vh, 56px);
  /* El ancho del logo, con ella encima, sin pasarse del espacio entre la barra
     y la cinta (la pila mide ~.9 de su ancho). Más chico que antes: a Maca se
     le hacía inmenso, y lo quiere más serio. --cama-escala lo achica o lo
     agranda (opciones.js; desde el 29 oct, al 40%: lo quiso "mucho más
     chico"; ?logo= para probar otro) */
  --cama-alto: calc((100vh - var(--alto-barra) - var(--cinta-abajo) - var(--cinta-alto) - 6vh) / .9);
  --cama-w: min(calc(32vw * var(--cama-escala, 1)), calc(440px * var(--cama-escala, 1)), 90vw, var(--cama-alto));
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}
/* La cama: el logo con ella encima, centrada en el espacio libre entre la
   barra y la cinta (no pegada a la cinta: así el logo no asoma solo hasta
   abajo). main.js la sube y la agranda un poco al entrar la sección */
.maca__cama {
  position: absolute; left: 50%; z-index: 2;
  bottom: calc(var(--cinta-abajo) + var(--cinta-alto) + 2vh + (var(--cama-alto) - var(--cama-w)) * .45);
  width: var(--cama-w); translate: -50% 0;
  will-change: transform;
}
/* El logo del final: más chico y en negro (lo pidió Maca) */
.maca__nombre { position: relative; z-index: 1; }
/* Sin temblor aquí: el filtro en vivo sobre algo de este tamaño dobla el costo
   de cada cuadro mientras ella sube (medido: 294 -> 140 ms en render por software) */
.maca__nombre-trazo { display: block; width: 100%; height: auto; }
/* Ella vive en un marco que termina en el borde de arriba del logo: sale de
   detrás de él, como el pan del tostador, y se apoya en las letras. Arriba y a
   los lados tiene aire para el saludo al llegar */
.maca__marco {
  position: relative; z-index: 2;
  overflow: hidden;
  margin: 0 -10% -1.2%;
  padding-top: 8%;
}
.maca__foto {
  display: block; width: 60%; height: auto; margin: 0 auto;
  transform-origin: 50% 100%;
  will-change: transform;
}
/* Al llegar, un saludo corto: como un sticker que se pega */
.maca__foto.is-llego { animation: pegar .9s var(--salida); }
@keyframes pegar {
  0%   { rotate: 0deg; scale: 1; }
  30%  { rotate: 2.4deg; scale: 1.025; }
  62%  { rotate: -1.2deg; scale: .995; }
  100% { rotate: 0deg; scale: 1; }
}

.cinta {
  position: absolute; left: 0; right: 0; z-index: 4;
  bottom: var(--cinta-abajo); height: var(--cinta-alto);
  pointer-events: none;
}
.cinta__svg { width: 100%; height: 100%; overflow: visible; }
/* En el acento con letra blanca, en Dogica como la frase de arriba (Maca la
   había pedido rosa con negro; el rosa ya no amarraba con el resto) */
.cinta__banda { fill: none; stroke: var(--acento); stroke-linecap: round; }
.cinta__texto { fill: var(--acento-tinta); font-family: var(--f-pixel); font-weight: 700; }
.cinta__texto .fino { font-weight: 400; }

.pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: var(--cinta-abajo);
  display: flex; align-items: center; gap: 22px;
  padding: 0 var(--margen);
  font-family: var(--f-pixel); font-size: 12px; line-height: 1;
}
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline wavy; text-underline-offset: 5px; }
.pie p { margin: 0 0 0 auto; }

/* ==========================================================================
   v4 · el flash de cámara al llegar la foto, y el botón fijo al curso
   ========================================================================== */
.flash {
  position: fixed; inset: 0; z-index: 95;
  background: #fff; opacity: 0; pointer-events: none;
  visibility: hidden; /* escondido entre disparos (ver el telón) */
}
.flash.is-flash { animation: destello .7s ease-out; }
@keyframes destello {
  0%   { opacity: 0; visibility: visible; }
  12%  { opacity: .9; }
  100% { opacity: 0; visibility: visible; }
}

.cta-flotante {
  position: fixed; z-index: 70;
  right: var(--margen); bottom: var(--margen);
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px 14px 14px; border-radius: 999px;
  background: var(--accion); color: var(--accion-tinta);
  text-decoration: none; font-weight: 700; font-size: 15px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5);
  transform-origin: 100% 100%;
  scale: 0; opacity: 0;
  transition: scale .8s var(--muelle), opacity .4s ease, background-color .25s ease, color .25s ease;
  will-change: transform;
}
/* El isotipo blanco, o negro si el color del botón es claro (opciones.js) */
.cta-flotante img { width: 26px; height: auto; filter: var(--accion-iso, brightness(0) invert(1)); }
.cta-flotante:hover img { filter: var(--hover-iso, brightness(0) invert(1)); }
.cta-flotante.is-visible { scale: 1; opacity: 1; }
.cta-flotante:hover { background: var(--hover); color: var(--hover-tinta); }

@media (max-width: 760px) {
  .cta-flotante { padding: 11px 18px 12px 12px; font-size: 13px; }
  .cta-flotante img { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .flash.is-flash { animation: none; }
}

/* ==========================================================================
   Telón entre páginas: un círculo del color de acento con su isotipo en blanco. Abrir es solo CSS
   (si el JS falla, la página igual se descubre); cerrar lo dispara telon.js
   desde el punto donde se hizo clic.
   ========================================================================== */
.telon {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: url("../img/grano.png"), var(--acento);
  background-size: 180px 180px, auto;
  clip-path: circle(0 at 50% 50%);
  pointer-events: none;
  /* Escondido cuando no se usa: aunque esté recortado a nada, Safari en
     iPhone tomaba su rosa para pintar sus barras de arriba y abajo */
  visibility: hidden;
}
.telon img { width: min(36vw, 230px); height: auto; filter: var(--acento-iso, none); }
html.js .telon { animation: telon-abre .9s cubic-bezier(.7, 0, .2, 1) .05s both; }
html.js .telon img { animation: telon-logo .9s ease both; }
html.se-va .telon { animation: telon-cierra .55s cubic-bezier(.7, 0, .3, 1) both; pointer-events: auto; }
html.se-va .telon img { animation: telon-logo-entra .55s var(--muelle) .12s both; }
@keyframes telon-abre {
  from { clip-path: circle(150% at 50% 50%); visibility: visible; }
  to   { clip-path: circle(0 at 50% 50%); visibility: hidden; }
}
@keyframes telon-cierra {
  from { clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); visibility: visible; }
  to   { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); visibility: visible; }
}
@keyframes telon-logo { from { scale: 1; opacity: 1; } to { scale: .7; opacity: 0; } }
@keyframes telon-logo-entra { from { scale: .6; rotate: -8deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .telon { display: none; }
}

/* ==========================================================================
   Teléfono
   ========================================================================== */
@media (max-width: 760px) {
  :root { --marca-w: 112px; }
  .barra__nav { display: none; }
  .barra__menu { display: block; }
  html.foto-camara-chica .hero__medio { width: 82vw; }
  /* La frase en tres renglones, cada uno lo más ancho que quepa: "Social
     media," mide 10.125 veces la letra en Dogica (10.4 con holgura) */
  :root { --frase-fs: calc((100vw - 2 * var(--margen)) / var(--frase-ratio-tel)); --frase-alto: calc(var(--frase-fs) * var(--frase-lh) * 3 + 9vh); }
  .frase__a, .frase__b { display: block; }
  .frase { padding-top: 3vh; }
  .marca--grande .marca__trazo { filter: none; }
  /* Trayectoria: de dos en dos. Las cabezas van más arriba que en la compu
     y la Trayectoria sin tanto aire abajo: quedaba un hueco blanco antes de
     la primera (lo pidió Maca, 26 oct) */
  .trayectoria { padding-bottom: 3vh; }
  .trayectoria__lista { grid-template-columns: 1fr 1fr; }
  .trayectoria__lista li + li { border-left: 0; }
  .trayectoria__lista li:nth-child(even) { border-left: 1.5px solid var(--tinta); }
  .trayectoria__lista li:nth-child(n + 3) { border-top: 1.5px solid var(--tinta); }
  .trayectoria__a { gap: 14px; padding: 16px 14px 18px; }
  .trayectoria__ir { right: 14px; top: 13px; font-size: 17px; }
  .trayectoria__num { padding-right: 16px; font-size: 9px; letter-spacing: .03em; line-height: 1.3; }
  .trayectoria__dato { font-size: 30px; }
  .trayectoria__dato--largo { font-size: 19px; }
  .trayectoria__txt { font-size: 13px; }
  .cara { --d: min(70vw, 42vh); top: 40%; }
  .cara__etiqueta { width: min(128%, 82vw); padding: 9px 14px 10px; }
  .cara__titulo { font-size: 13px; }
  .cara__txt { font-size: 14px; }
  .caras { height: calc(var(--n, 6) * 60vh + 100vh); margin-top: -14vh; }
  /* El pie trae cuatro renglones: redes, aviso de privacidad, álbum y © */
  .maca__escena { --cinta-abajo: 88px; --cama-w: min(calc(62vw * var(--cama-escala, 1)), 92vw, var(--cama-alto)); }
  .pie { flex-wrap: wrap; justify-content: center; align-content: center; gap: 7px 18px; font-size: 10px; }
  .pie p { margin: 0; flex-basis: 100%; text-align: center; }
}

/* ==========================================================================
   Menos movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js { scroll-behavior: auto; }
  html.js .marca__trazo { transition: none; }
  .visor__punto, .maca__foto.is-llego { animation: none; }
  .frase__palabra, .frase__palabra--link { animation: none; }
  html.js .trayectoria li { opacity: 1; translate: none; transition: none; }
  .macarenas.is-baile .macarena__img, .macarena__img.is-brinca { animation: none; }
}

/* ==========================================================================
   Opciones de la vista previa (opciones.js)
   ========================================================================== */
/* Sin textura: se apaga el grano de los fondos (una capa de tamaño 0 no se pinta) */
html.sin-textura .lienzo,
html.sin-textura .menu { background-size: 0 0, 100% 100%; }
html.sin-textura .telon { background-size: 0 0; }

/* Letra de la frase y los títulos ("Letra" en el panel). Por defecto, la
   pixel (Dogica) en la frase y Bastardo en los títulos. "Editorial" es
   Instrument Serif, alta y angosta como el ejemplo de SEE ME, con cursivas
   donde antes iba lo grueso; "Moderna" es Inter Tight. Los demás textos
   chicos (etiquetas, visor, botones) se quedan como están.
   Medidas de "Social media, but make it": 8.3 veces la letra en la
   editorial y 10.25 en la moderna; "Social media,": 4.39 y 5.53 */
html.letra-editorial { --frase-ratio: 8.6; --frase-ratio-tel: 4.6; --frase-lh: 1; --frase-tope: 15vh; --cinta-letra: 1.45; }
html.letra-moderna   { --frase-ratio: 10.6; --frase-ratio-tel: 5.8; --frase-lh: 1.02; --frase-tope: 15vh; --cinta-letra: 1.1; }
html.letra-editorial .frase__txt { font-family: var(--f-editorial); letter-spacing: -.01em; }
html.letra-editorial .frase__palabra { font-weight: 400; font-style: italic; }
html.letra-moderna .frase__txt { font-family: var(--f-moderna); font-weight: 600; letter-spacing: -.035em; }
html.letra-moderna .frase__palabra { font-weight: 800; }
html.letra-editorial :is(.titular, .a-ted__titulo, .a-campanas__titulo, .collab-ficha__titulo, .siguiente__a, .c-mensaje__remate, .c-lanza__titulo, .contra__titulo, .cd__titulo, .trayectoria__dato) {
  font-family: var(--f-editorial); font-weight: 400; letter-spacing: -.01em;
}
html.letra-editorial :is(.titular__lleno, .a-campanas__marcas, .a-ted__mejor, .c-mensaje__remate, .contra__titulo, .cd__titulo) { font-style: italic; }
html.letra-editorial :is(.titular__fino, .cd__fino) { font-style: normal; font-weight: 400; }
html.letra-moderna :is(.titular, .a-ted__titulo, .a-campanas__titulo, .collab-ficha__titulo, .siguiente__a, .c-mensaje__remate, .c-lanza__titulo, .contra__titulo, .cd__titulo, .trayectoria__dato) {
  font-family: var(--f-moderna); letter-spacing: -.045em;
}
html.letra-moderna :is(.titular__fino, .cd__fino) { font-weight: 200; }
/* La cinta y la banda siguen a la frase (Maca las pidió con la misma letra) */
html.letra-editorial :is(.cinta__texto, .banda__pista span) { font-family: var(--f-editorial); font-weight: 400; font-style: italic; }
html.letra-editorial .banda__pista span { font-size: clamp(21px, 2.5vw, 40px); }
html.letra-moderna :is(.cinta__texto, .banda__pista span) { font-family: var(--f-moderna); font-weight: 700; letter-spacing: -.02em; }
html.letra-moderna .banda__pista span { font-size: clamp(17px, 2vw, 31px); }

/* Sin la sección "Trayectoria" (panel: "Trayectoria: No") */
html.sin-trayectoria .trayectoria { display: none; }

/* El panel para elegir, abajo al centro (solo con ?demo en home). Desde el
   26 oct solo trae la foto de inicio: lo demás ya lo decidió Maca */
.demo {
  position: fixed; left: 50%; bottom: var(--margen); z-index: 110;
  translate: -50% 0;
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 2 * var(--margen));
  padding: 8px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .92); color: var(--tinta);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .12);
  font-family: var(--f-pixel); font-size: 11px; line-height: 1;
}
.demo__grupo { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; }
.demo__nombre { margin-right: 4px; opacity: .7; }
.demo__op { padding: 7px 10px 6px; border-radius: 999px; border: 1.5px solid transparent; white-space: nowrap; }
.demo__op:hover { border-color: currentColor; }
.demo__op[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.demo__op.demo__link-todo { border-color: currentColor; }
/* "Tamaño" de la Opción 2 chica (solo sale con esa) */
.demo__tam[hidden] { display: none; }
.demo__tam input { width: 130px; margin: 0; accent-color: var(--tinta); cursor: pointer; }
.demo__tam output { min-width: 4ch; }
/* Si el navegador no deja copiar, el link queda a la vista */
.demo__link {
  flex: 1 0 100%; padding: 7px 8px 6px; border: 1.5px solid rgba(0, 0, 0, .25); border-radius: 8px;
  background: #fff; color: var(--tinta); font-family: var(--f-display); font-size: 13px; line-height: 1;
}
.demo__link:focus { outline: none; border-color: var(--tinta); }
/* Esconder el panel sin cerrarlo: queda solo "Opciones" */
.demo__mini { padding: 4px 6px; font-size: 14px; line-height: 1; opacity: .6; }
.demo__mini:hover { opacity: 1; }
.demo.demo--mini > :not(.demo__abrir) { display: none; }
.demo__abrir { display: none; padding: 4px 6px; }
.demo.demo--mini { padding: 6px 10px; }
.demo.demo--mini .demo__abrir { display: inline-flex; gap: 8px; }
.demo__cerrar { margin-left: -6px; padding: 4px 6px; font-family: var(--f-display); font-size: 18px; line-height: 1; opacity: .6; }
.demo__cerrar:hover { opacity: 1; }
@media (max-width: 760px) {
  /* arriba del botón al curso; el nombre del grupo va en su renglón */
  .demo { bottom: 84px; gap: 6px 8px; padding: 8px 10px 8px 12px; border-radius: 18px; font-size: 9px; }
  .demo__nombre { flex-basis: 100%; margin: 0 0 2px; text-align: center; }
  .demo__op { padding: 6px 7px 5px; }
  .demo__link { font-size: 16px; } /* 16px para que el iPhone no haga zoom */
}