/* =========================================================
   MOSS CHILD — main.css
   Editorial · minimal · premium streetwear
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --paper:      #EFE6D4;   /* pergamino */
  --paper-2:    #E7DBC4;   /* pergamino sombra */
  --ink:        #17130F;   /* tinta negra cálida */
  --ink-soft:   #4a4038;
  --vermillion: #C0271D;   /* bermellón sellado */
  --vermillion-2:#9c1c14;
  --amber:      #E08A2B;   /* loto */
  --line:       rgba(23,19,15,0.14);

  --font-display: "Fraunces", Georgia, serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-deva:    "Noto Serif Devanagari", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1500px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 0.98; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* paper grain overlay */
/* La cinta inclinada y los rayos del hero sobresalen unos píxeles por los
   lados. En móvil, el overflow del body no basta: el navegador ensancha la
   página y deja moverla de lado. `clip` corta sin crear una zona de scroll,
   así que no rompe el sticky de la galería. */
main { overflow-x: clip; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 1rem 1.9rem; border-radius: 100px;
  transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.96); }
.btn--solid { background: var(--vermillion); color: var(--paper); }
.btn--solid:hover { background: var(--vermillion-2); transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(192,39,29,.6); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-3px); }
.btn--block { width: 100%; }

/* =========================================================
   Header (aviso envíos + nav, fijos juntos)
   ========================================================= */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

.ship-banner {
  background: var(--ink); color: var(--paper);
  text-align: center; overflow: hidden;
  max-height: 44px; transition: max-height .5s var(--ease), padding .5s var(--ease), opacity .4s var(--ease);
}
/* Mismo motivo que en .marquee__dot, aquí por el lápiz ✎. */
.ship-banner p {
  padding: .65rem var(--pad); font-size: .78rem; letter-spacing: .02em;
  white-space: normal; font-variant-emoji: text;
}
.ship-banner strong { color: var(--amber); font-weight: 600; }
/* El aviso completo solo cabe en una línea en pantallas anchas; si no, el
   max-height de arriba lo cortaba a media frase. Por debajo, la versión corta. */
.ship-banner__long { display: none; }
@media (min-width: 1400px) {
  .ship-banner__long { display: inline; }
  .ship-banner__short { display: none; }
}
.ship-banner a { text-decoration: underline; text-underline-offset: 2px; transition: color .3s; }
.ship-banner a:hover { color: var(--amber); }
.site-header.is-scrolled .ship-banner { max-height: 0; padding: 0; opacity: 0; }

.nav {
  position: relative; z-index: 100;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s;
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--pad);
  transition: padding .5s var(--ease);
}
.nav.is-scrolled { background: rgba(239,230,212,.82); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 var(--line); }
.nav.is-scrolled .nav__inner { padding-top: .9rem; padding-bottom: .9rem; }

/* offset para que los anclajes no queden bajo el header fijo */
#coleccion, #proceso, #contacto { scroll-margin-top: 90px; }

.nav__brand { display: flex; align-items: center; gap: .7rem; }
.nav__mark { width: 38px; height: 38px; object-fit: contain; transition: transform .6s var(--ease); }
.nav__brand:hover .nav__mark { transform: rotate(-8deg) scale(1.08); }
.nav__word { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: .18em; white-space: nowrap; }

.nav__links { display: flex; gap: 2.4rem; }
.nav__links a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; position: relative; padding: .3rem 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--vermillion);
  transition: width .45s var(--ease);
}
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: .6rem; }

/* Redes: círculos solo con icono, alineados con los enlaces del menú. */
.nav__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink); flex-shrink: 0;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.nav__social:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.nav__social svg { display: block; }

/* Botón del carrito (lo añade main.js en las páginas con catálogo) */
.nav__cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); flex-shrink: 0;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.nav__cart:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.nav__cart svg { display: block; }
.nav__cart-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 100px; background: var(--vermillion); color: var(--paper);
  font-size: .66rem; font-weight: 600; line-height: 18px; text-align: center;
}
.nav__cart-count[hidden] { display: none; }

.nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 11px 8px; }
.nav__burger span { width: 26px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* mobile menu */
.menu {
  /* El menú va DEBAJO de la cabecera (100) a propósito, para que el botón ☰
     siga visible y pueda cerrarlo. Por eso el padding superior tiene que
     dejar libre la altura de la cabecera (unos 123px): sin él, al girar el
     móvil los enlaces centrados caían bajo la cabecera y esta se comía el
     toque. El overflow-y garantiza que se llegue a todos aunque no quepan. */
  position: fixed; inset: 0; z-index: 90; background: var(--paper);
  padding: 8.5rem 1.5rem 2rem; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
  justify-content: center;
  /* `safe`: si el contenido no cabe, se alinea al principio en vez de
     centrarse. Sin esto lo que sobra se desborda TAMBIÉN por arriba y los
     primeros enlaces quedan bajo la cabecera, fuera de alcance. Los
     navegadores que no lo entiendan se quedan con la línea de arriba. */
  justify-content: safe center;
  opacity: 0; transition: opacity .5s var(--ease);
}
/* IMPORTANTE: cuando está oculto NO debe capturar clics.
   La regla .menu (display:flex) gana al atributo [hidden]; hay que forzar el none. */
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.menu__links a { font-family: var(--font-display); font-size: 2.4rem; padding: .2rem 1rem; }
/* Móvil en horizontal: apenas hay alto. Los enlaces pasan a una fila, que
   cabe de sobra, en vez de apilarse y desbordar bajo la cabecera. */
@media (max-height: 460px) {
  .menu { gap: 1rem; padding-top: 8rem; }
  .menu__links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .6rem 1.8rem; }
  .menu__links a { font-size: 1.5rem; }
}
/* Redes dentro del menú: en móvil salen de la cabecera para dejar sitio al
   logo y al carrito (ver Responsive). */
.menu__social { display: flex; gap: .8rem; }
.menu__social .nav__social { width: 44px; height: 44px; }
.menu__foot { font-family: var(--font-deva); letter-spacing: .1em; color: var(--ink-soft); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem var(--pad) 4rem; z-index: 2;
}
.hero__rays {
  position: absolute; inset: -30% -10%; z-index: -1;
  background:
    repeating-conic-gradient(from 0deg at 50% 42%,
      rgba(192,39,29,.10) 0deg 5deg, transparent 5deg 10deg);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 62%);
}
/* `margin: auto` (no `0 auto`) para que absorba el espacio libre del hero y
   quede centrado dejando la cuenta atrás arriba. */
.hero__content { position: relative; max-width: var(--maxw); margin: auto; width: 100%; }
.hero__eyebrow {
  font-family: var(--font-deva); letter-spacing: .18em; color: var(--vermillion);
  font-size: clamp(.8rem, 1.4vw, 1rem); margin-bottom: 1.4rem;
}
.hero__title {
  /* el `min(...,26vh)` impide que en pantallas anchas pero bajas el título
     se coma todo el alto y empuje los botones fuera de la primera pantalla */
  font-size: clamp(4.5rem, min(20vw, 26vh), 20rem); font-weight: 500; letter-spacing: -.02em;
  display: flex; flex-direction: column; line-height: .82;
}
.hero__title span { display: block; }
.hero__slogan {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.3rem, 3.5vw, 2.6rem); margin-top: 1.6rem; color: var(--ink-soft);
}
/* Cuenta atrás de la portada: protagonista, centrada y anclada arriba,
   justo debajo de la cabecera fija. */
.hero__countdown {
  /* En flujo normal, no absoluta: así nunca se solapa con el título, pase
     lo que pase con la altura de la pantalla. El .hero es flex en columna y
     .hero__content lleva `margin: auto`, que se come el espacio sobrante y
     empuja esta cuenta atrás arriba del todo. */
  position: relative; z-index: 3; text-align: center;
  padding: 0 var(--pad); margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.hero__countdown[hidden] { display: none; }
.hero__countdown-label {
  font-size: clamp(.72rem, 1.5vw, .85rem); letter-spacing: .2em;
  text-transform: uppercase; color: var(--vermillion); margin-bottom: .8rem;
}
.hero__countdown-units { display: flex; justify-content: center; gap: clamp(1.1rem, 4vw, 2.6rem); }
.hero__countdown-units span { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.hero__countdown-units b {
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(2.4rem, 8vw, 4.5rem); color: var(--ink);
}
.hero__countdown-units i {
  font-style: normal; font-size: clamp(.62rem, 1.3vw, .75rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

.hero__mascot {
  position: absolute; right: clamp(-2rem, 2vw, 4rem); bottom: 3rem; z-index: -1;
  width: clamp(140px, 22vw, 340px); opacity: .95;
}
.hero__mascot-img { width: 100%; height: auto; display: block; }

/* Ojos de la mascota: no son una "pupila" pintada encima — son un círculo del
   mismo color y grano que el fondo real del Hero (--paper + el mismo ruido de
   body::before), del tamaño del hueco original relleno en mark-body-blind.png.
   Al moverse, imitan visualmente un hueco real desplazándose. */
.mascot-eye {
  position: absolute; width: 5.8%; aspect-ratio: 1; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    var(--paper);
  pointer-events: none;
  transform: translate(calc(-50% + var(--ex, 0px)), calc(-50% + var(--ey, 0px)));
  transition: transform .1s linear;
}
.mascot-eye--left { left: 40.7%; top: 41.6%; }
.mascot-eye--right { left: 59.4%; top: 41.7%; }
@media (prefers-reduced-motion: reduce) { .mascot-eye { transition: none; } }
/* =========================================================
   Cinta marquee
   ========================================================= */
.marquee {
  position: relative; z-index: 2; overflow: hidden;
  background: var(--ink); color: var(--paper);
  transform: rotate(-1.2deg) scale(1.03);
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.marquee__track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; }
.marquee__group span {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.5rem); padding: .7rem 1.2rem;
}
/* font-variant-emoji refuerza el U+FE0E del HTML: sin esto, Android e iOS
   sustituyen el ✳ por su emoji de color y se comen el bermellón. */
.marquee__dot { font-family: var(--font-sans) !important; font-style: normal !important; color: var(--vermillion); font-size: 1rem !important; font-variant-emoji: text; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* =========================================================
   Reveal word (utilidad reutilizable)
   ========================================================= */
.reveal-word {
  display: inline-block; opacity: 0; transform: translateY(.5em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-word.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Slider deslizable (reutilizable: galería de producto y editorial)
   ========================================================= */
.slider { position: relative; }
.slider__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* pan-x A SECAS dejaba al dedo sin poder bajar la página cuando estaba
     encima del carrusel (y este ocupa toda la pantalla). Con las dos, el
     navegador decide según hacia dónde arranque el gesto. */
  touch-action: pan-x pan-y; overscroll-behavior-x: contain;
  cursor: grab; user-select: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.slider__slide { flex: 0 0 100%; scroll-snap-align: center; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.slider__dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.2rem; }
.slider__dots span {
  width: 22px; height: 3px; border-radius: 2px; background: var(--line); cursor: pointer;
  transition: background .4s var(--ease);
}
.slider__dots span.is-active { background: var(--vermillion); }
.slider__dots--light span { background: rgba(239,230,212,.35); }
.slider__dots--light span.is-active { background: var(--paper); }

/* Flechas del slider */
.slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(239,230,212,.9); color: var(--ink); border-radius: 50%;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); backdrop-filter: blur(4px);
  transition: background .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.slider__arrow:hover { background: var(--vermillion); color: var(--paper); }
.slider__arrow--prev { left: 1rem; }
.slider__arrow--next { right: 1rem; }
.slider__arrow--prev:hover { transform: translateY(-50%) scale(1.08) translateX(-2px); }
.slider__arrow--next:hover { transform: translateY(-50%) scale(1.08) translateX(2px); }
@media (max-width: 560px) { .slider__arrow { width: 40px; height: 40px; font-size: 1.3rem; } }

/* Editorial full-bleed */
.editorial { position: relative; z-index: 2; }
.editorial--full {
  min-height: clamp(560px, 82svh, 880px); display: flex; align-items: flex-end; overflow: hidden;
  color: var(--paper);
}
.editorial__bg { position: absolute; inset: 0; z-index: -1; }
.editorial__bg .slider__track { height: 100%; }
.editorial__bg .slider__slide { height: 100%; }
.editorial__bg .slider__slide img { object-position: 50% 40%; }
/* Foto con lo importante abajo (el colgante): se encuadra hacia la parte
   inferior, dejando el colgante en la mitad inferior del marco */
.editorial__bg .slider__slide img.editorial__img--bottom { object-position: 50% 82%; }
.editorial--full::after { content:""; position:absolute; inset:0; z-index:0; pointer-events: none; background: linear-gradient(0deg, rgba(20,15,12,.85) 0%, rgba(20,15,12,.15) 55%, rgba(20,15,12,.35) 100%); }
/* Carrusel sin texto encima: solo una sombra suave abajo para que se vean los puntos */
.editorial--plain::after { background: linear-gradient(0deg, rgba(20,15,12,.45) 0%, rgba(20,15,12,0) 30%); }
.editorial--full .slider__dots { position: absolute; right: var(--pad); bottom: var(--pad); z-index: 2; margin-top: 0; }
.editorial__overlay { position: relative; z-index: 1; padding: var(--pad); max-width: 900px; }
.editorial__label { text-transform: uppercase; letter-spacing: .22em; font-size: .82rem; color: var(--amber); margin-bottom: 1rem; }
.editorial__title { font-size: clamp(3rem, 11vw, 9rem); font-weight: 500; letter-spacing: -.02em; }
.editorial__desc { margin-top: 1.4rem; max-width: 44ch; font-size: clamp(1rem, 1.6vw, 1.25rem); opacity: .85; }

/* =========================================================
   Divider
   ========================================================= */
.divider {
  display: block; width: min(280px, 52%); margin: 0 auto; padding: clamp(.8rem,2vw,1.3rem) 0;
  opacity: .5; position: relative; z-index: 2;
}

/* =========================================================
   Shop — producto destacado
   ========================================================= */
.shop { padding: clamp(2.5rem,6vw,4rem) var(--pad) clamp(4rem,9vw,7rem); max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.shop__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; margin-bottom: clamp(1.8rem,4vw,3rem); }
.shop__title { font-size: clamp(2.8rem, 8vw, 6rem); }
.shop__note { text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; color: var(--vermillion); }

/* Colección: una fila para las piezas sueltas y otra para los packs
   (main.js pone --n = nº de tarjetas de la fila). En ordenador cada fila
   cabe entera en una línea; por debajo de 1024px se desliza en horizontal,
   con la siguiente tarjeta asomando para que se vea que hay más. */
.shop__grid { display: flex; flex-direction: column; gap: clamp(1.5rem,3vw,2.5rem); }
.shop__row {
  display: grid; gap: clamp(1rem,2.5vw,2.5rem); justify-content: center;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 340px));
}
.shop__grid .product-card { max-width: none; }
@media (max-width: 1023px) {
  .shop__row {
    grid-template-columns: none; grid-auto-flow: column; justify-content: start;
    grid-auto-columns: min(42%, 340px);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* la fila llega hasta los bordes de la pantalla; las tarjetas siguen
       alineadas con el resto de la página */
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    /* hueco para la sombra y el salto del hover, que el scroll recortaría */
    padding-block: .5rem 1.5rem; margin-block: -.5rem -1.5rem;
  }
  .shop__row::-webkit-scrollbar { display: none; }
  .shop__row .product-card { scroll-snap-align: start; }
}
@media (max-width: 600px) { .shop__row { grid-auto-columns: 78%; } }

/* Estados de stock (opcionales; se activan poniendo status en products.js) */
/* Sin filtro de color: la foto se ve igual en la colección que en la ficha,
   tanto en "Próximamente" como en "Sold out". Del estado informa la etiqueta. */
.product-card__hint--soldout { background: var(--ink); opacity: 1; transform: none; }
.product-card__hint--soon { background: var(--amber); color: var(--ink); opacity: 1; transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; background: var(--vermillion); }

/* Tarjeta de producto — un solo rectángulo (la foto) con texto superpuesto */
.product-card {
  display: block; width: 100%; max-width: 360px; margin: 0; container-type: inline-size;
  position: relative; overflow: hidden; border-radius: 6px; cursor: pointer;
  aspect-ratio: 4/5; background: var(--paper-2); box-shadow: 0 1px 0 var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -25px rgba(0,0,0,.35); }
.product-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.product-card:hover .product-card__img { transform: scale(1.05); }
.product-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 2.6rem 1.4rem 1.3rem; color: var(--paper);
  background: linear-gradient(0deg, rgba(20,15,12,.8) 0%, rgba(20,15,12,.35) 55%, transparent 100%);
}
.product-card__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; }
.product-card__price { font-family: var(--font-display); font-size: 1.2rem; white-space: nowrap; }
.product-card__hint {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  background: var(--vermillion); color: var(--paper);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  padding: .42rem .85rem; border-radius: 100px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.product-card:hover .product-card__hint { opacity: 1; transform: none; }
/* tarjeta estrecha (4 en fila o pantallas medianas): nombre y precio
   uno encima del otro para que los nombres largos no empujen el precio */
@container (max-width: 320px) {
  .product-card__overlay { flex-direction: column; align-items: flex-start; gap: .2rem; padding: 2.2rem 1rem 1rem; }
  .product-card__name { font-size: 1.15rem; overflow-wrap: anywhere; }
  .product-card__price { font-size: 1rem; }
  .product-card__hint { top: .7rem; right: .7rem; }
}

/* Portada de pack: mini tarjetas de lo que incluye, una sobre otra.
   Con dos van en diagonal; con tres, en pirámide (la primera arriba). */
.pack-collage { position: absolute; inset: 0; display: block; }
.pack-collage__item {
  position: absolute; width: 50%; aspect-ratio: 4/5; object-fit: cover;
  border: 4px solid var(--paper); border-radius: 4px;
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.45);
  transition: translate .6s var(--ease);
}
.pack-collage--2 .pack-collage__item:nth-child(1) { left: 9%;  top: 5%;  transform: rotate(-5deg); }
.pack-collage--2 .pack-collage__item:nth-child(2) { right: 9%; top: 17%; transform: rotate(4deg); }
.pack-collage--3 .pack-collage__item { width: 40%; }
.pack-collage--3 .pack-collage__item:nth-child(1) { left: 30%; top: 3%;  transform: rotate(-2deg); z-index: 1; }
.pack-collage--3 .pack-collage__item:nth-child(2) { left: 7%;  top: 28%; transform: rotate(-6deg); }
.pack-collage--3 .pack-collage__item:nth-child(3) { right: 7%; top: 28%; transform: rotate(6deg); }
.product-card:hover .pack-collage__item { translate: 0 -3%; }

/* Banner que separa las piezas sueltas de los packs (ocupa toda la fila) */
.shop__banner {
  grid-column: 1 / -1; margin-top: clamp(1rem, 3vw, 2rem);
  background: var(--ink); color: var(--paper); border-radius: 6px;
  padding: 1.4rem 1.6rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.shop__banner-title { font-size: clamp(2rem, 5vw, 3rem); }
.shop__banner-note { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }

/* =========================================================
   Página de producto
   ========================================================= */
/* El hueco superior debe superar la altura de la cabecera fija (aviso +
   nav, unos 123px): si no, la barra se solapa sobre el enlace "← Volver"
   y se queda con el clic. */
.product-page {
  max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2;
  padding: clamp(9rem, 12vh, 11rem) var(--pad) clamp(3rem,7vw,5rem);
}
.product-back {
  display: inline-block; margin-bottom: 2rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  transition: color .3s var(--ease);
}
.product-back:hover { color: var(--vermillion); }

.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.product__gallery {
  border-radius: 6px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.3); position: sticky; top: 120px;
}
.product__gallery .slider__slide { aspect-ratio: 3/4; }
.product__gallery .slider__dots { padding: 1rem 0; }

.product__info { padding-top: .5rem; }

/* Cuenta atrás del lanzamiento (ficha). Ocupa el hueco del selector de
   tallas mientras el drop no está abierto. */
.countdown {
  border: 1px solid var(--line); border-radius: 2px;
  padding: 1.1rem 1rem; margin-bottom: 1.1rem; text-align: center;
}
.countdown[hidden] { display: none; }
.countdown__label {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .7rem;
}
.countdown__units { display: flex; justify-content: center; gap: 1.4rem; }
.countdown__units span { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.countdown__units b { font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--ink); }
.countdown__units i {
  font-style: normal; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* Selector de talla: solo en productos con tallas y solo cuando ya se
   pueden comprar. */
.product__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 1.1rem; }
.product__sizes[hidden] { display: none; }
.size-pill {
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  padding: .75rem 1.3rem; font-size: .92rem; letter-spacing: .04em;
  border-radius: 2px; cursor: pointer; transition: all .25s var(--ease);
}
.size-pill:hover { border-color: var(--ink); }
.size-pill.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* talla sin stock: tachada y sin poder elegirse */
.size-pill.is-soldout, .size-pill.is-soldout:hover {
  border-color: var(--line); color: var(--ink-soft); opacity: .45;
  text-decoration: line-through; cursor: not-allowed;
}

.product__buy { margin-bottom: .7rem; }
.product__size-note { font-size: .8rem; color: var(--ink-soft); text-align: center; margin-bottom: 1.8rem; transition: color .25s var(--ease); }
.product__size-note--error { color: var(--vermillion); }

/* Añadir al carrito (ficha) y tallas de los packs, encima de "Comprar" */
.cart-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.product__pack-sizes { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.product__pack-sizes[hidden] { display: none; }
.product__qty { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.product__qty[hidden] { display: none; }
.cart-add__field {
  display: flex; flex-direction: column; gap: .35rem; flex: 1 1 7rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.cart-add__field--qty { flex: 0 0 5.5rem; }
.cart-add select, .product__pack-sizes select, .product__qty select {
  font: inherit; font-size: .92rem; letter-spacing: .04em; text-transform: none; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: .7rem .8rem;
}
.cart-add select:focus-visible, .product__pack-sizes select:focus-visible, .product__qty select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cart-add__btn { flex-basis: 100%; }
.cart-add__note { flex-basis: 100%; min-height: 1.2em; font-size: .8rem; color: var(--ink-soft); text-align: center; }
.cart-add__note--error { color: var(--vermillion); }
.btn--ghost:disabled:hover { background: transparent; color: var(--ink); border-color: var(--line); }
.product__info .cart-add { margin-bottom: 1.8rem; }

/* details desplegables (cuidados / tallas) */
.product-details { border-top: 1px solid var(--line); }
.product-details:last-of-type { border-bottom: 1px solid var(--line); }
.product-details > summary {
  list-style: none; cursor: pointer; padding: 1.1rem .2rem;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.15rem;
}
.product-details > summary::-webkit-details-marker { display: none; }
.product-details > summary::after {
  content: "+"; color: var(--vermillion); font-size: 1.4rem; line-height: 1;
  transition: transform .3s var(--ease);
}
.product-details[open] > summary::after { transform: rotate(45deg); }
.product-details__body { padding: 0 .2rem 1.6rem; }

.care-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.6rem; }
.care-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.care-list svg { color: var(--vermillion); flex-shrink: 0; margin-top: .1rem; }
.care-list strong { color: var(--ink); }
/* título de cada pieza dentro de los detalles de un pack */
.care-list li.care-list__group {
  margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink);
}
.care-list a, .size-intro a { color: var(--vermillion); text-decoration: underline; text-underline-offset: 2px; }

.size-intro { font-size: .88rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.2rem; }
.size-table-wrap { overflow-x: auto; }
.size-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.size-table th, .size-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
.size-table thead th {
  font-family: var(--font-sans); font-weight: 600; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vermillion);
}
.size-table tbody td:first-child { font-weight: 600; }
.size-table tbody tr:hover { background: rgba(192,39,29,.05); }

.feature__badge {
  display: inline-block; background: var(--vermillion); color: var(--paper);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: .4rem .85rem; border-radius: 100px; margin-bottom: 1.2rem;
}
.feature__name { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: .4rem; }
.feature__code { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem; }
/* Precio y cita: mismo tamaño y tipografía que el título de los desplegables ("Cuidados de lavado") */
.feature__price { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 1.1rem; }
.feature__desc { color: var(--ink-soft); line-height: 1.65; margin-bottom: 1.8rem; max-width: 46ch; }
.feature__desc--quote {
  font-family: var(--font-display); font-weight: 400; font-size: 1.15rem;
  line-height: 1.4; color: var(--ink); margin-bottom: 1.8rem; text-align: center;
}
.feature__desc--quote::before { content: "“"; }
.feature__desc--quote::after { content: "”"; }

/* =========================================================
   Proceso
   ========================================================= */
.process {
  padding: clamp(1rem,2.5vw,1.8rem) var(--pad) clamp(3rem,7vw,5.5rem);
  max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2;
  text-align: center;
}
.process__eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .82rem; color: var(--vermillion); margin-bottom: .8rem; }
.process__title { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: clamp(2rem, 5vw, 3rem); }

.process__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
}
.process__photo { position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 45px -25px rgba(0,0,0,.35); cursor: pointer; }
.process__photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform .8s var(--ease), filter .5s var(--ease); }
.process__photo:hover img, .process__photo.is-active img { transform: scale(1.06); filter: saturate(.75) brightness(.7); }

.process__caption {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.5rem; text-align: center;
  background: linear-gradient(160deg, rgba(192,39,29,.55) 0%, rgba(23,19,15,.7) 100%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.process__photo:hover .process__caption, .process__photo.is-active .process__caption { opacity: 1; }
.process__caption em {
  font-style: normal; font-family: var(--font-sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.process__caption span {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--paper);
  transform: translateY(10px); transition: transform .5s var(--ease);
}
.process__photo:hover .process__caption span, .process__photo.is-active .process__caption span { transform: none; }

/* =========================================================
   Contacto
   ========================================================= */
.contact { position: relative; z-index: 2; padding: clamp(3.5rem,8vw,6rem) var(--pad) clamp(2rem,4vw,3rem); overflow: hidden; background: var(--paper-2); }
.contact__inner { max-width: 560px; margin: 0 auto; text-align: center; position: relative; }
.contact__title { font-size: clamp(2.6rem, 7vw, 4.5rem); margin-bottom: 2.4rem; }
.contact__mark {
  position: absolute; width: clamp(200px, 30vw, 460px); opacity: .08;
  right: -6%; top: 50%; transform: translateY(-50%); z-index: 0; pointer-events: none;
}
.contact__direct { margin-top: .6rem; font-size: .92rem; color: var(--ink-soft); }
.contact__direct a { color: var(--vermillion); text-decoration: underline; text-underline-offset: 2px; }

.contact-form { text-align: left; display: flex; flex-direction: column; gap: 1.3rem; }
.contact-form__field { display: flex; flex-direction: column; gap: .5rem; }
.contact-form__field span { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.contact-form__field input,
.contact-form__field textarea {
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: .9rem 1.1rem; resize: vertical; transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: rgba(74,64,56,.55); }
.contact-form__field input:focus, .contact-form__field textarea:focus {
  outline: none; border-color: var(--vermillion); box-shadow: 0 0 0 3px rgba(192,39,29,.12);
}
.contact-form__hint { min-height: 1.3rem; text-align: center; font-size: .85rem; color: var(--vermillion); display: flex; align-items: center; justify-content: center; gap: .35rem; }
.contact-form__tick { flex-shrink: 0; }

/* =========================================================
   Footer
   ========================================================= */
.footer { padding: clamp(2rem,4vw,2.8rem) var(--pad) 2.5rem; max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.footer__brand { display: flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .14em; }
/* Mismo gesto que .nav__brand: el logo del pie también lleva al inicio. */
.footer__brand img { transition: transform .6s var(--ease); }
.footer__brand:hover img { transform: rotate(-8deg) scale(1.08); }
.footer__nav { display: flex; gap: 2rem; }
.footer__nav a { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; transition: color .3s; }
.footer__nav a:hover { color: var(--vermillion); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.6rem; padding-top: 1.6rem; font-size: .76rem; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; }
.footer__legal { display: flex; gap: 1.2rem; }
.footer__legal a { transition: color .3s; }
.footer__legal a:hover { color: var(--vermillion); }

/* =========================================================
   Páginas legales (privacidad, cookies, aviso legal)
   ========================================================= */
/* Mismo motivo que en .product-page: dejar libre la altura de la cabecera. */
.legal-page {
  max-width: 760px; margin: 0 auto; position: relative; z-index: 2;
  padding: clamp(9rem, 12vh, 11rem) var(--pad) clamp(4rem,8vw,6rem);
}
.legal-page h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: .5rem; }
.legal-lead { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 2.4rem; }
.legal-page h2 {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  margin: 2.2rem 0 .8rem;
}
.legal-page p, .legal-page li { color: var(--ink-soft); line-height: 1.65; margin-bottom: .7rem; }
.legal-page strong { color: var(--ink); }
.legal-page ul { padding-left: 1.3rem; margin-bottom: .7rem; }
.legal-page a { color: var(--vermillion); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   Zonas de pulsación
   ---------------------------------------------------------
   La norma de accesibilidad pide 24px de alto mínimo y varios de estos
   enlaces se quedaban en 14-20. NO van dentro de una consulta de ancho: un
   móvil en horizontal mide más de 800px y se quedaba fuera. El relleno
   vertical en enlaces en línea agranda el área sensible sin mover nada.
   ========================================================= */
.ship-banner a { padding: .6rem 0; }
.contact__direct a { padding: .45rem 0; }
.care-list a { padding: .4rem 0; }
.product-back { padding: .45rem 0; }
.footer__nav a, .footer__legal a { padding: .4rem 0; }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-word { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
/* cabecera: con cinco enlaces y cuatro iconos, por debajo de 1000px no
   caben sin pisarse (el nombre tocaba "Colección") → menú hamburguesa */
@media (max-width: 1180px) { .nav__links { gap: 1.6rem; } }
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__actions { gap: .45rem; }
  .nav__social { width: 32px; height: 32px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
  .product { grid-template-columns: 1fr; }
  /* `relative`, NO `static`: en móvil no queremos que la galería se quede
     pegada al hacer scroll, pero sí que siga siendo la referencia de las
     flechas. Con `static` las flechas se cuelgan de la página entera y se
     van al centro en cuanto se despliega un acordeón. */
  .product__gallery { position: relative; top: auto; }
}
@media (max-width: 560px) {
  /* 8rem = 128px: por debajo de eso la cabecera fija (121px en móvil) tapa
     lo primero del hero, que ahora es la cuenta atrás. */
  .hero { padding-top: 8rem; padding-bottom: 2.5rem; }
  .hero__mascot { opacity: .5; bottom: 6rem; }
  .footer__nav { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .ship-banner p { font-size: .72rem; }
  .process__grid { gap: .5rem; }
  .countdown__units { gap: .9rem; }
  .countdown__units b { font-size: 1.6rem; }
  /* Cabecera: logo, carrito y menú. Las redes pasan al menú; con ellas aquí
     no cabía y "MOSS CHILD" se partía en dos líneas, alargando la cabecera
     hasta tapar lo de debajo. */
  .nav__actions .nav__social { display: none; }
  .nav__inner { padding-top: 1rem; padding-bottom: 1rem; }
  .nav__cart { width: 40px; height: 40px; }
  /* las cinco tallas en una fila */
  .product__sizes { gap: .5rem; }
  .size-pill { padding: .75rem 1rem; }
  /* fotos del proceso en tres columnas estrechas: leyenda más pequeña */
  .process__caption { padding: .6rem; gap: .3rem; }
  .process__caption em { font-size: .58rem; letter-spacing: .1em; }
  .process__caption span { font-size: .85rem; }
}
@media (max-width: 380px) {
  .nav__word { font-size: 1rem; letter-spacing: .14em; }
  .nav__mark { width: 34px; height: 34px; }
  /* nombres largos (MOSSGRAFFITEE) empujaban el precio fuera de la tarjeta */
  .product-card__overlay { padding: 2.2rem 1rem 1rem; gap: .6rem; }
  .product-card__name { font-size: 1.2rem; min-width: 0; overflow-wrap: anywhere; }
  .product-card__price { font-size: 1.05rem; }
}
/* =========================================================
   MURO (muro.html) — pared compartida a pantalla completa
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* la página no se desplaza: el muro ocupa todo bajo la cabecera */
.html-muro, .pagina-muro { height: 100%; overflow: hidden; overscroll-behavior: none; }
.pagina-muro .nav { background: rgba(239,230,212,.92); box-shadow: 0 1px 0 var(--line); }
.pagina-muro .nav__inner { padding-top: .8rem; padding-bottom: .8rem; }

.muro { position: fixed; inset: var(--cab, 72px) 0 0 0; overflow: hidden; background: #cfc6b5; }
.muro__vista { position: absolute; inset: 0; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.muro__vista.is-mover { cursor: grab; }
.muro__vista.is-arrastrando { cursor: grabbing; }
.muro__vista.is-cuentagotas { cursor: copy; }
.muro__lienzo {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  background: #fff; box-shadow: 0 30px 80px -30px rgba(0,0,0,.45);
}
.muro__lienzo.is-pixelado { image-rendering: pixelated; }
.muro__cursor {
  position: absolute; pointer-events: none; transform: translate(-50%, -50%);
  border: 1px solid rgba(23,19,15,.75); box-shadow: 0 0 0 1px rgba(255,255,255,.75); border-radius: 50%;
}
.muro__cursor--rodillo { border-radius: 2px; }

/* avisos arriba, centrados */
.muro__estado, .muro__aviso {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: .4rem .9rem; border-radius: 100px; white-space: nowrap; pointer-events: none;
  font-size: .72rem; letter-spacing: .06em;
}
.muro__estado { top: .8rem; background: rgba(239,230,212,.94); color: var(--ink); box-shadow: 0 6px 20px -10px rgba(0,0,0,.4); }
.muro__aviso { top: 3.1rem; background: var(--ink); color: var(--paper); }

/* barra de herramientas flotante abajo; en móvil se desliza en horizontal */
.muro__barra {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: calc(100% - 1.5rem); overflow-x: auto; scrollbar-width: none;
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  background: rgba(23,19,15,.93); color: var(--paper); border-radius: 16px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
}
.muro__barra::-webkit-scrollbar { display: none; }
.muro__grupo { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.muro__grupo + .muro__grupo { border-left: 1px solid rgba(239,230,212,.18); padding-left: .6rem; }
.muro__btn {
  width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--paper); cursor: pointer;
  transition: background .2s var(--ease);
}
.muro__btn:hover { background: rgba(239,230,212,.12); }
.muro__btn[aria-pressed="true"] { background: var(--vermillion); }
.muro__btn:disabled { opacity: .35; cursor: default; background: none; }
.muro__colores { gap: .35rem; }
.muro__muestra {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(239,230,212,.3);
}
.muro__muestra[aria-pressed="true"] { outline: 2px solid var(--paper); outline-offset: 2px; }
.muro__libre { position: relative; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); border: 2px solid rgba(239,230,212,.3); }
.muro__libre input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.muro__ajuste { display: flex; flex-direction: column; gap: .15rem; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(239,230,212,.75); }
.muro__ajuste input[type="range"] { width: 92px; accent-color: var(--vermillion); }
.muro__ajuste--check { flex-direction: row; align-items: center; gap: .35rem; }
.muro__ajuste--check input { accent-color: var(--vermillion); width: 16px; height: 16px; }
.muro__ajuste[hidden] { display: none; }
.muro__tinta { display: block; width: 92px; height: 8px; margin-top: .35rem; border-radius: 4px; background: rgba(239,230,212,.18); overflow: hidden; }
.muro__tinta span { display: block; height: 100%; width: 100%; background: var(--paper); transition: width .25s linear, background .2s; }
.muro__tinta.is-poca span { background: var(--vermillion); }
.muro__tinta-flota { display: none; }
/* la barra de herramientas no cabe entera: la tinta pasa a una píldora fija arriba a la derecha */
@media (max-width: 1299px) {
  .muro__ajuste--tinta { display: none; }
  .muro__tinta-flota {
    position: absolute; top: .8rem; right: .8rem; z-index: 3; display: flex; align-items: center; gap: .5rem;
    padding: .4rem .8rem; border-radius: 100px; background: var(--ink); color: rgba(239,230,212,.75); pointer-events: none;
    font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  }
  .muro__tinta-flota .muro__tinta { width: 64px; margin-top: 0; }
}
@media (max-width: 560px) {
  /* arriba chocaría con el estado: va justo encima de la barra de herramientas */
  .muro__tinta-flota { top: auto; right: .5rem; bottom: calc(max(.6rem, env(safe-area-inset-bottom)) + 62px); }
}

@media (max-width: 560px) {
  .muro__barra { left: .5rem; right: .5rem; transform: none; max-width: none; bottom: max(.6rem, env(safe-area-inset-bottom)); }
  .muro__btn { width: 38px; height: 38px; }
  .muro__ajuste input[type="range"] { width: 80px; }
  .muro__estado, .muro__aviso { font-size: .66rem; }
}

/* =========================================================
MOSS CHILD — Pantalla de cierre (simple + admin + Discord)
---------------------------------------------------------
VERSIÓN ACTUAL — sustituye cualquier gate-styles.css anterior.
Añade este bloque al FINAL de styles/main.css.
========================================================= */

.gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #ffffff;
  overflow: hidden;
  touch-action: none;
}

body.gate-locked {
  overflow: hidden;
  height: 100vh;
}

.gate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.gate-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--pad);
  pointer-events: none;
}

.gate-mascot {
  width: clamp(90px, 14vw, 160px);
  opacity: .9;
  margin-bottom: 1.4rem;
  filter: grayscale(1) contrast(1.05);
}

.gate-eyebrow {
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 1rem;
}

.gate-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  color: var(--ink);
  line-height: .95;
}

.gate-sub {
  margin-top: 1.2rem;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 32ch;
  line-height: 1.5;
}

.gate-countdown {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 2.2rem;
}

.gate-countdown span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.gate-countdown b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--ink);
  line-height: 1;
}

.gate-countdown i {
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.gate-tools {
  position: absolute;
  bottom: clamp(1.2rem, 4vw, 2.2rem);
  right: clamp(1.2rem, 4vw, 2.2rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .6rem 1rem;
  pointer-events: auto;
}

.gate-color {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: none;
}

.gate-size {
  width: 90px;
  accent-color: var(--vermillion);
}

.gate-clear {
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5rem .9rem;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.gate-clear:hover {
  color: var(--vermillion);
  border-color: var(--vermillion);
}

.gate-discord {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2.4rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: #5865F2;
  border-radius: 100px;
  padding: .95rem 1.8rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}

.gate-discord:hover {
  background: #4752C4;
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -12px rgba(88,101,242,.55);
}

.gate-discord svg {
  flex-shrink: 0;
}

.gate-admin {
  position: absolute;
  bottom: .6rem;
  left: .8rem;
  z-index: 3;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--line);
  font-size: 1.4rem;
  cursor: pointer;
  pointer-events: auto;
  opacity: .4;
}

.gate-admin:hover {
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .gate-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .gate-tools { flex-wrap: wrap; justify-content: center; }
  .gate-discord { font-size: .76rem; padding: .85rem 1.4rem; }
}

/* =========================================================
   Carrito — panel lateral (lo genera main.js)
   ========================================================= */
.cart-panel { position: fixed; inset: 0; z-index: 120; }
.cart-panel[hidden] { display: none; }
.cart-panel__backdrop { position: absolute; inset: 0; background: rgba(20,15,12,.45); opacity: 0; transition: opacity .45s var(--ease); }
.cart-panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column; background: var(--paper);
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.4);
  transform: translateX(100%); transition: transform .45s var(--ease);
}
.cart-panel.is-open .cart-panel__backdrop { opacity: 1; }
.cart-panel.is-open .cart-panel__sheet { transform: none; }
.cart-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--line); }
.cart-panel__title { font-size: 2rem; }
.cart-panel__close { font-size: 1.9rem; line-height: 1; padding: .1rem .5rem; }
.cart-panel__lines { list-style: none; flex: 1; overflow-y: auto; padding: 1.2rem 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
.cart-panel__empty { padding: 2.5rem 0; text-align: center; font-size: .92rem; color: var(--ink-soft); }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; align-items: start; }
.cart-line__img { display: block; width: 64px; aspect-ratio: 4/5; object-fit: cover; border-radius: 4px; background: var(--paper-2); }
.cart-line__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.2; }
.cart-line__sizes, .cart-line__warn { margin-top: .25rem; font-size: .78rem; color: var(--ink-soft); }
.cart-line__warn { color: var(--vermillion); }
.cart-line__qty { display: inline-flex; align-items: center; margin-top: .55rem; border: 1px solid var(--line); border-radius: 2px; }
.cart-line__qty button { width: 30px; height: 28px; font-size: 1rem; }
.cart-line__qty span { min-width: 1.6em; text-align: center; font-size: .85rem; }
.cart-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.cart-line__price { font-family: var(--font-display); white-space: nowrap; }
.cart-line__remove { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.cart-line__remove:hover { color: var(--vermillion); }
.cart-panel__foot { padding: 1.2rem 1.5rem 1.5rem; border-top: 1px solid var(--line); }
.cart-panel__total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .3rem; }
.cart-panel__ship { margin-bottom: 1rem; font-size: .78rem; color: var(--ink-soft); }
.cart-panel__msg { min-height: 1.2em; margin-top: .7rem; text-align: center; font-size: .8rem; color: var(--vermillion); }
.order-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 130; transform: translateX(-50%);
  max-width: calc(100% - 2rem); padding: .9rem 1.4rem; border-radius: 100px;
  background: var(--ink); color: var(--paper); font-size: .85rem; text-align: center;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: reduce) {
  .cart-panel__backdrop, .cart-panel__sheet { transition: none; }
}