/* =========================================================
   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 */
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; }
.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; }

.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; }

.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; }
}
.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%; }
.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%); }
.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); }

/* Rejilla de la colección: se adapta al nº de productos */
.shop__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: clamp(1.5rem,3vw,2.5rem); justify-content: center; }
.shop__grid .product-card { max-width: none; }

/* 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 "Agotado". 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;
  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; }

/* =========================================================
   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 aparece cuando el producto tiene sizeLinks
   (un Payment Link distinto por talla, con su propio stock en Stripe). */
.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); }

.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); }

/* 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); }
.care-list 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
   ========================================================= */
@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; }
}