@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500..700&family=Manrope:wght@400;500;600;700;800&display=swap");

/* Ensure [hidden] always wins over component display rules */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  /* ── Paleta "artística" (solo home + galería, ver .theme-dark) ── */
  --c-bg: #2b2925;      /* fondo de página y cortina */
  --c-text: #f0ece3;    /* tagline, títulos, marca del nav */
  --c-accent: #7fd4ab;  /* enlaces, botón secundario, hovers */
  --c-dark: #09111f;    /* nav, footer, velos oscuros */
  /* Cortina (home) */
  --curtain-min: 20%;   /* opacidad al borde superior */
  --curtain-len: 14rem; /* extensión vertical hasta fondo sólido */
  --bg: #f9f7f2;
  --bg-soft: #fef9f4;
  --surface: rgba(200, 230, 111, 0.08);
  --surface-strong: rgba(200, 230, 111, 0.12);
  --line: rgba(74, 186, 141, 0.18);
  --line-strong: rgba(74, 186, 141, 0.28);
  --text: #2c3e50;
  --muted: #6b7c8f;
  --accent: #ade700;
  --accent-2: #4aba8d;
  --accent-3: #d87e5a;
  --success: #5ec999;
  --danger: #e8566b;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --nav-h: 60px;
  /* Extra space reserved below the nav while the "Productos" mega-menu is
     open — 0 normally, set to the panel's real measured height by
     nav-menu.js on hover. Kept separate from --nav-h (which the bar's own
     `height` also uses) so opening the menu can push page content down
     without the nav bar itself getting taller. */
  --megamenu-h: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(200, 230, 111, 0.15), transparent 34%),
    radial-gradient(circle at top right, rgba(127, 179, 213, 0.1), transparent 30%),
    linear-gradient(180deg, #f9f7f2 0%, #fef9f4 40%, #f5f8f3 100%);
  font-family: var(--font-body);
}

.backdrop {
  position: fixed;
  inset: auto;
  border-radius: 999px;
  filter: blur(12px);
  pointer-events: none;
  opacity: 0.55;
}

/* ── "Tema artístico" (paleta oscura) — solo home + galería ──────
   Todo lo demás (tienda, checkout, producto, gracias) sigue con la
   paleta clara de siempre. Cualquier regla nueva que deba variar entre
   la parte artística y la comercial va acá, scopeada a .theme-dark, en
   vez de tocar los selectores base de arriba. */
body.theme-dark {
  color-scheme: dark;
  color: #e8e6e1;
  background: var(--c-bg);
}

body.theme-dark .backdrop {
  opacity: 0.3;
}

/* :where() keeps this at the specificity of a bare `a` selector (0,0,1)
   despite the .theme-dark scope, so it stays a low-priority default and
   doesn't fight already-styled links (.site-nav__link, .site-footer__link,
   .home-cta, etc.) the way `body.theme-dark a` (0,1,2) would. */
:where(body.theme-dark) a {
  color: var(--c-accent);
}

:where(body.theme-dark) a:hover {
  color: var(--c-text);
}

.backdrop-a {
  width: 28rem;
  height: 28rem;
  left: -7rem;
  top: -7rem;
  background: radial-gradient(circle, rgba(200, 230, 111, 0.2), transparent 65%);
}

.backdrop-b {
  width: 26rem;
  height: 26rem;
  right: -7rem;
  bottom: -8rem;
  background: radial-gradient(circle, rgba(127, 179, 213, 0.15), transparent 65%);
}

/* SITE NAV */
body { padding-top: calc(var(--nav-h) + var(--megamenu-h)); transition: padding-top 200ms ease; }

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  background: rgba(9, 17, 31, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body.theme-dark .site-nav {
  background: color-mix(in srgb, var(--c-dark) 82%, transparent);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-nav__brand img {
  display: block;
  height: 150px;
  width: auto;
}

.site-nav__links {
  display: flex;
  align-items: stretch; /* links (and the Productos wrapper) fill the full
    bar height — see .site-nav__link below for why */
  align-self: stretch;
  gap: 0.15rem;
}

.site-nav__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.1rem;
  border-radius: 0; /* rectangular hit area, flush against the bar's own
    edges — with rounded corners + a shorter box, there was dead space
    between the link and the mega-menu below it that the mouse could
    wander into on the way down, closing the menu before it got there */
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.site-nav__link:hover {
  color: #f0ece3;
  background: rgba(255, 255, 255, 0.08);
}

.site-nav__link[aria-current="page"] {
  color: #f0ece3;
  background: rgba(255, 255, 255, 0.1);
}

/* Mega-menú de "Productos" — desktop/hover únicamente (@media hover:hover
   más abajo). En touch, .site-nav__item se queda como un <div> inerte
   alrededor del <a>, que sigue navegando normal con un tap. */
.site-nav__item {
  position: relative;
  display: flex;
  align-items: stretch; /* the <a> inside fills the wrapper's full height */
}

.site-nav__megamenu {
  /* position: fixed (not absolute) on purpose — .site-nav__item is a
     narrow flex item near the right edge of the bar, so if this were
     absolute, its containing block would be THAT narrow item, not the
     viewport, and left:0/right:0 would size it to the item's own width
     instead of the full screen (this actually happened — the panel
     rendered as a small box near "Productos", with its content pushed
     off past the right edge of that box, invisible). Fixed's containing
     block is always the viewport (no ancestor has transform/filter set),
     so left:0/right:0 reliably spans edge-to-edge regardless of DOM
     nesting. */
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  /* The bar itself still spans edge-to-edge (that's the "widening"
     illusion), but its content is pushed to the right via flex so it
     sits under "Productos" instead of starting at the far-left edge —
     see .site-nav__megamenu-inner, the actual content block. */
  display: flex;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
  /* Same background as .site-nav itself (not a separate shade) — this is
     what actually sells the "the bar widened" illusion instead of reading
     as a dropdown; it also means it automatically matches whichever color
     the nav has on that page (light-theme shop/checkout vs the dark
     .theme-dark home/gallery), with nothing to keep in sync by hand. */
  background: rgba(9, 17, 31, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  /* Closed state: invisible + non-interactive, but still laid out (no
     display:none) so opacity/transform can transition instead of jump-
     cutting. visibility is included in the transition purely so keyboard
     focus/hit-testing is blocked while closed without needing JS — as a
     discrete property it flips to "visible" at the start of the show
     transition and to "hidden" at the end of the hide one, which is
     exactly the timing we want on both sides. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

body.theme-dark .site-nav__megamenu {
  background: color-mix(in srgb, var(--c-dark) 82%, transparent);
}

@media (hover: hover) {
  .site-nav__item--has-menu:hover .site-nav__megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.site-nav__megamenu-inner {
  display: flex;
  flex-direction: column;
}

.site-nav__megamenu-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.site-nav__megamenu-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0ece3;
  text-decoration: none;
  min-width: 140px;
}

.site-nav__megamenu-title:hover {
  color: var(--accent-2);
}

.site-nav__megamenu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.site-nav__megamenu-chip {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  text-decoration: none;
  transition: background 180ms, color 180ms, border-color 180ms;
}

.site-nav__megamenu-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0ece3;
  border-color: rgba(255, 255, 255, 0.3);
}

.site-nav .cart-icon-btn {
  position: relative;
  top: auto;
  right: auto;
  width: 36px;
  height: 36px;
  /* .site-nav__links has align-items:stretch so the nav links fill the
     bar's full height — but this button has a fixed height, so it doesn't
     stretch, and a non-stretching flex item under align-items:stretch
     falls back to flex-start (top-aligned) instead of centering. */
  align-self: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  margin-left: 0.5rem;
}

.site-nav .cart-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  transform: none;
}

/* AUTH MODAL */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-modal[hidden] {
  display: none;
}

.auth-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.auth-modal-content {
  position: relative;
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 248, 243, 0.99));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(18px);
  padding: clamp(1.5rem, 3vw, 2rem);
  animation: slideUp 250ms ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.close-modal {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(200, 230, 111, 0.1);
  color: var(--text);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
  z-index: 10;
}

.close-modal:hover {
  background: rgba(200, 230, 111, 0.2);
}

/* MAIN CONTENT */
.page-content {
  position: relative;
  z-index: 1;
}

/* gracias.html: center the confirmation card in the exact space between
   the fixed nav and the footer, instead of guessing with a fixed
   min-height — main stretches (flex:1) to fill whatever's left after the
   nav's reserved top padding and the footer's own (variable, e.g. it
   wraps taller on narrow screens) height. */
.gracias-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.gracias-page .page-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── HOME PAGE — STICKY VIDEO "CURTAIN" ──────────────────────────
   Everything below is scoped to body.home so it never touches the
   plain layout used by gallery.html, shop.html, etc. The top menu bar
   (.site-nav) keeps its normal site-wide `position: fixed` behaviour
   unchanged here — it never moves, on any page, including this one.

   Geometry: --hero-video-h is the single source of truth. .header-pin
   is (headerH + H) tall and holds the sticky header (top: var(--nav-h) +
   var(--megamenu-h), right below the fixed nav — the megamenu-h term adds
   whatever extra space the open "Productos" mega-menu is reserving, so
   the header/video visually push down instead of getting covered by it).
   .video-pin is (H*2) tall, pulled up by H via negative margin so it sits
   flush under the header, and holds the sticky video (same top formula
   plus headerH). Both wrappers therefore
   run out of "sticky room" at the exact same scrollY (=H), so the header
   un-pins at the same instant the video finishes being covered by
   .page-content sliding up over it — no visual jump. Do not collapse
   this into a single wrapper: header and video need different `top`
   offsets, so a shared wrapper would make them release at different
   scroll distances. */
body.home {
  --hero-header-h: 130px;
  --hero-video-h: min(40vw, 840px);
  overflow-x: clip; /* overflow-x:hidden on body is a known cause of position:sticky failing to stick in some engines */
}

body.home .header-pin {
  height: calc(var(--hero-header-h) + var(--hero-video-h));
  position: relative;
}

body.home .hero-header {
  position: sticky;
  top: calc(var(--nav-h) + var(--megamenu-h));
  height: var(--hero-header-h);
  z-index: 11;
}

body.home .video-pin {
  height: calc(var(--hero-video-h) * 2);
  margin-top: calc(var(--hero-video-h) * -1);
  position: relative;
  transform: translateZ(0); /* forces a compositing layer, mitigates sticky+video jitter on iOS */
}

body.home .hero-video-section {
  position: sticky;
  top: calc(var(--nav-h) + var(--megamenu-h) + var(--hero-header-h));
  height: var(--hero-video-h);
  z-index: 10;
}

body.home .page-content {
  margin-top: calc(var(--hero-video-h) * -1);
  padding-top: calc(var(--hero-video-h) * 0.5);
  z-index: 20;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-bg) var(--curtain-min), transparent) 0%,
    color-mix(in srgb, var(--c-bg) calc(var(--curtain-min) + (100% - var(--curtain-min)) * 0.5), transparent) calc(var(--curtain-len) * 0.43),
    var(--c-bg) var(--curtain-len)
  );
}

.hero-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}

.hero-header__logo {
  display: block;
  height: calc(var(--hero-header-h)*2.5);
  width: auto;
}

/* HERO VIDEO SECTION */
.hero-video-section {
  width: 100%;
}

.hero-video-frame {
  position: relative; /* containing block for the carousel slides below */
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(200, 230, 111, 0.1), rgba(127, 179, 213, 0.08));
  overflow: hidden; /* clipping/radius lives here, not on the sticky element itself — avoids WebKit sticky+clip flicker */
  box-shadow: var(--shadow);
}

.hero-video {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancla el video al piso de la ventana — el recorte por exceso de
     alto/ancho se saca únicamente de arriba, nunca de abajo. */
  object-position: center bottom;
}

.hero-video--desktop {
  display: block;
}

/* ── Carrusel del hero: video + fotos con zoom lento ─────────────
   Cada diapositiva ocupa toda la ventana del video, apiladas unas sobre
   otras (position:absolute) — la visible es la que tiene .is-active,
   con un fundido simple entre una y otra. La diapositiva de video es
   siempre el primer slide (los <video> ya existentes, sin tocar); las
   de foto las agrega js/home.js a partir de CONTEXT_PHOTOS. */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
}

/* Zoom lento tipo Ken Burns — se reinicia (ver home.js) cada vez que la
   diapositiva vuelve a quedar activa, así siempre arranca desde 1x. */
.hero-slide.is-active .hero-slide__img {
  animation: hero-ken-burns 6s ease-out forwards;
}

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.hero-carousel-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
  cursor: pointer;
}

.hero-carousel-zone--prev { left: 0; }
.hero-carousel-zone--next { right: 0; }

.hero-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 6;
}

.hero-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.hero-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.hero-carousel-dot.is-active {
  background: #ffffff;
  transform: scale(1.3);
}

.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  z-index: 15;
  transition: opacity 300ms ease;
}

.hero-scroll-cue__chevron {
  animation: hero-cue-bounce 1.6s ease-in-out infinite;
}

@keyframes hero-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

body.home.is-scrolling .hero-scroll-cue {
  opacity: 0;
  pointer-events: none;
}

/* Art gallery thumbnails (phone-like feed + modal viewer) */
.art-gallery-section {
  width: 100%;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

.gallery-title {
  margin: 1rem 0 2rem;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--c-text);
  text-align: center;
}

/* Justified-row gallery layout (built by js/main.js's buildJustifiedRows) —
   each .thumb-row is one row of images at a shared height, individual
   .thumb widths set inline per-tile (from the image's own aspect ratio),
   so the CSS here only has to lay out rows in a column and let each
   row's own children determine its width (which sums to the container's
   full width, computed in JS). --gallery-row-h/--gallery-gap are the only
   knobs main.js reads to compute the layout — override them per
   breakpoint instead of duplicating pixel values in JS. */
:root {
  --gallery-row-h: 220px;
  --gallery-gap: 12px;
}

.thumbnails-grid {
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
  max-width: 1400px;
  margin: 0 auto;
}

.thumb-row {
  display: flex;
  gap: var(--gallery-gap);
}

.thumbnails-grid .thumb {
  background: var(--c-bg);
  /* .thumb is a <button> — without an explicit border, browsers draw
     their own default button border, and body.theme-dark's
     color-scheme:dark makes that default noticeably thicker/lighter.
     Match the thin border language used by the home cards instead. */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: relative;
  padding: 0;
  flex-shrink: 0; /* width/height are set inline per-tile by JS — don't let flex alter them */
}

.thumbnails-grid .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* The tile's own box is sized FROM the image's real aspect ratio (see
     buildJustifiedRows), so this should already be an exact fit — cover
     (not contain) just absorbs the odd sub-pixel rounding gap without
     letterboxing. */
  object-fit: cover;
}

.viewer-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,10,0.85);
  z-index: 2000;
  opacity: 0;
  transition: opacity 240ms ease,
              padding-right 380ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.viewer-overlay[aria-hidden="false"] {
  display: flex;
  opacity: 1;
}

.viewer-overlay.info-panel-open {
  padding-right: 290px;
}

.viewer-content {
  max-width: 90vw;
  max-height: 88vh;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.viewer-track {
  position: relative;
  width: min(94vw, 1240px);
  height: min(80vh, 840px);
  overflow: hidden;
  display: block;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.viewer-layer {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.viewer-layer--current {
  position: absolute;
  z-index: 2;
  opacity: 1;
  transform: translateX(0) scale(1) rotateY(0deg);
}

.viewer-layer--incoming {
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: translateX(0) scale(0.98) rotateY(0deg);
  pointer-events: none;
}

.viewer-track.is-animating .viewer-layer--current.is-exiting {
  animation: viewer-out-next 420ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.viewer-track.is-animating[data-motion="prev"] .viewer-layer--current.is-exiting {
  animation-name: viewer-out-prev;
}

.viewer-track.is-animating .viewer-layer--incoming.is-entering {
  animation: viewer-in-next 420ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.viewer-track.is-animating[data-motion="prev"] .viewer-layer--incoming.is-entering {
  animation-name: viewer-in-prev;
}

.viewer-layer--current,
.viewer-layer--incoming {
  z-index: 2;
}

.viewer-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  background: transparent;
}

.viewer-layer .viewer-image {
  width: 100%;
  height: 100%;
}

/* ── Vertical carousel: other images of the current artwork ─────
   Simpler than the horizontal one above — a plain directional slide,
   no scale/rotate. vnext stays invisible (opacity via class, not just
   position) until its entering animation starts, so there's no flash
   while its src loads/decodes. */
.viewer-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.viewer-image-frame .viewer-image {
  position: absolute;
  inset: 0;
  margin: auto;
}

.viewer-image--vnext {
  opacity: 0;
  pointer-events: none;
}

.viewer-image-frame.v-animating .viewer-image--vcurrent.v-exiting {
  animation: viewer-vimg-out-next 320ms ease forwards;
}
.viewer-image-frame[data-vdir="prev"].v-animating .viewer-image--vcurrent.v-exiting {
  animation-name: viewer-vimg-out-prev;
}
.viewer-image-frame.v-animating .viewer-image--vnext.v-entering {
  animation: viewer-vimg-in-next 320ms ease forwards;
  opacity: 1;
}
.viewer-image-frame[data-vdir="prev"].v-animating .viewer-image--vnext.v-entering {
  animation-name: viewer-vimg-in-prev;
}

@keyframes viewer-vimg-out-next {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
@keyframes viewer-vimg-in-next {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes viewer-vimg-out-prev {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@keyframes viewer-vimg-in-prev {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ── Dots: other images of the current artwork ──────────────────
   Small vertical column to the left of the viewer image. */
.viewer-image-dots {
  position: absolute;
  z-index: 2050;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.viewer-image-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 200ms, transform 200ms;
}

.viewer-image-dot.is-active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .viewer-image-dots { left: 0.6rem; gap: 0.4rem; }
  .viewer-image-dot { width: 5px; height: 5px; }
}

/* ── Dots: which artwork (of the whole gallery), below the title ─
   Same visual language as .viewer-image-dot, just laid out horizontally.
   Capped at MAX_ARTWORK_DOTS (main.js) regardless of how many artworks
   exist — past that, the dots represent a compressed position, not a
   1:1 index (see updateArtworkDots). */
.viewer-artwork-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 10px;
}

.viewer-artwork-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 200ms, transform 200ms;
}

.viewer-artwork-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.viewer-artwork-dot.is-active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.3);
}

@keyframes viewer-out-next {
  from { opacity: 1; transform: translateX(0) scale(1) rotateY(0deg); }
  to { opacity: 0; transform: translateX(-26%) scale(0.92) rotateY(48deg); }
}

@keyframes viewer-in-next {
  from { opacity: 0; transform: translateX(26%) scale(0.92) rotateY(-48deg); }
  to { opacity: 1; transform: translateX(0) scale(1) rotateY(0deg); }
}

@keyframes viewer-out-prev {
  from { opacity: 1; transform: translateX(0) scale(1) rotateY(0deg); }
  to { opacity: 0; transform: translateX(26%) scale(0.92) rotateY(-48deg); }
}

@keyframes viewer-in-prev {
  from { opacity: 0; transform: translateX(-26%) scale(0.92) rotateY(48deg); }
  to { opacity: 1; transform: translateX(0) scale(1) rotateY(0deg); }
}

.viewer-caption {
  margin-top: 8px;
  color: var(--muted);
  text-align: center;
}

.viewer-close {
  position: fixed;
  /* Below the fixed site nav (--nav-h), not under it — a plain 22px from
     the viewport top put it right behind the nav bar. */
  top: calc(var(--nav-h) + 16px);
  right: 26px;
  z-index: 2100;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms;
}

.viewer-close:hover {
  color: #fff;
}

.viewer-close__glyph {
  width: 30px;
  height: 30px;
  /* Same purpose as .viewer-info-toggle__glyph's shadow — keeps the cross
     legible without a background plate, over light or busy artwork alike. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

/* Desktop-only: on mobile the viewer closes by tapping outside the image
   (see main.js touchend handler), so this button would be redundant —
   and there's no room to reserve for it above the image on a small screen. */
@media (max-width: 600px) {
  .viewer-close { display: none; }
}

.viewer-nav {
  position: fixed;
  z-index: 2000;
}

/* Left/right edges change artwork; the center strip is split top/bottom to
   change the current artwork's image (vertical carousel). 35/30/35 so all
   four zones get a reasonable click target with no overlap. */
.viewer-prev, .viewer-next {
  top: 0;
  bottom: 0;
  width: 35%;
}
.viewer-prev { left: 0 }
.viewer-next { right: 0 }

.viewer-nav-up, .viewer-nav-down {
  left: 35%;
  right: 35%;
  width: auto;
  height: 50%;
}
.viewer-nav-up { top: 0; }
.viewer-nav-down { bottom: 0; }

@media (max-width: 720px) {
  .viewer-track {
    height: min(72vh, 680px);
  }
}

/* HOME — BIO / ABOUT-STORE / CONTEXT GALLERY SECTIONS */
.bio-section,
.about-store-section {
  width: 75%;
  margin: 0 auto 3rem;
  padding: 2rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.bio-section h2,
.about-store-section h2,
.context-gallery-section h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--c-text);
}

.bio-section p,
.about-store-section p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.about-store-payments {
  margin-top: 0.75rem !important;
  font-size: 0.9rem;
}
.about-store-payments strong { color: var(--accent-2); font-weight: 600; }

.bio-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.bio-portrait {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}

.bio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bio-text {
  flex: 1;
  min-width: 260px;
}

.home-cta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.home-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.home-cta--primary {
  background: linear-gradient(135deg, #ade700, #4aba8d);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(200, 230, 111, 0.25);
}

.home-cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(200, 230, 111, 0.35);
}

.home-cta--ghost {
  border: 1.5px solid color-mix(in srgb, var(--c-accent) 50%, transparent);
  color: var(--c-accent);
  font-weight: 700;
}

.home-cta--ghost:hover {
  background: color-mix(in srgb, var(--c-accent) 12%, transparent);
  border-color: var(--c-accent);
}

.context-gallery-section {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 4rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.context-gallery-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.context-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.context-photo {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.context-photo:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.context-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.context-photo__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  display: flex;
  align-items: flex-end;
  padding: 0.9rem 1rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-dark) 68%, transparent));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 250ms ease;
}

.context-photo:hover .context-photo__label {
  opacity: 1;
}

.instagram-section {
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 1.5rem;
  text-align: center;
}

.instagram-section h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--c-text);
}

.instagram-section p {
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

.instagram-section p a {
  color: var(--c-accent);
  font-weight: 700;
  text-decoration: none;
}

.instagram-grid {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.instagram-grid a,
.instagram-grid img {
  width: 130px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  object-fit: cover;
  display: block;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  body.home .page-content > section {
    animation: rise-in 1ms linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }
}

body.theme-dark .site-footer {
  background-color: color-mix(in srgb, var(--c-dark) 95%, transparent);
}

body.home .site-footer__name {
  color: #6b7c8f;
}

/* PROFILE SECTION */
.profile-section {
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.profile-container {
  border: 1px solid var(--line);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 243, 0.95));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  padding: 2rem;
}

.profile-container h2 {
  margin: 0 0 1.5rem;
  font-size: 1.8rem;
  font-family: var(--font-display);
  color: var(--text);
}

#profile-content {
  margin-bottom: 1.5rem;
}

.profile-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(94, 201, 153, 0.12);
  color: #2d7a5a;
  border: 1px solid rgba(94, 201, 153, 0.3);
  font-size: 0.85rem;
}

.profile-meta {
  display: grid;
  gap: 0.8rem;
  margin: 1rem 0;
}

.profile-meta p {
  margin: 0;
  color: var(--muted);
}

.logout-action {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 0.95rem 1.15rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #f9f7f2;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(200, 230, 111, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.logout-action:hover {
  transform: translateY(-1px);
  filter: brightness(0.95);
  box-shadow: 0 18px 34px rgba(200, 230, 111, 0.3);
}

/* AUTH FORMS */
#auth-container {
  display: grid;
  gap: 1rem;
}

.auth-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.35rem;
  border-radius: 18px;
  background: rgba(200, 230, 111, 0.06);
  border: 1px solid rgba(200, 230, 111, 0.2);
}

.auth-switcher button {
  border: 0;
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.auth-switcher button.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  box-shadow: 0 12px 24px rgba(200, 230, 111, 0.2);
}

.auth-switcher button:hover {
  transform: translateY(-1px);
}

.auth-form {
  display: grid;
  gap: 0.9rem;
}

.form-title {
  margin: 0;
  font-size: 1.4rem;
  font-family: var(--font-display);
  color: var(--text);
}

.form-subtitle {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.input-grid {
  display: grid;
  gap: 0.8rem;
}

input {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(200, 230, 111, 0.2);
  border-radius: 16px;
  background: rgba(200, 230, 111, 0.04);
  color: var(--text);
  font: inherit;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

input::placeholder {
  color: #98a6c6;
}

input:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(74, 186, 141, 0.1);
}

button.primary-action {
  border: 0;
  border-radius: 16px;
  padding: 0.95rem 1.15rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #f9f7f2;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(200, 230, 111, 0.2);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

button.primary-action:hover {
  transform: translateY(-1px);
  filter: brightness(0.95);
  box-shadow: 0 18px 34px rgba(200, 230, 111, 0.3);
}

button.primary-action:active {
  transform: translateY(0);
}

.status-message {
  min-height: 1.5rem;
  margin: 0;
  font-size: 0.94rem;
}

.status-message.is-success {
  color: var(--success);
}

.status-message.is-error {
  color: var(--danger);
}

/* RESPONSIVE */
@media (max-width: 1152px) {
  .site-nav {
    padding: 0 1rem;
  }

  .site-nav__link {
    padding: 0.4rem 0.7rem;
    font-size: 0.95rem;
  }

  .site-nav__brand img {
    height: 150px;
  }

  body.home {
    --hero-header-h: 100px;
    /* The mobile hero video is a separate, portrait-shot clip (not just
       the desktop video cropped) — give it a tall portrait-shaped box
       instead of inheriting the desktop's ~2:1 landscape height, or the
       portrait footage would get cover-cropped into a short wide frame. */
    --hero-video-h: min(140vw, 680px);
  }

  /* .hero-header__logo has no override here — its height is
     calc(var(--hero-header-h) - 20px), and --hero-header-h is already
     overridden above, so it scales down automatically in step. */

  /* Same breakpoint used for the video source swap in js/home.js — keep in sync */
  .hero-video--desktop {
    display: none;
  }

  .hero-video--mobile {
    display: block;
  }

  .hero-scroll-cue {
    font-size: 0.72rem;
    bottom: 1rem;
  }

  .bio-section,
  .about-store-section {
    padding: 1.5rem;
    border-radius: 24px;
  }

  .context-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Gallery thumbnails: shorter row height on phones so more images fit
     per row instead of 1-2 giant tiles. */
  :root {
    --gallery-row-h: 150px;
    --gallery-gap: 10px;
  }
}

/* Phones (~≤600px): .bio-section/.about-store-section are still 75% wide
   (inherited from the base rule) with 1.5rem padding, which leaves less
   room than .bio-text's 260px min-width — the text was overflowing past
   the container's rounded edge. Narrow the side margin and let the text
   shrink to fit instead of holding a fixed minimum. */
@media (max-width: 600px) {
  .bio-section,
  .about-store-section {
    width: 92%;
  }

  .bio-section {
    flex-direction: column;
  }

  .bio-text {
    min-width: 0;
  }
}

/* Narrow phones (~≤480px): tighten link spacing/padding. This breakpoint
   used to also need a taller --nav-h + wrapped brand text to fit "Patagonia
   en Acuarela" + 3 links on one row — now that the brand is a compact
   logo image instead of a long text string, that no longer applies (kept
   --nav-h at the default; re-add a --nav-h override here if a future logo
   change makes the row cramped again). Global (not body.home-scoped):
   every page shares .site-nav, so this applies everywhere. */
@media (max-width: 480px) {
  .site-nav {
    padding: 0.5rem 0.75rem;
  }

  .site-nav__brand img {
    height: 120px;
  }

  .site-nav__links {
    gap: 0;
  }

  .site-nav__link {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
  }

  :root {
    --gallery-row-h: 110px;
  }
}

/* Very narrow phones (~≤400px, e.g. 320/360/375/390px-wide devices — a
   large share of real phones): even the ≤480px squeeze above still left
   the nav's total content (logo + 3 links + cart icon) wider than the
   viewport, pushing the cart icon off-screen entirely. Compress every
   piece a bit further — global like the ≤480px block above, not
   body.home-scoped, since .site-nav is shared site-wide. */
@media (max-width: 400px) {
  .site-nav {
    padding: 0.4rem 0.5rem;
  }

  .site-nav__brand img {
    height: 85px;
  }

  .site-nav__link {
    padding: 0.3rem 0.35rem;
    font-size: 0.72rem;
  }

  .site-nav .cart-icon-btn {
    width: 30px;
    height: 30px;
    margin-left: 0.3rem;
  }
}

/* ── ARTWORK INFO PANEL ──────────────────────────────────────── */
.artwork-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 290px;
  max-width: 82vw;
  background: rgba(9, 11, 18, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  color: #d8d3ca;
  padding: 2.75rem 1.75rem 2rem;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.artwork-info-panel[aria-hidden="false"] {
  transform: translateX(0);
}


.artwork-info-body {
  margin-top: 0.5rem;
}

.artwork-info-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #f0ece3;
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.artwork-info-author {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  margin: 0 0 0.2rem;
  font-style: italic;
}

.artwork-info-year {
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.85rem;
  margin: 0 0 1.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.artwork-info-meta {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.artwork-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.artwork-info-row[hidden] {
  display: none;
}

.artwork-info-row dt {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.artwork-info-row dd {
  margin: 0;
  font-size: 0.92rem;
  color: #b8b3a9;
  line-height: 1.55;
}

.artwork-info-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.artwork-for-sale {
  background: rgba(94, 201, 153, 0.1);
  color: #5ec999;
  border: 1px solid rgba(94, 201, 153, 0.2);
}

.artwork-info-shop-link {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d4b896;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 200ms, border-color 200ms, color 200ms;
}

.artwork-info-shop-link:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(212, 184, 150, 0.35);
  color: #e8cfb0;
}

/* When panel is open, nav zones must not intercept panel clicks — the panel
   can be wide enough (up to 82vw on mobile) to overlap both sides, and
   navigation is disabled entirely while the panel is open. */
.viewer-overlay.info-panel-open .viewer-prev,
.viewer-overlay.info-panel-open .viewer-next {
  pointer-events: none;
}

/* Info panel toggle: one borderless button opens and closes the panel — a
   single chevron glyph (bare stroke, no circle/backdrop) is rotated per
   breakpoint/state instead of swapping separate "+"/"×" icons. The button
   itself carries generous invisible padding so the tap target stays large
   even though the glyph itself is a thin shape. */
.viewer-info-toggle {
  position: absolute;
  z-index: 2050;
  border: none;
  background: none;
  padding: 1rem;
  margin: -1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9a9a;
  transition: color 200ms,
              right 360ms cubic-bezier(0.4, 0, 0.2, 1),
              bottom 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.viewer-info-toggle:hover {
  color: #c7c7c7;
}

.viewer-info-toggle__glyph {
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop: centered on the right edge of the viewer; slides left to sit
   just outside the panel once it opens (panel is a 290px sidebar). Glyph
   is sized to ~1/6 of the viewer's max image height (min(80vh,840px)) and
   points left (❬) closed / right (❭) open. */
@media (min-width: 601px) {
  .viewer-info-toggle {
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
  }
  .viewer-info-toggle[aria-expanded="true"] { right: calc(290px + 1rem); }

  .viewer-info-toggle__glyph {
    height: min(13.33vh, 140px);
    width: calc(min(13.33vh, 140px) * 0.38);
  }
  .viewer-info-toggle[aria-expanded="true"] .viewer-info-toggle__glyph {
    transform: rotate(180deg);
  }
}

@media (max-width: 600px) {
  .viewer-overlay.info-panel-open {
    padding-right: 0;
    padding-bottom: 54%;
  }

  /* The info sheet covers the bottom 54% of the viewer, right where both
     dot rows would otherwise sit (the horizontal one below the title, the
     vertical one along the image) — hide both while it's open instead of
     letting them float over/under the sheet. */
  .viewer-overlay.info-panel-open .viewer-image-dots,
  .viewer-overlay.info-panel-open .viewer-artwork-dots {
    display: none;
  }

  .artwork-info-panel {
    width: 100%;
    max-width: 100%;
    height: 54%;
    top: auto;
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    transform: translateY(100%);
  }

  .artwork-info-panel[aria-hidden="false"] {
    transform: translateY(0);
  }

  /* Mobile: centered at the bottom; slides up to sit just above the info
     sheet once it opens (sheet is 54% of the viewer height). Glyph is
     sized to ~1/6 of the mobile viewer's max image height
     (min(72vh,680px)) and, rotated 90°, points up (︿) closed / down (﹀)
     open. */
  .viewer-info-toggle {
    left: calc(50% + 16.5px); ;
    bottom: -1rem;
    transform: translateX(-50%);
  }
  .viewer-info-toggle[aria-expanded="true"] { bottom: calc(54% - 4rem); }

  .viewer-info-toggle__glyph {
    height: min(12vh, 113px);
    width: calc(min(12vh, 113px) * 0.38);
    transform: rotate(90deg);
  }
  .viewer-info-toggle[aria-expanded="true"] .viewer-info-toggle__glyph {
    transform: rotate(-90deg);
  }
}

/* ── SHOP ────────────────────────────────────────────────────── */

/* Cart icon button (top right, fixed) */
.cart-icon-btn {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, border-color 200ms, transform 180ms;
}

.cart-icon-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--accent-2);
  transform: scale(1.06);
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent-2);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Page layout */
.shop-page {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

.shop-header {
  text-align: center;
  padding: 0 1.5rem 2.5rem;
}

.shop-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.shop-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
}

/* Filter tabs */
.shop-filters {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 1.5rem 2.5rem;
}

.shop-filter {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.shop-filter:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  border-color: var(--line-strong);
}

.shop-filter.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.shop-subfilters {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0 1.5rem 2.5rem;
  margin-top: -1.5rem;
}

.shop-subfilter {
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}

.shop-subfilter:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.shop-subfilter.active {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}

/* Product grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Loading dots */
.shop-loading {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 0;
}

.shop-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.4;
  animation: shopDotPulse 1.1s ease-in-out infinite;
}

.shop-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.shop-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes shopDotPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1); }
}

/* Product card */
.shop-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 280ms, transform 280ms, border-color 280ms;
}

.shop-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.shop-card--featured {
  grid-column: span 2;
}

.shop-card--highlight {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(74, 186, 141, 0.25), var(--shadow);
}

/* Cover */
.shop-card__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(200, 230, 111, 0.06);
}

.shop-card--featured .shop-card__cover {
  aspect-ratio: 16 / 9;
}

.shop-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms ease;
}

.shop-card:hover .shop-card__cover img {
  transform: scale(1.04);
}

.shop-card__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
}

/* Badges */
.shop-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.shop-card__badge--original {
  background: rgba(173, 231, 0, 0.88);
  color: #2c3e50;
}

.shop-card__badge--derived {
  background: rgba(74, 186, 141, 0.88);
  color: #fff;
}

.shop-card__badge--independent {
  background: rgba(216, 126, 90, 0.88);
  color: #fff;
}

.shop-card__badge--featured {
  left: auto;
  right: 0.75rem;
  background: rgba(20, 22, 28, 0.82);
  color: var(--accent);
}

/* Inline duplicate (see js/shop.js) of the type badge, for the narrow
   breakpoint where it moves out of the cover — hidden by default since
   the cover version is what's used everywhere above that breakpoint. */
.shop-card__badge--inline {
  display: none;
}

/* Body */
.shop-card__body {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.shop-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.shop-card__subtitle {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.shop-card__artwork-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 600;
  transition: color 180ms;
}

.shop-card__artwork-link:hover {
  color: var(--text);
}

.shop-card__desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
  line-height: 1.5;
}

/* Footer */
.shop-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shop-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.shop-card__price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.shop-card__stock {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.shop-card__stock--low {
  background: rgba(174, 231, 0, 0.18);
  color: #5a6e00;
}

.shop-card__stock--out {
  background: rgba(232, 86, 107, 0.12);
  color: var(--danger);
}

/* Action buttons */
.shop-card__actions {
  display: flex;
  gap: 0.5rem;
}

.shop-btn {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: none;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms, color 200ms, transform 150ms, opacity 200ms;
  letter-spacing: 0.02em;
}

.shop-btn:active {
  transform: scale(0.97);
}

.shop-btn--cart {
  background: rgba(200, 230, 111, 0.14);
  color: var(--text);
  border: 1px solid var(--line);
}

.shop-btn--cart:hover:not(:disabled) {
  background: rgba(200, 230, 111, 0.28);
  border-color: var(--accent);
}

.shop-btn--buy {
  background: var(--text);
  color: var(--bg);
}

.shop-btn--buy:hover:not(:disabled) {
  background: var(--accent-2);
  color: #fff;
}

.shop-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.shop-btn--added {
  background: var(--success) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Empty state */
.shop-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 1rem;
}

.shop-empty-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 180ms;
}

.shop-empty-link:hover {
  color: var(--text);
}

/* Responsive */
@media (max-width: 900px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .shop-card--featured {
    grid-column: span 1;
  }

  /* Two normal-size cards per row on phone widths, not one giant card. */
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }

  .shop-card__body {
    padding: 0.9rem 0.9rem 0.75rem;
    gap: 0.3rem;
  }

  .shop-card__title {
    font-size: 1rem;
  }

  .shop-card__price {
    font-size: 1.15rem;
  }

  .shop-card__desc {
    display: none; /* not enough room at this width, title+price carry the card */
  }

  /* The "original/derived/independent" type badge (left) and the
     "destacado" badge (right) overlap once the card is half-width —
     drop the less essential "destacado" one rather than shrink both
     into illegibility. */
  .shop-card__badge--featured {
    display: none;
  }

  /* The type badge also moves off the cover at this width — the
     thumbnail is small enough here that the badge was covering a real
     chunk of it. Swap the cover instance for the inline one instead,
     which sits between the description and the price row in normal
     document flow. */
  .shop-card__badge--cover {
    display: none;
  }

  .shop-card__badge--inline {
    display: inline-flex;
    position: static;
    width: fit-content;
  }

  .shop-card__badge {
    font-size: 0.6rem;
    padding: 0.22rem 0.5rem;
  }

  /* Let the stock pill ("ÚLTIMA UNIDAD") drop to its own line instead of
     overflowing the card's right edge next to the price. */
  .shop-card__price-row {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }

  /* Side-by-side "+ Carrito" / "Comprar" don't fit a half-width card at
     this breakpoint — stack them instead of squeezing both into ~150px. */
  .shop-card__actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .shop-card__actions {
    flex-direction: column;
  }
}

/* ── Product detail page ─────────────────────────────────────── */
.product-page {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

.product-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  gap: 0.5rem;
}

.product-error {
  text-align: center;
  padding: 5rem 2rem;
  font-family: var(--font-body);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.83rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
  transition: color 180ms;
}

.product-back-link:hover { color: var(--accent-2); }

.payment-notice {
  padding: 0.9rem 1.2rem;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.payment-notice--success { background: rgba(74, 180, 100, 0.15); border: 1px solid rgba(74, 180, 100, 0.4); color: #7de0a0; }
.payment-notice--pending { background: rgba(212, 184, 150, 0.15); border: 1px solid rgba(212, 184, 150, 0.4); color: #d4b896; }
.payment-notice--failure,
.payment-notice--error   { background: rgba(220, 80, 80, 0.12); border: 1px solid rgba(220, 80, 80, 0.35); color: #e88; }

.product-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* Gallery */
.product-gallery {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.product-gallery__strip {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 76px;
  flex-shrink: 0;
}

.product-gallery__main-area {
  flex: 1;
  min-width: 0;
}

.product-gallery__main {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
}

.product-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

.product-gallery__zoom {
  position: absolute;
  inset: 0;
  background-color: #0a0a0a;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.product-gallery__hint {
  font-size: 0.71rem;
  color: var(--muted);
  text-align: center;
  margin: 0.45rem 0 0;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.product-gallery__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.product-gallery__thumb {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--bg-soft);
  cursor: pointer;
  padding: 0;
  transition: border-color 180ms;
}

.product-gallery__thumb.active,
.product-gallery__thumb:hover { border-color: var(--accent-2); }

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info */
.product-info {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.product-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.product-type-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
}

.product-type-badge--original {
  background: rgba(74, 186, 141, 0.1);
  color: #3a9d75;
  border: 1px solid rgba(74, 186, 141, 0.22);
}

.product-type-badge--derived {
  background: rgba(173, 231, 0, 0.08);
  color: #7a9e00;
  border: 1px solid rgba(173, 231, 0, 0.18);
}

.product-type-badge--independent {
  background: rgba(216, 126, 90, 0.08);
  color: #b86040;
  border: 1px solid rgba(216, 126, 90, 0.18);
}

.product-featured-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  background: rgba(212, 168, 32, 0.1);
  color: #9a7a0a;
  border: 1px solid rgba(212, 168, 32, 0.2);
}

.product-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

.product-author {
  font-size: 0.9rem;
  color: var(--text-muted, #666);
  font-style: italic;
  margin: 0.25rem 0 0;
}

.product-meta {
  font-size: 0.85rem;
  color: var(--muted);
  font-family: var(--font-body);
  margin: 0;
  line-height: 1.5;
}

.product-gallery-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--accent-2);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  transition: color 180ms;
  width: fit-content;
}

.product-gallery-link:hover { color: #3a9d75; }

.product-art-desc {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.7;
  font-family: var(--font-body);
  margin: 0;
}

.product-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  font-family: var(--font-body);
  margin: 0;
}

.product-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0.25rem 0;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.product-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
}

.product-stock {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-stock--out { color: var(--danger); }
.product-stock--low { color: var(--accent-3); }

.product-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.product-btn {
  flex: 1;
  min-width: 140px;
  padding: 0.9rem 1.5rem;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: none;
  transition: background 200ms, opacity 200ms, transform 80ms;
}

.product-btn:active:not(:disabled) { transform: scale(0.98); }
.product-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.product-btn--cart {
  background: rgba(74, 186, 141, 0.1);
  color: var(--accent-2);
  border: 1.5px solid rgba(74, 186, 141, 0.28);
}

.product-btn--cart:hover:not(:disabled) { background: rgba(74, 186, 141, 0.18); }
.product-btn--added { background: rgba(74, 186, 141, 0.2) !important; }

.product-btn--buy {
  background: var(--accent-2);
  color: #fff;
}

.product-btn--buy:hover:not(:disabled) { background: #3a9d75; }

@media (max-width: 768px) {
  .product-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 600px) {
  /* Thumbnails move above the main image (between the back link and the
     enlarged photo) and lay out horizontally, scrollable if there are more
     than fit on screen. */
  .product-gallery { flex-direction: column; }
  .product-gallery__strip {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .product-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .product-actions { flex-direction: column; }
  .product-btn { flex: unset; width: 100%; }
}

/* ── Product fullscreen viewer ───────────────────────────────── */
.pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.pv-overlay--open {
  opacity: 1;
  pointer-events: all;
}

.pv-img-wrap {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.pv-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  user-select: none;
  touch-action: none;
  transition: transform 120ms ease-out;
}

.pv-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms;
  z-index: 10;
}

.pv-close:hover { background: rgba(255, 255, 255, 0.22); }

.pv-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 72px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.8);
  font-size: 2.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 180ms;
  z-index: 10;
}

.pv-nav:hover { background: rgba(255, 255, 255, 0.16); }
.pv-prev { left: 1rem; }
.pv-next { right: 1rem; }

.pv-counter {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/* ── Related publications ─────────────────────────────────────── */
.product-related {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.product-related__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

.product-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.25rem;
}

.product-related__card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 250ms, transform 250ms, border-color 250ms;
}

.product-related__card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.product-related__cover {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-soft);
}

.product-related__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}

.product-related__card:hover .product-related__cover img { transform: scale(1.04); }

.product-related__no-img {
  width: 100%;
  height: 100%;
  background: var(--line);
}

.product-related__body {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.product-related__type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
}

.product-related__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  font-weight: 500;
}

.product-related__price {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0.2rem 0 0;
}

/* ── Checkout page ──────────────────────────────────────────── */
.checkout-page { padding: 2rem 1.5rem; max-width: 1000px; margin: 0 auto; }

.checkout-loading {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  padding: 4rem 0;
}

.checkout-not-found { text-align: center; padding: 4rem 0; color: var(--text-muted); }

.checkout-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 720px) {
  .checkout-layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* Summary (left) */
.checkout-summary { position: sticky; top: 2rem; }

@media (max-width: 720px) {
  /* Single-column layout: the summary sits above the form in the DOM —
     sticky here would pin it over the form while scrolling. Let it scroll
     away normally instead. This has to come after the base rule above to
     win the cascade at equal specificity. */
  .checkout-summary { position: static; }
}
.checkout-back { display: inline-block; margin-bottom: 1.25rem; }
.checkout-summary__cover {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  aspect-ratio: 1;
  margin-bottom: 1rem;
}
.checkout-summary__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-summary__type {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 0.3rem;
}
.checkout-summary__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text);
  margin: 0 0 0.35rem;
}
.checkout-summary__meta { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 0.6rem; }
.checkout-summary__price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-2);
}

/* Form section (right) */
.checkout-form-section__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  margin: 0 0 1.5rem;
}
.checkout-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.checkout-legend {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  width: 100%;
}
.checkout-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 480px) { .checkout-fields { grid-template-columns: 1fr; } }
.checkout-field { display: flex; flex-direction: column; gap: 0.3rem; }
.checkout-field--full { grid-column: 1 / -1; }
.checkout-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.checkout-label span { color: #f87171; }
.checkout-input {
  background: #fff;
  border: 1px solid rgba(44,62,80,0.25);
  border-radius: 6px;
  color: var(--text);
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.checkout-input:hover { border-color: rgba(44,62,80,0.45); }
.checkout-input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(74,186,141,0.15); }
.checkout-input--error { border-color: #e05252 !important; }
.checkout-input::placeholder { color: rgba(44,62,80,0.3); }
.checkout-error {
  font-size: 0.82rem;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  color: #b91c1c;
  background: rgba(220,38,38,0.07);
  border: 1px solid rgba(220,38,38,0.25);
}
.checkout-submit-row {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.checkout-submit-row .checkout-submit {
  flex: 1;
  width: auto;
}
.checkout-submit {
  background: var(--accent-2);
  color: #09111f;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.15s, opacity 0.15s;
  letter-spacing: 0.02em;
}
.checkout-submit:hover:not(:disabled) { background: #c9a87e; }
.checkout-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.checkout-submit__mp-logo {
  /* The full MP lockup (icon + "mercado pago" wordmark) reads as an
     illegible blob below ~30px tall — verified by rendering the source
     SVG at several sizes. Give it room instead of shrinking it further. */
  height: 30px;
  width: auto;
  display: block;
}
.checkout-submit--transfer {
  color: #fff;
}

/* ── Checkout overlay (shipping form) ───────────────────────── */
.co-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.co-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.co-panel {
  background: #111827;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}
.co-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.co-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f3f4f6;
  margin: 0;
}
.co-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
}
.co-close:hover { color: #f3f4f6; }
.co-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.co-legend {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 0.75rem;
  width: 100%;
}
.co-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.co-fieldset { grid-column: 1 / -1; }
.co-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
  grid-column: span 1;
}
.co-row--full { grid-column: 1 / -1; }
.co-label {
  font-size: 0.8rem;
  color: #9ca3af;
  font-weight: 500;
}
.co-label span { color: #f87171; }
.co-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #f3f4f6;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.co-input:focus { outline: none; border-color: #d4b896; }
.co-input--error { border-color: #f87171 !important; }
.co-input::placeholder { color: #4b5563; }
.co-error, .co-net-error {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.co-error { color: #fca5a5; background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3); }
.co-net-error { color: #fca5a5; background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3); }
.co-submit {
  grid-column: 1 / -1;
  background: #d4b896;
  color: #09111f;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s, opacity 0.15s;
  margin-top: 0.25rem;
}
.co-submit:hover:not(:disabled) { background: #c9a87e; }
.co-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Checkout cart mode ─────────────────────────────────────────── */
.checkout-cart-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.checkout-cart-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.checkout-cart-item__img {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.checkout-cart-item__img--empty { background: rgba(0,0,0,0.06); }
.checkout-cart-item__name {
  margin: 0 0 0.15rem;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.checkout-cart-item__price {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.checkout-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.checkout-qty-btn {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(44,62,80,0.25);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.checkout-qty-btn:hover { background: rgba(44,62,80,0.08); }
.checkout-qty-val {
  min-width: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text);
}
.checkout-cart-item__unique {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
.checkout-stock-warn {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e05252;
}
.checkout-cart-item__remove {
  border: none;
  background: none;
  color: rgba(44,62,80,0.35);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.checkout-cart-item__remove:hover { color: #e05252; background: rgba(224,82,82,0.1); }
.checkout-continue-shopping {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 500;
}
.checkout-continue-shopping:hover { text-decoration: underline; }

.checkout-unavailable-warn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #fca5a5;
}
.checkout-unavailable-warn strong { display: block; margin-bottom: 0.35rem; color: #f87171; }
.checkout-unavailable-warn ul { margin: 0; padding-left: 1.1rem; }
.checkout-unavailable-warn li { margin: 0.15rem 0; }

/* ── Gracias page ───────────────────────────────────────────── */
.gracias-card {
  text-align: center;
  max-width: 480px;
  width: 100%;
  padding: 3rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.gracias-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 1.25rem;
  color: var(--accent-2);
}
.gracias-icon--pending { color: #f5c842; }
.gracias-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 500;
  color: var(--accent-2);
  margin: 0 0 0.75rem;
}
.gracias-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.gracias-details {
  text-align: left;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
  margin-bottom: 2rem;
}
.gracias-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
}
.gracias-label { color: var(--muted); }
.gracias-value { color: var(--text); font-weight: 500; text-align: right; }
.gracias-order {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.gracias-notice {
  margin: 0 0 1.75rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #b91c1c;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
.gracias-notice__link {
  color: inherit;
  text-decoration: underline;
}
.gracias-notice__link:hover { color: #8f1414; }
.gracias-btn {
  display: inline-block;
  padding: 0.7rem 2rem;
  background: var(--accent-2);
  color: #fff;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}
.gracias-btn:hover { background: #3da87d; }

/* ── Cart drawer ────────────────────────────────────────────────── */
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.cart-overlay--open { display: block; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  width: 380px;
  max-width: 95vw;
  background: #0f1a2e;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}
.cart-drawer--open { transform: translateX(0); }

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: #f0ece3;
  margin: 0;
}
.cart-drawer__count {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
}
.cart-drawer__close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.cart-drawer__close:hover { background: rgba(255, 255, 255, 0.14); color: #f0ece3; }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cart-drawer__body::-webkit-scrollbar { width: 4px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 0;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}
.cart-empty p { margin: 0; font-size: 0.95rem; }
.cart-empty__link {
  color: var(--accent-2);
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 500;
}
.cart-empty__link:hover { text-decoration: underline; }

.cart-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cart-item:last-child { border-bottom: none; }

.cart-item__img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.cart-item__img--empty { background: rgba(255, 255, 255, 0.06); }

.cart-item__info {
  flex: 1;
  min-width: 0;
}
.cart-item__name {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #f0ece3;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cart-item__price {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cart-qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cart-qty-btn:hover { background: rgba(255, 255, 255, 0.12); }
.cart-qty-val {
  min-width: 20px;
  text-align: center;
  font-size: 0.875rem;
  color: #f0ece3;
}
.cart-item__unique {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
.cart-stock-warn {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ff6b6b;
}

.cart-item__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cart-item__remove {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.cart-item__remove:hover { color: #f56565; background: rgba(245, 101, 101, 0.1); }

.cart-drawer__foot {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-total__label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}
.cart-total__amount {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f0ece3;
}
.cart-checkout-btn {
  display: block;
  text-align: center;
  padding: 0.8rem 1rem;
  background: var(--accent-2);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.cart-checkout-btn:hover { background: #3da87d; transform: translateY(-1px); }
.cart-continue-btn {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.cart-continue-btn:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.cart-shop-btn {
  display: block;
  text-align: center;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s;
}
.cart-shop-btn:hover { background: rgba(255, 255, 255, 0.12); }
.cart-multi-note {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  line-height: 1.5;
}
.cart-clear-btn {
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: center;
  padding: 0.25rem;
  transition: color 0.15s;
}
.cart-clear-btn:hover { color: #f56565; }

/* ── Site Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: #09111f;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  padding: 2.5rem 2rem 1.5rem;
  margin-top: 4rem;
}
.site-footer__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.site-footer__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #f0ece3;
  letter-spacing: 0.05em;
}
.site-footer__location {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}
.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: center;
}
.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s;
}
.site-footer__link:hover { color: var(--accent-2); }
.site-footer__payments {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}
.site-footer__mp-logo {
  height: 18px;
  width: auto;
  display: block;
}
.site-footer__copy {
  max-width: 900px;
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.22);
  text-align: center;
}
@media (max-width: 520px) {
  .site-footer__inner { flex-direction: column; gap: 1.5rem; }
  .site-footer { padding: 2rem 1.25rem 1.25rem; }
}

/* Footer al fondo en páginas cortas (galería, etc.) */
body:not(.home) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:not(.home) .page-content {
  flex: 1;
}