:root {
  --color-bg: #faf8f5;
  --color-bg-alt: #f4f0ea;
  --color-nude: #d4c4b0;
  --color-nude-light: #e8dfd1;
  /* Paleta neutra "ink" (tinta): 4 niveles de negro/gris. ink-dark es el
     "negro de marca" principal (botones/estados activos); ink-deep es negro
     puro para hover mas profundo; ink-light es un gris medio (#4a4a4a):
     sirve para bordes, barras de scroll y placeholders, NO de fondo con
     texto oscuro encima. Los mismos nombres que DESIGN.md.
     Hasta 2026-09-13 se llamaban sage, de la paleta verde original. Ese
     nombre engaño: "sage-light" era un verde claro y quedo en gris oscuro,
     y se lo siguio usando de fondo con texto oscuro (1,61:1, ver
     DEUDA-TECNICA §4.1). scripts/check-colores.js impide que vuelva. */
  --color-ink: #333333;
  --color-ink-dark: #1a1a1a;
  --color-ink-deep: #000000;
  --color-ink-light: #4a4a4a;
  --color-text: #2a2a2a;
  --color-text-soft: #5a5a5a;
  --color-text-light: #8a8a8a;
  --color-white: #ffffff;
  --color-border: #e5e0d8;
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-strong: rgba(0, 0, 0, 0.15);
  /* El rojo se escribe UNA vez, aca. Todo lo que lo usa con transparencia sale
     de esta variable con color-mix, nunca como rgba() a mano: el rgba copiado
     no sigue al cambiar el rojo, y es el mismo patron que dejo el link de
     Facebook viejo en cinco lugares. scripts/check-colores.js lo hace cumplir.
     Este valor y no uno mas claro: es el primero que da 4,5:1 en los seis
     lugares donde aparece. El que manda es "Vaciar seleccion", texto rojo
     sobre --color-bg-alt. */
  --color-error: #b54848;
  /* Tinte para texto sobre el header oscuro del admin: mismo tono (hue 0),
     aclarado para contrastar contra #2a2a2a. Es un valor elegido por su
     contraste (9,16:1), no una copia del rojo, por eso no se deriva. */
  --color-error-tint: #f0c4c4;
  --color-error-line: color-mix(in srgb, var(--color-error) 55%, transparent);
  /* Estados semanticos: unica familia con color propio fuera de la rampa
     neutra. Un aviso de "en proceso" tiene que distinguirse del negro de
     marca, si no se lee como un boton mas. Solo en el panel admin. */
  --color-notice-bg: #fff8e1;
  --color-notice-border: #ffd54f;
  --color-notice-text: #5d4037;
  /* ===== Hero =====
     Estas cinco mueven toda la portada. Estan aca y no dentro de las reglas
     para poder ajustarlas de una y porque el bloque mobile las repisa. */
/* El hero son DOS zonas independientes que se SUMAN. Antes habia un alto
     total y una union en porcentaje, y de ahi salia todo: agrandar la ventana
     de la foto obligaba a achicar el negro, y el logo, atado al alto total,
     se movia con ella. Aca cada zona tiene su alto propio en px y su contenido
     anclado a ella, asi la foto crece hacia abajo sin tocar el logo.
     En px y no en vh porque lo que el negro tiene que albergar (barra, logo,
     linea) no cambia de tamano con la pantalla; y porque en Safari 100vh es
     el viewport con las barras ocultas, asi que al aterrizar el boton queda
     tapado por la barra de abajo justo en la primera pintura. */
  --hero-negro: 411px;      /* alto del bloque negro */
  --hero-foto: 428px;       /* alto de la VENTANA de la foto */
  --hero-logo: 93%;         /* alto del logo, sobre el alto del NEGRO */
  --hero-logo-y: 52%;       /* centro del logo, dentro del negro */
  --hero-linea-y: 86%;      /* centro de la linea, dentro del negro */
  --hero-linea-tam: 1;      /* escala de la linea */
  /* OJO al tocar esto. La fila del asset que empalma con el negro depende del
     ANCHO de pantalla, no solo de este numero: con 7% cae en la 24 a 1920px y
     en la 34 a 3440px. La cortina uniforme llega hasta la 31; de la 32 en
     adelante se aclara (media 12,8 contra el 3,0 del negro CSS) y la costura
     se ve. O sea que 7% es seguro hasta ~2560px de ancho y falla en ultrawide
     y 4K. Por eso queda en 5%: no pasa de la fila 25 en ninguna pantalla,
     incluida 4K, y el punto de mobiliario que cuesta (49% -> 48%) no se
     distingue a ojo. Si alguien lo sube, que mida la fila que empalma en el
     ancho mas grande que le importe, no solo en el suyo. */
  --hero-foco: 5%;          /* que parte de la foto se ve: 0% = arriba */
  --hero-cta-y: 22%;        /* centro del boton, dentro de la FOTO */
  --hero-velo: 0.06;        /* velo hueso sobre el hero entero */
  --hero-cta: 1.3;          /* escala del boton */
  --hero-cta-op: 0.75;      /* opacidad del relleno del boton */

  --font-serif: 'Bodoni Moda', serif;
  /* Tres instancias opticas de Bodoni. No alcanza con font-optical-sizing:auto
     (que ya es el default): medido, el eje no se movia. Estos son los valores
     que si producen otro dibujo. */
  --opsz-display: 'opsz' 72;
  --opsz-titulo: 'opsz' 28;
  --opsz-chico: 'opsz' 12;
  --font-sans: 'Karla', -apple-system, sans-serif;
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ============ INTERACCIÓN TÁCTIL ============ */
/* Evita que dos toques rápidos sobre un control (flechas de foto, miniaturas,
   cantidad, filtros...) disparen el doble-tap-zoom nativo del navegador y
   dejen toda la página ampliada.
   'manipulation' desactiva SOLO el doble-tap-zoom: el pinch-zoom de la
   página sigue disponible, así que no se pierde accesibilidad (por eso no
   se toca el meta viewport). El pinch sobre la foto del visor tampoco se ve
   afectado: PhotoSwipe lo maneja por JS bajo su propio touch-action. */
button,
a,
[role="button"],
.modal-thumb,
.filter-btn,
input[type="number"] {
  touch-action: manipulation;
}

/* ============ NAVEGACIÓN ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(250, 248, 245, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

.nav-logo {
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.nav-logo:hover { opacity: 0.7; }

.nav-logo-img {
  height: 50px;
  width: auto;
  display: block;
}

/* ===== Barra sobre el negro del hero =====
   Arriba de todo, en inicio, la barra se apoya sobre el bloque negro. Con el
   fondo hueso quedaba una franja clara cortando el hero. Sobre el negro se
   vuelve transparente y todo lo suyo pasa a claro. Al scrollear vuelve a la
   barra normal, que es la que necesita fondo para leerse sobre el contenido. */
.nav-logo-img--claro { display: none; }
.nav--sobre-hero .nav-logo-img { display: none; }
.nav--sobre-hero .nav-logo-img--claro { display: block; }

.nav--sobre-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav--sobre-hero .nav-cart-btn,
.nav--sobre-hero .nav-mobile-toggle {
  color: var(--color-bg);
}
/* Tres clases a proposito. .nav-cart-btn:hover pesa lo mismo que la regla de
   arriba, (0,2,0), y esta declarado mas abajo: ganaba por orden y en hover el
   carrito pasaba a #1a1a1a sobre el negro del hero, 1,18:1. Blanco, igual que
   los links en hover. Sin media query: el carrito esta sobre el negro en todos
   los anchos. */
.nav--sobre-hero .nav-cart-btn:hover { color: var(--color-white); }
/* Los links sobre el hero van en claro SOLO en escritorio: ver el grupo
   "desde 769px" en los media queries del final. En celular los links no
   estan sobre el negro sino dentro del menu desplegable, que tiene su propio
   fondo hueso; pintarlos de hueso ahi los dejaba en 1:1. */

.nav-menu {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.nav-link {
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: var(--transition);
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-weight: 400;
  padding: 0.5rem 0;
}

.nav-link:hover { color: var(--color-ink-dark); }

.nav-link.active {
  color: var(--color-ink-dark);
  border-bottom: 1px solid var(--color-ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-cart-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  /* Área de toque cómoda (~44px) para mobile */
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-soft);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-cart-btn:hover { color: var(--color-ink-dark); }

/* Ícono más grande (sobrescribe el tamaño inline del SVG) */
.nav-cart-btn svg {
  width: 24px;
  height: 24px;
}

.nav-cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-ink-dark);
  color: var(--color-white);
  font-size: 0.7rem;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 2px solid var(--color-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  /* Area tactil de 44px, igual que el resto de los controles. */
  min-width: 44px;
  min-height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink-dark);
  cursor: pointer;
}

/* ============ HERO ============ */
/* Hero a ancho completo, en dos partes apiladas: arriba un bloque de negro
   plano por CSS, abajo la foto. Corte recto, sin esfumado.

   El negro no es imagen a proposito. Como la foto solo tiene que cubrir la
   parte de abajo, pide menos alto y amplia menos: en celular sube el tope de
   269px a 539px. En escritorio no ayuda, porque ahi lo que manda es el ancho. */
.hero {
  position: relative;
  /* Sin alto propio: es exactamente la suma de sus dos zonas. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}

.hero-negro {
  flex: none;
  height: var(--hero-negro);
  /* Color medido sobre la primera fila del asset, que es la que empalma.
     Con el recorte B la foto arranca en rgb(3,3,3) y el grano dentro de esa
     misma fila es de 7 sobre 255: el escalon queda enterrado y no hace falta
     transicion. Si se recorta la foto distinto, hay que volver a medir esta
     fila y actualizar este valor. */
  background: #030303;
}

.hero-foto {
  position: relative;
  flex: none;
  height: var(--hero-foto);
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anclada arriba por defecto: asi la fila que empalma con el bloque negro
     es siempre la misma, la que se midio. Bajar --hero-foco corre la ventana
     hacia los muebles, pero se come la cortina que hace invisible el empalme:
     pasado cierto punto la union se ve. */
  object-position: center var(--hero-foco);
  display: block;
}

/* El velo va sobre el hero ENTERO, no sobre la foto. Si cubre solo la foto,
   le levanta ese lado del empalme 25/255 y la union se ve como una linea. */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(250, 248, 245, var(--hero-velo));
}

/* Capa de contenido. Repite la misma particion que hay abajo (negro arriba,
   foto abajo) para que cada elemento mida su posicion contra SU zona: el logo
   y la linea contra el negro, el boton contra la foto. Por eso mover el alto
   de la foto no arrastra el logo.
   Las zonas no recortan, asi que el logo puede seguir montado sobre la union. */
.hero-capa {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.hero-zona-negro { position: relative; flex: none; height: var(--hero-negro); }
.hero-zona-foto  { position: relative; flex: none; height: var(--hero-foto); }

.hero-zona-negro > *,
.hero-zona-foto > * {
  position: absolute;
  left: 50%;
}

/* La linea que dice que se vende. Va en Karla y no en Bodoni a proposito: en
   Bodoni competiria de frente con el logo, que es la misma familia serif de
   alto contraste. En mayuscula con letter-spacing cae en el rol Label/Kicker
   de DESIGN.md y se lee como subordinada.
   Cae entera sobre el negro plano, nunca sobre la foto: es el unico elemento
   del hero cuyo contraste no depende del encuadre de la imagen. */
.hero-linea {
  top: var(--hero-linea-y);
  transform: translate(-50%, -50%);
  /* El tope no es estetico sino de medida de lectura, pero tiene que dejar
     pasar la escala: a 0,75rem el texto pide 437px y a 1,25rem pide 727px.
     Con el tope viejo de 620px la linea se partia en dos en cuanto pasaba de
     1,15rem, que es justo el rango que uno quiere probar. */
  width: min(92%, 780px);
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: calc(0.75rem * var(--hero-linea-tam));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bg);
  line-height: 1.9;
  text-align: center;
  text-wrap: balance;
}

/* Aca vivian dos manchas radiales con blur, restos del hero viejo y de la
   paleta sage. Se sacaron por dos motivos. Uno: DESIGN.md dice "superficies
   planas, sin gradientes decorativos", y esta es la superficie mas visible del
   sitio. Dos, y decisivo: como pseudo-elementos de .hero pintaban por encima
   de .hero-negro (estatico) pero por debajo de .hero-foto (posicionado), asi
   que le levantaban el brillo a un solo lado de la union y hacian visible la
   costura que el color del negro deja invisible. */

/* Logo arriba y boton abajo, cada uno sobre la zona uniforme que le sirve.
   La franja de cortinas negras va del 2,5% al 22% del alto con un desvio de
   luminancia de 0,001: es practicamente negro plano. El piso de abajo es
   oscuro pero no parejo, tiene reflejos y sombras de las patas. */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 8% 7%;
  animation: fadeUp 1.2s ease-out;
}

/* Sin halo, a proposito: tanto el negro plano de arriba como las cortinas
   de la parte alta de la foto dan mas de 14:1 contra el logo claro, contra un
   umbral de 3:1. El halo solo ensuciaria.
   El alto se mide contra el alto del hero. El PNG es cuadrado con casi la
   mitad de margen transparente, asi que la marca visible ocupa el 50% de esa
   caja. */
.hero-logo {
  height: var(--hero-logo);
  width: auto;
  max-width: 80%;
  object-fit: contain;
  top: var(--hero-logo-y);
  transform: translate(-50%, -50%);
}

.hero-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 2rem;
  font-weight: 500;
}

.hero-slogan {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.hero-slogan em {
  font-style: italic;
  color: var(--color-ink-dark);
  font-weight: 400;
}

.hero-tagline-bottom {
  font-size: 0.875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 400;
  margin-bottom: 0;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.hero-title em {
  font-style: italic;
  color: var(--color-ink-dark);
  font-weight: 400;
}

.hero-divider {
  width: 60px;
  height: 1px;
  background: var(--color-ink);
  margin: 1.5rem auto;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--color-text-soft);
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.8;
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.5rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2.5rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
}

/* El boton del hero cambia de estilo porque cambio de fondo. Sobre el negro
   plano, el relleno #1a1a1a da 1,18:1 y desaparece: el negro de marca y el
   de las cortinas son casi el mismo color. Invertido da 19,34:1 y no
   necesita anillo. El anillo sigue haciendo falta si algun dia el boton
   vuelve a caer sobre la foto. */
/* El boton puede caer sobre el negro o sobre la foto, asi que lleva el
   tratamiento que sirve en los dos: relleno oscuro con anillo hueso. Donde el
   fondo es negro gana el anillo (19,34:1), donde la foto tiene luces gana el
   relleno (4,06:1). Un relleno hueso solo funcionaria arriba. */
.hero-zona-foto .hero-cta {
  top: var(--hero-cta-y);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  padding: calc(1.1rem * var(--hero-cta)) calc(2.5rem * var(--hero-cta));
  font-size: calc(0.85rem * var(--hero-cta));
  /* El relleno puede volverse translucido. El anillo hueso sigue opaco, asi
     que el BORDE del boton no pierde contraste nunca; lo que si se degrada al
     bajar la opacidad es el texto blanco contra un relleno cada vez mas
     parecido a la foto. Eso hay que mirarlo, no suponerlo. */
  background: rgba(26, 26, 26, var(--hero-cta-op));
}

.hero-cta:hover {
  background: var(--color-ink-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--color-shadow-strong);
}

/* En el hero el transform NO es decorativo: es lo que centra el boton contra
   left:50% y top:var(--hero-cta-y). La regla de arriba declara transform como
   una sola propiedad, asi que al pasar el mouse reemplazaba el centrado entero
   y el boton saltaba 186px a la derecha (media caja) y 32px hacia abajo.
   Medido a 1280, 1440, 1920 y 2560: el salto es siempre media caja.
   Va con dos clases a proposito. .hero-cta:hover tambien pesa (0,2,0) y estaba
   declarada despues, o sea que ganaba por orden; con (0,3,0) este arreglo no
   depende de donde quede en el archivo, que es justo lo que fallo. */
.hero-zona-foto .hero-cta:hover {
  transform: translate(-50%, calc(-50% - 2px));
}

.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2rem;
  background: transparent;
  color: var(--color-ink-dark);
  border: 1px solid var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
}

.hero-cta-secondary:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
  transform: translateY(-2px);
}

.hero-cta-arrow { transition: var(--transition); }
.hero-cta:hover .hero-cta-arrow { transform: translateX(5px); }

/* ============ SECCIONES GENERALES ============ */
.featured {
  padding: 6rem 2rem;
  background: var(--color-bg);
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 1rem;
  font-weight: 500;
}

/* ---- Eje optico de Bodoni Moda ----
   font-optical-sizing: auto es el valor inicial y, medido en este archivo, no
   movia el eje: 0,0037 de diferencia de ancho entre 12px y 96px, contra 0,1875
   forzando opsz 8 contra opsz 96. O sea que el eje esta en la fuente y funciona,
   pero el automatico no lo estaba manejando. Estas tres reglas si.
   Regla al agregar un rol serif nuevo: elegi la instancia por el tamano al que
   se ve, no por el componente. */
.hero-slogan,
.hero-title,
.section-title,
.contact-info-title,
.modal-main-placeholder,
.featured-item-placeholder,
.admin-product-image-placeholder,
.cart-item-placeholder,
.stat-value {
  font-variation-settings: var(--opsz-display);
}

.modal-name,
.cart-title,
.admin-title,
.admin-form-title,
.form-title,
.cart-empty-title,
.footer-brand-name,
.product-name,
.featured-item-name,
.cart-item-name,
.admin-product-name,
.category-item-name,
.trust-band-text,
.empty-state {
  font-variation-settings: var(--opsz-titulo);
}

/* Los dos serif que quedan cerca del piso. Con opsz chico el dibujo engorda los
   trazos finos, que es exactamente lo que les falta a este tamano. */
.footer-brand-tagline,
.featured-cta-text {
  font-variation-settings: var(--opsz-chico);
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.section-title em {
  font-style: italic;
  color: var(--color-ink-dark);
}

.section-subtitle {
  font-size: 1rem;
  color: var(--color-text-soft);
  max-width: 500px;
  margin: 1.5rem auto 0;
  line-height: 1.7;
  font-weight: 400;
}

/* CTA Instagram en destacados */
.featured-cta {
  max-width: 1400px;
  margin: 4rem auto 0;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.featured-cta-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text-soft);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.featured-instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: var(--transition);
  font-weight: 400;
}

.featured-instagram-btn:hover {
  background: var(--color-ink-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px var(--color-shadow-strong);
}

/* ============ GALERÍA DESTACADA ============ */
.featured-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}


.featured-item {
  aspect-ratio: 3/4;
  background: var(--color-nude-light);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  content-visibility: auto;
  contain-intrinsic-size: 280px 380px;
}

.featured-item picture {
  width: 100%;
  height: 100%;
  display: block;
}

.featured-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform var(--transition);
  opacity: 0;
}

.featured-item img.loaded,
.featured-item img[src] {
  opacity: 1;
}

.featured-item:hover img { transform: scale(1.05); }

.featured-item:focus-visible {
  outline: 2px solid var(--color-ink-dark);
  outline-offset: 3px;
}

.featured-item-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-nude-light) 0%, var(--color-ink-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 3rem;
  font-style: italic;
  position: relative;
}

.featured-item-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.1) 100%);
}

.featured-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: var(--transition);
}

.featured-item:hover .featured-item-overlay { opacity: 1; }

.featured-item-name {
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
}

/* ============ CATÁLOGO ============ */
.catalog {
  padding: 6rem 2rem;
  background: var(--color-bg-alt);
  min-height: 100vh;
}

.catalog-filters {
  max-width: 1400px;
  margin: 0 auto 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

/* ===== Franja de confianza (debajo del hero) ===== */
.trust-band {
  background: var(--color-bg-alt);
  /* Resto de la paleta vieja (verde sage) migrado al negro de marca. */
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
  padding: 2.2rem 1.5rem;
  text-align: center;
}

.trust-band-text {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink-dark);
  letter-spacing: 0.01em;
  margin: 0;
}
.trust-band-text em {
  font-style: italic;
  color: var(--color-ink);
}

.filter-search {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 1.5rem;
  position: relative;
}

.filter-search input {
  width: 100%;
  padding: 0.65rem 1.1rem 0.65rem 2.4rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text);
  transition: var(--transition);
  font-weight: 400;
}

.filter-search input:focus {
  outline: none;
  border-color: var(--color-ink);
}

.filter-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  /* Unico uso de text-light que queda: es un icono decorativo (el input ya
     tiene placeholder), asi que le alcanza el 3:1 de WCAG 1.4.11 y no el
     4.5:1 de texto. Todo el texto informativo paso a text-soft. */
  color: var(--color-text-light);
  font-size: 1rem;
}

.filter-btn {
  padding: 0.7rem 1.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
}

.filter-btn:hover {
  border-color: var(--color-ink);
  color: var(--color-ink-dark);
}

.filter-btn.active {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

/* Grid consistente con aspect-ratio fijo */
.catalog-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}


.product-card {
  background: var(--color-white);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  box-shadow: 0 2px 8px var(--color-shadow);
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px var(--color-shadow-strong);
}

/* Con teclado el foco cae en el nombre, que es el link a /producto/<slug>
   (ver renderProductCard en js/render.js). El anillo se sigue dibujando
   alrededor de la tarjeta entera, como cuando la tarjeta era el boton. */
.product-card:has(.product-name:focus-visible) {
  outline: 2px solid var(--color-ink-dark);
  outline-offset: 3px;
}

a.product-name {
  text-decoration: none;
}

a.product-name:focus-visible {
  outline: none;
}

.product-image {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--color-nude-light);
  position: relative;
  overflow: hidden;
}

.product-image picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.product-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease, transform var(--transition);
  opacity: 0;
}

.product-image img.loaded,
.product-image img[src] {
  opacity: 1;
}

.product-image-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(42, 42, 42, 0.7);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  padding: 0.35rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  pointer-events: none;
}

/* Skeleton placeholder mientras carga */
.lazy-img:not([src]) {
  background: linear-gradient(90deg, var(--color-nude-light) 0%, var(--color-bg-alt) 50%, var(--color-nude-light) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.product-card:hover .product-image img { transform: scale(1.03); }

.product-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-nude-light) 0%, var(--color-ink-light) 100%);
}

.product-image-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/logo.png') center / 42% no-repeat;
  opacity: 0.12;
}

.product-info {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-category {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.product-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-text);
  line-height: 1.3;
  font-weight: 400;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--color-text-soft);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
}

/* Aviso de catalogo caido: ocupa la fila entera de la grilla en vez de una
   sola celda, y el link va en Karla y sin italica para que se lea como accion. */
.catalogo-caido {
  grid-column: 1 / -1;
}

.catalogo-caido-link {
  display: block;
  width: fit-content;
  margin: 1.25rem auto 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-ink-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============ MODAL PRODUCTO ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 42, 42, 0.8);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
  animation: fadeIn 0.3s ease;
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--color-bg);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  animation: slideUp 0.4s ease;
}

.modal > * { min-width: 0; }


/* Barra superior del modal de producto: queda pegada arriba aunque se
   scrollee la ficha, así "Volver" y "✕" están siempre a la vista. */
.modal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.modal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem 0 0.65rem;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.modal-back:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink-dark);
}

.modal-close {
  position: static;
  flex-shrink: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text);
}

.modal-close:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

.modal-gallery {
  background: var(--color-nude-light);
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.modal-main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-nude-light);
}

.modal-main-image picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.modal-main-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.modal-main-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 5rem;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-nude-light) 0%, var(--color-ink-light) 100%);
}

.modal-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  background: var(--color-white);
  width: 100%;
  min-width: 0;
  scrollbar-width: thin;
}
.modal-thumbs::-webkit-scrollbar { height: 4px; }
.modal-thumbs::-webkit-scrollbar-thumb { background: var(--color-ink-light); border-radius: 999px; }

.modal-thumb {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  background: var(--color-nude-light);
  overflow: hidden;
}

.modal-thumb picture {
  width: 100%;
  height: 100%;
  display: block;
}

.modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-thumb.active { border-color: var(--color-ink); }

.modal-content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
}


.modal-category {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 1rem;
  font-weight: 500;
}

.modal-name {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

/* En /producto/<slug> el foco inicial va al nombre (tabindex="-1") para que el
   lector de pantalla lo anuncie. Es un titulo, no un control: no lleva anillo. */
.modal-name:focus { outline: none; }

.modal-divider {
  width: 40px;
  height: 1px;
  background: var(--color-ink);
  margin-bottom: 1.5rem;
}

.modal-description {
  color: var(--color-text-soft);
  line-height: 1.8;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  font-weight: 400;
}

.modal-specs {
  background: var(--color-bg-alt);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.modal-specs-title {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 1rem;
  font-weight: 500;
}

.modal-specs-content {
  color: var(--color-text-soft);
  line-height: 1.7;
  font-size: 0.9rem;
  font-weight: 400;
  white-space: pre-wrap;
}

.modal-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-whatsapp {
  padding: 1.1rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 400;
}

.btn-whatsapp:hover { background: var(--color-ink-deep); }

/* ============ CONTACTO ============ */
.contact {
  padding: 6rem 2rem;
  background: var(--color-text);
  color: var(--color-bg);
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}


.contact-info-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  margin-bottom: 2rem;
  line-height: 1.1;
}

.contact-info-title em {
  font-style: italic;
  /* Excepcion: esta seccion tiene fondo oscuro, asi que el acento queda
     claro (no negro) para mantener el contraste. */
  color: rgba(250, 248, 245, 0.85);
}

.contact-info-text {
  color: rgba(250, 248, 245, 0.7);
  margin-bottom: 1.25rem;
  line-height: 1.8;
  font-weight: 400;
}

/* Zona de trabajo: dato, no prosa. Va en sans y un paso mas chica que el
   parrafo de arriba, y se queda con el margen grande que antes tenia el
   parrafo, para que el hueco hasta los contactos no cambie. */
.contact-zona {
  font-size: 0.875rem;
  color: rgba(250, 248, 245, 0.7);
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.contact-item {
  /* Los items de redes son <a> y los otros div: el reset va aca para que los
     dos se vean igual y para que convertir uno mas no arrastre estilos de
     enlace del navegador. */
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(250, 248, 245, 0.1);
  cursor: pointer;
  transition: var(--transition);
}

.contact-item:hover { padding-left: 0.5rem; }

/* Foco visible sobre el fondo oscuro de esta seccion: el negro de marca
   seria invisible, asi que el anillo usa el claro de la excepcion. */
.contact-item:focus-visible,
.contact-item-secondary:focus-visible {
  outline: 2px solid rgba(250, 248, 245, 0.85);
  outline-offset: 3px;
}

.contact-item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Excepcion: fondo oscuro de esta seccion, icono claro para contraste. */
  color: rgba(250, 248, 245, 0.85);
  flex-shrink: 0;
}

.contact-item-content { flex: 1; }

.contact-item-label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.5);
  margin-bottom: 0.25rem;
}

.contact-item-value {
  color: var(--color-bg);
  font-size: 1rem;
  font-weight: 400;
}

.contact-item-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: rgba(250, 248, 245, 0.55);
  text-decoration: none;
  transition: var(--transition);
}
.contact-item-secondary:hover { color: rgba(250, 248, 245, 0.85); }

.contact-form {
  background: rgba(250, 248, 245, 0.05);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}

.form-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.form-subtitle {
  color: rgba(250, 248, 245, 0.6);
  font-size: 0.875rem;
  margin-bottom: 2rem;
  font-weight: 400;
}

.form-group { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.6);
  margin-bottom: 0.5rem;
}

.form-input, .form-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(250, 248, 245, 0.05);
  border: 1px solid rgba(250, 248, 245, 0.1);
  color: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: var(--transition);
  font-weight: 400;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-ink-light);
  background: rgba(250, 248, 245, 0.08);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Mismo patron que el resto de los botones oscuros (WhatsApp del modal, envio
   del carrito): negro de marca con texto blanco, negro puro en hover. Antes
   usaba de fondo --color-ink-light (#4a4a4a), que en la paleta vieja se
   llamaba sage-light y era verde claro: texto #2a2a2a encima daba 1,61:1. */
.form-submit {
  width: 100%;
  padding: 1.1rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
}

.form-submit:hover { background: var(--color-ink-deep); }

/* ============ FOOTER ============ */
.footer {
  background: #2a2a2a;
  color: rgba(250, 248, 245, 0.7);
  padding: 4rem 2rem 0;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  /* Excepcion: linea decorativa sobre fondo oscuro, se mantiene clara. */
  background: linear-gradient(90deg, transparent 0%, rgba(250, 248, 245, 0.85) 50%, transparent 100%);
  opacity: 0.3;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  cursor: pointer;
  user-select: none;
  margin-bottom: 1rem;
  transition: var(--transition);
}

.footer-logo:hover { opacity: 0.7; }

.footer-logo-img {
  height: 90px;
  width: auto;
  transition: var(--transition);
}

.footer-brand-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-bg);
  margin-bottom: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.footer-brand-tagline {
  font-family: var(--font-serif);
  /* Sube al piso de la Mobile Floor Rule de DESIGN.md. A 0.95rem los hairlines
     de Bodoni desaparecian en celular, y encima en cursiva y al 60% de opacidad. */
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(250, 248, 245, 0.6);
  font-weight: 400;
  line-height: 1.5;
  max-width: 280px;
}

.footer-brand-divider {
  width: 44px;
  height: 2px;
  /* Excepcion: sobre el fondo oscuro del footer, negro seria invisible. */
  background: rgba(250, 248, 245, 0.85);
  opacity: 0.6;
  margin-top: 1.25rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Excepcion: fondo oscuro del footer, mantiene el acento claro. */
  color: rgba(250, 248, 245, 0.85);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  color: rgba(250, 248, 245, 0.7);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 400;
  transition: var(--transition);
}

.footer-link:hover {
  color: rgba(250, 248, 245, 0.85);
  padding-left: 0.3rem;
}

.footer-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.footer-link-secondary {
  color: rgba(250, 248, 245, 0.45);
  font-size: 0.875rem;
  padding-top: 0.2rem;
  padding-bottom: 0.5rem;
}

.footer-bottom {
  border-top: 1px solid rgba(250, 248, 245, 0.08);
  padding: 1.5rem 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.7rem;
  color: rgba(250, 248, 245, 0.4);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.footer-bottom .footer-location {
  /* Pasa a la sans y no solo sube de tamano: es metadato de pie, no un gesto
     editorial. Una didone de display a 13px para decir la localidad es usar la
     letra equivocada, no solo usarla chica. */
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(250, 248, 245, 0.55);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.loc-short { display: none; }


/* ============ PÁGINA 404 ============ */
/* public/404.html, la genera scripts/prerender.js. Sale cuando se entra a un
   producto que se dio de baja o a una ruta que no existe. */
.no-encontrada {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--color-bg);
}

.no-encontrada-logo {
  height: 72px;
  width: auto;
  margin-bottom: 2rem;
}

/* Rol Title de DESIGN.md, el mismo de .section-title. */
.no-encontrada-titulo {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.no-encontrada-texto {
  max-width: 34rem;
  color: var(--color-text-soft);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Mismo patron que los botones oscuros del sitio (.form-submit). */
.no-encontrada-link {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
}

.no-encontrada-link:hover { background: var(--color-ink-deep); }

.no-encontrada-link:focus-visible {
  outline: 2px solid var(--color-ink-dark);
  outline-offset: 3px;
}

/* ============ PANEL ADMIN ============ */
.admin-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 3000;
  overflow-y: auto;
  display: none;
}

.admin-overlay.active { display: block; }

.admin-header {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.admin-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.admin-btn {
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--color-bg);
  border: 1px solid rgba(250, 248, 245, 0.3);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
}

.admin-btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Mismo patron que .form-submit: negro de marca con texto blanco. Venia de la
   paleta vieja, donde ink-light era sage-light (verde claro); con el gris
   #4a4a4a de ahora, el texto #2a2a2a encima daba 1,62:1. */
.admin-btn.primary {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

.admin-btn.primary:hover {
  background: var(--color-ink-deep);
  color: var(--color-white);
  border-color: var(--color-ink-deep);
}

/* .admin-btn a secas es para la barra oscura del admin: texto claro. Dentro
   de un formulario, que es blanco, ese texto quedaba invisible (1,06:1). Esta
   variante es la de fondo claro. */
.admin-btn.secondary {
  color: var(--color-text);
  border-color: var(--color-text-soft);
}

.admin-btn.secondary:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.admin-btn.danger {
  border-color: var(--color-error-line);
  color: var(--color-error-tint);
}

.admin-btn.danger:hover {
  background: var(--color-error);
  color: var(--color-bg);
  border-color: var(--color-error);
}

.admin-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--color-white);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-ink-dark);
  font-weight: 400;
}

.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
  overflow-x: auto;
}

.admin-tab {
  padding: 1rem 2rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
  white-space: nowrap;
}

.admin-tab.active {
  color: var(--color-ink-dark);
  border-bottom-color: var(--color-ink);
}

/* Admin Login */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-box {
  background: var(--color-white);
  padding: 3rem;
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--color-border);
  text-align: center;
}

.login-logo-img {
  height: 80px;
  width: auto;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 2.5rem;
}

.login-input {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.login-input:focus {
  outline: none;
  border-color: var(--color-ink);
}

.login-btn {
  width: 100%;
  padding: 1rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

.login-btn:hover { background: var(--color-ink-deep); }

.login-error {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: 1rem;
  min-height: 1rem;
}

.login-hint {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--color-text-soft);
  line-height: 1.5;
}

.login-cancel {
  margin-top: 1.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  padding: 0.6rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

.login-cancel:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Product List in Admin */
.admin-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.admin-product-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: var(--transition);
}

.admin-product-card:hover { box-shadow: 0 8px 24px var(--color-shadow); }
.admin-product-card { position: relative; }

/* Botones de reordenar (flechas) sobre la imagen del producto */
.admin-product-order {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink-dark);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.order-btn:disabled { opacity: 0.35; cursor: default; }
.order-btn:not(:disabled):hover { background: #fff; color: var(--color-text); }

.admin-product-image {
  width: 100%;
  height: 180px;
  background: var(--color-nude-light);
  overflow: hidden;
  position: relative;
}

.admin-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-product-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-nude-light) 0%, var(--color-ink-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 2rem;
}

.admin-product-info { padding: 1.25rem; }

.admin-product-category {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.admin-product-name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.admin-product-actions {
  display: flex;
  gap: 0.5rem;
}

.admin-action-btn {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  color: var(--color-text-soft);
}

.admin-action-btn:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

.admin-action-btn.delete:hover {
  background: var(--color-error);
  border-color: var(--color-error);
}

/* Form admin */
.admin-form {
  background: var(--color-white);
  padding: 2.5rem;
  border: 1px solid var(--color-border);
  max-width: 800px;
}

.admin-form-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: var(--color-text);
  font-weight: 400;
}

.admin-form-group { margin-bottom: 1.5rem; }

.admin-form-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Hereda de .admin-form-label, que es para rotulos cortos en mayuscula. Aca el
   texto es una frase entera y en mayuscula con 0.2em de tracking costaba leerla:
   va en caja normal y con el tamano de un texto. */
.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
}

.admin-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.admin-form-input, .admin-form-textarea, .admin-form-select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: var(--transition);
  font-weight: 400;
}

.admin-form-input:focus, .admin-form-textarea:focus, .admin-form-select:focus {
  outline: none;
  border-color: var(--color-ink);
}

.admin-form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Upload de imágenes */
.image-upload {
  border: 2px dashed var(--color-border);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: var(--color-bg);
}

.image-upload:hover {
  border-color: var(--color-ink);
  background: var(--color-bg-alt);
}

.image-upload-icon {
  font-size: 2rem;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.image-upload-text {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.image-upload-hint {
  color: var(--color-text-soft);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* Aviso de "procesando imagenes" del admin. El JS solo alterna display. */
.upload-status {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  color: var(--color-notice-text);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Productos que no aparecen en Google (descripcion de menos de 60
   caracteres). Mismo ambar que .upload-status: es un estado del sistema
   (Semantic-Only Color Rule de DESIGN.md), no decoracion. */
.admin-google-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  color: var(--color-notice-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

.admin-google-resumen:empty { display: none; }

.admin-google-resumen-texto { flex: 1 1 18rem; }

.admin-google-resumen .admin-btn { flex-shrink: 0; }

/* Sin pendientes: deja de ser un aviso y pasa a gris. */
.admin-google-resumen--ok {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text-soft);
}

.admin-google-marca {
  display: inline-block;
  margin: -0.5rem 0 0.9rem;
  padding: 0.25rem 0.55rem;
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  color: var(--color-notice-text);
  font-size: 0.75rem;
  line-height: 1.4;
}

.admin-form-hint {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.admin-form-hint--falta { color: var(--color-notice-text); }

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.image-preview {
  aspect-ratio: 1;
  position: relative;
  background: var(--color-nude-light);
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-order {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  gap: 4px;
}
.img-order-btn {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink-dark);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.img-order-btn:disabled { opacity: 0.35; cursor: default; }
.img-order-btn:not(:disabled):hover { background: #fff; color: var(--color-text); }

.image-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: color-mix(in srgb, var(--color-error) 90%, transparent);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview.is-primary {
  outline: 2px solid var(--color-ink-dark);
  outline-offset: -2px;
}

.image-preview-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--color-ink-dark);
  color: var(--color-white);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  font-weight: 600;
}

.image-preview-primary {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink-dark);
  border: none;
  padding: 0.35rem 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.image-preview-primary:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
}

.admin-form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Categorías Admin */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.category-item {
  background: var(--color-white);
  padding: 1rem 1.5rem;
  border: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.category-item-name {
  font-family: var(--font-serif);
  color: var(--color-text);
  font-size: 1.1rem;
}

.category-item-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.category-item-count {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.category-add {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.category-add input {
  flex: 1;
  min-width: 200px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.category-add input:focus {
  outline: none;
  border-color: var(--color-ink);
}

/* Toast notifications */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 5000;
  transform: translateY(100px);
  opacity: 0;
  transition: var(--transition);
  font-size: 0.9rem;
  max-width: 300px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.error { background: var(--color-error); }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--color-ink-light); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink); }

/* ============ CARRITO / PRESUPUESTO ============ */

/* Botón flotante */
.cart-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1500;
  transition: var(--transition);
}

.cart-fab:hover {
  background: var(--color-ink-deep);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.cart-fab.pulse {
  animation: cartPulse 0.6s ease;
}

@keyframes cartPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.cart-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-nude);
  color: var(--color-text);
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
}

/* Botón agregar en tarjeta del catálogo */
.product-add-btn {
  width: 100%;
  margin-top: auto;
  padding: 0.7rem;
  /* 44px en todos los tamanos, igual que .nav-cart-btn / .modal-close /
     .modal-arrow. Es el control mas tocado del sitio (lleva al presupuesto)
     y en mobile el padding reducido lo dejaba en 36px. */
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-ink-dark);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
}

.product-add-btn:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

/* Excepcion pedida: el tilde de "ya seleccionado" queda en gris (no negro
   puro como el resto de los botones), mas suave/esfumado a proposito.
   Colores dedicados, no reutiliza la rampa negra de --color-ink*. */
.product-add-btn.in-cart {
  background: #b0b0b0;
  color: var(--color-text);
  border-color: #b0b0b0;
}

.product-add-btn.in-cart:hover {
  background: var(--color-text-soft);
  color: var(--color-white);
}

/* Etiqueta corta del botón solo en mobile (ver media query) */
.add-label-short { display: none; }

.product-name {
  cursor: pointer;
}

/* Selector de cantidad en modal de producto */
.modal-quantity {
  margin-bottom: 1.5rem;
}

.modal-quantity-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.quantity-control.compact {
  height: 36px;
}

.qty-btn {
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-text);
  transition: var(--transition);
  font-weight: 400;
}

.quantity-control.compact .qty-btn {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

.qty-btn:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink-dark);
}

.qty-input {
  width: 60px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
  background: transparent;
  -moz-appearance: textfield;
}

.quantity-control.compact .qty-input {
  width: 45px;
  height: 36px;
  font-size: 0.875rem;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-input:focus {
  outline: none;
}

/* Botón agregar al carrito en modal */
.btn-add-cart {
  padding: 1.1rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 400;
}

.btn-add-cart:hover {
  background: var(--color-ink-deep);
  transform: translateY(-1px);
}

.btn-whatsapp-secondary {
  padding: 0.9rem;
  background: transparent;
  color: var(--color-ink-dark);
  border: 1px solid var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 400;
}

.btn-whatsapp-secondary:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
}

/* Modal carrito */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 42, 42, 0.7);
  backdrop-filter: blur(10px);
  display: none;
  z-index: 2500;
  animation: fadeIn 0.3s ease;
}

.cart-overlay.active {
  display: flex;
  justify-content: flex-end;
}

.cart-panel {
  background: var(--color-bg);
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.15);
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.cart-header {
  padding: 2rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cart-label {
  font-size: 0.875rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.cart-title {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.1;
}

.cart-title em {
  font-style: italic;
  color: var(--color-ink-dark);
}

.cart-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.cart-close:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
}

.cart-items-count {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

.cart-item:hover {
  border-color: var(--color-ink-light);
}

.cart-item-image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: var(--color-nude-light);
  overflow: hidden;
}

.cart-item-image picture {
  width: 100%;
  height: 100%;
  display: block;
}

.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-nude-light) 0%, var(--color-ink-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.cart-item-category {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.cart-item-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-item-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.cart-item-remove {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  transition: var(--transition);
}

.cart-item-remove:hover {
  background: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}

/* Carrito vacío */
.cart-empty {
  text-align: center;
  padding: 3rem 1rem;
}

.cart-empty-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.cart-empty-text {
  color: var(--color-text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.cart-empty-btn {
  padding: 0.9rem 2rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

.cart-empty-btn:hover {
  background: var(--color-ink-deep);
}

/* Footer del carrito */
.cart-footer {
  padding: 1.5rem 2rem 2rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-event-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-event-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

/* Etiqueta y campo como un solo grupo. Con solo el gap de .cart-event-info
   la etiqueta quedaba a 8px del campo de arriba y a 7px del suyo: casi a la
   misma distancia, no se leia de quien era. El margen de arriba la despega
   del campo anterior. */
.cart-event-field {
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
}

.cart-input,
.cart-textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text);
  transition: var(--transition);
  font-weight: 400;
}

.cart-input:focus,
.cart-textarea:focus {
  outline: none;
  border-color: var(--color-ink);
}

.cart-textarea {
  min-height: 70px;
  resize: vertical;
}

.cart-send {
  padding: 1.1rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 500;
}

.cart-send:hover {
  background: var(--color-ink-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cart-send-label {
  font-size: 0.875rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-weight: 500;
}

.cart-send-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.cart-send-row .cart-send {
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 0.5rem;
  font-size: 0.7rem;
}

.cart-send-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.3;
}

.cart-send-info small {
  font-size: 0.7rem;
  opacity: 0.8;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 400;
}

.cart-clear {
  padding: 0.7rem;
  background: transparent;
  color: var(--color-text-soft);
  border: none;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400;
}

.cart-clear:hover {
  color: var(--color-error);
}

/* ============ BOTÓN VOLVER ============ */
.back-btn {
  position: fixed;
  top: 4.5rem;
  left: 1rem;
  z-index: 1500;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 12px var(--color-shadow);
  transition: var(--transition);
  font-weight: 500;
}
.back-btn:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

/* Botón flotante "Explorar catálogo" (solo inicio, al scrollear) */
.explore-fab {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 1400;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.explore-fab.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.explore-fab:hover { background: var(--color-ink-deep); }
.explore-fab-arrow { font-size: 0.9rem; }

/* Brillo tenue que barre los botones "Explorar Catálogo" cada ~5,5s */
.hero-cta { position: relative; }
.hero-cta, .explore-fab { overflow: hidden; }
.hero-cta::after, .explore-fab::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 38%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: btnSheen 3s ease-in-out infinite;
}
@keyframes btnSheen {
  0%, 68% { left: -60%; }
  86%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta::after, .explore-fab::after { animation: none; display: none; }
}

/* Botón flotante "Ver mi selección" (mobile, solo catálogo con ítems) */
.selection-fab {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1400;
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-ink-dark);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.selection-fab-count {
  background: var(--color-white);
  color: var(--color-ink-dark);
  font-weight: 700;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 0.875rem;
}


/* Toast success */
.toast.success {
  background: var(--color-ink-dark);
}

/* Mobile responsive carrito */


/* ============ CART EVENT TOGGLE ============ */
.cart-event-toggle {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
.cart-event-toggle:hover { border-color: var(--color-ink); color: var(--color-ink-dark); }
.cart-event-toggle svg { transition: transform var(--transition); flex-shrink: 0; }
.cart-event-toggle.open svg { transform: rotate(180deg); }

/* ============ MODAL ARROWS ============ */
.modal-image-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.modal-main-image {
  cursor: zoom-in;
  /* Sobre esta foto el pinch abre el visor fullscreen, así que el navegador
     NO debe además hacer su zoom nativo de página (quedaba "pegado" al
     cerrar el visor, y un zoom nativo no se puede deshacer por JS).
     Ojo: 'manipulation' NO sirve acá — sólo desactiva el doble-tap-zoom y
     deja el pinch habilitado. 'pan-y' bloquea pinch y doble-tap, pero
     conserva el scroll vertical del modal. */
  touch-action: pan-y;
}

/* Pista sutil de que la foto se puede ampliar (mismo lenguaje que el badge "N fotos") */
.modal-zoom-hint {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(42, 42, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  pointer-events: none;
  opacity: 0.85;
}

/* Visor de fotos (PhotoSwipe): el boton de cerrar debe quedar siempre
   visible y tocable, sin importar el zoom/pan o el estado de "controles
   visibles" de la libreria (por defecto un tap sobre la foto los oculta;
   ya lo desactivamos via tapAction:false, esto es una defensa extra). */
.pswp__top-bar {
  opacity: 1 !important;
  pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto !important;
}

/* Degradado detras de la barra superior del visor (contador, zoom, cerrar).
   La barra de PhotoSwipe no trae fondo propio: en horizontal, o con zoom, la
   foto ocupa todo el alto y los controles blancos quedaban encima de la foto,
   de 1,65 a 2,74:1 con fotos claras (DEUDA-TECNICA §6). A la altura de los
   controles hay 0,6 de negro, que da 4,6:1 para el contador aun sobre blanco
   puro; despues se desvanece para no cortar la foto de golpe.
   Va desde nuestro CSS, sin tocar la libreria. Dos clases para no depender
   de que photoswipe.css se cargue despues que este archivo. */
.pswp .pswp__top-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.62) 0,
    rgba(0, 0, 0, 0.6) 40px,
    rgba(0, 0, 0, 0) 110px);
  pointer-events: none;
  z-index: -1;
}

/* Flechas de foto: discretas para no tapar la imagen. Fondo oscuro
   semitransparente (en vez de blanco sólido) y sombra en el ícono para que
   se lea sobre cualquier foto. El área de toque se mantiene en 44px. */
.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(42, 42, 42, 0.3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  z-index: 10;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal-arrow svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.modal-arrow:hover {
  background: rgba(42, 42, 42, 0.55);
  color: var(--color-white);
}

.modal-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.modal-arrow-prev { left: 0.75rem; }
.modal-arrow-next { right: 0.75rem; }


/* ============ MODAL DETAILS TOGGLE ============ */
.modal-details-toggle {
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
.modal-details-toggle:hover {
  border-color: var(--color-ink);
  color: var(--color-ink-dark);
  background: var(--color-white);
}
.modal-details-toggle svg { transition: transform var(--transition); flex-shrink: 0; }
.modal-details-toggle.open svg { transform: rotate(180deg); }
.modal-details { margin-top: 1rem; }
.modal-details .modal-description { margin-bottom: 1rem; }
.modal-details .modal-specs { margin-bottom: 0; }

/* Quantity inline row */
.modal-quantity-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ============ MODAL BACK BUTTON ============ */

/* ============ MODAL WHATSAPP ROW ============ */
.modal-wa-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.modal-wa-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* ============ QUICK QUANTITY SHORTCUTS ============ */
.qty-shortcuts {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.qty-shortcut {
  padding: 0.3rem 0.75rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
}
/* Negro de marca con texto blanco, como el filtro activo. Antes: fondo
   --color-ink-light (#4a4a4a) con texto #2a2a2a, 1,61:1. */
.qty-shortcut:hover {
  background: var(--color-ink-dark);
  color: var(--color-white);
  border-color: var(--color-ink-dark);
}

/* Badge de estado "guardado en la nube" en el header del admin */
/* Excepcion: este chip vive en el header oscuro del admin, se mantiene
   claro (blanco/cremoso) en vez de negro para no perderse contra el fondo. */
.admin-cloud-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: rgba(250, 248, 245, 0.85);
  background: rgba(250, 248, 245, 0.08);
  border: 1px solid rgba(250, 248, 245, 0.25);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}


/* ============ AJUSTES MOBILE ============ */
/* Este bloque va al FINAL del archivo a proposito.
   Estaba declarado a la altura de la linea 671, antes de las reglas base de
   .product-info, .product-name, .product-add-btn y .add-label-short. Con la
   misma especificidad gana la que se declara despues, asi que 16 reglas de
   este bloque nunca se aplicaron: el boton "Agregar" no mostraba texto en
   celular y conservaba el tamano de escritorio.
   Antes se tapaba con !important en .product-name; al mover el bloque deja
   de hacer falta. Si se agregan overrides mobile, van aca abajo. */

/* ============================================================
   MEDIA QUERIES
   Todos juntos y al final, de mas ancho a mas angosto: 1024 -> 768
   -> 480. Antes convivian dos esquemas -por seccion y un bloque
   global- y habia bloques de 768 declarados DESPUES de bloques de
   480, o sea que a 375px ganaba el mas ancho. Ver DEUDA-TECNICA §1.

   REGLA AL AGREGAR UNO NUEVO: va en el grupo de su breakpoint, al
   final del grupo. Nunca junto a su componente, o vuelve el choque.
   Los min-width (desde un ancho para arriba) van en su propio grupo,
   antes del de 1024: no compiten con los max-width porque sus rangos
   no se tocan (desde 769 contra hasta 768).
   ============================================================ */


/* ------------------------------------------------------------
   desde 769px, escritorio  (1 bloque)
   ------------------------------------------------------------ */

/* .nav--sobre-hero: links claros sobre el negro del hero.
   Solo en escritorio, donde los links estan en la barra, sobre el negro.
   En celular estan dentro del menu desplegable, con fondo hueso propio, y
   ahi tienen que tomar los colores normales de .nav-link. Antes esta regla
   no tenia ancho y dejaba el menu en hueso sobre hueso (DEUDA-TECNICA §3,
   quinta aparicion). El hover y el activo van con tres clases, asi que no
   dependen de venir despues de .nav-link:hover. */
@media (min-width: 769px) {
  .nav--sobre-hero .nav-link { color: var(--color-bg); }
  .nav--sobre-hero .nav-link::after { background: var(--color-bg); }
  .nav--sobre-hero .nav-link:hover,
  .nav--sobre-hero .nav-link.active { color: var(--color-white); }
}


/* ------------------------------------------------------------
   1024px  (2 bloques)
   ------------------------------------------------------------ */

/* GALERÍA DESTACADA */
@media (max-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }

/* sin seccion */
@media (max-width: 1024px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }


/* ------------------------------------------------------------
   768px  (10 bloques)
   ------------------------------------------------------------ */

/* .nav-cart-btn svg */
@media (max-width: 768px) {
  .nav-cart-btn svg { width: 26px; height: 26px; }
  .nav-cart-badge {
    font-size: 0.7rem;
    min-width: 21px;
    height: 21px;
    top: 2px;
    right: 2px;
  }
}

/* GALERÍA DESTACADA */
@media (max-width: 768px)  { .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

/* Franja de confianza (debajo del hero) */
@media (max-width: 768px) {
  .trust-band { padding: 1.6rem 1.2rem; }
  .trust-band-text { font-size: 1.25rem; }
}

/* sin seccion */
@media (max-width: 768px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

/* MODAL PRODUCTO */
@media (max-width: 768px) {
  .modal {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    max-height: 95vh;
    overflow-y: auto;
  }
  .modal-content { display: block; padding: 2rem; }
  .modal-content > * { flex-shrink: 0; }
  .modal-actions { margin-top: 1rem; }
}

/* CONTACTO */
@media (max-width: 768px) {
  .contact-container { grid-template-columns: 1fr; }
}

/* .footer */
@media (max-width: 768px) {
  .footer {
    padding: 3rem 1.5rem 0;
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
  }
  .footer-brand {
    align-items: center;
    text-align: center;
  }
  .footer-brand-tagline {
    text-align: center;
  }
  .footer-section {
    align-items: flex-start;
  }
  .loc-full { display: none; }
  .loc-short { display: inline; }
}

/* .nav */
@media (max-width: 768px) {
  .nav { padding: 0.75rem 1.5rem; }
  .nav-logo-img { height: 40px; }
  .nav-menu { display: none; }
  .nav-menu.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-bg);
    padding: 1.5rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--color-border);
  }
  .nav-mobile-toggle { display: block; }
  .hero-cta-secondary { width: 100%; justify-content: center; }
  .featured, .catalog, .contact { padding: 4rem 1.5rem; }
  .featured-cta { padding: 2rem 1.5rem; margin-top: 3rem; }
  .admin-header { padding: 1rem; }
  .admin-content { padding: 1rem; }
  .admin-form { padding: 1.5rem; }
}

/* .selection-fab.visible */
@media (max-width: 768px) {
  .selection-fab.visible { display: inline-flex; }
}

/* .cart-fab */
@media (max-width: 768px) {
  .cart-fab { bottom: 1.5rem; right: 1.5rem; width: 54px; height: 54px; }
  .cart-panel { max-width: 100%; }
  .cart-header { padding: 1.5rem; }
  .cart-body { padding: 1rem 1.5rem; }
  .cart-footer { padding: 1.25rem 1.5rem 1.5rem; }
  .cart-title { font-size: 1.5rem; }
}


/* ------------------------------------------------------------
   480px  (4 bloques)
   ------------------------------------------------------------ */

/* GALERÍA DESTACADA */
@media (max-width: 480px)  { .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } }

/* .modal-overlay */
@media (max-width: 480px) {
  /* Modal producto fullscreen */
  .modal-overlay { padding: 0; align-items: flex-start; }
  .modal { max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; display: block; }
  .modal-gallery { position: relative; }
  .modal-main-image { aspect-ratio: 1/1; }
  .modal-content { overflow-y: visible; padding: 1.25rem; display: block; }
  .modal-content > * { flex-shrink: 0; }
  .modal-actions { margin-top: 1rem; }
  .modal-name { font-size: 1.5rem; margin-bottom: 1rem; }
  .modal-divider { display: none; }
  .modal-quantity { margin-bottom: 1rem; }
  .modal-quantity-label { margin-bottom: 0.5rem; }
  .modal-details-toggle { margin-top: 1rem; padding: 0.7rem 0.9rem; }

  /* Cart compacto */
  .cart-header { padding: 0.8rem 1rem; }
  .cart-title { font-size: 1.1rem; }
  .cart-body { padding: 0.7rem 0.9rem; }
  .cart-footer { padding: 0.8rem 0.9rem 1rem; gap: 0.5rem; }
  .cart-event-label { font-size: 0.7rem; margin-bottom: 0.4rem; }
  .cart-input, .cart-textarea { padding: 0.5rem 0.65rem; font-size: 0.875rem; }
  .cart-textarea { min-height: 44px; }
  .cart-item { padding: 0.65rem; gap: 0.65rem; }
  .cart-item-image { width: 58px; height: 58px; }
  .cart-items-count { font-size: 0.7rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; }
  .cart-send-row .cart-send { padding: 0.75rem 0.4rem; }
  .cart-event-toggle { padding: 0.55rem 0.75rem; font-size: 0.7rem; }
}

/* .modal-arrow-prev */
@media (max-width: 480px) {
  .modal-arrow-prev { left: 0.5rem; }
  .modal-arrow-next { right: 0.5rem; }
}

/* AJUSTES MOBILE */
@media (max-width: 480px) {
  /* Inicio — destacados */
  .featured { padding: 3rem 0.75rem; }
  .section-header { margin-bottom: 2rem; }
  /* Bodoni Moda es de alto contraste: por debajo de ~18px pierde
     legibilidad, así que en mobile no baja de ahí y suma un poco de
     letter-spacing para compensar sus trazos finos a tamaño chico. */
  .featured-item-name { font-size: 1.15rem; letter-spacing: 0.01em; }
  .featured-cta { padding: 1.5rem 1rem; margin-top: 2rem; }
  /* Catálogo */
  /* El tope no es decorativo: arriba hay DOS elementos fixed, o sea fuera del
     flujo, y la seccion se maqueta como si no existieran. El nav ocupa 69px y
     el boton Volver va de 72 a 108. Con los 3rem que habia, 'Coleccion'
     quedaba detras del nav y 'Nuestro catalogo' debajo del boton. 7.5rem deja
     12px de aire bajo el boton. Si cambia el alto del nav o la posicion del
     boton, este numero hay que rehacerlo. */
  .catalog { padding: 7.5rem 0.75rem 3rem; }
  /* Contacto es la otra vista con boton Volver, con el mismo defecto: los
     4rem que traia la dejaban 5px por debajo del nav. */
  .contact { padding: 7.5rem 1.5rem 4rem; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .product-info { padding: 0.6rem 0.7rem 0.8rem; }
  .product-category { display: none; }
  .product-name { font-size: 1.15rem; line-height: 1.3; letter-spacing: 0.01em; }
  .product-add-btn { font-size: 0.7rem; padding: 0.6rem 0.3rem; margin-top: 0.6rem; letter-spacing: 0.1em; gap: 0.35rem; }
  .product-add-btn svg { width: 12px; height: 12px; }
  .add-label-full { display: none; }
  .add-label-short { display: inline; }
  .catalog-filters { gap: 0.4rem; margin-bottom: 1.5rem; }
  .filter-btn { font-size: 0.7rem; padding: 0.55rem 1rem; }
  .filter-search { max-width: 100%; margin-bottom: 1rem; }
  .filter-search input { padding: 0.6rem 1rem 0.6rem 2.3rem; font-size: 0.875rem; }
  /* Celular tiene su propio juego, y la razon no es estetica. En escritorio
     la ampliacion la fija el ANCHO de la foto y no depende del alto; aca la
     fija el ALTO de la ventana, asi que cada pixel que le sumo a la foto la
     desenfoca. Y ademas cada pixel del hero le compite al primer producto,
     que tiene que entrar en la primera pantalla. Con 198px la foto no amplia
     (0,90x) y el producto se ve sin scrollear. */
  .hero {
    --hero-negro: 312px;
    --hero-foto: 279px;
    --hero-logo: 78%;
    --hero-logo-y: 52%;
    --hero-linea-y: 90%;
    --hero-linea-tam: 0.98;
    --hero-cta-y: 44%;
    --hero-cta: 1.05;
    /* Inerte con estos valores: a 440px la escala la fija el ALTO (0,42x) y no
       sobra foto para correr. Queda escrito para cuando cambie la ventana. */
    --hero-foco: 10%;
  }
  /* En 375px de ancho el texto entero pide 391px a 0,7rem, asi que no entra
     en un renglon sin bajar el tracking a 0,10em, y ahi deja de leerse como
     kicker. Entra en dos, y con 90% de caja el balance corta parejo en vez de
     dejar un renglon corto colgando. */
  .hero-linea { width: 90%; letter-spacing: 0.18em; line-height: 1.8; }
  /* min-height 44px: el area de toque minima que fija DESIGN.md. Con solo
     padding quedaba en 42. */
  .hero-cta { padding: 0.8rem 1.5rem; min-height: 44px; font-size: 0.7rem; letter-spacing: 0.16em; gap: 0.6rem; }
}