@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --espresso: #000;
  --cocoa: #000;
  --cream: #fff;
  --paper: #fff;
  --bone: #fff;
  --hide: #fff;
  --blush: #000;
  --blush-deep: #000;
  --ink-soft: #000;
  --line: rgba(0, 0, 0, .14);
  --shadow: 0 24px 60px rgba(0, 0, 0, .08);
  --ok: #000;
  --warn: #000;
  --violet: #000;
  --danger: #000;
}

* { box-sizing: border-box; margin: 0; }
/* Lo oculto se oculta SIEMPRE, aunque el elemento tenga un display propio. Sin
   esto, los renglones del título del hero (display:block) seguían ocupando su
   línea al vaciarlos, porque una regla de clase le gana al display:none que
   trae el atributo hidden por defecto. */
[hidden] { display: none !important; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--espresso);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.app-loading {
  overflow: hidden;
}

body.app-loading .topbar,
body.app-loading main,
body.app-loading footer,
body.app-loading .cart-fondo,
body.app-loading .cart-panel,
body.app-loading .wa-pop,
body.app-loading .wa-burbuja {
  visibility: hidden;
}

body.app-loading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    radial-gradient(circle at 50% 44%, rgba(0, 0, 0, .035), transparent 160px),
    #fff;
}

body.app-loading::after {
  content: "";
  position: fixed;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  z-index: 9999;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-top-color: #000;
  border-radius: 999px;
  animation: loulou-spin .72s linear infinite;
}

@keyframes loulou-spin {
  to { transform: rotate(360deg); }
}

body > main { flex: 1 0 auto; width: 100%; }
body > footer { flex: 0 0 auto; width: 100%; margin-top: auto; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 86px;
  padding: 0 34px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.logo {
  display: inline-flex;
  width: 84px;
  height: 66px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.logo img { width: 82px; height: 62px; object-fit: contain; }

.topbar nav { display: flex; align-items: center; gap: 24px; }
.topbar nav a {
  color: var(--cocoa);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
}
.topbar nav a:hover { color: var(--espresso); border-bottom-color: var(--espresso); }

.menu-toggle {
  display: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--espresso);
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  width: 34px;
  height: 34px;
  margin-left: 10px;
}
.cart-link svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
}
.cart-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

main {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 34px 92px;
}

.home-main {
  max-width: none;
  padding-top: 0;
  overflow-x: clip;
}
/* Carrusel y categorías comparten la caja: son dos bloques hermanos que se
   pueden reordenar, así que ninguno puede depender de ir después del otro. */
.home-main #destacados,
.home-main #homeCategoriasBloque {
  max-width: 1192px;
  margin: 64px auto 0;
}
/* El bloque que quede primero arranca pegado al header, sea cual sea. */
.home-main > [data-bloque]:first-child { margin-top: 0; }

.home-intro-video {
  width: 100vw;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - 86px);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #090909;
}
.home-intro-video[hidden] { display: none; }
.home-intro-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero { background: #fff; }
.eyebrow {
  display: block;
  color: var(--cocoa);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.page-title,
.politicas h1,
.info h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

.boton,
.hero-cta,
.regret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--espresso);
  color: #fff;
  border: 1px solid var(--espresso);
  border-radius: 2px;
  padding: 14px 26px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(38, 18, 12, .14);
}
.boton:hover,
.hero-cta:hover,
.regret-btn:hover { background: #222; color: #fff; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--espresso);
  color: var(--espresso);
  border-radius: 2px;
  padding: 14px 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.btn-ghost:hover { background: var(--espresso); color: #fff; }

/* La descripción es del estilo "etiqueta" nada más: en el clásico ese lugar lo
   ocupa el título grande. */
.drop-descripcion { display: none; }

/* ---------- Hero estilo "etiqueta" ---------- */
/* Las fotos numeradas a la izquierda y, a la derecha, la etiqueta sin Costura
   ni Corte, la descripción y el botón. Sin título grande.

   Se arma con display:contents en .drop-stage y .drop-copy: sus hijos pasan a
   ser celdas de la grilla del hero, así el bloque de fotos y la etiqueta quedan
   uno al lado del otro sin duplicar el marcado ni mover nodos con javascript.
   Un solo <a> de "Ver producto" en el HTML: hero-drop.js le pone el href al
   cambiar de producto y no hay que acordarse de actualizar dos. */
.drop-hero.hero-etiqueta {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "visual etiqueta"
    "visual descripcion"
    "visual boton";
  gap: 0 48px;
  align-items: start;
}
.hero-etiqueta .drop-stage,
.hero-etiqueta .drop-copy { display: contents; }
.hero-etiqueta .drop-kicker,
.hero-etiqueta #dropTitle,
.hero-etiqueta .drop-piece-meta,
.hero-etiqueta .drop-origin { display: none; }

.hero-etiqueta .drop-visual { grid-area: visual; }
.hero-etiqueta .drop-passport {
  grid-area: etiqueta;
  /* Quedan tres celdas: la marca, Edición y Proveniencia. */
  grid-template-columns: 148px 1fr 1fr;
  min-height: 0;
  margin-top: 34px;
}
.hero-etiqueta [data-passport="costura"],
.hero-etiqueta [data-passport="corte"] { display: none; }

.hero-etiqueta .drop-descripcion {
  display: block;
  grid-area: descripcion;
  max-width: 46ch;
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.65;
  color: #333;
}
.hero-etiqueta .drop-cta {
  grid-area: boton;
  justify-self: start;
  align-self: start;
  margin-top: 26px;
}

/* Ajustes que sólo tienen sentido con las dos columnas al lado. Van en una
   consulta propia y no en el bloque de arriba para no pisar la maqueta apilada,
   que acomoda estas mismas piezas de otra manera. */
@media (min-width: 901px) {
  /* Los números del drop, pegados a la izquierda. Vienen anclados a la derecha
     del bloque de fotos, que acá es la columna izquierda: el 01 terminaba
     flotando contra el medio del hero en vez de arrancar el bloque. */
  .hero-etiqueta .drop-switcher { right: auto; left: 0; }

  /* La columna derecha se centra contra el alto de la foto en lugar de quedar
     colgada arriba. Las dos filas 1fr de los extremos son todo el centrado. */
  .drop-hero.hero-etiqueta {
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      "visual ."
      "visual etiqueta"
      "visual descripcion"
      "visual boton"
      "visual .";
  }
  /* El margen de arriba lo reemplaza el centrado. */
  .hero-etiqueta .drop-passport { margin-top: 0; min-height: 208px; }
  .hero-etiqueta .drop-passport > * { padding: 24px 30px; }
  .hero-etiqueta .drop-descripcion { margin-top: 30px; }
  .hero-etiqueta .drop-cta {
    justify-self: center;
    min-width: 280px;
    padding: 20px 36px;
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  /* Una sola columna: primero las fotos y después la etiqueta con su texto. */
  .drop-hero.hero-etiqueta {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "visual" "etiqueta" "descripcion" "boton";
    gap: 0;
  }
  .hero-etiqueta .drop-passport { margin-top: 26px; }
}

@media (max-width: 620px) {
  /* La etiqueta se esconde en pantallas chicas igual que en el clásico: apilada
     en una columna se estiraba muchísimo y empujaba la descripción y el botón
     fuera de la primera pantalla. Queda foto, descripción y botón. */
  .hero-etiqueta .drop-passport { display: none; }
  .hero-etiqueta .drop-descripcion { font-size: 15.5px; margin-top: 20px; }
  .hero-etiqueta .drop-cta { width: 100%; }
}

/* ---------- Hero personalizado ---------- */
/* Dos columnas que arma el panel. sitio.js mueve cada pieza a la columna que le
   toca, así que acá no hay reglas por pieza: sólo las columnas y las variantes
   de tamaño y alineación que se eligen desde el editor. */
.drop-hero.hero-personalizado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
.hp-col { display: flex; flex-direction: column; min-width: 0; }
/* Dentro de una columna manda el orden del DOM, que es el que armó el panel.
   Se resetea `order` a mano porque otras reglas del hero lo usan para reacomodar
   estas mismas piezas, y si alguna alcanza a la maqueta personalizada le da
   vuelta las columnas sin que se note de dónde viene. */
.hero-personalizado .hp-col > * { order: 0; }

/* Cada pieza deja de traer sus márgenes de fábrica: el aire lo pone el editor.
   Sin esto se sumaba al que ya tenía y nada quedaba donde se lo dejaba. */
.hero-personalizado .hp-pieza { margin: 0; }

.hero-personalizado .hp-izq { align-self: flex-start; text-align: left; }
.hero-personalizado .hp-centro { align-self: center; text-align: center; }
.hero-personalizado .hp-der { align-self: flex-end; text-align: right; }

/* Las fotos y la etiqueta no se encogen al contenido: ocupan la columna. */
.hero-personalizado .drop-visual,
.hero-personalizado .drop-passport { align-self: stretch; width: 100%; }
.hero-personalizado .drop-visual { min-height: 520px; }
/* La descripción está apagada de fábrica porque el hero clásico no la usa. Acá
   se puede poner en cualquier columna, así que se enciende. */
.hero-personalizado .drop-descripcion { display: block; max-width: none; }

/* El título vive en media columna, no en el ancho del hero: con las medidas de
   la maqueta clásica los renglones (que van con white-space: nowrap) se salían
   por el costado. */
.hero-personalizado h1 { max-width: none; font-size: clamp(40px, 3.4vw, 60px); margin: 0; }

/* Tamaños. Se toca el font-size y la escala propia de cada pieza, no un zoom
   general: un transform borronearía las fotos y descolocaría la etiqueta. */
.hero-personalizado .hp-chico { font-size: .8em; }
.hero-personalizado .hp-grande { font-size: 1.25em; }
.hero-personalizado .drop-visual.hp-chico { min-height: 380px; font-size: 1em; }
.hero-personalizado .drop-visual.hp-grande { min-height: 660px; font-size: 1em; }
.hero-personalizado h1.hp-chico { font-size: clamp(28px, 2.3vw, 40px); }
.hero-personalizado h1.hp-grande { font-size: clamp(48px, 4.4vw, 78px); }
.hero-personalizado .drop-cta.hp-chico { min-width: 150px; padding: 12px 20px; }
.hero-personalizado .drop-cta.hp-grande { min-width: 300px; padding: 22px 40px; }

/* Con un color de fondo propio, la pieza necesita aire adentro o el texto queda
   pegado al borde. */
.hero-personalizado .hp-pieza[style*="background"] { padding: 14px 18px; }

@media (max-width: 900px) {
  /* Una sola columna: primero lo de la izquierda, después lo de la derecha.
     Sale solo de apilar las dos columnas del grid, sin configurar nada aparte. */
  .drop-hero.hero-personalizado { grid-template-columns: 1fr; gap: 0; }
  .hero-personalizado .drop-visual { min-height: 430px; }
  .hero-personalizado .drop-visual.hp-grande { min-height: 520px; }
  /* Alinear a la derecha en un celular deja el texto contra el borde y se lee
     mal; las piezas centradas sí se respetan. */
  .hero-personalizado .hp-der { align-self: flex-start; text-align: left; }
}

@media (max-width: 620px) {
  /* Misma razón que en las otras dos maquetas: la etiqueta apilada se estira
     tanto que empuja todo lo demás fuera de la primera pantalla. */
  .hero-personalizado .drop-passport { display: none; }
}

/* ---------- Hero clásico en una columna ---------- */
/* Apilado, el bloque de texto entero quedaba arriba y las cuatro fotos al
   fondo: para llegar al botón había que pasarlas de largo, y el dato del
   producto hablaba de una foto que todavía no se veía.

   display:contents saca del medio al contenedor del texto y sus hijos pasan a
   ser celdas de la misma columna que las fotos; con `order` el dato, el origen
   y el botón se van abajo de todo. Sólo en la maqueta clásica: la Etiqueta ya
   arma su propio orden. */
@media (max-width: 900px) {
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) .drop-copy { display: contents; }
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) .drop-kicker { order: 1; margin-top: 12px; }
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) #dropTitle { order: 2; }
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) .drop-visual { order: 3; }
  /* El padding que traía .drop-copy se perdió con display:contents, así que la
     separación con las fotos la pone ahora el primer elemento de abajo. */
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) .drop-piece-meta { order: 4; margin-top: 30px; }
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) .drop-origin { order: 5; }
  .drop-hero:not(.hero-etiqueta):not(.hero-personalizado) .drop-cta { order: 6; }
}

.drop-hero {
  display: flex;
  flex-direction: column;
  max-width: 1372px;
  min-height: calc(100svh - 86px);
  margin: 0 auto;
  padding: 38px 26px 22px;
  border-bottom: 1px solid var(--line);
}
.drop-stage {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(430px, .84fr) minmax(0, 1.16fr);
  min-height: 625px;
  align-items: center;
}
.drop-copy {
  position: relative;
  z-index: 2;
  padding: 24px 0;
}
.drop-kicker {
  display: inline-block;
  margin-bottom: 28px;
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .28em;
  line-height: 1;
  text-transform: uppercase;
}
.drop-hero h1 {
  max-width: 620px;
  margin: 0 0 46px;
  font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  font-size: clamp(60px, 5.3vw, 82px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.03;
  text-transform: uppercase;
}
.drop-hero h1 span,
.drop-hero h1 em { display: block; white-space: nowrap; }
.drop-hero h1 em { font-weight: 400; }
.drop-piece-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: fit-content;
  min-width: 178px;
  padding-bottom: 12px;
  border-bottom: 1px dotted rgba(0, 0, 0, .45);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.drop-piece-meta strong { font-size: 18px; letter-spacing: .16em; }
.drop-origin {
  margin: 10px 0 34px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.drop-cta {
  min-width: 192px;
  padding: 16px 28px;
  border-radius: 0;
  box-shadow: none;
}
.drop-visual {
  position: relative;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}
.drop-switcher {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 3;
  display: flex;
  gap: 30px;
}
.drop-switcher button {
  position: relative;
  min-width: 28px;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  color: rgba(0, 0, 0, .45);
  font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  font-size: 18px;
  line-height: 1;
}
.drop-switcher button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #000;
  content: '';
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}
.drop-switcher button[aria-selected="true"] { color: #000; }
.drop-switcher button[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); }
.drop-switcher button:focus-visible { outline: 1px solid #000; outline-offset: 6px; }
.drop-image-wrap {
  position: absolute;
  inset: 82px 10px 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.drop-image-wrap img {
  --drop-scale: 1.55;
  --drop-y: -24px;
  --drop-mobile-scale: 1.38;
  --drop-mobile-y: -8px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(var(--drop-y)) scale(var(--drop-scale));
  transition: opacity .22s ease, transform .55s ease;
}
.drop-image-wrap img[data-drop-item="sobre"] {
  --drop-scale: 1.76;
  --drop-y: -8px;
  --drop-mobile-scale: 1.5;
  --drop-mobile-y: 0px;
}
.drop-image-wrap img[data-drop-item="midori"] {
  --drop-scale: 1.58;
  --drop-y: -12px;
  --drop-mobile-scale: 1.38;
  --drop-mobile-y: 0px;
}
.drop-image-wrap img[data-drop-item="cinturon"] {
  /* Las fotos de cinturón son más verticales que el resto. Se agrandan un poco
     para no perder presencia contra carteras/midoris, pero sin volver al zoom
     que tapaba la hebilla o la punta. */
  --drop-scale: 1.13;
  --drop-y: -4px;
  --drop-mobile-scale: 1.02;
  --drop-mobile-y: 0px;
}
.drop-image-wrap img[data-drop-photo="cinturon-cafe-cutout"] {
  --drop-scale: 1.18;
  --drop-mobile-scale: 1.08;
}
.drop-image-wrap img[data-drop-photo="cinturon-cafe-01"],
.drop-image-wrap img[data-drop-photo="cinturon-cafe-02"] {
  --drop-scale: 1.05;
  --drop-mobile-scale: .98;
}
.drop-image-wrap img.cambiando { opacity: 0; }

.drop-passport {
  position: relative;
  display: grid;
  grid-template-columns: 178px 1fr 1fr 1fr 136px;
  min-height: 190px;
  border: 1px solid rgba(0, 0, 0, .42);
  background: #fff;
}
.drop-passport > * {
  min-width: 0;
  padding: 20px 28px;
  border-right: 1px solid var(--line);
}
.passport-id {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 15px;
  padding: 10px 16px !important;
}
.passport-id span,
.passport-label,
.passport-provenance span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.passport-id > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.passport-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.passport-brand img {
  width: 54px;
  height: 42px;
  object-fit: contain;
  transform: rotate(90deg);
}
.passport-brand b { font: inherit; white-space: nowrap; }
.passport-barcode {
  width: 68px;
  height: 164px;
  object-fit: contain;
  transform: scaleX(1.65);
}
.passport-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.passport-cell strong {
  margin: 12px 0;
  font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.06;
}
.passport-signature {
  width: 76px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
  border-top: 1px dotted rgba(0, 0, 0, .46);
  padding-top: 8px;
}
.passport-cell small,
.passport-provenance small {
  padding-top: 12px;
  border-top: 1px dotted rgba(0, 0, 0, .46);
  font-size: 11px;
  letter-spacing: .06em;
}
.passport-provenance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 0 !important;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.passport-provenance strong {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.passport-provenance small {
  padding-top: 0;
  border-top: 0;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 58px 0 26px;
}
.page-title { font-size: 48px; line-height: 1; }
.section-note { max-width: 520px; color: var(--ink-soft); font-size: 15px; }

.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 22px 0 34px;
}
.filtros button,
.tabs button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--cocoa);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  padding: 10px 18px;
  text-transform: uppercase;
}
.filtros button.activo,
.tabs button.activo {
  background: var(--espresso);
  border-color: var(--espresso);
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 34px 24px;
}
.card {
  color: inherit;
  display: block;
  text-decoration: none;
}
.card .foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  padding: 0;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .7s ease;
}
.card img[src*="-cutout"] { transform: scale(1.32) translateY(-2%); }
.card:hover img { transform: scale(1.08); }
.card:hover img[src*="-cutout"] { transform: scale(1.38) translateY(-2%); }
.card .cat {
  color: var(--cocoa);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  margin-top: 14px;
  text-transform: uppercase;
}
.card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  margin: 4px 0;
}
.fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.precio { color: #27160f; font-size: 15px; font-weight: 500; }
.badge {
  border: 1px solid rgba(63, 111, 60, .22);
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 5px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge.pocas { background: #fff; border-color: var(--line); color: #000; }
.badge.pedido { background: #fff; border-color: var(--line); color: #000; }
.badge.agotado,
.stock.agotado { background: #000; border-color: #000; color: #fff; }
.cargando { color: var(--cocoa); font-style: italic; grid-column: 1 / -1; padding: 42px 0; text-align: center; }

.carousel-shell { position: relative; }
.product-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 24vw);
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 1px 18px;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
.product-carousel .card { scroll-snap-align: start; }
.grid .card .cat,
.grid .card h3,
.product-carousel .card .cat,
.product-carousel .card h3 { text-align: center; }
.grid .card h3,
.product-carousel .card h3 {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 6px 0;
}
.grid .card .fila,
.product-carousel .card .fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.grid .card .precio,
.product-carousel .card .precio { grid-column: 2; text-align: center; }
.grid .card .badge,
.product-carousel .card .badge { grid-column: 3; justify-self: end; }
.carousel-arrow {
  position: absolute;
  top: min(40%, 260px);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #000;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #000;
  cursor: pointer;
  font-size: 21px;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.carousel-arrow:hover { background: #000; color: #fff; }
/* Flecha de una punta del carrusel, cuando ya no hay nada para ese lado. Va con
   visibility además de opacity para que también salga del recorrido del
   tabulador: si sólo se apagara la opacidad, seguiría siendo un botón enfocable
   e invisible. */
.carousel-arrow.oculta { opacity: 0; visibility: hidden; pointer-events: none; }
.carousel-prev { left: -22px; }
.carousel-next { right: -22px; }

.home-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  /* La separación con el bloque de arriba ya la pone #homeCategoriasBloque. */
}
.home-category {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.home-category::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .42);
  transition: background .35s ease;
}
.home-category:hover::after { background: rgba(0, 0, 0, .28); }
.home-category img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.home-category:hover img { transform: scale(1.025); }
.home-category span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.story-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 86px;
  background: var(--espresso);
  color: var(--paper);
  box-shadow: 0 0 0 100vmax var(--espresso);
  clip-path: inset(0 -100vmax);
}
.story-band img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.story-copy { padding: 84px 68px; display: flex; flex-direction: column; justify-content: center; }
.story-copy h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 24px;
}
.story-copy p { color: #eadfcc; max-width: 500px; margin-bottom: 18px; }

.volver {
  display: inline-flex;
  color: var(--cocoa);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  margin: 30px 0 24px;
  text-decoration: none;
  text-transform: uppercase;
}
.producto {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}
.galeria {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.foto-principal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: inherit;
  cursor: zoom-in;
  font: inherit;
  overflow: hidden;
  padding: 0;
  width: fit-content;
  max-width: 100%;
}
.foto-principal img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 680px);
  max-height: min(78svh, 820px);
  border: 1px solid var(--line);
  border-radius: 2px;
  object-fit: contain;
  transform: none;
}
.foto-principal img[src*="-cutout"] { transform: none; }
.thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
  width: 100%;
  max-width: min(100%, 680px);
}
.thumbs button {
  aspect-ratio: 1;
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.thumbs img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.thumbs img[src*="-cutout"] { transform: scale(1.22) translateY(-2%); }
.thumbs button.activo { border-color: var(--espresso); }
.modal-foto-abierto { overflow: hidden; }
.foto-modal[hidden] { display: none; }
.foto-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  background: rgba(19, 15, 12, .92);
  color: #fff;
  padding: 34px;
  pointer-events: auto;
}
.foto-modal figure {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  margin: 0;
  overflow: hidden;
}
.foto-modal-imagen {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1120px;
  max-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
  cursor: zoom-in;
  line-height: 0;
  padding: 0;
}
.foto-modal-imagen.zoom-activo,
.foto-modal-imagen[aria-pressed="true"] { cursor: zoom-out; }
.foto-modal img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, calc(100vw - 220px), 1120px);
  max-height: calc(100vh - 160px);
  object-fit: contain;
  transform: scale(1);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transition: transform .16s ease;
}
.foto-modal-imagen.zoom-activo img,
.foto-modal-imagen[aria-pressed="true"] img { transform: scale(1.85); }
.foto-modal figcaption {
  margin-top: 16px;
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.foto-modal button {
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  pointer-events: auto;
}
.foto-modal-cerrar {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}
.foto-modal-nav {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 34px;
  line-height: 1;
}
.foto-modal-nav.anterior { grid-column: 1; grid-row: 1; justify-self: center; }
.foto-modal-nav.siguiente { grid-column: 3; grid-row: 1; justify-self: center; }
.info { padding-top: 8px; }
.info .cat {
  color: var(--cocoa);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.info h1 { font-size: 54px; line-height: 1; margin: 12px 0 14px; }
.precio-grande { font-size: 26px; font-weight: 500; margin-bottom: 18px; }
.stock {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  margin-bottom: 24px;
  padding: 7px 14px;
  text-transform: uppercase;
}
.stock.ok { color: var(--ok); }
.stock.pedido { color: var(--violet); }
.descripcion { color: var(--ink-soft); font-size: 16px; margin: 0 0 26px; max-width: 520px; white-space: pre-line; }
.nota { border-top: 1px solid var(--line); color: var(--cocoa); font-size: 13.5px; margin-top: 18px; padding-top: 16px; }
.nota a { border-bottom: 1px solid var(--line); }

.politicas { max-width: 760px; padding-top: 58px; }
.politicas h1 { font-size: 58px; line-height: 1; margin-bottom: 24px; }
.politicas h2 {
  border-top: 1px solid var(--line);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin: 30px 0 12px;
  padding-top: 22px;
}
.politicas p,
.politicas li { color: var(--ink-soft); margin-bottom: 12px; }
.politicas a { border-bottom: 1px solid var(--espresso); color: var(--espresso); font-weight: 400; }
.politicas ul { padding-left: 22px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.contact-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  color: #000;
  padding: 22px;
}
.contact-card span,
.post-card span {
  display: block;
  color: #000;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-card strong {
  display: block;
  color: #000;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.05;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
}
.post-card {
  color: #000;
}
.post-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px;
  margin-bottom: 16px;
}
.post-card h2 {
  border: none;
  color: #000;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 10px;
  padding: 0;
}
.post-card p {
  color: #000;
}

.panelbox,
.login-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 16px 40px rgba(63, 35, 20, .06);
}
.panelbox { padding: 22px; margin-bottom: 20px; }
.login-box { max-width: 400px; margin: 60px auto; padding: 28px; }

label {
  color: var(--cocoa);
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  margin: 12px 0 6px;
  text-transform: uppercase;
}
input,
select,
textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--espresso);
  padding: 11px 12px;
}
textarea { min-height: 100px; resize: vertical; }
input:focus,
select:focus,
textarea:focus { border-color: var(--espresso); outline: none; }

.boton-sec {
  background: #fff;
  border: 1px solid var(--espresso);
  border-radius: 2px;
  color: var(--espresso);
  padding: 8px 14px;
}
.boton-sec:hover { background: var(--espresso); color: #fff; }
.peligro {
  background: #fff;
  border: 1px solid var(--danger);
  border-radius: 2px;
  color: var(--danger);
  padding: 6px 10px;
}
.error { color: var(--danger); margin-top: 8px; }
.exito { color: var(--ok); margin-top: 8px; }

table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border-bottom: 1px solid var(--line); font-size: 14px; padding: 10px; text-align: left; vertical-align: middle; }
.mini { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.stock-input { width: 72px; }
tr.inactivo { opacity: .5; }
td .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
td .acciones button { font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.chip { position: relative; }
.chip img { width: 62px; height: 62px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.chip button {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  background: var(--danger);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}
.tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

footer {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) minmax(260px, 1fr);
  column-gap: 48px;
  row-gap: 18px;
  background: var(--bone);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 28px 34px 18px;
}
footer a { color: var(--espresso); }
footer > div:first-child { display: contents; }
.footer-brand {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  width: 154px;
  height: 112px;
}
.footer-brand img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.footer-copy {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  max-width: 430px;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
  white-space: pre-line;
}
.footer-links {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: grid;
  align-content: center;
  align-self: center;
  justify-items: center;
  gap: 8px;
  min-height: 0;
  padding-top: 0;
  text-align: center;
}
.footer-links a {
  max-width: 240px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}
.footer-bottom {
  grid-column: 1 / -1;
  grid-row: 3;
  border-top: 1px solid var(--line);
  color: rgba(0, 0, 0, .62);
  font-size: 10.5px;
  letter-spacing: .14em;
  margin-top: 2px;
  padding-top: 14px;
  text-transform: uppercase;
}
.legal-box {
  background: var(--paper);
  border: 1px solid var(--espresso);
  margin-top: 18px;
  max-width: 430px;
  padding: 16px;
}
.legal-box strong {
  display: block;
  color: var(--cocoa);
  font-size: 11px;
  letter-spacing: .16em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.legal-box p { color: var(--ink-soft); font-size: 13px; margin-bottom: 12px; }

@media (max-width: 900px) {
  main { padding: 0 22px 70px; }
  .topbar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    min-height: 72px;
    padding: 8px 16px;
    gap: 8px;
  }
  .menu-toggle {
    display: inline-flex;
    width: 48px;
    height: 48px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    justify-self: start;
  }
  .menu-toggle:focus-visible,
  .cart-link:focus-visible,
  .logo:focus-visible { outline: 1px solid var(--espresso); outline-offset: 2px; }
  .topbar.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .topbar.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .topbar.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .topbar .logo { grid-column: 2; justify-self: center; }
  .topbar .cart-link {
    grid-column: 3;
    justify-self: end;
    width: 48px;
    height: 48px;
    margin-left: 0;
  }
  .topbar nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    width: 100%;
    gap: 0;
    padding: 8px 22px 16px;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .topbar nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding: 0;
  }
  .topbar nav a:last-child { border-bottom: 0; }
  .topbar.menu-open nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .home-main { padding: 0 22px 70px; }
  .home-main #destacados,
  .home-main #homeCategoriasBloque { margin-top: 48px; }
  .drop-hero { min-height: 0; padding: 42px 0 28px; }
  .drop-stage { grid-template-columns: 1fr; min-height: 0; }
  .drop-copy { padding: 12px 0 24px; }
  .drop-hero h1 { max-width: 680px; font-size: clamp(60px, 10vw, 82px); }
  .drop-visual { min-height: 570px; }
  .drop-image-wrap { inset: 70px 4vw 8px; }
  .drop-passport { grid-template-columns: 130px repeat(3, 1fr); }
  .drop-passport > * { padding: 24px; }
  .passport-provenance {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    writing-mode: initial;
    transform: none;
  }
  .passport-provenance span { margin-right: auto; }
  .story-band { grid-template-columns: 1fr; }
  .story-copy { padding: 56px 28px; }
  .producto { grid-template-columns: 1fr; gap: 34px; }
  .galeria { align-items: stretch; }
  .foto-principal {
    display: flex;
    width: 100%;
  }
  .foto-principal img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
  }
  .foto-modal {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 8px;
    padding: 62px 14px 26px;
  }
  .foto-modal-nav {
    width: 42px;
    height: 42px;
    font-size: 28px;
  }
  .foto-modal-imagen { max-height: calc(100vh - 188px); }
  footer { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px 16px; }
  .footer-brand {
    grid-column: 1;
    grid-row: 1;
    width: 134px;
    height: 96px;
  }
  .footer-copy {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: 520px;
  }
  .footer-social { grid-column: 1; grid-row: 2; justify-self: center; }
  .footer-links { grid-column: 1; grid-row: 4; justify-items: center; }
  .footer-bottom {
    grid-column: 1;
    grid-row: 5;
    margin-top: 0;
    padding-right: 76px;
    line-height: 1.5;
  }
  .contact-grid,
  .archive-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .logo { width: 66px; height: 54px; }
  .logo img { width: 64px; height: 50px; }
  .drop-hero { padding-top: 30px; }
  .drop-kicker { margin-bottom: 22px; font-size: 12px; }
  .drop-hero h1 { margin-bottom: 32px; font-size: clamp(42px, 11vw, 50px); letter-spacing: -.055em; }
  .drop-cta { width: 100%; }
  .drop-visual { min-height: 430px; margin-top: 16px; }
  .drop-switcher { top: 12px; right: 0; left: 0; justify-content: space-between; gap: 14px; }
  .drop-image-wrap { inset: 58px 0 0; }
  .drop-image-wrap img {
    transform: translateY(var(--drop-mobile-y)) scale(var(--drop-mobile-scale));
  }
  .drop-passport { display: none; }
  .section-head { display: block; }
  .grid { grid-template-columns: 1fr; }
  .product-carousel { grid-auto-columns: minmax(250px, 84vw); gap: 16px; }
  .carousel-arrow { top: min(38%, 210px); width: 46px; height: 46px; }
  .carousel-prev { left: -10px; }
  .carousel-next { right: -10px; }
  .home-categories { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
  .home-category { min-height: 360px; }
  .info h1 { font-size: 42px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CARRITO, CHECKOUT Y BURBUJA DE WHATSAPP
   Todo lo de abajo lo inyectan /js/carrito.js y /js/whatsapp.js;
   no hace falta escribir nada de esto a mano en el HTML.
   ============================================================ */

/* --- Panel lateral del carrito --- */
.cart-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.cart-fondo.abierto { opacity: 1; pointer-events: auto; }

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.cart-panel.abierto { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.cart-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
}
.cart-cerrar {
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: var(--espresso);
  font-size: 24px;
  line-height: 1;
}

.cart-cuerpo { flex: 1; overflow-y: auto; padding: 20px 24px; }

.cart-vacio { color: var(--cocoa); font-style: italic; padding: 40px 0; text-align: center; }

.cart-item {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item:first-child { padding-top: 0; }
.cart-item img { width: 66px; height: 66px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.cart-item h3 { font-size: 15px; font-weight: 500; line-height: 1.3; }
.cart-item .cart-cat {
  color: var(--cocoa);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.cart-item .cart-precio { font-size: 14px; margin-top: 4px; }
.cart-item .cart-aviso { color: var(--cocoa); font-size: 12px; font-style: italic; margin-top: 3px; }

.cart-cant { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; margin-top: 8px; }
.cart-cant button {
  width: 27px;
  height: 27px;
  background: none;
  border: none;
  color: var(--espresso);
  font-size: 15px;
  line-height: 1;
}
.cart-cant button:hover { background: var(--espresso); color: #fff; }
.cart-cant button:disabled { opacity: .35; cursor: default; }
.cart-cant button:disabled:hover { background: none; color: var(--espresso); }
.cart-cant span { min-width: 28px; font-size: 13px; text-align: center; }

.cart-quitar {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--cocoa);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 0 0 2px;
  text-transform: uppercase;
}
.cart-quitar:hover { color: var(--espresso); border-bottom-color: var(--espresso); }

.cart-pie { border-top: 1px solid var(--line); padding: 18px 24px 24px; }
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cart-total span {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cart-total b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 500; }
.cart-pie .boton { width: 100%; margin-top: 12px; }
.cart-pie .cart-legal { color: var(--cocoa); font-size: 12px; line-height: 1.5; margin-top: 12px; }

/* --- Formulario de checkout --- */
.cart-form label { margin-top: 14px; }
.cart-form label:first-child { margin-top: 0; }
.cart-form .cart-intro { color: var(--cocoa); font-size: 13.5px; line-height: 1.55; margin-bottom: 4px; }
.cart-form .error { font-size: 13.5px; }
.cart-volver {
  background: none;
  border: none;
  color: var(--cocoa);
  font-size: 12px;
  letter-spacing: .1em;
  padding: 0;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cart-volver:hover { color: var(--espresso); }
.cart-resumen {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 13.5px;
  padding: 14px;
  margin-bottom: 6px;
}
.cart-resumen div { display: flex; justify-content: space-between; gap: 12px; }
.cart-resumen div + div { margin-top: 5px; }
.cart-resumen .cart-resumen-total {
  border-top: 1px solid var(--line);
  font-weight: 600;
  margin-top: 9px;
  padding-top: 9px;
}

/* --- Confirmación --- */
.cart-ok { padding: 24px 0; text-align: center; }
.cart-ok .cart-tick {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border: 1px solid var(--espresso);
  border-radius: 50%;
  font-size: 24px;
}
.cart-ok h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 10px;
}
.cart-ok p { color: var(--cocoa); font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.cart-ok .cart-numero {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: .16em;
  margin-bottom: 16px;
  padding: 6px 12px;
  text-transform: uppercase;
}
.cart-ok .boton { width: 100%; margin-top: 6px; }

/* --- Burbuja flotante de WhatsApp --- */
.wa-burbuja {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border: none;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
  transition: transform .2s ease;
}
.wa-burbuja:hover { transform: scale(1.06); }
.wa-burbuja svg { width: 31px; height: 31px; fill: #fff; }
.wa-burbuja .wa-punto {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 11px;
  height: 11px;
  background: #d8b679;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(71, 49, 22, .22);
}

.wa-pop {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: 56;
  width: min(310px, calc(100vw - 44px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-pop.abierto { opacity: 1; transform: none; pointer-events: auto; }

.wa-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #075e54;
  border-radius: 3px 3px 0 0;
  color: #fff;
  padding: 13px 15px;
}
.wa-pop-head .wa-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  color: #075e54;
}
.wa-pop-head b { display: block; font-size: 14px; font-weight: 600; }
.wa-pop-head small { font-size: 11.5px; opacity: .85; }
.wa-avatar img { width: 30px; height: 30px; object-fit: contain; }
.wa-head-logo { width: 46px; height: 25px; object-fit: contain; filter: invert(1); }
.wa-pop-cerrar {
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  opacity: .85;
}

.wa-pop-cuerpo { background: #ece5dd; padding: 16px 15px; }
.wa-globo {
  position: relative;
  background: #fff;
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  color: #111;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 12px;
}
.wa-globo::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  border-top: 8px solid #fff;
  border-left: 8px solid transparent;
}
.wa-globo small { display: block; color: #888; font-size: 10.5px; margin-top: 4px; text-align: right; }
.wa-message-logo { width: 36px; height: 24px; margin-left: auto; object-fit: contain; }
.wa-pop-pie { padding: 13px 15px; }
.wa-pop-pie .boton { width: 100%; background: #25d366; border-color: #25d366; box-shadow: none; }
.wa-pop-pie .boton:hover { background: #1eb95a; border-color: #1eb95a; }

@media (max-width: 620px) {
  .wa-burbuja { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .wa-burbuja svg { width: 28px; height: 28px; }
  .wa-pop { right: 16px; bottom: 78px; }
  .cart-item { grid-template-columns: 56px 1fr auto; gap: 11px; }
  .cart-item img { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-panel, .cart-fondo, .wa-pop, .wa-burbuja,
  .topbar nav, .menu-toggle span { transition: none; }
}

/* Pie de la selección de la home: botón centrado hacia /productos */
.destacados-pie {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

/* Logos de Instagram y WhatsApp, centrados debajo del logo */
.footer-social {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  display: flex;
  gap: 10px;
  margin-top: 0;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--espresso);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: #fff;
}
.footer-social svg { width: 19px; height: 19px; }
/* Instagram va dibujado con líneas; WhatsApp, relleno. */
.footer-social a[id^="ig"] svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.footer-social a[id^="ig"] svg .lleno { fill: currentColor; stroke: none; }
.footer-social a[id^="wa"] svg { fill: currentColor; }

@media (max-width: 900px) {
  .footer-social {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social a { transition: none; }
}

/* ---------- Invitación al newsletter ---------- */
/* Los dos estilos comparten toda la maqueta: lo único que cambia es la estrella
   de fondo y los colores. Antes cada uno tenía sus medidas y el sticker se
   desbordaba de la panza. */
.nl-fondo {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(3px);
  animation: nl-entra-fondo .28s ease both;
}
body.nl-abierto { overflow: hidden; }

.nl-card {
  position: relative;
  /* El cartel ES el sticker. Se limita por ancho y por alto para que las puntas
     no se salgan de la pantalla en monitores bajos. */
  width: min(660px, 92vw, 84vh * 510 / 462);
  aspect-ratio: 510 / 462;
  background: url('/img/brand/estrella-fondo.png') center / contain no-repeat;
  /* La sombra sigue el contorno de la estrella, no un rectángulo. */
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, .5));
  animation: nl-entra-card .34s cubic-bezier(.2, .8, .3, 1) both;
}

/* El contenido vive en la panza. A la altura del medio el papel ocupa casi todo
   el ancho: es la única franja donde entra un formulario sin pisar las puntas.
   El 52% es angosto a propósito — más ancho y los campos se salen del papel. */
.nl-dentro {
  position: absolute;
  top: 53%;
  left: 50%;
  /* Un poco por debajo del centro del recuadro: la punta de arriba es larga y
     finita, así que el centro visual del papel cae más abajo que el geométrico. */
  transform: translate(-50%, -50%);
  width: 53%;
  text-align: center;
}

/* Sans y chico: en Bodoni 26px el título se partía en dos renglones y se subía
   arriba de la panza, encima del garabato. */
.nl-titulo {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .01em;
  margin: 0 0 12px;
}

.nl-input {
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  text-align: left;
}
.nl-form { width: 86%; margin: 0 auto; }
.nl-error {
  min-height: 0;
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #b3402e;
  text-align: center;
}

.nl-boton {
  border: none;
  width: 100%;
  margin-top: 4px;
  background: var(--espresso);
  color: #fff;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .15s;
}
.nl-boton:hover { background: #222; }
.nl-boton:disabled { opacity: .6; }

/* Cierra el cartel. No hay una "X": con este botón, Escape y el clic afuera
   alcanza, y una X flotando en la esquina del recuadro quedaba suelta, fuera
   del papel de la estrella. */
.nl-ahora-no {
  border: none;
  margin-top: 8px;
  font-size: 11.5px;
  color: #777;
  text-decoration: underline;
  background: none;
}
.nl-ahora-no:hover { color: var(--espresso); }

.nl-texto {
  font-size: 12.5px;
  line-height: 1.5;
  color: #444;
  margin: 0 0 12px;
}

@keyframes nl-entra-fondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes nl-entra-card {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- Estilo nocturno ---------- */
/* La estrella negra con el logo en blanco. Sólo cambian fondo y colores. */
.nl-nocturna .nl-card {
  background-image: url('/img/brand/estrella-negra.png');
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, .6));
}

/* El logo va en la punta de arriba, que en la estrella negra queda vacía.
   invert(1) lo pasa a blanco: el archivo es tinta negra sobre transparente, así
   que no hace falta una segunda imagen. */
.nl-nocturna .nl-logo {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 26%;
  transform: translateX(-50%);
  filter: invert(1);
  pointer-events: none;
}

/* Se corre hacia abajo para no pisar el logo. */
.nl-nocturna .nl-dentro { top: 58%; }
.nl-nocturna .nl-titulo { color: #fff; }
.nl-nocturna .nl-texto { color: rgba(255, 255, 255, .8); }
.nl-nocturna .nl-input { border: none; }
.nl-nocturna .nl-error { color: #ffb4a6; }

/* El "Join" en blanco con letra negra: es el único bloque claro sobre la
   estrella, así que es lo primero que se ve. */
.nl-nocturna .nl-boton {
  background: #fff;
  color: var(--espresso);
  letter-spacing: .06em;
  text-transform: none;
  font-size: 13px;
}
.nl-nocturna .nl-boton:hover { background: #e8e8e8; }
.nl-nocturna .nl-ahora-no { color: rgba(255, 255, 255, .65); }
.nl-nocturna .nl-ahora-no:hover { color: #fff; }

@media (max-width: 560px) {
  /* Acá la tentación es ensanchar el contenido para ganar lugar, y es al revés:
     medida sobre el PNG, la franja de papel que entra entera en la estrella mide
     51% del alto si se la toma al 50% del ancho, y se desploma a 22% si se la
     toma al 66%. La estrella se angosta rápido arriba y abajo de la cintura, así
     que ensanchar el recuadro le come el alto y el formulario se desborda por
     abajo. Se mantiene el 50% y se gana lugar por otro lado: menos padding en el
     fondo (el cartel usa casi todo el ancho) y tipografía un punto más chica. */
  .nl-fondo { padding: 8px; }
  .nl-card { width: min(96vw, 78vh * 510 / 462); }

  /* Los campos van a 16px a propósito: iOS hace zoom al enfocar cualquier input
     de menos de 16px, y en un modal fijo ese zoom deja el cartel a medio salir
     de la pantalla. Para que igual entren en la panza se achica todo el bloque
     con un scale — en pantalla se ven chicos, pero el font-size computado, que
     es lo que mira iOS, sigue siendo 16. El ancho se compensa (50 / .8 = 62.5)
     para que el bloque siga midiendo la mitad de la estrella. */
  .nl-dentro {
    width: 62.5%;
    transform: translate(-50%, -50%) scale(.8);
  }
  /* El título y el "Ahora no" son angostos: si asoman unos píxeles fuera de la
     franja siguen cayendo sobre papel, porque a esa altura la estrella todavía
     es ancha. Los que no pueden desbordar son los campos y el botón. */
  .nl-titulo { font-size: 15px; margin-bottom: 10px; }
  .nl-form { width: 86%; }
  .nl-input { padding: 8px 10px; font-size: 16px; margin-bottom: 6px; }
  .nl-boton { padding: 9px 12px; font-size: 13px; margin-top: 4px; }
  .nl-ahora-no { margin-top: 8px; font-size: 13px; }
  /* En la nocturna el logo va en la punta de arriba, y con el cartel chico le
     caía encima al título. Se lo achica y se lo sube contra la punta, y el
     bloque de campos baja lo justo para dejarle lugar sin salirse del papel. */
  .nl-nocturna .nl-card { width: min(94vw, 80svh * 510 / 462); }
  .nl-nocturna .nl-dentro {
    top: 57%;
    width: 44%;
    transform: translate(-50%, -50%) scale(.71);
  }
  .nl-nocturna .nl-logo {
    top: 13%;
    width: 16%;
  }
  .nl-nocturna .nl-titulo { font-size: 13px; line-height: 1.18; margin-bottom: 7px; }
  .nl-nocturna .nl-form { width: 100%; }
  .nl-nocturna .nl-input { padding: 6px 8px; margin-bottom: 5px; }
  .nl-nocturna .nl-boton { padding: 7px 10px; }
  .nl-nocturna .nl-ahora-no { margin-top: 5px; }
}

/* iPhone SE y parecidos: la estrella queda tan chica que el bloque de campos no
   entra en la franja y el título se parte en dos renglones. Se achica un punto
   más, siempre por scale para no bajar de 16px reales en los inputs. */
@media (max-width: 380px) {
  .nl-dentro {
    width: 69.5%;
    transform: translate(-50%, -50%) scale(.72);
  }
  .nl-nocturna .nl-dentro {
    width: 47%;
    transform: translate(-50%, -50%) scale(.63);
  }
  .nl-nocturna .nl-logo { top: 13%; width: 15%; }
}

/* ---------- Baja del newsletter ---------- */
.baja-wrap { display: grid; place-items: center; min-height: calc(100svh - 200px); padding: 40px 20px; }
.baja-card { max-width: 460px; text-align: center; }
.baja-card h1 { font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.15; margin: 0 0 14px; }
.baja-card p { font-size: 15px; line-height: 1.6; color: #555; margin: 0 0 26px; }
.baja-card .boton { display: inline-flex; }
.baja-volver { display: block; margin-top: 18px; font-size: 13px; color: #777; text-decoration: underline; }
.baja-volver:hover { color: var(--espresso); }

/* ---------- Página de mantenimiento ---------- */
.mant-wrap { display: grid; place-items: center; min-height: 100svh; padding: 40px 20px; }
.mant-card { max-width: 440px; text-align: center; }
.mant-logo { width: 150px; height: auto; margin-bottom: 30px; }
.mant-card h1 { font-family: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif; font-size: 38px; font-weight: 400; line-height: 1.15; margin: 0 0 14px; }
.mant-card p { font-size: 15px; line-height: 1.6; color: #555; margin: 0 0 26px; }
.mant-card .boton { display: inline-flex; }
.mant-contacto { font-size: 13px; color: #777; margin: 26px 0 0; }
.mant-contacto a { text-decoration: underline; }
.mant-contacto a:hover { color: var(--espresso); }