/* ==========================================================================
   AREUMSKIN — "Seúl / Santiago"
   Porcelana · Tinta · Omija — Creato Display + Hanken Grotesk + IBM Plex Mono + Coolvetica
   ========================================================================== */

:root {
  --porcelana:   #F7F4EF;
  --papel:       #FFFFFF;
  --tinta:       #1B1713;
  --tinta-suave: #5C554D;
  --omija:       #742F3E;
  --omija-oscuro:#5A2430;
  --rosa-claro:  #C9A0A9;
  --rosado:      #EBDCD6;
  --linea:       #E3DCD2;
  --danger:      #A94438;

  /* Fuentes. --display eran los títulos con serifa (Prata); ahora son Creato.
     --prata y --hanken quedan para el header, que conserva las originales. */
  --prata: 'Prata', Georgia, serif;
  --hanken: 'Hanken Grotesk', sans-serif;
  --creato: 'Creato Display', 'Hanken Grotesk', sans-serif;
  --coolvetica: 'Coolvetica', 'Hanken Grotesk', sans-serif;
  --nunito: 'Nunito Sans', 'Hanken Grotesk', sans-serif;
  --display: var(--creato);
  --sans: 'Hanken Texto', 'Hanken Grotesk', sans-serif;
  /* Etiquetas chicas (antes IBM Plex Mono): Creato Display Light Italic.
     --plex queda para el header y sus desplegables, que conservan la original. */
  --plex: 'IBM Plex Mono', monospace;
  --mono: 'Creato Etiqueta', 'Hanken Grotesk', sans-serif;

  /* Grosor del texto normal. Para más negrita, súbelos (600 = semi negrita). */
  --peso-texto: 500;   /* el texto normal, antes 400 */
  --peso-fino: 500;    /* el que era fino, antes 300 */

  --sombra-ficha: 0 24px 48px -24px rgba(27, 23, 19, 0.18);
  --sombra-panel: 0 32px 64px -32px rgba(27, 23, 19, 0.28);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Creato Display (licencia SIL Open Font, en fonts/creato_display). Se carga
   sólo el Medium, que es el que se usa: marca y título de la ficha de producto.
   swap: mientras baja se ve el texto con la fuente de respaldo, no en blanco. */
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato_display/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* La cursiva de los títulos («Confirmar pedido», «Nuestras marcas»…): sin este
   archivo el navegador inclina la letra a la fuerza y se ve deforme. */
@font-face {
  font-family: 'Creato Display';
  src: url('fonts/creato_display/CreatoDisplay-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* «Creato Etiqueta» es Creato Display Regular Italic con nombre propio, para
   las etiquetas chicas que antes eran IBM Plex Mono. Se declara para cualquier
   grosor y estilo: así las 128 reglas que la usan (con 400, 500, normal…) la
   muestran tal cual es, sin que el navegador le invente negrita ni una segunda
   inclinación. size-adjust la agranda pareja en todas partes (100% = original). */
@font-face {
  font-family: 'Creato Etiqueta';
  src: url('fonts/creato_display/CreatoDisplay-RegularItalic.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 108%;
}
/* La misma etiqueta en negrita de verdad (Bold Italic). Hace falta aparte:
   «Creato Etiqueta» usa un solo archivo para todos los grosores, así que
   pedirle bold no la engrosa. Se usa en los títulos desplegables de filtros. */
@font-face {
  font-family: 'Creato Etiqueta Negrita';
  src: url('fonts/creato_display/CreatoDisplay-BoldItalic.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  /* block y no swap: son dos títulos cortos y es mejor esperar un instante a la
     negrita que verlos aparecer sin bold y engrosarse. productos.html la pide
     con preload, así que casi siempre ya está lista. */
  font-display: block;
  size-adjust: 108%;
}

/* Coolvetica Regular Italic: marcas en las tarjetas, en la cinta del inicio y
   la descripción de la página de marcas. */
@font-face {
  font-family: 'Coolvetica';
  src: url('fonts/coolvetica/Coolvetica%20Rg%20It.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* «Hanken Texto» es la misma Hanken Grotesk de Google (el mismo archivo, así
   que no se descarga nada nuevo), dibujada un 6% más grande. Con esto todo el
   texto normal crece parejo sin tocar los cientos de tamaños del archivo.
   Para cambiar cuánto crece, ajusta size-adjust (100% = tamaño original). */
@font-face {
  font-family: 'Hanken Texto';
  src: url('https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 106%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* El header —barra de anuncio, menú, desplegables, carro y menú del celular—
   y el panel de administración conservan las fuentes originales: Hanken sin
   agrandar, con sus grosores de siempre, y Prata en el menú del celular. */
.anuncio, header, .mobile-nav {
  --sans: var(--hanken);
  --display: var(--prata);
  --mono: var(--plex);
  --peso-texto: 400;
  --peso-fino: 300;
  font-family: var(--sans);
  font-weight: var(--peso-texto);
}
.panel-admin {
  --sans: var(--hanken);
  --peso-texto: 400;
  --peso-fino: 300;
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-weight: var(--peso-texto);
  background: var(--porcelana);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--sans); }
::selection { background: var(--rosado); color: var(--tinta); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--omija);
  outline-offset: 3px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   BARRA DE ANUNCIO
   ========================================================================== */
.anuncio {
  background: var(--tinta);
  color: var(--porcelana);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 16px;
}
.anuncio .anuncio-destacado { color: var(--rosa-claro); }

/* ==========================================================================
   HEADER (estructura compartida por todas las páginas)
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 32px;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow 0.25s ease;
}
header.scrolled { box-shadow: 0 8px 24px -16px rgba(27, 23, 19, 0.18); }

.header-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}
.header-marca {
  height: 30px;
  width: auto;
  display: block;
}
.header-divisor {
  width: 1px;
  height: 24px;
  background: var(--linea);
  flex-shrink: 0;
}
.header-nombre {
  font-family: var(--creato);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--tinta);
}

nav { display: flex; gap: 36px; align-items: center; }
nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
nav a:hover, nav a.active { border-bottom-color: var(--omija); }

.header-actions { display: flex; gap: 14px; align-items: center; }

/* Enlace/botón secundario del header */
.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  padding: 8px 16px;
  border: 1px solid var(--tinta);
  border-radius: 100px;
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cart-btn:hover { background: var(--tinta); color: var(--porcelana); }

/* Íconos del header: Mis pedidos (perfil), Mis favoritos y el carro.
   Los archivos son máscaras, así que toman el color del texto y cambian de
   color al pasar el mouse igual que los enlaces. Para cambiar el tamaño,
   ajusta width/height de .icono. */
.icono {
  display: block;
  width: 22px; height: 22px;
  background-color: currentColor;
}
.icono-perfil {
  -webkit-mask: url('iconos/perfil.webp?v=3') center / contain no-repeat;
          mask: url('iconos/perfil.webp?v=3') center / contain no-repeat;
}
.icono-favoritos {
  -webkit-mask: url('iconos/favoritos.webp?v=3') center / contain no-repeat;
          mask: url('iconos/favoritos.webp?v=3') center / contain no-repeat;
}
.icono-carro {
  width: 24px; height: 24px;
  -webkit-mask: url('iconos/carro.webp?v=2') center / contain no-repeat;
          mask: url('iconos/carro.webp?v=2') center / contain no-repeat;
}
.icono-header,
.carro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  color: var(--tinta);
  background: transparent;
  transition: color 0.2s;
}
.icono-header:hover, .carro:hover { color: var(--omija); }

/* Cantidad del carro: globito sobre el ícono; con el carro vacío no se muestra */
.cart-count { font-family: var(--mono); }
.carro .cart-count {
  position: absolute;
  top: -2px; right: -6px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--omija);
  color: var(--porcelana);
  font-size: 10px;
  line-height: 17px;
  text-align: center;
}
.carro .cart-count.vacio { display: none; }

/* Enlace de cuenta (texto plano) */
.enlace-cuenta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--tinta);
  transition: all 0.3s;
}

/* ---- MENÚ LATERAL (celular y tablet) ----
   Entra desde la izquierda sobre un velo oscuro, igual que el carrito lo hace
   desde la derecha. Se oculta con transform + visibility y no con display:none,
   para que la entrada y la salida se vean animadas. */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 198;
  background: rgba(27, 23, 19, 0.5);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity 0.35s ease;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 199;
  width: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--porcelana);
  box-shadow: var(--sombra-panel);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.45s var(--ease-out);
}
.mobile-nav-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea);
}
.mobile-nav-marca { height: 26px; width: auto; display: block; }
.mobile-nav-close {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--papel);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}
.mobile-nav-close:hover { color: var(--tinta); transform: rotate(90deg); }
/* Las secciones, con el mismo estilo de letra del menú del header */
.mobile-nav-secciones { display: flex; flex-direction: column; padding: 14px 0; }
.mobile-nav-secciones a {
  display: block;
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.mobile-nav-secciones a:hover,
.mobile-nav-secciones a:focus-visible {
  color: var(--omija);
  background: var(--papel);
  border-left-color: var(--omija);
}
/* Enlaces de la cuenta, separados y más discretos */
.mobile-nav-cuenta {
  display: flex;
  flex-direction: column;
  margin: 0 24px;
  padding: 10px 0 28px;
  border-top: 1px solid var(--linea);
}
.mobile-nav-cuenta a {
  padding: 12px 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  transition: color 0.2s;
}
.mobile-nav-cuenta a:hover,
.mobile-nav-cuenta a:focus-visible { color: var(--omija); }
/* En pantallas grandes el header muestra su propio menú: el lateral no existe */
@media (min-width: 1001px) {
  .mobile-nav, .mobile-nav-overlay { display: none; }
}

/* ==========================================================================
   ETIQUETAS Y BOTONES COMUNES
   ========================================================================== */
.etiqueta,
.section-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--omija);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.etiqueta::before,
.section-tag::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--omija);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--tinta);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-lleno, .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--porcelana);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-lleno:hover, .btn-primary:hover { background: var(--omija); border-color: var(--omija); }
.btn-linea, .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-linea:hover, .btn-secondary:hover { border-color: var(--omija); color: var(--omija); }

.contenedor { max-width: 1280px; margin: 0 auto; }

.seccion-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.seccion-cabeza h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.15;
  max-width: 20ch;
}
.seccion-cabeza h2 em { font-style: italic; color: var(--omija); }
/* Salida desde los destacados de la portada al catálogo completo. Va centrado
   bajo las tarjetas, que es donde termina de mirar quien recorrió la fila.

   La tipografía es la misma de los demás botones del sitio (`--sans`, 14/600),
   no la monoespaciada de las etiquetas: en un botón grande el mono con
   mayúsculas se lee como un letrero técnico y no como una invitación. */
.btn-ver-todos {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--rosado);
  color: var(--omija);
  border: 1px solid var(--rosa-claro);
  border-radius: 100px;
  padding: 15px 34px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.btn-ver-todos:hover {
  background: var(--omija);
  border-color: var(--omija);
  color: var(--porcelana);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(116, 47, 62, 0.22);
}

.ver-todo {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--omija);
  border-bottom: 1px solid var(--omija);
  padding-bottom: 2px;
}

/* ==========================================================================
   BANNERS DE PORTADA (carrusel)
   Las imágenes se suben desde el panel; el JS arma las diapositivas.
   Escritorio 1920×720 (8:3) · Celular 1080×1080 (cuadrado)
   ========================================================================== */
.banners {
  position: relative;
  overflow: hidden;
  background: var(--porcelana);
}
.banners[hidden] { display: none; }
/* Mientras llega la lista (sólo en la primera visita: después se recuerda) el
   bloque ya mide lo que mide un banner. Si naciera en cero, la foto aparecería
   de golpe empujando toda la página media pantalla hacia abajo. */
.banners:empty { aspect-ratio: 8 / 3; max-height: 78vh; }

/* Todas las diapositivas van en fila; el JS mueve la pista de a 100% */
.banners-pista {
  display: flex;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-slide {
  flex: 0 0 100%;
  display: block;
  position: relative;
  aspect-ratio: 8 / 3;
  /* En pantallas muy anchas el 8:3 se volvería altísimo: se recorta */
  max-height: 78vh;
}
.banner-slide picture { display: block; width: 100%; height: 100%; }
.banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease-out);
}
/* Mientras la foto baja se ve el fondo; al terminar entra con un fundido */
.banner-slide img.cargando { opacity: 0; }

/* ---- Flechas ---- */
.banner-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--tinta);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s, background 0.25s;
  z-index: 2;
}
/* Aparecen al acercar el mouse; en táctil se muestran siempre (más abajo) */
.banners:hover .banner-flecha,
.banner-flecha:focus-visible { opacity: 1; }
.banner-flecha:hover { background: #fff; }
.banner-prev { left: 18px; }
.banner-next { right: 18px; }

/* ---- Puntos ---- */
.banner-puntos {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 9px;
  z-index: 2;
}
.banner-punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.banner-punto.activo { background: #fff; transform: scale(1.25); }

@media (max-width: 768px) {
  /* En celular el banner es cuadrado: se sube una imagen aparte en el panel */
  .banner-slide,
  .banners:empty { aspect-ratio: 1 / 1; max-height: none; }
  /* Sin mouse que las revele, las flechas van siempre visibles */
  .banner-flecha { opacity: 1; width: 38px; height: 38px; }
  .banner-prev { left: 10px; }
  .banner-next { right: 10px; }
  .banner-puntos { bottom: 12px; }
}

/* Quien pidió menos animación no ve el deslizamiento (el JS ya no rota solo) */
@media (prefers-reduced-motion: reduce) {
  .banners-pista { transition: none; }
}

/* ==========================================================================
   CINTA DE INGREDIENTES
   ========================================================================== */
.cinta {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
  background: var(--papel);
}
.cinta-inner {
  display: flex;
  gap: 64px;
  width: max-content;
  padding: 16px 0;
  animation: desplazar 38s linear infinite;
}
.cinta:hover .cinta-inner { animation-play-state: paused; }
@keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cinta span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.cinta span b { color: var(--omija); font-weight: 500; }

/* ==========================================================================
   PRODUCTOS — FICHAS TÉCNICAS
   ========================================================================== */
.products-section { padding: 110px 32px; }
.products-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border: 1px solid var(--linea);
  border-radius: 100px;
  background: var(--papel);
  padding: 8px 18px;
  transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--tinta); color: var(--tinta); }
.filter-btn.active {
  background: var(--tinta);
  color: var(--porcelana);
  border-color: var(--tinta);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Los destacados de la portada van de a cinco. La ficha queda en unos 240px en
   vez de 305, así que el interior se aprieta un poco para que el nombre siga
   entrando en dos líneas y el precio no choque con el botón. Sólo acá: en la
   página de Productos las fichas se quedan como están. */
.products-grid[data-bestseller="1"] {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.products-grid[data-bestseller="1"] .product-info { padding: 16px 16px 18px; gap: 10px; }
.products-grid[data-bestseller="1"] .product-name { font-size: 16.5px; }
.products-grid[data-bestseller="1"] .product-price { font-size: 15px; }
.products-grid[data-bestseller="1"] .product-price-old { font-size: 12px; margin-right: 6px; }
.products-grid[data-bestseller="1"] .product-footer { gap: 8px; }
.products-grid[data-bestseller="1"] .add-to-cart { font-size: 10px; padding: 8px 12px; letter-spacing: 0.06em; }
.products-grid[data-bestseller="1"] .product-badge { font-size: 9px; padding: 5px 10px; }
/* Cinco caben en escritorio y nada más. Se bajan de a uno para que la ficha no
   se achique tanto que el nombre deje de leerse. En celular manda la regla de
   más abajo: dos por fila, y una sola si la pantalla queda muy angosta. */
@media (max-width: 1200px) { .products-grid[data-bestseller="1"] { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px)  { .products-grid[data-bestseller="1"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .products-grid[data-bestseller="1"] { grid-template-columns: repeat(2, 1fr); } }
.product-card {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
  animation: fichaIn 0.6s var(--ease-out) both;
}
.product-card:nth-child(1) { animation-delay: 0.04s; }
.product-card:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3) { animation-delay: 0.16s; }
.product-card:nth-child(4) { animation-delay: 0.22s; }
.product-card:nth-child(5) { animation-delay: 0.28s; }
.product-card:nth-child(6) { animation-delay: 0.34s; }
.product-card:nth-child(7) { animation-delay: 0.4s; }
.product-card:nth-child(8) { animation-delay: 0.46s; }
@keyframes fichaIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-ficha); }

.product-image-wrap {
  aspect-ratio: 1 / 1.05;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Fondos pastel rotativos (firma del diseño) */
.product-card:nth-child(4n+1) .product-image-wrap { background: linear-gradient(165deg, #F3E4DE, #DDB9B4); }
.product-card:nth-child(4n+2) .product-image-wrap { background: linear-gradient(165deg, #E8EDE6, #B9C8B6); }
.product-card:nth-child(4n+3) .product-image-wrap { background: linear-gradient(165deg, #F5EEDF, #DCC9A4); }
.product-card:nth-child(4n+4) .product-image-wrap { background: linear-gradient(165deg, #E7E4EE, #B9B4CD); }

/* El `transform: scale(1)` y el `will-change` no mueven nada: le dan a la foto
   su propia capa, dibujada a la resolución real de la pantalla. Sin eso la
   foto se dibuja dentro de la capa de la ficha, y la ficha lleva transform
   puesto todo el rato —la animación de entrada termina en `both`, y el hover
   la levanta 6px—, así que la imagen quedaba rasterizada una vez y estirada
   después: borrosa. Por eso mejoraba al pasar el mouse y no antes; el zoom del
   hover era lo único que le daba capa propia. Es el mismo caso que la cinta de
   logos de marcas. */
.product-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
}
.product-img.cargando { opacity: 0; }   /* entra con fundido al terminar de bajar */
.product-card:hover .product-img { transform: scale(1.04); }
.product-img-svg {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.5s var(--ease-out);
}
.product-card:hover .product-img-svg { transform: scale(1.04); }

.product-overlay { display: none; }

.product-badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.88);
  border-radius: 100px;
  padding: 5px 12px;
  color: var(--tinta);
  z-index: 2;
}
.badge-new { color: var(--omija); }
.badge-best { color: var(--tinta); }
.badge-sale { background: var(--tinta); color: var(--porcelana); }

/* ---- Botón de favoritos (tarjetas y ficha) ----
   El ícono es el corazón con los dedos (iconos/like*.webp). Van dos capas
   superpuestas: la sin color siempre, y la con color encima, transparente,
   que aparece al pasar el mouse o cuando el producto ya está en favoritos.
   Las dos se cargan desde el principio, así que el primer hover no parpadea. */
.fav-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  border: none;
  padding: 0;
  transition: transform 0.2s var(--ease-out);
}
.fav-btn::before, .fav-btn::after,
.ficha-fav::before, .ficha-fav::after {
  content: '';
  position: absolute;
  inset: 0;
  background: center / contain no-repeat;
  transition: opacity 0.25s var(--ease-out);
}
.fav-btn::before, .ficha-fav::before { background-image: url('iconos/like.webp?v=7'); }
.fav-btn::after, .ficha-fav::after { background-image: url('iconos/like-activo.webp?v=7'); opacity: 0; }
.fav-btn.active::after, .ficha-fav.active::after,
.fav-btn:focus-visible::after, .ficha-fav:focus-visible::after { opacity: 1; }
/* Sólo con mouse: en celular el hover queda «pegado» después de tocar y
   parecería que el producto sigue en favoritos aunque se haya quitado */
@media (hover: hover) {
  .fav-btn:hover::after, .ficha-fav:hover::after { opacity: 1; }
  .fav-btn:hover { transform: scale(1.08); }
}
.fav-btn.active, .ficha-fav.active { animation: favPop 0.35s var(--ease-out); }
@keyframes favPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.product-info {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.product-brand {
  font-family: var(--nunito);
  font-weight: 800;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omija);
}
.product-name {
  font-family: var(--creato);
  font-weight: 500;
  font-size: 18.5px;
  line-height: 1.3;
  color: var(--tinta);

  /* Alto fijo de dos líneas. Sin esto, un producto de nombre corto y otro de
     nombre largo dejan el precio a distinta altura y las tarjetas se ven
     descuadradas. Lo que sobre se corta con puntos suspensivos. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;   /* 1.3 de interlineado × 2 líneas */
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 10px;
}
.product-price { font-weight: 600; font-size: 16px; color: var(--tinta); }
.product-price-old {
  color: var(--tinta-suave);
  font-weight: var(--peso-fino);
  font-size: 13px;
  margin-right: 8px;
  text-decoration: line-through;
}
.add-to-cart {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  border-radius: 100px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.add-to-cart:hover { background: var(--tinta); color: var(--porcelana); }
.products-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--tinta-suave);
  font-size: 15px;
  font-weight: var(--peso-fino);
  padding: 48px 16px;
}
/* Mientras cargan las fichas el botón guarda su lugar, pero invisible: a la
   vista quedaría flotando bajo los esqueletos, y sin ocupar espacio empujaría
   la página unos 100px al aparecer. main.js lo destapa junto con las fichas. */
.products-cta {
  text-align: center;
  margin-top: 48px;
}
.products-cta[data-esperando] { visibility: hidden; }
.products-cta:not([data-esperando]) { animation: fichaIn 0.6s var(--ease-out) 0.3s both; }

/* ESQUELETOS DE CARGA
   Guardan el lugar de las fichas y de las categorías mientras llegan del
   servidor. Sin ellos la sección nace vacía y, al aparecer el contenido, todo
   lo de abajo salta cientos de píxeles. Usan las mismas clases que la ficha
   real (.product-card, .product-info, .product-name…) para medir lo mismo. */
.ficha-esqueleto,
.tarjeta-esqueleto {
  animation: none;
  pointer-events: none;
}
.product-card.ficha-esqueleto .product-image-wrap,
.esq {
  background: linear-gradient(100deg, var(--porcelana) 35%, var(--papel) 50%, var(--porcelana) 65%);
  background-size: 300% 100%;
  animation: esqBrillo 1.6s ease-in-out infinite;
}
.esq { display: block; border-radius: 6px; }
.esq-marca  { width: 42%; height: 17px; }
.esq-nombre { width: 88%; }   /* el alto lo da .product-name: dos líneas */
.esq-precio { width: 34%; height: 16px; }
.esq-boton  { width: 68px; height: 31px; border-radius: 100px; }
.esq-cat    { width: 62%; height: 19px; }
.esq-conteo { width: 38%; height: 10px; }
@keyframes esqBrillo {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ==========================================================================
   CATEGORÍAS (inicio)
   Sólo texto, sin imágenes: cada tarjeta es el nombre y cuántos productos hay.
   ========================================================================== */
.categorias { padding: 110px 32px; background: var(--porcelana); }

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.categoria-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 26px 18px;
  text-align: center;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.categoria-tarjeta:hover {
  border-color: var(--omija);
  background: var(--rosado);
  transform: translateY(-3px);
}

.categoria-nombre {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.25;
  color: var(--tinta);
}
.categoria-conteo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Una categoría sin productos se muestra igual, pero apagada */
.categoria-tarjeta.vacia { opacity: 0.55; }

@media (max-width: 1100px) { .categorias-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px) {
  .categorias { padding: 72px 20px; }
  .categorias-grid { grid-template-columns: repeat(3, 1fr); }
  .categoria-tarjeta { min-height: 108px; padding: 20px 14px; }
  .categoria-nombre { font-size: 16px; }
}
@media (max-width: 520px) {
  .categorias-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Número de productos dentro del desplegable del header */
.nav-categoria-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tinta-suave);
  margin-left: auto;
  padding-left: 14px;
}


/* ==========================================================================
   PÁGINA DE PRODUCTOS (filtros por categoría y marca)
   ========================================================================== */
.productos-page { padding: 56px 32px 110px; max-width: 1420px; margin: 0 auto; }

.productos-cabeza { margin-bottom: 30px; }
.productos-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 38px;
  color: var(--tinta);
}

.productos-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 42px;
  align-items: start;
}

/* ---- Barra lateral ---- */
.productos-filtros {
  position: sticky;
  top: 96px;          /* bajo el header fijo */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 6px;
}

.productos-buscador {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  margin-bottom: 26px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta-suave);
}
.productos-buscador input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta);
}
.productos-buscador input::-webkit-search-cancel-button { cursor: pointer; }

.filtros-limpiar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  margin-bottom: 22px;
  border: 1px solid var(--omija);
  border-radius: 8px;
  background: var(--rosado);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--omija);
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) {
  .filtros-limpiar:hover { background: var(--omija); color: var(--porcelana); }
}
/* En computador los filtros van en su propia columna y no empujan los
   productos: sin filtros el botón simplemente no está */
.filtros-limpiar.oculto { display: none; }

.filtros-grupo { margin-bottom: 30px; }
.filtros-titulo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 10px;
}
.filtros-lista { display: flex; flex-direction: column; gap: 1px; }

/* Título de cada grupo. En pantallas grandes se ve como un título normal y la
   lista siempre abierta; en celular es el botón que la despliega. */
.filtros-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}
.filtros-nombre-grupo { margin-right: auto; }
.filtros-elegido,
.filtros-flecha { display: none; }

@media (max-width: 900px) {
  /* Buscador, «Limpiar filtros» y los grupos, con el mismo espacio entre sí */
  .productos-buscador { margin-bottom: 10px; }
  .filtros-limpiar { margin-bottom: 10px; }
  /* En celular los filtros van sobre los productos: el botón guarda su lugar
     aunque no se vea, así al elegir algo no salta todo hacia abajo */
  .filtros-limpiar.oculto { display: flex; visibility: hidden; pointer-events: none; }

  /* Cada grupo es una tarjeta que se abre hacia abajo al tocar su título.
     El título va en rosado con texto vino, igual abierto o cerrado. */
  .filtros-grupo {
    margin-bottom: 10px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--papel);
    overflow: hidden;
  }
  .filtros-titulo { margin-bottom: 0; }
  .filtros-toggle {
    padding: 9px 18px;
    background: var(--rosado);
    color: var(--omija);
    font-weight: 600;
    cursor: pointer;
  }
  .filtros-nombre-grupo {
    font-family: 'Creato Etiqueta Negrita', var(--mono);
    font-size: 11.5px;
  }
  .filtros-toggle:focus-visible { outline: 2px solid var(--omija); outline-offset: -3px; border-radius: 10px; }
  .filtros-elegido {
    display: inline;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 9px;
    /* La pastilla no debe estirar el botón: se le quita altura por fuera
       para que mida lo mismo con un filtro elegido que sin él */
    margin: -3px 0;
    line-height: 1.3;
    border-radius: 100px;
    background: var(--papel);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--omija);
  }
  .filtros-flecha { display: block; flex-shrink: 0; transition: transform 0.2s; }
  .filtros-grupo.abierto .filtros-flecha { transform: rotate(180deg); }
  .filtros-grupo .filtros-lista { display: none; padding: 12px 12px 14px; }
  .filtros-grupo.abierto .filtros-lista { display: flex; animation: aparecer 0.2s ease; }
}

.filtro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
/* El hover sólo con mouse. En celular, después de tocar una opción el
   navegador la deja «con el mouse encima» y el fondo claro del hover tapaba el
   rosado de elegida: la última que tocabas no se veía igual que la primera. */
@media (hover: hover) {
  .filtro-item:hover:not(:disabled) { background: var(--porcelana); }
}
.filtro-item.activo,
.filtro-item.activo:hover { background: var(--rosado); color: var(--omija); font-weight: 500; }
/* Una opción que no daría resultados con el otro filtro puesto queda
   desactivada: así no se llega nunca a un listado vacío sin explicación */
.filtro-item.vacio { opacity: 0.38; cursor: default; }

.filtro-nombre { flex: 1; min-width: 0; }
.filtro-n {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-suave);
}
.filtro-item.activo .filtro-n { color: var(--omija); }

/* ---- Resultados ---- */
.productos-conteo {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  margin-bottom: 20px;
}
.productos-page .products-grid { grid-template-columns: repeat(4, 1fr); }

/* ---- Barra de resultados: conteo + «Ordenar por» ----
   Mismo lenguaje que el buscador y los filtros de la izquierda: fondo papel,
   borde de línea, esquinas de 10px; la opción elegida en rosado con su check. */
.productos-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.productos-barra .productos-conteo { margin-bottom: 0; }

.orden { position: relative; }
.orden-boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s;
}
.orden-boton:hover,
.orden.abierto .orden-boton { border-color: var(--tinta-suave); }
.orden-boton:focus-visible { outline: 2px solid var(--omija); outline-offset: 2px; }
.orden-etiqueta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.orden-valor { font-weight: 500; }
.orden-flecha { color: var(--tinta-suave); transition: transform 0.2s; }
.orden.abierto .orden-flecha { transform: rotate(180deg); }

.orden-lista {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 250px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 16px 36px -20px rgba(27, 23, 19, 0.35);
}
.orden.abierto .orden-lista { display: block; animation: aparecer 0.18s ease; }
.orden-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--tinta);
  cursor: pointer;
  outline: none;
  transition: background 0.15s;
}
.orden-opcion:hover,
.orden-opcion:focus-visible { background: var(--porcelana); }
.orden-opcion.activa { background: var(--rosado); color: var(--omija); font-weight: 500; }
.orden-opcion.activa::after { content: '✓'; font-size: 12px; }

@media (max-width: 560px) {
  .productos-barra { flex-wrap: wrap; }
  .orden, .orden-boton { width: 100%; }
  .orden-flecha { margin-left: auto; }
  .orden-lista { left: 0; right: 0; min-width: 0; }
}

.productos-vacio {
  grid-column: 1 / -1;
  padding: 70px 24px;
  text-align: center;
  background: var(--porcelana);
  border-radius: 14px;
}
.productos-vacio p { color: var(--tinta-suave); margin-bottom: 14px; }
.productos-limpiar {
  border: none;
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--omija);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (max-width: 1200px) {
  .productos-page .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .productos-page { padding: 40px 20px 72px; }
  /* Sin espacio para la columna, los filtros pasan arriba y dejan de pegarse */
  .productos-layout { grid-template-columns: 1fr; gap: 26px; }
  .productos-filtros { position: static; max-height: none; overflow: visible; }
  .filtros-lista { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .filtro-item { width: auto; border: 1px solid var(--linea); }
  .productos-page .products-grid { grid-template-columns: repeat(2, 1fr); }
  .productos-titulo { font-size: 30px; }
}
@media (max-width: 560px) {
  /* Dos columnas también en el celular: las fichas quedan angostas pero se ve
     mucho más catálogo de una pasada. */
  .productos-page .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .productos-page .product-name { font-size: 14px; }

  /* Con dos fichas por fila no caben el precio y el botón uno al lado del
     otro: «Agregar» se salía de la tarjeta y quedaba cortado (hasta 30px, y
     casi 90px en las que tienen precio rebajado). En celular el precio va
     arriba y el botón abajo, a todo el ancho de la ficha. */
  .productos-page .product-info,
  .products-section .product-info { padding: 14px 14px 16px; }
  .productos-page .product-footer,
  .products-section .product-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .productos-page .product-footer > :first-child,
  .products-section .product-footer > :first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .productos-page .product-price-old,
  .products-section .product-price-old { margin-right: 0; }
  .productos-page .add-to-cart,
  .products-section .add-to-cart { width: 100%; padding: 9px 10px; text-align: center; }
}

/* ==========================================================================
   HISTORIA
   ========================================================================== */
.historia { padding: 110px 32px; }
.historia .contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.historia-visual {
  aspect-ratio: 4/5;
  border-radius: 200px 200px 16px 16px;
  background: linear-gradient(180deg, var(--rosado), #D8B7B0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.historia-texto h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
  margin-bottom: 24px;
}
.historia-texto h2 em { font-style: italic; color: var(--omija); }
.historia-texto p {
  font-weight: var(--peso-fino);
  color: var(--tinta-suave);
  margin-bottom: 18px;
  max-width: 52ch;
}
.historia-datos {
  display: flex;
  gap: 48px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}
.historia-datos .dato .valor { font-family: var(--display); font-size: 30px; }
.historia-datos .dato .desc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 6px;
}

/* ==========================================================================
   BOLETÍN
   ========================================================================== */
.boletin { padding: 110px 32px; }
.boletin .contenedor {
  background: var(--omija);
  color: var(--porcelana);
  border-radius: 20px;
  padding: 76px 64px 68px;
  text-align: center;
}
.boletin h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.2;
  margin-bottom: 14px;
}
.boletin p {
  font-weight: var(--peso-fino);
  color: rgba(247, 244, 239, 0.8);
  max-width: 52ch;
  margin: 0 auto;
}

/* El campo y el botón van dentro de una misma píldora, como un solo control.
   El borde lo dibuja el contenedor y no el input, así el foco puede iluminar
   los dos a la vez en vez de dejar un rectángulo suelto en el medio. */
.boletin-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 34px auto 0;
  padding: 6px 6px 6px 10px;
  border-radius: 100px;
  border: 1px solid rgba(247, 244, 239, 0.4);
  transition: border-color 0.2s;
}
.boletin-form:focus-within { border-color: var(--porcelana); }
.boletin-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: none;
  background: transparent;
  color: var(--porcelana);
  font-family: var(--sans);
  font-size: 15px;
  outline: none;
}
.boletin-form input::placeholder { color: rgba(247, 244, 239, 0.55); }
.boletin-form input:focus { border-color: var(--porcelana); }
.boletin-form button {
  flex-shrink: 0;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  background: var(--porcelana);
  color: var(--omija);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background 0.2s, opacity 0.2s;
}
.boletin-form button:hover { background: #fff; }
.boletin-form button:disabled { opacity: 0.6; cursor: default; }

/* Respuesta del servidor. Ocupa alto sólo cuando dice algo, para que el bloque
   no pegue un salto al aparecer el mensaje. */
.boletin-estado {
  min-height: 1.4em;
  margin-top: 16px;
  font-size: 14px;
  color: rgba(247, 244, 239, 0.9);
}
.boletin-estado.error { color: #F3C9C4; }

/* En celular el campo y el botón no caben lado a lado: quedaban 91px para
   escribir, menos de lo que ocupa el propio placeholder. Se apilan y cada uno
   toma el ancho completo. */
@media (max-width: 600px) {
  .boletin .contenedor { padding: 48px 24px 44px; }
  .boletin-form {
    flex-direction: column;
    gap: 10px;
    border-radius: 22px;
    padding: 10px;
  }
  .boletin-form input { width: 100%; text-align: center; padding: 12px 10px; }
  .boletin-form button { width: 100%; }
}
.boletin small {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(247, 244, 239, 0.55);
}

/* ==========================================================================
   PIE DE PÁGINA
   El mismo en todas las páginas. Fondo tinta (el marrón oscuro de la marca)
   en vez de negro puro: sobre el porcelana del sitio se ve más cálido y no
   corta la página con un contraste tan duro.
   ========================================================================== */
.pie {
  background: var(--tinta);
  color: var(--porcelana);
  padding: 64px 32px 30px;
  margin-top: 96px;
}

.pie-cuerpo {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
}

/* Columna de la marca: nombre, bajada y redes */
.pie-col-marca { display: flex; flex-direction: column; align-items: flex-start; }
.pie-marca {
  font-family: var(--display);
  font-size: 23px;
  color: var(--porcelana);
  margin-bottom: 14px;
}
.pie-marca .hangul {
  font-family: var(--sans);
  font-weight: var(--peso-fino);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: rgba(247, 244, 239, 0.5);
  margin-left: 6px;
}
.pie-bajada {
  font-size: 14px;
  font-weight: var(--peso-fino);
  line-height: 1.7;
  color: rgba(247, 244, 239, 0.6);
  max-width: 34ch;
  margin-bottom: 24px;
}

.pie-titulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa-claro);
  margin-bottom: 18px;
}
.pie-enlaces { display: grid; gap: 11px; list-style: none; }
.pie-enlaces a {
  font-size: 14.5px;
  font-weight: var(--peso-fino);
  color: rgba(247, 244, 239, 0.82);
  text-decoration: none;
  transition: color 0.2s;
}
.pie-enlaces a:hover { color: var(--porcelana); }

/* ---- Redes sociales ----
   Los tres íconos se ven siempre. pie.js apaga el que no tenga dirección
   configurada en el panel, para que no mande a ninguna parte. */
.pie-redes { display: flex; gap: 10px; margin-top: auto; }
.pie-red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(247, 244, 239, 0.22);
  border-radius: 50%;
  color: rgba(247, 244, 239, 0.82);
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.pie-red:hover {
  background: var(--porcelana);
  border-color: var(--porcelana);
  color: var(--tinta);
}
.pie-red.sin-enlace {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.pie-legal {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid rgba(247, 244, 239, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(247, 244, 239, 0.5);
}

@media (max-width: 980px) {
  .pie-cuerpo { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 620px) {
  .pie { padding: 48px 20px 26px; margin-top: 64px; }
  .pie-cuerpo { grid-template-columns: 1fr; gap: 34px; padding-bottom: 32px; }
  .pie-redes { margin-top: 4px; }
}


/* ==========================================================================
   PÁGINAS LEGALES (términos, cambios, envíos)
   Sólo texto: una columna angosta, pensada para leerse.
   ========================================================================== */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 32px 40px;
}
.legal-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  color: var(--tinta);
  margin-bottom: 32px;
}
.legal-texto p {
  font-size: 15.5px;
  font-weight: var(--peso-fino);
  line-height: 1.8;
  color: var(--tinta-suave);
  margin-bottom: 20px;
}
.legal-texto p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .legal { padding: 48px 20px 24px; }
  .legal-titulo { font-size: 28px; margin-bottom: 24px; }
  .legal-texto p { font-size: 15px; }
}

/* ==========================================================================
   PÁGINA 404 (404.php)
   ========================================================================== */
.pagina-404 {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 32px 110px;
  text-align: center;
}
.pagina-404-numero {
  display: block;
  font-family: var(--display);
  font-size: clamp(88px, 16vw, 148px);
  line-height: 1;
  color: var(--omija);
  opacity: 0.18;
  margin-bottom: 18px;
}
.pagina-404-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.2;
  color: var(--tinta);
  margin-bottom: 14px;
}
.pagina-404-titulo em { color: var(--omija); }
.pagina-404-texto {
  font-size: 15.5px;
  font-weight: var(--peso-fino);
  line-height: 1.75;
  color: var(--tinta-suave);
  margin-bottom: 32px;
}
.pagina-404-acciones {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .pagina-404 { padding: 64px 20px 80px; }
  .pagina-404-titulo { font-size: 27px; }
}

/* ==========================================================================
   CARRITO — DRAWER
   ========================================================================== */
.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(27, 23, 19, 0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.cart-overlay.active { opacity: 1; pointer-events: all; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 100vw;
  background: var(--porcelana);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  box-shadow: var(--sombra-panel);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--linea);
  flex-shrink: 0;
  background: var(--papel);
}
.cart-drawer-title { font-family: var(--display); font-size: 24px; color: var(--tinta); }
.cart-drawer-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.cart-close {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-suave);
  font-size: 15px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--papel);
  transition: color 0.2s, transform 0.2s;
}
.cart-close:hover { color: var(--tinta); transform: rotate(90deg); }

.cart-items { flex: 1; overflow-y: auto; }
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--tinta-suave);
  padding: 48px;
  text-align: center;
}
.cart-empty p { font-size: 14px; font-weight: var(--peso-fino); letter-spacing: 0.04em; }

.cart-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 26px;
  border-bottom: 1px solid var(--linea);
  gap: 16px;
  transition: background 0.2s;
}
.cart-item:hover { background: var(--papel); }
.cart-item-brand {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omija);
  margin-bottom: 4px;
}
.cart-item-name {
  font-family: var(--display);
  font-size: 17.5px;
  color: var(--tinta);
  line-height: 1.35;
  margin-bottom: 6px;
}
.cart-item-price { font-size: 15px; font-weight: var(--peso-texto); color: var(--tinta-suave); }
.cart-item-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: 100px;
  background: var(--papel);
  overflow: hidden;
}
.qty-btn {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--tinta-suave);
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.qty-btn:hover { background: var(--tinta); color: var(--porcelana); }
/* Llegó al stock disponible: el «+» se apaga y no reacciona */
.qty-btn:disabled,
.qty-btn:disabled:hover { background: transparent; color: var(--linea); cursor: not-allowed; }
.cart-item-tope {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--omija);
  white-space: nowrap;
}

/* Tocar un botón varias veces seguidas en el celular no debe hacer zoom (el
   doble toque). `manipulation` quita sólo ese gesto: el zoom con dos dedos
   sigue funcionando para quien quiera agrandar. */
button, a, input, select, textarea, label, .qty-btn { touch-action: manipulation; }
.qty-value {
  width: 36px;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--tinta);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item-remove {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color 0.2s;
}
.cart-item-remove:hover { color: var(--danger); }

.cart-footer {
  padding: 24px 28px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  background: var(--papel);
}
/* Desglose sobre el total: subtotal y envío en chico, para que el total siga
   siendo lo único grande del recuadro. */
.cart-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--tinta-suave);
}
.cart-linea span:last-child { font-family: var(--mono); color: var(--tinta); }
.cart-linea.envio-gratis span:last-child { color: #3A6B37; }

.cart-total-row { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linea); }
.cart-total-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.cart-total-value { font-family: var(--display); font-size: 28px; color: var(--tinta); }
/* Avance hacia el envío gratis: línea fina en los tonos de la marca, sobre el
   desglose. Al completarse, el relleno pasa a omija pleno y el texto se aclara. */
.envio-progreso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea);
}
.envio-progreso-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.envio-progreso-texto {
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.envio-progreso-texto strong {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--omija);
}
.envio-progreso-pct {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
}
.envio-progreso-barra {
  position: relative;
  height: 5px;
  border-radius: 100px;
  background: var(--linea);
  overflow: hidden;
}
.envio-progreso-relleno {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rosa-claro), var(--omija));
  transition: width 0.5s var(--ease-out), background 0.3s;
}
.envio-progreso.completo .envio-progreso-relleno { background: var(--omija); }
.envio-progreso.completo .envio-progreso-texto,
.envio-progreso.completo .envio-progreso-pct { color: var(--omija); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .envio-progreso-relleno { transition: none; }
}
.checkout-btn {
  width: 100%;
  padding: 17px;
  background: var(--tinta);
  color: var(--porcelana);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
}
.checkout-btn:hover { background: var(--omija); }
.checkout-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   CHECKOUT — MODAL
   ========================================================================== */
.checkout-overlay {
  position: fixed; inset: 0;
  background: rgba(27, 23, 19, 0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.checkout-overlay.active { opacity: 1; pointer-events: all; }

.checkout-modal {
  background: var(--porcelana);
  width: 100%;
  max-width: 1040px;
  max-height: 92vh;
  /* dvh = el alto que de verdad se ve. En iPhone, vh cuenta también lo que
     tapa la barra de Safari y el botón de confirmar quedaba debajo de ella */
  max-height: 92dvh;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 380px;
  border-radius: 20px;
  box-shadow: var(--sombra-panel);
  transform: translateY(20px);
  transition: transform 0.45s var(--ease-out);
}
.checkout-overlay.active .checkout-modal { transform: translateY(0); }

.checkout-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-suave);
  font-size: 15px;
  z-index: 10;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--papel);
  transition: color 0.2s, transform 0.2s;
}
.checkout-close:hover { color: var(--tinta); transform: rotate(90deg); }

/* Los márgenes van en variables porque la barra del botón los usa para
   estirarse de borde a borde de la columna */
.checkout-form-section {
  --pad-y: 38px;
  --pad-x: 46px;
  padding: var(--pad-y) var(--pad-x);
}
.checkout-form-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 34px;
  color: var(--tinta);
  margin-bottom: 6px;
  line-height: 1.15;
}
.checkout-form-title em { font-style: italic; color: var(--omija); }
.checkout-form-subtitle {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta-suave);
  margin-bottom: 18px;
}

/* ---- Formulario del checkout ----
   Una sola escala: etiqueta 13,5px en letra normal sobre campos de 15-16px
   (16px en celular, para que el iPhone no haga zoom). Los encabezados de
   sección siguen en mayúsculas finas como acento. Antes las etiquetas iban
   en mayúsculas de 9,5-11px y quedaban desproporcionadas junto al campo. */
.checkout-form-section .form-section-label { margin: 24px 0 14px; font-size: 11px; }
.checkout-form-section .form-section-label:first-of-type { margin-top: 0; }
.checkout-form-section .form-group { margin-bottom: 14px; gap: 6px; }
.checkout-form-section .form-label {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}
.checkout-form-section .form-input { padding: 12px 14px; font-size: 15px; }
.checkout-form-section .form-error { font-size: 12px; }
/* El aviso vacío no guarda alto: aparece sólo cuando hay un error */
.checkout-form-section .form-error:empty { min-height: 0; }
.checkout-form-section .checkbox-row { font-size: 14px; }
.checkout-form-section select.form-input { padding-right: 34px; background-position: right 12px center; }
/* Con .form-row delante: la regla general de .form-row viene más abajo y, con la
   misma especificidad, les ganaría y dejaría todo en dos columnas iguales */
.form-row.form-row-direccion { grid-template-columns: 1.7fr 1fr; }
.form-row.form-row-3 { grid-template-columns: 1.25fr 1fr 0.8fr; gap: 12px; }

.checkout-notas { margin: 2px 0 12px; }
.checkout-notas summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--omija);
  padding: 4px 0;
  list-style: none;
}
.checkout-notas summary::-webkit-details-marker { display: none; }
.checkout-notas summary::before { content: '+ '; }
.checkout-notas[open] summary::before { content: '− '; }
.checkout-notas textarea { margin-top: 8px; min-height: 70px; }

/* ---- Barra de confirmar ----
   El formulario es más alto que el modal: el botón quedaba 200 a 470px bajo el
   borde y había que ir a buscarlo. Va pegado al borde inferior mientras se
   completa, y en celular —donde el resumen oscuro no aparece— lleva el total. */
.checkout-acciones {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 10px calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y));
  padding: 14px var(--pad-x) 18px;
  background: var(--porcelana);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -12px 24px -20px rgba(27, 23, 19, 0.45);
}
.checkout-acciones .submit-btn { margin-top: 0; flex: 1; padding: 16px; font-size: 15px; }
.checkout-acciones-total { display: none; }

.form-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--omija);
  margin: 28px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-section-label:first-of-type { margin-top: 0; }
.form-section-label::before { content: ""; width: 24px; height: 1px; background: var(--omija); }
.form-section-label::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.form-label .required { color: var(--omija); margin-left: 2px; }
.form-input {
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus { border-color: var(--omija); box-shadow: 0 0 0 4px rgba(116, 47, 62, 0.1); }
.form-input.error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(169, 68, 56, 0.1); }
.form-input::placeholder { color: #B3ACA1; font-weight: var(--peso-fino); }
select.form-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C554D' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
textarea.form-input { resize: vertical; min-height: 84px; }
.form-error {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--danger);
  min-height: 14px;
  line-height: 1.3;
}

.submit-btn {
  width: 100%;
  padding: 16px;
  background: var(--tinta);
  color: var(--porcelana);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.submit-btn:hover { background: var(--omija); }

.checkout-summary-section {
  background: var(--tinta);
  color: var(--porcelana);
  padding: 46px 34px;
  display: flex;
  flex-direction: column;
  border-radius: 0 20px 20px 0;
}
.checkout-summary-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rosa-claro);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.checkout-summary-title::before { content: ""; width: 24px; height: 1px; background: var(--rosa-claro); }
/* Total y flecha del título: sólo en celular, con el resumen plegado */
.summary-titulo-total,
.summary-titulo-flecha { display: none; }.summary-items { flex: 1; }
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(247, 244, 239, 0.1);
}
.summary-item-name {
  font-size: 14.5px;
  font-weight: var(--peso-fino);
  color: rgba(247, 244, 239, 0.75);
  line-height: 1.45;
  flex: 1;
}
.summary-qty { font-family: var(--mono); color: var(--rosa-claro); font-size: 12.5px; }
.summary-item-price {
  font-family: var(--mono);
  font-size: 13.5px;
  color: rgba(247, 244, 239, 0.85);
  white-space: nowrap;
  flex-shrink: 0;
}
.summary-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 15px;
  color: rgba(247, 244, 239, 0.7);
}
.summary-linea span:last-child { font-family: var(--mono); color: var(--porcelana); }
.summary-linea.envio-gratis span:last-child { color: #A8D5A2; }

.summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(247, 244, 239, 0.2);
}
.summary-total-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.5);
}
.summary-total-value { font-family: var(--display); font-size: 32px; color: var(--porcelana); }
.summary-shipping-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(247, 244, 239, 0.4);
  margin-top: 12px;
  line-height: 1.6;
}
.summary-discount-value { font-family: var(--mono); font-size: 15px; color: var(--rosa-claro); }

/* ---- CUPÓN EN CHECKOUT ---- */
.cupon-box {
  margin: 18px 0;
  padding: 18px 0;
  border-top: 1px solid rgba(247, 244, 239, 0.12);
  border-bottom: 1px solid rgba(247, 244, 239, 0.12);
}
.cupon-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.55);
  display: block;
  margin-bottom: 10px;
}
.cupon-input-row { display: flex; gap: 8px; }
.cupon-input {
  flex: 1;
  min-width: 0;
  padding: 11px 15px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--porcelana);
  background: rgba(247, 244, 239, 0.08);
  border: 1px solid rgba(247, 244, 239, 0.2);
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s;
}
.cupon-input::placeholder { color: rgba(247, 244, 239, 0.35); }
.cupon-input:focus { border-color: var(--rosa-claro); }
.cupon-btn {
  padding: 11px 20px;
  background: var(--omija);
  color: var(--porcelana);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
}
.cupon-btn:hover { background: var(--omija-oscuro); }
.cupon-mensaje {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  margin-top: 8px;
  color: rgba(247, 244, 239, 0.5);
  min-height: 14px;
}
.cupon-mensaje.ok { color: var(--rosa-claro); }
.cupon-mensaje.error { color: #E8AFA4; }

/* ---- CHECKOUT SUCCESS ---- */
/* Esta pantalla tiene que entrar entera sin hacer scroll: son los datos que la
   clienta necesita a la vista para ir a transferir. Por eso va apretada —cada
   margen de más empuja el número de cuenta bajo el borde. */
.checkout-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 32px 32px;
}
.success-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--omija);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--porcelana);
  animation: successPop 0.5s var(--ease-out);
}
@keyframes successPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.success-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  color: var(--tinta);
  margin-bottom: 6px;
  line-height: 1.2;
}
.success-title em { font-style: italic; color: var(--omija); }
.success-text {
  font-size: 13.5px;
  font-weight: var(--peso-fino);
  color: var(--tinta-suave);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 400px;
}
.success-close-btn {
  padding: 15px 36px;
  background: var(--tinta);
  color: var(--porcelana);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
}
.success-close-btn:hover { background: var(--omija); }

/* ---- CHECKBOX ---- */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--tinta-suave);
  font-weight: var(--peso-fino);
  cursor: pointer;
  margin-bottom: 8px;
  line-height: 1.45;
}
.checkbox-row input {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--omija);
  cursor: pointer;
  flex-shrink: 0;
}

/* ==========================================================================
   SEGUIMIENTO
   ========================================================================== */
.track-section {
  min-height: 80vh;
  padding: 72px 32px 96px;
  display: flex;
  justify-content: center;
}
.track-inner { width: 100%; max-width: 640px; text-align: center; }
.track-inner .section-tag { justify-content: center; }
.track-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--tinta);
  line-height: 1.12;
}
.track-title em { font-style: italic; color: var(--omija); }
.track-subtitle {
  font-size: 15px;
  color: var(--tinta-suave);
  font-weight: var(--peso-fino);
  margin-top: 16px;
  margin-bottom: 40px;
}
.track-form {
  display: flex;
  gap: 10px;
  max-width: 470px;
  margin: 0 auto;
}
.track-input {
  flex: 1;
  min-width: 0;
  padding: 15px 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 100px;
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.track-input:focus { border-color: var(--omija); box-shadow: 0 0 0 4px rgba(116, 47, 62, 0.1); }
.track-input::placeholder { color: #B3ACA1; }
.track-submit {
  padding: 15px 30px;
  background: var(--tinta);
  color: var(--porcelana);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.track-submit:hover { background: var(--omija); }
.track-message {
  font-size: 13px;
  color: var(--tinta-suave);
  margin-top: 16px;
  min-height: 20px;
  font-weight: var(--peso-fino);
}
.track-message-error { color: var(--danger); }

/* Chips con los pedidos de la clienta logeada */
.track-mis-pedidos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 22px;
}
.track-pedido-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.track-pedido-chip .chip-codigo {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tinta);
}
.track-pedido-chip .chip-estado {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: 3px 9px;
  background: var(--porcelana);
  border-radius: 100px;
}
.track-pedido-chip:hover { border-color: var(--omija); }
.track-pedido-chip.activo {
  border-color: var(--omija);
  background: var(--rosado);
}
.track-pedido-chip.activo .chip-codigo { color: var(--omija); }
.track-pedido-chip.activo .chip-estado { color: var(--omija); background: var(--papel); }

.track-result { margin-top: 40px; }
.result-card {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 34px;
  text-align: left;
}
.result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linea);
}
.result-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 6px;
}
.result-code { font-family: var(--mono); font-size: 18px; color: var(--tinta); letter-spacing: 0.06em; }
.result-status {
  padding: 7px 16px;
  background: var(--omija);
  color: var(--porcelana);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

.track-steps { display: flex; align-items: center; padding: 32px 8px; }
.track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.track-step-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--linea);
  background: var(--papel);
  transition: all 0.3s;
}
.track-step.active .track-step-dot {
  border-color: var(--omija);
  background: var(--omija);
  box-shadow: 0 0 0 4px rgba(116, 47, 62, 0.15);
}
.track-step-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.track-step.active .track-step-label { color: var(--tinta); }
.track-step-line {
  flex: 1;
  height: 1px;
  background: var(--linea);
  margin: 0 6px 22px;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.result-value { font-size: 14px; color: var(--tinta); }

.result-items { padding: 24px 0 8px; }
.result-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
}
.result-item-name { font-size: 13px; font-weight: var(--peso-fino); color: var(--tinta-suave); line-height: 1.45; }
.result-qty { font-family: var(--mono); color: var(--omija); font-size: 11px; }
.result-item-price { font-family: var(--mono); font-size: 12px; color: var(--tinta); white-space: nowrap; }
.result-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.result-total { font-family: var(--display); font-size: 24px; color: var(--tinta); }

/* ==========================================================================
   AUTH — LOGIN / REGISTRO
   ========================================================================== */
.auth-section {
  min-height: 82vh;
  padding: 64px 32px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 450px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sombra-ficha);
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.auth-tab {
  padding: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: var(--porcelana);
  border-bottom: 1px solid var(--linea);
  transition: all 0.2s;
}
.auth-tab:hover { color: var(--tinta); }
.auth-tab.active {
  color: var(--omija);
  background: var(--papel);
  border-bottom: 1px solid var(--papel);
}
.auth-form { padding: 40px; }
.auth-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  color: var(--tinta);
  margin: 8px 0 28px;
}
.auth-title em { font-style: italic; color: var(--omija); }
/* Casilla «Recuérdame», entre la contraseña y el botón de entrar */
.checkbox-row.recordarme {
  margin: -4px 0 18px;
  font-size: 13.5px;
  color: var(--tinta-suave);
}

.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--tinta-suave);
  margin-top: 20px;
  font-weight: var(--peso-fino);
}
.auth-switch a {
  color: var(--omija);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.auth-switch a:hover { border-color: var(--omija); }
.auth-nota {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Pantalla de éxito tras el registro */
.registro-exito { text-align: center; }
.registro-exito .exito-icono {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--omija);
  color: var(--porcelana);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.registro-exito-texto {
  font-size: 14px;
  font-weight: var(--peso-fino);
  color: var(--tinta-suave);
  line-height: 1.7;
  margin-bottom: 18px;
}
.registro-exito-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.recuperar-ok {
  background: var(--rosado);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--omija);
  font-size: 13px;
  line-height: 1.6;
  text-align: left !important;
}

/* ---- DATOS DE TRANSFERENCIA (checkout) ---- */
.transfer-box {
  width: 100%;
  max-width: 470px;
  background: var(--porcelana);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  text-align: left;
}

/* Lo primero que necesita la clienta: cuánto y con qué número. Van juntos y
   arriba de todo, no al final de la lista. */
.transfer-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.transfer-pedido span,
.transfer-monto span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 3px;
}
.transfer-pedido strong {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--omija);
}
.transfer-monto { text-align: right; }
.transfer-monto strong {
  font-family: var(--display);
  font-size: 24px;
  color: var(--omija);
}

/* Los datos bancarios en dos columnas: seis filas apiladas empujaban el botón
   fuera de la pantalla. La etiqueta va arriba del dato, en chico. */
.transfer-datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.transfer-fila {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.transfer-fila span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.transfer-fila strong {
  color: var(--tinta);
  font-weight: 600;
  font-size: 15px;
  word-break: break-word;
}

/* ---- Copiar un dato con un toque (comprobante-util.js) ----
   Cada fila es un botón que se ve igual que antes: el relleno se compensa con
   margen negativo para que la grilla no se mueva. Al copiar, la etiqueta dice
   «Copiado ✓» y el fondo se pone rosado un momento. */
button.transfer-fila {
  width: calc(100% + 16px);
  margin: -5px -8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.transfer-etiqueta { display: inline-flex; align-items: center; gap: 5px; }
.transfer-icono { flex-shrink: 0; opacity: 0.55; }
.transfer-pedido[data-copiar],
.transfer-monto[data-copiar] {
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
@media (hover: hover) {
  button.transfer-fila:hover,
  .transfer-pedido[data-copiar]:hover,
  .transfer-monto[data-copiar]:hover { background: var(--papel); }
}
button.transfer-fila:focus-visible,
.transfer-pedido[data-copiar]:focus-visible,
.transfer-monto[data-copiar]:focus-visible { outline: 2px solid var(--omija); outline-offset: 1px; }
.transfer-box .copiado { background: var(--rosado); }
.transfer-box .copiado [data-copiar-texto] { color: var(--omija); font-weight: 600; }
.transfer-box .copia-fallida [data-copiar-texto] { color: var(--danger); }
.transfer-pista {
  margin: -2px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}
.transfer-nota {
  font-size: 13.5px;
  font-weight: var(--peso-fino);
  color: var(--tinta-suave);
  line-height: 1.5;
  margin-top: 12px;
}
.transfer-error { font-size: 13px; color: var(--danger); }
.transfer-copiar {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.transfer-copiar:hover { background: var(--tinta); color: var(--porcelana); border-color: var(--tinta); }
.success-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.success-acciones[hidden] { display: none; }

/* ---- COMPROBANTE DESDE EL CHECKOUT ---- */
.comprobante-rapido { width: 100%; max-width: 470px; }
.comprobante-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.comprobante-opciones[hidden] { display: none; }
.comprobante-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  transition: border-color 0.2s, background 0.2s;
}
.comprobante-opcion svg { width: 26px; height: 26px; color: var(--omija); }
.comprobante-opcion:hover,
.comprobante-opcion:focus-visible { border-color: var(--omija); background: var(--rosado); }
.comprobante-cancelar {
  grid-column: 1 / -1;
  padding: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Con .comprobante-rapido delante: «Mi cuenta» tiene su propio .comprobante-estado
   más abajo, con display: block, que a igual especificidad ganaba y dejaba la
   miniatura encima del texto. */
.comprobante-rapido .comprobante-estado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tinta-suave);
  text-align: left;
}
.comprobante-rapido .comprobante-estado:empty { display: none; }
.comprobante-rapido .comprobante-estado img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: #fff;
  flex-shrink: 0;
}
/* El «recibido» tiene que notarse: es la señal de que ya no falta nada */
.comprobante-rapido .comprobante-estado.ok,
.comprobante-rapido .comprobante-estado.error {
  justify-content: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  animation: fichaIn 0.45s var(--ease-out) both;
}
.comprobante-rapido .comprobante-estado.ok {
  background: #E6F1E7;
  border: 1px solid #B9D5BD;
  color: #2E5A35;
  font-weight: 600;
}
.comprobante-rapido .comprobante-estado.ok::before {
  content: '✓';
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3F7A48;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.comprobante-rapido .comprobante-estado.error {
  background: #F8E8E5;
  border: 1px solid #E5C2BB;
  color: var(--danger);
  font-weight: 500;
}
.success-acciones .btn-primary,
.success-acciones .btn-secondary { padding: 13px 26px; font-size: 13px; text-decoration: none; }

/* ---- COMPROBANTE (Mi cuenta) ---- */
.comprobante-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.comprobante-estado {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
}
.comprobante-box.enviado .comprobante-estado { color: #3A6B37; }
.comprobante-box.pendiente .comprobante-estado { color: #8A6B1F; }
.comprobante-fecha {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-suave);
  margin-top: 3px;
}
.comprobante-acciones { display: flex; gap: 8px; align-items: center; }
.comprobante-btn, .comprobante-ver {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.comprobante-btn:hover, .comprobante-ver:hover { background: var(--tinta); color: var(--porcelana); border-color: var(--tinta); }
.comprobante-btn.destacado { background: var(--omija); color: var(--porcelana); border-color: var(--omija); }
.comprobante-btn.destacado:hover { background: var(--omija-oscuro); border-color: var(--omija-oscuro); }
.comprobante-btn:disabled { opacity: 0.5; cursor: wait; }

/* ---- COMPROBANTE (Admin) ---- */
.admin-comprobante {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--porcelana);
  border: 1px solid var(--linea);
}
.admin-comprobante.por-revisar { background: #F7EFDC; border-color: #E3CD9A; }
.admin-comprobante.esperando { background: transparent; border-style: dashed; }
.admin-comprobante-titulo {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinta);
}
.admin-comprobante.por-revisar .admin-comprobante-titulo { color: #6B5A2E; }
.admin-comprobante-fecha {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-suave);
  margin-top: 3px;
}

/* ---- BOTÓN FLOTANTE DE WHATSAPP ---- */
.whatsapp-flotante {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 150;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(27, 23, 19, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-flotante svg { width: 30px; height: 30px; }
.whatsapp-flotante:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px -6px rgba(37, 211, 102, 0.65), 0 6px 16px rgba(27, 23, 19, 0.18);
}
.whatsapp-flotante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: pulsoWsp 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulsoWsp {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (max-width: 600px) {
  .whatsapp-flotante { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .whatsapp-flotante svg { width: 26px; height: 26px; }
}

/* Aviso de correo sin verificar (Mi cuenta) */
.verificar-aviso {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #F7EFDC;
  border: 1px solid #E3CD9A;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 28px;
}
.verificar-texto {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  font-weight: var(--peso-texto);
  color: #6B5A2E;
  line-height: 1.6;
}

/* ==========================================================================
   CUENTA (dashboard)
   ========================================================================== */
.account-section { padding: 56px 32px 96px; max-width: 1200px; margin: 0 auto; }
.account-header { margin-bottom: 40px; }
.account-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--tinta);
  margin-top: 4px;
}
.account-title em { font-style: italic; color: var(--omija); }
.account-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 48px;
  align-items: start;
}
.account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 96px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 10px;
}
.account-nav-item {
  text-align: left;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  border-radius: 10px;
  transition: all 0.2s;
}
.account-nav-item:hover { color: var(--tinta); background: var(--porcelana); }
.account-nav-item.active { color: var(--omija); background: var(--rosado); }
/* Cerrar sesión: separado de las secciones y con borde, para que se encuentre */
.account-salir {
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid var(--omija);
  border-radius: 10px;
  background: transparent;
  color: var(--omija);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.account-salir:hover { background: var(--omija); color: var(--porcelana); }
.account-panel { display: none; }
.account-panel.active { display: block; animation: aparecer 0.35s ease; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.panel-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  color: var(--tinta);
  margin-bottom: 6px;
}
.panel-subtitle {
  font-size: 14px;
  color: var(--tinta-suave);
  font-weight: var(--peso-fino);
  margin-bottom: 28px;
}
.panel-loading { font-size: 14px; color: var(--tinta-suave); padding: 32px 0; }
.account-form { max-width: 470px; margin-top: 24px; }
.form-saved {
  display: inline-block;
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--omija);
}
.empty-state { padding: 48px 0; text-align: center; }
.empty-state p { color: var(--tinta-suave); margin-bottom: 24px; font-weight: var(--peso-fino); }

/* ---- ORDER CARDS ---- */
.order-card {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 26px;
  margin-bottom: 18px;
  transition: box-shadow 0.25s;
}
.order-card:hover { box-shadow: var(--sombra-ficha); }
.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.order-code { font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: var(--tinta); }
.order-date { font-family: var(--mono); font-size: 11px; color: var(--tinta-suave); margin-top: 4px; }
.order-badge {
  font-family: var(--mono);
  padding: 6px 14px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
}
.order-badge-pendiente  { background: #F0E7CB; color: #6B5A2E; }
.order-badge-pagado     { background: #D9E2EC; color: #2E4A6B; }
.order-badge-preparando { background: var(--rosado); color: var(--omija); }
.order-badge-enviado    { background: #DDE6D8; color: #3A5237; }
.order-badge-entregado  { background: var(--omija); color: var(--porcelana); }
.order-badge-cancelado  { background: #F0DDD9; color: var(--danger); }
.order-items { padding: 16px 0; }
.order-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--tinta-suave);
  padding: 5px 0;
  font-weight: var(--peso-fino);
}
.order-qty { font-family: var(--mono); color: var(--omija); font-size: 11px; }
.order-summary { padding-top: 16px; border-top: 1px solid var(--linea); }
.order-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tinta-suave);
  padding: 3px 0;
  font-weight: var(--peso-fino);
}
.order-total {
  font-family: var(--display);
  font-size: 17px;
  color: var(--tinta);
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}
.order-tracking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.order-tracking-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.order-tracking-code {
  font-family: var(--mono);
  color: var(--omija);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.order-tracking-code:hover { border-color: var(--omija); }

/* ==========================================================================
   ADMIN
   ========================================================================== */
/* Los márgenes de arriba van ajustados: cada píxel que ocupan acá se lo quitan
   a las dos columnas de Productos, que se miden contra el borde de la pantalla. */
.admin-section { padding: 36px 32px 56px; max-width: 1200px; margin: 0 auto; }
.admin-header { margin-bottom: 20px; }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.stat-card {
  background: var(--tinta);
  border-radius: 14px;
  padding: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--omija), var(--rosa-claro));
}
.stat-card-number { font-family: var(--display); font-size: 34px; color: var(--porcelana); line-height: 1; }
.stat-card-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.5);
  margin-top: 10px;
}
.admin-toolbar { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.admin-search {
  flex: 1;
  min-width: 220px;
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-search:focus { border-color: var(--omija); box-shadow: 0 0 0 4px rgba(116, 47, 62, 0.1); }
.admin-filter {
  padding: 13px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 100px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.admin-filter:focus { border-color: var(--omija); }
.admin-order {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 26px;
  margin-bottom: 18px;
}
.admin-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea);
}
.admin-order-body {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 32px;
  padding: 22px 0;
}
.admin-col-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}
.admin-data { font-size: 14px; color: var(--tinta); }
.admin-data-sub { font-size: 13px; color: var(--tinta-suave); font-weight: var(--peso-fino); }
.admin-tracking {
  font-family: var(--mono);
  color: var(--omija);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
/* Número del courier (Blue Express), bajo el código interno del envío */
.admin-tracking-blue { margin-top: 4px; font-size: 12.5px; color: var(--tinta-suave); }
.admin-tracking-blue a { color: var(--omija); text-decoration: underline; }

.admin-items { margin-bottom: 12px; }
.admin-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--tinta-suave);
  padding: 4px 0;
  font-weight: var(--peso-fino);
}
.admin-summary { padding-top: 12px; border-top: 1px solid var(--linea); }
.admin-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tinta-suave);
  padding: 2px 0;
  font-weight: var(--peso-fino);
}
.admin-total {
  font-family: var(--display);
  font-size: 16px;
  color: var(--tinta);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
}
.admin-order-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
.admin-estado-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.admin-estado-select {
  padding: 9px 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta);
  background: var(--porcelana);
  border: 1px solid var(--linea);
  border-radius: 100px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.admin-estado-select:focus { border-color: var(--omija); }
.admin-saved { font-family: var(--mono); font-size: 11px; color: var(--omija); }

/* ---- ADMIN: PESTAÑAS ---- */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 0;
  /* Ocho pestañas no caben en un teléfono. Sin esto la barra empujaba el ancho
     de la página entera y todo el panel se movía de lado; así la que se corre
     es la barra sola. */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab { flex: 0 0 auto; }
.admin-tab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  /* Con diez pestañas, 22px de lado se pasaban del ancho del panel en pantallas
     de 1440. A 18px entran todas sin tener que correr la barra. */
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.admin-tab:hover { color: var(--tinta); }
.admin-tab.active { color: var(--omija); border-bottom-color: var(--omija); }

/* ---- ADMIN: BARRA DE PERÍODO GLOBAL ---- */
/* El atributo hidden debe poder esconder los botones de Excel: sin esto
   el `display: inline-flex` de .cart-btn le gana y siguen a la vista. */
/* El `hidden` del propio recuadro tiene que ganarle al display:flex de abajo */
.admin-periodo[hidden] { display: none; }
.admin-periodo [hidden] { display: none; }

.admin-periodo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 28px;
}
.periodo-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-right: 4px;
}
.admin-periodo .admin-filter { min-width: 130px; }
.periodo-separador { flex: 1; min-width: 12px; }

/* ---- ADMIN: CABECERA DE SECCIÓN ---- */
.panel-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.panel-cabecera .admin-search { max-width: 280px; margin: 0; }
.panel-cabecera .panel-subtitle { margin-bottom: 0; }

/* ---- ADMIN: GESTIÓN DE PRODUCTOS ---- */
.admin-prod-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items: start;
}
.admin-prod-form {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 30px 28px;
  position: sticky;
  top: 96px;
}
.admin-prod-form input[type="file"] {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
}
.prod-form-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 12px;
}
.prod-form-acciones .btn-primary,
.prod-form-acciones .btn-secondary { padding: 13px 26px; font-size: 13px; }

.admin-prod-lista { display: flex; flex-direction: column; gap: 12px; }

/* ── Dos áreas de scroll independientes (sólo el panel de Productos) ──

   Con muchos productos la lista se hacía larguísima y para volver al
   formulario había que subir toda la página. Ahora cada columna se queda
   pegada al alto de la pantalla y corre por su cuenta: a la izquierda se
   edita, a la derecha se busca, sin que una arrastre a la otra.

   overscroll-behavior evita el salto molesto de que al llegar al final de
   una columna la página entera empiece a moverse. */
.admin-prod-layout.doble-scroll > .admin-prod-form,
.admin-prod-layout.doble-scroll > .admin-prod-lista-wrap {
  /* El alto lo mide admin.js y lo deja en --alto-columna: es lo que queda
     entre donde parte el panel y el borde de abajo de la ventana. No se puede
     sacar con 100vh a secas, porque encima están el header, las pestañas y la
     barra de período, y entre todos ocupan un alto que cambia según el ancho.

     Tampoco sirve dejarlas pegadas con position:sticky. La grilla mide lo
     mismo que la columna más alta, así que a la columna no le queda recorrido
     para pegarse: al bajar la página se iba igual, y su primer tramo terminaba
     escondido bajo el header. Midiendo el alto real no hace falta bajar nada.

     El valor de respaldo es para el rato en que el script todavía no corre. */
  max-height: var(--alto-columna, calc(100vh - 480px));
}
.admin-prod-layout.doble-scroll > .admin-prod-form {
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* En la derecha sólo corre la lista: el buscador se queda arriba, siempre a mano */
.admin-prod-layout.doble-scroll > .admin-prod-lista-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;                    /* sin esto el flex se niega a encoger */
}
.admin-prod-layout.doble-scroll .admin-prod-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Aire lateral para que el hover de las fichas no quede cortado */
  padding: 2px 6px 2px 2px;
}
.prod-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 14px 18px;
  transition: box-shadow 0.2s, opacity 0.2s;
}
.prod-item:hover { box-shadow: var(--sombra-ficha); }
.prod-item.prod-inactivo { opacity: 0.55; }
.prod-thumb {
  width: 56px; height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--rosado);
}
.prod-thumb-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 20px;
  color: var(--omija);
  background: linear-gradient(165deg, #F3E4DE, #DDB9B4);
}
.prod-meta { flex: 1; min-width: 0; }
.prod-meta-marca {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--omija);
  margin-bottom: 2px;
}
.prod-meta-nombre {
  font-family: var(--display);
  font-size: 15px;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod-meta-datos {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 3px;
}
.prod-meta-datos s { opacity: 0.6; margin-right: 4px; }
.prod-estado { font-family: var(--mono); }
.prod-estado.ok { color: #3A6B37; }
.prod-estado.off { color: var(--danger); }
.prod-acciones { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.prod-accion {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 100px;
  padding: 7px 14px;
  background: transparent;
  transition: all 0.2s;
}
.prod-accion:hover { border-color: var(--tinta); background: var(--tinta); color: var(--porcelana); }
.prod-accion.peligro { color: var(--danger); border-color: #E5C4BE; }
.prod-accion.peligro:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

@media (max-width: 1024px) {
  .admin-prod-layout { grid-template-columns: 1fr; }
  .admin-prod-form { position: static; }

  /* Apiladas en una columna, dos scrolls sólo estorban */
  .admin-prod-layout.doble-scroll > .admin-prod-form,
  .admin-prod-layout.doble-scroll > .admin-prod-lista-wrap,
  .admin-prod-layout.doble-scroll .admin-prod-lista {
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 560px) {
  .prod-item { flex-wrap: wrap; }
  .prod-acciones { width: 100%; justify-content: flex-start; }
}

/* ---- ADMIN: STOCK ---- */
.admin-stats-4 { grid-template-columns: repeat(4, 1fr); }
.admin-stats-5 { grid-template-columns: repeat(5, 1fr); }
/* Seis en una fila quedan muy angostas: van en dos filas de tres */
.admin-stats-6 { grid-template-columns: repeat(3, 1fr); }
.stat-card.stat-alerta::before { background: #C99A3C; }
.stat-card.stat-alerta .stat-card-number { color: #E8C989; }
.stat-card.stat-peligro::before { background: var(--danger); }
.stat-card.stat-peligro .stat-card-number { color: #E8A79C; }
.stat-card.stat-ganancia::before { background: #5B8A57; }
.stat-card.stat-ganancia .stat-card-number { color: #B9D8B5; }

.stock-aviso {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 12px;
  border: 1px solid;
}
.stock-aviso.alerta { background: #F7EFDC; border-color: #E3CD9A; color: #6B5A2E; }
.stock-aviso.peligro { background: #F5E3DF; border-color: #E0BBB2; color: var(--danger); }

.stock-item.stock-agotado { border-color: #E0BBB2; }
.stock-item.stock-bajo { border-color: #E3CD9A; }
.stock-controles {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.stock-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 10px;
}
.stock-chip.ok { background: #E4EDE2; color: #3A6B37; }
.stock-chip.bajo { background: #F7EFDC; color: #8A6B1F; }
.stock-chip.agotado { background: var(--danger); color: #fff; }
.stock-ajuste {
  display: flex;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: 100px;
  background: var(--porcelana);
  overflow: hidden;
}
.stock-btn {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--tinta-suave);
  transition: background 0.2s, color 0.2s;
}
.stock-btn:hover { background: var(--tinta); color: var(--porcelana); }
.stock-valor {
  min-width: 44px;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
}
.stock-valor.agotado { color: var(--danger); }
.stock-valor.bajo { color: #8A6B1F; }
.stock-fijar { display: flex; align-items: center; gap: 6px; }
.stock-input {
  width: 72px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 100px;
  outline: none;
  transition: border-color 0.2s;
}
.stock-input:focus { border-color: var(--omija); }

/* Movimientos de inventario y lista de ventas */
.stock-movs { display: flex; flex-direction: column; gap: 0; }
.mov-fila {
  display: grid;
  grid-template-columns: 110px 1.6fr 100px 80px 80px 1.4fr;
  gap: 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--tinta-suave);
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}
.mov-fila:first-of-type { border-radius: 14px 14px 0 0; }
.mov-fila:last-of-type { border-radius: 0 0 14px 14px; border-bottom: none; }
.mov-cabecera {
  background: var(--tinta);
  color: rgba(247, 244, 239, 0.7);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mov-producto { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-motivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mov-tipo { text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.mov-venta { color: var(--omija); }
.mov-entrada { color: #3A6B37; }
.mov-devolucion { color: #2E4A6B; }
.mov-salida, .mov-ajuste { color: var(--tinta-suave); }
.mov-mas { color: #3A6B37; }
.mov-menos { color: var(--danger); }

.venta-fila { grid-template-columns: 140px 100px 1.3fr 55px 105px 105px 105px 115px; }

/* ── Reparto de la venta ────────────────────────────────────
   Cómo se divide cada peso vendido, contado desde la tienda: costo, comisión y
   lo que le queda. La comisión va como línea propia y no descontada por debajo,
   para que ningún número aparezca sin explicación. */
.reparto {
  margin-top: 20px;
  padding: 20px 24px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  max-width: 520px;
}
.reparto-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
}
.reparto-label { color: var(--tinta-suave); font-size: 0.92rem; }
.reparto-label em { font-style: normal; opacity: 0.7; font-size: 0.85em; }
.reparto-monto { font-family: var(--mono); font-size: 0.95rem; white-space: nowrap; }
.reparto-resta { color: var(--tinta-suave); }
.reparto-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.reparto-total .reparto-label { color: var(--tinta); font-weight: 600; font-size: 1rem; }
.reparto-total .reparto-monto { font-size: 1.15rem; font-weight: 600; }
.venta-comision { font-family: var(--mono); color: var(--tinta-suave); }

/* ── Configuración de envío (panel de Ventas) ── */
.envio-config {
  margin-top: 28px;
  padding: 24px 26px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  max-width: 620px;
}
.envio-config-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 4px;
}
.envio-config-ayuda {
  font-size: 13px;
  color: var(--tinta-suave);
  margin-bottom: 18px;
}
.envio-config-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.envio-config-accion {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.envio-config-mensaje { font-size: 13px; color: var(--tinta-suave); }
.envio-config-mensaje.error { color: var(--danger); }
@media (max-width: 700px) {
  .envio-config-campos { grid-template-columns: 1fr; }
}


.ventas-toolbar { align-items: center; }
.ventas-separador { flex: 1; }
.ventas-nota {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 4px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .admin-stats-4, .admin-stats-5, .admin-stats-6 { grid-template-columns: repeat(2, 1fr); }
  .mov-fila { grid-template-columns: 90px 1.4fr 80px 60px; }
  .mov-fila span:nth-child(5), .mov-fila span:nth-child(6) { display: none; }
  /* Anchos medidos sobre el contenido real a 375px: la fecha necesita 76px y
     los montos 52px. El código de pedido se lleva lo que sobre y corta con
     puntos suspensivos si es largo. */
  .venta-fila { grid-template-columns: minmax(0, 1fr) 76px 52px 52px; gap: 8px; }
  /* .venta-fila lleva también la clase .mov-fila, así que hereda el
     ocultamiento de arriba, que está pensado para los movimientos de stock y
     acá tapa la columna Total. Se declara columna por columna cuál se ve, para
     que no dependa de en qué orden queden las reglas. */
  .venta-fila span:nth-child(1), .venta-fila span:nth-child(2),
  .venta-fila span:nth-child(5), .venta-fila span:nth-child(7) { display: block; }
  .venta-fila span:nth-child(3), .venta-fila span:nth-child(4),
  .venta-fila span:nth-child(6), .venta-fila span:nth-child(8) { display: none; }
  .stock-controles { width: 100%; justify-content: flex-start; }
}

/* ---- TIENDA: PRODUCTO AGOTADO ---- */
.product-card.agotado .product-image-wrap > :not(.fav-btn) { filter: grayscale(0.7); opacity: 0.75; }
.aviso-reposicion {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--omija);
}
.agotado-chip {
  position: absolute;
  bottom: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--porcelana);
  border-radius: 100px;
  padding: 5px 12px;
  z-index: 2;
}
.add-to-cart:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.add-to-cart:disabled:hover { background: transparent; color: var(--tinta); }

/* ==========================================================================
   FAVORITOS — PÁGINA
   ========================================================================== */
.fav-page {
  min-height: 80vh;
  padding: 56px 32px 96px;
  max-width: 1280px;
  margin: 0 auto;
}
.fav-page-header { text-align: center; margin-bottom: 56px; }
.fav-page-header .section-tag { justify-content: center; }
.fav-page-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--tinta);
  line-height: 1.12;
}
.fav-page-title em { font-style: italic; color: var(--omija); }
.fav-page-subtitle {
  font-size: 15px;
  color: var(--tinta-suave);
  font-weight: var(--peso-fino);
  margin-top: 14px;
}
/* grid-column: el aviso vive dentro de la rejilla de productos y, sin esto,
   quedaba metido en la primera columna en vez de centrado */
.fav-empty { grid-column: 1 / -1; text-align: center; padding: 64px 32px; color: var(--tinta-suave); }
.fav-empty-icono {
  display: block;
  width: 72px; height: 72px;
  margin: 0 auto 24px;
}
.fav-empty p {
  font-size: 15px;
  font-weight: var(--peso-fino);
  margin-bottom: 28px;
  line-height: 1.7;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .boletin .contenedor { padding: 56px 40px; }
}

@media (max-width: 820px) {
  nav { display: none; }
  .menu-toggle { display: flex; }
  header { padding: 14px 20px; }
  .historia .contenedor { grid-template-columns: 1fr; gap: 48px; }
  .products-section, .categorias, .historia, .boletin { padding: 72px 20px; }
  footer { padding: 64px 20px 32px; }
  .account-layout { grid-template-columns: 1fr; gap: 24px; }
  .account-nav { flex-direction: row; flex-wrap: wrap; align-items: center; position: static; }
  /* En fila, el espacio de arriba descuadraba «Cerrar sesión» respecto de las secciones */
  .account-salir { margin-top: 0; }
  .admin-stats { grid-template-columns: 1fr; }
  .admin-order-body { grid-template-columns: 1fr; gap: 20px; }
  .admin-order-foot { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .checkout-modal { grid-template-columns: 1fr; max-height: 95vh; max-height: 94dvh; border-radius: 14px; }

  /* Resumen arriba del formulario, plegado. Siempre se ven el título con el
     total, el cupón y el plazo de despacho; los productos, subtotal, envío y
     total se abren tocando el título (main.js: prepararResumenMovil). */
  /* minmax(0, 1fr): sin esto la columna se estiraba al ancho mínimo del
     resumen y todo el modal se salía por la derecha */
  .checkout-modal { grid-template-columns: minmax(0, 1fr); }
  .checkout-summary-section { order: -1; min-width: 0; border-radius: 0; padding: 14px 18px 12px; }
  .checkout-summary-title {
    margin-bottom: 0;
    min-height: 34px;
    padding-right: 50px;   /* deja libre la X de cerrar */
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    cursor: pointer;
  }
  .checkout-summary-title::before { display: none; }
  .checkout-summary-title:focus-visible { outline: 2px solid var(--rosa-claro); outline-offset: 4px; border-radius: 6px; }
  .summary-titulo-total {
    display: inline;
    margin-left: auto;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--porcelana);
  }
  .summary-titulo-flecha { display: block; flex-shrink: 0; transition: transform 0.2s; }
  .checkout-summary-section.abierto .summary-titulo-flecha { transform: rotate(180deg); }
  /* :not(.abierto) porque la fila del descuento trae display en línea */
  .checkout-summary-section:not(.abierto) .summary-items,
  .checkout-summary-section:not(.abierto) .summary-linea,
  .checkout-summary-section:not(.abierto) .summary-total-row { display: none !important; }
  .checkout-summary-section.abierto .summary-items { margin-top: 6px; }
  .checkout-summary-section .cupon-box { margin: 10px 0 0; padding: 10px 0 0; border-bottom: 0; }
  .checkout-summary-section.abierto .cupon-box { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(247, 244, 239, 0.12); }
  .checkout-summary-section .cupon-label { margin-bottom: 8px; font-size: 11px; }
  .checkout-summary-section .cupon-input { padding: 9px 14px; }
  .checkout-summary-section .cupon-btn { padding: 9px 16px; }
  .checkout-summary-section .summary-total-row { margin-top: 8px; padding-top: 8px; }
  .checkout-summary-section .summary-total-value { font-size: 24px; }
  .checkout-summary-section .summary-shipping-note { margin-top: 8px; }
  /* Tras confirmar, la pantalla final ocupa todo: el resumen ya no hace falta */
  .checkout-exito .checkout-summary-section { display: none; }
  /* Celulares angostos: «Resumen» a secas y el total un poco más chico, para
     que todo quepa en una línea sin meterse bajo la X */
  @media (max-width: 380px) {
    .summary-titulo-extra { display: none; }
    .checkout-summary-section { padding-left: 18px; padding-right: 18px; }
    .summary-titulo-total { font-size: 16px; }
    /* Barra del botón: sin el ícono y con letra algo menor, para que
       «Confirmar pedido» quepa en una línea junto al total */
    .checkout-acciones .submit-btn { padding: 15px 10px; font-size: 14px; }
    .checkout-acciones .submit-btn svg { display: none; }
    .checkout-acciones-total strong { font-size: 18px; }
  }

  /* ── Formulario en celular ──
     La misma escala que en computador (etiqueta 13,5px sobre campo de 16px,
     que es el mínimo para que el iPhone no haga zoom), con algo menos de aire
     para que quepan más campos a la vista. */
  .checkout-form-subtitle { margin-bottom: 14px; }
  .checkout-invitada { margin: -4px 0 16px; padding: 10px 13px; font-size: 13.5px; line-height: 1.45; }
  .checkout-form-section .form-section-label { margin: 22px 0 12px; }
  .checkout-form-section .form-group { margin-bottom: 12px; }
  /* Nombre y correo van en una .form-row: sus 16px de separación dejaban
     el doble de espacio que entre los demás campos */
  .checkout-form-section .form-row { gap: 0; }
  .checkout-form-section .form-input { padding: 11px 13px; }
  .checkout-form-section .checkbox-row { font-size: 13.5px; }
  .checkout-summary-section .cupon-mensaje:empty { display: none; }
  /* La barra del botón respeta la zona inferior del iPhone */
  .checkout-acciones { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* Pantalla final (datos bancarios, comprobante y crear cuenta). El formulario
     ya trae su margen lateral: si la pantalla suma el suyo, el recuadro quedaba
     de 220px y los datos se partían en pedazos («PED-/T8K2ABC», «contacto@a/…»). */
  .checkout-success { padding: 16px 0 6px; }
  .transfer-box { padding: 16px 14px; }
  .transfer-cabecera { flex-wrap: wrap; row-gap: 8px; }
  .transfer-pedido strong,
  .transfer-monto strong { white-space: nowrap; }
  /* Un dato por línea: el nombre a la izquierda y el valor a la derecha */
  .transfer-datos { grid-template-columns: 1fr; gap: 6px; }
  .transfer-fila { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
  .transfer-etiqueta { flex-shrink: 0; }
  .transfer-fila strong { text-align: right; overflow-wrap: anywhere; }
  .success-acciones { flex-direction: column; align-items: stretch; }
  .success-acciones .btn-primary,
  .success-acciones .btn-secondary { width: 100%; }
  .cuenta-oferta { text-align: center; }
  .transfer-monto { text-align: left; }
  /* Celulares muy angostos: el nombre arriba y el valor abajo, sin cortar palabras */
  @media (max-width: 360px) {
    .transfer-fila { flex-direction: column; align-items: flex-start; gap: 1px; }
    .transfer-fila strong { text-align: left; }
  }
  .cart-drawer { width: 100vw; }
  .form-row { grid-template-columns: 1fr; }
  .checkout-form-section { --pad-y: 22px; --pad-x: 18px; }
  .form-row.form-row-direccion,
  .form-row.form-row-3 { grid-template-columns: 1fr; gap: 0; }
  .checkout-acciones-total { display: flex; flex-direction: column; flex-shrink: 0; }
  .checkout-acciones-total span {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }
  .checkout-acciones-total strong { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--tinta); }
  /* Junto al total el botón queda angosto: el texto en una línea */
  .checkout-acciones { gap: 12px; }
  .checkout-acciones .submit-btn { white-space: nowrap; padding: 16px 14px; }

  /* Headers con varios botones (Mi cuenta, Favoritos): que bajen de línea
     en vez de salirse de la pantalla */
  header { flex-wrap: wrap; row-gap: 8px; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

}

@media (max-width: 560px) {
  .products-grid { grid-template-columns: 1fr; }

  /* «Más vendidos» del inicio va a dos columnas en celular, igual que la
     página de productos: se alcanza a ver el doble sin tanto desplazamiento. */
  .products-section .products-grid,
  .products-grid[data-bestseller="1"] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .products-section .product-name { font-size: 14px; }

  .header-actions { gap: 8px; }
  .header-divisor, .header-nombre { display: none; }
  .header-marca { height: 26px; }
  .enlace-cuenta { font-size: 12px; }
  .carro { padding: 5px; }
  .cart-btn { padding: 7px 12px; font-size: 10px; }
  .track-form { flex-direction: column; }
  .result-grid { grid-template-columns: 1fr; }
  .track-step-label { font-size: 8.5px; }
  .boletin-form input { min-width: 0; width: 100%; }
}


.enlace-cuenta:hover { border-bottom-color: var(--omija); color: var(--omija); }
/* Bajo 1000px el menú de texto pasa a las tres rayitas. El header queda con
   las rayitas en la esquina izquierda, el logo justo a su derecha y, en el
   otro extremo, perfil, favoritos (sólo con sesión) y carro.

   En el panel de admin el único botón del header es «Cerrar sesión», que en
   celular también se queda a la vista. */
@media (max-width: 1000px) {
  header nav { display: none; }
  .menu-toggle { display: flex; }

  header { justify-content: flex-start; gap: 10px; flex-wrap: nowrap; }
  .menu-toggle { margin-left: -6px; }        /* las rayitas alineadas con el borde */
  .header-logo { margin-right: auto; }       /* empuja los íconos al extremo derecho */
  .header-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
}
@media (max-width: 380px) {
  .header-actions { gap: 4px; }
}

/* ══════════════════════════════════════════
   MENÚ DESPLEGABLE DE MARCAS (header)
   ══════════════════════════════════════════ */
.nav-marcas { position: relative; display: flex; align-items: center; }
.nav-marcas-titulo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-marcas-titulo svg {
  transition: transform 0.2s;
  margin-top: 1px;
}
.nav-marcas.abierto .nav-marcas-titulo svg { transform: rotate(180deg); }
.nav-marcas.abierto .nav-marcas-titulo { border-bottom-color: var(--omija); }

.nav-marcas-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(27, 23, 19, 0.22);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 120;
}
/* puente invisible para que el mouse no "caiga" entre el título y el menú */
.nav-marcas-menu::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav-marcas.abierto .nav-marcas-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-marca-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 9px;
  text-transform: none;
  letter-spacing: 0;
  border: none;
  transition: background 0.15s;
}
.nav-marca-item:hover { background: var(--porcelana); }
.nav-marca-item::after { display: none; }
.nav-marca-nombre {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta);
}
.nav-marca-todas {
  display: block;
  margin-top: 6px;
  padding: 11px 14px 6px;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--omija);
  border-bottom: none;
}
.nav-marca-todas::after { display: none; }
.nav-marca-todas:hover { color: var(--omija-oscuro); }

/* ══════════════════════════════════════════
   PÁGINA DE MARCAS
   ══════════════════════════════════════════ */
.marcas-page {
  min-height: 70vh;
  padding: 56px 32px 96px;
  max-width: 1280px;
  margin: 0 auto;
}
.marcas-header { text-align: center; margin-bottom: 48px; }
.marcas-header .section-tag { justify-content: center; }
.marcas-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--tinta);
  line-height: 1.12;
}
.marcas-title em { font-style: italic; color: var(--omija); }
.marcas-subtitle {
  font-family: var(--coolvetica);
  font-style: italic;
  font-size: 15px;
  color: var(--tinta-suave);
  font-weight: 400;
  margin-top: 14px;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.marcas-volver {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--omija);
  border-bottom: 1px solid var(--omija);
  padding-bottom: 2px;
}

.marcas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.marca-card {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 26px 20px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.marca-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-ficha);
  border-color: var(--rosa-claro);
}
.marca-card-inicial {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(165deg, #F3E4DE, #DDB9B4);
  color: var(--omija);
  font-family: var(--display);
  font-size: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marca-card-nombre {
  font-family: var(--coolvetica);
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-top: -4px;
}
.marca-card-conteo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-top: -8px;
}

@media (max-width: 820px) {
  .marcas-page { padding: 40px 20px 72px; }
}





/* ══════════════════════════════════════════
   MARCAS: logo, casillas de visibilidad y arrastre (admin)
   ══════════════════════════════════════════ */

/* Logo en el listado del panel */
.marca-logo {
  object-fit: contain;
  background: var(--papel);
  padding: 5px;
}

/* Manija para arrastrar */
.marca-agarre {
  font-size: 17px;
  line-height: 1;
  color: var(--tinta-suave);
  cursor: grab;
  padding: 0 2px;
  user-select: none;
  flex-shrink: 0;
}
.marca-agarre:active { cursor: grabbing; }
.marca-item.arrastrando {
  opacity: 0.45;
  border-color: var(--omija);
}
.marca-item.sobre { border-color: var(--omija); }

/* Casillas independientes de ocultar */
.marca-casillas {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.marca-casilla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.marca-casilla input {
  width: 15px;
  height: 15px;
  accent-color: var(--omija);
  cursor: pointer;
  flex-shrink: 0;
}
.marca-casilla input:checked ~ span { color: var(--omija); font-weight: 500; }

/* Logo actual en el formulario de marca */
.marca-logo-actual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  background: var(--porcelana);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.marca-logo-actual img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: var(--papel);
  border-radius: 8px;
  padding: 4px;
}

.marca-visibilidad {
  margin: 4px 0 14px;
  padding: 14px 16px;
  background: var(--porcelana);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.marca-visibilidad-titulo {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 10px;
}
.marca-visibilidad .checkbox-row { margin-bottom: 4px; }

.form-ayuda {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   SELECTOR BUSCABLE DE MARCA (formulario de producto)
   ══════════════════════════════════════════ */
.combo { position: relative; }
.combo-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}
.combo-boton svg { flex-shrink: 0; transition: transform 0.2s; color: var(--tinta-suave); }
.combo.abierto .combo-boton svg { transform: rotate(180deg); }
.combo.abierto .combo-boton { border-color: var(--omija); }
.combo-vacio-texto { color: #B3ACA1; }

.combo-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 20px 44px -20px rgba(27, 23, 19, 0.28);
  padding: 8px;
  z-index: 60;
  display: none;
}
.combo.abierto .combo-panel { display: block; }

.combo-buscar {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--tinta);
  background: var(--porcelana);
  border: 1px solid var(--linea);
  border-radius: 8px;
  outline: none;
  margin-bottom: 6px;
}
.combo-buscar:focus { border-color: var(--omija); }

.combo-lista {
  max-height: 230px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.combo-opcion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--tinta);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.combo-opcion:hover { background: var(--porcelana); }
.combo-nueva {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--omija);
  border-bottom: 1px solid var(--linea);
  border-radius: 8px 8px 0 0;
  margin-bottom: 4px;
  padding-bottom: 11px;
}
.combo-nueva:hover { background: var(--rosado); }
.combo-vacio {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-suave);
  padding: 12px;
  text-align: center;
}

/* ══════════════════════════════════════════
   LOGO DE MARCA EN "VER TODAS LAS MARCAS"
   ══════════════════════════════════════════ */
.marca-card-logo {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.marca-card-logo img {
  max-width: 88%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 700px) {
  .marca-controles { width: 100%; justify-content: space-between; }
  .marca-casillas { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* ==========================================================================
   FICHA DE PRODUCTO (producto.html)
   ========================================================================== */

/* La tarjeta completa lleva a la ficha; los botones quedan por encima */
.product-card { position: relative; }
.product-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card .add-to-cart { position: relative; z-index: 2; }
.product-card .product-overlay { z-index: 3; }

/* ---- Migas + navegación entre productos ---- */
.ficha-migas {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ficha-migas-ruta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  min-width: 0;
}
.ficha-migas-ruta a { transition: color 0.2s; }
.ficha-migas-ruta a:hover { color: var(--omija); }
.ficha-migas-ruta span[aria-hidden] { color: var(--linea); }
.ficha-migas-actual {
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42ch;
}

.ficha-nav { display: flex; gap: 8px; flex-shrink: 0; }
.ficha-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--linea);
  border-radius: 100px;
  background: var(--papel);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ficha-nav-btn:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--porcelana);
}
.ficha-nav-btn.inactivo {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Estructura ---- */
.ficha-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 96px;
  min-height: 60vh;
}
.ficha-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  row-gap: 48px;
  align-items: start;
}
.ficha-galeria {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 96px;
  align-self: start;
}
.ficha-resumen   { grid-column: 2; grid-row: 1; }
.ficha-secciones { grid-column: 2; grid-row: 2; }

/* ---- Galería ---- */
.ficha-galeria-marco {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #FBF8F4, #EFE6DE);
}
.ficha-galeria-visor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.ficha-galeria-visor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Carrusel: ambas imágenes ocupan el visor y se desplazan juntas.
   La saliente se va por un lado y la entrante llega por el otro. */
.ficha-img {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.ficha-img.entra-derecha    { animation: fichaEntraDerecha    0.5s var(--ease-out) both; }
.ficha-img.entra-izquierda  { animation: fichaEntraIzquierda  0.5s var(--ease-out) both; }
.ficha-img.sale-izquierda   { animation: fichaSaleIzquierda   0.5s var(--ease-out) both; }
.ficha-img.sale-derecha     { animation: fichaSaleDerecha     0.5s var(--ease-out) both; }

@keyframes fichaEntraDerecha {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes fichaSaleIzquierda {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes fichaEntraIzquierda {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes fichaSaleDerecha {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
.ficha-sin-imagen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ficha-sin-imagen svg { width: 62%; height: 62%; }

.ficha-galeria-flecha,
.ficha-galeria-zoom {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--linea);
  color: var(--tinta);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.ficha-galeria-flecha {
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
}
.ficha-galeria-flecha.izq { left: 14px; }
.ficha-galeria-flecha.der { right: 14px; }
.ficha-galeria-flecha:hover {
  background: var(--tinta);
  color: var(--porcelana);
  transform: translateY(-50%) scale(1.06);
}
.ficha-galeria-zoom {
  right: 14px; bottom: 14px;
  width: 34px; height: 34px;
  border-radius: 10px;
}
.ficha-galeria-zoom:hover { background: var(--tinta); color: var(--porcelana); }

.ficha-miniaturas {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ficha-mini {
  width: 72px; height: 72px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel);
  padding: 0;
  transition: border-color 0.2s, transform 0.2s;
}
.ficha-mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha-mini:hover { transform: translateY(-2px); }
.ficha-mini.activa { border-color: var(--tinta); }

/* ---- Lightbox ---- */
.ficha-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(27, 23, 19, 0.9);
  cursor: zoom-out;
}
.ficha-lightbox.abierto { display: flex; }
.ficha-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.ficha-lightbox-cerrar {
  position: absolute;
  top: 22px; right: 26px;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--porcelana);
  font-size: 16px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}
.ficha-lightbox-cerrar:hover { background: rgba(255, 255, 255, 0.25); }

/* ---- Resumen y compra ---- */
.ficha-marca {
  font-family: var(--creato);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--omija);
}
.ficha-titulo {
  font-family: var(--creato);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  color: var(--tinta);
  margin: 12px 0 18px;
}
.ficha-precio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.ficha-precio-ahora {
  font-family: var(--display);
  font-size: 27px;
  color: var(--tinta);
}
.ficha-precio-antes {
  font-size: 17px;
  color: var(--tinta-suave);
  text-decoration: line-through;
}

.ficha-disponibilidad { margin-bottom: 6px; }
.ficha-stock {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.ficha-stock.bajo    { color: var(--omija); }
.ficha-stock.agotado { color: var(--danger); }

.ficha-compra {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  /* El margen vive aquí para que el hueco sea el mismo aunque
     no se muestre el aviso de disponibilidad. */
  margin-top: 30px;
}
.ficha-qty { height: 48px; border-radius: 100px; }
.ficha-qty .qty-btn   { width: 42px; height: 46px; font-size: 17px; }
.ficha-qty .qty-value { width: 34px; height: 46px; font-size: 13px; }

.ficha-anadir {
  flex: 1;
  min-width: 200px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--mono);
  font-size: 12px;
  padding: 16px 28px;
}
.ficha-anadir:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--tinta-suave);
  border-color: var(--tinta-suave);
}

/* Las capas del ícono se definen junto a .fav-btn */
.ficha-fav {
  position: relative;
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
@media (hover: hover) {
  .ficha-fav:hover { transform: scale(1.06); }
}

.ficha-destacados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.ficha-destacados li {
  position: relative;
  font-size: 14px;
  font-weight: var(--peso-texto);
  color: var(--tinta);
}
/* Separador fino entre destacados, al estilo "Calmar | Nutre" */
.ficha-destacados li + li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: var(--linea);
}

/* ---- Secciones de contenido (siempre visibles) ---- */
.ficha-secciones { border-top: 1px solid var(--linea); }
.ficha-seccion { border-bottom: 1px solid var(--linea); }
.ficha-seccion-fija { padding: 26px 0; }
.ficha-seccion-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  color: var(--tinta);
}
.ficha-seccion-fija .ficha-seccion-titulo { margin-bottom: 14px; }

/* Cabecera plegable */
.ficha-seccion-encabezado { font-weight: var(--peso-texto); }
.ficha-seccion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  text-align: left;
  color: var(--tinta);
  transition: color 0.2s;
}
.ficha-seccion-toggle:hover { color: var(--omija); }
.ficha-seccion-chevron {
  flex-shrink: 0;
  color: var(--tinta-suave);
  transition: transform 0.35s var(--ease-out), color 0.2s;
}
.ficha-seccion-toggle:hover .ficha-seccion-chevron { color: var(--omija); }
.ficha-seccion.abierta .ficha-seccion-chevron { transform: rotate(180deg); }

/* Panel: de 0fr a 1fr para animar hasta la altura real del contenido */
.ficha-seccion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-out);
}
.ficha-seccion.abierta .ficha-seccion-panel { grid-template-rows: 1fr; }
/* El envoltorio no lleva padding propio: si lo tuviera, la fila
   nunca colapsaría del todo al plegar la sección. */
.ficha-seccion-envoltorio {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s 0.35s;
}
.ficha-seccion.abierta .ficha-seccion-envoltorio {
  visibility: visible;
  transition: visibility 0s;
}
.ficha-seccion-plegable .ficha-seccion-cuerpo { padding-bottom: 24px; }
.ficha-seccion-cuerpo {
  font-size: 15px;
  font-weight: var(--peso-fino);
  line-height: 1.75;
  color: var(--tinta-suave);
}
.ficha-seccion-cuerpo p + p,
.ficha-seccion-cuerpo p + ul,
.ficha-seccion-cuerpo ul + p { margin-top: 12px; }
.ficha-seccion-vacia { font-style: italic; opacity: 0.75; }

.ficha-lista { display: flex; flex-direction: column; gap: 7px; }
.ficha-lista li { position: relative; padding-left: 20px; }
.ficha-lista li::before {
  content: "";
  position: absolute;
  left: 3px; top: 12px;
  width: 6px; height: 1px;
  background: var(--omija);
}

.ficha-tabla { display: flex; flex-direction: column; }
.ficha-tabla-fila {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
}
.ficha-tabla-fila:last-child { border-bottom: none; }
.ficha-tabla dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}
.ficha-tabla dd { color: var(--tinta-suave); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ficha-layout {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
  .ficha-galeria,
  .ficha-resumen,
  .ficha-secciones {
    grid-column: 1;
    grid-row: auto;
  }
  /* Apilada, la galería no debe comerse la pantalla completa */
  .ficha-galeria { position: static; width: 100%; max-width: 480px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .ficha-migas { padding: 20px 20px 0; }
  .ficha-migas-ruta { font-size: 10px; }
  .ficha-migas-actual { max-width: 22ch; }
  .ficha-page { padding: 20px 20px 72px; }
  .ficha-compra { gap: 12px; }
  /* El botón salta a su propia línea, bajo la cantidad y el favorito */
  .ficha-anadir { flex: 1 0 100%; min-width: 0; order: 2; }
  .ficha-fav { margin-left: auto; }
  .ficha-mini { width: 60px; height: 60px; }
  .ficha-lightbox { padding: 20px; }
}

/* ---- Panel admin: contenido de la ficha y galería ---- */
.prod-ficha-bloque {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
}
.prod-ficha-cabecera { margin-bottom: 18px; }
.prod-ficha-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  color: var(--tinta);
  margin-bottom: 6px;
}
.prod-ficha-cabecera code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--porcelana);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1px 5px;
}
textarea.form-input-alto { min-height: 110px; resize: vertical; }

.prod-galeria-actual {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.prod-galeria-item {
  position: relative;
  width: 66px; height: 66px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: hidden;
  background: var(--papel);
}
.prod-galeria-item img { width: 100%; height: 100%; object-fit: cover; }
.prod-galeria-quitar {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(27, 23, 19, 0.78);
  color: var(--porcelana);
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.prod-galeria-quitar:hover { background: var(--danger); }


/* ==========================================================================
   CINTA DE LOGOS DE MARCAS (inicio y nosotros)
   Reusa .cinta / .cinta-inner: sólo cambia lo que va dentro.
   ========================================================================== */
.cinta-marcas .cinta-inner {
  gap: 0;
  padding: 0;
  align-items: stretch;
}
/* Antes de que lleguen las marcas la cinta ya tiene el alto de una casilla,
   para no empujar la página al llenarse. Sigue los cortes de .cinta-marca. */
.cinta-marcas:empty::before { content: ''; display: block; height: 92px; }

/* Cada marca ocupa una casilla del mismo tamaño: así los logos quedan
   alineados aunque unos sean más anchos o más altos que otros. La casilla
   interior mide 210×84, la misma proporción 5:2 de los archivos de 360×144.
   Ojo al cambiarla: como el logo es 5:2, su alto manda sobre el alto de la
   barra, así que un logo más ancho obliga a una barra más alta. El aire
   vertical de 4px es lo mínimo para que el logo casi toque el borde y a la vez
   quepa el zoom del hover.

   --zoom es cuánto crece el logo al pasar el mouse: justo lo necesario para
   que llegue al borde de la barra sin pasarse (alto de casilla ÷ alto del
   logo, con un pelo de margen para el redondeo a subpíxel). Cambia por
   breakpoint porque el aire es siempre 4px pero el logo no. */
.cinta-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 222px;
  height: 92px;
  padding: 4px 6px;
  --zoom: 1.09;   /* 92 / 84 = 1.095 */
}
/* El `transform: scale(1)` y el `will-change` no mueven nada: obligan al
   navegador a dibujar cada logo en su propia capa, a la resolución real de la
   pantalla. Sin eso el logo se dibuja dentro de la capa de la cinta, que va
   desplazándose en fracciones de píxel, y se ve borroso mientras avanza —
   sólo se veía nítido al pasar el mouse porque el zoom le daba capa propia. */
.cinta-marca img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* logo con otra proporción: se centra, no se deforma */
  transform: scale(1);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.25s;
}
.cinta-marca:hover img { transform: scale(var(--zoom)); }
/* La cinta genérica se detiene al pasar el mouse; la de marcas no, para que
   los logos sigan desfilando mientras se agranda el que está debajo. */
.cinta-marcas:hover .cinta-inner { animation-play-state: running; }
/* Marca sin logo: se muestra el nombre como marca denominativa.
   Va con .cinta delante para ganarle a la regla genérica `.cinta span`. */
.cinta .cinta-marca-nombre {
  font-family: var(--coolvetica);
  font-style: italic;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--tinta);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cinta-marca { width: 192px; height: 80px; padding: 4px 6px; --zoom: 1.10; }
  .cinta-marcas:empty::before { height: 80px; }
  .cinta .cinta-marca-nombre { font-size: 18px; }
}
@media (max-width: 640px) {
  .cinta-marca { width: 156px; height: 68px; padding: 4px 3px; --zoom: 1.12; }
  .cinta-marcas:empty::before { height: 68px; }
  .cinta .cinta-marca-nombre { font-size: 16px; }
}

/* Enlace a la página Nosotros desde el bloque de historia del inicio */
.historia-enlace {
  display: inline-block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--omija);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 4px;
  transition: border-color 0.2s;
}
.historia-enlace:hover { border-color: var(--omija); }

/* Cuando el admin sube una foto, reemplaza la caligrafía de fondo */
.historia-visual.cms-con-imagen {
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   PÁGINA NOSOTROS
   Una sola portada a sangre: imagen a la izquierda, panel de texto a la
   derecha con la descripción y, abajo a la derecha, los datos de contacto.
   ========================================================================== */
.nos-portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--rosado);
}
.nos-portada-visual {
  position: relative;
  min-height: min(80vh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--rosado), #DCC7C0 55%, var(--rosa-claro));
}
.nos-portada-visual.cms-con-imagen {
  background-size: cover;
  background-position: center;
}

.nos-portada-texto {
  background: var(--rosado);
  padding: clamp(36px, 5vw, 72px);
  display: flex;
  align-items: center;
}
.nos-portada-cuerpo { width: 100%; max-width: 60ch; }

/* El h1 es la bajada pequeña de la referencia, no un titular grande */
.nos-portada-titulo {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--omija);
  margin-bottom: 24px;
}
.nos-portada-texto p {
  font-size: 15.5px;
  font-weight: var(--peso-fino);
  line-height: 1.8;
  color: var(--tinta-suave);
}
.nos-portada-texto p + p { margin-top: 16px; }

/* ---- Contacto dentro del mismo panel, abajo y a la derecha ---- */
.nos-contacto-inline {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(116, 47, 62, 0.18);
  display: flex;
  justify-content: flex-end;
}
.nos-canales {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
}
.nos-canales li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nos-canal-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omija);
}
.nos-canal-dato {
  font-size: 14.5px;
  color: var(--tinta);
}

@media (max-width: 900px) {
  .nos-portada { grid-template-columns: 1fr; }
  .nos-portada-visual { min-height: 340px; }
  .nos-portada-cuerpo { max-width: none; }
}
@media (max-width: 640px) {
  .nos-contacto-inline { justify-content: flex-start; }
  .nos-canales { text-align: left; }
}

/* ==========================================================================
   PANEL ADMIN — CONTENIDO DE LAS PÁGINAS
   ========================================================================== */
.cms-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.cms-paginas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 96px;
}
.cms-pagina-btn {
  text-align: left;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cms-pagina-btn:hover { background: var(--papel); color: var(--tinta); }
.cms-pagina-btn.activa {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--porcelana);
}

.cms-panel {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 28px 30px;
}
.cms-panel-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 8px;
}

.cms-grupo {
  padding: 26px 0;
  border-bottom: 1px solid var(--linea);
}
.cms-grupo:last-of-type { border-bottom: none; }
.cms-grupo-titulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omija);
  margin-bottom: 18px;
}
.cms-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
/* Los textos largos y las imágenes ocupan la fila completa */
.cms-campo-ancho { grid-column: 1 / -1; }

.cms-imagen-actual {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.cms-imagen-actual img {
  width: 92px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
}

.cms-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  margin-top: 8px;
}

@media (max-width: 860px) {
  .cms-layout { grid-template-columns: 1fr; }
  .cms-paginas {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cms-panel { padding: 22px 18px; }
}


/* ==========================================================================
   PANEL — BANNERS DE LA PORTADA
   ========================================================================== */
.banner-fila {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--papel);
}
/* Un banner desactivado sigue en la lista, pero apagado */
.banner-fila.inactivo { opacity: 0.5; }

.banner-mini {
  width: 120px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--porcelana);
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-mini img { width: 100%; height: 100%; object-fit: cover; }
.banner-sin-img {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
}

.banner-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.banner-datos strong { font-size: 14px; }
.banner-enlace {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner-enlace.apagado { opacity: 0.55; }
/* Aviso de que falta la versión cuadrada para celular */
.banner-aviso {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--omija);
}

.banner-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Vista previa de la imagen ya guardada, dentro del formulario */
.banner-img-actual {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--porcelana);
}
.banner-img-actual img {
  display: block;
  width: 100%;
  max-height: 130px;
  object-fit: contain;
  margin-bottom: 8px;
}
/* La medida recomendada se lee antes de elegir el archivo: va destacada */
.form-ayuda.banner-medida { color: var(--omija); font-weight: 500; }


/* ==========================================================================
   PANEL — BEST SELLER
   ========================================================================== */
.bs-cabecera-acciones { display: flex; align-items: center; gap: 14px; }
.bs-contador {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.bs-buscador { margin: 18px 0 22px; max-width: 420px; }

#adminBestSeller {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.bs-titulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 12px;
}
.bs-lista { display: flex; flex-direction: column; gap: 8px; }

.bs-fila {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--papel);
}
/* Los que ya están en la portada llevan el acento de marca */
.bs-fila.elegida { border-color: var(--omija); background: var(--rosado); }

.bs-mini {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--porcelana);
}
.bs-mini img { width: 100%; height: 100%; object-fit: cover; }

.bs-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-datos strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-datos span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tinta-suave);
}
.bs-acciones { display: flex; gap: 5px; }

@media (max-width: 900px) {
  #adminBestSeller { grid-template-columns: 1fr; }
  .banner-fila { grid-template-columns: 90px 1fr; }
  .banner-mini { width: 90px; height: 38px; }
  .banner-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}


/* ==========================================================================
   PANEL — CATEGORÍAS DEL CATÁLOGO
   ========================================================================== */
.cat-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  margin-bottom: 9px;
  background: var(--papel);
}
/* Una categoría oculta sigue en la lista, pero apagada */
.cat-fila.inactiva { opacity: 0.5; }

.cat-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cat-datos strong { font-size: 14px; }
.cat-slug {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-suave);
}
.cat-n {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--omija);
}

.cat-inicio {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  cursor: pointer;
  white-space: nowrap;
}
.cat-inicio input { cursor: pointer; }

/* ── Cupones ──
   Reusan la fila de categorías; sólo cambia lo propio del cupón: el código
   destacado, el descuento y la etiqueta de estado. */
.cupon-fila .cat-datos { gap: 4px; }
.cupon-codigo {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.cupon-valor {
  font-family: var(--display);
  font-size: 16px;
  color: var(--omija);
}
.cupon-estado {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cupon-estado.cupon-ok     { background: #E7F0E8; color: #3F6B46; }
.cupon-estado.cupon-espera { background: #FBF0DC; color: #8A6B2B; }
.cupon-estado.cupon-off    { background: var(--linea); color: var(--tinta-suave); }

/* Un cupón ya canjeado no se puede borrar: el botón queda a la vista pero
   apagado, con el porqué en el title */
.cupon-fila .prod-accion:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cupon-fila .prod-accion:disabled:hover {
  background: none;
  border-color: var(--linea);
  color: inherit;
}

.cat-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 900px) {
  .cat-fila { grid-template-columns: 1fr; gap: 10px; }
  .cat-acciones { justify-content: flex-start; }
}

/* ==========================================================================
   COMPRA SIN CUENTA
   ========================================================================== */
.checkout-invitada {
  margin: -10px 0 18px;
  padding: 11px 15px;
  background: var(--rosado);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.checkout-invitada a { color: var(--omija); font-weight: 600; text-decoration: underline; }
.checkbox-row[hidden] { display: none; }

/* ==========================================================================
   MÉTODO DE ENVÍO (Envío / Retiro)
   ========================================================================== */
/* Las filas del formulario son grid/flex: sin esto, `hidden` no las oculta */
#checkoutForm [hidden] { display: none !important; }
.retiro-info { margin-bottom: 18px; }
.retiro-direccion {
  margin: 0 0 10px;
  padding: 14px 16px;
  background: var(--papel);
  border: 1px dashed var(--linea);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}
.retiro-aviso {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta-suave);
}
.retiro-aviso a { color: var(--omija); font-weight: 600; text-decoration: underline; }

/* Panel: si el pedido es Envío o Retiro, junto al código */
.admin-metodo {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--porcelana);
  border: 1px solid var(--linea);
  color: var(--tinta-suave);
}
.admin-metodo-retiro { background: var(--rosado); border-color: var(--rosa-claro); color: var(--omija); }

/* Seguimiento y Mi cuenta: dónde retirar un pedido de retiro */
.retiro-cliente {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--porcelana);
  border: 1px dashed var(--linea);
  border-radius: 10px;
  text-align: left;
}
.retiro-cliente-titulo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 4px;
}
.retiro-cliente-direccion { font-weight: 600; color: var(--omija); line-height: 1.5; }

/* Invitación a crear la contraseña, bajo la subida del comprobante */
.cuenta-oferta {
  width: 100%;
  max-width: 470px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.cuenta-oferta[hidden] { display: none; }
.cuenta-oferta-texto {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin-bottom: 8px;
}
.cuenta-oferta-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--omija);
  border-bottom: 1px solid var(--omija);
  padding: 2px 0;
}
.cuenta-oferta-estado { font-size: 13px; line-height: 1.45; margin-top: 8px; }
.cuenta-oferta-estado:empty { display: none; }
.cuenta-oferta-estado.ok { color: #3F6B46; }
.cuenta-oferta-estado.error { color: var(--danger); }

/* Etiqueta en el panel para los pedidos de quien compró sin cuenta */
.etiqueta-invitada {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--rosado);
  color: var(--omija);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ==========================================================================
   SUBIR COMPROBANTE (comprobante.html, desde el correo de confirmación)
   ========================================================================== */
.comprobante-pagina {
  display: flex;
  justify-content: center;
  padding: 64px 20px 90px;
}
.comprobante-tarjeta {
  width: 100%;
  max-width: 520px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 34px 30px;
  text-align: center;
}
.comprobante-tarjeta .etiqueta { display: inline-block; margin-bottom: 10px; }
.comprobante-titulo {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--tinta);
  margin-bottom: 10px;
}
.comprobante-titulo em { color: var(--omija); }
.comprobante-bajada {
  max-width: 420px;
  margin: 0 auto 20px;
  font-size: 14px;
  font-weight: var(--peso-fino);
  line-height: 1.65;
  color: var(--tinta-suave);
}
.comprobante-cargando { padding: 30px 0; font-size: 14px; color: var(--tinta-suave); }
.comprobante-tarjeta .transfer-box,
.comprobante-tarjeta .comprobante-rapido { margin-left: auto; margin-right: auto; }
.comprobante-opciones.una-opcion { grid-template-columns: 1fr; }
.comprobante-opcion[hidden] { display: none; }
#comprobanteError .btn-primary { text-decoration: none; }
@media (max-width: 560px) {
  .comprobante-pagina { padding: 32px 14px 60px; }
  .comprobante-tarjeta { padding: 26px 18px; }
  .comprobante-titulo { font-size: 25px; }
}

/* ==========================================================================
   MINIATURAS EN EL CARRITO Y EN EL RESUMEN DEL CHECKOUT
   La foto a la izquierda del nombre confirma de un vistazo que es el producto
   correcto. Sin foto se muestra la inicial sobre el mismo fondo de las fichas.
   ========================================================================== */
.cart-item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: linear-gradient(165deg, #F3E4DE, #DDB9B4);
}
.cart-item-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-item-img span { font-family: var(--display); font-size: 26px; color: var(--omija); }
.cart-item-info { flex: 1; min-width: 0; }
/* La foto y el nombre llevan a la ficha del producto */
a.cart-item-img { transition: opacity 0.2s; }
a.cart-item-img:hover { opacity: 0.85; }
a.cart-item-name { display: block; text-decoration: none; transition: color 0.2s; }
a.cart-item-name:hover { color: var(--omija); }

.summary-item { align-items: center; }
.summary-item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(247, 244, 239, 0.12);
}
.summary-item-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.summary-item-img span { font-family: var(--display); font-size: 20px; color: var(--rosa-claro); }

/* Celular: con la foto de 76px y los botones de cantidad, el nombre quedaba en
   124px y se partía en muchas líneas. Se achica un poco la foto y el margen. */
@media (max-width: 560px) {
  .cart-item { padding: 18px 16px; gap: 12px; }
  .cart-item-img { width: 64px; height: 64px; }
  .cart-item-name { font-size: 16.5px; }
  .checkout-form-title { font-size: 24px; }
}

/* Tablet (701–960px): con la ventana más ancha, la columna del formulario queda
   angosta para región, ciudad y código postal en una sola fila. La región pasa
   a su propia fila y el resumen se angosta un poco. En celular (≤700px) ya va
   todo en una columna. */
@media (min-width: 701px) and (max-width: 960px) {
  .checkout-modal { grid-template-columns: 1fr 310px; }
  .checkout-form-section { --pad-x: 32px; }
  .checkout-summary-section { padding: 40px 26px; }
  .form-row.form-row-3 { grid-template-columns: 1fr 1fr; }
  .form-row.form-row-3 > .form-group:first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .fav-btn { top: 8px; right: 8px; width: 30px; height: 30px; }
}

/* Sin zoom al escribir en el celular. Safari (iPhone) acerca la pantalla
   cuando un campo tiene letra de menos de 16px; con 16px no lo hace. Se
   resuelve así y no bloqueando el zoom de la página (maximum-scale), que le
   quitaría a la clienta la opción de agrandar con dos dedos. */
@media (max-width: 1000px), (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* Pantalla muy angosta —en la práctica, cuando se hace zoom en el celular—:
   una ficha por fila, con el nombre de nuevo a su tamaño normal, para que las
   dos columnas no queden tan apretadas que el botón se salga de la tarjeta. */
@media (max-width: 350px) {
  .products-grid,
  .productos-page .products-grid,
  .products-section .products-grid,
  .products-grid[data-bestseller="1"] { grid-template-columns: 1fr; gap: 16px; }
  .productos-page .product-name,
  .products-section .product-name { font-size: 18.5px; }
}