/* Catálogo público: mobile-first, sobrio y comercial. Distinto al panel. */
:root{ --c-fondo: #F7F6F3; --c-tinta: #17181A; --c-tinta-2: #5E6167; --c-linea: #E4E0D8; --c-foto: #EFECE6; --c-oro: var(--oro); --c-oro-tx: #8C6A2C; --c-tinta-3: #8B8780; }
*{ box-sizing: border-box; }
body{ margin: 0; background: var(--c-fondo); color: var(--c-tinta); font: 400 15px/1.5 var(--fuente); -webkit-font-smoothing: antialiased; }
button, input, select, textarea{ font: inherit; }
/* Campos de texto (2.7.0). CAUSA DEL TEXTO INVISIBLE: heredaban `color` del
   contenedor, así que dentro del hero (color:#fff) quedaba texto blanco sobre
   fondo blanco. Los campos fijan su propio color, su cursor y su placeholder,
   sea cual sea el fondo donde estén. */
input, select, textarea{
  color: var(--c-tinta); caret-color: var(--c-tinta); background-color: #fff;
  -webkit-text-fill-color: var(--c-tinta); opacity: 1;
}
input::placeholder, textarea::placeholder{ color: var(--c-tinta-3, #8B8780); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--c-oro); outline-offset: 2px;
}
button{ color: inherit; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--c-oro); outline-offset: 2px; }
.oculto{ display: none !important; }
.serif{ font-family: var(--fuente-serif); }
.cargando{ min-height: 60vh; display: grid; place-items: center; color: var(--c-tinta-2); }
/* El splash inicial (emblema + puntos) vive en index.html, en línea, para pintarse antes que este CSS (2.8.2). */

.barra{ position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; background: rgba(247,246,243,.94); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
.barra.con-borde{ border-color: var(--c-linea); }
.marca img{ height: 42px; width: auto; display: block; }
.btn-pedido{ display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-tinta); background: var(--c-tinta); color: #fff; border-radius: 999px; padding: 8px 15px 8px 12px; cursor: pointer; font-weight: 550; font-size: 14px; }
.btn-pedido svg{ width: 19px; height: 19px; stroke: currentColor; }
.btn-pedido b{ background: var(--c-oro); color: #fff; border-radius: 999px; min-width: 21px; height: 21px; display: grid; place-items: center; font-size: 12px; padding: 0 6px; }

/* portada: la búsqueda manda */
.portada{ padding: 30px 18px 10px; max-width: 1180px; margin: 0 auto; }
.portada h1{ font-family: var(--fuente-serif); font-weight: 500; font-size: clamp(34px, 8.5vw, 64px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 8px; max-width: 13ch; }
.portada p{ color: var(--c-tinta-2); margin: 0 0 22px; max-width: 46ch; }
.buscador{ position: relative; max-width: 720px; }
.buscador input{ width: 100%; height: 58px; border-radius: 16px; border: 1.5px solid var(--c-tinta); background: #fff; padding: 0 20px 0 52px; font-size: 17px; }
.buscador svg{ position: absolute; left: 18px; top: 19px; width: 21px; height: 21px; stroke: var(--c-tinta); }
.sugerencias{ position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(23,24,26,.16); border: 1px solid var(--c-linea); overflow: hidden; z-index: 20; max-height: 70vh; overflow-y: auto; }
.sug{ display: flex; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #F1EEE9; }
.sug:last-child{ border-bottom: 0; }
.sug:hover, .sug.sel{ background: #F8F6F2; }
.sug img{ width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: var(--c-foto-fondo); border: 1px solid var(--c-linea); flex-shrink: 0; }
.sug .n{ font-family: var(--fuente-serif); font-size: 18px; font-weight: 600; line-height: 1.15; }
.sug .m{ font-size: 12.5px; color: var(--c-tinta-2); }
.sug .p{ margin-left: auto; text-align: right; font-weight: 600; white-space: nowrap; }
.sug .d{ font-size: 12px; font-weight: 400; color: #2E7D4F; }
.sug-vacio{ padding: 18px; color: var(--c-tinta-2); }

.accesos{ display: flex; gap: 8px; overflow-x: auto; padding: 18px 18px 4px; max-width: 1180px; margin: 0 auto; scrollbar-width: none; }
.accesos::-webkit-scrollbar{ display: none; }
.acceso{ flex-shrink: 0; border: 1px solid var(--c-linea); background: #fff; border-radius: 999px; padding: 9px 17px; cursor: pointer; font-size: 14px; font-weight: 500; }
.acceso.activo{ background: var(--c-tinta); color: #fff; border-color: var(--c-tinta); }

.seccion{ max-width: 1180px; margin: 0 auto; padding: 22px 18px 8px; }
.seccion-cab{ display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.seccion h2{ font-family: var(--fuente-serif); font-weight: 600; font-size: 28px; margin: 0; }
.seccion .cuantos{ color: var(--c-tinta-2); font-size: 13.5px; }
.orden{
  -webkit-appearance: none; appearance: none; border: 1px solid var(--c-linea); border-radius: 999px; height: 38px;
  padding: 0 32px 0 14px; font-size: 13.5px; font-weight: 500; cursor: pointer; max-width: 100%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6167' stroke-width='2' stroke-linecap='round'><path d='m7 10 5 5 5-5'/></svg>") no-repeat right 11px center / 15px;
}
.orden:hover{ border-color: var(--c-oro); }
.controles-listado{ display: flex; align-items: center; gap: 8px; }
.controles-listado .cuantos{ margin-right: 4px; }
.btn-filtrar{
  display: none; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--c-linea); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--c-tinta);
}
.btn-filtrar svg{ width: 16px; height: 16px; }
.btn-filtrar b{ background: var(--c-tinta); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; }
@media (max-width: 640px){
  .seccion h2{ font-size: 25px; }
  .seccion-cab > div:first-child{ flex: 1 1 100%; }
}

/* ---------- Tarjetas de producto (2.7.3 → 2.8.2) ----------
   Jerarquía: foto > marca > nombre > detalle > precio + disponibilidad.
   Tratamiento único de imágenes públicas (2.8.2): la foto va sobre el MISMO
   blanco de la tarjeta, sin relleno ni fondo beige detrás (eso era el "marco"
   visible alrededor de cada foto). `contain` para no recortar botellas ni cajas.
   Toda la tarjeta es un <button>: hover y foco cubren el bloque completo. */
:root{ --c-foto-fondo: #FFFFFF; }
.rejilla{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
.tarjeta{
  cursor: pointer; background: #fff; border: 1px solid var(--c-linea); border-radius: var(--radio-l);
  padding: 10px 10px 14px; text-align: left; display: flex; flex-direction: column; height: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta:hover{ border-color: var(--c-oro); box-shadow: 0 10px 26px rgba(23,24,26,.08); }
.tarjeta:active{ transform: scale(.99); }
.tarjeta .foto{
  position: relative; aspect-ratio: 1; background: var(--c-foto-fondo); border-radius: var(--radio); overflow: hidden;
  display: grid; place-items: center; padding: 0; box-sizing: border-box;
}
.tarjeta .foto img{ width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.tarjeta:hover .foto img{ transform: scale(1.04); }
.tarjeta .etiq{ position: absolute; left: 9px; top: 9px; background: #fff; color: var(--c-tinta); border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.tarjeta .etiq.oferta{ background: var(--c-oro); color: #fff; }
.tarjeta .marca-t{ font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-tinta-2); margin-top: 10px; }
.tarjeta .nombre-t{
  font-family: var(--fuente-serif); font-size: 19px; font-weight: 600; line-height: 1.18; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta .detalle-t{ font-size: 12.5px; color: var(--c-tinta-2); margin-top: 4px; }
.tarjeta .precio-t{ font-weight: 700; font-size: 16px; }
.tarjeta .precio-t s, .precio s{ color: var(--c-tinta-2); font-weight: 400; margin-left: 6px; font-size: 13.5px; }
.tarjeta .fila.entre{ margin-top: auto; padding-top: 8px; flex-wrap: wrap; row-gap: 3px; }
.disp-punto{ display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--c-aviso, #A8620E); white-space: nowrap; }
.disp-punto i{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.vacio{ padding: 40px 10px; text-align: center; color: var(--c-tinta-2); }

/* hoja de producto / mi pedido */
.velo{ position: fixed; inset: 0; background: rgba(23,24,26,.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.hoja{ background: #fff; width: 100%; max-width: 980px; max-height: 94vh; overflow-y: auto; border-radius: 22px 22px 0 0; position: relative; animation: subir .22s ease-out; }
@keyframes subir{ from{ transform: translateY(24px); opacity: .6; } to{ transform: none; opacity: 1; } }
.cerrar{ position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); cursor: pointer; font-size: 22px; line-height: 1; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.prod{ display: grid; grid-template-columns: 1fr; }
.prod .foto-g{ background: var(--c-foto-fondo); aspect-ratio: 1; border-bottom: 1px solid var(--c-linea); }
.prod .foto-g img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.prod .info{ padding: 20px 20px 26px; display: flex; flex-direction: column; gap: 12px; }
.prod .m{ color: var(--c-tinta-2); font-size: 14px; }
.prod h2{ font-family: var(--fuente-serif); font-weight: 600; font-size: 34px; line-height: 1.02; margin: 0; }
.prod .sub{ color: var(--c-tinta-2); font-size: 14px; }
.prod .precio{ font-size: 24px; font-weight: 650; }
.prod .huele{ font-family: var(--fuente-serif); font-size: 19px; line-height: 1.4; }
.notas-o{ display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.notas-o dt{ color: var(--c-tinta-2); } .notas-o dd{ margin: 0; }
.opciones{ display: flex; flex-wrap: wrap; gap: 8px; }
.opcion{ border: 1px solid var(--c-linea); border-radius: 12px; padding: 9px 13px; cursor: pointer; background: #fff; text-align: left; }
.opcion.activa{ border-color: var(--c-tinta); box-shadow: inset 0 0 0 1px var(--c-tinta); }
.opcion b{ display: block; font-size: 14px; } .opcion span{ font-size: 12.5px; color: var(--c-tinta-2); }
.disp{ font-size: 13.5px; color: #2E7D4F; }
.cond-nota{ font-size: 13px; background: #F7F2E7; color: #6B5320; border-radius: 10px; padding: 9px 12px; }
.cantidad{ display: inline-flex; align-items: center; border: 1px solid var(--c-linea); border-radius: 12px; }
.cantidad button{ width: 44px; height: 44px; border: 0; background: none; font-size: 20px; cursor: pointer; }
.cantidad button:disabled{ opacity: .3; cursor: not-allowed; }
.cantidad span{ min-width: 30px; text-align: center; font-weight: 650; }
.boton{ height: 52px; border-radius: 14px; border: 0; background: var(--c-tinta); color: #fff; font-weight: 600; font-size: 16px; cursor: pointer; padding: 0 22px; }
.boton.oro{ background: var(--c-oro); }
.boton.claro{ background: #fff; color: var(--c-tinta); border: 1px solid var(--c-linea); }
.boton.peligro{ background: var(--peligro); }
.boton:disabled{ opacity: .5; cursor: not-allowed; }
.fila{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.pedido{ padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 14px; }
.pedido h2{ font-family: var(--fuente-serif); font-weight: 600; font-size: 30px; margin: 0; }
.linea{ display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #F1EEE9; }
.linea img{ width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: var(--c-foto-fondo); border: 1px solid var(--c-linea); flex-shrink: 0; }
.linea .t{ flex: 1; min-width: 0; }
.linea .n{ font-family: var(--fuente-serif); font-size: 18px; font-weight: 600; line-height: 1.15; }
.linea .s{ font-size: 12.5px; color: var(--c-tinta-2); }
.linea .cantidad button{ width: 34px; height: 34px; font-size: 17px; }
.totales .f{ display: flex; justify-content: space-between; padding: 5px 0; }
.totales .f.total{ font-size: 18px; font-weight: 650; border-top: 1px solid var(--c-linea); padding-top: 12px; margin-top: 4px; }
.aviso{ background: #F7F2E7; color: #5D4A1D; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.campo{ display: flex; flex-direction: column; gap: 6px; }
.campo label{ font-size: 13.5px; font-weight: 600; }
.campo input, .campo textarea{ height: 50px; border: 1px solid var(--c-linea); border-radius: 12px; padding: 0 14px; background: #fff; font-size: 16px; }
.campo textarea{ height: 80px; padding: 10px 14px; resize: vertical; }
.campo input:focus, .campo textarea:focus{ outline: none; border-color: var(--c-tinta); }
.metodo{ display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--c-linea); border-radius: 14px; padding: 13px 14px; cursor: pointer; }
.metodo input{ margin-top: 3px; accent-color: var(--c-tinta); width: 18px; height: 18px; }
.metodo b{ display: block; } .metodo span{ font-size: 13px; color: var(--c-tinta-2); }
.metodo.activo{ border-color: var(--c-tinta); }
.terminos{ font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.terminos input{ margin-top: 3px; width: 18px; height: 18px; accent-color: var(--c-tinta); }
.texto-terminos{ white-space: pre-wrap; font-size: 13.5px; background: #FAF9F6; border-radius: 12px; padding: 14px; max-height: 40vh; overflow-y: auto; }
.error{ color: #B83B2E; font-size: 13.5px; }
.listo{ text-align: center; padding: 34px 22px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.listo .ok{ width: 64px; height: 64px; border-radius: 50%; background: #E8F4EC; display: grid; place-items: center; }
.listo .ok svg{ width: 32px; height: 32px; stroke: #2E7D4F; }
.listo h2{ font-family: var(--fuente-serif); font-size: 32px; margin: 0; font-weight: 600; }
.listo ul{ text-align: left; margin: 0; padding-left: 20px; color: var(--c-tinta-2); }
.miel{ position: absolute; left: -9999px; }

.pie{ max-width: 1240px; margin: 30px auto 0; padding: 28px 18px 40px; border-top: 1px solid var(--c-linea); color: var(--c-tinta-2); font-size: 14px; display: grid; gap: 14px; }
.pie img{ height: 44px; width: auto; }
.pie a{ color: var(--c-tinta); }

@media (min-width: 700px){
  .rejilla{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
  .velo{ align-items: center; padding: 20px; }
  .hoja{ border-radius: 22px; max-height: 90vh; }
  .prod{ grid-template-columns: 1fr 1fr; }
  .prod .foto-g{ aspect-ratio: auto; min-height: 100%; }
  .prod .info{ padding: 34px 32px; }
  .hoja.estrecha{ max-width: 560px; }
  .portada{ padding-top: 48px; }
  .pie{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1024px){ .rejilla{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .marca img{ height: 48px; } }

/* Combos y promociones (2.1.0) */
.foto-combo{ display: flex; width: 100%; height: 100%; background: var(--c-foto-fondo); }
.foto-combo img{ width: 50%; height: 100%; object-fit: contain; }
.foto-combo img:only-child{ width: 100%; }
.totales .f.promo{ color: #2E7D4F; }
.linea .s.promo-linea{ color: #2E7D4F; font-weight: 600; }
.incluye{ margin: 2px 0 0; padding-left: 20px; color: var(--c-tinta-2); }
.incluye li{ margin: 2px 0; }

/* ═══════════════════════════════════════════════════════════════
   2.3.0 — Catálogo con el diseño aprobado: header oscuro, hero,
   accesos por categoría, filtros laterales, grid y Mi pedido.
   ═══════════════════════════════════════════════════════════════ */
:root{ --c-negro: #101114; --c-negro-2: #1A1C20; }
body{ background: var(--c-fondo); }

/* ---------- Header oscuro (2.3.0 → 2.8.2) ----------
   Móvil/tablet: logo a la izquierda; Buscar y Compartir a la derecha. Sin
   hamburguesa ni carrito arriba (el pedido vive en la barra inferior).
   Escritorio: además, las secciones y el botón "Mi pedido". */
.barra{
  background: var(--c-negro); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 18px; gap: 14px; backdrop-filter: none;
}
.barra.con-borde{ border-color: rgba(255,255,255,.14); }
.barra .marca img{ height: 40px; filter: brightness(1.08); }
.nav-sup{ display: none; gap: 26px; margin-left: 18px; flex: 1; }
.nav-sup a{
  color: rgba(255,255,255,.78); font-size: 14.5px; font-weight: 500; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-sup a:hover{ color: #fff; }
.nav-sup a.activo{ color: #fff; border-color: var(--c-oro); }
.icono-btn{
  background: transparent; border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.icono-btn svg{ width: 22px; height: 22px; stroke: currentColor; }
.icono-btn:hover{ background: rgba(255,255,255,.1); }
.btn-pedido{ background: var(--c-oro); border-color: var(--c-oro); color: #fff; }
.btn-pedido b{ background: rgba(0,0,0,.28); }
.barra-acciones{ display: flex; align-items: center; gap: 2px; margin-left: auto; }
.barra-acciones .btn-pedido{ display: none; margin-left: 10px; }
.btn-pedido b.oculto{ display: none; }
@media (max-width: 859px){ .solo-escritorio{ display: none !important; } }
@media (min-width: 860px){
  .nav-sup{ display: flex; }
  .barra{ padding: 12px max(18px, calc((100vw - 1240px) / 2 + 18px)); }
  .barra-acciones .btn-pedido{ display: flex; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative; background: var(--c-negro); color: #fff; overflow: hidden;
  padding: 46px 18px 40px; text-align: left;
}
.hero::after{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 82% 25%, rgba(184,134,11,.34) 0%, rgba(16,17,20,0) 60%),
              linear-gradient(180deg, rgba(16,17,20,.2) 0%, rgba(16,17,20,.92) 100%);
  pointer-events: none;
}
/* Contenido del hero alineado con el header y con la rejilla (misma columna
   de 1240 px), sin centrar cada bloque por separado: antes el buscador, con
   su max-width propio + margin auto, quedaba centrado y desalineado. */
.hero{ padding-inline: max(18px, calc((100vw - 1240px) / 2 + 18px)); }
.hero > *{ position: relative; z-index: 1; margin-inline: 0; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-categorias.claro{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); color: #fff; min-height: 48px; padding: 0 20px; }
.btn-categorias.claro:hover{ background: rgba(255,255,255,.18); border-color: var(--c-oro); }
.hero h1{
  font-family: var(--fuente-serif); font-weight: 500; font-size: clamp(34px, 7.5vw, 60px);
  line-height: 1.03; margin: 0 0 10px; max-width: 15ch;
}
.hero h1 em{ font-style: italic; color: var(--c-oro); }
.hero p{ color: rgba(255,255,255,.76); max-width: 46ch; margin: 0 0 20px; font-size: 15.5px; }
.hero .cta{
  display: inline-flex; align-items: center; gap: 10px; background: var(--c-oro); color: #fff;
  border: 0; border-radius: var(--radio-pill); padding: 14px 26px; font-weight: 600; font-size: 15px; cursor: pointer;
}
.hero .cta:hover{ background: #9C7209; }
/* Buscador de Inicio (2.8.2): pastilla compacta color marfil, integrada al
   hero, en vez de la caja blanca grande con sombra. */
.hero .buscador{ margin-top: 18px; max-width: 520px; }
.hero .buscador-hero input{
  height: 48px; border-radius: 999px; font-size: 15.5px; padding: 0 18px 0 46px;
  background: #F5F0E6; border: 1px solid rgba(212,175,82,.55); box-shadow: none;
}
.hero .buscador-hero svg{ left: 17px; top: 14px; width: 19px; height: 19px; stroke: var(--c-oro-tx); }
.hero .buscador-hero input:focus{ background: #FFFDF8; border-color: var(--c-oro); box-shadow: 0 0 0 3px rgba(212,175,82,.28); }
.hero .sellos{ display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 20px; color: rgba(255,255,255,.7); font-size: 13px; }
.hero .sellos b{ color: #fff; display: block; font-size: 13.5px; }

/* ---------- Accesos por categoría ---------- */
.categorias{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); gap: 10px;
  overflow-x: auto; padding: 20px 18px 6px; max-width: 1240px; margin-inline: auto; scrollbar-width: none;
}
.categorias::-webkit-scrollbar{ display: none; }
.cat{
  background: var(--c-superficie, #fff); border: 1px solid var(--c-linea); border-radius: var(--radio-l);
  padding: 14px 8px; text-align: center; cursor: pointer; font-size: 13px; font-weight: 550; color: var(--c-tinta);
  display: grid; gap: 8px; justify-items: center; transition: border-color .15s ease, transform .15s ease;
}
.cat:hover{ border-color: var(--c-oro); transform: translateY(-1px); }
.cat.activo{ background: var(--c-tinta); color: #fff; border-color: var(--c-tinta); }
.cat .ico{
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--oro-suave); color: var(--c-oro-tx); font-size: 17px;
}
.cat.activo .ico{ background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Cuerpo con filtros ---------- */
.cuerpo{ max-width: 1240px; margin: 0 auto; padding: 10px 18px 30px; display: grid; gap: 24px; }
.filtros-lateral{ display: none; }
@media (min-width: 1000px){
  .cuerpo{ grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
  .filtros-lateral{ display: block; position: sticky; top: 86px; }
}
.filtros-hoja-cab, .filtros-ver, .filtros-velo{ display: none; }
@media (max-width: 999px){
  .btn-filtrar{ display: inline-flex; }
  /* La hoja es un flex column con 3 franjas: cabecera y botón "Ver N
     resultados" de tamaño fijo, y el contenido (.filtros-panel) como única
     zona con scroll entre ambas. Antes el botón estaba "sticky" DENTRO del
     mismo contenedor con scroll que el contenido: al no caber todo en 86vh,
     quedaba pegado al fondo desde el primer render (no solo al llegar al
     final) y tapaba cualquier aviso dinámico que cayera ahí sin haberse
     dado cuenta (p. ej. el de precio inválido, 2.9.1) — un padding no lo
     arregla porque el botón se "pega" igual de arriba. Con el botón FUERA
     del área de scroll, nunca se superpone con el contenido (2.9.1).
  */
  .filtros-lateral.abierto{
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
    max-height: 86vh; overflow: hidden;
    background: var(--c-fondo); border-radius: 20px 20px 0 0; padding: 0 18px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 44px rgba(16,17,20,.22); animation: subir .22s ease-out;
  }
  .filtros-lateral.abierto .filtros-hoja-cab{
    display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
    background: var(--c-fondo); padding: 14px 0 10px; font-size: 17px; border-bottom: 1px solid var(--c-linea);
  }
  .filtros-lateral.abierto .filtros-cab{ margin-top: 12px; }
  .filtros-lateral.abierto .filtros-panel{ flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .filtros-lateral.abierto .filtros-ver{ display: block; flex: 0 0 auto; width: 100%; margin: 12px 0; box-shadow: 0 -8px 16px var(--c-fondo); }
  .filtros-velo{ display: block; position: fixed; inset: 0; z-index: 95; background: rgba(16,17,20,.45); }
}
.filtros-lateral h3{ font-size: 15px; margin: 0 0 4px; font-weight: 650; }
.filtros-lateral .bloque{ border-top: 1px solid var(--c-linea); padding: 14px 0; }
.filtros-lateral .bloque:first-of-type{ border-top: 0; }
.filtros-lateral .titulo{ font-size: 13px; font-weight: 650; margin-bottom: 8px; display: flex; justify-content: space-between; }
.filtros-lateral label{ display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; cursor: pointer; color: var(--c-tinta-2); }
.filtros-lateral label:hover{ color: var(--c-tinta); }
.filtros-lateral input{ accent-color: var(--c-oro); width: 16px; height: 16px; }
.filtros-lateral .limpiar{ background: none; border: 0; color: var(--c-oro-tx); font-size: 12.5px; cursor: pointer; }

/* ---------- Grid de producto, escritorio ---------- */
.rejilla{ gap: 24px 18px; }
.tarjeta .foto{ border-radius: var(--radio-l); }
.tarjeta .nombre-t{ font-size: 19px; }

/* ---------- Mi pedido (drawer) ---------- */
.velo.lateral{ align-items: stretch; justify-content: flex-end; }
.velo.lateral .hoja{
  max-width: 420px; height: 100%; border-radius: 0; animation: entrarLateral .22s ease-out; max-height: none;
}
@keyframes entrarLateral{ from{ transform: translateX(24px); opacity: .6; } to{ transform: none; opacity: 1; } }
@media (max-width: 700px){ .velo.lateral{ align-items: flex-end; } .velo.lateral .hoja{ max-width: 100%; height: auto; max-height: 92vh; border-radius: 22px 22px 0 0; } }

/* ---------- Navegación inferior (móvil) ---------- */
.nav-inferior{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--c-linea); backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-inferior{ grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; }
.nav-inferior a, .nav-inferior button{
  display: grid; justify-items: center; align-content: center; gap: 3px; padding: 8px 4px 7px; font: inherit; font-size: 11px;
  color: var(--c-tinta-2); text-decoration: none; min-height: 54px; background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-inferior a.activo{ color: var(--c-oro-tx); font-weight: 600; }
.nav-inferior .ico-pedido{ position: relative; display: block; line-height: 0; }
.nav-inferior .ico-pedido b{
  position: absolute; top: -5px; right: -11px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--c-oro); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.nav-inferior svg{ width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
@media (min-width: 860px){ .nav-inferior{ display: none; } }
@media (max-width: 859px){ main{ padding-bottom: calc(62px + env(safe-area-inset-bottom)); } .pie{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ---------- Aviso de slug inexistente ---------- */
/* 2.9.2: antes vivía enterrado bajo el hero, los combos y los decants (casi
   nadie lo notaba); ahora es lo primero que se pinta en #app, inmediatamente
   debajo del header fijo y antes del hero — el catálogo completo sigue
   debajo como respaldo, sin quedar aislado. Mismo ancho de columna (1240px)
   y mismo gutter (18px) que el resto de las secciones de nivel superior
   (.categorias, .hero), no el envoltorio .cuerpo (pensado para el grid con
   filtros, no para una sola pieza suelta arriba de todo). */
.aviso-404-cima{ max-width: 1240px; margin-inline: auto; padding: 14px 18px 0; }
.aviso-404{
  background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: #6B4E12;
  border-radius: var(--radio); padding: 16px 18px; font-size: 14px;
}
.aviso-404 h1{ font-family: var(--fuente-serif); font-size: clamp(19px, 4vw, 24px); font-weight: 600; margin: 0 0 6px; color: var(--c-tinta); }
.aviso-404 p{ margin: 0 0 10px; }
.aviso-404 .enlace{ color: var(--c-oro-tx); min-height: auto; }
/* ---------- Sección pública de decants ---------- */
.hero-decants{
  background: linear-gradient(135deg, #14161A 0%, #24262C 100%); color: #fff; border-radius: var(--radio-xl);
  padding: 30px 24px; margin: 6px 0 4px; display: grid; gap: 12px;
}
.hero-decants .kicker{ letter-spacing: .22em; font-size: 11px; text-transform: uppercase; color: var(--c-oro); }
.hero-decants h2{ font-family: var(--fuente-serif); font-size: clamp(28px, 5vw, 42px); margin: 0; font-weight: 500; }
.hero-decants p{ color: rgba(255,255,255,.72); margin: 0; max-width: 52ch; }
.hero-decants .ventajas{ display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.8); margin-top: 4px; }
@media (max-width: 859px){
  .barra{ padding: 8px 10px 8px 16px; }
  .hero{ padding: 28px 18px 24px; }
  .categorias{ grid-auto-columns: minmax(82px, 1fr); }
}
/* Las sugerencias deben quedar por encima del hero y del header fijo. */
.hero .buscador{ position: relative; z-index: 5; }
.hero .sellos{ position: relative; z-index: 1; }
.sugerencias{ z-index: 60; }

/* ---------- Marca oficial en el header (2.3.2) ---------- */
.barra .marca{ display: flex; align-items: center; }
.barra .marca img{ display: block; }
.barra .marca .logo-emblema{ display: block; height: 34px; width: auto; }
.barra .marca .logo-ancho{ display: none; height: 40px; width: auto; }
@media (min-width: 860px){
  .barra .marca .logo-emblema{ display: none; }
  .barra .marca .logo-ancho{ display: block; }
}

/* ---------- Hero con fotografía configurable (2.3.2 → 2.7.3) ----------
   El titular, el subtítulo, el CTA y los sellos van en HTML/CSS: la imagen es
   solo fondo. Si no hay fotografía, queda el degradado de marca. Desde 2.7.3,
   escritorio y móvil pueden llevar una foto distinta (variables --hero-d y
   --hero-m puestas en línea); sin foto propia de móvil, --hero-m ya llega con
   el valor de --hero-d desde JS, así que el fallback no depende del CSS. */
.hero.con-foto{ background-image: var(--hero-d); background-size: cover; background-position: center; }
.hero.con-foto::after{
  background: linear-gradient(100deg, rgba(16,17,20,.93) 0%, rgba(16,17,20,.72) 46%, rgba(16,17,20,.34) 100%),
              radial-gradient(120% 90% at 84% 22%, rgba(184,134,11,.30) 0%, rgba(16,17,20,0) 62%);
}
@media (max-width: 640px){ .hero.con-foto{ background-image: var(--hero-m); } }
/* Hero de Decants con la misma lógica de foto configurable. */
.hero-decants{ position: relative; overflow: hidden; }
.hero-decants.con-foto{ background-image: var(--hero-d); background-size: cover; background-position: center; }
@media (max-width: 640px){ .hero-decants.con-foto{ background-image: var(--hero-m); } }
.hero-decants.con-foto::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(20,22,26,.93) 0%, rgba(20,22,26,.75) 55%, rgba(20,22,26,.4) 100%);
}
.hero-decants.con-foto > *{ position: relative; z-index: 1; }

/* ---------- Landings de categoría y marca (2.4.0) ---------- */
.cuerpo.seccion-landing{ grid-template-columns: 1fr; padding-top: 22px; }
.ancho{ max-width: 1240px; margin-inline: auto; width: 100%; }
.migas{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--c-tinta-2); margin-bottom: 12px; }
.migas a{ color: var(--c-tinta-2); text-decoration: none; }
.migas a:hover{ color: var(--c-oro-tx); text-decoration: underline; }
/* 2.9.0: el separador usaba --c-linea (contraste ~1.2:1 sobre crema, casi invisible).
   --c-tinta-3 da ~3.4:1: se lee, y sigue por debajo del texto (--c-tinta-2). */
.migas .sep{ color: var(--c-tinta-3); }
@media (max-width: 640px){
  /* Producto en móvil: mostrar solo "Perfumes › Categoría › Marca" — la marca
     y el nombre completos ya se ven en el título, justo debajo. */
  /* Este ".migas-producto" reemplaza a la regla general de abajo (que ya
     truncaba a los ultimos 3, pero sumadas las dos dejaban un solo item
     visible): aqui se decide todo el recorte, de una sola vez. Oculta
     "Inicio" (primer item) y "Nombre del producto" (ultimo, ya repetido por
     el titulo) y dejarlo en "Perfumes › Categoría › Marca". */
  .migas-producto > *:first-child, .migas-producto > *:nth-child(2),
  .migas-producto > *:nth-last-child(-n+2){ display: none; }
}
@media (max-width: 700px){ .migas:not(.migas-producto) > *:not(:nth-last-child(-n+3)){ display: none; } }
.cabecera-landing{ margin-bottom: 18px; }
.cabecera-landing h1{ font-family: var(--fuente-serif); font-size: clamp(28px, 5vw, 42px); margin: 0 0 6px; font-weight: 600; }
.cabecera-landing p{ margin: 0; color: var(--c-tinta-2); max-width: 60ch; }
.marcas-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.marca-card{
  display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--c-linea);
  border-radius: var(--radio-l); background: #fff; text-decoration: none; color: var(--c-tinta); min-height: 64px;
}
.marca-card:hover{ border-color: var(--c-oro); }
.marca-card img{ width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: var(--c-foto-fondo); border: 1px solid var(--c-linea); }
.marca-card b{ display: block; font-size: 14px; }
.marca-card span{ font-size: 12px; color: var(--c-tinta-2); }
.barra-listado{ display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.buscador.chico{ max-width: 380px; flex: 1; }
.buscador.chico input{ height: 44px; font-size: 15px; border: 1px solid var(--c-linea); border-radius: 999px; padding-left: 46px; }
.buscador.chico input:hover{ border-color: var(--borde-fuerte, #D8D2C6); }
.buscador.chico svg{ top: 13px; }


/* ---------- 2.4.1 · El buscador no puede quedar recortado ----------
   El hero recorta su contenido (overflow:hidden) para el degradado, así que el
   desplegable de sugerencias NO vive dentro: se posiciona en el documento. */
.hero{ overflow: visible; }
.hero::after{ border-radius: inherit; }
.sugerencias.flotante{
  position: fixed; z-index: 80; margin: 0; max-height: min(58vh, 460px); overflow-y: auto;
  box-shadow: var(--sombra-flotante, 0 18px 44px rgba(0,0,0,.24)); border-radius: var(--radio-l);
  background: #fff; border: 1px solid var(--c-linea);
}
.sugerencias.flotante .sug{ min-height: 56px; }
@media (max-width: 700px){ .sugerencias.flotante{ max-height: 52vh; } }


/* ---------- 2.4.1 · Categorías descubribles sin scroll horizontal ---------- */
.categorias{
  display: grid; grid-auto-flow: row; overflow: visible;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px;
  padding: 20px 18px 6px;
}
@media (max-width: 520px){
  .categorias{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 7 accesos (con Decants): el último ocupa la fila completa en vez de quedar huérfano (2.8.2). */
  .categorias > :last-child:nth-child(3n+1){ grid-column: 1 / -1; }
}
/* Al saltar al listado, que el header fijo no tape el título (2.8.2). */
#todo{ scroll-margin-top: 76px; }

/* Filtros dependientes: una opción sin resultados no se ofrece */
.filtros-lateral label.sin-resultados{ opacity: .45; }
.filtros-lateral .conteo{ color: var(--c-tinta-2); font-size: 12px; }
.filtros-lateral .resumen{ font-size: 13px; color: var(--c-tinta-2); margin-top: 6px; }

/* Confirmación dentro del pedido (2.4.1) */
.confirmar-capa{ position: fixed; inset: 0; background: rgba(16,17,20,.5); display: grid; place-items: center; z-index: 90; padding: 18px; }
.confirmar{ background: #fff; border-radius: var(--radio-l); padding: 20px; max-width: 360px; width: 100%; box-shadow: var(--sombra-flotante, 0 18px 44px rgba(0,0,0,.25)); }
.confirmar h3{ margin: 0 0 6px; font-size: 18px; }
.confirmar p{ margin: 0 0 16px; color: var(--c-tinta-2); font-size: 14px; }
.confirmar .acciones{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 2.8.1: ".enlace" no tenia una regla base -- un <button class="enlace">
   sin ella se ve con el estilo nativo del navegador (gris, con borde),
   sobre todo visible en "Ver todas las marcas" y "Ver todos los perfumes"
   dentro de "Explorar el catalogo". Ahora tiene una apariencia propia,
   coherente con la marca, en todos los lugares donde se usa. */
.enlace{
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0;
  color: var(--c-oro-tx); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none;
  cursor: pointer; min-height: 36px;
}
.enlace:hover{ text-decoration: underline; }
.enlace.vaciar{ display: block; margin: 10px auto 0; color: var(--c-tinta-2); font-size: 13px; text-decoration: underline; font-weight: 400; min-height: 40px; }

/* ---------- Compartir (2.4.2) ---------- */
.compartir{
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radio-pill);
  border: 1px solid var(--c-linea); background: #fff; color: var(--c-tinta);
  padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.compartir:hover{ border-color: var(--c-oro); color: var(--c-oro-tx); }
.compartir svg{ width: 18px; height: 18px; stroke: currentColor; }
.compartir.claro{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); color: #fff; backdrop-filter: blur(4px); }
.compartir.claro:hover{ background: rgba(255,255,255,.2); color: #fff; }
.acciones-hero{ margin-top: 18px; position: relative; z-index: 2; }
.acciones-ficha{ margin-top: 12px; }
.fila-titulo{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 520px){
  .compartir span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compartir{ padding: 10px 12px; }
}
.aviso-copiado{
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 10px); z-index: 100;
  background: var(--c-tinta); color: #fff; padding: 11px 18px; border-radius: var(--radio-pill);
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.aviso-copiado.visible{ opacity: 1; transform: translate(-50%, 0); }


/* ---------- Búsqueda pública: siempre legible y por encima (2.7.0) ---------- */
.buscador{ position: relative; z-index: 6; }
.buscador input{
  color: var(--c-tinta); -webkit-text-fill-color: var(--c-tinta); caret-color: var(--c-tinta);
  background: #fff; line-height: 1.3;
}
.hero .buscador input{ color: var(--c-tinta); -webkit-text-fill-color: var(--c-tinta); }
.buscador input::placeholder{ color: #8B8780; opacity: 1; }
.buscador input:focus{ border-color: var(--c-oro); box-shadow: 0 0 0 3px rgba(184,134,11,.18); }
.buscador svg{ pointer-events: none; }

.tenue{ color: var(--c-tinta-2); font-size: 12.5px; font-weight: 400; }

/* ---------- Panel "Ver todas las categorías" (2.7.0 → 2.8.1) ----------
   Rediseñado para que no se lea como HTML sin estilar: cada categoría vive en
   su propia tarjeta, los contadores son una pastilla en vez de texto suelto,
   y "Ver todas las marcas"/"Ver todos los perfumes" usan la apariencia de
   marca (.enlace), no el botón gris nativo del navegador. */
.panel-cat{ position: fixed; inset: 0; background: rgba(16,17,20,.6); z-index: 90; display: none; backdrop-filter: blur(2px); }
.panel-cat.abierto{ display: block; }
.panel-cat-interior{
  background: var(--c-fondo); max-width: 1120px; margin: 0 auto; border-radius: 0 0 var(--radio-l) var(--radio-l);
  padding: 22px clamp(16px, 4vw, 34px) 26px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(16,17,20,.28);
}
.panel-cat-cab{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-cat-cab h2{ font-family: var(--fuente-serif); font-size: 25px; margin: 0; }
.cerrar-panel, .cerrar-filtros{
  border: 1px solid var(--c-linea); background: #fff; width: 38px; height: 38px; border-radius: 999px;
  cursor: pointer; font-size: 15px; color: var(--c-tinta-2); display: grid; place-items: center;
}
.cerrar-panel:hover, .cerrar-filtros:hover{ border-color: var(--c-oro); color: var(--c-oro-tx); }
.panel-cat-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.panel-cat-col{ background: #fff; border: 1px solid var(--c-linea); border-radius: var(--radio-l); padding: 16px 16px 14px; }
.panel-cat-col ul{ list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 1px; }
.panel-cat-col li a{
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 9px; border-radius: 9px;
  text-decoration: none; color: var(--c-tinta); font-size: 14.5px; font-weight: 500; min-height: 40px; align-items: center;
}
.panel-cat-col li a:hover{ background: var(--c-foto); }
.panel-cat-col li a .tenue{ background: var(--c-foto); border-radius: 999px; padding: 2px 8px; font-size: 11.5px; }
.panel-cat-col li a:hover .tenue{ background: #fff; }
.panel-cat-col li a:hover{ background: var(--c-foto); }
.panel-cat-titulo{ display: flex; gap: 8px; align-items: baseline; font-weight: 700; text-decoration: none; color: var(--c-tinta); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.panel-cat-col .enlace{ display: block; margin-top: 4px; font-size: 13.5px; }
.panel-cat-pie{ display: flex; justify-content: center; margin-top: 22px; }
.cta-catalogo{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 30px;
  border-radius: 999px; background: var(--c-tinta); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  width: min(100%, 340px); transition: background .15s ease;
}
.cta-catalogo:hover{ background: var(--c-oro-hover, #9C7209); }
.cta-catalogo span{ color: var(--c-oro-claro, #D4AF52); font-size: 17px; }
.panel-cat-decants p{ margin: 8px 0 6px; font-size: 13.5px; }
@media (max-width: 700px){
  .panel-cat-interior{ border-radius: 0; max-height: 100vh; min-height: 100vh; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .panel-cat-grid{ grid-template-columns: 1fr; gap: 16px; }
}
.btn-categorias{
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radio-pill); cursor: pointer;
  border: 1px solid var(--c-linea); background: #fff; color: var(--c-tinta); padding: 9px 16px; font-size: 14px; font-weight: 600; min-height: 44px;
}
.btn-categorias:hover{ border-color: var(--c-oro); }

/* Filtro de precio (2.7.0) */
.precio-filtro{ gap: 8px; }
.precio-filtro label{ display: grid; gap: 4px; flex: 1; color: var(--c-tinta-2); }
.precio-filtro input{ width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--c-linea); padding: 0 10px; font-size: 15px; }
.precio-filtro input[aria-invalid="true"]{ border-color: var(--peligro); }
.precio-error{ color: var(--peligro); font-weight: 600; }

/* ---------- Filtros dependientes y progresivos (2.7.1) ---------- */
.filtros-cab{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.chips-activos{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-activo{
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-oro); background: rgba(184,134,11,.08);
  color: var(--c-oro-tx); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; min-height: 34px;
}
.chip-activo:hover{ background: rgba(184,134,11,.16); }
.opciones-faceta{ display: grid; gap: 2px; }
.opciones-faceta label{ display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; font-size: 14px; cursor: pointer; min-height: 38px; }
.opciones-faceta label:hover{ background: var(--c-foto); }
.opciones-faceta label.elegida{ font-weight: 600; }
.opciones-faceta .conteo{ margin-left: auto; color: var(--c-tinta-2); font-size: 12px; }
.btn-mas-filtros{
  width: 100%; margin: 6px 0 12px; border: 1px dashed var(--c-linea); background: none; border-radius: 12px;
  padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--c-tinta); min-height: 44px;
}
.btn-mas-filtros:hover{ border-color: var(--c-oro); color: var(--c-oro-tx); }
.filtros-extra{ border-top: 1px solid var(--c-linea); padding-top: 10px; }
@media (max-width: 899px){
  .filtros-panel{ padding-bottom: 10px; }
  .opciones-faceta label{ min-height: 44px; }
}

/* ---------- Página individual de producto (2.7.2) ---------- */
.cuerpo.pagina{ grid-template-columns: 1fr; padding-top: 20px; }
.pagina-producto{
  display: grid; grid-template-columns: 1fr; gap: 22px; background: #fff;
  border: 1px solid var(--c-linea); border-radius: var(--radio-l); padding: clamp(16px, 3vw, 28px); margin-bottom: 26px;
}
/* La ficha lleva también la clase .hoja (de los modales), que la convertía en
   un contenedor con scroll propio (max-height 94vh, overflow auto). Por eso la
   galería "sticky" quedaba desplazada 84 px hacia abajo dentro de la tarjeta y
   el ancho se limitaba a 980 px. Una página no es una hoja: sin scroll interno. */
.hoja.pagina-producto{ max-width: none; max-height: none; overflow: visible; animation: none; border-radius: var(--radio-l); }
.acciones-producto{ flex-wrap: wrap; }
.acciones-producto .boton{ white-space: nowrap; padding: 0 18px; flex: 1 1 180px; }
@media (max-width: 420px){ .acciones-producto .boton{ padding: 0 12px; font-size: 14.5px; } }
/* Tablet (≥700 px) ya usa dos columnas: en una sola, la foto ocupaba toda la pantalla. */
@media (min-width: 700px){ .pagina-producto{ grid-template-columns: minmax(260px, 45%) 1fr; gap: clamp(22px, 3vw, 34px); align-items: start; } }
.pagina-producto .galeria{ position: sticky; top: 84px; }
@media (max-width: 699px){ .pagina-producto .galeria{ position: static; } }
.pagina-producto .foto-g{
  aspect-ratio: 1; border-radius: var(--radio-l); background: var(--c-foto-fondo); border: 1px solid var(--c-linea);
  display: grid; place-items: center; overflow: hidden;
}
.pagina-producto .foto-g img{ width: 100%; height: 100%; object-fit: contain; }
.miniaturas{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mini{ width: 64px; height: 64px; border-radius: 10px; border: 1.5px solid var(--c-linea); background: var(--c-foto-fondo); padding: 0; overflow: hidden; cursor: pointer; }
.mini.activa{ border-color: var(--c-oro); }
.mini img{ width: 100%; height: 100%; object-fit: contain; }
.pagina-producto .info h1{ font-family: var(--fuente-serif); font-size: clamp(26px, 4vw, 38px); margin: 2px 0 6px; font-weight: 600; }
.pagina-producto .info .m{ text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; color: var(--c-tinta-2); }
.pagina-producto .precio{ font-size: 28px; font-weight: 700; margin: 14px 0 10px; }
.pagina-producto .precio s{ font-size: 18px; font-weight: 500; color: var(--c-tinta-2); margin-left: 10px; }
.pagina-producto .disp{ font-size: 14px; font-weight: 600; margin: 10px 0 16px; }
.disp.estado-disponible{ color: var(--ok, #2E7D5B); }
.disp.estado-ultima{ color: #A8620E; }
.disp.estado-agotado{ color: var(--c-tinta-2); }
.acciones-producto{ gap: 10px; flex-wrap: wrap; align-items: center; }
.acciones-producto .boton{ min-width: auto; }
.bloque-ficha{ margin-top: 22px; }
.bloque-ficha h2{ font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-tinta-2); margin: 0 0 6px; }
.bloque-ficha p{ margin: 0; line-height: 1.55; }
.datos-producto{ margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--c-linea); }
.par-dato{ display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--c-linea); font-size: 14.5px; }
.par-dato dt{ color: var(--c-tinta-2); }
.par-dato dd{ margin: 0; text-align: right; font-weight: 600; }
.etiquetas-producto{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip-etiqueta{ border: 1px solid var(--c-linea); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--c-tinta-2); }
.relacionados{ margin-top: 10px; }

/* ---------- Contacto (2.8.3) ----------
   Hoja inferior en móvil/tablet, tarjeta centrada en escritorio. Datos reales
   del panel; cerrar con X, tocando fuera, Escape o Atrás. */
.hoja.hoja-contacto{ max-width: 440px; padding-bottom: env(safe-area-inset-bottom); }
.contacto{ padding: 22px 20px 20px; }
.contacto h2{ margin: 0 44px 4px 0; font-size: 22px; }
.contacto-sub{ margin: 0 0 16px; color: var(--c-tinta-2); font-size: 14px; line-height: 1.45; }
.contacto svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.contacto-wa{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border-radius: 14px; text-decoration: none; }
.contacto-tel{ text-align: center; font-size: 13px; color: var(--c-tinta-2); margin: 7px 0 4px; font-variant-numeric: tabular-nums; }
.contacto-lista{ margin-top: 14px; border: 1px solid var(--c-linea); border-radius: 14px; overflow: hidden; }
.contacto-fila{ display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--c-tinta); text-decoration: none; min-height: 52px; }
.contacto-fila + .contacto-fila{ border-top: 1px solid var(--c-linea); }
.contacto-fila:hover{ background: var(--c-fondo); }
.contacto .ico{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #F5F0E6; color: var(--c-oro-tx); flex-shrink: 0; }
.contacto-fila > span:nth-child(2), .contacto-info > div > span:nth-child(2){ display: grid; flex: 1; min-width: 0; }
.contacto b{ font-size: 14.5px; font-weight: 650; }
.contacto small{ font-size: 12.5px; color: var(--c-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacto-fila .flecha{ color: var(--c-tinta-2); font-size: 20px; }
.contacto-info{ display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-linea); }
.contacto-info > div{ display: flex; align-items: center; gap: 12px; }
.contacto-info .ico{ background: var(--c-fondo); color: var(--c-tinta-2); }
/* Ficha pública (2.8.3): nombre comercial + concentración, tamaño junto al
   precio y Temporada/Ocasión/Notas como pastillas dentro de la misma tabla. */
.pagina-producto h1 .conc{ font-family: var(--f-ui, system-ui, sans-serif); font-size: .5em; font-weight: 600; letter-spacing: .04em; color: var(--c-tinta-2); vertical-align: .3em; white-space: nowrap; }
.pagina-producto .precio .tam-precio{ display: inline-block; margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--c-tinta-2); background: var(--c-fondo); border: 1px solid var(--c-linea); border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
.datos-producto .chips-dato{ display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* Componente único compartido por Temporada, Ocasión y Notas (2.8.4): las
   tres filas de datos-producto usan exactamente el mismo tono, borde, fondo,
   radio, padding, tipografía y separación a través de .chip-dato. */
.chip-dato{ margin: 0; font-weight: 500; color: var(--c-tinta); }
.contacto-info + .contacto-sub{ margin: 14px 0 0; }

/* ═══════════════════════════════════════════════════════════════
   2.9.0 — Selector de idioma ES | EN (header) y modo mantenimiento.
   ═══════════════════════════════════════════════════════════════ */
.idioma{ display: inline-flex; align-items: center; height: 30px; padding: 2px; margin-right: 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; }
.idioma button{ height: 24px; min-width: 28px; padding: 0 7px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.72);
  font: 600 11.5px/1 var(--fuente-ui, system-ui, sans-serif); letter-spacing: .06em; cursor: pointer; }
.idioma button:hover{ color: #fff; }
.idioma button.activo{ background: rgba(255,255,255,.16); color: #fff; }
@media (max-width: 380px){ .idioma{ margin-right: 0; } .idioma button{ min-width: 26px; padding: 0 6px; } }

body.en-mantenimiento #btnBuscar, body.en-mantenimiento #btnCompartir, body.en-mantenimiento .barra-acciones .btn-pedido,
body.en-mantenimiento .nav-inferior, body.en-mantenimiento .nav-sup, body.en-mantenimiento .pie{ display: none !important; }
body.en-mantenimiento main{ padding-bottom: 0; }
.mantenimiento{ min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 36px 20px calc(36px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto; }
.mant-logo{ width: 118px; height: auto; margin-bottom: 18px; }
.mantenimiento h1{ font-family: var(--fuente-serif); font-weight: 600; font-size: clamp(30px, 7vw, 40px); line-height: 1.1; margin: 0 0 10px; }
.mant-mensaje{ color: var(--c-tinta-2); font-size: 15.5px; line-height: 1.55; margin: 0 0 22px; white-space: pre-line; }
.mant-contacto{ width: 100%; padding: 0; text-align: left; }