@charset "UTF-8";
/* =====================================================================
   VITREAUX BOUTIQUE · estilo.css

   Único CSS del sitio. Orden:
     1. Tipografías y variables
     2. Base y textura
     3. Piezas sueltas (botones, rótulos, arcos, cortes)
     4. Cabecera, barra del pulgar, pie
     5. Landing: hero, cinta, carrusel, rubros, locales, garantías
     6. Catálogo: grilla escalonada y ficha de producto
     7. Láminas: buscador y carrito
     8. Checkout
     9. Movimiento
    10. Escritorio

   Regla que manda sobre todo: el texto no se mueve mientras se lee.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TIPOGRAFÍAS Y VARIABLES
   ---------------------------------------------------------------------
   Para self-hostear las fuentes: bajar los .woff2 a assets/fuentes/,
   descomentar este bloque y quitar las dos etiquetas de Google Fonts
   que están en cabecera() dentro de lib.php.

@font-face{font-family:"Cormorant Garamond";src:url("fuentes/cormorant-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fuentes/cormorant-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("fuentes/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fuentes/inter-600.woff2") format("woff2");font-weight:600;font-display:swap}
--------------------------------------------------------------------- */

:root{
  /* Color */
  --crema:      #FAF7F2;
  --crema-hondo:#F2EBE1;
  --tinta:      #1A1A1A;
  --tinta-suave:#4A4643;
  --bordo:      #6E2639;
  --bordo-hondo:#54182A;
  --dorado:     #B08D57;
  --blanco:     #FFFFFF;
  --alerta:     #9B2C2C;

  /* Tipografía */
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* El arco: el gesto que rompe la cuadrícula */
  --arco: 50% 50% 8px 8px / 22% 22% 3px 3px;

  /* Ritmo */
  --aire:      clamp(1.25rem, 4vw, 2.5rem);
  --aire-alto: clamp(3rem, 9vw, 6.5rem);
  --desfase:   2.75rem;   /* cuánto baja la segunda columna */

  /* Movimiento */
  --curva: cubic-bezier(.2,.7,.2,1);
  --rapido: .22s;
  --medio:  .34s;
}

/* ---------------------------------------------------------------------
   2. BASE Y TEXTURA
   --------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  /* 18px de base: la tienda la mira gente que no quiere entrecerrar los ojos */
  font:400 1.125rem/1.6 var(--sans);
  color:var(--tinta);
  background:var(--crema);
  overflow-x:hidden;
}

/* Grano de papel. Va como SVG embebido: no suma un archivo ni un pedido. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
}
body > *{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.75rem,11vw,5.5rem)}
h2{font-size:clamp(2rem,7vw,3.25rem)}
h3{font-size:clamp(1.25rem,4vw,1.6rem)}

p{margin:0 0 1em}

a{color:inherit;text-decoration:none}
a:where(p a, .pie a){text-decoration:underline;text-decoration-color:var(--dorado);text-underline-offset:3px}

/* Foco visible de verdad: es lo que usa quien navega con teclado */
:focus-visible{outline:3px solid var(--bordo);outline-offset:3px;border-radius:2px}

svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--tinta);color:var(--crema);padding:.9rem 1.4rem;
}
.saltar:focus{left:0}

.envoltorio{max-width:1240px;margin:0 auto;padding:0 var(--aire)}

/* Sólo para lectores de pantalla */
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------------
   3. PIEZAS SUELTAS
   --------------------------------------------------------------------- */

/* --- Botones: 48px de alto mínimo, siempre --- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.9rem;
  font:600 1rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--tinta);border-radius:999px;
  background:none;color:var(--tinta);cursor:pointer;
  transition:background var(--rapido) var(--curva), color var(--rapido) var(--curva),
             transform var(--rapido) var(--curva);
}
.boton:hover{background:var(--tinta);color:var(--crema)}
.boton:active{transform:scale(.97)}
.boton--lleno{background:var(--bordo);border-color:var(--bordo);color:var(--blanco)}
.boton--lleno:hover{background:var(--bordo-hondo);border-color:var(--bordo-hondo);color:var(--blanco)}
.boton--claro{background:var(--blanco);border-color:var(--blanco);color:var(--tinta)}
.boton--claro:hover{background:var(--crema);border-color:var(--crema);color:var(--tinta)}
.boton--ancho{width:100%}
.boton--texto{
  min-height:44px;padding:.5rem .25rem;border:0;border-radius:0;
  text-transform:none;letter-spacing:0;font-weight:500;
  border-bottom:1px solid var(--dorado);
}
.boton--texto:hover{background:none;color:var(--bordo)}
.boton[disabled]{opacity:.45;cursor:not-allowed}
.boton[disabled]:hover{background:none;color:var(--tinta)}

/* --- Rótulo de sección: rotado en el margen, detalle editorial --- */
.rotulo{
  font:600 .72rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--bordo);display:block;margin-bottom:1rem;
}
/* --- Arco: fotos con el borde superior curvo --- */
.arco{border-radius:var(--arco);overflow:hidden}

/* --- Corte curvo entre secciones. --corte = color de la sección de abajo --- */
.corte{
  height:clamp(32px,7vw,64px);
  margin-top:calc(-1 * clamp(32px,7vw,64px));
  background:var(--corte,var(--crema));
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  position:relative;z-index:2;
}

/* --- Filete dorado --- */
.filete{height:1px;background:var(--dorado);opacity:.5;border:0;margin:var(--aire) 0}

.seccion{padding:var(--aire-alto) 0}
.seccion__tope{padding:0 var(--aire);margin-bottom:var(--aire)}

/* ---------------------------------------------------------------------
   4. CABECERA, BARRA DEL PULGAR, PIE
   --------------------------------------------------------------------- */

.tope{
  position:sticky;top:0;z-index:30;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(176,141,87,.3);
}
.tope__fila{
  display:grid;grid-template-columns:52px 1fr 52px;gap:.5rem;align-items:center;
  padding:.5rem var(--aire);
}
.tope__icono{
  position:relative;display:grid;place-items:center;
  width:52px;height:52px;border:0;background:none;color:var(--tinta);cursor:pointer;
}
.tope__cuenta,.pulgar__cuenta{
  position:absolute;top:6px;right:4px;
  min-width:22px;height:22px;padding:0 5px;
  display:grid;place-items:center;
  font:600 .75rem/1 var(--sans);
  background:var(--bordo);color:var(--blanco);border-radius:999px;
}
/* display:grid le gana al atributo hidden, así que hay que decirlo aparte */
.tope__cuenta[hidden],.pulgar__cuenta[hidden]{display:none}

.marca{text-align:center;line-height:1}
.marca__nombre{
  display:block;font-family:var(--serif);font-size:clamp(1.4rem,6vw,2.1rem);
  letter-spacing:.14em;text-transform:uppercase;
}
.marca__bajada{
  display:block;margin-top:.3rem;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave);
}

/* --- Barra del pulgar --- */
.pulgar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--blanco);
  border-top:1px solid rgba(176,141,87,.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.pulgar__item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  min-height:60px;padding:.6rem 0;
  border:0;background:none;color:var(--tinta);cursor:pointer;
  font:500 .72rem/1 var(--sans);letter-spacing:.06em;
}
.pulgar__item svg{width:22px;height:22px}
.pulgar__cuenta{top:4px;right:calc(50% - 26px)}
/* 76px es la altura de la barra en un celular común; en los que tienen
   gesto de inicio (el padding-bottom de .pulgar) hay que sumarlo, si no
   la barra pegada de compra queda tapada por la barra de navegación. */
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

/* --- Pie --- */
.pie{background:var(--bordo-hondo);color:var(--crema);padding:var(--aire-alto) 0 2.5rem}
/* El logo es bordó y el pie también: sin esto queda invisible.
   Se pinta con una máscara en vez de un filtro de color: la máscara usa
   sólo la silueta del archivo y la rellena con el dorado exacto de la
   paleta. Un filter con hue-rotate daría un dorado aproximado y distinto
   según el color original del logo.
   Va oculto por defecto y se muestra sólo si el navegador soporta
   máscaras: mejor no mostrar nada que un cuadrado dorado. */
   La clase .marca-oro la comparten el pie y la franja de marca. */
.marca-oro{display:none}

@supports ((-webkit-mask-image:url(x)) or (mask-image:url(x))){
  .marca-oro{
    display:block;
    background-color:var(--dorado);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain;
  }
  .pie__marca{width:120px;height:120px;margin:0 auto 2.5rem}
  /* Grande a propósito: tiene que llenar el alto de la franja, no flotar
     en el medio con aire de sobra a los costados. */
  .franja__logo{width:clamp(120px,26vw,200px);height:clamp(120px,26vw,200px)}
}
.pie__grilla{
  display:grid;gap:2.5rem;
  max-width:1240px;margin:0 auto;padding:0 var(--aire);
}
.pie__titulo{font-size:1.5rem;color:var(--crema);margin-bottom:.8rem}
.pie__local{margin-bottom:.7rem;line-height:1.5}
.pie a{color:var(--crema)}
.pie__firma{
  margin:2.5rem var(--aire) 0;padding-top:1.5rem;
  border-top:1px solid rgba(250,247,242,.2);
  font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.65);
}

/* ---------------------------------------------------------------------
   5. LANDING
   --------------------------------------------------------------------- */

/* --- Hero: foto en arco y título montado encima --- */
.vidriera{position:relative;padding:var(--aire) var(--aire) 0}
.vidriera__foto{
  position:relative;
  aspect-ratio:4/5;
  /* Sin este límite, en un celular angosto el alto (1.25× el ancho) supera
     la pantalla visible: hay que scrollear para ver la foto entera, y el
     texto anclado abajo queda fuera de la vista inicial. Al ser el texto
     hijo de esta misma caja, limitarla también resuelve eso de paso. */
  max-height:68vh;
  border-radius:var(--arco);
  overflow:hidden;
  background:var(--crema-hondo);
}
/* El encuadre se corre hacia la parte de arriba de la foto, que con
   recorte "cover" hace que lo que se ve BAJE dentro del marco. Es para
   que las cabezas no queden debajo de la curva del arco.
   Si con alguna foto puntual sigue cortando, se puede suavizar el arco
   sólo acá: border-radius:50% 50% 8px 8px / 12% 12% 3px 3px; */
.vidriera__foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
/* Viñeta puramente fotográfica: el texto ya no va encima de la foto, así
   que esto es sólo para que la imagen tenga algo de cuerpo, no para
   garantizar contraste de nada. */
.vidriera__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(15,12,10,.26), transparent 42%),
    linear-gradient(to bottom, rgba(15,12,10,.16), transparent 20%);
}
/* Sin foto todavía (recién instalada, sin productos cargados): un fondo
   propio en vez de dejar la viñeta flotando sobre el cream-hondo vacío. */
.vidriera__foto--vacia::after{background:none}
.vidriera__foto--vacia{background:linear-gradient(160deg,var(--crema-hondo),var(--dorado) 220%)}

/* El texto va debajo de la foto, no encima: texto oscuro sobre el fondo
   crema de la página, igual siempre haya foto o no. */
.vidriera__texto{padding:1.75rem 0 .5rem;color:var(--tinta)}
.vidriera__texto h1{margin-bottom:.4em}
.vidriera__bajada{font-size:1.05rem;max-width:38ch;margin-bottom:1.5rem;color:var(--tinta-suave)}

/* --- Cinta de texto en movimiento (decorativa) --- */
.cinta{
  overflow:hidden;background:var(--bordo);color:var(--blanco);
  padding:.9rem 0;margin-top:var(--aire-alto);
}
.cinta__pista{display:flex;width:max-content;animation:desliza 42s linear infinite}
.cinta__grupo{display:flex;flex-shrink:0}
.cinta__item{
  padding:0 2rem;white-space:nowrap;
  font-family:var(--serif);font-size:1.35rem;font-style:italic;
}
.cinta__item::after{content:"·";margin-left:2rem;opacity:.6;font-style:normal}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cinta:hover .cinta__pista{animation-play-state:paused}

/* --- Carrusel horizontal con snap --- */
.carrusel{
  display:flex;gap:1rem;
  padding:0 var(--aire) .5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel > *{flex:0 0 62%;scroll-snap-align:start}

/* --- Rubros: parejos, sin escalera ni sangrías ---
   De a dos ya en el celular y en formato cuadrado: son fichas para
   navegar, no fotos de producto. A una columna y en 3:4 cada categoría
   ocupaba una pantalla entera. */
.rubros{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1rem;padding:0 var(--aire)}
.rubro{position:relative;display:block}
.rubro__foto{
  aspect-ratio:1/1;border-radius:var(--arco);overflow:hidden;
  background:var(--crema-hondo);
}
.rubro__foto img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--medio) var(--curva)}
.rubro:hover .rubro__foto img{transform:scale(1.04)}
.rubro__nombre{
  /* el título se monta sobre el borde de la foto */
  position:relative;margin-top:-1.2rem;margin-left:-.4rem;
  font-family:var(--serif);font-size:clamp(1.15rem,4vw,1.7rem);
  color:var(--tinta);background:var(--crema);
  display:inline-block;padding:.1em .5em .1em 0;
}
.rubro__cantidad{
  display:block;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);
}

/* --- Franja de marca: corta entre las prendas y los locales --- */
.franja{
  background:var(--bordo);
  /* Menos aire arriba que abajo: el arco de la pancita se dibuja por
     encima del borde superior, así que la franja "pesa" más arriba de lo
     que mide su caja. Con padding parejo el logo queda visualmente bajo. */
  padding:clamp(.5rem,1.5vw,1rem) var(--aire) clamp(2rem,5vw,3rem);
  display:grid;place-items:center;
}

/* --- Los locales --- */
.maison{background:var(--crema-hondo)}
.locales{display:grid;gap:2.5rem;padding:0 var(--aire)}
.local__foto{aspect-ratio:4/5;border-radius:var(--arco);overflow:hidden;background:var(--crema)}
.local__foto img{width:100%;height:100%;object-fit:cover}
.local__nombre{margin:1.1rem 0 .2rem;font-size:1.9rem}
.local__calle{margin:0;color:var(--tinta-suave)}

/* --- Garantías: texto quieto y grande --- */
.garantias{display:grid;gap:2rem;padding:0 var(--aire)}
.garantia{display:flex;gap:1rem;align-items:flex-start}
.garantia svg{flex:0 0 auto;width:30px;height:30px;stroke:var(--dorado);stroke-width:1.2}
.garantia h3{margin-bottom:.2em;font-size:1.35rem}
.garantia p{margin:0;color:var(--tinta-suave);font-size:1rem}

/* ---------------------------------------------------------------------
   6. CATÁLOGO Y FICHA
   --------------------------------------------------------------------- */

.grilla{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1.6rem 1rem;
  padding:0 var(--aire);
}
.pieza--ancha{grid-column:1 / -1}

/* --- Tarjeta de producto. Sin sombra ni caja: la foto y el filete --- */
.pieza{display:block;position:relative}
.pieza__foto{
  position:relative;aspect-ratio:3/4;
  border-radius:var(--arco);overflow:hidden;
  background:var(--crema-hondo);
}
.pieza--ancha .pieza__foto{aspect-ratio:16/13}
.pieza__foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.pieza__foto img + img{opacity:0}                       /* la segunda foto, escondida */
.pieza:hover .pieza__foto img{transform:scale(1.03)}
.pieza:hover .pieza__foto img + img{opacity:1}          /* cruce al pasar el mouse */
.pieza.mostrar-segunda .pieza__foto img + img{opacity:1} /* y al deslizar en mobile */

.pieza__datos{padding:.85rem .2rem 0}
.pieza__nombre{
  margin:0 0 .3rem;font-family:var(--serif);font-size:1.3rem;line-height:1.2;
  /* inline-block en vez de inline: permite el min-height de abajo sin
     cambiar dónde corta el texto (el ancho "shrink-to-fit" da el mismo
     punto de wrap que inline, así que un título de una línea sigue
     subrayándose sólo bajo el texto, no bajo toda la tarjeta). */
  display:inline-block;vertical-align:top;
  /* Dos líneas siempre reservadas: el precio queda a la misma altura
     tenga el nombre una línea o dos. */
  min-height:calc(1.3rem * 1.2 * 2);
  background-image:linear-gradient(var(--dorado),var(--dorado));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--medio) var(--curva);
}
.pieza:hover .pieza__nombre{background-size:100% 1px}   /* subrayado que se dibuja */
.pieza__precio{
  margin:.5rem 0 0;font-weight:600;font-size:1.15rem;color:var(--tinta);
}
.pieza__precio del{color:var(--tinta-suave);font-weight:400;margin-right:.5rem}
.pieza__descuento{color:var(--alerta);font-weight:600}
/* Abajo y no arriba: el arco se come las dos esquinas superiores, y ahí
   el cartel quedaba cortado. El borde de abajo es plano (3px de radio),
   así que se lee entero. */
.pieza__marca{
  position:absolute;bottom:.9rem;left:.9rem;z-index:2;
  padding:.35rem .8rem;border-radius:999px;
  font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  background:var(--crema);color:var(--bordo);
}
.pieza--agotada .pieza__foto{opacity:.55}
.pieza__agotado{
  position:absolute;inset:auto 0 0;z-index:2;padding:.6rem;
  text-align:center;background:rgba(26,26,26,.82);color:var(--blanco);
  font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
}

/* --- Filtros ---
   Van en un <details>: abren y cierran sin JavaScript. */
.filtros{padding:0 var(--aire) var(--aire)}
.filtros__abrir{width:100%;list-style:none;text-align:center}
.filtros__abrir::-webkit-details-marker{display:none}
.filtros__caja[open] .filtros__abrir{background:var(--tinta);color:var(--crema)}
.filtros__cuerpo{margin-top:1.2rem}
.filtros__grupo{margin-bottom:1.5rem}
.filtros__titulo{
  font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:.7rem;
}
.fichas{display:flex;flex-wrap:wrap;gap:.5rem}
.ficha{
  min-height:48px;padding:.6rem 1.1rem;
  border:1px solid rgba(26,26,26,.28);border-radius:999px;
  background:none;color:var(--tinta);cursor:pointer;font:500 .95rem/1.2 var(--sans);
  transition:background var(--rapido) var(--curva),border-color var(--rapido) var(--curva);
}
.ficha:hover{border-color:var(--tinta)}
/* La clase la pone PHP según lo que diga la URL: no depende de :has() */
.ficha--activa{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.ficha:focus-within{outline:3px solid var(--bordo);outline-offset:3px}
.resultado{padding:0 var(--aire);color:var(--tinta-suave);font-size:.95rem}

/* --- Ficha de producto --- */
.ficha-prod{padding:var(--aire) 0 0}
.galeria{position:relative}
.galeria__marco{
  aspect-ratio:3/4;border-radius:var(--arco);overflow:hidden;
  margin:0 var(--aire);background:var(--crema-hondo);
}
.galeria__marco img{width:100%;height:100%;object-fit:cover}
.galeria__tiras{
  display:flex;gap:.6rem;padding:.9rem var(--aire) 0;overflow-x:auto;scrollbar-width:none;
}
.galeria__tiras::-webkit-scrollbar{display:none}
.galeria__tira{
  flex:0 0 68px;width:68px;height:88px;padding:0;overflow:hidden;
  border:1px solid transparent;border-radius:4px;background:none;cursor:pointer;
}
.galeria__tira img{width:100%;height:100%;object-fit:cover}
.galeria__tira[aria-current="true"]{border-color:var(--bordo)}

.compra{padding:var(--aire)}
.compra__rubro{
  font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--bordo);margin-bottom:.8rem;
}

/* --- Miga de pan ---
   Discreta: ubica sin competir con el título. El separador "›" lo pone
   el CSS y no el HTML, así no se lee dos veces con lector de pantalla. */
.migas ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .5rem;
  list-style:none;margin:0 0 .9rem;padding:0;
  font-size:.82rem;color:var(--tinta-suave);
}
.migas li{display:flex;align-items:center;gap:.5rem}
.migas li + li::before{content:"›";color:var(--dorado)}
.migas a{color:var(--tinta-suave);text-decoration:none;border-bottom:1px solid transparent}
.migas a:hover{color:var(--bordo);border-bottom-color:var(--dorado)}
.migas [aria-current="page"]{color:var(--tinta)}
.compra__nombre{font-size:clamp(2rem,8vw,3rem);margin-bottom:.3em}
.compra__precio{font-size:1.9rem;font-weight:600;margin:0 0 .2rem}
.compra__precio del{font-size:1.2rem;font-weight:400;color:var(--tinta-suave);margin-right:.6rem}
.compra__descuento{color:var(--alerta);font-weight:600;margin-right:.6rem}
.compra__cuotas{color:var(--tinta-suave);font-size:.95rem;margin-bottom:1.6rem}
.compra__desc{margin:1.6rem 0;max-width:56ch}
.compra__codigo{font-size:.85rem;letter-spacing:.1em;color:var(--tinta-suave)}

/* Selector de talle: botones grandes, agotado bien claro */
.opciones{margin:1.6rem 0}
.opciones__fila{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.talle{min-width:60px;min-height:52px;padding:.6rem 1rem;
  border:1px solid rgba(26,26,26,.3);border-radius:6px;
  background:none;cursor:pointer;font:500 1.05rem/1 var(--sans);color:var(--tinta);
  transition:border-color var(--rapido) var(--curva),background var(--rapido) var(--curva)}
.talle[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}
.talle--agotado{
  color:var(--tinta-suave);text-decoration:line-through;
  border-style:dashed;cursor:not-allowed;opacity:.7;
}
.talle--agotado::after{
  content:" agotado";font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;display:block;margin-top:.15rem;
}
.aviso-stock{color:var(--bordo);font-weight:500;font-size:.95rem}
.error-compra{color:var(--alerta);font-weight:500}

/* Barra pegada de compra: aparece cuando el botón original sale de pantalla */
.pegada{
  position:fixed;left:0;right:0;z-index:25;
  bottom:calc(76px + env(safe-area-inset-bottom));
  display:flex;gap:1rem;align-items:center;
  padding:.8rem var(--aire);
  background:var(--blanco);border-top:1px solid rgba(176,141,87,.35);
  transform:translateY(130%);
  transition:transform var(--medio) var(--curva);
}
.pegada.visible{transform:none}
.pegada__precio{font-weight:600;white-space:nowrap}
.pegada .boton{flex:1}

/* Guía de medidas */
.medidas{width:100%;border-collapse:collapse;margin-top:1rem;font-size:1rem}
.medidas th,.medidas td{padding:.7rem .5rem;text-align:left;border-bottom:1px solid rgba(26,26,26,.14)}
.medidas th{font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------------------
   7. LÁMINAS: MENÚ Y CARRITO
   --------------------------------------------------------------------- */

.lamina{
  position:fixed;inset:0;z-index:50;
  background:rgba(20,16,14,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.lamina[hidden]{display:none}

/* El menú puede tener bastantes rubros: scrollea si no entra, igual que .cajon */
.buscador{
  width:100%;max-height:88vh;overflow-y:auto;background:var(--crema);
  padding:var(--aire) var(--aire) calc(var(--aire) + env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;
  display:grid;gap:1.4rem;
}
.buscador form{display:grid;gap:.9rem}
.buscador__label{font-family:var(--serif);font-size:1.6rem}
.buscador__campo{
  width:100%;min-height:56px;padding:.9rem 1rem;font:400 1.125rem var(--sans);
  border:1px solid rgba(26,26,26,.3);border-radius:6px;background:var(--blanco);color:var(--tinta);
}

.menu__categorias{display:flex;flex-direction:column}
.menu__categorias a{
  padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid rgba(26,26,26,.12);
}
.menu__categorias a:first-child{border-top:1px solid rgba(26,26,26,.12)}

/* El carrito entra desde abajo en mobile: es donde llega el pulgar */
.cajon{
  width:100%;max-height:88vh;overflow-y:auto;
  background:var(--crema);
  padding:var(--aire) var(--aire) calc(var(--aire) + env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;
  animation:sube var(--medio) var(--curva);
}
@keyframes sube{from{transform:translateY(100%)}to{transform:none}}
.cajon__tope{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}
.cajon__tope h2{margin:0;font-size:1.8rem}
.cajon__vacio{color:var(--tinta-suave)}
.cajon__lista{list-style:none;margin:0;padding:0}
.cajon__fila{
  display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid rgba(26,26,26,.12);
}
.cajon__fila img{border-radius:3px;object-fit:cover;width:64px;height:85px}
.cajon__datos{min-width:0}
.cajon__nombre{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.2}
.cajon__detalle{margin:.2rem 0;font-size:.9rem;color:var(--tinta-suave)}
.cajon__precio{margin:0;font-weight:600}
.cantidad{display:flex;align-items:center;gap:.2rem}
.cantidad button{
  width:44px;height:44px;border:1px solid rgba(26,26,26,.25);border-radius:50%;
  background:none;color:var(--tinta);font-size:1.2rem;cursor:pointer;
}
.cantidad span{min-width:2ch;text-align:center;font-weight:600}
.cajon__pie{padding-top:1.2rem}
.cajon__total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.3rem}
.cajon__total strong{font-size:1.7rem;font-family:var(--serif)}
.cajon__nota{font-size:.9rem;color:var(--tinta-suave);margin-bottom:1rem}

/* Miniatura que vuela al carrito */
.vuela{
  position:fixed;z-index:60;width:64px;height:84px;
  border-radius:4px;overflow:hidden;pointer-events:none;
  transition:transform .55s var(--curva), opacity .55s var(--curva);
}
.vuela[hidden]{display:none}
.vuela img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------------
   8. CHECKOUT
   --------------------------------------------------------------------- */

.pago{padding:var(--aire);max-width:640px;margin:0 auto}
.pago h1{font-size:clamp(2rem,8vw,3rem)}
.campo{margin-bottom:1.2rem}          /* un campo por fila, siempre */
.campo label{
  display:block;margin-bottom:.4rem;font-weight:500;font-size:1rem;
}
.campo input,.campo textarea,.campo select{
  width:100%;min-height:56px;padding:.9rem 1rem;
  font:400 1.125rem var(--sans);color:var(--tinta);
  background:var(--blanco);border:1px solid rgba(26,26,26,.3);border-radius:6px;
}
.campo textarea{min-height:110px;resize:vertical}
.campo__ayuda{font-size:.9rem;color:var(--tinta-suave);margin:.35rem 0 0}
.campo--mal input{border-color:var(--alerta)}
.campo__error{color:var(--alerta);font-size:.95rem;margin:.35rem 0 0}

.entrega{display:grid;gap:.8rem;margin-bottom:1.5rem}
.entrega__opcion{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1.1rem;border:1px solid rgba(26,26,26,.28);border-radius:10px;cursor:pointer;
}
.entrega__opcion[data-elegida="1"]{border-color:var(--bordo);background:var(--blanco)}
.entrega__opcion input{width:24px;height:24px;margin:.15rem 0 0;accent-color:var(--bordo)}
.entrega__opcion strong{display:block;font-size:1.1rem}
.entrega__opcion span{color:var(--tinta-suave);font-size:.95rem}

.resumen{background:var(--crema-hondo);border-radius:12px;padding:var(--aire);margin-bottom:1.5rem}
.resumen__fila{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.resumen__fila--total{
  padding-top:.8rem;margin-top:.8rem;border-top:1px solid rgba(26,26,26,.18);
  font-size:1.3rem;font-weight:600;
}
.resumen__items{list-style:none;margin:0 0 1rem;padding:0}
.resumen__item{display:flex;justify-content:space-between;gap:1rem;
  padding:.5rem 0;border-bottom:1px solid rgba(26,26,26,.1);font-size:1rem}

.mensaje{padding:var(--aire);max-width:620px;margin:0 auto;text-align:center}
.mensaje__icono{width:64px;height:64px;stroke:var(--bordo);stroke-width:1;margin:0 auto 1.5rem}
.mensaje__codigo{
  display:inline-block;margin:1rem 0;padding:.6rem 1.4rem;
  background:var(--crema-hondo);border-radius:999px;
  font:600 1.1rem var(--sans);letter-spacing:.1em;
}

/* ---------------------------------------------------------------------
   9. MOVIMIENTO
   ---------------------------------------------------------------------
   Entra una vez, corto, y termina antes de que puedas leer.
   Los items de la grilla usan sólo opacidad, porque el desfase de la
   segunda columna ya se está llevando el transform. */

/* Escondidos sólo detrás de .js (la agrega un script mínimo en <head>):
   sin JavaScript, o mientras carga, el contenido se ve directamente en
   vez de quedar en opacity:0 para siempre. tienda.js es quien agrega
   ".visible", y lo hace SIN depender de que Vue haya cargado. */
.js .revelar{opacity:0;transform:translateY(16px)}
.js .revelar-suave{opacity:0}
.revelar.visible{
  opacity:1;transform:none;
  transition:opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.revelar-suave.visible{opacity:1;transition:opacity .45s var(--curva)}

/* Hero: zoom lentísimo en la foto. El título va visible de entrada, sin
   animación propia — es lo primero que lee cualquiera que entra al sitio,
   y no puede depender de ninguna animación para mostrarse. */
.vidriera__foto img{animation:acerca 9s var(--curva) forwards}
@keyframes acerca{from{transform:scale(1)}to{transform:scale(1.06)}}

.late{animation:late .4s var(--curva)}
@keyframes late{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

/* Quien pidió menos movimiento no ve NADA moverse. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* !important porque .js .revelar pesa más por especificidad (dos clases
     contra una) y si no, esta regla pierde y el contenido queda invisible. */
  .revelar,.revelar-suave{opacity:1 !important;transform:none !important}
  .cinta__pista{animation:none;transform:none}
  .pegada{transform:none;position:static;bottom:auto}
}

/* ---------------------------------------------------------------------
   10. ESCRITORIO
   --------------------------------------------------------------------- */

@media (min-width:600px){
  .grilla{grid-template-columns:repeat(3,1fr);gap:2rem 1.4rem}
  .carrusel > *{flex-basis:38%}
  .rubros{grid-template-columns:repeat(3,1fr);gap:2rem 1.4rem}
  .locales{grid-template-columns:repeat(2,1fr)}   /* 5 locales: de a dos hasta que entre el escritorio */
  .garantias{grid-template-columns:repeat(3,1fr)}
  .pie__grilla{grid-template-columns:repeat(2,1fr)}   /* 4 columnas: de a dos hasta el escritorio */
}

@media (min-width:900px){
  body{padding-bottom:0}

  /* Ancho máximo centrado: sin esto, en un monitor ancho cada sección se
     estira de punta a punta (el hero quedaba pegado al borde izquierdo)
     en vez de leerse como una página con márgenes prolijos. */
  .vidriera, .seccion__tope, .carrusel, .rubros, .grilla, .locales,
  .garantias, .filtros, .resultado {
    max-width:1240px;margin-left:auto;margin-right:auto;
  }

  .locales{grid-template-columns:repeat(5,1fr)}   /* los 5 locales entran en una fila */
  .pie__grilla{grid-template-columns:repeat(4,1fr)}
  .pulgar{display:none}                    /* en escritorio sobra */
  /* Columnas laterales anchas (1fr) con botones de 52px: sin justify-self
     el botón se apoya al principio de su columna y el carrito queda pegado
     al logo. Cada uno va a su extremo. */
  .tope__fila{grid-template-columns:1fr auto 1fr;padding:1rem var(--aire)}
  .tope__fila > :first-child{justify-self:start}
  .tope__fila > :last-child{justify-self:end}

  /* La foto y el texto pasan de estar apilados a estar lado a lado.
     Arriba va menos aire que abajo: --aire-alto es la separación entre
     secciones, y acá arriba sólo está la barra, así que dejaba un hueco
     grande antes de que empiece la página. */
  .vidriera{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
            gap:var(--aire);padding:var(--aire) var(--aire) var(--aire-alto)}
  .vidriera__foto{aspect-ratio:4/5;max-height:75vh}
  .vidriera__texto{padding:0}
  .vidriera__bajada{font-size:1.15rem}

  .grilla{grid-template-columns:repeat(4,1fr)}
  .carrusel > *{flex-basis:23%}

  /* La ficha en dos columnas, con la galería pegada arriba */
  .ficha-prod{display:grid;grid-template-columns:1.1fr .9fr;
              gap:var(--aire);max-width:1240px;margin:0 auto}
  .galeria{position:sticky;top:120px;align-self:start}
  .galeria__marco{margin:0}
  .compra{padding:0 var(--aire) var(--aire) 0}
  .pegada{display:none}                    /* el botón siempre está a la vista */

  .seccion__tope{display:flex;justify-content:space-between;align-items:flex-end}

  /* El carrito entra desde el costado */
  .lamina{align-items:stretch;justify-content:flex-end}
  .cajon{max-width:460px;max-height:none;border-radius:0;animation:entra var(--medio) var(--curva)}
  @keyframes entra{from{transform:translateX(100%)}to{transform:none}}
  .buscador{max-width:560px;align-self:flex-start;margin-top:12vh;border-radius:14px}
  .lamina#menu{align-items:flex-start;justify-content:center}
}