/* ═══════════════════════════════════════════════════════════════════════════
   La Reineta · Casa de Cosas  —  sistema "Escaparate"
   ═══════════════════════════════════════════════════════════════════════════

   La dirección de diseño sale del logo real de la tienda, que NO es elegante
   ni clásico: es una manzana roja dibujada a mano, sobre negro, con la
   caligrafía en blanco. Punk artesano, no boutique.

   De ahí las tres decisiones que mandan sobre todo lo demás:

   1. NEGRO DE FONDO en la cabecera, el hero, las franjas y el pie. El resto
      va sobre hueso. La tienda es un escaparate encendido de noche: las
      cosas se ven porque el fondo está apagado.
   2. TITULARES EN MINÚSCULA, en grotesca ancha y muy apretada. Nada de
      versalitas finas con letterspacing, que es el recurso de todas las webs
      de decoración. Aquí el título es un bloque.
   3. LAS SECCIONES SE NUMERAN. 01, 02, 03 en rojo manzana. La web se lee
      como un catálogo impreso, no como una home al uso.

   Y una regla de producto: el precio no es texto, es una PEGATINA roja
   ladeada, como la etiqueta de una tienda de verdad.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* — color — */
  --negro:#0e0d0c;          /* el negro del logo */
  --negro-2:#1a1817;
  --negro-3:#2b2725;
  --hueso:#f2ece2;          /* fondo de las páginas de contenido */
  --hueso-2:#e6ddcd;
  --papel:#fffdfa;
  --tinta:#141110;
  --tinta-2:#4a4340;
  --tinta-3:#857b74;
  --manzana:#e01e1e;        /* el rojo de la manzana */
  --manzana-osc:#b21414;
  --linea:#d9cfbd;
  --linea-osc:rgba(242,236,226,.16);
  --abeto:#123326;
  --oro:#c9a44c;
  --oro-claro:#e8cf94;
  --ok:#2e8b57;

  /* — tipos — */
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --script:"Petit Formal Script",cursive;

  /* — medidas — */
  --wrap:1340px;
  --r:0px;                  /* aquí no se redondea nada: todo cantos vivos */
  --nav-h:70px;
  --sombra:0 18px 44px rgba(14,13,12,.10);
  --sombra-alta:0 30px 90px rgba(14,13,12,.34);
  --tr:.34s cubic-bezier(.2,.8,.25,1);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--hueso);color:var(--tinta);
  font:400 16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;
  line-height:.94;letter-spacing:-.035em;text-transform:lowercase}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
s{color:var(--tinta-3)}
::selection{background:var(--manzana);color:#fff}
:focus-visible{outline:2.5px solid var(--manzana);outline-offset:3px}

.sr,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;margin:0;
  padding:12px 18px;background:var(--manzana);color:#fff;z-index:999}

.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 30px)}}
.dim{color:var(--tinta-3)}
.mt{margin-top:26px}

/* ── la manzana, que es el sistema entero ──────────────────────────────── */
.mz .mz-c{fill:currentColor}
.mz .mz-r{stroke:currentColor;stroke-width:3.6;stroke-linecap:round}
.mz .mz-h{fill:currentColor;opacity:.5}

/* ═══ CABEZA DE SECCIÓN NUMERADA ════════════════════════════════════════
   El patrón que se repite en todo el sitio. El número lo pone un contador
   de CSS, así que no hay que escribirlo a mano en ningún sitio. */
body{counter-reset:sec}
.sec-head{counter-increment:sec;position:relative;margin-bottom:clamp(30px,3.6vw,58px);
  padding-top:26px;border-top:2px solid var(--tinta)}
.sec-head::before{content:counter(sec,decimal-leading-zero);
  position:absolute;top:-6px;right:0;font:800 clamp(46px,7vw,104px)/.8 var(--display);
  letter-spacing:-.06em;color:var(--manzana);opacity:.16;pointer-events:none}
.sec-head--fila{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.sec-head .kicker{margin-bottom:10px}
.h-sec{font-size:clamp(34px,5.4vw,72px);max-width:18ch}
.h-sec em{font-style:normal;color:var(--manzana)}
.kicker{font:600 13px/1 var(--sans);letter-spacing:.02em;color:var(--manzana);
  margin:0 0 12px;text-transform:none}
.kicker--oro{color:var(--oro)}
.kicker--claro{color:rgba(255,255,255,.6)}
.lede{font-size:clamp(16px,1.25vw,18.5px);color:var(--tinta-2);max-width:56ch;line-height:1.68}
.sec{padding:clamp(60px,7.5vw,124px) 0}
.sec--fino{padding:clamp(40px,4.4vw,70px) 0}
.sec--papel{background:var(--papel)}

/* franjas negras: la piel oscura sin cambiar de componente */
.banda{position:relative;background:var(--negro);color:var(--hueso);overflow:hidden}
.banda .sec-head{border-color:var(--linea-osc)}
.banda .sec-head::before{color:var(--manzana);opacity:.34}
.banda h1,.banda h2,.banda h3{color:#fff}
.banda .lede{color:rgba(242,236,226,.7)}
.banda .kicker{color:var(--oro-claro)}
.banda .mas{color:var(--oro-claro)}

.sep{display:flex;align-items:center;gap:16px;margin:clamp(40px,5vw,72px) 0;color:var(--linea)}
.sep__l{flex:1;height:2px;background:currentColor}
.sep__mz{width:24px;color:var(--manzana);flex:none}
.sep__t{font:600 13px/1 var(--sans);color:var(--tinta-2)}

/* ═══ botones ══════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border:2px solid transparent;border-radius:var(--r);
  font:700 14px/1 var(--sans);letter-spacing:-.005em;transition:var(--tr)}
.btn .ico{width:17px;height:17px;stroke-width:2}
.btn--rojo{background:var(--manzana);color:#fff;border-color:var(--manzana)}
.btn--rojo:hover{background:var(--manzana-osc);border-color:var(--manzana-osc)}
.btn--tinta{background:var(--negro);color:#fff;border-color:var(--negro)}
.btn--tinta:hover{background:var(--manzana);border-color:var(--manzana)}
.btn--oro{background:var(--oro);color:#191308;border-color:var(--oro)}
.btn--oro:hover{background:var(--oro-claro);border-color:var(--oro-claro)}
.btn--linea{border-color:var(--tinta);color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--hueso)}
.btn--fantasma{border-color:rgba(255,255,255,.4);color:#fff}
.btn--fantasma:hover{background:#fff;color:var(--negro);border-color:#fff}
.btn--ancho{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}

.lnk{color:inherit;box-shadow:inset 0 -2px 0 var(--manzana);transition:var(--tr)}
.lnk:hover{box-shadow:inset 0 -1.1em 0 var(--manzana);color:#fff}
.mas{display:inline-flex;align-items:center;gap:9px;font:700 14px/1 var(--sans);
  padding-bottom:5px;box-shadow:inset 0 -2px 0 currentColor;transition:var(--tr)}
.mas .ico{width:17px;height:17px;stroke-width:2;transition:var(--tr)}
.mas:hover{color:var(--manzana)}
.mas:hover .ico{transform:translateX(5px)}

.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ═══ marquesina superior ══════════════════════════════════════════════ */
.cinta{background:var(--manzana);color:#fff;overflow:hidden;height:40px;
  display:flex;align-items:center;font:600 13px/1 var(--sans)}
.cinta__pista{display:flex;white-space:nowrap;animation:desliza 46s linear infinite;
  will-change:transform}
.cinta__pista span{display:inline-flex;align-items:center;gap:10px;padding:0 30px;
  border-right:1px solid rgba(255,255,255,.25)}
.cinta__pista .ico{width:16px;height:16px;stroke-width:1.8}
@keyframes desliza{to{transform:translateX(-50%)}}
@media (max-width:640px){.cinta__pista span{padding:0 20px}.cinta__pista{animation-duration:30s}}

/* ═══ cabecera negra ═══════════════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:60;background:var(--negro);color:var(--hueso)}
.nav__in{width:min(100% - 48px,1560px);margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;gap:24px}
.marca{display:flex;align-items:center;gap:12px;flex:none}
.marca img{width:44px;height:44px;object-fit:cover}
.marca__t{display:flex;flex-direction:column;line-height:1}
.marca__t b{font:800 21px/1 var(--display);letter-spacing:-.045em;text-transform:lowercase;color:#fff}
.marca__t i{font:400 12px/1.3 var(--script);color:var(--manzana);font-style:normal}

.nav__l{display:flex;align-items:center;gap:2px;margin-left:14px}
.nav__l>a,.nav__drop>a{display:block;padding:10px 14px;
  font:600 15px/1 var(--sans);letter-spacing:-.01em;color:rgba(242,236,226,.82);transition:var(--tr)}
.nav__l>a:hover,.nav__drop>a:hover,.nav__l>a.on,.nav__drop>a.on{color:#fff}
.nav__nav{color:#fff!important}
.nav__nav .nav__nav-txt{position:relative;display:inline-block;
  background:var(--manzana);padding:6px 11px;margin:-6px 0;transition:var(--tr)}
.nav__nav:hover .nav__nav-txt{background:#fff;color:var(--manzana)}

/* mega menú */
.nav__drop{position:relative}
.mega{position:absolute;top:100%;left:-20px;width:min(94vw,980px);
  background:var(--negro-2);border:1px solid var(--linea-osc);box-shadow:var(--sombra-alta);
  padding:36px 40px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:var(--tr);z-index:70}
.nav__drop:hover .mega,.nav__drop:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.mega__h{display:flex;align-items:baseline;gap:9px;font:800 19px/1.05 var(--display);
  letter-spacing:-.035em;color:#fff;
  padding-bottom:12px;margin-bottom:12px;border-bottom:2px solid var(--linea-osc)}
.mega__h span{font:600 12px/1 var(--sans);color:var(--manzana);letter-spacing:0}
.mega__h:hover{color:var(--manzana)}
.mega li a{display:block;padding:6px 0;font-size:14.5px;color:rgba(242,236,226,.62);transition:var(--tr)}
.mega li a:hover{color:#fff;transform:translateX(4px)}
.mega__col--nav{background:var(--manzana);margin:-36px -40px -36px 0;padding:36px 30px}
.mega__col--nav .mega__h{color:#fff;border-color:rgba(255,255,255,.3)}
.mega__col--nav .mega__h span{color:#fff;opacity:.7}
.mega__col--nav li a{color:rgba(255,255,255,.82)}
.mega__col--nav li a:hover{color:#fff}
.mega__cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font:700 13px/1 var(--sans);color:#fff;box-shadow:inset 0 -2px 0 #fff;padding-bottom:4px}
.mega__cta .ico{width:15px;height:15px}

.nav__acc{display:flex;align-items:center;gap:8px;margin-left:auto}
.busca{display:flex;align-items:center;border:1.5px solid rgba(242,236,226,.24);
  background:transparent;transition:var(--tr)}
.busca:focus-within{border-color:var(--manzana)}
.busca input{width:140px;padding:9px 13px;border:0;background:none;font-size:14.5px;color:#fff}
.busca input::placeholder{color:rgba(242,236,226,.42)}
.busca input:focus{outline:none;width:200px}
.busca button{padding:8px 12px 8px 4px;color:rgba(242,236,226,.6)}
.busca button:hover{color:#fff}
.nav__ic{display:grid;place-items:center;width:40px;height:40px;position:relative;
  color:var(--hueso);transition:var(--tr)}
.nav__ic:hover{color:var(--manzana)}
.nav__cesta{background:var(--manzana);color:#fff;width:44px;height:44px}
.nav__cesta:hover{background:#fff;color:var(--manzana)}
.nav__n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;background:#fff;color:var(--manzana);
  font:700 11px/1 var(--sans);border:2px solid var(--negro)}
.nav__n[hidden]{display:none}

.burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;
  align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:var(--hueso);transition:var(--tr)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobnav{display:none;flex-direction:column;padding:14px 24px 34px;background:var(--negro-2);
  color:var(--hueso);max-height:calc(100dvh - var(--nav-h) - 40px);overflow-y:auto}
.mobnav[hidden]{display:none!important}
.mobnav a{padding:13px 2px;border-bottom:1px solid var(--linea-osc);
  font:800 19px/1.2 var(--display);letter-spacing:-.03em;color:#fff}
.mobnav__nav{color:var(--manzana)}
.mobnav__sub{padding-left:16px!important;font:400 15px/1.3 var(--sans)!important;
  text-transform:none!important;color:rgba(242,236,226,.7)}
.mobnav__est{margin:18px 0 6px;font-size:14px;color:rgba(242,236,226,.6);
  display:flex;align-items:center;gap:9px}
.mobnav__tel{font:800 26px/1 var(--display)!important;border:0!important}

@media (max-width:1160px){
  .nav__l{display:none}
  .burger{display:flex}
  .mobnav{display:flex}
  .busca input{width:100px}
  .busca input:focus{width:140px}
}
@media (max-width:640px){
  :root{--nav-h:62px}
  .nav__in{gap:10px;width:calc(100% - 20px)}
  .marca img{width:36px;height:36px}
  .marca__t b{font-size:17px}
  .marca__t i{font-size:10.5px}
  .busca{display:none}
  .nav__ic:not(.nav__cesta){display:none}
}

.dot{width:9px;height:9px;border-radius:50%;background:var(--tinta-3);flex:none}
.est{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--tinta-3)}
.est--on{color:var(--ok)}
.est--on .dot,.mobnav__est.on .dot{background:var(--ok);box-shadow:0 0 0 4px rgba(46,139,87,.2)}

/* ═══ migas ════════════════════════════════════════════════════════════ */
.migas{padding:20px 0 4px;font-size:13.5px;color:var(--tinta-3)}
.migas ol{display:flex;flex-wrap:wrap;gap:8px}
.migas li+li::before{content:"→";margin-right:8px;color:var(--manzana)}
.migas a:hover{color:var(--manzana)}

/* ═══════════════════════════════════════════════════════════════════════
   PORTADA
   ═══════════════════════════════════════════════════════════════════════ */

/* ── hero: el escaparate encendido ────────────────────────────────────
   Tres columnas de fotos a distinta altura sobre negro, con el rótulo a la
   izquierda. Las fotos de la tienda son cuadradas y de 520-560 px: así
   salen nítidas, en vez de estiradas a sangre. */
.escaparate{position:relative;background:var(--negro);color:var(--hueso);overflow:hidden;
  padding:clamp(46px,6vw,86px) 0 clamp(56px,6vw,96px)}
.escaparate__in{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,4vw,64px);align-items:center}
.escaparate h1{font-size:clamp(56px,9.4vw,150px);line-height:.84;color:#fff;
  letter-spacing:-.055em;margin-bottom:24px}
.escaparate h1 .rojo{color:var(--manzana)}
.escaparate h1 .script{display:block;font:400 clamp(28px,4.2vw,60px)/1 var(--script);
  color:var(--oro-claro);letter-spacing:0;text-transform:none;margin-top:8px;
  transform:rotate(-2.5deg);transform-origin:left}
.escaparate .lede{color:rgba(242,236,226,.76);max-width:46ch;font-size:clamp(16px,1.3vw,19px)}
.escaparate__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.escaparate__sello{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px;
  padding:9px 16px 9px 10px;background:rgba(242,236,226,.07);
  border:1.5px solid var(--linea-osc);font:600 12.5px/1 var(--sans);color:var(--hueso)}
.escaparate__sello .mz{width:17px;color:var(--manzana);flex:none}

.vitrina{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:start}
.vitrina__col{display:grid;gap:10px}
.vitrina__col:nth-child(2){margin-top:34px}
.vitrina__col:nth-child(3){margin-top:-16px}
.vitrina a{position:relative;display:block;overflow:hidden;background:var(--negro-2)}
.vitrina img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;
  transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.vitrina a:hover img{transform:scale(1.08)}
.vitrina a::after{content:"";position:absolute;inset:0;background:var(--manzana);
  mix-blend-mode:multiply;opacity:0;transition:var(--tr)}
.vitrina a:hover::after{opacity:.24}
.vitrina b{position:absolute;left:0;bottom:0;z-index:2;padding:7px 12px;
  background:#fff;color:var(--negro);font:700 12px/1 var(--sans);
  opacity:0;transform:translateY(100%);transition:var(--tr)}
.vitrina a:hover b{opacity:1;transform:none}
@media (max-width:980px){
  .escaparate__in{grid-template-columns:1fr}
  .vitrina__col:nth-child(2),.vitrina__col:nth-child(3){margin-top:0}
  .vitrina b{opacity:1;transform:none}
}
/* En móvil el mosaico se rehace entero.
   Con las tres columnas puestas y la tercera escondida quedaban dos columnas
   de dos y de tres fotos: la izquierda terminaba una fila antes y dejaba un
   hueco negro en la esquina de abajo.
   `display:contents` deshace las columnas y deja los enlaces como hijos
   directos de la rejilla, así se colocan en una sola parrilla de dos. La
   última cruza las dos columnas para que el bloque cierre en recto. */
@media (max-width:560px){
  .vitrina{grid-template-columns:repeat(2,1fr)}
  .vitrina__col{display:contents}
  .vitrina__col:nth-child(3){display:none}
  .vitrina__col:nth-child(2) > a:last-child{grid-column:1 / -1}
  .vitrina__col:nth-child(2) > a:last-child img{aspect-ratio:2.4/1}
  /* Menos aire debajo del mosaico: con el bloque ya cuadrado, el respiro
     original de casi 100 px parecía otro hueco. */
  .escaparate{padding-bottom:clamp(34px,7vw,56px)}
}

/* ── manifiesto en marquesina ──────────────────────────────────────── */
.grito{background:var(--hueso);border-block:2px solid var(--tinta);overflow:hidden;padding:18px 0}
.grito__p{display:flex;white-space:nowrap;animation:desliza 44s linear infinite;will-change:transform}
.grito__p span{display:inline-flex;align-items:center;gap:22px;padding:0 22px;
  font:800 clamp(22px,3vw,42px)/1 var(--display);letter-spacing:-.04em;text-transform:lowercase}
.grito__p .mz{width:clamp(16px,2vw,28px);color:var(--manzana);flex:none}

/* ── las baldas: categorías como lista tipográfica ────────────────────
   En vez de otra rejilla de seis fotos iguales, una lista enorme.

   La foto asoma flotando, ladeada y con sombra, como una polaroid dejada
   encima de la balda. Eso se queda igual.

   Lo que SÍ cambió es el efecto de la fila: antes se ponía en negro a
   sangre de un lado a otro de la pantalla y el salto era un golpe. Ahora el
   fondo no se toca: se marca con una barra roja que barre la fila por
   debajo, y el número, el título y la flecha pasan a rojo. El subtítulo se
   apaga mientras la foto está fuera, para que no se lea nada a medias.     */
.baldas{border-top:2px solid var(--tinta)}
.balda{position:relative;display:flex;align-items:center;gap:24px;
  padding:clamp(20px,2.6vw,34px) 0;border-bottom:2px solid var(--tinta)}
/* la barra que barre por debajo */
.balda::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--manzana);transition:width .45s cubic-bezier(.2,.8,.25,1)}
.balda:hover::after,.balda:focus-visible::after{width:100%}

.balda__n{font:600 14px/1 var(--sans);color:var(--tinta-3);width:32px;flex:none;
  transition:var(--tr)}
.balda__t{font:800 clamp(30px,5.6vw,76px)/.92 var(--display);letter-spacing:-.045em;
  text-transform:lowercase;transition:var(--tr)}
/* La lista grande va en minúscula porque es la firma de la casa, pero cuando
   lo que lista son MARCAS lleva el nombre tal y como se escribe: «Cerería
   Mollá» y «Cool Bottles» son nombres propios, y Google los lee como
   entidades. Tiene que ir DESPUÉS de .balda__t: misma especificidad, así que
   manda la última. */
.balda__t--marca{text-transform:none}
.balda__s{margin-left:auto;font-size:14.5px;color:var(--tinta-3);text-align:right;
  max-width:32ch;transition:opacity var(--tr)}
.balda__f{margin-left:12px;flex:none;color:var(--tinta-3);transition:var(--tr)}
.balda__f .ico{width:26px;height:26px;stroke-width:2}

/* La foto, como estaba: flotando a la derecha, ladeada y con sombra. */
.balda__ph{position:absolute;right:16%;top:50%;width:220px;aspect-ratio:1;
  transform:translateY(-50%) scale(.88) rotate(-3deg);opacity:0;pointer-events:none;
  transition:var(--tr);z-index:3;overflow:hidden;box-shadow:var(--sombra-alta)}
.balda__ph img{width:100%;height:100%;object-fit:cover}
.balda:hover .balda__ph,.balda:focus-visible .balda__ph{
  opacity:1;transform:translateY(-50%) scale(1) rotate(-3deg)}

.balda:hover .balda__t,.balda:focus-visible .balda__t{color:var(--manzana);transform:translateX(14px)}
.balda:hover .balda__n,.balda:focus-visible .balda__n{color:var(--manzana)}
.balda:hover .balda__s,.balda:focus-visible .balda__s{opacity:0}
.balda:hover .balda__f,.balda:focus-visible .balda__f{color:var(--manzana);transform:translateX(8px)}

@media (max-width:900px){
  /* Sin cursor no hay hover: la foto se queda puesta y el texto debajo. */
  .balda{flex-wrap:wrap;gap:10px}
  .balda__s{margin-left:0;width:100%;text-align:left;order:3;max-width:none}
  .balda__ph{position:static;transform:none;opacity:1;width:100%;aspect-ratio:16/6;
    order:4;margin-top:12px;box-shadow:none}
  .balda__f{margin-left:auto}
  .balda:hover .balda__t{transform:none}
  .balda:hover .balda__s{opacity:1}
  .balda:hover .balda__ph{transform:none}
}

/* ═══ rejilla y tarjeta de producto ════════════════════════════════════
   Foto a sangre, sin marco, y el precio en una pegatina roja ladeada. */
.rejilla{display:grid;gap:clamp(16px,1.8vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.rejilla--4{grid-template-columns:repeat(4,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.rejilla--4,.rejilla--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rejilla,.rejilla--4,.rejilla--3{grid-template-columns:repeat(2,1fr);gap:12px}}

.card{position:relative;display:flex;flex-direction:column}
.card__ph{position:relative;display:block;aspect-ratio:1;background:var(--papel);overflow:hidden}
.card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.25,1)}
.card:hover .card__ph img{transform:scale(1.06)}
.card__ph2{position:absolute;inset:0;opacity:0;transition:opacity var(--tr)}
.card:hover .card__ph2{opacity:1}
.card__ilu{position:absolute;inset:0;display:grid;place-items:center;padding:15%;
  background:var(--papel);
  background-image:repeating-linear-gradient(45deg,rgba(224,30,30,.055) 0 2px,transparent 2px 11px)}
.ilu{width:100%;height:100%}
.ilu__g{fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;opacity:.45;transition:var(--tr)}
.card:hover .ilu__g{stroke:var(--manzana);opacity:1}
.card--nav .card__ilu{background-image:repeating-linear-gradient(45deg,rgba(18,51,38,.08) 0 2px,transparent 2px 11px)}

.card__badges{position:absolute;top:0;left:0;display:flex;flex-direction:column;
  align-items:flex-start;pointer-events:none;z-index:2}
.tag{display:inline-block;padding:7px 12px;background:var(--negro);color:#fff;
  font:700 11.5px/1 var(--sans)}
.tag--off{background:var(--manzana)}
.tag--oro{background:var(--oro);color:#191308}
.card__stock{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;z-index:2;
  background:var(--negro);color:#fff;font:600 12px/1 var(--sans);text-align:center}
.card__stock--ultimas{background:var(--manzana)}
.card__stock--agotado{background:var(--negro-3)}

/* la pegatina del precio */
.card__pegatina{position:absolute;right:-6px;top:-10px;z-index:4;
  min-width:64px;padding:10px 11px;background:var(--manzana);color:#fff;
  font:800 17px/1 var(--display);letter-spacing:-.035em;text-align:center;
  transform:rotate(6deg);box-shadow:0 8px 22px rgba(224,30,30,.32);transition:var(--tr)}
.card__pegatina s{display:block;font:400 11px/1.6 var(--sans);color:rgba(255,255,255,.72)}
.card:hover .card__pegatina{transform:rotate(-4deg) scale(1.07)}
.card__b{padding:16px 2px 0;display:flex;flex-direction:column;flex:1;position:relative}
.card__m{margin:0 0 6px;font:600 12px/1 var(--sans);color:var(--manzana)}
.card__t{font:800 19px/1.05 var(--display);letter-spacing:-.035em;text-transform:lowercase;margin:0 0 8px}
.card__t a:hover{color:var(--manzana)}
.card__p{display:none}          /* el precio vive en la pegatina */
.card__c{margin:0;font-size:13px;color:var(--tinta-3)}
.card__add{margin-top:14px;padding:13px;background:var(--negro);color:#fff;
  font:700 13px/1 var(--sans);transition:var(--tr)}
.card__add:hover{background:var(--manzana)}
.card__add[disabled]{background:var(--linea);color:var(--tinta-3);cursor:not-allowed}
.card__add.ok{background:var(--ok)}
@media (max-width:520px){
  .card__t{font-size:16px}
  .card__add{padding:11px;font-size:12px}
  .card__pegatina{font-size:14px;min-width:54px;padding:8px 9px}
}
.banda .card__ph,.banda .card__ilu{background:var(--negro-2)}
.banda .card__ilu{background-image:repeating-linear-gradient(45deg,rgba(242,236,226,.08) 0 2px,transparent 2px 11px)}
.banda .ilu__g{stroke:var(--hueso);opacity:.5}
.banda .card__t a{color:#fff}
.banda .card__c{color:rgba(242,236,226,.5)}
.banda .card__add{background:#fff;color:var(--negro)}
.banda .card__add:hover{background:var(--manzana);color:#fff}

.vacio{padding:60px 0;text-align:center;color:var(--tinta-3);font-size:17px}
.vacio a{color:var(--manzana);box-shadow:inset 0 -2px 0 currentColor}

/* ═══ carril horizontal ════════════════════════════════════════════════ */
.carril{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 0 16px;scrollbar-width:thin}
.carril>*{scroll-snap-align:start}
.carril::-webkit-scrollbar{height:4px}
.carril::-webkit-scrollbar-thumb{background:var(--manzana)}
@media (min-width:1000px){.carril{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}

/* ═══ tiles ════════════════════════════════════════════════════════════ */
.tiles{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:repeat(6,1fr)}
.tile{position:relative;display:block;overflow:hidden;min-height:250px;
  background:var(--negro);color:#fff;grid-column:span 2}
.tile--gr{grid-column:span 3;min-height:380px}
.tile--full{grid-column:span 6;min-height:280px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.tile:hover img{transform:scale(1.07)}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 32%,rgba(14,13,12,.82) 100%)}
.tile__in{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:2}
.tile__in h3{font-size:clamp(24px,2.4vw,36px);color:#fff}
.tile__in p{margin:6px 0 0;font-size:13.5px;color:rgba(255,255,255,.72)}
.tile__n{position:absolute;top:0;right:0;z-index:2;padding:7px 12px;
  background:var(--manzana);color:#fff;font:700 12px/1 var(--sans)}
.tile__ilu{position:absolute;inset:0;display:grid;place-items:center;padding:13%;background:var(--negro-2)}
.tile__ilu .ilu__g{stroke:var(--manzana);opacity:.45}
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile,.tile--gr{grid-column:span 1;min-height:230px}
  .tile--full{grid-column:span 2;min-height:220px}
}
@media (max-width:520px){.tile{min-height:190px}.tile__in{padding:16px}}

/* ═══ editorial partido ════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.6vw,76px);align-items:center}
.split--inv .split__ph{order:2}
.split__ph{position:relative}
.split__ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__ph--marco::after{content:"";position:absolute;inset:16px -16px -16px 16px;
  border:2px solid var(--manzana);z-index:-1}
.split__t{max-width:52ch}
@media (max-width:880px){.split{grid-template-columns:1fr}
  .split--inv .split__ph{order:0}
  .split__ph img{aspect-ratio:3/2}}

/* ═══ comprar por precio ═══════════════════════════════════════════════ */
.precios{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--tinta)}
.precio-t{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:200px;padding:26px 24px;background:var(--hueso);transition:var(--tr);overflow:hidden}
.precio-t:hover{background:var(--negro);color:var(--hueso)}
.precio-t b{font:800 clamp(26px,2.9vw,40px)/.96 var(--display);letter-spacing:-.045em;
  text-transform:lowercase;position:relative;z-index:2}
.precio-t span{font-size:14px;color:var(--tinta-3);margin-top:10px;position:relative;z-index:2}
.precio-t:hover span{color:rgba(242,236,226,.6)}
.precio-t .ico{position:absolute;right:22px;bottom:22px;width:22px;height:22px;
  color:var(--manzana);transition:var(--tr);z-index:2}
.precio-t:hover .ico{transform:translateX(6px)}
.precio-t .mz{position:absolute;right:-26px;top:-26px;width:110px;color:var(--manzana);opacity:.1;z-index:1}
.precio-t:hover .mz{opacity:.26}
.banda .precios{background:var(--linea-osc)}
.banda .precio-t{background:var(--negro-2);color:var(--hueso)}
.banda .precio-t:hover{background:var(--manzana);color:#fff}
.banda .precio-t:hover span{color:rgba(255,255,255,.8)}
@media (max-width:820px){.precios{grid-template-columns:repeat(2,1fr)}}

/* ═══ marcas ═══════════════════════════════════════════════════════════ */
.marcas{display:flex;flex-wrap:wrap;gap:2px}
.marcas a{flex:1 1 200px;padding:26px 22px;background:var(--papel);
  font:800 22px/1 var(--display);letter-spacing:-.04em;
  color:var(--tinta);transition:var(--tr);text-align:center;
  outline:2px solid var(--tinta);outline-offset:-1px}
.marcas a:hover{background:var(--manzana);color:#fff;outline-color:var(--manzana)}

/* ═══ reseñas ══════════════════════════════════════════════════════════ */
.resenas{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--tinta)}
.resena{padding:32px 28px;background:var(--hueso);margin:0}
.resena__e{display:flex;gap:3px;margin-bottom:16px;color:var(--manzana)}
.resena__e .ico{width:16px;height:16px;fill:currentColor;stroke:none}
.resena p{font:400 19px/1.5 var(--sans);color:var(--tinta)}
.resena cite{display:block;margin-top:16px;font:700 13px/1 var(--sans);
  color:var(--manzana);font-style:normal}
.banda .resenas{background:var(--linea-osc)}
.banda .resena{background:var(--negro-2)}
.banda .resena p{color:var(--hueso)}
@media (max-width:880px){.resenas{grid-template-columns:1fr}}

/* ═══ garantías ════════════════════════════════════════════════════════ */
.garant{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--tinta);
  border-block:2px solid var(--tinta)}
.garant li{background:var(--hueso);padding:24px 22px;display:flex;gap:14px;align-items:flex-start}
.garant .ico{width:24px;height:24px;color:var(--manzana);margin-top:2px}
.garant b{display:block;font:700 15px/1.25 var(--sans)}
.garant span{font-size:13.5px;color:var(--tinta-3)}
.banda .garant{background:var(--linea-osc);border-color:var(--linea-osc)}
.banda .garant li{background:var(--negro-2)}
.banda .garant span{color:rgba(242,236,226,.55)}
@media (max-width:900px){.garant{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.garant{grid-template-columns:1fr}}

/* ═══ tienda: filtros ══════════════════════════════════════════════════ */
.tienda{display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,3.4vw,56px);
  align-items:start;padding-bottom:clamp(56px,7vw,100px)}
.filtros{position:sticky;top:calc(var(--nav-h) + 20px);
  max-height:calc(100dvh - var(--nav-h) - 40px);overflow-y:auto;padding-right:6px}
.filtros h3{font:800 20px/1 var(--display);letter-spacing:-.035em;text-transform:none;
  color:var(--tinta);margin:0 0 12px;padding-top:22px;border-top:2px solid var(--tinta)}
.filtros h3:first-child{padding-top:0;border:0}
.filtros ul{margin-bottom:24px}
.filtros li a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  font-size:15px;color:var(--tinta-2);transition:var(--tr)}
.filtros li a:hover{color:var(--manzana);padding-left:5px}
.filtros li a.on{color:var(--manzana);font-weight:700}
.filtros li a span{color:var(--tinta-3);font-size:13px}
.f-limpia{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  padding:9px 14px;background:var(--negro);color:#fff;font:600 13px/1 var(--sans)}
.f-limpia:hover{background:var(--manzana)}
.f-limpia .ico{width:14px;height:14px}

.tienda__head{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-bottom:16px;margin-bottom:26px;border-bottom:2px solid var(--tinta);flex-wrap:wrap}
.tienda__n{font-size:15px;color:var(--tinta-3);margin:0}
.tienda__n b{color:var(--tinta);font-weight:700}
.orden{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--tinta-3)}
.orden select{padding:9px 12px;border:1.5px solid var(--tinta);background:var(--papel);font-size:14.5px}
.f-btn{display:none;align-items:center;gap:9px;padding:12px 18px;background:var(--negro);
  color:#fff;font:700 13px/1 var(--sans)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;background:var(--negro);
  color:#fff;font:600 13.5px/1 var(--sans);transition:var(--tr)}
.chip:hover{background:var(--manzana)}
.chip .ico{width:13px;height:13px}
@media (max-width:940px){
  .tienda{grid-template-columns:1fr}
  .filtros{position:fixed;inset:0;z-index:90;background:var(--hueso);padding:22px 22px 90px;
    max-height:none;overflow-y:auto;transform:translateX(-100%);transition:transform var(--tr)}
  .filtros.abierta{transform:none}
  .f-btn{display:inline-flex}
  .f-cerrar{display:block;position:sticky;top:0;padding:14px 0;background:var(--hueso);
    text-align:right;font:700 13px/1 var(--sans);color:var(--manzana)}
}
@media (min-width:941px){.f-cerrar{display:none}}

/* ═══ ficha de producto ════════════════════════════════════════════════ */
.ficha{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(30px,4.4vw,74px);
  align-items:start;padding:22px 0 clamp(56px,7vw,100px)}
.ficha__ph{position:sticky;top:calc(var(--nav-h) + 24px)}
.ficha__main{position:relative;aspect-ratio:1;background:var(--papel);overflow:hidden}
.ficha__main img{width:100%;height:100%;object-fit:cover}
.ficha__main .card__ilu{padding:19%}
.ficha__tiras{display:flex;gap:8px;margin-top:8px}
.ficha__tiras button{width:80px;aspect-ratio:1;overflow:hidden;background:var(--papel);
  outline:2px solid transparent;outline-offset:-2px;transition:var(--tr)}
.ficha__tiras button.on{outline-color:var(--manzana)}
.ficha__tiras img{width:100%;height:100%;object-fit:cover}
.ficha h1{font-size:clamp(34px,4.4vw,60px);margin:8px 0 18px}
.ficha__marca{font:700 13px/1 var(--sans);color:var(--manzana);margin:0}
.ficha__marca a:hover{box-shadow:inset 0 -2px 0 currentColor}
.ficha__precio{display:flex;align-items:center;gap:14px;margin:0 0 6px;flex-wrap:wrap}
.ficha__precio b{display:inline-block;padding:11px 17px;background:var(--manzana);color:#fff;
  font:800 30px/1 var(--display);letter-spacing:-.04em;transform:rotate(-1.5deg)}
.ficha__precio s{font-size:19px;color:var(--tinta-3)}
.ficha__iva{font-size:13.5px;color:var(--tinta-3);margin:16px 0 22px}
.ficha__desc{font-size:17px;line-height:1.72;color:var(--tinta-2);margin-bottom:26px}
.opciones{margin-bottom:22px}
.opciones>span{display:block;font:700 13px/1 var(--sans);color:var(--tinta-3);margin-bottom:10px}
.opciones__l{display:flex;flex-wrap:wrap;gap:8px}
.opciones__l label{position:relative}
.opciones__l input{position:absolute;opacity:0;pointer-events:none}
.opciones__l span{display:block;padding:12px 17px;border:2px solid var(--linea);
  font-size:14.5px;cursor:pointer;transition:var(--tr)}
.opciones__l input:checked+span{border-color:var(--negro);background:var(--negro);color:#fff}
.opciones__l input:focus-visible+span{outline:2px solid var(--manzana);outline-offset:2px}
.compra{display:flex;gap:10px;align-items:stretch;margin-bottom:14px}
.cant{display:flex;align-items:center;border:2px solid var(--negro)}
.cant button,.cant a{width:44px;display:grid;place-items:center;color:var(--tinta)}
.cant button:hover,.cant a:hover{background:var(--negro);color:#fff}
.cant input{width:46px;text-align:center;border:0;background:none;font-size:15.5px;font-weight:700;
  -moz-appearance:textfield}
.cant input::-webkit-outer-spin-button,.cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.compra .btn{flex:1}
.ficha__aviso{display:flex;align-items:center;gap:11px;padding:14px 16px;margin-bottom:22px;
  background:var(--manzana);color:#fff;font-size:14.5px}
.ficha__aviso .ico{width:18px;height:18px;color:#fff}
.ficha__aviso a{color:#fff;box-shadow:inset 0 -2px 0 rgba(255,255,255,.6)}
.ficha__prom{border-top:2px solid var(--tinta);padding-top:20px}
.ficha__prom li{display:flex;gap:13px;padding:10px 0;font-size:14.5px;color:var(--tinta-2)}
.ficha__prom .ico{width:20px;height:20px;color:var(--manzana);margin-top:2px}
.ficha__prom b{color:var(--tinta)}
.banda .ficha__prom{border-color:var(--linea-osc)}
.banda .ficha__prom li{color:rgba(242,236,226,.72)}
.banda .ficha__prom b{color:#fff}
.detalles{margin-top:26px;border-top:2px solid var(--tinta)}
.detalles details{border-bottom:1px solid var(--linea)}
.detalles summary{padding:18px 0;cursor:pointer;font:700 15px/1 var(--sans);
  list-style:none;display:flex;justify-content:space-between;align-items:center}
.detalles summary::-webkit-details-marker{display:none}
.detalles summary::after{content:"+";font:800 22px/1 var(--display);color:var(--manzana)}
.detalles details[open] summary::after{content:"–"}
.detalles__b{padding:0 0 22px;font-size:15.5px;line-height:1.7;color:var(--tinta-2)}
.detalles__b li{padding-left:22px;position:relative;margin-bottom:8px}
.detalles__b li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  background:var(--manzana)}
@media (max-width:880px){.ficha{grid-template-columns:1fr;gap:26px}.ficha__ph{position:static}}

/* ═══ cesta ════════════════════════════════════════════════════════════ */
.cesta{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,4vw,58px);
  align-items:start;padding:10px 0 clamp(56px,7vw,100px)}
.linea{display:grid;grid-template-columns:106px 1fr auto;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--linea);align-items:center}
.linea__ph{aspect-ratio:1;background:var(--papel);overflow:hidden;position:relative}
.linea__ph img{width:100%;height:100%;object-fit:cover}
.linea__ph .card__ilu{padding:17%}
.linea h3{font:800 20px/1.1 var(--display);letter-spacing:-.035em;text-transform:lowercase;margin:0 0 5px}
.linea__m{font:600 12px/1 var(--sans);color:var(--manzana);margin:0 0 6px}
.linea__c{font-size:13.5px;color:var(--tinta-3);margin:0 0 10px}
.linea__acc{display:flex;align-items:center;gap:16px}
.linea__quita{font-size:13.5px;color:var(--tinta-3)}
.linea__quita:hover{color:var(--manzana);box-shadow:inset 0 -2px 0 currentColor}
.linea__p{text-align:right;font:800 20px/1 var(--display);letter-spacing:-.035em;white-space:nowrap}
@media (max-width:640px){.linea{grid-template-columns:82px 1fr}
  .linea__p{grid-column:2;text-align:left;margin-top:8px}}
.resumen{position:sticky;top:calc(var(--nav-h) + 20px);padding:30px 28px;
  background:var(--negro);color:var(--hueso)}
.resumen h2{font-size:30px;margin-bottom:20px;color:#fff}
.resumen__l{display:flex;justify-content:space-between;padding:9px 0;font-size:15px}
.resumen__l--t{border-top:2px solid var(--linea-osc);margin-top:12px;padding-top:16px;
  font:800 26px/1 var(--display);letter-spacing:-.04em;color:#fff}
.resumen__l--ok{color:var(--oro-claro)}
.resumen .ficha__prom{border-color:var(--linea-osc)}
.resumen .ficha__prom li{color:rgba(242,236,226,.72)}
.barra-envio{margin:16px 0 22px}
.barra-envio p{font-size:13.5px;margin:0 0 8px;color:rgba(242,236,226,.72)}
.barra-envio b{color:var(--oro-claro)}
.barra-envio i{display:block;height:5px;background:var(--linea-osc);overflow:hidden}
.barra-envio i span{display:block;height:100%;background:var(--manzana);transition:width .5s}
.entrega{display:grid;gap:8px;margin:20px 0}
.entrega label{display:flex;gap:12px;padding:15px 16px;border:2px solid var(--linea-osc);
  cursor:pointer;transition:var(--tr)}
.entrega label:has(input:checked){border-color:var(--manzana);background:rgba(224,30,30,.14)}
.entrega input{margin-top:3px;accent-color:var(--manzana)}
.entrega b{display:block;font:700 15px/1.3 var(--sans);color:#fff}
.entrega span{font-size:13px;color:rgba(242,236,226,.6)}
@media (max-width:880px){.cesta{grid-template-columns:1fr}.resumen{position:static}}

/* ═══ formularios ══════════════════════════════════════════════════════ */
.campo{margin-bottom:16px}
.campo label{display:block;font:700 13px/1 var(--sans);color:var(--tinta-2);margin-bottom:8px}
.campo input,.campo textarea,.campo select{width:100%;padding:14px 15px;
  border:2px solid var(--linea);background:var(--papel);font-size:16px}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--negro)}
.campo--mal input,.campo--mal textarea{border-color:var(--manzana)}
.campo__err{display:block;margin-top:6px;font-size:13.5px;color:var(--manzana);font-weight:600}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.fila{grid-template-columns:1fr}}
.trampa{position:absolute!important;left:-9999px}

/* ═══ boletín ══════════════════════════════════════════════════════════ */
.news{background:var(--manzana);color:#fff;padding:clamp(40px,5vw,68px) 0}
.news__in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.news h2{font-size:clamp(30px,3.6vw,52px);margin-bottom:10px;color:#fff}
.news p{margin:0;color:rgba(255,255,255,.84);max-width:52ch;font-size:15.5px}
.news__f{display:flex}
.news__f input{width:min(320px,60vw);padding:16px 18px;border:2px solid #fff;
  background:transparent;color:#fff;font-size:15.5px}
.news__f input::placeholder{color:rgba(255,255,255,.6)}
.news__f input:focus{outline:none;background:rgba(255,255,255,.12)}
.news__f button{padding:16px 26px;background:#fff;color:var(--manzana);border:2px solid #fff;
  font:700 14px/1 var(--sans);transition:var(--tr)}
.news__f button:hover{background:var(--negro);border-color:var(--negro);color:#fff}
@media (max-width:880px){.news__in{grid-template-columns:1fr}
  .news__f{flex-wrap:wrap}.news__f input,.news__f button{width:100%}}

/* ═══ pie negro ════════════════════════════════════════════════════════ */
.pie{position:relative;background:var(--negro);color:var(--hueso);overflow:hidden}
.pie__mz{position:absolute;right:-110px;bottom:-110px;width:460px;pointer-events:none}
.mz-agua{width:100%;color:var(--manzana);opacity:.08}
.pie__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr 1.3fr;gap:36px;
  padding:clamp(50px,5.4vw,80px) 0 40px;position:relative;z-index:1}
.pie__col h3{font:800 20px/1 var(--display);letter-spacing:-.035em;text-transform:none;
  color:#fff;margin-bottom:16px}
.pie__col li a{display:inline-block;padding:5px 0;font-size:15px;
  color:rgba(242,236,226,.62);transition:var(--tr)}
.pie__col li a:hover{color:#fff}
.pie__hot{display:inline-block;margin-left:6px;padding:3px 7px;background:var(--manzana);
  color:#fff;font:700 10px/1.4 var(--sans)}
.pie__col--m img{margin-bottom:16px}
.pie__claim{font:400 22px/1.3 var(--script);color:var(--manzana);margin-bottom:14px}
.pie__txt{font-size:14.5px;color:rgba(242,236,226,.6);line-height:1.66;max-width:34ch}
.pie__soc{display:flex;gap:2px;margin-top:20px}
.pie__soc a{display:grid;place-items:center;width:44px;height:44px;
  background:var(--negro-2);transition:var(--tr)}
.pie__soc a:hover{background:var(--manzana);color:#fff}
.pie__dir{font-size:15px;line-height:1.7;color:rgba(242,236,226,.8)}
.pie__hor{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;
  padding:4px 0;color:rgba(242,236,226,.55);margin:0}
.pie__hor b{color:#fff;font-weight:600;text-align:right}
.pie__col--v .est{margin:12px 0 14px;color:rgba(242,236,226,.6)}
.pie__col--v .lnk{color:#fff}
.pie__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding:22px 0 32px;border-top:1px solid var(--linea-osc);font-size:13.5px;
  color:rgba(242,236,226,.5);position:relative;z-index:1}
.pie__bar p{margin:0}
.pie__leg a:hover{color:#fff}
.pie__maq{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  background:var(--negro-2);font-size:12.5px}
.pie__maq .ico{width:14px;height:14px;color:var(--manzana)}
@media (max-width:1100px){.pie__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.pie__grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .pie__col--m{grid-column:span 2}}

/* ═══ barra de móvil ═══════════════════════════════════════════════════ */
.movil-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--negro);padding:8px 0 max(8px,env(safe-area-inset-bottom))}
.movil-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font:600 10.5px/1 var(--sans);color:rgba(242,236,226,.8);position:relative}
.movil-bar .ico{width:22px;height:22px}
.movil-bar a:last-child{color:var(--manzana)}
.movil-bar__n{position:absolute;top:-5px;right:calc(50% - 21px);min-width:18px;height:18px;
  display:grid;place-items:center;background:var(--manzana);color:#fff;font:700 10px/1 var(--sans)}
.movil-bar__n[hidden]{display:none}
@media (max-width:700px){.movil-bar{display:flex}body{padding-bottom:64px}}

/* ═══ aviso flotante ═══════════════════════════════════════════════════ */
.brindis{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);z-index:200;
  display:flex;align-items:center;gap:12px;padding:16px 22px;background:var(--negro);
  color:#fff;box-shadow:var(--sombra-alta);font-size:15px;
  transition:transform .42s cubic-bezier(.2,.9,.3,1);max-width:calc(100vw - 32px);
  pointer-events:none;opacity:0;border-left:4px solid var(--ok)}
.brindis.ver{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.brindis .ico{width:19px;height:19px;color:var(--ok)}
.brindis a{color:var(--oro-claro);box-shadow:inset 0 -2px 0 currentColor;pointer-events:auto}
.brindis--mal{border-left-color:var(--manzana)}
.brindis--mal .ico{color:var(--manzana)}
@media (max-width:700px){.brindis{bottom:78px}}

/* ═══ páginas de contenido ═════════════════════════════════════════════ */
.prosa{max-width:68ch;font-size:17.5px;line-height:1.75;color:var(--tinta-2)}
.prosa h2{font-size:clamp(28px,3.2vw,42px);margin:48px 0 16px;color:var(--tinta)}
.prosa h3{font-size:24px;margin:34px 0 12px;color:var(--tinta)}
.prosa a{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--manzana);font-weight:500}
.prosa a:hover{box-shadow:inset 0 -1.1em 0 var(--manzana);color:#fff}
.prosa ul{margin:0 0 22px}
.prosa ul li{position:relative;padding-left:26px;margin-bottom:10px}
.prosa ul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;
  background:var(--manzana)}
.prosa blockquote{margin:34px 0;padding:24px 26px;background:var(--negro);color:#fff;
  font:800 clamp(20px,2.2vw,28px)/1.24 var(--display);letter-spacing:-.03em;text-transform:lowercase}
.prosa figure{margin:32px 0}
.prosa figcaption{margin-top:10px;font-size:13.5px;color:var(--tinta-3)}

.hero-pag{position:relative;padding:clamp(34px,4vw,60px) 0 clamp(30px,3.4vw,48px);
  background:var(--negro);color:var(--hueso)}
.hero-pag h1{font-size:clamp(40px,6.4vw,92px);margin-bottom:18px;color:#fff}
.hero-pag h1 em{font-style:normal;color:var(--manzana)}
.hero-pag .lede{color:rgba(242,236,226,.74);font-size:clamp(16px,1.4vw,19.5px)}
.hero-pag .kicker{color:var(--manzana)}
.hero-pag .migas{color:rgba(242,236,226,.5)}
.hero-pag .migas a:hover{color:#fff}
.hero-pag .est{color:rgba(242,236,226,.6)}
.hero-pag .lnk{color:#fff}
.hero-pag--foto{overflow:hidden;isolation:isolate;padding:clamp(64px,8vw,120px) 0 clamp(48px,5vw,76px)}
.hero-pag--foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-pag--foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(14,13,12,.95) 8%,rgba(14,13,12,.62) 58%,rgba(14,13,12,.32) 100%)}

.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--tinta)}
.art{display:flex;flex-direction:column;background:var(--hueso);transition:var(--tr)}
.art:hover{background:var(--negro);color:var(--hueso)}
.art__ph{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--papel)}
.art__ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.art:hover .art__ph img{transform:scale(1.06)}
.art__b{padding:26px 24px 28px;flex:1;display:flex;flex-direction:column}
.art__k{font:700 12.5px/1 var(--sans);color:var(--manzana);margin:0 0 12px}
.art__b h3{font-size:26px;margin-bottom:12px}
.art:hover .art__b h3{color:#fff}
.art__b p{font-size:14.5px;color:var(--tinta-3);flex:1}
.art:hover .art__b p{color:rgba(242,236,226,.6)}
@media (max-width:880px){.arts{grid-template-columns:1fr}}

.mapa{width:100%;aspect-ratio:16/9;border:0;filter:grayscale(1) contrast(1.15);
  transition:filter var(--tr)}
.mapa:hover{filter:none}

.faq details{border-bottom:2px solid var(--tinta)}
.faq summary{padding:22px 0;cursor:pointer;font:800 21px/1.16 var(--display);
  letter-spacing:-.03em;text-transform:lowercase;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 26px/1 var(--display);color:var(--manzana);flex:none}
.faq details[open] summary::after{content:"–"}
.faq__b{padding:0 0 24px;max-width:72ch;color:var(--tinta-2);line-height:1.72}
.faq__b a{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--manzana)}
.banda .faq details{border-color:var(--linea-osc)}
.banda .faq summary{color:#fff}
.banda .faq__b{color:rgba(242,236,226,.7)}
.banda .faq__b a{color:#fff}

/* ═══ aparición al entrar ══════════════════════════════════════════════ */
/* Solo se esconde si hay JS que lo pueda revelar: con el JS caído, el
   contenido tiene que verse igual. La clase .js la pone page_head(). */
.js .sube{opacity:0;transform:translateY(26px)}
.js .sube.dentro{opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.25,1)}
@media (prefers-reduced-motion:reduce){.js .sube{opacity:1;transform:none}}

/* ── tonos de las ilustraciones ────────────────────────────────────────
   Una rejilla con once dibujos de línea sobre blanco se apaga. Cada ficha
   sin foto recibe uno de estos cuatro fondos según su slug, así que la
   pared coge ritmo sin que ningún producto cambie de sitio. */
.card__ilu--t1{background-color:var(--papel)}
.card__ilu--t2{background-color:#efe7d9}
.card__ilu--t3{background-color:#e7e9e3}
.card__ilu--t4{background-color:#f6e4e2}
.banda .card__ilu--t1{background-color:#1a1817}
.banda .card__ilu--t2{background-color:#221e1c}
.banda .card__ilu--t3{background-color:#181d1a}
.banda .card__ilu--t4{background-color:#241a1a}

/* ══════════════════════════════════════════════════════════════════════════
   MODO «PRECIO PRÓXIMAMENTE»
   Mientras $CFG['precios_ocultos'] esté a true. Lo enciende y lo apaga el PHP
   solo; esto es únicamente la ropa. Ver inc/config.php.
   ══════════════════════════════════════════════════════════════════════════ */

/* La pegatina deja de ser roja. El rojo de la casa es el del precio y el de la
   oferta: usarlo para decir «pronto» sería gritar un descuento que no existe.
   En negro sigue haciendo su papel de sello y no promete nada. */
.card__pegatina--pronto{
  background:var(--negro);color:#fff;
  font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  min-width:0;padding:9px 11px;box-shadow:0 8px 22px rgba(14,13,12,.28)}

/* El botón de la tarjeta pasa a ser un enlace: hay que devolverle la caja que
   el <button> traía de fábrica. */
.card__add--ver{display:block;text-align:center;text-decoration:none}
.card__add--ver:hover{color:#fff}

/* En la ficha, el precio vive en un bloque rojo de 30 px pensado para «24,90 €».
   «Precio próximamente» es siete veces más largo: mismo sitio, otro tamaño y
   sin el rojo, que aquí gritaría. */
.ficha__precio--pronto b{
  background:var(--negro);color:#fff;
  font:800 20px/1.15 var(--display);letter-spacing:-.02em;
  padding:12px 18px;transform:rotate(-1deg)}

@media (max-width:520px){
  .card__pegatina--pronto{font-size:11px;padding:8px 9px}
  .ficha__precio--pronto b{font-size:17px}
}