/* ============================================================
   EL ARCHIBRAZO · HOMEPAGE
   Sistema editorial: enciclopedia patafísica.
   Dark base + irrupciones cream tipo planche grabada.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
body { overflow-x: hidden; cursor: none; }
@media (hover: none) { body { cursor: auto; } }

/* ---- Cursor custom ---- */
.cursor, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  mix-blend-mode: difference;
  transition: width .2s var(--ease-out), height .2s var(--ease-out);
}
.cursor-ring {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cream-soft);
  opacity: .35;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              opacity .25s var(--ease-out), background .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
.cursor.is-mudo, .cursor-ring.is-mudo { opacity: 0 !important; }
body.cursor-link .cursor { width: 0; height: 0; }
body.cursor-link .cursor-ring {
  width: 60px; height: 60px;
  background: var(--pink);
  border-color: var(--pink);
  opacity: .9;
  mix-blend-mode: normal;
}
body.cursor-link .cursor-ring::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 9px var(--font-mono);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--cream);
}
@media (hover: none) { .cursor, .cursor-ring { display: none; } }

/* ---- Scroll progress (top hairline gradient) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--gradient);
  z-index: 100;
  transform-origin: left;
}

/* ---- Grain overlay (sutil, sobre todo el sitio) ---- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), padding .3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(9px) saturate(1.2);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  border-bottom-color: var(--line);
  padding: 14px clamp(20px, 4vw, 56px);
}
.nav__logo { display: flex; align-items: center; gap: 14px; }
.nav__logo img { height: 40px; width: auto; }
.nav__sigil {
  font: 700 9px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--line-2);
  padding-left: 12px;
}
.nav__sigil span { color: var(--pink); }

/* ---------- NAVBAR with dropdowns (archibrazo.org style) ---------- */
.nav__links {
  display: flex;
  gap: 4px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__item {
  position: relative;
  list-style: none;
}
.nav__link, .nav__trigger {
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px var(--font-body);
  color: var(--cream-soft);
  padding: 8px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  letter-spacing: .01em;
  transition: color .2s;
}
.nav__link::after, .nav__trigger::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.nav__link:hover, .nav__trigger:hover { color: var(--cream); }
.nav__link:hover::after, .nav__trigger:hover::after,
.nav__item.is-open .nav__trigger::after {
  transform: scaleX(1); transform-origin: left;
}
/* nav items unificados: --hot ya no resalta (mismo color que el resto, sin punto) */
.nav__link--hot { color: inherit; }
.nav__link--hot::before { display: none; }
.nav__chev {
  width: 10px; height: 10px;
  transition: transform .3s var(--ease-out);
}
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  padding: 14px;
  background: rgba(14,12,10, 0.94);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s, transform .35s var(--ease-out), visibility .25s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}
.nav__item.is-open .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown::before {
  /* connecting line / pointer */
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(14,12,10,0.94);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.nav__dropdown-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 18px;
  font: 500 14px var(--font-body);
  color: var(--cream-soft);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s, padding-left .25s;
  text-decoration: none;
}
.nav__dropdown-link::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  transform: translateY(-50%) scale(.5);
  width: 8px; height: 1px;
  background: var(--pink);
  opacity: 0;
  transition: opacity .2s, transform .25s var(--ease-out);
}
.nav__dropdown-link:hover {
  color: var(--cream);
  background: linear-gradient(180deg, rgba(255,61,127,.10), rgba(255,61,127,0));
  border-color: rgba(255,61,127,.18);
  padding-left: 24px;
}
.nav__dropdown-link:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.nav__dropdown-link .arrow {
  margin-left: auto;
  opacity: 0;
  transition: opacity .2s, transform .2s;
}
.nav__dropdown-link:hover .arrow {
  opacity: 1;
  transform: translateX(2px);
}
.nav__dropdown-link em {
  font-style: italic;
  color: var(--cream);
  font-weight: 500;
}
.nav__dropdown-link .meta {
  font: 500 10px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
/* Salir no es un lugar mas del menu: es la accion que lo cierra. Va separada
   por una linea y en gris, para que no compita con los tres lugares de arriba. */
.nav__dropdown-link--salir {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
}
.nav__dropdown-link--salir em { color: var(--cream-soft); }
.nav__dropdown-link .icon {
  width: 18px;
  flex-shrink: 0;
  color: var(--pink);
}
.nav__dropdown--wide { min-width: 320px; }
.nav__dropdown--right { left: auto; right: 0; transform: translateX(0) translateY(-4px); }
.nav__item.is-open .nav__dropdown--right { transform: translateX(0) translateY(0); }
.nav__dropdown--right::before { left: auto; right: 26px; transform: rotate(45deg); }

.nav__actions { display: flex; align-items: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--font-body);
  letter-spacing: .03em;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .2s var(--ease-out), box-shadow .25s var(--ease-out),
              background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--gradient);
  color: white;
  box-shadow: 0 10px 28px rgba(255,61,127,0.30);
}
.btn--primary:hover { box-shadow: 0 14px 36px rgba(255,61,127,0.5); }
.btn--ghost {
  color: var(--cream);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--pink); color: var(--cream); }
.btn--dark {
  background: var(--black); color: var(--cream); border-color: var(--black);
}
.btn--dark:hover { background: transparent; border-color: var(--black); color: var(--black); }

.menu-btn {
  display: none;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  position: relative;
  color: inherit;
}
.menu-btn span {
  position: absolute; left: 12px; right: 12px; height: 1.5px;
  background: var(--cream);
}
/* El nav no cambia su propio color cuando esta sobre claro, solo el de algunos
   hijos, asi que heredar no alcanzaba: en Proyectos las rayitas quedaban crema
   sobre crema. Medido en 16 paginas por 3 posiciones de scroll: el fondo es
   claro exactamente cuando hay nav--cream o nav--on-light. */
.nav--cream .menu-btn span,
.nav--on-light .menu-btn span { background: var(--black);
}
.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { bottom: 16px; width: 12px; right: auto; }

@media (max-width: 940px) {
  /* Ojo: no poner aca .nav__links { display: none }. El drawer se abre y se
     cierra con visibility y opacity, y un display:none le gana siempre, asi que
     el menu del celular quedaba muerto. Lo esconde el bloque de drawer. */
  .menu-btn { display: block; }
}

/* ============================================================
   GLOBAL UTILITIES
   ============================================================ */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 11px var(--font-body);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1.5px; background: var(--gradient);
}
.eyebrow--mono {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .14em;
}
.eyebrow--mono::before { background: var(--line-2); }

.figmark {
  font: italic 400 13px var(--font-display);
  color: var(--muted);
  letter-spacing: .02em;
}
.figmark b { font-style: normal; font-weight: 700; color: var(--pink); margin-right: 4px; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: var(--cream);
}
.display .it {
  font-style: italic;
  font-weight: 400;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   CUTOUTS: recortes de planches (collage system)
   Cada planche es ~940x1400 con 2 cols x 3 rows de figuras.
   Usá .cut + .cut--<planche> + .cut--c<col>r<row> (1-indexed).
   Sobre dark, añadí .cut--invert. Sobre cream, queda nativo.
   ============================================================ */
.cut {
  background-repeat: no-repeat;
  background-size: 205% auto;
  position: relative;
}
.cut--ident      { background-image: url('../assets/planches/identite-cooperative.webp'); }
.cut--cercle     { background-image: url('../assets/planches/cercle-surrealiste.webp'); }
.cut--grenier    { background-image: url('../assets/planches/grenier-decouvert.webp'); }
.cut--imprimerie { background-image: url('../assets/planches/imprimerie-andralis.webp'); }
.cut--patafisica { background-image: url('../assets/planches/college-pataphysique.webp'); }

.cut--c1r1 { background-position: 2% 7%; }
.cut--c2r1 { background-position: 98% 7%; }
.cut--c1r2 { background-position: 2% 52%; }
.cut--c2r2 { background-position: 98% 52%; }
.cut--c1r3 { background-position: 2% 97%; }
.cut--c2r3 { background-position: 98% 97%; }

.cut--invert { filter: invert(1) contrast(1.08) brightness(.95); }
.cut--screen { mix-blend-mode: screen; }
.cut--multiply { mix-blend-mode: multiply; }
.cut--multiply-soft { mix-blend-mode: multiply; opacity: .92; }

/* Wider aspect-ratio adjustments for non-square containers */
.cut.is-wide.cut--c2r1 { background-position: 98% 12%; }
.cut.is-wide.cut--c1r1 { background-position: 2% 12%; }

/* Figure caption (encyclopedia style) */
.figcap {
  font: italic 400 13px var(--font-display);
  color: #2a1f12;
  letter-spacing: .01em;
  padding-top: 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(0,0,0,.35);
  line-height: 1.35;
}
.figcap b {
  display: block;
  font: 700 9.5px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 4px;
}
.figcap--dark {
  color: var(--cream-soft);
  border-top-color: var(--line);
}
.figcap--dark b { color: var(--cream); }

/* Dragon ornaments (alternate logos) */
.dragon { display: block; pointer-events: none; }
.dragon img { width: 100%; height: auto; display: block; }
.dragon--rotate { animation: dragonRotate 38s linear infinite; }
@keyframes dragonRotate { to { transform: rotate(360deg); } }
.dragon--float { animation: dragonFloat 9s ease-in-out infinite; }
@keyframes dragonFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 160px 0 100px;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__blob {
  position: absolute;
  border-radius: 50%;
}
/* glow via radial-gradient (no filter:blur) -> mismo look, sin repintado costoso en scroll */
.hero__blob--pink { width: 760px; height: 760px; background: radial-gradient(circle, var(--magenta-deep) 0%, transparent 70%); top: -230px; right: -190px; opacity: .55; }
.hero__blob--orange { width: 620px; height: 620px; background: radial-gradient(circle, var(--orange) 0%, transparent 70%); bottom: -200px; left: -160px; opacity: .28; }
.hero__planche {
  position: absolute;
  top: 40%;
  right: -8%;
  width: 70%;
  max-width: 1100px;
  transform: translateY(-40%);
  opacity: .22;
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(180deg) contrast(1.05) brightness(1.02);
  pointer-events: none;
  animation: planchePulse 14s ease-in-out infinite;
}
@keyframes planchePulse {
  0%, 100% { transform: translateY(-40%) scale(1); opacity: .22; }
  50% { transform: translateY(-41%) scale(1.015); opacity: .27; }
}

/* Floating cutouts in the hero background */
.hero__cut {
  position: absolute;
  pointer-events: none;
  filter: invert(1) contrast(1.08) brightness(.96);
  /* Soft radial fade so the rectangular crop doesn't show hard edges */
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 85%);
          mask-image: radial-gradient(ellipse 60% 60% at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 85%);
}
.hero__cut--brazo {
  width: 280px; height: 280px;
  bottom: 8%; left: -2%;
  transform: rotate(-6deg);
  opacity: .16;
  animation: floatA 12s ease-in-out infinite;
}
.hero__cut--ajedrez {
  width: 240px; height: 240px;
  top: 14%; right: 2%;
  transform: rotate(-3deg);
  opacity: .12;
  animation: floatC 11s ease-in-out infinite;
}
.hero__cut--ojo { display: none; }
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(-5deg); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(12px) rotate(7deg); } }
@keyframes floatC { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }

.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
.hero__top-left { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.hero__top-right {
  font: 400 12px var(--font-mono);
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
  letter-spacing: .04em;
}
.hero__top-right b { color: var(--cream); font-weight: 500; }
.hero__top-right .live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green);
}
.hero__top-right .live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(52,211,153,.6);
  animation: livePulse 2.2s var(--ease-out) infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  70% { box-shadow: 0 0 0 14px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ---- Logo as hero protagonist ---- */
.hero__logoblock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0;
}
.hero__logo {
  width: clamp(280px, 38vw, 520px);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 60px rgba(255,61,127,0.18));
  animation:
    heroLogoIn 1.1s var(--ease-out) both,
    heroLogoBreathe 7s ease-in-out 1.4s infinite;
  transform-origin: left center;
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroLogoBreathe {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 60px rgba(255,61,127,0.18)); }
  50%      { transform: translateY(-3px) scale(1.012); filter: drop-shadow(0 0 80px rgba(255,138,61,0.28)); }
}
.hero__slogan {
  font: 500 clamp(44px, 6.4vw, 92px) var(--font-display);
  color: var(--cream);
  line-height: 1.0;
  letter-spacing: -.025em;
  margin-left: -2px;
  animation: heroLogoIn 1.2s var(--ease-out) .35s both;
}
.hero__slogan em {
  font-style: italic;
  font-weight: 400;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__slogan b {
  font-style: normal;
  font-weight: 500;
  color: var(--cream);
}
.hero__slogan-dragon {
  display: inline-block;
  width: clamp(54px, 7vw, 96px);
  vertical-align: -16%;
  margin: 0 8px 0 0;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  animation: dragonHover 5s ease-in-out infinite;
}
@keyframes dragonHover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(64px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--cream);
}
.hero__headline .ln { display: block; overflow: hidden; }
.hero__headline .ln span {
  display: inline-block;
  transform: translateY(110%);
  animation: lnUp 1.1s var(--ease-out) forwards;
}
.hero__headline .ln:nth-child(1) span { animation-delay: .15s; }
.hero__headline .ln:nth-child(2) span { animation-delay: .35s; }
@keyframes lnUp { to { transform: translateY(0); } }
.hero__headline .it {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(95deg, #ff3d7f 0%, #ff8a3d 60%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lower {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
  margin-top: 12px;
}
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 28px);
  font-style: italic;
  font-weight: 400;
  color: var(--cream-soft);
  line-height: 1.35;
  max-width: 540px;
}
.hero__sub b { font-style: normal; font-weight: 700; color: var(--cream); }
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.hero__meta-item {
  display: flex; flex-direction: column; gap: 4px;
}
.hero__meta-item .num {
  font: 600 32px var(--font-display);
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__meta-item .num .it { font-style: italic; color: var(--orange); }
.hero__meta-item .lbl {
  font: 500 10px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

.hero__ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 22px;
}

/* ---- INSURREXIT dragon stamp ---- */
.stamp {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.stamp--hero {
  bottom: 60px; right: 4%;
  width: 280px;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.5));
}
.stamp--hero img { width: 100%; height: auto; display: block; }
.stamp--hero .stamp__rotor {
  position: absolute;
  inset: -22% -22% -22% -22%;
  pointer-events: none;
  animation: stampSpin 32s linear infinite;
  opacity: .55;
}
.stamp--hero .stamp__rotor svg { width: 100%; height: 100%; }
.stamp__rotor text {
  font: 700 9.5px var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
  fill: var(--cream);
}
.stamp__rotor circle {
  fill: none; stroke: var(--pink); stroke-width: 1; opacity: .8;
}
@keyframes stampSpin { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
  .hero__lower { grid-template-columns: 1fr; gap: 28px; }
  .stamp--hero { width: 170px; bottom: 18px; right: 14px; }
}

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.ticker {
  position: relative;
  background: var(--cream);
  color: var(--black);
  padding: 18px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker__track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
}
.ticker__item {
  display: inline-flex; align-items: center; gap: 16px;
  font: 600 24px var(--font-display);
  letter-spacing: -.01em;
}
.ticker__item .day {
  font: 500 11px var(--font-mono);
  background: var(--black); color: var(--cream);
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: .12em; text-transform: uppercase;
}
.ticker__item .star {
  width: 18px; height: 18px;
  color: var(--pink);
}
.ticker__item:hover .day { background: var(--pink); color: var(--cream); }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ============================================================
   SECTION SHARED
   ============================================================ */
.section {
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}
.section-head__left { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.section-head__title {
  font: 600 clamp(40px, 6vw, 84px) var(--font-display);
  letter-spacing: -.025em; line-height: .95;
  color: var(--cream);
}
.section-head__title .it {
  font-style: italic;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.section-head__right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.section-head__right .figmark { white-space: nowrap; }
.section-head__fig { display: block; width: clamp(180px, 17vw, 250px); height: auto; filter: contrast(1.08) drop-shadow(0 10px 22px rgba(0,0,0,.45)); opacity: .55; margin-bottom: 2px; position: relative; z-index: 3; }
.section-head__fig--sm { width: clamp(130px, 12vw, 175px); }
@media (max-width: 820px) { .section-head__fig { width: clamp(150px, 34vw, 200px); } .section-head__fig--sm { width: clamp(120px, 26vw, 150px); } }

/* ============================================================
   AGENDA · EDITORIAL GRID
   ============================================================ */
.agenda {
  background: var(--black);
  position: relative;
  padding-top: clamp(44px, 5.5vw, 80px);
  scroll-margin-top: 52px;
}
.agenda__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.event {
  position: relative;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column;
  gap: 22px;
  overflow: hidden;
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.event:hover {
  border-color: var(--line-2);
  transform: translateY(-4px);
}
.event::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,61,127,0.10), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  pointer-events: none;
}
.event:hover::before { opacity: 1; }
.event__figure {
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  opacity: 0;
  transform: translate(40px, -40px) rotate(-6deg);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: invert(1) brightness(0.95) contrast(1.1);
}
.event:hover .event__figure {
  opacity: .35;
  transform: translate(20px, -20px) rotate(0);
}

.event__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.event__date {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--cream);
}
.event__date .day {
  font-size: 80px; font-weight: 700;
  letter-spacing: -.04em;
}
.event__date .day .it { font-style: italic; color: var(--pink); }
.event__date .dow {
  font: 700 12px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange); margin-top: 7px;
}
.event__date .mon {
  font: 500 11px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}
.event__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag {
  font: 500 10px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--cream-soft);
}
.tag--teatro { color: var(--pink); border-color: rgba(255,61,127,.4); }
.tag--musica { color: var(--orange); border-color: rgba(255,138,61,.4); }
.tag--cine   { color: var(--amber); border-color: rgba(251,191,36,.35); }
.tag--ninxs  { color: var(--green); border-color: rgba(52,211,153,.35); }
.tag--ciclo  { color: var(--cream); border-color: var(--line-2); background: var(--night-2); }

.event__title {
  font: 600 28px var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--cream);
}
.event__title .it { font-style: italic; color: var(--cream-soft); }
.event__synopsis {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.event__meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  font: 500 11px var(--font-mono);
  letter-spacing: .06em;
  color: var(--cream-soft);
}
.event__meta .k {
  display: block;
  font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.event__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.event__price {
  font: 600 20px var(--font-display);
  color: var(--cream);
}
.event__price .it { font-style: italic; color: var(--orange); font-size: 14px; margin-left: 6px; }
.event__progress {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 180px;
}
.event__progress .meter {
  height: 4px; background: var(--line); border-radius: 999px; overflow: hidden;
}
.event__progress .meter span {
  display: block; height: 100%;
  background: var(--gradient);
  border-radius: inherit;
}
.event__progress .lbl {
  font: 500 10px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

.event__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gradient);
  transition: transform .25s var(--ease-out), filter .25s;
  white-space: nowrap;
}
.event:hover .event__cta { transform: translateY(-2px); }

/* Tamaños distintos según rol editorial */
.event--feature {
  grid-column: span 12;
  flex-direction: row;
  gap: 36px;
  align-items: stretch;
  padding: 0;
  min-height: 360px;
}
.event--feature .event__visual {
  width: 46%;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(160deg, #1c0e14 0%, #0a0a0a 70%);
}
.event--feature .event__visual::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(255,61,127,.32), transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(255,138,61,.22), transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}
/* Cutout collage layered on the feature card visual */
.event--feature .event__cut {
  position: absolute;
  pointer-events: none;
  filter: invert(1) contrast(1.08) brightness(.96);
}
.event--feature .event__cut--ojo {
  width: 220px; height: 220px;
  top: 8%; right: -8%;
  transform: rotate(8deg);
  opacity: .55;
}
.event--feature .event__cut--ajedrez {
  width: 200px; height: 200px;
  bottom: -12%; left: -6%;
  transform: rotate(-10deg);
  opacity: .42;
}
.event--feature .event__cut--mona {
  width: 140px; height: 140px;
  top: 38%; left: 42%;
  transform: rotate(-4deg);
  opacity: .28;
  mix-blend-mode: screen;
}
.event--feature .event__visual-img { display: none; }
.event--feature .event__visual-tag {
  position: absolute;
  top: 24px; left: 24px;
  z-index: 2;
  font: 700 10px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream);
  padding: 6px 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.event--feature .event__visual-stamp {
  position: absolute;
  bottom: 24px; left: 24px;
  z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--cream);
}
.event--feature .event__visual-stamp .big {
  font: 700 64px var(--font-display);
  letter-spacing: -.04em; line-height: .9;
}
.event--feature .event__body {
  flex: 1;
  padding: 36px 36px 36px 0;
  display: flex; flex-direction: column;
  gap: 22px;
}
.event--feature .event__title { font-size: 44px; line-height: .98; }

.event--md { grid-column: span 6; }
.event--sm { grid-column: span 6; }

@media (max-width: 1080px) {
  .event--feature { grid-column: span 12; flex-direction: column; }
  .event--feature .event__visual { width: 100%; height: 280px; border-right: none; border-bottom: 1px solid var(--line); }
  .event--feature .event__body { padding: 28px; }
  .event--md, .event--sm { grid-column: span 6; }
}
@media (max-width: 720px) {
  .event--md, .event--sm { grid-column: span 12; }
  .event__date .day { font-size: 60px; }
}

.agenda__footer {
  margin-top: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.agenda__footer .note {
  font: italic 400 16px var(--font-display);
  color: var(--cream-soft);
}
.agenda__footer .note b { font-style: normal; color: var(--cream); }

/* Cartelera home · cards secundarias expandibles (click → imagen + detalles) */
.event--md, .event--sm { cursor: pointer; }
.event--md:focus-visible, .event--sm:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.event__media { margin: -28px -28px -22px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease-out), opacity .4s var(--ease-out), margin-bottom .5s var(--ease-out); }
.event__media img { width: auto; max-width: 100%; height: auto; max-height: clamp(260px, 40vh, 440px); display: block; margin: 0 auto; border-bottom: 1px solid var(--line); }
.event.is-expanded .event__media { max-height: 900px; opacity: 1; margin-bottom: 0; }
.event__extra { max-height: 0; overflow: hidden; opacity: 0; margin-bottom: -22px; display: flex; align-items: center; gap: 8px; font: 500 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); transition: max-height .45s var(--ease-out), opacity .4s var(--ease-out), margin-bottom .45s var(--ease-out); }
.event.is-expanded .event__extra { max-height: 48px; opacity: 1; margin-bottom: 0; }
.event__hint { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px dashed var(--line); padding-top: 14px; font: 700 9px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .25s; }
.event--md:hover .event__hint, .event--sm:hover .event__hint { color: var(--cream-soft); }
.event__hint svg { width: 12px; height: 12px; transition: transform .35s var(--ease-out); }
.event.is-expanded .event__hint svg { transform: rotate(180deg); }
.event__hint .close-lbl { display: none; }
.event.is-expanded .event__hint .open-lbl { display: none; }
.event.is-expanded .event__hint .close-lbl { display: inline; }
/* CTA "ir al evento" · se revela junto con los detalles */
.event__go { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; display: flex; transition: max-height .45s var(--ease-out), opacity .4s var(--ease-out), margin-top .45s var(--ease-out); }
.event.is-expanded .event__go { max-height: 64px; opacity: 1; margin-top: 6px; }
.event__go .btn { padding: 11px 20px; font-size: 11px; }
.event__go .btn--primary { box-shadow: none; }
/* Cards de cartelera home: NO colapsables. Mostrar venue + entradas siempre
   (imagen si hay), sin el toggle "ver imagen y detalles". */
.event--md, .event--sm { cursor: default; }
.event--md .event__media, .event--sm .event__media { max-height: none; opacity: 1; margin-bottom: 0; }
.event--md .event__extra, .event--sm .event__extra { max-height: 48px; opacity: 1; margin-bottom: 0; }
.event--md .event__go, .event--sm .event__go { max-height: 64px; opacity: 1; margin-top: 6px; }
.event--md .event__hint, .event--sm .event__hint { display: none; }

/* Expansión in-place: la card crece en su lugar y la grilla no se reordena
   (la versión full-width dejaba a la card vecina huérfana con un hueco negro) */

/* --- Cartelera · acordeón de eventos secundarios (C2) --- */
.agenda__grid--acc { display: block; }
.agenda__grid--acc .event--feature { margin-bottom: 8px; }
.agenda-acc { margin-top: 28px; border-top: 1px solid var(--line); }
.ev-acc { border-bottom: 1px solid var(--line); }
.ev-acc__head { width: 100%; display: grid; grid-template-columns: 96px 1fr auto 40px; gap: 22px; align-items: center; padding: 24px 6px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--cream); transition: padding .25s var(--ease-out); }
.ev-acc__head:hover { padding-left: 14px; padding-right: 14px; }
.ev-acc.is-open .ev-acc__head { padding-left: 14px; padding-right: 14px; }
.ev-acc__date { display: flex; flex-direction: column; gap: 4px; }
.ev-acc__date .d { font: 500 30px var(--font-display); line-height: 1; color: var(--cream); }
.ev-acc__date .m { font: 700 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ev-acc__title { font: 500 clamp(20px, 2.3vw, 30px) var(--font-display); letter-spacing: -.02em; line-height: 1.1; color: var(--cream); }
.ev-acc__title .it { font-style: italic; }
.ev-acc__head:hover .ev-acc__title, .ev-acc.is-open .ev-acc__title { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ev-acc__tags { display: flex; gap: 6px; }
.ev-acc__arrow { width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .3s var(--ease-out), background .3s, border-color .3s; }
.ev-acc__arrow svg { width: 16px; height: 16px; color: var(--cream); transition: transform .3s var(--ease-out); }
.ev-acc__head:hover .ev-acc__arrow { border-color: var(--pink); }
.ev-acc.is-open .ev-acc__arrow { background: var(--gradient); border-color: transparent; transform: rotate(45deg); }
.ev-acc.is-open .ev-acc__arrow svg { transform: rotate(-45deg); }
.ev-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.ev-acc.is-open .ev-acc__panel { grid-template-rows: 1fr; }
.ev-acc__panel-inner { overflow: hidden; min-height: 0; }
.ev-acc__panel .event__synopsis { margin: 0 6px 16px; max-width: 72ch; color: var(--cream-soft); }
.ev-acc__panel .event__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 0 6px 28px; }
@media (max-width: 720px) {
  .ev-acc__head { grid-template-columns: 60px 1fr 40px; gap: 14px; }
  .ev-acc__tags { display: none; }
  .ev-acc__date .d { font-size: 24px; }
}

/* ============================================================
   CREAM SECTION · planche full bleed (sobre el Archi)
   ============================================================ */
.cream {
  background: var(--cream);
  color: var(--black);
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cream::before {
  /* paper texture */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at top left, rgba(150,120,90,.10), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(120,90,60,.10), transparent 50%);
  pointer-events: none;
}
.cream::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.cream__head {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr;
  gap: 16px; justify-items: start;
  border-bottom: 1px solid rgba(0,0,0,.35);
  padding-bottom: 24px;
  margin-bottom: 48px;
}
.cream__edition {
  display: flex; flex-direction: column; gap: 6px;
  font: 500 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: #5a4a3a;
}
.cream__edition .top { display: flex; gap: 12px; align-items: center; }
.cream__edition .top b { color: var(--black); font-weight: 700; }
.cream__edition .rule { flex: 1; height: 1px; background: var(--black); }
.cream__edition .small { font-family: var(--font-display); font-style: italic; font-size: 14px; color: #2a1f12; text-transform: none; letter-spacing: 0; }

.cream__title {
  font: 600 clamp(48px, 7vw, 110px) var(--font-display);
  letter-spacing: -.03em;
  line-height: .92;
  color: var(--black);
  text-align: left;
}
.cream__title .it { font-style: italic; }

.cream__body {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 64px;
  align-items: flex-start;
}
.cream__planche {
  position: relative;
}
.cream__planche img {
  width: 100%; height: auto;
  filter: contrast(1.05) saturate(.85);
  mix-blend-mode: multiply;
}
.cream__planche .cap {
  margin-top: 14px;
  font: italic 400 13px var(--font-display);
  color: #2a1f12;
  text-align: center;
  letter-spacing: .02em;
}
.cream__planche .cap b { font-style: normal; font-weight: 700; }

.cream__text {
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 22px;
}
.cream__text .lede {
  font: 500 22px var(--font-display);
  line-height: 1.4;
  color: var(--black);
}
.cream__text .lede .it { font-style: italic; color: #6a2444; }
.cream__text p {
  font: 400 15px var(--font-body);
  line-height: 1.7;
  color: #2a1f12;
  max-width: 56ch;
}
.cream__text .dropcap::first-letter {
  float: left;
  font: 700 80px var(--font-display);
  line-height: .85;
  margin: 4px 10px 0 -2px;
  color: var(--black);
}

.cream__timeline {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border-top: 2px solid var(--black);
}
.cream__timeline .cream__tl-item:last-child { border-right: 0; }
.cream__tl-item {
  padding: 18px 13px 0;
  border-right: 1px solid rgba(0,0,0,.25);
  position: relative;
}
.cream__tl-item:last-child { border-right: none; }
.cream__tl-item::before {
  content: '';
  position: absolute;
  top: -7px; left: 16px;
  width: 12px; height: 12px;
  background: var(--black);
  border-radius: 50%;
}
.cream__tl-item .yr {
  font: 700 clamp(20px, 1.7vw, 26px) var(--font-display);
  color: var(--black);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.cream__tl-item .ev {
  margin-top: 8px;
  font: 400 13px var(--font-body);
  color: #2a1f12;
  line-height: 1.4;
}
.cream__tl-item .ev b { color: #1a1109; font-weight: 700; }
.cream__inline-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(200,37,154,.45); text-underline-offset: 3px; transition: text-decoration-color .2s ease, color .2s ease; }
.cream__inline-link:hover { color: var(--magenta-deep); text-decoration-color: var(--magenta-deep); }
.hero__landing-note { display: inline-block; margin-top: 16px; font: 700 11px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }

.cream__credits {
  position: relative; z-index: 2;
  margin-top: 64px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.35);
  padding-top: 22px;
  font: 500 11px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: #5a4a3a;
}
.cream__credits b { color: var(--black); font-weight: 700; }
.cream__credits .center {
  font: italic 400 14px var(--font-display);
  letter-spacing: 0; text-transform: none;
  color: var(--black);
}

/* ---- Cream layout: featured cutout + editorial text + inline minis ---- */
.cream__body {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: flex-start;
  margin-bottom: 56px;
}
/* Sin esto la tira de laminas, que scrollea sola, estira su columna a
   min-content y se come la del texto: 706/446 en vez de 619/589. */
.cream__body > * { min-width: 0; }

/* Main featured figure (Sala Andralis seccionada) */
.cream__feature {
  position: relative;
}
.cream__feature .cut {
  width: 100%;
  aspect-ratio: 6 / 5;
  background-color: transparent;
  filter: contrast(1.06) saturate(.92);
  mix-blend-mode: multiply;
}
.cream__feature .figcap {
  margin-top: 10px;
  text-align: left;
  max-width: 56ch;
}
.cream__feature__dragon {
  position: absolute;
  bottom: -34px; right: -18px;
  width: 110px;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 3;
}
.cream__feature__dragon img { width: 100%; height: auto; display: block; }

/* Mini cutouts row beneath the feature */
.cream__minis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.cream__mini { margin: 0; }
.cream__mini .cut {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  filter: contrast(1.06) saturate(.92);
  mix-blend-mode: multiply;
}

/* Editorial text column */
.cream__text {
  display: flex; flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}
.cream__text .lede {
  font: 500 22px var(--font-display);
  line-height: 1.4;
  color: var(--black);
}
.cream__text .lede em {
  font-style: italic;
  color: #6a2444;
}
.cream__text p {
  font: 400 15px var(--font-body);
  line-height: 1.7;
  color: #2a1f12;
  max-width: 54ch;
}
.cream__text b { font-weight: 700; color: var(--black); }
.cream__text .dropcap::first-letter {
  float: left;
  font: 700 78px var(--font-display);
  line-height: .85;
  margin: 4px 10px 0 -2px;
  color: var(--black);
}

/* Inline figure embedded within the text column */
.cream__inline {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(0,0,0,.25);
  margin: 6px 0;
}
.cream__inline-fig {
  width: 165px; height: auto; display: block;
  filter: contrast(1.04) saturate(.92);
  mix-blend-mode: multiply;
}
.cream__inline .cut {
  width: 110px; height: 110px;
  aspect-ratio: 1 / 1;
  background-color: transparent;
  filter: contrast(1.06) saturate(.92);
  mix-blend-mode: multiply;
}
.cream__inline .figcap {
  margin: 0; padding: 0; border: none;
}

/* Insurrexit dragon stamp at end of section */
.cream__dragon-stamp {
  display: flex;
  justify-content: center;
  margin: 24px 0 36px;
  position: relative; z-index: 2;
}
.cream__dragon-stamp img {
  width: clamp(180px, 22vw, 280px);
  height: auto;
  transform: rotate(-2deg);
  opacity: .9;
  filter: sepia(.2) contrast(1.05);
}

@media (max-width: 940px) {
  .cream__head { grid-template-columns: 1fr; }
  .cream__title { text-align: left; }
  .cream__body { grid-template-columns: 1fr; gap: 36px; }
  .cream__minis { grid-template-columns: repeat(3, 1fr); }
  .cream__timeline { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TALLERES · marquee vertical / lista editorial
   ============================================================ */
.talleres {
  background: var(--black);
  position: relative;
  overflow: hidden;
}
.talleres__bg {
  position: absolute; inset: 0;
  background-image: url('../assets/planches/laboratorio-inutiles.webp');
  background-size: cover;
  background-position: center left;
  opacity: .05;
  mix-blend-mode: screen;
  filter: invert(1) contrast(1.45) brightness(1.06);
  pointer-events: none;
}
.talleres__lead {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 40px;
  margin-bottom: 0;
  position: relative; z-index: 2;
}
.talleres__lead p {
  font: italic 400 18px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5;
  max-width: 38ch;
  text-align: right;
  justify-self: end;
}

.talleres__list {
  position: relative; z-index: 2;
  margin-top: 0;
}
/* La seccion se queda quieta mientras el acordeon la recorre.
   La pista da el presupuesto de scroll: un tramo fijo por lamina. El bloque
   pegajoso sostiene la lista adentro de ese presupuesto, y como la pista tiene
   alto propio, abrir o cerrar un panel no mueve nada de lo que esta abajo.
   Tecnica estandar de scrollytelling (position: sticky con pasos), la misma que
   documenta The Pudding. Solo de 860 para arriba: en el celular una lamina
   abierta ya ocupa mas de una pantalla y ahi se abre tocando. */
/* La seccion de talleres tenia overflow: hidden, que es el asesino clasico del
   position: sticky: convierte a la seccion en contenedor de scroll y el bloque
   se clava contra ella, que se va con la pagina, asi que no se clava con nada.
   overflow: clip recorta igual pero no crea contenedor de scroll. */
.section.talleres { overflow: clip; }

/* Clavada, la lista no entra entera en una notebook: cuatro cabeceras son
   448 px y el panel abierto otros 367. Por eso el bloque pegajoso es una
   ventana con alto propio y la lista se corre adentro, de manera que la lamina
   abierta siempre queda a la vista con sus vecinas alrededor. */
.talleres__pista.is-pegada .talleres__sticky {
  position: sticky;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.talleres__pista.is-pegada .talleres__list {
  transition: transform .55s var(--ease-out);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .talleres__pista.is-pegada .talleres__list { transition: none; }
}

/* ---- Talleres como acordeón con flyer + info ---- */
.taller {
  border-bottom: 1px solid var(--line);
  position: relative;
}
.taller::after { display: none; }
.taller__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  transition: padding .3s var(--ease-out);
  position: relative;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
}
.taller__head::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,61,127,.04), transparent);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
}
.taller__head:hover::before { opacity: 1; }
.taller__head:hover { padding-left: 16px; padding-right: 16px; }
.taller.is-open .taller__head { padding-left: 16px; padding-right: 16px; }
.taller.is-open .taller__head::before { opacity: 1; }
.taller.is-open .taller__name {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.taller.is-open .taller__arrow {
  background: var(--gradient);
  border-color: transparent;
  transform: rotate(45deg);
}
.taller.is-open .taller__arrow svg { transform: rotate(-45deg); }

/* Abre a la altura exacta del contenido (0fr -> 1fr), como el acordeon de la
   cartelera. Antes iba contra un max-height de 720px sobre paneles de ~330:
   la mitad del recorrido era aire, y con el carrusel automatico ese aire se
   ve como un salto cada vez que una lamina cierra y abre la siguiente. */
.taller__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease-out), opacity .35s var(--ease-out), padding .35s var(--ease-out);
  padding: 0 16px;
}
.taller__panel-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 258px) 1fr;
  gap: 36px;
  align-items: start;
}
.taller.is-open .taller__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 8px 16px 36px;
}

/* Flyer placeholder */
.taller__flyer {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  background: var(--night);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.taller__flyer::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--flyer-gradient, linear-gradient(160deg, #c8259a 0%, #1a0a14 70%));
  opacity: .55;
  pointer-events: none;
}
.taller__flyer .cut {
  position: absolute;
  inset: 0;
  filter: invert(1) contrast(1.08) brightness(.95);
  mix-blend-mode: screen;
  opacity: .55;
  -webkit-mask-image: radial-gradient(circle at 60% 40%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
          mask-image: radial-gradient(circle at 60% 40%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 80%);
}
.taller__flyer > * { position: relative; z-index: 2; }
.taller__flyer-top {
  display: flex; flex-direction: column; gap: 6px;
}
.taller__flyer-edition {
  font: 700 9px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream);
  opacity: .7;
}
.taller__flyer-title {
  font: 600 32px var(--font-display);
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--cream);
}
.taller__flyer-title .it { font-style: italic; font-weight: 400; }
.taller__flyer-bottom {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--cream);
}
.taller__flyer-bottom .who {
  font: italic 400 16px var(--font-display);
}
.taller__flyer-bottom .when {
  font: 500 11px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .82;
}
.taller__flyer-mark {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 3;
  width: 56px; height: 56px;
  border: 1px solid var(--cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: italic 400 13px var(--font-display);
  color: var(--cream);
  opacity: .55;
}

/* Flyer real → recorte surrealista sobre placa de papel (rev jun 2026) */
.taller__name-nota { font: italic 400 .62em var(--font-display); color: var(--cream-soft); opacity: .8; white-space: nowrap; }
.taller__flyer--img { padding: 0; background: linear-gradient(168deg, #fbf9f5 0%, #ece5da 100%); border-color: rgba(20,16,12,.12); }
.taller__flyer--img::before {
  display: block;
  background-image: none;
  background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(20,16,12,.025) 13px 14px);
  opacity: 1;
}
.taller__flyer--img .flyer-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  padding: 30px 18px 0;
  z-index: 2;
  border-radius: inherit;
  filter: drop-shadow(0 14px 18px rgba(20,16,12,.18));
}
/* Sin Telon es una foto, no un flyer recortado: llena la tarjeta. */
.taller__flyer--foto::before { display: none; }
.taller__flyer--foto .flyer-img { object-fit: cover; object-position: center; }
.taller__flyer--img .taller__flyer-mark { color: #6f6a63; z-index: 3; }

/* Details column */
.taller__details {
  display: flex; flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}
.taller__details-eyebrow {
  font: 700 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink);
}
.taller__details-desc {
  font: 400 15px var(--font-body);
  color: var(--cream-soft);
  line-height: 1.65;
  max-width: 46ch;
}
.taller__details-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  padding: 16px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.taller__details-meta dt {
  font: 500 9px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.taller__details-meta dd {
  font: 500 14px var(--font-body);
  color: var(--cream);
}
.taller__details-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 1020px) {
  .taller__head { grid-template-columns: 1fr auto; }
  .taller__teacher, .taller__schedule { display: none; }
  .taller__name { font-size: 24px; }
  .taller__panel-inner { grid-template-columns: 1fr; gap: 24px; }
  .taller__flyer { max-width: 300px; }
}
/* En el telefono la lamina abierta medía 814 px y en un iPhone 14 hay 728 de
   alto util, asi que la seccion nunca se podia clavar y el acordeon quedaba
   solo de tocar. Aca se compacta para que entre: el flyer pasa de retrato a
   una franja ancha, los datos van en una columna de filas cortas y los dos
   botones en una linea. Si aun asi no entra, el guard de talleres.js la deja
   abriendose de a toques, que es el comportamiento de siempre. */
@media (max-width: 620px) {
  .taller.is-open .taller__panel { padding: 6px 16px 16px; }
  .taller__panel-inner { gap: 12px; }
  .taller__flyer { max-width: none; aspect-ratio: 16 / 6; padding: 14px; gap: 8px; }
  .taller__details { gap: 10px; }
  .taller__details-desc { font-size: 13.5px; line-height: 1.5; }
  .taller__details-meta { gap: 8px 18px; padding: 10px 0; }
  .taller__details-meta dt { font-size: 8.5px; margin-bottom: 2px; }
  .taller__details-meta dd { font-size: 13px; }
  .taller__details-cta { flex-wrap: nowrap; gap: 8px; }
  .taller__details-cta .btn { padding: 10px 14px; font-size: 12.5px; white-space: nowrap; }
  /* El "Ver todos los talleres" de adentro de la lamina se va: la seccion ya
     tiene el suyo arriba y aca le comia el ancho al de WhatsApp, que es el que
     sirve para anotarse. */
  .taller__details-cta .btn:nth-child(2) { display: none; }
}
.taller__num {
  font: italic 400 22px var(--font-display);
  color: var(--muted);
}
.taller__num b { font-style: normal; color: var(--pink); font-weight: 700; }
.taller__name {
  font: 600 32px var(--font-display);
  color: var(--cream);
  letter-spacing: -.02em;
  line-height: 1;
  transition: color .25s, transform .35s var(--ease-out);
}
.taller__name .it { font-style: italic; font-weight: 400; }
.taller__head:hover .taller__name,
.taller.is-open .taller__name {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.taller__teacher {
  font: 400 14px var(--font-body);
  color: var(--cream-soft);
}
.taller__teacher .role {
  display: block;
  font: 500 10px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.taller__schedule {
  font: 500 13px var(--font-mono);
  letter-spacing: .03em;
  color: var(--cream-soft);
}
.taller__schedule .day {
  display: block;
  color: var(--cream);
}
.taller__schedule .time { color: var(--muted); }
.taller__arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, transform .35s var(--ease-out);
  color: var(--cream);
}
.taller__arrow svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.taller__head:hover .taller__arrow {
  background: var(--gradient);
  border-color: transparent;
  transform: rotate(-45deg);
}
.taller__head:hover .taller__arrow svg { transform: rotate(45deg); }

@media (max-width: 1020px) {
  .taller { grid-template-columns: 1.4fr auto; }
  .taller__teacher, .taller__schedule { display: none; }
  .taller__name { font-size: 24px; }
}
@media (max-width: 720px) {
  .talleres__lead { grid-template-columns: 1fr; }
  .talleres__lead p { text-align: left; justify-self: start; }
}

/* ============================================================
   ESPACIO · 3 columnas (Sala Andralis · Sala Orozco · Pulpe)
   ============================================================ */
.espacio {
  background: var(--black);
  position: relative;
  border-top: 1px solid var(--line);
}
.espacio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.room {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 18px;
  background: var(--night);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease-out);
}
.room:hover { border-color: var(--line-2); transform: translateY(-4px); }
.room__num {
  font: 500 10px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.room__name {
  font: 600 36px var(--font-display);
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--cream);
}
.room__name .it { font-style: italic; font-weight: 400; color: var(--cream-soft); }
.room__cap {
  font: 500 11px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange);
}
.room__desc {
  font: 400 14px var(--font-body);
  color: var(--cream-soft);
  line-height: 1.6;
}
.room__visual {
  margin-top: auto;
  height: 140px;
  border-radius: var(--r-md);
  background: var(--night-2);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.room__visual::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(245,241,234,.04) 6px 7px);
}
.room__visual span {
  position: absolute; left: 16px; bottom: 12px;
  font: 500 10px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.room--andralis .room__visual {
  background: linear-gradient(160deg, #2a1414 0%, #0a0a0a 70%),
    radial-gradient(circle at 50% 30%, rgba(255,61,127,.4), transparent 50%);
}
.room--andralis .room__visual::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.7) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.25), transparent 35%);
}
.room--orozco .room__visual {
  background:
    radial-gradient(circle at 80% 50%, rgba(255,138,61,.35), transparent 50%),
    linear-gradient(160deg, #1c1612 0%, #0a0a0a 70%);
}
.room--pulpe .room__visual {
  background:
    radial-gradient(circle at 30% 70%, rgba(52,211,153,.25), transparent 60%),
    linear-gradient(160deg, #11211a 0%, #0a0a0a 70%);
}

@media (max-width: 880px) {
  .espacio__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA STRIP · gradient
   ============================================================ */
.cta {
  background: var(--gradient);
  color: white;
  padding: clamp(80px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/planches/maquina-transfiguracion.webp');
  background-size: cover;
  background-position: center;
  opacity: .12;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cta__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta__title {
  font: 600 clamp(40px, 6vw, 80px) var(--font-display);
  letter-spacing: -.025em;
  line-height: .95;
  color: white;
}
.cta__title .it { font-style: italic; color: rgba(255,255,255,.7); }
.cta__sub {
  font: italic 400 18px var(--font-display);
  color: rgba(255,255,255,.92);
  margin-top: 18px;
  max-width: 46ch;
}
.cta__right {
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-end;
}
.cta__channels {
  display: flex; flex-direction: column; gap: 8px;
  font: 500 12px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: white;
  text-align: right;
}
.cta__channels a { display: block; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.cta__channels a:hover { border-color: white; }

@media (max-width: 880px) {
  .cta__inner { grid-template-columns: 1fr; }
  .cta__right { align-items: flex-start; }
  .cta__channels { text-align: left; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--black);
  padding: 80px 0 32px;
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.footer__brand img { height: 60px; width: auto; margin-bottom: 18px; }
.footer__brand p {
  font: italic 400 15px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5;
  max-width: 32ch;
}
.footer__col h4 {
  font: 500 10px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  font: 400 14px var(--font-body);
  color: var(--cream-soft);
  transition: color .2s;
}
.footer__col a:hover { color: var(--pink); }
.footer__col p {
  font: 400 14px var(--font-body);
  color: var(--cream-soft);
  line-height: 1.6;
}
.footer__col p b { color: var(--cream); font-weight: 600; }
.footer__news {
  display: flex; margin-top: 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  align-items: center;
}
.footer__news input {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  font: 400 13px var(--font-body);
  color: var(--cream);
  padding: 8px 4px;
}
.footer__news input::placeholder { color: var(--muted-2); }
.footer__news button {
  padding: 8px 14px;
  font: 700 11px var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--gradient);
  color: white;
  border-radius: 999px;
}
.footer__bottom {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font: 400 11px var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted-2);
}
.footer__bottom b { color: var(--cream-soft); font-weight: 500; }
.footer__giant {
  font: 700 clamp(48px, 15vw, 250px) var(--font-display);
  letter-spacing: -.04em;
  line-height: .8;
  color: transparent;
  margin: 32px 0 -10px;
  user-select: none;
  text-align: center;
  -webkit-text-stroke: 1.5px rgba(245, 241, 234, .20);
}
@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================================
   ENTRY animations (IntersectionObserver-driven)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .55s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .65s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .75s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: .85s; }
.reveal-stagger.in > *:nth-child(10) { transition-delay: .95s; }
/* Y de ahi en mas todos juntos, para que ninguno se adelante: sin esta regla,
   el septimo en adelante entraba con retardo cero, o sea ANTES que el primero.
   Se veia en la linea de tiempo del pie, que tiene ocho. */
.reveal-stagger.in > *:nth-child(n+11) { transition-delay: 1s; }

/* ============================================================
   HERO · ALICIA CAYENDO (scroll-driven fall)
   ============================================================ */
.hero.hero--fall {
  position: relative;
  height: 360vh;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background: var(--black);
  overflow: clip;
  isolation: isolate;
}
@media (max-width: 720px) { .hero.hero--fall { height: 260vh; } }
.hero.hero--fall .hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1400px;
}

/* PRE-SCENE · logo + línea typed antes de la caída */
.hero__pre {
  position: absolute;
  inset: 0;
  z-index: 13;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 0 clamp(20px, 5vw, 64px);
  pointer-events: none;
  text-align: center;
  will-change: opacity, transform;
}
.hero__pre-tag {
  font: 700 11px var(--font-mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.hero__pre-tag::before, .hero__pre-tag::after {
  content: ''; width: 32px; height: 1.5px; background: var(--gradient);
}
.hero__pre-logo {
  width: clamp(280px, 32vw, 460px);
  height: auto;
  filter: drop-shadow(0 0 80px rgba(255,61,127,0.22));
  animation: heroPreLogoIn 1.1s var(--ease-out) .15s both;
}
@keyframes heroPreLogoIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.hero__pre-press {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.hero__pre-caret {
  display: inline-block;
  width: 10px; height: 22px;
  background: var(--pink);
  animation: caretBlink .85s steps(2) infinite 2.2s;
  opacity: 0;
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.hero__pre-typed {
  font: italic 400 clamp(15px, 1.6vw, 19px) var(--font-display);
  color: var(--cream);
  letter-spacing: .01em;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  animation: preTypedReveal 2.2s steps(36) 2.2s forwards;
}
@keyframes preTypedReveal { to { max-width: 36ch; } }
.hero__pre-caret { animation: caretBlink .85s steps(2) infinite 2.2s, caretShow 0s 2.0s forwards; }
@keyframes caretShow { to { opacity: 1; } }
.hero__pre-scroll {
  position: absolute;
  bottom: clamp(14px, 3vh, 44px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  opacity: 0;
  animation: preScrollIn .8s var(--ease-out) 1.9s forwards;
}
@keyframes preScrollIn { to { opacity: 1; } }
.hero__pre-scroll-arrow {
  order: 2;
  width: 20px; height: 32px;
  color: var(--pink);
  filter: drop-shadow(0 4px 12px rgba(255,61,127,.5));
  animation: arrowBob 1.4s ease-in-out infinite 4.4s;
}
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}
/* "caé conmigo" = la botella BEBEME de Alicia (grabado), flotando desde el cuello */
.hero__pre-scroll-word {
  order: 1;
  position: relative;
  display: block;
  /* 0.86x del ancho original: el sprite v10 esta recortado mas ajustado que el v9,
     asi la botella queda del mismo tamano visual que tenia antes */
  --bot-w: min(clamp(200px, 21.5vw, 300px), 27vh);
  width: var(--bot-w);
  /* El sprite trae 28% de aire transparente abajo. Sin comerlo, la botella queda
     pegada al texto de arriba y con un hueco muerto hasta la flecha. */
  margin-bottom: calc(var(--bot-w) * -0.235);
  cursor: pointer;
  pointer-events: auto;           /* el .hero__pre padre es pointer-events:none */
  transform-origin: 54% 31%;      /* el anillo del cuello del sprite v10 = eje del balanceo */
  animation: bottleFloat 5s ease-in-out infinite 2.2s;
}
/* sprite de 9 frames en 2 capas: la botella se destapa (el corcho salta) y se
   vuelca derramando. El JS hace crossfade entre cuadros. */
.hero__pre-bottle-sprite {
  position: relative; width: 100%; aspect-ratio: 371 / 358; display: block;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.5));
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.hero__pre-bottle-fr {
  position: absolute; inset: 0;
  background: url('../assets/alice/bottle-sprite-v10.webp') 0% 0% / 900% 100% no-repeat;
}
.hero__pre-bottle-fr--b { opacity: 0; }
.hero__pre-scroll-word.is-open { animation: none; cursor: default; }
@keyframes bottleFloat {
  0%, 100% { transform: rotate(-2.4deg) translateY(0); }
  50%      { transform: rotate(1.8deg) translateY(-7px); }
}
/* tooltip en hover: el papiro "TOMAME" */
.hero__pre-scroll-word::after {
  content: '';
  position: absolute; left: 88%; top: 6%;
  width: clamp(86px, 9vw, 118px); aspect-ratio: 1065 / 414;
  background: url('../assets/alice/papiro-tomame.webp') center / contain no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.42));
  transform-origin: left center;
  transform: rotate(-7deg) translateX(8px) scale(.92);
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.hero__pre-scroll-word:hover::after {
  opacity: 1; transform: rotate(-7deg) translateX(0) scale(1);
}
/* El papiro asoma solo, despues de que la botella termina de aparecer. Antes
   dependia del hover, asi que en celular y en tablet no se veia nunca: no hay
   con que pasar el dedo por encima sin tocar. El retardo es el de la escritura
   del texto (2,2 s) mas un respiro. */
@keyframes papiroAsoma {
  to { opacity: 1; transform: rotate(-7deg) translateX(0) scale(1); }
}
.hero__pre-scroll-word::after {
  animation: papiroAsoma .55s var(--ease-out) 2.6s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero__pre-scroll-word::after { animation: none; opacity: 1; transform: rotate(-7deg) translateX(0) scale(1); }
}
.hero__pre-scroll-word.is-open::after,
.hero__pre-scroll-word.is-bursting::after { opacity: 0 !important; }

/* La botella esta anclada al fondo del hero, asi que en una pantalla corta su
   caja sube hasta solaparse con la linea de la direccion. El papiro cuelga del
   borde de arriba de esa caja, que es aire transparente del sprite, y ahi es
   justo donde vive el texto: medido en 360x640, 45px de ancho por 16 de alto
   encima de "hueco en la vereda". Aca baja a la altura del cuerpo de la
   botella, que esta libre. El estado final de la animacion no lleva posicion,
   solo opacidad y transform, asi que sigue sirviendo igual. */
@media (max-width: 620px), (max-height: 780px) {
  .hero__pre-scroll-word::after { left: 78%; top: 40%; }
  /* Y la botella misma tambien roza el texto: el corcho asomaba sobre "hueco".
     Un poco mas chica y con menos aire abajo, la columna entera baja y el
     corcho queda por debajo de la linea. */
  .hero__pre-scroll-word { --bot-w: min(clamp(190px, 21.5vw, 300px), 24vh); }
  .hero__pre-scroll { bottom: 12px; }
}

/* TÚNEL + PLANCHE IMPRENTA DE MOMENTOS detrás del hero */
.hero__tunnel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__planche-bg {
  position: absolute;
  inset: 0;
  /* filtro horneado en el asset (-proc): el zoom escala una textura plana, sin re-aplicar filter por frame */
  background: url('../assets/planches/imprenta-home.webp') center center / cover no-repeat;
  opacity: 0.2;
  will-change: transform, opacity;
  pointer-events: none;
}
@media (max-width: 620px) {
  .hero__planche-bg { background-image: url('../assets/planches/imprenta-home-mobile.webp'); }
}
.hero__tunnel-walls {
  position: absolute; inset: -10% 0;
  overflow: hidden;
}
.hero__tunnel-walls::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -200px; bottom: 0;
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 80px,
      rgba(245,241,234,0.022) 80px, rgba(245,241,234,0.022) 82px,
      transparent 82px, transparent 140px,
      rgba(255,61,127,0.018) 140px, rgba(255,61,127,0.018) 142px,
      transparent 142px, transparent 200px);
  background-size: 100% 200px;
  animation: tunnelFall 2.8s linear infinite;
  will-change: transform;
}
@keyframes tunnelFall {
  from { transform: translateY(0); }
  to { transform: translateY(200px); }
}
.hero__tunnel-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 58% 110% at 50% 50%, transparent 0%, transparent 42%, rgba(255,61,127,0.05) 65%, rgba(10,10,10,0.85) 95%),
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, transparent 28%, transparent 72%, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
}
.hero__tunnel-blobs { position: absolute; inset: 0; pointer-events: none; }
.hero__t-blob {
  position: absolute;
  border-radius: 50%;
  opacity: .45;
}
.hero__t-blob--pink {
  width: 760px; height: 760px;
  background: radial-gradient(circle, var(--magenta-deep) 0%, transparent 70%);
  top: -240px; right: -180px;
  animation: blobDrift 14s ease-in-out infinite;
}
.hero__t-blob--orange {
  width: 660px; height: 660px;
  background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
  bottom: -220px; left: -180px;
  opacity: .32;
  animation: blobDrift 17s ease-in-out infinite reverse;
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 30px); }
}

/* VEILS · degradados arriba/abajo */
.hero__veil {
  position: absolute; left: 0; right: 0;
  height: 22vh; pointer-events: none; z-index: 6;
}
.hero__veil--top {
  top: 0;
  background: linear-gradient(180deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 100%);
}
.hero__veil--bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0) 100%);
}

/* COLLAGE · items cayendo */
.hero__collage { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fall {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--w, 200px);
  height: var(--h, 200px);
  transform: translate3d(-50%, -120vh, 0) rotate(0deg);
  opacity: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 205% auto;
  filter: invert(1) contrast(1.08) brightness(0.96);
  will-change: transform, opacity;
  pointer-events: none;
  /* Radial mask suaviza los rectángulos de los recortes */
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, #000 38%, transparent 88%);
          mask-image: radial-gradient(ellipse 60% 60% at center, #000 38%, transparent 88%);
}

.fall--clock { --x: 24%; --w: 360px; --h: 360px;
  background-image: url('../assets/planches/college-pataphysique.webp');
  background-position: 2% 52%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 36%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 36%, transparent 78%); }
.fall--bottle { --x: 74%; --w: 280px; --h: 380px;
  background-image: url('../assets/planches/college-pataphysique.webp');
  background-position: 98% 52%;
  -webkit-mask-image: radial-gradient(ellipse 45% 55% at 50% 50%, #000 50%, transparent 92%);
          mask-image: radial-gradient(ellipse 45% 55% at 50% 50%, #000 50%, transparent 92%); }
.fall--cat { --x: 28%; --w: 420px; --h: 280px;
  background-image: url('../assets/planches/college-pataphysique.webp');
  background-position: 2% 97%;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 45%, transparent 88%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 45%, transparent 88%); }
.fall--gioconda { --x: 78%; --w: 280px; --h: 380px;
  background-image: url('../assets/planches/college-pataphysique.webp');
  background-position: 98% 97%;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 50%, #000 48%, transparent 90%);
          mask-image: radial-gradient(ellipse 50% 55% at 50% 50%, #000 48%, transparent 90%); }
.fall--scepter { --x: 14%; --w: 240px; --h: 380px;
  background-image: url('../assets/planches/college-pataphysique.webp');
  background-position: 2% 7%;
  -webkit-mask-image: radial-gradient(ellipse 42% 55% at 50% 50%, #000 50%, transparent 92%);
          mask-image: radial-gradient(ellipse 42% 55% at 50% 50%, #000 50%, transparent 92%); }
.fall--cards { --x: 84%; --w: 340px; --h: 280px;
  background-image: url('../assets/planches/grenier-decouvert.webp');
  background-position: 98% 7%; }
.fall--chess { --x: 12%; --w: 360px; --h: 320px;
  background-image: url('../assets/planches/grenier-decouvert.webp');
  background-position: 2% 52%; }
.fall--oraculo { --x: 58%; --w: 260px; --h: 360px;
  background-image: url('../assets/planches/grenier-decouvert.webp');
  background-position: 98% 52%;
  -webkit-mask-image: radial-gradient(ellipse 48% 56% at 50% 50%, #000 50%, transparent 92%);
          mask-image: radial-gradient(ellipse 48% 56% at 50% 50%, #000 50%, transparent 92%); }
.fall--alquimia { --x: 86%; --w: 300px; --h: 280px;
  background-image: url('../assets/planches/grenier-decouvert.webp');
  background-position: 2% 97%; }
.fall--cocodrilo { --x: 10%; --w: 360px; --h: 260px;
  background-image: url('../assets/planches/grenier-decouvert.webp');
  background-position: 2% 7%;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 45%, transparent 90%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, #000 45%, transparent 90%); }
.fall--ojo { --x: 92%; --w: 240px; --h: 240px;
  background-image: url('../assets/planches/cercle-surrealiste.webp');
  background-position: 98% 7%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 86%);
          mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 86%); }

/* ALICIA / CONEJO Tenniel · imágenes reales (.gif) */
.fall--alicia,
.fall--rabbit,
.fall--alice-bottle,
.fall--alice-tall,
.fall--hatter {
  background: none;
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
          mask-image: none;
  width: auto; height: auto;
}
.fall--alicia img,
.fall--rabbit img,
.fall--alice-bottle img,
.fall--alice-tall img,
.fall--hatter img {
  display: block;
  width: 100%; height: auto;
  /* Tenniel illustrations are black ink on white, invert for dark UI, screen-blend so edges feather */
  filter: invert(1) contrast(1.15) brightness(1.05) drop-shadow(0 12px 28px rgba(0,0,0,.6));
  mix-blend-mode: screen;
}
.fall--alicia { --x: 24%; width: clamp(140px, 16vw, 240px); }
.fall--rabbit { --x: 76%; width: clamp(160px, 18vw, 270px); }
.fall--alice-bottle { --x: 18%; width: clamp(120px, 14vw, 210px); }
.fall--alice-tall { --x: 84%; width: clamp(90px, 11vw, 170px); }
.fall--hatter { --x: 32%; width: clamp(150px, 17vw, 240px); }

/* TAZA / LLAVE / DRINK ME · siluetas SVG dibujadas */
.fall--teacup,
.fall--key,
.fall--drinkme {
  background: none;
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
          mask-image: none;
  width: auto; height: auto;
  color: var(--cream);
  filter: drop-shadow(0 0 24px rgba(255,61,127,.18));
}
.fall--teacup svg,
.fall--key svg,
.fall--drinkme svg { display: block; }
.fall--teacup { --x: 8%; }
.fall--teacup svg { width: clamp(80px, 9vw, 130px); height: auto; color: var(--orange); opacity: .95; }
.fall--key { --x: 50%; }
.fall--key svg { width: clamp(30px, 4vw, 56px); height: auto; color: var(--pink); }
.fall--drinkme { --x: 88%; }
.fall--drinkme svg { width: clamp(50px, 6vw, 80px); height: auto; color: var(--cream); }

/* GLIFOS · letras tipográficas cayendo */
.fall--glyph {
  background: none; filter: none; mix-blend-mode: normal;
  font-family: var(--font-display); font-weight: 400;
  width: auto; height: auto; line-height: 1;
  color: var(--cream);
  text-shadow: 0 0 60px rgba(255,61,127,0.35);
}
.fall--g-amp { --x: 8%; font-size: 280px; font-style: italic; }
.fall--g-asterisk { --x: 92%; font-size: 200px; color: var(--pink); }
.fall--g-dot { --x: 40%; font-size: 360px; color: var(--orange); }
.fall--g-pilcrow { --x: 86%; font-size: 220px; font-style: italic; color: var(--cream-soft); }
.fall--g-a { --x: 12%; font-size: 240px; font-weight: 600; }
.fall--g-e { --x: 64%; font-size: 220px; }
.fall--g-e em { font-style: italic; color: var(--pink); }
.fall--g-paragraph { --x: 50%; font-size: 200px; color: var(--cream); }

/* PLATES · overlays de texto */
.hero__plate {
  position: absolute; left: 0; right: 0;
  padding: 0 clamp(20px, 5vw, 64px);
  z-index: 10; pointer-events: none;
}
.hero__plate > * { pointer-events: auto; }
/* el landing (gato, CTAs) no captura hover hasta que el scroll lo revela */
.hero__plate--bottom > * { pointer-events: none; }
.hero__plate--bottom.is-live > * { pointer-events: auto; }
.hero__plate--top {
  top: clamp(110px, 14vh, 160px);
  text-align: center;
  will-change: transform, opacity;
}
.hero__plate--bottom {
  bottom: clamp(60px, 10vh, 110px);
  opacity: 0;
  transform: translateY(40px);
  text-align: left;
  max-width: 1280px;
  margin: 0 auto;
  width: min(1280px, calc(100% - 40px));
  left: 50%;
  margin-left: -640px;
  will-change: transform, opacity;
}
@media (max-width: 1320px) {
  .hero__plate--bottom { left: 20px; margin-left: 0; width: calc(100% - 40px); }
}

.hero__chapter {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream-soft);
}
.hero__chapter-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink);
  animation: dotPulse 2s ease-in-out infinite;
}
.hero__chapter-dot--orange { background: var(--orange); }
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .55; }
}

.hero__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(64px, 12vw, 184px);
  line-height: 0.9; letter-spacing: -.035em;
  color: var(--cream);
  margin: 20px 0 0;
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln span {
  display: inline-block;
  transform: translateY(110%);
  animation: lnUp 1.1s var(--ease-out) forwards;
}
.hero__title .ln:nth-child(1) span { animation-delay: .15s; }
.hero__title .ln:nth-child(2) span { animation-delay: .35s; }
.hero__title em {
  font-style: italic; font-weight: 400;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__title b { font-style: normal; font-weight: 600; }

.hero__hint {
  font: italic 400 clamp(15px, 1.6vw, 19px) var(--font-display);
  color: var(--cream-soft);
  line-height: 1.45;
  margin: 20px auto 28px;
  max-width: 520px;
}
.hero__hint em {
  font-style: normal; font-weight: 500;
  color: var(--cream);
  border-bottom: 1px dashed var(--pink);
  padding-bottom: 2px;
}

.hero__scroll-hint {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 10px;
  margin-top: 8px;
}
.hero__scroll-line {
  width: 1.5px; height: 56px;
  background: linear-gradient(180deg, transparent 0%, var(--pink) 100%);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute; left: -1px; right: -1px;
  top: -40%; height: 40%;
  background: linear-gradient(180deg, transparent 0%, var(--cream) 100%);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0% { transform: translateY(0); }
  100% { transform: translateY(250%); }
}
.hero__scroll-word {
  font: 700 9px var(--font-mono);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--cream-soft);
}

/* Landing plate */
.hero__landing-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(56px, 9.5vw, 148px);
  line-height: 0.92; letter-spacing: -.035em;
  color: var(--cream);
  margin: 18px 0;
}
.hero__landing-title .it {
  font-style: italic; font-weight: 400;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__amp {
  font-style: italic; font-weight: 400;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-size: .9em; margin: 0 4px;
}
.hero__landing-sub {
  font: italic 400 clamp(16px, 1.6vw, 20px) var(--font-display);
  color: var(--cream-soft);
  line-height: 1.45;
  max-width: 720px;
  margin-bottom: 32px;
}
.hero__landing-sub b { font-style: normal; font-weight: 500; color: var(--cream); }
.hero__landing-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 36px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.hero__landing-stats { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.hero__landing-stats > span { display: flex; flex-direction: column; align-items: flex-start; }
.hero__landing-stats b {
  font: 600 clamp(36px, 4vw, 56px) var(--font-display);
  color: var(--cream);
  letter-spacing: -.025em; line-height: 1;
}
.hero__landing-stats b i { font-style: italic; font-weight: 400; color: var(--orange); }
.hero__landing-stats small {
  font: 500 10px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}
.hero__landing-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* Gato sonrisa de Almagro (Cheshire): aparece al aterrizar, en el vacio a la derecha del titulo */
.hero__landing-cat {
  position: absolute;
  top: clamp(120px, 23vh, 230px);
  right: clamp(12px, 3vw, 70px);
  width: clamp(170px, 19vw, 280px);
  padding: 0; border: 0; background: none;
  cursor: pointer;
  z-index: 1;
  transition: transform .45s var(--ease-out);
}
.hero__landing-cat .cat-face {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  width: 100%;
  gap: clamp(0px, 0.6vh, 12px);
  transform: rotate(22.5deg);
  transform-origin: center center;
  animation: catFaceFloat 4.2s ease-in-out infinite;
}
@keyframes catFaceFloat {
  0%, 100% { transform: rotate(22.5deg) translateY(0); }
  50%      { transform: rotate(22.5deg) translateY(-7px); }
}
/* papiro "ACA ESTAMOS TODOS LOCOS" colgado del gato */
.hero__landing-cat::after {
  content: '';
  position: absolute; left: 50%; top: 112%;
  width: 50%; aspect-ratio: 760 / 294;
  transform: translate(-50%, 0) rotate(-3deg);
  background: url('../assets/alice/papiro-locos.webp?v=1') center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
  pointer-events: none; opacity: .96;
  animation: catTagFloat 3.6s ease-in-out infinite;
}
@keyframes catTagFloat {
  0%, 100% { transform: translate(-50%, 0)    rotate(-3deg); }
  50%      { transform: translate(-50%, -6px) rotate(-2deg); }
}
@keyframes catFaceFloat {
  0%, 100% { transform: rotate(22.5deg) translateY(0); }
  50%      { transform: rotate(22.5deg) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) { .hero__landing-cat .cat-face { animation: none; } }
.hero__landing-cat .cat-head,
.hero__landing-cat .cat-eyes,
.hero__landing-cat .cat-mouth {
  display: block;
  opacity: 0;
  transition: opacity 1.5s ease;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.5));
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.hero__landing-cat .cat-eyes { width: 70%; }
.hero__landing-cat .cat-mouth { width: 100%; }
/* la cabeza va por detras de la sonrisa, sin tocar ojos/boca */
.hero__landing-cat .cat-head {
  position: absolute; z-index: -1;
  left: 50%; top: 26%;
  width: 100%; max-width: none;
  transform: translate(-50%, -50%);
}
/* halo que apaga la textura del pelaje detras de ojos+boca, asi no hace ruido */
.hero__landing-cat .cat-clean {
  position: absolute; z-index: 0;
  left: 50%; top: 57%;
  width: 56%; height: 44%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(15,13,19,.95) 0%, rgba(15,13,19,.78) 36%, rgba(15,13,19,0) 68%);
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}
.hero__landing-cat[data-state="0"] .cat-clean { opacity: 1; }
.hero__landing-cat .cat-eyes,
.hero__landing-cat .cat-mouth { position: relative; z-index: 1; }
/* visibilidad por nivel, ping-pong nada<->cara completa (boca, ojos, cabeza) */
.hero__landing-cat[data-state="0"] .cat-mouth,
.hero__landing-cat[data-state="1"] .cat-mouth,
.hero__landing-cat[data-state="2"] .cat-mouth,
.hero__landing-cat[data-state="4"] .cat-mouth,
.hero__landing-cat[data-state="5"] .cat-mouth { opacity: .44; }
.hero__landing-cat[data-state="0"] .cat-eyes,
.hero__landing-cat[data-state="1"] .cat-eyes,
.hero__landing-cat[data-state="5"] .cat-eyes { opacity: .44; }
.hero__landing-cat[data-state="0"] .cat-head { opacity: .44; }
/* Cartelito que delata al gato (se desvanece, si no nadie lo encuentra) */
.hero__landing-cat::after {
  content: '';
  position: absolute; left: 50%; top: 112%;
  width: 50%; aspect-ratio: 760 / 294;
  transform: translate(-50%, 0) rotate(-3deg);
  background: url('../assets/alice/papiro-locos.webp?v=1') center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
  pointer-events: none; opacity: .96;
  animation: catTagFloat 3.6s ease-in-out infinite;
}
@keyframes catTagFloat {
  0%, 100% { transform: translate(-50%, 0)  rotate(-3deg); }
  50%      { transform: translate(-50%, -6px) rotate(-2deg); }
}
@media (max-width: 900px) { .hero__landing-cat { display: none; } }

/* MARCADOR LATERAL · capítulos del scroll (movido a la izq para no chocar con stamp) */
.hero__marker {
  position: absolute;
  top: 50%; left: clamp(20px, 3vw, 40px);
  transform: translateY(-50%);
  z-index: 11;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  pointer-events: none;
}
.hero__marker-cap {
  font: 700 11px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-soft);
}
.hero__marker-cap--end { color: var(--muted); }
.hero__marker-bar {
  width: 1.5px;
  height: clamp(180px, 26vh, 280px);
  background: rgba(245,241,234,0.12);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.hero__marker-fill {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
  background: var(--gradient);
}
.hero__marker-label {
  font: 700 9px var(--font-mono);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
  margin-top: 8px;
}
@media (max-width: 960px) { .hero__marker { display: none; } }

/* INSURREXIT stamp en el stage */
.stamp--hero-fall {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  right: clamp(20px, 3vw, 48px);
  width: clamp(110px, 13vw, 170px);
  z-index: 12;
  pointer-events: none;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.5));
  opacity: .85;
}
.stamp--hero-fall img { width: 100%; height: auto; display: block; }
.stamp--hero-fall .stamp__rotor {
  position: absolute; inset: -22%;
  pointer-events: none;
  animation: stampSpin 32s linear infinite;
  opacity: .55;
}
.stamp--hero-fall .stamp__rotor svg { width: 100%; height: 100%; }
.stamp--hero-fall .stamp__rotor text {
  font: 700 9px var(--font-mono);
  letter-spacing: .26em; text-transform: uppercase;
  fill: var(--cream);
}
.stamp--hero-fall .stamp__rotor circle {
  fill: none; stroke: none;
}
@media (max-width: 720px) {
  /* dragon-sello anclado arriba-derecha (top explicito), chico, para que no
     choque con el titulo ni en pantallas bajas */
  .stamp--hero-fall { width: 76px; top: clamp(60px, 8vh, 76px); bottom: auto; right: 12px; }
  .hero__landing-row { flex-direction: column; align-items: flex-start; }
  /* plate bottom-anchored: los botones quedan pegados a la base y todo el
     bloque (titulo, stats) se apila hacia arriba desde ahi. Ancla chica = base. */
  .hero__plate--bottom { bottom: clamp(16px, 2.4vh, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--fall { height: auto; min-height: 100vh; }
  .hero.hero--fall .hero__stage { position: relative; height: auto; min-height: 100vh; padding: 120px 0 80px; }
  .hero__plate--top { position: relative; top: 0; }
  .hero__plate--bottom {
    position: relative; bottom: 0; opacity: 1; transform: none;
    left: 0; margin: 60px auto 0; width: 100%; max-width: 1280px;
    padding: 0 clamp(20px, 5vw, 64px);
  }
  .hero__collage { display: none; }
  .hero__tunnel-walls { animation: none; }
}

/* ============================================================
   PAGE TRANSITION · Vandercook press plate
   ============================================================ */
.pgx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
/* sin JS no hay reveal: no dejar la cortina negra trabada */
@media (scripting: none) { .pgx { display: none !important; } }
.pgx.is-active { pointer-events: auto; visibility: visible; opacity: 1; }
/* precover · static cover painted on the first frame (no transition), then revealed by JS */
.pgx.is-precover { visibility: visible; opacity: 1; }
.pgx.is-precover .pgx__fill { transform: scale(1) rotate(16deg); border-radius: 50%; transition: none; }
.pgx.is-precover .pgx__plate { opacity: 0; transition: none; }
.pgx.is-leaving { visibility: visible; opacity: 1; }
.pgx__fill {
  position: absolute;
  top: 50%; left: 50%;
  width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: var(--black);
  border-radius: 46% 54% 51% 49% / 52% 47% 53% 48%;
  transform: scale(0) rotate(0deg);
  transition: transform .82s var(--ease-out), border-radius .82s var(--ease-out);
  will-change: transform;
}
.pgx.is-active .pgx__fill { transform: scale(1) rotate(14deg); border-radius: 50%; }
.pgx.is-covered .pgx__fill { transform: scale(1) rotate(16deg); border-radius: 50%; transition: none; animation: none; }
.pgx.is-leaving .pgx__fill { animation: pgxInkOut .72s var(--ease-in) forwards; }
@keyframes pgxInkOut {
  from { transform: scale(1) rotate(16deg); border-radius: 50%; }
  to   { transform: scale(0) rotate(30deg); border-radius: 46% 54% 51% 49% / 52% 47% 53% 48%; }
}
.pgx__plate {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  z-index: 2;
  opacity: 0;
  transition: opacity .25s ease-out .35s;
}
.pgx.is-active .pgx__plate { opacity: 1; }
.pgx.is-leaving .pgx__plate { opacity: 0; transition-delay: 0s; }
.pgx__rule { width: 80px; height: 1.5px; background: var(--pink); }
.pgx__mark {
  font: italic 500 80px var(--font-display);
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.pgx__logo { width: clamp(190px, 26vw, 320px); height: auto; filter: drop-shadow(0 8px 28px rgba(0,0,0,.5)); }
.pgx__label {
  font: 700 11px var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-soft);
}

/* ============================================================
   PHOTO SLOT · placeholder for real photos
   Replace planche cuts where a real photo will live.
   ============================================================ */
.photoslot {
  position: relative;
  background: var(--night-2);
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: var(--r-md);
}
.photoslot::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(245,241,234,.03) 14px 15px);
  pointer-events: none;
}
.photoslot::after {
  /* corner crop marks suggest a photographic plate */
  content: '';
  position: absolute; inset: 12px;
  border: 1px dashed rgba(245,241,234,.10);
  pointer-events: none;
}
.photoslot__tag {
  position: absolute;
  top: 14px; left: 14px;
  font: 700 10px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid rgba(245,241,234,.18);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.photoslot__label {
  position: absolute;
  bottom: 14px; left: 16px;
  font: 500 9px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2);
}
.photoslot__num {
  position: absolute;
  top: 14px; right: 16px;
  font: italic 500 14px var(--font-display);
  color: var(--muted);
}
.photoslot--accent {
  background:
    radial-gradient(ellipse at top right, rgba(255,61,127,.20), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(255,138,61,.15), transparent 60%),
    var(--night-2);
}
.photoslot--green {
  background:
    radial-gradient(ellipse at center, rgba(52,211,153,.15), transparent 60%),
    var(--night-2);
}
.photoslot--magenta {
  background:
    radial-gradient(ellipse at top left, rgba(200,37,154,.25), transparent 60%),
    var(--night-2);
}
.photoslot--amber {
  background:
    radial-gradient(ellipse at bottom right, rgba(251,191,36,.18), transparent 60%),
    var(--night-2);
}

/* ============================================================
   QUICK-LINKS · index de la home (5 entradas)
   ============================================================ */
.quicklinks {
  overflow-x: clip; /* el cameo rotado se salia 15px y hacia scrollear la home de costado */
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(48px, 6vw, 80px) 0;
  position: relative;
}
.quicklinks__head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 32px;
}
.quicklinks__title {
  font: 500 clamp(28px, 3vw, 42px) var(--font-display);
  color: var(--cream-soft);
  letter-spacing: -.02em;
  line-height: 1.05;
}
.quicklinks__title em {
  font-style: italic;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.quicklinks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.ql-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  transition: background .25s var(--ease-out);
  overflow: hidden;
}
.ql-card:last-child { border-right: none; }
@media (min-width: 1081px) {
  .ql-card { border-bottom: 1px solid var(--line); }
  .ql-card:nth-child(3n) { border-right: none; }
  .ql-card:nth-last-child(-n+3) { border-bottom: none; }
}
.ql-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.ql-card:hover::before { transform: scaleX(1); }
.ql-card:hover {
  background: linear-gradient(180deg, rgba(255,61,127,.06) 0%, transparent 100%);
}
.ql-card__num {
  font: italic 400 16px var(--font-display);
  color: var(--muted);
  letter-spacing: .04em;
}
.ql-card__num b { font-style: normal; color: var(--pink); font-weight: 700; margin-right: 4px; }
.ql-card__title {
  font: 600 26px var(--font-display);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--cream);
}
.ql-card__title em {
  font-style: italic; font-weight: 400; color: var(--cream-soft);
}
.ql-card__desc {
  font: italic 400 14px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.45;
  flex: 1;
}
.ql-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream);
  transition: color .25s, gap .25s;
}
.ql-card__cta svg { width: 14px; height: 14px; }
.ql-card:hover .ql-card__cta { color: var(--pink); gap: 10px; }
.ql-card__sigil {
  position: absolute;
  top: 24px; right: 20px;
  width: 26px; height: 26px;
  color: var(--muted-2);
  opacity: .6;
  transition: color .3s, opacity .3s, transform .35s var(--ease-out);
}
.ql-card:hover .ql-card__sigil { color: var(--pink); opacity: 1; transform: rotate(15deg); }
@media (max-width: 1080px) {
  .quicklinks__grid { grid-template-columns: repeat(2, 1fr); }
  .ql-card { border-bottom: 1px solid var(--line); }
  .ql-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .quicklinks__grid { grid-template-columns: 1fr; }
  .ql-card { border-right: none; }
}

/* ============================================================
   BANNER CONMEMORATIVO · modular (efeméride)
   ============================================================ */
.commem {
  background: var(--cream);
  color: var(--black);
  padding: clamp(56px, 6vw, 88px) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.commem::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .22;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.commem__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.commem__edition {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: #5a4a3a; margin-bottom: 18px;
}
.commem__edition b { color: var(--black); }
.commem__edition .rule {
  display: inline-block; width: 28px; height: 1.5px; background: var(--black);
}
.commem__title {
  font: 600 clamp(40px, 5.4vw, 76px) var(--font-display);
  color: var(--black);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0 0 18px;
}
.commem__title em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(95deg, #c8259a, #8c1a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.commem__body {
  font: italic 400 18px var(--font-display);
  color: #2a1f12;
  line-height: 1.5;
  max-width: 56ch;
}
.commem__body b { font-style: normal; font-weight: 700; color: var(--black); }
.commem__cta {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 14px 22px;
  background: var(--black);
  color: var(--cream);
  border-radius: 999px;
  transition: transform .2s, background .2s;
}
.commem__cta:hover { transform: translateY(-2px); background: var(--magenta-deep); }
.commem__sigil {
  position: relative;
  width: clamp(160px, 18vw, 240px); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.commem__sigil-bg {
  position: absolute; inset: 0;
  border: 1.5px solid var(--black);
  border-radius: 50%;
}
.commem__sigil-text {
  position: absolute; inset: 0;
  animation: stampSpin 28s linear infinite;
}
.commem__sigil-text svg { width: 100%; height: 100%; }
.commem__sigil-text text {
  font: 700 9px var(--font-mono);
  letter-spacing: .28em; text-transform: uppercase;
  fill: var(--black);
}
.commem__sigil-figure {
  position: absolute;
  inset: 18%;
  width: 64%; height: 64%;
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
.commem__sigil-stamp {
  position: absolute;
  font: 700 14px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--magenta-deep);
  transform: rotate(-12deg);
  bottom: -8px; right: -8px;
  padding: 6px 12px;
  border: 1.5px solid var(--magenta-deep);
  border-radius: 999px;
  background: var(--cream);
}
@media (max-width: 880px) {
  .commem__inner { grid-template-columns: 1fr; }
  .commem__sigil { display: none; }
}

/* ============================================================
   BANNER INFORMATIVO · sello editorial (Tickets+Interés Cultural)
   ============================================================ */
.infoband {
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 3.5vw, 44px) 0;
}
.infoband__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.infoband__col { display: flex; flex-direction: column; gap: 6px; }
.infoband__col--right { text-align: right; align-items: flex-end; }
.infoband__col--center {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0 clamp(24px, 4vw, 56px);
}
.infoband__col--center .dingbat {
  font: 400 32px var(--font-display);
  color: var(--pink);
  line-height: 1;
}
.infoband__col--center small {
  font: 700 9px var(--font-mono);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.infoband__eyebrow {
  font: 700 10px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink);
}
.infoband__col--right .infoband__eyebrow { color: var(--orange); }
.infoband__line {
  font: italic 500 clamp(16px, 1.6vw, 22px) var(--font-display);
  color: var(--cream);
  line-height: 1.35;
}
.infoband__line b { font-style: normal; font-weight: 700; }
@media (max-width: 720px) {
  .infoband__inner { grid-template-columns: 1fr; }
  .infoband__col--right { text-align: left; align-items: flex-start; }
  .infoband__col--center { border: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
}

/* ============================================================
   GALERÍA 6 DESTACADOS · cards con foto + categoría + precio
   ============================================================ */
.gallery {
  background: var(--black);
  position: relative;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.gallery-card {
  display: flex; flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.gallery-card__media {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--r-md);
  overflow: hidden;
}
.gallery-card__media .photoslot {
  position: absolute; inset: 0; border-radius: var(--r-md);
}
.gallery-card__media-num {
  position: absolute;
  bottom: 18px; right: 20px;
  font: italic 400 13px var(--font-display);
  color: var(--cream-soft);
  z-index: 2;
}
.gallery-card__body { display: flex; flex-direction: column; gap: 10px; }
.gallery-card__cat {
  font: 700 10px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--pink);
}
.gallery-card__title {
  font: 600 24px var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--cream);
}
.gallery-card__title em { font-style: italic; font-weight: 400; color: var(--cream-soft); }
.gallery-card__meta {
  display: flex; gap: 14px; align-items: center;
  font: 500 12px var(--font-mono);
  color: var(--muted);
}
.gallery-card__meta .dot { color: var(--line-2); }
.gallery-card__price {
  display: flex; align-items: baseline; gap: 8px;
}
.gallery-card__price .now {
  font: 600 22px var(--font-display);
  color: var(--cream);
}
.gallery-card__price .old {
  font: 400 13px var(--font-body);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--pink);
}
.gallery-card:hover .photoslot { transform: scale(1.03); transition: transform .5s var(--ease-out); }
.gallery-card:hover .gallery-card__title { color: var(--pink); }
@media (max-width: 880px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery__grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONVOCATORIA · gastronómica (la Pulpe) y musical
   ============================================================ */
.convoca {
  background: var(--black);
  border-top: 1px solid var(--line);
}
.convoca__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.convoca__media {
  position: relative;
  min-height: 360px;
}
.convoca__body {
  padding: clamp(36px, 4vw, 56px);
  display: flex; flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, var(--night) 0%, var(--black) 100%);
}
.convoca__edition {
  font: 700 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange);
  display: inline-flex; align-items: center; gap: 10px;
}
.convoca__edition .rule { width: 28px; height: 1.5px; background: var(--orange); }
.convoca__title {
  font: 500 clamp(36px, 4.8vw, 64px) var(--font-display);
  color: var(--cream);
  letter-spacing: -.025em;
  line-height: 1;
}
.convoca__title em {
  font-style: italic;
  background: linear-gradient(95deg, var(--orange), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.convoca__body p {
  font: italic 400 17px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5; max-width: 50ch;
}
.convoca__body p b { font-style: normal; color: var(--cream); font-weight: 500; }
.convoca__list {
  display: grid; gap: 8px; padding: 0; margin: 4px 0 0;
  list-style: none;
}
.convoca__list li {
  display: flex; gap: 12px; align-items: flex-start;
  font: 400 14px var(--font-body);
  color: var(--cream-soft);
  padding-left: 0;
}
.convoca__list li::before {
  content: '·';
  color: var(--orange);
  font: 700 22px var(--font-display);
  line-height: 0.8;
  margin-top: 4px;
}
.convoca__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 880px) {
  .convoca__inner { grid-template-columns: 1fr; }
  .convoca__media { min-height: 240px; }
}

/* ============================================================
   EXPO EXTERNA · poster card
   ============================================================ */
.expo {
  background: var(--black);
  border-top: 1px solid var(--line);
}
.expo__wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(48px, 6vw, 80px) 0;
}
.expo__poster {
  position: relative;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 3 / 4;
  background: var(--cream);
  border: 1px solid var(--cream-soft);
  border-radius: 4px;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  color: var(--black);
  transition: transform .35s var(--ease-out);
}
.expo__poster:hover { transform: rotate(-1deg) translateY(-4px); }
.expo__poster::before {
  /* pin */
  content: '';
  position: absolute;
  top: 12px; right: 18px;
  width: 12px; height: 12px;
  background: var(--magenta-deep);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(0,0,0,0.2);
}
.expo__poster::after {
  /* paper texture */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .25;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.expo__poster-edition {
  font: 700 9px var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: #5a4a3a;
}
.expo__poster-title {
  font: 600 28px var(--font-display);
  color: var(--black);
  letter-spacing: -.02em;
  line-height: .98;
}
.expo__poster-title em { font-style: italic; font-weight: 400; }
.expo__poster-figure {
  flex: 1;
  background: url('../assets/planches/imprimerie-andralis.webp') 2% 50% / 320% auto no-repeat;
  filter: contrast(1.05) saturate(.88);
  mix-blend-mode: multiply;
  border-radius: 2px;
  margin: 6px 0;
}
.expo__poster-meta {
  font: italic 400 12px var(--font-display);
  color: #2a1f12;
}
.expo__poster-meta b { font-style: normal; font-weight: 700; color: var(--black); }
.expo__text {
  display: flex; flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.expo__eyebrow {
  font: 700 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink);
  display: inline-flex; align-items: center; gap: 10px;
}
.expo__title {
  font: 500 clamp(36px, 4.4vw, 60px) var(--font-display);
  color: var(--cream);
  letter-spacing: -.025em;
  line-height: 1;
}
.expo__title em {
  font-style: italic;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.expo__body {
  font: italic 400 17px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5;
}
.expo__body b { font-style: normal; font-weight: 500; color: var(--cream); }
.expo__meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.expo__meta-item {
  display: flex; flex-direction: column; gap: 4px;
}
.expo__meta-item .k {
  font: 500 9px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.expo__meta-item .v {
  font: 500 14px var(--font-body);
  color: var(--cream);
}
@media (max-width: 720px) {
  .expo__wrap { grid-template-columns: 1fr; }
  .expo__poster { margin: 0 auto; }
}

/* ============================================================
   CALENDARIO INTERACTIVO del mes
   ============================================================ */
.calend {
  background: var(--black);
  border-top: 1px solid var(--line);
}
.calend__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.calend__month {
  font: 600 clamp(36px, 4.5vw, 64px) var(--font-display);
  color: var(--cream);
  letter-spacing: -.025em;
  line-height: 1;
}
.calend__month .yr { font-style: italic; color: var(--cream-soft); font-weight: 400; }
.calend__nav { display: flex; gap: 8px; align-items: center; }
.calend__nav button {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.calend__nav button:hover { background: var(--gradient); border-color: transparent; }
.calend__nav button svg { width: 16px; height: 16px; }
.calend__nav-label {
  font: 700 10px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px;
}
.calend__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.calend__dow {
  background: var(--black);
  font: 700 10px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  padding: 12px 14px;
  text-align: center;
}
.calend__day {
  position: relative;
  background: var(--night);
  min-height: 92px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: background .2s;
  cursor: pointer;
}
.calend__day:hover { background: var(--night-2); }
.calend__day.is-empty { background: var(--black); cursor: default; }
.calend__day.is-today {
  background: var(--night-2);
  outline: 1px solid var(--pink);
  outline-offset: -1px;
}
.calend__day.is-today .calend__day-n { color: var(--pink); }
.calend__day-n {
  font: 600 18px var(--font-display);
  color: var(--cream);
  line-height: 1;
}
.calend__day-evs { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.calend__ev {
  font: 500 10px var(--font-mono);
  letter-spacing: .04em;
  color: var(--cream-soft);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--night-2);
  border-left: 2px solid var(--pink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calend__ev--musica { border-left-color: var(--orange); }
.calend__ev--cine { border-left-color: var(--amber); }
.calend__ev--ninxs { border-left-color: var(--green); }
.calend__ev--ciclo { border-left-color: var(--cream-soft); background: rgba(245,241,234,.06); }
.calend__day-more {
  font: 500 9px var(--font-mono);
  color: var(--muted);
  letter-spacing: .1em;
}
.calend__legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 22px;
  font: 500 11px var(--font-mono);
  letter-spacing: .1em;
  color: var(--muted);
}
.calend__legend span { display: inline-flex; align-items: center; gap: 6px; }
.calend__legend i {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--pink);
}
.calend__legend .l-musica i { background: var(--orange); }
.calend__legend .l-cine i { background: var(--amber); }
.calend__legend .l-ninxs i { background: var(--green); }
.calend__legend .l-ciclo i { background: var(--cream-soft); }
@media (max-width: 720px) {
  .calend__day { min-height: 70px; padding: 6px 6px; }
  .calend__day-n { font-size: 14px; }
  .calend__ev { font-size: 9px; padding: 1px 4px; }
}

/* ============================================================
   COMUNICADO · ¿Sabías que? declaración político-cultural
   ============================================================ */
.comunicado {
  background: var(--cream);
  color: var(--black);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(64px, 8vw, 112px) 0;
  overflow: hidden;
}
.comunicado::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .22; mix-blend-mode: multiply;
  pointer-events: none;
}
.comunicado__head {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 1.5px solid var(--black);
  padding-bottom: 14px;
  margin-bottom: 36px;
}
.comunicado__edition {
  font: 700 11px var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--black);
}
.comunicado__edition span { color: #5a4a3a; }
.comunicado__page-n {
  font: italic 500 18px var(--font-display);
  color: #5a4a3a;
}
.comunicado__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: flex-start;
}
.comunicado__q {
  font: 500 clamp(48px, 6vw, 96px) var(--font-display);
  font-style: italic;
  color: var(--black);
  line-height: .92;
  letter-spacing: -.025em;
}
.comunicado__q b {
  font-style: normal; font-weight: 600;
  background: linear-gradient(95deg, #c8259a, #8c1a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.comunicado__a {
  display: flex; flex-direction: column;
  gap: 18px;
}
.comunicado__a p {
  font: 400 16px var(--font-body);
  color: #2a1f12;
  line-height: 1.7;
}
.comunicado__a p b { color: var(--black); font-weight: 700; }
.comunicado__a .lede {
  font: 500 22px var(--font-display);
  color: var(--black);
  line-height: 1.4;
}
.comunicado__a .lede em {
  font-style: italic; color: #6a2444;
}
.comunicado__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.comunicado__sig {
  position: relative; z-index: 2;
  margin-top: 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.35);
  padding-top: 18px;
  font: italic 400 14px var(--font-display);
  color: #2a1f12;
}
.comunicado__sig b { font-style: normal; font-weight: 700; color: var(--black); }
.comunicado__sig .pencil { color: var(--magenta-deep); font-style: italic; }
@media (max-width: 880px) {
  .comunicado__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   CIRCUITO INDEPENDIENTE · 6 servicios (reemplaza Espacio)
   ============================================================ */
.circuito {
  background: var(--black);
  border-top: 1px solid var(--line);
  position: relative;
}
.circuito__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.circ-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 32px 24px 28px;
  border-right: 1px solid var(--line);
  transition: background .35s var(--ease-out);
}
.circ-card:last-child { border-right: none; }
.circ-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.circ-card:hover::before { transform: scaleX(1); }
.circ-card:hover { background: linear-gradient(180deg, rgba(255,138,61,.05), transparent); }
.circ-card__num {
  font: italic 400 15px var(--font-display);
  color: var(--muted);
}
.circ-card__num b { font-style: normal; color: var(--orange); font-weight: 700; margin-right: 2px; }
.circ-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.circ-card__title {
  font: 600 22px var(--font-display);
  color: var(--cream);
  letter-spacing: -.018em;
  line-height: 1.05;
}
.circ-card__title em { font-style: italic; font-weight: 400; color: var(--cream-soft); }
.circ-card__desc {
  font: italic 400 14px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5;
  flex: 1;
}
.circ-card__meta {
  font: 500 10px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.circ-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream);
  margin-top: 4px;
}
.circ-card__cta:hover { color: var(--pink); }
.circ-card__cta svg { width: 14px; height: 14px; }
@media (max-width: 1080px) {
  .circuito__grid { grid-template-columns: repeat(3, 1fr); }
  .circ-card:nth-child(3n) { border-right: none; }
  .circ-card:not(:nth-last-child(-n+3)) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .circuito__grid { grid-template-columns: repeat(2, 1fr); }
  .circ-card { border-right: 1px solid var(--line) !important; }
  .circ-card:nth-child(2n) { border-right: none !important; }
  .circ-card { border-bottom: 1px solid var(--line); }
}

/* ============================================================
   CTA · firma editorial (sello + figmark + planche num)
   ============================================================ */
.cta__edition {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 11px var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 18px;
}
.cta__edition .rule { width: 32px; height: 1.5px; background: rgba(255,255,255,0.5); }
.cta__sigil {
  position: absolute;
  top: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px);
  width: clamp(110px, 11vw, 150px); aspect-ratio: 1 / 1;
  z-index: 3;
  pointer-events: none;
}
.cta__sigil svg { width: 100%; height: 100%; }
.cta__sigil .rotor { animation: stampSpin 28s linear infinite; transform-origin: 100px 100px; }
.cta__sigil text {
  font: 700 9.5px var(--font-mono);
  letter-spacing: .26em; text-transform: uppercase;
  fill: white;
}
.cta__sigil circle.r {
  fill: none; stroke: white; stroke-width: 1.2; opacity: .7;
}
.cta__sigil .star { fill: white; }
@media (max-width: 720px) { .cta__sigil { display: none; } }

/* CTA · milestone 15 años */
.cta__milestone {
  display: inline-flex; align-items: center; gap: 16px;
  margin-top: 26px;
  padding: 14px 20px 14px 18px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
}
.cta__milestone-n {
  font: italic 500 44px var(--font-display);
  color: white; letter-spacing: -.02em;
  line-height: 1;
}
.cta__milestone-l {
  font: 600 11px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}

/* ============================================================
   RABBITHOLE CRUMBS · alicia/conejo flotando por la página
   ============================================================ */
.rabbithole {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: var(--cream-soft);
  opacity: 0;
  animation: rabbitDrift 18s linear infinite;
  will-change: transform, opacity;
}
.rabbithole svg { display: block; }
@keyframes rabbitDrift {
  0%   { transform: translateY(-30vh) rotate(var(--rot, 0deg)); opacity: 0; }
  10%  { opacity: var(--max-op, .18); }
  90%  { opacity: var(--max-op, .18); }
  100% { transform: translateY(60vh) rotate(calc(var(--rot, 0deg) + 200deg)); opacity: 0; }
}
.rabbithole--alicia {
  --rot: -8deg;
  --max-op: .14;
  left: -40px;
  top: 0;
  animation-duration: 22s;
  animation-delay: -2s;
  color: var(--cream-soft);
}
.rabbithole--alicia svg { width: 80px; }
.rabbithole--rabbit {
  --rot: 12deg;
  --max-op: .12;
  right: -30px;
  top: 5%;
  animation-duration: 24s;
  animation-delay: -8s;
  color: var(--cream);
}
.rabbithole--rabbit svg { width: 95px; }
.rabbithole--teacup {
  --rot: 18deg;
  --max-op: .22;
  right: 4%;
  top: 0;
  animation-duration: 20s;
  animation-delay: -5s;
  color: var(--orange);
}
.rabbithole--teacup svg { width: 70px; }
.rabbithole--key {
  --rot: 24deg;
  --max-op: .35;
  left: 6%;
  top: 0;
  animation-duration: 16s;
  animation-delay: -3s;
  color: var(--pink);
}
.rabbithole--key svg { width: 40px; }
@media (prefers-reduced-motion: reduce) {
  .rabbithole { animation: none; opacity: 0; display: none; }
}
@media (max-width: 720px) {
  .rabbithole { display: none; }
}
.has-rabbithole { position: relative; overflow: hidden; }

/* ============================================================
   FOOTER · colofón editorial (refresh)
   ============================================================ */
.footer__colophon-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  margin-bottom: 36px;
}
.footer__colophon-top .left,
.footer__colophon-top .right {
  font: 700 10px var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.footer__colophon-top .left b { color: var(--cream); }
.footer__colophon-top .center {
  font: italic 400 16px var(--font-display);
  color: var(--cream-soft);
  letter-spacing: .02em;
}
.footer__col h4 .num {
  display: inline-block; margin-right: 8px;
  font: italic 500 13px var(--font-display);
  color: var(--pink);
  text-transform: none; letter-spacing: 0;
}
.footer__news-wrap {
  display: flex; flex-direction: column; gap: 8px;
}
.footer__news-cap {
  font: italic 400 13px var(--font-display);
  color: var(--cream-soft);
  line-height: 1.4;
}
.footer__giant-wrap {
  position: relative;
  padding: 18px 0;
  display: flex; align-items: center; justify-content: center;
}
.footer__giant-wrap::before,
.footer__giant-wrap::after { display: none; }
.footer__dingbat {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--black);
  padding: 0 14px;
  font: italic 400 22px var(--font-display);
  color: var(--pink);
  z-index: 2;
}
.footer__imprenta {
  margin-top: 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center;
  font: 700 9px var(--font-mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.footer__imprenta .rule { height: 1px; background: var(--line); }
.footer__imprenta b { color: var(--cream-soft); }

/* === COMMENT PATCHES === */
/* LA MONA · logo nº1 del Archi · cream-on-black, screen blend (sin invert) */
.fall.fall--mona {
  --x: 78%;
  --w: clamp(150px, 18vw, 240px);
  --h: clamp(150px, 18vw, 240px);
  background-image: url('../assets/mona-isologo.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: contrast(1.12) brightness(1.06) drop-shadow(0 12px 32px rgba(0,0,0,.62)) !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, #000 60%, rgba(0,0,0,0.4) 80%, transparent 92%) !important;
          mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, #000 60%, rgba(0,0,0,0.4) 80%, transparent 92%) !important;
}
/* Alice fall items · stronger radial mask to hide rectangles */
.fall { -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 28%, transparent 78%) !important;
         mask-image: radial-gradient(ellipse 50% 50% at center, #000 28%, transparent 78%) !important; }
.fall.fall--alicia img, .fall.fall--rabbit img, .fall.fall--alice-bottle img,
.fall.fall--alice-tall img, .fall.fall--hatter img {
  -webkit-mask-image: radial-gradient(ellipse 48% 52% at center, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 48% 52% at center, #000 30%, transparent 78%);
}

/* Hero stamp · sacar overlap con el CTA: mover más al borde y bajar opacidad */
.stamp--hero-fall {
  bottom: clamp(16px, 3vh, 36px) !important;
  right: clamp(16px, 2vw, 36px) !important;
  width: clamp(80px, 9vw, 120px) !important;
  opacity: .6 !important;
  z-index: 5 !important;
}
.hero__plate--bottom { z-index: 12 !important; }
.hero__landing-ctas { position: relative; z-index: 12; }

/* Navbar más compacto */
.nav { padding: 14px clamp(20px, 4vw, 56px) !important; gap: 16px !important; }
.nav.is-stuck { padding: 10px clamp(20px, 4vw, 56px) !important; }
.nav__logo img { height: 32px !important; }
.nav__sigil { font-size: 8.5px !important; }
.nav__trigger, .nav__link { font-size: 12.5px !important; padding: 6px 10px !important; gap: 4px !important; }
.nav__link--hot::before { width: 5px !important; height: 5px !important; margin-right: 4px !important; }
.nav__links { gap: 2px !important; }
.btn--ghost { font-size: 11px !important; padding: 9px 16px !important; }

/* CTA sigil container · ajuste para imagen del dragón */
.cta__sigil {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cta__sigil .rotor text { font-size: 9px !important; letter-spacing: .26em !important; }

/* === HERO REFRESH · less crop, less clutter === */
/* Alice Tenniel images · show MORE, mask only fades the edges */
.fall--alicia img, .fall--rabbit img, .fall--alice-bottle img,
.fall--alice-tall img, .fall--hatter img {
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, #000 70%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 70% 75% at center, #000 70%, transparent 100%) !important;
  filter: invert(1) contrast(1.12) brightness(1.03) drop-shadow(0 14px 32px rgba(0,0,0,.55)) !important;
}
.fall--alicia { --x: 22%; width: clamp(180px, 22vw, 320px) !important; }
.fall--rabbit { --x: 76%; width: clamp(200px, 24vw, 360px) !important; }
.fall--alice-bottle { --x: 14%; width: clamp(160px, 19vw, 280px) !important; }
.fall--alice-tall { --x: 86%; width: clamp(110px, 14vw, 220px) !important; }
.fall--hatter { --x: 34%; width: clamp(180px, 22vw, 320px) !important; }

/* Planche cuts · suavizar el recuadro */
.fall--clock, .fall--bottle, .fall--cat, .fall--gioconda, .fall--scepter {
  -webkit-mask-image: radial-gradient(ellipse 60% 65% at center, #000 55%, transparent 95%) !important;
          mask-image: radial-gradient(ellipse 60% 65% at center, #000 55%, transparent 95%) !important;
  filter: invert(1) contrast(1.08) brightness(0.96) drop-shadow(0 12px 28px rgba(0,0,0,.5)) !important;
}

/* CHESS pieces falling · iconos surrealistas del Archibras */
.fall--chess-dama, .fall--chess-peon, .fall--chess-alfil, .fall--chess-rey {
  background: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  width: auto !important;
  height: auto !important;
}
.fall--chess-dama img, .fall--chess-peon img, .fall--chess-alfil img, .fall--chess-rey img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(0.92) contrast(1.18) brightness(0.96) drop-shadow(0 16px 36px rgba(0,0,0,.7));
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at center, #000 65%, transparent 96%);
          mask-image: radial-gradient(ellipse 75% 80% at center, #000 65%, transparent 96%);
}
.fall--chess-dama { --x: 12%; width: clamp(120px, 14vw, 220px) !important; }
.fall--chess-peon { --x: 88%; width: clamp(100px, 12vw, 180px) !important; }
.fall--chess-alfil { --x: 30%; width: clamp(110px, 13vw, 200px) !important; }
.fall--chess-rey { --x: 70%; width: clamp(130px, 16vw, 240px) !important; }

/* "Fasciuculo" ligature fix · disable ligatures in headers so it doesn't display weird */
.quicklinks__title, .quicklinks__title em {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0;
}

/* Hierarchy adjustments for Quicklinks (titles smaller) */
.ql-card__title { font-size: 22px !important; }
.quicklinks__title { font-size: clamp(24px, 2.5vw, 36px) !important; }

/* Quick-link sigil icons · más transparencia, sin recuadro feeling */
.ql-card__sigil { opacity: .35 !important; }
.ql-card:hover .ql-card__sigil { opacity: .85 !important; }

/* Scroll-triggered marginalia (chess + Alice cameos appearing in other sections) */
.cameo {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform 1.2s var(--ease-out);
  will-change: opacity, transform;
}
.cameo.is-in { opacity: .55; transform: var(--rest-tr, none); }
.cameo img { display: block; width: 100%; height: auto; filter: invert(1) contrast(1.1) drop-shadow(0 12px 24px rgba(0,0,0,.55)); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(ellipse 75% 80% at center, #000 65%, transparent 96%); mask-image: radial-gradient(ellipse 75% 80% at center, #000 65%, transparent 96%); }
.cameo--chess img { filter: invert(0.92) contrast(1.15) drop-shadow(0 14px 28px rgba(0,0,0,.65)); }
@media (prefers-reduced-motion: reduce) { .cameo { display: none; } }
@media (max-width: 720px) { .cameo { opacity: 0 !important; } }

.section, section[id] { position: relative; }

/* === HERO FALL · spread + cleaner masks (round 2) === */
/* Spread items horizontally so they don't overlap each other */
.fall--alicia       { --x: 18% !important; width: clamp(170px, 19vw, 280px) !important; }
.fall--rabbit       { --x: 82% !important; width: clamp(180px, 20vw, 300px) !important; }
.fall--alice-bottle { --x: 10% !important; width: clamp(150px, 17vw, 250px) !important; }
.fall--alice-tall   { --x: 90% !important; width: clamp(110px, 13vw, 200px) !important; }
.fall--hatter       { --x: 35% !important; width: clamp(160px, 18vw, 260px) !important; }
.fall--chess-dama   { --x: 65% !important; width: clamp(110px, 12vw, 180px) !important; }
.fall--chess-peon   { --x: 25% !important; width: clamp( 95px, 11vw, 160px) !important; }
.fall--chess-alfil  { --x: 75% !important; width: clamp(110px, 12vw, 180px) !important; }
.fall--chess-rey    { --x: 50% !important; width: clamp(120px, 14vw, 210px) !important; }
.fall--g-dot        { --x:  6% !important; }
.fall--g-amp        { --x: 94% !important; }
.fall--g-paragraph  { --x: 45% !important; }

/* Tenniel GIFs · circular soft mask so the rectangle disappears */
.fall--alicia img, .fall--rabbit img, .fall--alice-bottle img,
.fall--alice-tall img, .fall--hatter img {
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 85%) !important;
          mask-image: radial-gradient(circle at center, #000 55%, transparent 85%) !important;
  filter: invert(1) contrast(1.18) brightness(1.05) drop-shadow(0 18px 36px rgba(0,0,0,.7)) !important;
  mix-blend-mode: screen !important;
}

/* Chess pieces · cream background → use luminance mask so the cream blends with the dark hero */
.fall--chess-dama img, .fall--chess-peon img, .fall--chess-alfil img, .fall--chess-rey img {
  filter: invert(1) contrast(1.22) brightness(1.0) drop-shadow(0 18px 40px rgba(0,0,0,.75)) !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at center, #000 50%, transparent 88%) !important;
          mask-image: radial-gradient(ellipse 60% 70% at center, #000 50%, transparent 88%) !important;
}

/* Slower fall progression · más tiempo arriba y abajo de cada item */
.fall { transition: none; }

/* === HERO FALL · precise crops per image (round 3) === */

/* Tenniel GIFs · trim only thin margins, very soft edge fade so head/hat don't get cut */
.fall--alicia img, .fall--rabbit img, .fall--alice-bottle img,
.fall--alice-tall img, .fall--hatter img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) !important;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter: invert(1) contrast(1.2) brightness(1.06) drop-shadow(0 18px 36px rgba(0,0,0,.65)) !important;
  mix-blend-mode: screen !important;
}

/* Chess pieces · CROP top label (FIG. XLIV · DAMA TIPÓGRAFA) and bottom caption via clip-path */
.fall--chess-dama img, .fall--chess-peon img,
.fall--chess-alfil img, .fall--chess-rey img {
  clip-path: inset(14% 6% 10% 6%);
  filter: invert(1) contrast(1.25) brightness(1.02) drop-shadow(0 18px 40px rgba(0,0,0,.75)) !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 22%, #000 88%, transparent 92%),
                      linear-gradient(90deg, transparent 6%, #000 14%, #000 86%, transparent 94%) !important;
          mask-image: linear-gradient(180deg, transparent 14%, #000 22%, #000 88%, transparent 92%),
                      linear-gradient(90deg, transparent 6%, #000 14%, #000 86%, transparent 94%) !important;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* MORE SPREAD · keep Alicia and chess pieces far apart in X */
.fall--alicia       { --x: 14% !important; width: clamp(170px, 18vw, 260px) !important; }
.fall--alice-bottle { --x:  8% !important; width: clamp(140px, 15vw, 230px) !important; }
.fall--hatter       { --x: 28% !important; width: clamp(170px, 19vw, 280px) !important; }
.fall--chess-peon   { --x: 42% !important; width: clamp(100px, 11vw, 165px) !important; }
.fall--chess-rey    { --x: 56% !important; width: clamp(125px, 14vw, 210px) !important; }
.fall--chess-alfil  { --x: 70% !important; width: clamp(110px, 12vw, 180px) !important; }
.fall--rabbit       { --x: 84% !important; width: clamp(180px, 20vw, 290px) !important; }
.fall--chess-dama   { --x: 94% !important; width: clamp(110px, 12vw, 175px) !important; }
.fall--alice-tall   { --x: 96% !important; width: clamp(105px, 12vw, 180px) !important; }
.fall--g-dot        { --x:  4% !important; }
.fall--g-amp        { --x: 50% !important; }
.fall--g-paragraph  { --x: 96% !important; }

/* === CAMEOS · don't disrupt readability === */
.cameo {
  z-index: 0 !important;
  opacity: 0;
}
.cameo.is-in { opacity: .55 !important; }
.cameo img { filter: invert(1) contrast(1.05) drop-shadow(0 6px 16px rgba(0,0,0,.4)) !important; }
.cameo--chess img { filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)) !important; }
.cameo--cream img { filter: contrast(1.02) drop-shadow(0 4px 10px rgba(0,0,0,.14)) !important; mix-blend-mode: multiply !important; }
@media (max-width: 1100px) { .cameo { display: none !important; } }
.wrap, .agenda-body__grid, .ev-body__grid, .h-coopes__grid, .cv-acuerdo, .ab-prose { position: relative; z-index: 1; }

/* === DRAGON Insurrexit · visible pero sin chocar con CTAs === */
.stamp--hero-fall {
  position: absolute !important;
  top: clamp(110px, 14vh, 160px) !important;
  bottom: auto !important;
  right: clamp(20px, 3vw, 56px) !important;
  width: clamp(110px, 12vw, 170px) !important;
  opacity: .92 !important;
  z-index: 8 !important;
}
@media (max-width: 720px) { .stamp--hero-fall { top: 90px !important; width: 80px !important; opacity: .8 !important; } }

/* === DRAGON DORADO arriba del hero · cameo brand === */
.hero__top-dragon {
  position: absolute;
  top: clamp(86px, 10vh, 130px);
  left: clamp(20px, 4vw, 56px);
  width: clamp(80px, 9vw, 130px);
  z-index: 8;
  pointer-events: none;
  opacity: .85;
  animation: dragonBob 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(255,138,61,.35));
}
.hero__top-dragon img { width: 100%; height: auto; display: block; }
@keyframes dragonBob { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-6px); } }
@media (max-width: 720px) { .hero__top-dragon { width: 60px; top: 80px; opacity: .7; } }

/* === SILHOUETTE MODE · use transparent PNGs as-is, no masks needed === */
.fall--alicia img, .fall--rabbit img, .fall--alice-bottle img,
.fall--alice-tall img, .fall--hatter img,
.fall--chess-dama img, .fall--chess-peon img,
.fall--chess-alfil img, .fall--chess-rey img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  clip-path: none !important;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.5)) !important;
  mix-blend-mode: normal !important;
}

/* Cameos · silhouettes already transparent, just opacity */
.cameo img {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) !important;
  mix-blend-mode: normal !important;
}
.cameo--cream img {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)) brightness(0) saturate(0) !important;
}

/* Letters/symbols · no fade, full visible */
.fall--g-dot, .fall--g-amp, .fall--g-paragraph {
  opacity: 1 !important;
}

/* NO-OVERLAP RULE: spread images strictly across X with no two image-types sharing a column */
.fall--alicia       { --x: 10% !important; width: clamp(180px, 18vw, 280px) !important; }
.fall--alice-bottle { --x: 24% !important; width: clamp(150px, 15vw, 230px) !important; }
.fall--hatter       { --x: 38% !important; width: clamp(180px, 19vw, 290px) !important; }
.fall--rabbit       { --x: 52% !important; width: clamp(190px, 20vw, 310px) !important; }
.fall--chess-rey    { --x: 66% !important; width: clamp(130px, 14vw, 215px) !important; }
.fall--chess-alfil  { --x: 80% !important; width: clamp(115px, 12vw, 185px) !important; }
.fall--chess-dama   { --x: 92% !important; width: clamp(115px, 12vw, 180px) !important; }
.fall--chess-peon   { --x: 18% !important; width: clamp(100px, 11vw, 170px) !important; }
.fall--cocodrilo    { --x: 72% !important; }
.fall--ojo          { --x: 46% !important; }
/* glyphs · light, can overlap freely */
.fall--g-dot       { --x:  4% !important; }
.fall--g-amp       { --x: 60% !important; }
.fall--g-paragraph { --x: 96% !important; }

/* (nav mobile consolidado en css/site.css) */

/* === Cocodrilo + Ojo · silhouettes (no background-image hack) === */
.fall--cocodrilo, .fall--ojo {
  background: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  width: auto !important;
  height: auto !important;
}
.fall--cocodrilo img, .fall--ojo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.5)) !important;
}
.fall--cocodrilo { --x: 72% !important; width: clamp(130px, 13vw, 200px) !important; }
.fall--ojo       { --x: 46% !important; width: clamp(110px, 11vw, 170px) !important; }

/* === DEPTH · variar tamaños y opacidad para sensación de cerca/lejos === */
/* Cerca · grandes, sombra fuerte, blur menor */
.fall--rabbit       { width: clamp(220px, 24vw, 360px) !important; filter: drop-shadow(0 24px 44px rgba(0,0,0,.55)) !important; opacity: 1; }
.fall--hatter       { width: clamp(210px, 23vw, 340px) !important; filter: drop-shadow(0 22px 40px rgba(0,0,0,.5)) !important; }
.fall--chess-rey    { width: clamp(150px, 16vw, 240px) !important; }
/* Medio · tamaño promedio */
.fall--alicia       { width: clamp(170px, 18vw, 270px) !important; }
.fall--alice-bottle { width: clamp(150px, 16vw, 230px) !important; }
.fall--chess-dama   { width: clamp(120px, 13vw, 190px) !important; }
.fall--chess-alfil  { width: clamp(115px, 12vw, 180px) !important; }
/* Lejos · chicos, blur sutil, opacidad menor → ilusión de fondo */
.fall--chess-peon { width: clamp(75px, 8vw, 120px) !important; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)) blur(.6px) !important; opacity: .75; }
.fall--ojo        { width: clamp(85px, 9vw, 140px) !important; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)) blur(.4px) !important; opacity: .82; }
.fall--cocodrilo  { width: clamp(95px, 10vw, 150px) !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)) blur(.3px) !important; opacity: .85; }

/* ============================================================
   PERF/VIÑETA FIX v2 (Joaco 2026-05-26):
   - Glifos sin mask (son texto, no necesitan viñeta)
   - Viñeta general ampliada (95% solid, fade en el borde)
   - Cocodrilo más grande (sin transform:none que lo fijaba)
   ============================================================ */

/* Glifos: sin viñeta ni mask, son tipografía */
.fall--glyph,
.fall--g-amp,
.fall--g-dot,
.fall--g-paragraph {
  -webkit-mask-image: none !important;
          mask-image: none !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Viñeta general ampliada para todas las imágenes que caen */
.fall img,
.fall.fall--alicia img,
.fall.fall--rabbit img,
.fall.fall--alice-bottle img,
.fall.fall--alice-tall img,
.fall.fall--hatter img,
.fall.fall--cocodrilo img,
.fall--chess-dama img,
.fall--chess-peon img,
.fall--chess-alfil img,
.fall--chess-rey img {
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at center, #000 88%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 95% 95% at center, #000 88%, transparent 100%) !important;
}

/* Cocodrilo más grande (mantiene la animación de scroll del span) */
.fall--cocodrilo {
  width: clamp(280px, 38vw, 620px) !important;
}
.fall--cocodrilo img {
  width: 100% !important;
  height: auto !important;
}

/* === Mask del SPAN padre ampliado (era el que recortaba circular fuerte) === */
.fall.fall--cocodrilo,
.fall.fall--rabbit,
.fall.fall--alice-bottle,
.fall.fall--alice-tall,
.fall.fall--hatter,
.fall.fall--chess-dama,
.fall.fall--chess-peon,
.fall.fall--chess-alfil,
.fall.fall--chess-rey {
  -webkit-mask-image: radial-gradient(ellipse 96% 96% at center, #000 90%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 96% 96% at center, #000 90%, transparent 100%) !important;
  overflow: visible !important;
}

/* === Suavizar líneas del grabado: opacity + ligero blur + brightness === */
.fall img,
.fall.fall--cocodrilo img,
.fall.fall--alice-bottle img,
.fall.fall--hatter img,
.fall.fall--alice-tall img,
.fall.fall--chess-dama img,
.fall.fall--chess-alfil img {
  opacity: 0.85 !important;
  filter: blur(0.15px) brightness(1.05) !important;
}

/* === Glifo 'A' con Andralis ND (display) === */
.fall--g-A {
  font-family: 'AndralisND', 'EB Garamond', 'Times New Roman', Georgia, serif !important;
  font-style: italic;
  font-size: clamp(140px, 14vw, 280px) !important;
  color: var(--cream) !important;
  opacity: 0.65 !important;
  line-height: 0.85 !important;
  font-weight: 400 !important;
  text-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
  --x: 38%;
}

/* === Dragón coiled · cae en blanco (distinto al sello Insurrexit fijo) === */
.fall--dragon {
  --x: 70%;
  width: clamp(130px, 15vw, 230px) !important;
  background: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.fall--dragon img {
  width: 100% !important;
  height: auto !important;
  /* fuerza la silueta a blanco puro, sin importar el color de origen */
  filter: brightness(0) invert(1) drop-shadow(0 14px 34px rgba(0,0,0,.5)) !important;
}

/* ============================================================
   JUEGOS SURREALISTAS · mini-interacciones (rev jun 2026)
   ============================================================ */

/* Atajo en el pre-scene: saltar la caída */
/* Acceso directo a la programacion desde la primera pantalla. */
.hero__pre-skip {
  pointer-events: auto;
  order: 3;
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 17px var(--font-display);
  font-style: italic;
  letter-spacing: .01em; text-transform: none;
  color: var(--cream-soft);
  background: none;
  padding: 10px 18px;
  border: 1px solid rgba(245,241,234,.45);
  border-radius: 999px;
  box-shadow: none;
  opacity: 1;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: rgba(245,241,234,.32);
  transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
}
.hero__pre-skip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.hero__pre-skip:hover { color: var(--pink); text-decoration-color: var(--pink); }
.hero__pre[aria-hidden="true"] .hero__pre-skip { pointer-events: none; }

/* Caja de tipos: clic en el pozo → cae un tipo móvil */
.type-drop {
  position: absolute;
  z-index: 8;
  font: italic 400 56px var(--font-display);
  color: var(--cream);
  pointer-events: none;
  will-change: transform, opacity;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
  animation: typeDrop 1.5s cubic-bezier(.35, 0, .85, .45) forwards;
}
.type-drop--pink { color: var(--pink); }
.type-drop--orange { color: var(--orange); }
@keyframes typeDrop {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(-50%, calc(-50% + 108vh)) rotate(var(--tr, 320deg)); opacity: 0; }
}

/* El ojo de la cooperativa: te sigue con la mirada */
.ojo-vivo {
  position: absolute;
  left: 1.5%; top: 1.5%;
  width: clamp(110px, 11vw, 165px);
  aspect-ratio: 460 / 267;
  z-index: 2;
  pointer-events: none;
  opacity: .92;
}
.ojo-vivo__window {
  position: absolute; inset: 0;
  -webkit-mask: radial-gradient(ellipse 24% 26% at 50% 49%, #000 72%, transparent 100%);
  mask: radial-gradient(ellipse 24% 26% at 50% 49%, #000 72%, transparent 100%);
}
.ojo-vivo__iris, .ojo-vivo__lid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
/* iris-dark ya es trazo oscuro nativo (pupila negra); el lid blanco se invierte a oscuro */
.ojo-vivo__lid { filter: invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.ojo-vivo__iris { transition: transform .3s var(--ease-out); will-change: transform; }
@media (max-width: 720px) { .ojo-vivo { display: none; } }

/* Colofón de cartelera: llena el hueco de la grilla */
.agenda-colofon {
  grid-column: span 6;
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 40px 28px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: radial-gradient(ellipse at center, rgba(255,61,127,.05), transparent 72%);
  transition: border-color .3s, background .3s;
}
.agenda-colofon--full { grid-column: span 12; }
.agenda-colofon:hover { border-color: rgba(255,61,127,.4); }
.agenda-colofon__dingbat {
  font: italic 400 34px var(--font-display);
  color: var(--pink);
  line-height: 1;
}
.agenda-colofon__text {
  font: italic 400 clamp(18px, 1.8vw, 21px) var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5;
  max-width: 30ch;
}
.agenda-colofon__text em { color: var(--cream); }
.agenda-colofon__meta {
  font: 700 9px var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) { .agenda-colofon { grid-column: span 12; } }

/* ============================================================
   MÁS ARCHI · sellos con rotación de estampa + marcas de registro
   ============================================================ */
.tag { transform: rotate(-1.4deg); }
.event__tags .tag:nth-child(2n) { transform: rotate(1.6deg); }

/* Marcas de registro de imprenta en la placa destacada */
.event--feature { position: relative; }
.event--feature::after {
  content: '';
  position: absolute; inset: 9px;
  pointer-events: none;
  z-index: 5;
  --rg: rgba(245,241,234,.38);
  background:
    linear-gradient(var(--rg), var(--rg)) left 0 top 0 / 13px 1px,
    linear-gradient(var(--rg), var(--rg)) left 0 top 0 / 1px 13px,
    linear-gradient(var(--rg), var(--rg)) right 0 top 0 / 13px 1px,
    linear-gradient(var(--rg), var(--rg)) right 0 top 0 / 1px 13px,
    linear-gradient(var(--rg), var(--rg)) left 0 bottom 0 / 13px 1px,
    linear-gradient(var(--rg), var(--rg)) left 0 bottom 0 / 1px 13px,
    linear-gradient(var(--rg), var(--rg)) right 0 bottom 0 / 13px 1px,
    linear-gradient(var(--rg), var(--rg)) right 0 bottom 0 / 1px 13px;
  background-repeat: no-repeat;
}

/* ============================================================
   CHROME COMPARTIDO · index no linkea css/site.css, así que
   estas reglas (drawer mobile, tinta del colofón, letterpress)
   se replican acá. Fuente de verdad: css/site.css.
   ============================================================ */

/* Ojo vivo del nav · espeja css/site.css (el index no lo linkea) · ventana */
.nav__eye {
  position: relative;
  width: 78px; aspect-ratio: 460 / 267;
  flex: 0 0 auto;
  align-self: center;
  margin-right: 10px;
  pointer-events: none;
}
.nav__eye-window {
  position: absolute; inset: 0;
  -webkit-mask: radial-gradient(ellipse 24% 26% at 50% 49%, #000 72%, transparent 100%);
  mask: radial-gradient(ellipse 24% 26% at 50% 49%, #000 72%, transparent 100%);
}
.nav__eye-iris, .nav__eye-lid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.nav__eye-iris { transition: transform .14s var(--ease-out); will-change: transform; }
.nav__eye-iris--dark { display: none; } /* home: nav oscuro usa el iris claro */
@media (prefers-reduced-motion: reduce) { .nav__eye-iris { transition: none; } }
@media (max-width: 820px) { .nav__eye { display: none; } }

/* Nav · breakpoints + drawer mobile (espeja css/site.css) */
/* Con nueve items el nav horizontal solo entra arriba de 1100: mas abajo va el
   drawer, asi que aca ya no hay banda intermedia que achicar. */
@media (max-width: 1100px) {
  .nav__trigger, .nav__link { padding: 6px 8px; font-size: 11.5px; }
}
@media (max-width: 940px) {
  /* La flechita ya no se esconde: abajo de 1100 el nav es un cajon y es lo
     unico que avisa que el item se despliega. */
  .nav__link--hot::before { display: none; }
}
@media (max-width: 1100px) {
  .nav__links {
    position: fixed; top: 64px; right: 12px; left: auto;
    flex-direction: column; align-items: stretch;
    background: rgba(14,12,10,0.96);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px;
    min-width: 240px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .2s, transform .25s, visibility .2s;
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 16px 48px rgba(0,0,0,.45);
  }
  body.menu-open .nav__links {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: none;
  }
  .nav__item { width: 100%; }
  .nav__trigger, .nav__link {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    justify-content: flex-start;
  }
  .nav__dropdown {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: rgba(0,0,0,.3);
    padding: 4px;
    min-width: 0;
    margin-top: 4px;
    display: none;
  }
  .nav__dropdown::before { display: none; }
  .nav__item.is-open .nav__dropdown { display: flex; transform: none !important; }
  .menu-btn { display: flex; align-items: center; justify-content: center; }
}

/* Letterpress · al hacer clic, el botón se estampa contra el papel */
.btn:active { transform: translateY(1px) scale(.985); transition-duration: .06s; }
.btn--primary:active { box-shadow: 0 4px 14px rgba(255,61,127,.3); }

/* Colofón gigante · tinta que sigue la mano (span inyectado por JS) */
.footer__giant { position: relative; }
.footer__giant-fill {
  position: absolute; inset: 0;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  clip-path: inset(-12% 100% -12% 0);
  transition: clip-path .25s var(--ease-out);
  pointer-events: none;
}

/* ===== MOBILE · ajustes (solo afecta <=820/600px, desktop intacto) ===== */
@media (max-width: 600px) {
  /* títulos: que ENVUELVAN, sin achicarlos (el bug original era que no bajaban de línea) */
  .hero__slogan, .section-head__title, .cream__title, .cta__title,
  .commem__title, .comunicado__q, .club__title {
    overflow-wrap: break-word; word-break: break-word; white-space: normal !important; max-width: 100%;
  }
  /* el header flex/grid debe colapsar para que el título use el ancho real */
  .section-head { display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
  .section-head__left, .section-head__right { min-width: 0; max-width: 100%; width: 100%; }
  .section-head__right { align-items: flex-start; }
  /* CTA */
  .cta__inner { display: block !important; }
  .cta__inner > div, .cta__right { min-width: 0; max-width: 100%; }
  .cta__right { margin-top: 26px; }
  .cta__edition { white-space: normal !important; }
  .cta .cta__title { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  /* HERO · pre-scene centrado + landing más grande */
  .hero__plate--top, .hero__pre { text-align: center; align-items: center; }
  .hero__title, .hero__hint, .hero__chapter { text-align: center; }
  .hero__plate--bottom { text-align: left; }
  .hero__landing-title { font-size: clamp(46px, 14vw, 76px) !important; }
  /* FOOTER · que el form de mail y la boletería no se salgan */
  .footer__top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer__news-wrap, .footer__news { max-width: 100% !important; }
  .footer__news { flex-wrap: wrap; }
  .footer__news input { width: 100%; min-width: 0; flex: 1 1 100%; }
  .footer__news button { width: 100%; }
  .footer__giant-wrap .footer__giant { font-size: 13.5vw !important; letter-spacing: -.03em; }
  /* CIRCUITO · tarjetas más compactas */
  .circ-card { padding: 16px 2px 18px !important; gap: 6px !important; }
  /* LÍNEA DE TIEMPO · de grilla horizontal (que se superponía) a espina vertical limpia */
  .cream__timeline { grid-template-columns: 1fr !important; border-top: none !important;
                     border-left: 2px solid var(--black); margin-left: 6px; }
  .cream__tl-item { border-right: none !important; border-bottom: none !important;
                    padding: 4px 0 26px 24px !important; }
  .cream__tl-item:last-child { padding-bottom: 4px !important; }
  .cream__tl-item::before { top: 7px !important; left: -7px !important; }
}

/* ===== MOBILE NAV · hamburguesa izquierda, ojo al centro, sin desbordar ===== */
@media (max-width: 1100px) {
  .nav { justify-content: flex-start !important; gap: 12px !important; }
  .nav__sigil { display: none !important; }              /* libera ancho, el logo respira */
  .menu-btn { display: block; flex: 0 0 auto; margin: 0; }
  .nav__logo { flex: 0 0 auto; }                         /* que no se apriete */
  /* "Mi cuenta" anclado a la derecha (id-specificity para ganar el cascade) */
  #nav .nav__actions { position: absolute !important; right: clamp(14px, 4vw, 24px) !important;
                  left: auto !important; top: 0 !important; bottom: 0 !important;
                  margin: auto 0 !important; height: -moz-fit-content; height: fit-content;
                  transform: none !important; gap: 8px; }
  /* ojo centrado: inset:0 + margin:auto, id-specificity */
  #navEye { display: block !important; position: absolute !important;
            left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
            margin: auto !important; width: 48px !important; height: 28px !important;
            transform: none !important; z-index: 0; }
  /* el menú de la cuenta es un dropdown flotante propio, abajo del botón, alineado a la derecha */
  #nav .nav__item--account .nav__dropdown {
    position: absolute !important; top: calc(100% + 10px) !important;
    right: 0 !important; left: auto !important; min-width: 210px; max-width: calc(100vw - 24px);
    padding: 10px; margin: 0;
    background: rgba(14,12,10,0.97); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: 0 16px 48px rgba(0,0,0,.5);
    transform: none !important;
  }
  /* el dropdown de la hamburguesa abre del lado IZQUIERDO */
  .nav__links { left: 12px !important; right: auto !important; }
  /* La flechita marca cuales abren subopciones, y gira cuando estan abiertas. */
  .nav__links .nav__trigger .nav__chev {
    display: block; margin-left: auto; width: 12px; height: 12px;
    transition: transform .2s var(--ease-out); opacity: .7;
  }
  .nav__links .nav__item.is-open .nav__trigger .nav__chev { transform: rotate(180deg); opacity: 1; }
}

/* Abajo de 400 el nav no da para el ojo: se le monta al logo. */
@media (max-width: 400px) {
  #navEye { display: none !important; }
}

/* Esto NO es del nav y sigue a 820: el nav se pasó a 1100 porque con nueve
   items no entra antes, pero el hero y los títulos no tienen por qué cambiar
   en la franja 821-1100, donde el ancho alcanza de sobra. */
@media (max-width: 820px) {
  /* títulos chicos en mobile (Circuito y co.) más grandes */
  .quicklinks__title { font-size: clamp(34px, 9vw, 46px) !important; }
  /* SCROLL "vibración": el alto en vh se recalcula cuando la barra de URL del
     navegador móvil aparece/desaparece -> reflujo continuo. svh es estable. */
  .hero.hero--fall { height: 260svh; }
  .hero.hero--fall .hero__stage { height: 100svh; }
  .hero { min-height: 100svh; }
}
/* Avatar del boton "Mi cuenta" · personaje por default, foto a futuro */
.nav__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  overflow: hidden; background: rgba(245,241,234,.10);
  border: 1px solid var(--line-2);
}
.nav__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none; }
.nav__avatar svg { width: 16px; height: 16px; }
.nav__avatar-ini { font: italic 600 19px var(--font-display, Georgia, serif); color: currentColor; line-height: 1; letter-spacing: .01em; }
.nav__avatar-img[hidden] { display: none; }
.nav__avatar-upload { cursor: pointer; }
.nav__item--account .nav__chev { display: none; }
.nav__item--account .nav__trigger.btn { gap: 10px; padding: 9px 10px 9px 20px; font-size: 13.5px; }

/* ============================================================
   PAPEL RASGADO · separadores entre secciones
   Generados con tools/gen_rasgado.py, deterministicos.
   viewBox 1200x52, se estiran a lo ancho con preserveAspectRatio="none".
   ============================================================ */
.tear {
  position: relative;
  line-height: 0;
  pointer-events: none;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 3;
}
.tear svg { display: block; width: 100%; height: clamp(26px, 3.2vw, 52px); }
.tear__deckle { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .5; }

  .filmband__play span { width: 58px; }
}