/* ============================================================
   EL ARCHIBRAZO · SHARED SITE CHROME
   Includes: nav with dropdowns, footer, page-transition, cursor,
   reveal animations, generic editorial helpers. Import AFTER tokens.css.
   ============================================================ */

*, *::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; min-height: 100vh; }
@media (hover: none) { body { cursor: auto; } }

/* ============================================================
   CURSOR
   ============================================================ */
.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;
  background: var(--pink);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid var(--cream-soft);
  border-radius: 999px;
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              border-color .2s, transform .12s var(--ease-out);
}
.cursor.is-mudo, .cursor-ring.is-mudo { opacity: 0 !important; }
.cursor-ring.is-hover {
  width: 60px; height: 60px;
  border-color: var(--pink);
}
.cursor-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: italic 400 11px var(--font-display);
  color: var(--cream);
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ============================================================
   GRAIN (subtle paper texture overlay)
   ============================================================ */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  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.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .35;
  mix-blend-mode: overlay;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 4vw, 56px);
  background: rgba(10,10,10,0);
  transition: background .3s, padding .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  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); }
.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; }
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .55; }
}
.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 {
  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;
}
.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 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-link .arrow {
  margin-left: auto; opacity: 0;
  transition: opacity .2s, transform .2s;
}
.nav__dropdown-link:hover .arrow { opacity: 1; transform: translateX(2px); }
.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; }
.menu-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  position: relative;
  color: inherit;
}
.menu-btn span {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 16px; 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: 14px; }
.menu-btn span:nth-child(2) { bottom: 14px; }
/* 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) {
  /* Aca vivia un display:none para la flechita, de cuando el cajon arrancaba a
     940. Ahora arranca a 1100, asi que abajo de 940 tambien es cajon y la
     flechita tiene que verse: es lo unico que avisa que el item se despliega. */
  .nav__link--hot::before { display: none; }
}
/* Drawer mobile · única fuente de verdad (site.js togglea body.menu-open) */
@media (max-width: 1100px) {
  .nav__links {
    position: fixed; top: 64px; left: 12px; right: 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%;
    /* 44 px de alto: es el minimo para que el dedo acierte sin pelearla.
       Con 12px de padding quedaban en 41 y los items se tocaban entre si. */
    min-height: 44px;
    padding: 13px 14px;
    font-size: 14px;
    justify-content: flex-start;
  }
  /* El panel del drawer es siempre oscuro: el texto va claro aunque la página
     (crema) haya pintado el nav de oscuro via .nav--cream (0,2,0). */
  .nav .nav__links .nav__trigger, .nav .nav__links .nav__link { color: var(--cream); }
  .nav .nav__links .nav__trigger:hover, .nav .nav__links .nav__link:hover { color: #fff; }
  /* 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; }
  /* Las paginas crema pintan el dropdown de crema, que esta bien en el desktop
     donde flota debajo de un nav claro. Adentro del cajon, que es oscuro,
     quedaba una tarjeta blanca encima del negro. Va por .nav .nav__links para
     ganarle al estilo propio de esas paginas, que se carga despues. */
  .nav .nav__links .nav__dropdown { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.10); }
  .nav .nav__links .nav__dropdown-link { color: var(--cream-soft); }
  .nav .nav__links .nav__dropdown-link em { color: var(--cream); }
  .nav .nav__links .nav__dropdown-link .meta { color: var(--muted); }
  .nav .nav__links .nav__dropdown-link:hover { color: #fff; background: rgba(255,255,255,.06); }
  .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; }
  /* ===== NAV mobile unificado (igual que el home): hamburguesa izquierda, ojo centrado, Mi cuenta derecha ===== */
  .nav__sigil { display: none !important; }
  .menu-btn { display: flex !important; align-items: center; justify-content: center;
              position: absolute; left: clamp(12px, 4vw, 20px); top: 0; bottom: 0; margin: auto 0; }
  .nav__logo { margin-left: 50px; flex: 0 0 auto; }
  /* Va por id a proposito: la regla base .nav__eye vive mas abajo en este mismo
     archivo (position relative, 78px de ancho) y con la misma especificidad le
     ganaba a esta, asi que el ojo quedaba grande y pisaba a "Mi cuenta". */
  #navEye { display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
            margin: auto; width: 48px; height: 28px; aspect-ratio: auto; margin-right: auto;
            transform: none; z-index: 0; }
  /* "Mi cuenta" anclado a la derecha (absolute) para que NUNCA se salga de pantalla */
  .nav__actions { position: static; margin: 0; }
  .nav__item--account { position: absolute; right: clamp(12px, 4vw, 18px); top: 0; bottom: 0;
                        margin: auto 0; height: -moz-fit-content; height: fit-content; }
  /* el menú de la cuenta NO va al cajón: es un dropdown flotante propio, debajo del botón, alineado al borde derecho */
  .nav__item--account .nav__dropdown {
    position: absolute !important; top: calc(100% + 10px) !important;
    right: 0 !important; left: auto !important; min-width: 210px; width: -moz-max-content; width: max-content;
    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;
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.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); }
/* 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); }
.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); }
/* CTA del hero de evento: Reservar (va al carrito) + Agregar (AJAX, seguis) */
.ev-hero__cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ev-hero__cta .add_to_cart_button.loading { opacity: .6; pointer-events: none; }
.ev-hero__cta .added_to_cart {
  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 var(--pink); color: var(--cream); text-decoration: none;
}
.ev-hero__cta .added_to_cart:hover { border-color: var(--orange); }

/* ============================================================
   PERFIL "Universo Archibrazo" - popup (avatar, iniciales, color)
   ============================================================ */
.aprofile { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.aprofile[hidden] { display: none; }
.aprofile__overlay { position: absolute; inset: 0; background: rgba(6,5,8,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s; }
.aprofile.is-open .aprofile__overlay { opacity: 1; }
.aprofile__panel { position: relative; z-index: 1; width: min(440px, 100%); background: var(--night); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 30px 28px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: translateY(12px) scale(.98); opacity: 0; transition: transform .24s var(--ease-out, ease), opacity .24s; overflow: hidden; }
.aprofile__panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); }
.aprofile.is-open .aprofile__panel { transform: none; opacity: 1; }
.aprofile__x { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; transition: all .2s; }
.aprofile__x:hover { border-color: var(--pink); color: var(--cream); }
.aprofile__eyebrow { font: 700 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.aprofile__title { font: 500 30px var(--font-display); color: var(--cream); letter-spacing: -.02em; margin: 6px 0 20px; }
.aprofile__title em { font-style: italic; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aprofile__avatarrow { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.aprofile__avatar { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--pink); background: var(--night-2); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aprofile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.aprofile__avatar span { font: italic 600 26px var(--font-display); color: var(--pink); }
.aprofile__avatarbtns { display: flex; flex-direction: column; gap: 8px; }
.aprofile__field { display: block; margin-bottom: 18px; }
.aprofile__field > span { display: block; font: 700 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); margin-bottom: 8px; }
.aprofile__field > span em { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.aprofile__field input[type=text] { width: 100%; background: var(--black); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 11px 14px; color: var(--cream); font: 500 15px var(--font-body); outline: none; }
.aprofile__field input[type=text]:focus { border-color: var(--pink); }
.aprofile__swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.aprofile__sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.12); cursor: pointer; transition: transform .15s; }
.aprofile__sw:hover { transform: scale(1.12); }
.aprofile__sw.is-on { border-color: var(--cream); box-shadow: 0 0 0 2px var(--night), 0 0 0 3px currentColor; }
.aprofile__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 999px; font: 700 12px var(--font-body); letter-spacing: .03em; cursor: pointer; border: 1px solid transparent; transition: all .2s; white-space: nowrap; }
.aprofile__btn--soft { background: rgba(255,255,255,.08); color: var(--cream); }
.aprofile__btn--soft:hover { background: rgba(255,255,255,.16); }
.aprofile__btn--ghost { border-color: var(--line-2); color: var(--cream-soft); }
.aprofile__btn--ghost:hover { border-color: var(--pink); color: var(--cream); }
.aprofile__btn--primary { background: var(--gradient); color: #fff; box-shadow: 0 8px 22px rgba(255,61,127,.3); }
.aprofile__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255,61,127,.45); }
.aprofile__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.nav__edit-profile { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; }
.btn--dark {
  color: var(--cream);
  background: var(--black);
  border: 1px solid rgba(255,255,255,.18);
}
.btn--dark:hover { background: var(--night); border-color: rgba(255,255,255,.35); }

/* ============================================================
   EDITORIAL HELPERS
   ============================================================ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.figmark {
  display: inline-flex; align-items: center; gap: 8px;
  font: italic 400 13px var(--font-display);
  color: var(--cream-soft);
}
.figmark b {
  font: 700 10px var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
  font-style: normal;
}

/* Eyebrow with diamond bullet */
.eyebrow--diamond {
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow--diamond::before {
  content: ''; width: 8px; height: 8px;
  background: var(--pink);
  transform: rotate(45deg);
}

.section-head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
  align-items: end; margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head__title {
  font: 500 clamp(36px, 5vw, 64px) var(--font-display);
  letter-spacing: -.025em; line-height: 1.05;
  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; gap: 12px; align-items: flex-end; }
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head__right { align-items: flex-start; }
}

/* Reveal */
.reveal, .reveal-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in, .reveal-stagger.in > * { opacity: 1; transform: none; }
.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; }

/* ============================================================
   FOOTER (shared)
   ============================================================ */
.footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 96px) 0 32px;
  position: relative;
}
.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__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 48px;
}
.footer__brand img { height: 60px; margin-bottom: 18px; }
.footer__brand p {
  font: italic 400 15px var(--font-display);
  color: var(--cream-soft); line-height: 1.5; max-width: 24ch;
}
.footer__col h4 {
  font: 700 11px var(--font-mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 16px;
}
.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__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__col li a {
  font: 500 14px var(--font-body);
  color: var(--cream-soft);
  transition: color .2s, padding-left .25s;
  display: inline-block;
}
.footer__col li a:hover { color: var(--pink); padding-left: 6px; }
.footer__news-wrap { display: flex; flex-direction: column; gap: 10px; }
.footer__news-cap {
  font: italic 400 13px var(--font-display);
  color: var(--cream-soft); line-height: 1.4;
}
.footer__news {
  display: flex; gap: 6px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
}
.footer__news input {
  flex: 1; background: transparent; border: none; outline: none;
  font: 500 13px var(--font-body); color: var(--cream);
}
.footer__news input::placeholder { color: var(--muted); }
.footer__news button {
  background: var(--gradient); color: white;
  border-radius: 999px; padding: 8px 16px;
  font: 700 11px var(--font-body); letter-spacing: .04em;
}
.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__giant {
  font: 700 clamp(48px, 15vw, 250px) var(--font-display);
  -webkit-text-stroke: 1.5px rgba(245, 241, 234, .20);
  color: transparent;
  letter-spacing: -.04em;
  line-height: .8;
  margin: 32px 0 -10px;
  user-select: none;
  text-align: center;
  position: relative;
}
/* Tinta que sigue la mano (span inyectado por JS) */
.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;
}
.footer__dingbat { display: none; }
.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); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font: 500 11px var(--font-mono);
  letter-spacing: .12em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 24px;
}
.footer__bottom b { color: var(--cream-soft); }
@media (max-width: 880px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
/* MOBILE: footer a una columna + form de mail que no se salga (igual que el home) */
@media (max-width: 600px) {
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .footer__news-wrap, .footer__news { max-width: 100%; }
  .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; letter-spacing: -.03em; }
}

/* ============================================================
   PAGE TRANSITION · Vandercook press
   ============================================================ */
.pgx {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.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: 1; 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 cubic-bezier(0.22, 1, 0.36, 1), border-radius .82s cubic-bezier(0.22, 1, 0.36, 1);
  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 cubic-bezier(0.6, 0, 0.85, 0) 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);
}

@media (prefers-reduced-motion: reduce) {
  .pgx { display: none; }
}

/* ============================================================
   PAGE HEAD · default inner-page hero band
   ============================================================ */
.pagehead {
  position: relative;
  padding: clamp(140px, 16vw, 220px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pagehead__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.pagehead__bg .blob {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .25;
}
.pagehead__bg .blob--pink {
  background: var(--magenta-deep);
  top: -200px; right: -80px;
  animation: blobFloat 12s ease-in-out infinite;
}
.pagehead__bg .blob--orange {
  background: var(--orange);
  bottom: -200px; left: -80px;
  opacity: .18;
  animation: blobFloat 16s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-30px, 20px); }
}
.pagehead__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
.pagehead__crumbs {
  display: flex; gap: 8px; align-items: center;
  font: 700 10px var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.pagehead__crumbs a { color: var(--cream-soft); transition: color .2s; }
.pagehead__crumbs a:hover { color: var(--pink); }
.pagehead__crumbs .sep { color: var(--line-2); }
.pagehead__title {
  font: 500 clamp(56px, 8vw, 124px) var(--font-display);
  color: var(--cream);
  letter-spacing: -.03em;
  line-height: .98;
}
.pagehead__title em {
  font-style: italic;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pagehead__sub {
  font: italic 400 clamp(16px, 1.6vw, 20px) var(--font-display);
  color: var(--cream-soft);
  line-height: 1.5;
  margin-top: 20px;
  max-width: 56ch;
}
.pagehead__sub b { font-style: normal; color: var(--cream); font-weight: 500; }
.pagehead__meta {
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.pagehead__meta-row {
  display: flex; flex-direction: column; gap: 4px;
}
.pagehead__meta-row .k {
  font: 700 9px var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.pagehead__meta-row .v {
  font: 500 15px var(--font-body);
  color: var(--cream);
}
.pagehead__meta-row .v em {
  font: italic 400 16px var(--font-display);
  color: var(--orange);
}
@media (max-width: 880px) {
  .pagehead__inner { grid-template-columns: 1fr; }
  .pagehead__meta { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
}

/* ============================================================
   PHOTO SLOT (cream placeholder rect)
   ============================================================ */
.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 {
  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); }
/* Real photo inside a slot */
.photoslot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.photoslot.has-photo::before, .photoslot.has-photo::after { display: none; }
.photoslot.has-photo .photoslot__tag, .photoslot.has-photo .photoslot__num, .photoslot.has-photo .photoslot__label { z-index: 2; }
.photoslot.has-photo .event__visual-stamp { z-index: 2; }
.photoslot.has-photo .photoslot__tag { background: rgba(0,0,0,.55); color: var(--cream); }


/* ============================================================
   CAMEOS · chess + Alice scroll-triggered cameos
   ============================================================ */
.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)); }
.cameo--cream img { filter: contrast(1.05) drop-shadow(0 8px 16px rgba(0,0,0,.18)); mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { .cameo { display: none; } }
/* opacity 0 lo dejaba invisible pero ocupando lugar, y empujaba scroll lateral */
@media (max-width: 720px) { .cameo { display: none !important; } }

section, header, main { position: relative; }


/* === SILHOUETTE MODE · cameos use transparent PNGs directly === */
.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.18) saturate(0) !important;
}


/* ============================================================
   PDF STRIP · doble acceso a la carpeta institucional
   (pre-footer en 12 páginas + variante con borde en 2)
   Se sustituyó el viejo bloque inline "↓ Carpeta institucional"
   por dos links jerárquicos: microsite primero, PDF segundo.
   ============================================================ */
.pdf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 18px 20px;
  text-align: center;
  font-family: var(--font-body);
  line-height: 1.4;
}
.pdf-strip--bordered {
  padding: 26px 20px;
  border-top: 1px solid var(--line);
}
.pdf-strip__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pdf-strip__sep {
  font-size: 12px;
  color: var(--muted-2);
  user-select: none;
  -webkit-user-select: none;
}
.pdf-strip__link {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
}
.pdf-strip__link:hover {
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pdf-strip__link--primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.pdf-strip__link--primary .pdf-strip__arrow {
  font-family: var(--font-mono);
  font-size: 11px;
  margin-left: 6px;
  opacity: 0.85;
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out);
}
.pdf-strip__link--primary:hover .pdf-strip__arrow {
  transform: translate(1px, -1px);
  opacity: 1;
}
.pdf-strip__link--secondary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(168, 162, 158, 0.35);
  text-underline-offset: 3px;
}
.pdf-strip__link--secondary:hover {
  text-decoration-color: rgba(255, 61, 127, 0.55);
}
.pdf-strip__link--secondary .pdf-strip__arrow {
  margin-right: 4px;
  opacity: 0.85;
}

@media (max-width: 560px) {
  .pdf-strip { gap: 6px 10px; padding: 16px; }
  .pdf-strip__label { flex-basis: 100%; margin-bottom: 2px; }
  .pdf-strip__label + .pdf-strip__sep { display: none; }
  .pdf-strip__link--secondary { font-size: 10px; }
}

/* ============================================================
   HISTORIA · sección Carpeta institucional · acceso secundario
   El botón primario sigue usando estilos inline existentes
   (gradient pill); este es solo el link "Descargar también en PDF"
   que aparece debajo.
   ============================================================ */
.h-pdf__secondary-wrap {
  margin-top: 18px;
}
.h-pdf__secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d6cfc1;
  text-decoration: underline;
  text-decoration-color: rgba(214, 207, 193, 0.6);
  text-underline-offset: 4px;
  transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
}
.h-pdf__secondary:hover {
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration-color: rgba(255, 61, 127, 0.55);
}
.h-pdf__secondary .pdf-strip__arrow {
  opacity: 0.85;
}


/* ============================================================
   MI CUENTA · dropdown trigger styled as ghost pill button
   (vive dentro de .nav__actions, sustituye al link viejo)
   ============================================================ */
.nav__item--account { position: relative; }
.nav__item--account .nav__trigger.btn.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 20px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  font: 700 13.5px var(--font-body);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--cream);
  cursor: pointer;
  height: auto;
  white-space: nowrap;
}
.nav__item--account .nav__trigger.btn.btn--ghost::after {
  display: none; /* kill the underline-on-hover from .nav__trigger */
}
/* ===== Nav legible sobre páginas de fondo crema =====
   Texto + logo oscuros; al fijarse, la barra se vuelve clara (no negra). */
.nav--cream .nav__link,
.nav--cream .nav__trigger { color: #2a2018; }
.nav--cream .nav__sigil { color: #6a5a48; }
.nav--cream .nav__sigil span { color: var(--magenta-deep); }
.nav--cream .nav__item--account .nav__trigger.btn.btn--ghost { color: #2a2018; border-color: rgba(0,0,0,.28); }
.nav--cream .nav__item--account .nav__trigger.btn.btn--ghost:hover { color: #2a2018; border-color: var(--pink); }
.nav--cream.is-stuck {
  background: rgba(245,241,234,0.86);
  border-bottom-color: rgba(0,0,0,.08);
}
.nav__item--account .nav__trigger.btn.btn--ghost:hover {
  border-color: var(--pink);
  color: var(--cream);
}
.nav__item--account .nav__chev {
  width: 9px;
  height: 9px;
  margin-left: 2px;
  opacity: 0.85;
}
.nav__item--account .nav__dropdown {
  min-width: 220px;
  top: calc(100% + 10px);
}
@media (max-width: 940px) {
  .nav__item--account .nav__chev { display: none; }
}

/* ===== Ojo vivo del nav · te mira durante toda la navegación =====
   Ventana: el iris va detrás recortado por la abertura del ojo;
   los párpados (lid) van encima. El iris se mueve dentro de la 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;
}
/* Iris claro (pupila oscura por transparencia) sobre nav oscuro;
   iris oscuro nativo sobre páginas crema. El lid se invierte a oscuro en crema. */
.nav__eye-iris--dark { display: none; }
.nav--cream .nav__eye-iris--light { display: none; }
.nav--cream .nav__eye-iris--dark { display: block; }
.nav--cream .nav__eye-lid,
.nav--on-light .nav__eye-lid { filter: invert(1) contrast(1.5) brightness(.82); }
/* El grabado invertido queda en gris palido sobre crema: medido daba 3,1:1.
   El contraste y el brillo le devuelven el negro del trazo original. */
.nav--cream .nav__eye-iris--dark,
.nav--on-light .nav__eye-iris--dark { filter: contrast(1.35) brightness(.8); }
@media (prefers-reduced-motion: reduce) {
  .nav__eye-iris { transition: none; }
}
@media (max-width: 820px) {
  .nav__eye { display: none; }
}

/* ============================================================
   FIGURA DEL HERO · float sutil en todas las paginas
   (club-archi y convocatoria ya tienen el suyo propio)
   ============================================================ */
@keyframes heroFigFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.a-hero__figure img, .c-hero__figure img, .fsa-hero__figure img, .h-hero__figure img,
.l-hero__figure img, .p-hero__figure img, .s-hero__figure img, .t-hero__figure img {
  animation: heroFigFloat 7s ease-in-out infinite;
}

/* ============================================================
   NAV sobre fondo claro · texto oscuro (clase via JS por luminancia)
   ============================================================ */
.nav--on-light .nav__link, .nav--on-light .nav__trigger { color: #3a2c1a; }
.nav--on-light .nav__link:hover, .nav--on-light .nav__trigger:hover { color: #0a0a0a; }
.nav--on-light .nav__item--account .nav__trigger.btn.btn--ghost { color: #2a1f12; border-color: rgba(0,0,0,.28); }
.nav--on-light .nav__item--account .nav__trigger.btn.btn--ghost:hover { color: #0a0a0a; border-color: var(--pink); }
.nav--on-light .nav__eye-iris--light { display: none; }
.nav--on-light .nav__eye-iris--dark { display: block; }

@media (prefers-reduced-motion: reduce) {
  .a-hero__figure img, .c-hero__figure img, .fsa-hero__figure img, .h-hero__figure img,
  .l-hero__figure img, .p-hero__figure img, .s-hero__figure img, .t-hero__figure img { animation: none; }
}

/* ============================================================
   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--on-light .nav__avatar { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.22); }
/* brightness(0) era para el personaje monocromo por default. A la foto
   cargada por el usuario la pintaba entera de negro en los navs claros. */
.nav--on-light .nav__avatar img:not(.nav__avatar-img) { filter: brightness(0); }

/* ============================================================
   TALLERES · tarjeta de relleno en hueco impar de la grilla
   ============================================================ */
.taller-filler {
  display: none;
  flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 12px; padding: 32px 30px;
  border: 1.5px dashed rgba(245,241,234,.22); border-radius: var(--r-lg, 18px);
  background: rgba(245,241,234,.02);
  min-height: 220px;
}
.taller-filler.is-shown { display: flex; }
.taller-filler__dingbat { font: italic 400 26px var(--font-display); color: var(--pink); }
.taller-filler__text { font: 500 18px var(--font-display); color: var(--cream); line-height: 1.3; max-width: 26ch; }
.taller-filler__text em { font-style: italic; color: var(--cream-soft); }
.taller-filler__link {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-soft); border-bottom: 1px solid rgba(245,241,234,.3); padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.taller-filler__link:hover { color: var(--pink); border-color: var(--pink); }
@media (max-width: 980px) { .taller-filler { display: none !important; } }

/* fix nav mobile (auditoria 2026-06-30): el boton "Mi cuenta" se estiraba y cortaba en mobile.
   Lo compactamos a solo el avatar circular, anclado a la derecha.
   .nav .nav__item--account... (alta especificidad + !important) gana sobre las reglas globales. */
@media (max-width: 820px) {
  .nav .nav__item--account { position: absolute !important; right: clamp(12px, 4vw, 18px) !important; left: auto !important; top: 0; bottom: 0; margin: auto 0; width: -moz-fit-content !important; width: fit-content !important; }
  .nav .nav__item--account .nav__trigger.btn.btn--ghost { font-size: 0 !important; gap: 0 !important; padding: 4px !important; min-width: 0 !important; width: -moz-fit-content !important; width: fit-content !important; }
  .nav .nav__item--account .nav__trigger.btn.btn--ghost::after { display: none !important; }
  .nav .nav__item--account .nav__avatar { margin: 0 !important; }
  .nav .nav__item--account .nav__avatar-ini { font-size: 15px !important; }
}

/* ============================================================
   NAV COMPACTO · unifica las internas con el home
   El home tenia su propio bloque "Navbar mas compacto" y las otras 29 paginas
   se quedaron con los valores mas anchos: por eso ahi el nav se llenaba antes y
   la tienda se guardaba sola a 1440. Es el mismo diseño, aplicado a todas.
   ============================================================ */
@media (min-width: 1101px) {
  .nav { padding: 14px clamp(20px, 4vw, 56px); gap: 16px; }
  .nav.is-stuck { padding: 10px clamp(20px, 4vw, 56px); }
  .nav__logo img { height: 32px; }
  .nav__sigil { font-size: 8.5px; }
  .nav__trigger, .nav__link { font-size: 12.5px; padding: 6px 10px; gap: 4px; }
  .nav__link--hot::before { width: 5px; height: 5px; margin-right: 4px; }
  .nav__links { gap: 2px; }
  .nav .nav__item--account .btn--ghost { font-size: 11px; padding: 9px 16px; }
}

/* Abajo de 1520 la direccion del logo cede el lugar a la navegacion: son 107px
   decorativos que ya estan en el pie y en Contacto. Con eso entra la tienda. */
@media (max-width: 1520px) { .nav__sigil { display: none; } }
/* Abajo de 1300 el ojo tambien cede: es un easter egg sin funcion de
   navegacion, y sin el entra el link a la tienda, que si es un destino. */
@media (max-width: 1300px) { .nav__eye { display: none; } }
/* Abajo de 400 el nav no da para el ojo: se le monta al logo. Va por id para
   ganarle al #navEye del bloque movil, que lo fuerza visible. */
@media (max-width: 400px) { #navEye { display: none !important; } }

/* La barra de admin de WordPress es fixed y empuja el documento con
   html{margin-top:32px}, pero a un nav fixed en top:0 no lo mueve: el nav
   quedaba DEBAJO de la barra, con el logo cortado y el titulo de la pagina
   encimado. Solo aplica logueado; en el estatico esta clase no existe.

   La altura NO es fija: con muchos plugins la barra se parte en dos filas y
   mide 64. La mide functions.php y la escribe en --archi-adminbar; los 32 y 46
   quedan de respaldo por si el script no llega a correr. */
body.admin-bar .nav { top: var(--archi-adminbar, 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: var(--archi-adminbar, 46px); }
}

/* sup y sub explicitos.
   En WordPress hay un reset tipo normalize que los pisa: el estatico los
   dibujaba con vertical-align:super y line-height:normal, y WordPress con
   baseline y line-height:0. La diferencia son 2 px de alto en la linea del
   colofon ("Specimen N[o]") y 3 px en el desplegable del nav ("L'Archibras"),
   que corrian TODA la pagina hacia arriba en el staging. Se fija de este lado
   para que los dos rendericen igual; esta es la version que no infla la caja
   de linea. */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* Los doce grabados adentro del popup. Mismo tamano que los swatches de color,
   para que las dos filas de opciones se lean como hermanas. */
.aprofile__grabados { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.aprofile__grabado {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: var(--cream, #f5f0e6); border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  padding: 0; transition: transform .15s, box-shadow .15s;
}
.aprofile__grabado img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aprofile__grabado:hover { transform: translateY(-2px); }
.aprofile__grabado.is-on { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink); }

/* Con los doce grabados adentro el panel mide unos 620 px: entra en un celular
   de 844, pero no en una ventana baja con la barra de admin puesta. Que scrollee
   el panel antes que cortarse. */
.aprofile__panel { max-height: min(88vh, 780px); overflow-y: auto; }

/* Silueta neutra del circulo de "Mi cuenta" cuando no hay sesion (WordPress). */
.nav__avatar-anon { display: block; width: 18px; height: 18px; opacity: .85; }


/* === BLANCOS TACTILES ===
   En pantalla tactil los botones tienen que medir 44 px de alto. El .btn base
   queda en unos 36 y en el mouse esta bien asi, por eso la regla va solo para
   punteros gruesos: el desktop no cambia. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav__trigger, .nav__link { min-height: 44px; }
}