/* ============================================================
   ESSENZA PERFUMERY — Sitio público v2 "Editorial completa"
   Porcelana #FFFFFF · Tinta #1A1A1A · Oxblood #6E1423 · Ámbar #8A5A19
   Bodoni Moda (display) + Hanken Grotesk (UI) · Mobile-first
   ============================================================ */

:root {
  color-scheme: light only;
  --paper: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #55524E;
  --hairline: #1A1A1A;
  --hairline-soft: #E4E1DC;
  --oxblood: #6E1423;
  --amber: #8A5A19;
  --tint-arabe: #F3E7D3;
  --tint-disenador: #EFDFE0;
  --tint-nicho: #E4E7E2;
  --tint-agotado: #F2F0ED;
  --whatsapp: #25D366;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: #FFFFFF; }

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px; }

/* ---------------- Topbar + navegación ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.logo {
  font-family: 'Bodoni Moda', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.logo span {
  display: block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--oxblood);
  margin-top: 3px;
}

.nav-desktop { display: none; gap: 22px; }
.nav-link {
  background: none;
  border: none;
  /* Ahora son <a href> reales: sin esto heredarían el subrayado y el
     azul de enlace y la barra se vería como un índice de Wikipedia. */
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 1px 8px;
  transition: color .15s, border-color .15s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--oxblood); }

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

.cart-toggle {
  background: none;
  border: none;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding: 2px 1px 4px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  transition: color .15s, border-color .15s;
}
.cart-toggle:hover { color: var(--oxblood); border-color: var(--oxblood); }
.cart-count {
  font-family: 'Bodoni Moda', serif;
  font-size: 14px;
  color: var(--oxblood);
  transition: transform .2s;
}
.cart-count.pulso { animation: pulso .35s ease; }
@keyframes pulso { 40% { transform: scale(1.45); } }

.menu-btn {
  background: none;
  border: none;
  width: 30px;
  height: 24px;
  position: relative;
}
.menu-btn span, .menu-btn::before, .menu-btn::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s, opacity .2s, top .25s;
}
.menu-btn::before { top: 4px; }
.menu-btn span { top: 11px; }
.menu-btn::after { top: 18px; }
body.menu-open .menu-btn::before { top: 11px; transform: rotate(45deg); }
body.menu-open .menu-btn span { opacity: 0; }
body.menu-open .menu-btn::after { top: 11px; transform: rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  z-index: 55;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  display: none;
  flex-direction: column;
  padding: 8px 18px 18px;
}
body.menu-open .nav-mobile { display: flex; animation: bajar .22s ease; }
@keyframes bajar { from { opacity: 0; transform: translateY(-8px); } }
.nav-mobile .nav-link { display: block; text-align: left; padding: 13px 2px; border-bottom: 1px solid var(--hairline-soft); font-size: 13px; }
.nav-mobile .nav-link.active { border-bottom-color: var(--oxblood); }

@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .menu-btn { display: none; }
}

/* ---------------- Vistas ---------------- */
.view { display: none; background: var(--paper); }
.view.active { display: block; animation: vista .3s ease; }
@keyframes vista { from { opacity: 0; transform: translateY(8px); } }

/* ---------------- Revelado al scroll ---------------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------------- Hero ---------------- */
.hero {
  background: var(--paper);
  max-width: 1100px;
  margin: 0 auto;
  padding: 58px 18px 50px;
}
.hero-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--amber);
  margin-bottom: 16px;
}
.hero h1 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(60px, 15vw, 128px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 0.9;
  color: var(--ink);
}
.hero-tagline {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(18px, 4.5vw, 26px);
  color: var(--ink);
  margin-top: 20px;
  max-width: 540px;
}
.hero-ctas { margin-top: 28px; display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; }

.enlace {
  display: inline-block;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding: 0 0 3px;
  transition: opacity .15s;
}
.enlace:hover { opacity: .65; }
.enlace.ink { color: var(--ink); border-color: var(--ink); }

/* ---------------- Cinta editorial (marquee) ---------------- */
.cinta {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 11px 0;
}
.cinta-pista { display: flex; width: max-content; animation: cinta 26s linear infinite; }
.cinta span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3.5px;
  white-space: nowrap;
  padding-right: 12px;
}
.cinta i { font-style: normal; color: var(--tint-arabe); padding-right: 12px; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------------- Secciones de inicio ---------------- */
.seccion { padding: 54px 0; }
.seccion-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.seccion h2 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 500;
  color: var(--ink);
}
.seccion-sub { color: var(--ink-soft); font-size: 13px; margin-top: 6px; }

/* Dos actos */
.actos { display: grid; gap: 16px; }
@media (min-width: 720px) { .actos { grid-template-columns: 1fr 1fr; gap: 22px; } }

.acto {
  position: relative;
  padding: 26px 24px 24px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
  border: none;
  text-align: left;
  transition: transform .2s ease;
}
.acto:hover { transform: translateY(-3px); }
.acto.arabe { background: var(--tint-arabe); }
.acto.disenador { background: var(--tint-disenador); }
.acto-palabra {
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(64px, 14vw, 110px);
  line-height: 1;
  opacity: .35;
}
.acto.arabe .acto-palabra { color: var(--amber); }
.acto.disenador .acto-palabra { color: var(--oxblood); }
.acto-num { font-size: 10px; letter-spacing: 3px; font-weight: 500; }
.acto.arabe .acto-num { color: var(--amber); }
.acto.disenador .acto-num { color: var(--oxblood); }
.acto h3 { font-family: 'Bodoni Moda', serif; font-size: 26px; font-weight: 500; color: var(--ink); margin: 6px 0 8px; }
.acto p { font-size: 13.5px; color: var(--ink-soft); max-width: 40ch; margin-bottom: 14px; }

/* Confianza */
.confianza { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
@media (min-width: 720px) { .confianza { grid-template-columns: repeat(3, 1fr); } }
.confia {
  padding: 24px 4px 26px;
  border-bottom: 1px solid var(--hairline-soft);
}
@media (min-width: 720px) {
  .confia { border-bottom: none; border-right: 1px solid var(--hairline-soft); padding: 28px 22px; }
  .confia:last-child { border-right: none; }
}
.confia-num { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 20px; color: var(--oxblood); }
.confia h4 { font-family: 'Bodoni Moda', serif; font-size: 18px; font-weight: 500; margin: 8px 0 6px; color: var(--ink); }
.confia p { font-size: 13px; color: var(--ink-soft); }

/* Banda CTA */
.banda {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 52px 18px;
}
.banda h2 { font-family: 'Bodoni Moda', serif; font-size: clamp(24px, 6vw, 34px); font-weight: 500; max-width: 620px; margin: 0 auto; }
.banda p { color: rgba(255,255,255,.7); font-size: 13.5px; margin: 12px auto 22px; max-width: 520px; }
.btn-wa-linea {
  display: inline-block;
  background: var(--whatsapp);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: 2px;
  transition: filter .15s;
}
.btn-wa-linea:hover { filter: brightness(.94); }

/* ---------------- Tienda ---------------- */
.tienda-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.tienda-fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.buscador {
  flex: 1;
  min-width: 200px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--hairline-soft);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.buscador:focus { border-color: var(--ink); }

.orden {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12.5px;
  padding: 11px 12px;
  border: 1px solid var(--hairline-soft);
  background: var(--paper);
  color: var(--ink);
  outline: none;
}

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 20px;
  transition: all .15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.activo { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.activo.chip-arabe { background: var(--amber); border-color: var(--amber); }
.chip.activo.chip-disenador { background: var(--oxblood); border-color: var(--oxblood); }
.chip.activo.chip-nicho { background: #3E4A42; border-color: #3E4A42; }
.chip.activo.chip-fav { background: var(--oxblood); border-color: var(--oxblood); }

.tienda-count { font-size: 11.5px; color: var(--ink-soft); letter-spacing: .4px; }

/* Grid de productos */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 14px;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; } }
@media (min-width: 960px)  { .grid { grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } }

.producto { display: flex; flex-direction: column; }

.producto-visual {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  position: relative;
  transition: transform .22s ease;
}
.producto:hover .producto-visual { transform: translateY(-4px); }
.producto-visual.cat-arabe { background: var(--tint-arabe); }
.producto-visual.cat-disenador { background: var(--tint-disenador); }
.producto-visual.cat-nicho { background: var(--tint-nicho); }
.producto-visual.agotado { background: var(--tint-agotado); }

.producto-palabra {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(22px, 6vw, 32px);
  line-height: 1;
}
.cat-arabe .producto-palabra { color: var(--amber); }
.cat-disenador .producto-palabra { color: var(--oxblood); }
.agotado .producto-palabra { color: #A8A49E; }

.producto-agotado-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.oferta-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--oxblood);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  padding: 5px 8px;
}

.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, .82);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, color .15s;
}
.fav-btn:hover { transform: scale(1.12); }
.fav-btn.on { color: var(--oxblood); }

.producto-info { padding-top: 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.producto-cat { font-size: 9px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; }
.producto-cat.cat-arabe { color: var(--amber); }
.producto-cat.cat-disenador { color: var(--oxblood); }
.producto-nombre {
  font-family: 'Bodoni Moda', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
}
.producto-pie { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.precio-grupo { display: flex; align-items: baseline; gap: 7px; }
.producto-precio { font-size: 15px; font-weight: 500; color: var(--ink); }
.precio-antes { font-size: 12px; color: var(--ink-soft); text-decoration: line-through; }

.btn-agregar {
  background: none;
  border: none;
  border-bottom: 1px solid var(--oxblood);
  color: var(--oxblood);
  font-size: 12px;
  font-weight: 500;
  padding: 0 0 3px;
  transition: opacity .15s;
  white-space: nowrap;
}
.btn-agregar:hover:not(:disabled) { opacity: .6; }
.btn-agregar:disabled { color: #A8A49E; border-bottom-color: transparent; cursor: not-allowed; }

.estado { text-align: center; color: var(--ink-soft); padding: 46px 10px; font-size: 14px; }

/* ---------------- Nosotros ---------------- */
.nosotros-cita {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(26px, 7vw, 44px);
  line-height: 1.15;
  color: var(--ink);
  max-width: 700px;
  padding: 10px 0 34px;
}
.nosotros-cols { display: grid; gap: 26px; }
@media (min-width: 780px) { .nosotros-cols { grid-template-columns: 1.2fr .8fr; gap: 48px; } }
.nosotros-cols p { font-size: 14.5px; color: var(--ink); margin-bottom: 16px; max-width: 60ch; }
.nosotros-cols p em { font-family: 'Bodoni Moda', serif; }

.nosotros-ficha {
  background: var(--tint-arabe);
  padding: 26px 24px;
  align-self: start;
}
.nosotros-ficha h4 { font-family: 'Bodoni Moda', serif; font-size: 19px; font-weight: 500; margin-bottom: 14px; }
.nosotros-ficha li {
  list-style: none;
  font-size: 13px;
  color: var(--ink);
  padding: 9px 0;
  border-bottom: 1px solid rgba(26,26,26,.12);
}
.nosotros-ficha li:last-child { border-bottom: none; }
.nosotros-firma { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 17px; margin-top: 26px; color: var(--ink); }

/* ---------------- Políticas ---------------- */
.politicas-intro { color: var(--ink-soft); font-size: 14px; max-width: 62ch; margin-bottom: 26px; }
.acordeon { border-top: 1px solid var(--hairline); }
.acordeon details { border-bottom: 1px solid var(--hairline-soft); }
.acordeon summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 20px 2px;
  font-family: 'Bodoni Moda', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  transition: color .15s;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font-family: 'Hanken Grotesk'; font-size: 18px; color: var(--oxblood); transition: transform .2s; }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon summary:hover { color: var(--oxblood); }
.acordeon .cuerpo { padding: 0 2px 22px; font-size: 14px; color: var(--ink-soft); max-width: 68ch; }
.acordeon .cuerpo p { margin-bottom: 10px; }

/* ---------------- Footer ---------------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 46px 0 30px;
  font-size: 13px;
}
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; } }
.footer-brand { font-family: 'Bodoni Moda', serif; font-size: 26px; color: #fff; }
.footer-tag { font-style: italic; font-family: 'Bodoni Moda', serif; margin-top: 8px; color: rgba(255,255,255,.75); }
.footer h5 { font-size: 10px; letter-spacing: 2.5px; color: var(--tint-arabe); margin-bottom: 12px; font-weight: 500; }
.footer a, .footer .linkf {
  display: block;
  background: none;
  border: none;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
  text-align: left;
  transition: color .15s;
}
.footer a:hover, .footer .linkf:hover { color: #fff; }
.footer-base { border-top: 1px solid rgba(255,255,255,.15); margin-top: 34px; padding-top: 18px; font-size: 11px; color: rgba(255,255,255,.45); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------------- Carrito ---------------- */
.cart-overlay { position: fixed; inset: 0; background: rgba(26, 26, 26, 0.4); z-index: 90; }
.cart {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(400px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } }

.cart-head { border-bottom: 1px solid var(--hairline); padding: 20px; display: flex; align-items: baseline; justify-content: space-between; }
.cart-head h3 { font-family: 'Bodoni Moda', serif; font-size: 24px; font-weight: 500; }
.cart-close { background: none; border: none; color: var(--ink); font-size: 26px; line-height: 1; }
.cart-close:hover { color: var(--oxblood); }

.cart-items { flex: 1; overflow-y: auto; padding: 6px 20px; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
.cart-item-nombre { font-family: 'Bodoni Moda', serif; font-size: 16px; font-weight: 500; }
.cart-item-precio { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.cart-item-controles { display: flex; align-items: center; gap: 10px; }
.qty-btn {
  width: 26px; height: 26px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.qty-btn:hover { background: var(--ink); color: var(--paper); }
.qty-num { font-size: 14px; font-weight: 500; min-width: 18px; text-align: center; }
.cart-vaciar { background: none; border: none; font-size: 11px; color: var(--ink-soft); text-decoration: underline; padding: 10px 0 0; }
.cart-vaciar:hover { color: var(--oxblood); }
.cart-empty { padding: 32px 22px; text-align: center; color: var(--ink-soft); font-size: 13.5px; }

.cart-foot { border-top: 1px solid var(--hairline); padding: 18px 20px 22px; background: var(--paper); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.cart-total strong { font-family: 'Bodoni Moda', serif; font-size: 30px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.btn-whatsapp {
  width: 100%;
  background: var(--whatsapp);
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  padding: 15px;
  transition: filter .15s;
}
.btn-whatsapp:hover:not(:disabled) { filter: brightness(.94); }
.btn-whatsapp:disabled { background: var(--tint-agotado); color: #A8A49E; cursor: not-allowed; }
.btn-tarjeta {
  width: 100%;
  margin-top: 9px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: filter .15s;
}
.btn-tarjeta svg { width: 20px; height: 13px; flex: none; }
.btn-tarjeta:hover:not(:disabled) { filter: brightness(1.35); }
.btn-tarjeta:disabled { background: var(--tint-agotado); color: #A8A49E; cursor: not-allowed; }

.cart-note { margin-top: 10px; font-size: 11px; color: var(--ink-soft); text-align: center; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  border-left: 3px solid var(--oxblood);
  padding: 12px 18px;
  font-size: 13px;
  z-index: 120;
  animation: toastIn .28s cubic-bezier(.2,.8,.3,1);
  max-width: 92vw;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   V3 — CAPA DE IDENTIDAD
   ============================================================ */

::selection { background: var(--oxblood); color: #fff; }

/* Scrollbar discreta (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #D8D3CA; border-radius: 10px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }

/* ---------------- Logo con marca ---------------- */
.logo { display: flex; align-items: center; gap: 9px; }
.logo-marca { width: auto; height: 38px; flex-shrink: 0; display: block; }
.logo-texto { line-height: 1; }

/* ---------------- Hero con arte ---------------- */
.hero { display: grid; gap: 20px; }
@media (min-width: 880px) {
  .hero { grid-template-columns: 1.15fr .85fr; align-items: center; padding-top: 44px; }
}
.hero-art { display: none; }
@media (min-width: 720px) {
  .hero-art { display: block; animation: flotar 7s ease-in-out infinite; }
}
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.2deg); }
}

/* Título por letras */
#hero-title .letra {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: letraUp .6s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes letraUp { to { opacity: 1; transform: none; } }

/* Rotador de frases */
.hero-tagline { transition: opacity .45s ease; }
.hero-tagline.fade { opacity: 0; }

/* Stats editoriales */
.hero-stats {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 34px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 20px;
}
.hero-stats div { display: flex; flex-direction: column; gap: 3px; }
.hero-stats strong {
  font-family: 'Bodoni Moda', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--oxblood);
  line-height: 1;
}
.hero-stats span { font-size: 11px; letter-spacing: .6px; color: var(--ink-soft); max-width: 14ch; }

/* ---------------- Frascos ilustrados ---------------- */
.producto-visual { align-items: center; justify-content: center; }
.producto-visual .producto-palabra { position: absolute; bottom: 12px; left: 14px; }
svg.botella { width: 56%; max-width: 130px; height: auto; }
svg.botella .tapa { fill: currentColor; stroke: none; }
.producto-visual.cat-arabe { color: var(--amber); }
.producto-visual.cat-disenador { color: var(--oxblood); }
.producto-visual.agotado { color: #B9B4AC; }
.producto:hover svg.botella { transform: rotate(-2deg) translateY(-3px); }
svg.botella { transition: transform .25s ease; }

.producto-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- Contacto ---------------- */
.contacto { display: grid; gap: 24px; }
@media (min-width: 780px) { .contacto { grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: start; } }
.contacto-cita {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 22px;
}
.nosotros-ficha li a { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid var(--oxblood); }

/* ---------------- Cinta de notas ---------------- */
.cinta-notas { background: var(--tint-arabe); border-color: var(--hairline-soft); }
.cinta-notas .cinta-pista { animation-duration: 34s; animation-direction: reverse; }
.cinta-notas span {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--ink);
  text-transform: none;
}
.cinta-notas i { color: var(--amber); }

/* ---------------- Footer marca ---------------- */
.footer-marca { width: auto; height: 52px; margin-bottom: 12px; display: block; opacity: .95; }

/* ---------------- WhatsApp flotante ---------------- */
#wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
#wa-float svg { width: 26px; height: 26px; }
#wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 26px rgba(0, 0, 0, .32); }

/* ============================================================
   Detalle de producto (quick view)
   ============================================================ */
.producto[data-p] { cursor: pointer; }
.detalle-overlay { position: fixed; inset: 0; background: rgba(26,26,26,.5); z-index: 110; }
.detalle {
  position: fixed;
  z-index: 115;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--paper);
  display: grid;
  animation: detalleIn .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes detalleIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
@media (min-width: 640px) { .detalle { grid-template-columns: .9fr 1.1fr; } }

.detalle-cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: var(--paper); border: 1px solid var(--hairline-soft);
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; color: var(--ink);
}
.detalle-cerrar:hover { color: var(--oxblood); border-color: var(--oxblood); }

.detalle-media {
  position: relative;
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
}
.detalle-media.cat-arabe { background: var(--tint-arabe); color: var(--amber); }
.detalle-media.cat-disenador { background: var(--tint-disenador); color: var(--oxblood); }
.detalle-media.agotado { background: var(--tint-agotado); color: #B9B4AC; }
.detalle-media svg.botella { width: 52%; max-width: 190px; }
.detalle-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.detalle-info { padding: 30px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.detalle-info h3 { font-family: 'Bodoni Moda', serif; font-size: clamp(24px, 5vw, 32px); font-weight: 500; line-height: 1.1; color: var(--ink); }
.detalle-desc { font-size: 14px; color: var(--ink-soft); }
.detalle-precios { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.detalle-precios .producto-precio { font-size: 24px; }
.detalle-precios .precio-antes { font-size: 15px; }
.detalle-acciones { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.btn-detalle-agregar {
  flex: 1;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 14px;
  transition: background .15s;
}
.btn-detalle-agregar:hover:not(:disabled) { background: var(--oxblood); }
.btn-detalle-agregar:disabled { background: var(--tint-agotado); color: #A8A49E; cursor: not-allowed; }
.detalle-fav { position: static; width: 46px; height: 46px; background: var(--paper); border: 1px solid var(--hairline-soft); font-size: 19px; }

/* Detalle en móvil: la ficha no debe quedar bajo el pliegue */
@media (max-width: 639px) {
  .detalle-media { aspect-ratio: auto; height: 40vh; }
  .detalle-media svg.botella { max-height: 32vh; }
}

.politica-tip {
  border-left: 2px solid var(--oxblood, #6E1423);
  padding: 10px 0 10px 14px;
  margin-top: 14px !important;
  background: linear-gradient(90deg, rgba(110,20,35,.045), transparent 60%);
}

/* Sello circular: necesita aire propio y no compite con el wordmark */
.logo { gap: 11px; }
@media (max-width: 560px) {
  .logo-marca { height: 32px; }
  .logo { gap: 9px; }
}

/* ============================================================
   FILTRO POR OCASIÓN
   ------------------------------------------------------------
   Vive en dos sitios: como rejilla de tarjetas en la portada
   (puerta de entrada para quien no sabe qué busca) y como fila
   de chips en la tienda (afinado para quien ya está mirando).
   ============================================================ */

.ocasion-fila { align-items: baseline; }
.ocasion-rotulo {
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--amber);
  flex-shrink: 0;
}

.chip-ocasion { display: inline-flex; align-items: center; gap: 7px; }
.chip-icono { font-size: 12px; opacity: .75; }
.chip-ocasion.activo .chip-icono { opacity: 1; }
.chip-n {
  font-size: 10px;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}
.chip-ocasion.activo { background: var(--amber); border-color: var(--amber); color: var(--paper); }
.chip-limpiar { border-style: dashed; color: var(--ink-soft); }

/* --- ¿Para quién? --- */
.chip-genero { display: inline-flex; align-items: center; gap: 7px; }
.chip-genero.activo { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-genero.activo .chip-icono, .chip-genero.activo .chip-n { opacity: .85; }

/* Encabezado de cada grupo dentro de la rejilla. Ocupa la fila entera para
   que las tarjetas de abajo empiecen limpias en la primera columna. */
.grid-grupo {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--serif, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .01em;
}
.grid-grupo:first-child { margin-top: 4px; }
.grid-grupo-icono { font-size: 15px; opacity: .55; }
.grid-grupo-n {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .45;
  font-variant-numeric: tabular-nums;
}

/* --- Rejilla de la portada --- */
.ocasiones-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.ocasion-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 22px 20px 18px;
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.ocasion-tarjeta:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  background: linear-gradient(180deg, var(--tint-arabe) 0%, var(--paper) 62%);
}
.ocasion-tarjeta:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ocasion-icono { font-size: 20px; color: var(--amber); line-height: 1; }
.ocasion-nombre {
  font-family: 'Bodoni Moda', serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}
.ocasion-pista { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.ocasion-n {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amber);
}

/* --- Etiquetas dentro de la ficha rápida --- */
.detalle-ocasiones { margin: 18px 0 4px; }
.detalle-ocasiones-tit {
  display: block;
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 9px;
}
.ocasion-etiquetas { display: flex; flex-wrap: wrap; gap: 7px; }
.ocasion-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: .3px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--hairline-soft);
  background: var(--tint-arabe);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ocasion-tag:hover { border-color: var(--amber); background: var(--paper); }

/* ============================================================
   HERO CON FOTOGRAFÍA
   ------------------------------------------------------------
   Sustituye la ilustración SVG. Se mantiene visible en móvil
   —la ilustración se ocultaba por debajo de 720px— porque la
   mayoría del tráfico de Instagram llega desde el teléfono y
   ahí es donde más pesa ver frascos de verdad.
   ============================================================ */
.hero-foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 18px 44px -26px rgba(26, 22, 18, .55);
}
@media (min-width: 720px) { .hero-art { display: block; } }
@media (max-width: 719px) {
  .hero-art { display: block; animation: none; margin-top: 6px; }
}

/* Subtítulo del H1: existe para que la portada diga en texto lo que la gente
   escribe en Google. El H1 solo decía "Essenza", que nadie busca. */
.hero-h1-sub {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(15px, 3.4vw, 19px);
  color: var(--ink-soft);
  margin-top: 10px;
  letter-spacing: .2px;
}

/* ============================================================
   CUENTA, PEDIDO EN LÍNEA Y CIERRE DE VENTA
   ============================================================ */

.cuenta-toggle {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 0 0 3px;
  margin-right: 14px;
}
.cuenta-toggle:hover, .cuenta-toggle.con-sesion { border-bottom-color: var(--oxblood); color: var(--oxblood); }

/* --- Panel lateral --- */
.panel-overlay { position: fixed; inset: 0; background: rgba(26,22,18,.42); z-index: 60; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--paper); z-index: 61; overflow-y: auto;
  padding: 26px 26px 44px; border-left: 1px solid var(--hairline-soft);
  box-shadow: -18px 0 44px -30px rgba(0,0,0,.5);
}
.panel-cerrar {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink-soft);
}
.panel h2 { font-family: 'Bodoni Moda', serif; font-size: 27px; font-weight: 500; margin: 6px 0 6px; }
.panel-h3 {
  font-family: 'Bodoni Moda', serif; font-size: 19px; font-weight: 500;
  margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--hairline-soft);
}
.panel-sub { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 18px; }
.panel-form { display: flex; flex-direction: column; gap: 13px; }
.panel-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); }
.panel-form input, .panel-form select {
  font-family: inherit; font-size: 15px; padding: 11px 12px; color: var(--ink);
  border: 1px solid var(--hairline-soft); background: var(--paper); outline: none;
  text-transform: none; letter-spacing: 0;
}
.panel-form input:focus, .panel-form select:focus { border-color: var(--ink); }
/* Dos columnas solo cuando caben. En 390 px de ancho, "WhatsApp de contacto"
   junto a "Ciudad" deja los dos campos tan estrechos que la etiqueta se corta
   a media palabra. Con auto-fit se apilan solos en cuanto no hay sitio, sin
   depender de adivinar el punto de ruptura. */
.panel-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.panel-dos > label { min-width: 0; }
.panel-dos input, .panel-dos select { max-width: 100%; }
.panel-check { flex-direction: row !important; align-items: flex-start; gap: 9px !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important;
  color: var(--ink) !important; line-height: 1.45; }
.panel-check input { width: auto; }
.panel-btn {
  display: block; width: 100%; text-align: center; margin-top: 6px; padding: 14px;
  background: var(--ink); color: var(--paper); border: none; font-family: inherit;
  font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
  text-decoration: none;
}
.panel-btn:hover { background: var(--oxblood); }
.panel-btn:disabled { opacity: .55; cursor: default; }
.panel-error { color: var(--oxblood); font-size: 13px; }
.panel-aviso { color: var(--amber); font-size: 13px; margin: 12px 0; }
.panel-pie { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.panel-enlace {
  background: none; border: none; border-bottom: 1px solid var(--hairline-soft);
  font-family: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; padding: 0 0 2px;
}
.panel-enlace:hover { color: var(--oxblood); border-color: var(--oxblood); }

/* Trampa para robots: invisible para personas, rellenable por un bot. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- Resumen del checkout --- */
.checkout-resumen { border-top: 1px solid var(--hairline-soft); padding: 14px 0; margin-bottom: 6px; font-size: 14px; }
.checkout-resumen > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.checkout-desc { color: var(--oxblood); }
.checkout-total { border-top: 1px solid var(--hairline-soft); margin-top: 8px; padding-top: 10px !important; font-size: 17px; font-weight: 600; }

/* --- Mis pedidos --- */
.mi-pedido { border: 1px solid var(--hairline-soft); border-radius: 2px; padding: 13px 14px; margin-bottom: 10px; }
.mi-pedido-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mi-pedido-estado { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--amber); }
.mi-pedido-estado.entregado { color: #2E6B3E; }
.mi-pedido-estado.cancelado { color: var(--oxblood); }
.mi-pedido-items { font-size: 13px; color: var(--ink-soft); margin: 6px 0; line-height: 1.45; }
.mi-pedido-pie { display: flex; justify-content: space-between; font-size: 13px; }

/* --- Carrito --- */
.cart-descuento { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--oxblood); padding: 4px 0; }
.btn-pedido {
  width: 100%; padding: 15px; background: var(--ink); color: var(--paper); border: none;
  font-family: inherit; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer; margin-bottom: 9px;
}
.btn-pedido:hover { background: var(--oxblood); }
.btn-pedido:disabled { opacity: .5; cursor: default; }

/* --- Escasez honesta: el número sale del inventario real --- */
.stock-bajo {
  position: absolute; left: 10px; bottom: 10px; background: var(--oxblood); color: #fff;
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
}
.producto-visual { position: relative; }
.btn-detalle-agregar.avisar { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }

/* --- Destacados: el sello dice de dónde sale el dato --- */
.destacado-fuente {
  display: inline-block; margin: 10px 0 -2px; font-size: 9.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--amber);
}
.destacado-nota { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 6px; }
.detalle-stock { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--oxblood); margin-top: 14px; }

/* ============================================================
   ENVÍO, RESUMEN DEL SERVIDOR, VERIFICACIÓN Y SEGUIMIENTO
   Añadido el 14 de agosto de 2026.
   ============================================================ */

/* --- Desglose del carrito ------------------------------------------------
   Antes el carrito solo enseñaba "Total". Con envío y descuento en juego,
   un número suelto es exactamente lo que provoca el mensaje de "¿por qué
   me cobran esto?". Cada línea que mueve el importe se ve. */
.cart-lineas { margin-bottom: 10px; }
.cart-linea {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--ink-soft); padding: 3px 0;
}
.cart-linea em { font-style: normal; opacity: .68; font-size: 11.5px; }
.cart-linea-desc { color: var(--oxblood); }
.cart-gratis-txt-ok { color: #2E6B3E; font-weight: 600; }

/* --- Progreso hacia el envío gratis --------------------------------------
   La palanca más eficaz que existe para subir el ticket promedio: en vez de
   pedirle al cliente que gaste más, se le enseña lo poco que le falta. */
.cart-gratis {
  background: var(--cream-deep, #F3F1EE);
  border: 1px solid var(--hairline-soft);
  border-radius: 3px; padding: 10px 12px; margin-bottom: 12px;
}
.cart-gratis-txt { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 7px; line-height: 1.4; }
.cart-gratis-txt strong { color: var(--ink); }
.cart-gratis-barra { height: 4px; background: var(--hairline-soft); border-radius: 2px; overflow: hidden; }
.cart-gratis-barra span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber, #8A5A19), #B98341);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* --- Checkout ------------------------------------------------------------ */
.checkout-envio { display: flex; justify-content: space-between; color: var(--ink-soft); }
.checkout-envio em { font-style: normal; opacity: .68; font-size: 11.5px; }
.checkout-nudge {
  font-size: 12.5px; color: var(--amber, #8A5A19);
  border-left: 2px solid var(--amber, #8A5A19);
  padding: 4px 0 4px 9px; margin: 6px 0;
}

/* --- Avisos con acción ---------------------------------------------------- */
.panel-aviso {
  color: var(--amber); font-size: 13px; margin: 12px 0;
  line-height: 1.5;
}
.panel-aviso-accion {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: rgba(138, 90, 25, .07);
  border-left: 2px solid var(--amber, #8A5A19);
  padding: 10px 12px; border-radius: 0 3px 3px 0;
}

/* --- Campo del código de verificación ------------------------------------
   Grande y espaciado a propósito: seis dígitos tecleados en un móvil se
   equivocan menos si cada uno ocupa sitio y se distingue del de al lado. */
.campo-codigo {
  font-family: 'Bodoni Moda', Georgia, serif !important;
  font-size: 30px !important; letter-spacing: 14px !important;
  text-align: center; padding-left: 14px !important;
}

/* --- Línea de tiempo del pedido -------------------------------------------
   Responde a "¿dónde va lo mío?" sin que nadie tenga que escribir. */
.linea-tiempo { margin: 16px 0 20px; padding-left: 4px; }
.lt-paso {
  position: relative; padding: 0 0 18px 22px;
  font-size: 13.5px; color: var(--ink-soft);
}
.lt-paso:not(:last-child)::before {
  content: ''; position: absolute; left: 4.5px; top: 13px; bottom: 0;
  width: 1px; background: var(--hairline-soft);
}
.lt-paso.lt-hecho:not(:last-child)::before { background: var(--amber, #8A5A19); }
.lt-punto {
  position: absolute; left: 0; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--hairline); background: var(--paper, #fff);
}
.lt-hecho .lt-punto { background: var(--amber, #8A5A19); border-color: var(--amber, #8A5A19); }
.lt-hecho .lt-txt { color: var(--ink); font-weight: 500; }
.lt-fecha { display: block; font-size: 11.5px; opacity: .6; margin-top: 1px; }
.linea-tiempo.cancelado { color: var(--oxblood); font-size: 13.5px; }

/* --- Tabla de tarifas de envío ------------------------------------------- */
.tabla-envios { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 14.5px; }
.tabla-envios th {
  text-align: left; font-weight: 400; color: var(--ink-soft);
  padding: 9px 0; border-bottom: 1px solid var(--hairline-soft);
}
.tabla-envios td {
  text-align: right; padding: 9px 0; white-space: nowrap;
  border-bottom: 1px solid var(--hairline-soft);
}
.tabla-envios .fila-destacada th,
.tabla-envios .fila-destacada td { color: var(--amber, #8A5A19); border-bottom: none; }

/* --- Señales de confianza en el carrito -----------------------------------
   No es decoración. Son las tres dudas concretas que frenan una compra de
   perfume por internet en Ecuador —¿será original?, ¿cuánto me cobran de
   envío?, ¿tengo que pagar por adelantado?— puestas justo donde surgen. */
.cart-confianza { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hairline-soft); }
.cart-confianza li {
  position: relative; padding-left: 17px; margin-bottom: 6px;
  font-size: 12px; color: var(--ink-soft); line-height: 1.45;
}
.cart-confianza li::before {
  content: ''; position: absolute; left: 1px; top: 5px;
  width: 8px; height: 4px; border-left: 1.4px solid var(--amber, #8A5A19);
  border-bottom: 1.4px solid var(--amber, #8A5A19); transform: rotate(-45deg);
}

/* ============================================================
   MI CUENTA
   ============================================================ */

.oculto-total { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- Sin sesión ----------------------------------------------------------- */
.cuenta-invitado { max-width: 560px; }
.cuenta-invitado-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 16px; }
.btn-primario, .btn-secundario {
  font-family: inherit; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 14px 26px; border-radius: 2px; cursor: pointer; transition: opacity .2s;
}
.btn-primario { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn-secundario { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.btn-primario:hover, .btn-secundario:hover { opacity: .82; }
.cuenta-invitado-nota { font-size: 13px; color: var(--ink-soft); }

/* --- Estructura ----------------------------------------------------------- */
/* min-width: 0 en los hijos no es un detalle: por defecto un elemento de
   rejilla no se encoge por debajo de su contenido, así que la tira de
   pestañas —que no parte las palabras— empujaba la columna y con ella la
   página entera. El síntoma en el móvil era que el texto se salía por la
   izquierda y aparecía scroll horizontal en todo el sitio. */
.cuenta-panel { display: grid; grid-template-columns: 262px 1fr; gap: 42px; align-items: start; }
.cuenta-lateral, .cuenta-contenido { min-width: 0; }

.cuenta-lateral {
  position: sticky; top: 96px;
  border-right: 1px solid var(--hairline-soft); padding-right: 26px;
}

/* --- Identidad y foto ------------------------------------------------------ */
.cuenta-identidad { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.avatar-caja { position: relative; flex: 0 0 auto; }
.avatar {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--cream-deep, #F3F1EE) center/cover no-repeat;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bodoni Moda', Georgia, serif; font-size: 21px; color: var(--amber, #8A5A19);
}
.avatar-editar {
  position: absolute; right: -3px; bottom: -3px;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--ink); color: var(--paper); border: 2px solid var(--paper);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .18s;
}
.avatar-editar:hover { transform: scale(1.09); }
.avatar-editar svg { width: 13px; height: 13px; }
.cuenta-nombre { font-family: 'Bodoni Moda', serif; font-size: 18px; line-height: 1.2; margin: 0 0 2px; }
.cuenta-correo { font-size: 12.5px; color: var(--ink-soft); margin: 0; word-break: break-all; }
.cuenta-desde { font-size: 11.5px; color: var(--ink-soft); opacity: .72; margin: 3px 0 0; }

/* Avatar en la barra superior */
.cuenta-toggle { display: inline-flex; align-items: center; gap: 8px; }
.cuenta-toggle-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cream-deep, #F3F1EE) center/cover no-repeat;
  border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0; color: var(--amber, #8A5A19);
}

/* --- Menú lateral ---------------------------------------------------------- */
.cuenta-menu { display: flex; flex-direction: column; gap: 1px; }
.cuenta-tab {
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--ink-soft);
  padding: 10px 12px; border-radius: 2px; border-left: 2px solid transparent;
  transition: background .16s, color .16s, border-color .16s;
}
.cuenta-tab:hover { background: var(--cream-deep, #F3F1EE); color: var(--ink); }
.cuenta-tab.activo {
  color: var(--ink); font-weight: 500;
  background: var(--cream-deep, #F3F1EE); border-left-color: var(--amber, #8A5A19);
}
.cuenta-salir {
  margin-top: 26px; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; padding: 8px 12px;
}

/* --- Contenido -------------------------------------------------------------- */
.cuenta-contenido { min-height: 380px; }
.cuenta-h2 { font-family: 'Bodoni Moda', serif; font-size: 27px; font-weight: 400; margin: 0 0 6px; }
.cuenta-h3 {
  font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft);
  margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline-soft);
}
.cuenta-nota { font-size: 12.5px; color: var(--ink-soft); line-height: 1.62; margin-top: 18px; }
.cuenta-form { max-width: 540px; }

/* Cifras del resumen */
.cuenta-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline-soft); border: 1px solid var(--hairline-soft);
  margin: 22px 0 6px;
}
.cuenta-cifras div { background: var(--paper, #fff); padding: 17px 14px; text-align: center; }
.cuenta-cifras strong {
  display: block; font-family: 'Bodoni Moda', serif; font-size: 25px; font-weight: 500; line-height: 1.1;
}
.cuenta-cifras span {
  display: block; font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 5px;
}

.cuenta-atajos { display: flex; gap: 10px; flex-wrap: wrap; }
.cuenta-atajos button {
  font-family: inherit; font-size: 12.5px; background: none; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 2px; padding: 10px 16px; color: var(--ink);
  transition: background .16s;
}
.cuenta-atajos button:hover { background: var(--cream-deep, #F3F1EE); }

/* --- Tarjeta de pedido del cliente ------------------------------------------ */
.ped-cliente { border: 1px solid var(--hairline-soft); border-radius: 3px; padding: 20px 22px; margin-bottom: 16px; }
.ped-cliente-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ped-cliente-cab strong { font-size: 15px; }
.ped-cliente-fecha { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ped-cliente-items { border-top: 1px solid var(--hairline-soft); padding-top: 12px; font-size: 14px; }
.ped-cliente-items > div { display: flex; justify-content: space-between; padding: 4px 0; }
.ped-cliente-acciones {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--hairline-soft);
}
.panel-btn-min { width: auto; padding: 10px 20px; font-size: 11.5px; }

/* --- Direcciones ------------------------------------------------------------- */
.dir-lista { display: grid; gap: 12px; margin-bottom: 8px; }
.dir-tarjeta {
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-start;
  border: 1px solid var(--hairline-soft); border-radius: 3px; padding: 15px 18px;
}
.dir-tarjeta.principal { border-color: var(--amber, #8A5A19); }
.dir-etiqueta { font-weight: 500; font-size: 14.5px; margin: 0 0 4px; }
.dir-badge {
  display: inline-block; margin-left: 9px; font-size: 9.5px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--amber, #8A5A19);
  border: 1px solid var(--amber, #8A5A19); border-radius: 2px; padding: 2px 7px; vertical-align: 2px;
}
.dir-texto { margin: 0; font-size: 14px; }
.dir-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.dir-acciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }

/* --- Favoritos ---------------------------------------------------------------- */
.fav-lista { display: grid; gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft); }
.fav-fila {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--paper, #fff); padding: 15px 18px;
}
.fav-nombre { margin: 0; font-size: 14.5px; }
.fav-meta { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.fav-acciones { display: flex; gap: 14px; align-items: center; flex: 0 0 auto; }

/* --- Seguridad ----------------------------------------------------------------- */
.seg-estado {
  border: 1px solid var(--hairline-soft); border-radius: 3px;
  padding: 15px 18px; margin: 18px 0 4px; font-size: 14px;
}
.seg-estado p { margin: 0 0 7px; }
.seg-estado p:last-child { margin-bottom: 0; }
.seg-ok { color: #2E6B3E; }
.seg-pendiente { color: var(--amber, #8A5A19); }

/* --- Móvil ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  .cuenta-panel { grid-template-columns: 1fr; gap: 26px; }
  .cuenta-lateral {
    position: static; border-right: none; padding-right: 0;
    border-bottom: 1px solid var(--hairline-soft); padding-bottom: 18px;
  }
  /* El menú pasa a ser una tira que se desliza: seis pestañas apiladas
     en un móvil empujan el contenido fuera de la primera pantalla. */
  .cuenta-menu {
    flex-direction: row; overflow-x: auto; gap: 4px;
    max-width: 100%;
    /* Que el desplazamiento de la tira no arrastre a la página detrás. */
    overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cuenta-menu::-webkit-scrollbar { display: none; }
  .cuenta-tab {
    white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; border-radius: 0;
  }
  .cuenta-tab.activo { border-left: none; border-bottom-color: var(--amber, #8A5A19); }
  .cuenta-salir { margin-top: 14px; padding-left: 0; }
  .cuenta-cifras { grid-template-columns: repeat(2, 1fr); }
  .dir-tarjeta { flex-direction: column; gap: 12px; }
  .dir-acciones { flex-direction: row; align-items: center; }
  .fav-fila { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Última línea de defensa contra el scroll horizontal. Un solo elemento que
   se pase de ancho arruina toda la lectura en un móvil, y es el tipo de fallo
   que aparece meses después al añadir algo largo. */
html, body { overflow-x: hidden; max-width: 100%; }


/* ---------- Presentaciones (tamaños) ---------- */
.detalle-tamanos { margin: 14px 0 6px; }
.detalle-tamanos-tit { display:block; font-size:10.5px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--tinta-suave,#8A8A8A); margin-bottom:8px; }
.tamano-opciones { display:flex; gap:8px; flex-wrap:wrap; }
.tamano-op { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  border:1px solid var(--linea,#E4E1DC); background:#fff; border-radius:4px;
  padding:8px 13px; cursor:pointer; font:inherit; line-height:1.25; transition:border-color .15s, box-shadow .15s; }
.tamano-op:hover:not(:disabled) { border-color:#1A1A1A; }
.tamano-op.on { border-color:#1A1A1A; box-shadow:inset 0 0 0 1px #1A1A1A; }
.tamano-op:disabled { opacity:.42; cursor:not-allowed; }
.tamano-nombre { font-size:13.5px; }
.tamano-precio { font-size:12px; color:var(--tinta-suave,#8A8A8A); }
.tamano-agotado { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:#B3261E; }
.precio-desde { font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--tinta-suave,#8A8A8A); }
.cart-item-pres { font-size:11.5px; letter-spacing:.4px; color:var(--tinta-suave,#8A8A8A); margin:1px 0 2px; }


/* ---------- Checkout: con cuenta o como invitado ---------- */
.modo-pedido { display:grid; gap:10px; margin:16px 0 4px; }
.modo-op { display:block; text-align:left; background:#fff; border:1px solid var(--linea,#E4E1DC);
  border-radius:6px; padding:15px 17px; cursor:pointer; font:inherit; transition:border-color .15s, box-shadow .15s; }
.modo-op:hover { border-color:#1A1A1A; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.modo-tit { display:block; font-size:15px; margin-bottom:3px; }
.modo-sub { display:block; font-size:12.5px; line-height:1.45; color:var(--tinta-suave,#8A8A8A); }
.checkout-quien { border-left:3px solid #1A1A1A; padding:9px 13px; margin:4px 0 14px; background:rgba(0,0,0,.02); }
.checkout-quien.invitado { border-left-color:var(--oro,#8A5A19); }
.checkout-quien-tit { display:block; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--tinta-suave,#8A8A8A); }
.checkout-quien-sub { display:block; font-size:13.5px; margin-top:3px; }
.checkout-quien-nota { display:block; font-size:12px; color:var(--tinta-suave,#8A8A8A); margin-top:3px; }
.campo-pista { display:block; font-size:11.5px; line-height:1.35; margin-top:4px; min-height:15px;
  color:var(--tinta-suave,#8A8A8A); text-transform:none; letter-spacing:0; }
.campo-pista.ok { color:#2E6B3E; }
.campo-pista.mal { color:#B3261E; }


/* ---------- Ayuda: consultas del cliente ---------- */
.tab-punto { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--oro,#8A5A19);
  margin-left:5px; vertical-align:middle; }
.tickets-lista { display:grid; gap:9px; }
.ticket-fila { display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--linea,#E4E1DC);
  border-radius:6px; padding:13px 15px; cursor:pointer; font:inherit; transition:border-color .15s; }
.ticket-fila:hover { border-color:#1A1A1A; }
.ticket-fila.sin-leer { border-left:3px solid var(--oro,#8A5A19); }
.ticket-cab { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.ticket-num { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--tinta-suave,#8A8A8A); }
.ticket-estado { font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; }
.ticket-estado.est-abierto { color:var(--oro,#8A5A19); }
.ticket-estado.est-respondido { color:#2E6B3E; }
.ticket-estado.est-cerrado { color:var(--tinta-suave,#8A8A8A); }
.ticket-titulo { display:block; font-size:14.5px; }
.ticket-meta { display:block; font-size:12px; color:var(--tinta-suave,#8A8A8A); margin-top:2px; }
.ticket-form { border:1px solid var(--linea,#E4E1DC); border-radius:6px; padding:15px 17px; margin-bottom:18px; }
.ticket-hilo { display:grid; gap:11px; margin:14px 0 18px; }
.ticket-msg { border-radius:6px; padding:11px 14px; font-size:14px; line-height:1.55; }
.ticket-msg.de-cliente { background:rgba(0,0,0,.035); }
.ticket-msg.de-tienda { background:#fff; border:1px solid var(--linea,#E4E1DC); border-left:3px solid #1A1A1A; }
.ticket-msg p { margin:3px 0 0; }
.ticket-msg-quien { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--tinta-suave,#8A8A8A); }
.ticket-form textarea, #form-ticket-responder textarea { width:100%; font:inherit; padding:9px 11px;
  border:1px solid var(--linea,#E4E1DC); border-radius:4px; resize:vertical; }

/* ---------------- Accesibilidad ---------------- */
/* Salta la cabecera fija. Invisible hasta que recibe el foco. */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
}
.salto-contenido:focus { left: 8px; top: 8px; }

/* La tarjeta de producto pasó a ser un enlace real: se abre con Enter,
   se puede copiar y apunta a la ficha servida por el servidor. */
.producto-enlace {
  display: block;
  color: inherit;
  text-decoration: none;
}
.producto-enlace:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}

/* ---------------- Afinar: familia, nota, precio y casa ---------------- */
/* Va dentro de un <details> a propósito: son cuatro grupos de filtros y
   desplegados de golpe empujan la rejilla fuera de la pantalla en móvil,
   que es donde compra casi todo el mundo. */
.afinar {
  border-top: 1px solid var(--hairline-soft, #EFEDEA);
  padding-top: 12px;
  margin-top: 4px;
}
.afinar > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 4px 0;
}
.afinar > summary::-webkit-details-marker { display: none; }
.afinar > summary::before {
  content: '+';
  font-size: 14px;
  line-height: 1;
  color: var(--amber, #8A5A19);
}
.afinar[open] > summary::before { content: '−'; }
.afinar > summary:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.afinar-n { color: var(--amber, #8A5A19); letter-spacing: .06em; text-transform: none; font-size: 11.5px; }
.afinar-cuerpo { padding: 10px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.afinar-grupo { display: flex; flex-direction: column; gap: 7px; }
.chip-afinar { font-size: 11.5px; padding: 5px 11px; }
.chip-n { font-size: 9.5px; opacity: .6; margin-left: 5px; }
#sel-marca { max-width: 280px; }

/* ---------------- Pirámide olfativa en la ficha rápida ---------------- */
.detalle-piramide { margin-top: 16px; border-top: 1px solid var(--hairline-soft, #EFEDEA); padding-top: 12px; }
.detalle-piramide-tit {
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--amber, #8A5A19); margin-bottom: 8px;
}
.piramide-linea { display: grid; grid-template-columns: 66px 1fr; gap: 4px 12px; padding: 5px 0; }
.piramide-linea + .piramide-linea { border-top: 1px dotted var(--hairline-soft, #EFEDEA); }
.piramide-linea dt { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-soft); padding-top: 2px; }
.piramide-linea dd { font-size: 13.5px; }
.detalle-datos { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.detalle-datos b { color: var(--ink); font-weight: 500; }

/* ---------------- Parecidos dentro de la ficha rápida ---------------- */
.detalle-parecidos { margin-top: 18px; border-top: 1px solid var(--hairline-soft, #EFEDEA); padding-top: 12px; }
.detalle-parecidos-tit { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--amber, #8A5A19); margin-bottom: 9px; }
.detalle-parecidos-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.parecido-mini { background: none; border: 1px solid var(--hairline-soft, #EFEDEA); border-radius: 2px; padding: 7px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.parecido-mini:hover { border-color: var(--amber, #8A5A19); }
.parecido-mini:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.parecido-mini img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; display: block; margin-bottom: 6px; }
.parecido-mini-nombre { display: block; font-size: 11.5px; line-height: 1.3; }
.parecido-mini-precio { display: block; font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.detalle-ficha-completa { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--ink-soft); border-bottom: 1px solid var(--hairline-soft, #EFEDEA); text-decoration: none; }
.detalle-ficha-completa:hover { color: var(--oxblood); border-color: var(--oxblood); }

/* ============================================================
   ASESOR OLFATIVO
   ============================================================
   Una pregunta por pantalla, botones grandes y ningún término de
   perfumista sin traducir. Se contesta con el pulgar, de pie, que es
   como se navega una tienda de perfume en el teléfono. */

.asesor-llamada {
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 26px 24px;
  display: grid;
  gap: 18px;
  align-items: center;
}
@media (min-width: 760px) { .asesor-llamada { grid-template-columns: 1fr auto; gap: 34px; padding: 32px 34px; } }
.asesor-llamada-rotulo {
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--amber, #8A5A19); margin-bottom: 8px;
}
.asesor-llamada h3 { font-family: 'Bodoni Moda', serif; font-size: 25px; font-weight: 400; line-height: 1.2; }
.asesor-llamada p { color: var(--ink-soft); margin-top: 8px; max-width: 58ch; }
.btn-asesor {
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 14px 24px; border-radius: 2px; cursor: pointer;
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  white-space: nowrap; transition: background .15s, color .15s;
}
.btn-asesor:hover { background: var(--oxblood); border-color: var(--oxblood); }
.btn-asesor:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }

.asesor { max-width: 720px; }
.asesor-progreso { display: flex; gap: 5px; margin-bottom: 18px; }
.asesor-progreso span { flex: 1; height: 3px; background: var(--hairline-soft, #EFEDEA); border-radius: 2px; }
.asesor-progreso span.on { background: var(--amber, #8A5A19); }
.asesor-num { font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-soft); }
.asesor-titulo { font-family: 'Bodoni Moda', serif; font-size: 27px; font-weight: 400; line-height: 1.2; margin-top: 6px; }
.asesor-pista { color: var(--ink-soft); font-size: 13.5px; margin-top: 8px; max-width: 56ch; }

.asesor-opciones { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 620px) { .asesor-opciones { grid-template-columns: repeat(2, 1fr); } }
.asesor-opciones.multi { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.asesor-op {
  background: none; border: 1px solid var(--hairline, #E4E1DC); border-radius: 3px;
  padding: 15px 16px; text-align: left; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .15s, background .15s;
}
.asesor-op:hover { border-color: var(--amber, #8A5A19); }
.asesor-op:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.asesor-op.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.asesor-op.sutil { border-style: dashed; }
.asesor-op-etq { display: block; font-size: 15px; }
.asesor-op-sub { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.asesor-op.on .asesor-op-sub { color: rgba(255,255,255,.72); }

.asesor-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.asesor-atras, .asesor-seguir {
  background: none; border: none; padding: 6px 2px; cursor: pointer; font: inherit;
  font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid var(--hairline, #E4E1DC);
}
.asesor-seguir { color: var(--ink); }
.asesor-atras:hover, .asesor-seguir:hover { color: var(--oxblood); border-color: var(--oxblood); }
.asesor-atras:focus-visible, .asesor-seguir:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* --- El resultado --- */
.asesor-resultado { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.asesor-carta {
  position: relative;
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  border: 1px solid var(--hairline, #E4E1DC); border-radius: 3px; padding: 14px;
}
@media (min-width: 620px) { .asesor-carta { grid-template-columns: 132px 1fr; gap: 20px; padding: 18px; } }
.asesor-puesto {
  position: absolute; top: -10px; left: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 12px;
}
.asesor-carta-foto { background: var(--tint-arabe, #F3E7D3); border-radius: 2px; overflow: hidden; }
.asesor-carta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3/4; }
.asesor-carta-info h4 { font-family: 'Bodoni Moda', serif; font-size: 19px; font-weight: 400; line-height: 1.2; }
.asesor-carta-info h4 a { color: inherit; text-decoration: none; }
.asesor-carta-info h4 a:hover { color: var(--oxblood); }
.asesor-carta-fam { font-size: 11.5px; color: var(--amber, #8A5A19); letter-spacing: .06em; margin-top: 3px; }
.asesor-porque { font-size: 13px; margin-top: 8px; line-height: 1.45; }
.asesor-porque span { color: var(--amber, #8A5A19); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.asesor-carta-notas { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }
.asesor-carta-pie { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.asesor-precio { font-size: 17px; font-weight: 600; }
.asesor-pie-final { border-top: 1px solid var(--hairline-soft, #EFEDEA); padding-top: 16px; }

/* ---------------- Valoraciones ---------------- */
/* Solo escribe reseña quien compró, y se dice en pantalla: «compra
   verificada» es justo la diferencia entre una opinión que convence y
   una que el cliente sospecha que escribió la propia tienda. */
.estrellas { display: inline-flex; align-items: center; gap: 6px; color: #B8860B; letter-spacing: 1px; font-size: 13px; }
.estrellas .apagadas { color: #DCD8D2; }
.estrellas-n { color: var(--ink-soft); font-size: 11.5px; letter-spacing: 0; }
.producto-info .estrellas { margin-top: 3px; }

.detalle-opiniones { margin-top: 18px; border-top: 1px solid var(--hairline-soft, #EFEDEA); padding-top: 12px; }
.detalle-opiniones-tit {
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--amber, #8A5A19); margin-bottom: 9px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.detalle-opiniones-nada { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.opinion-mini { padding: 9px 0; border-bottom: 1px dotted var(--hairline-soft, #EFEDEA); }
.opinion-mini:last-of-type { border-bottom: none; }
.opinion-mini-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.opinion-mini-nombre { font-weight: 500; }
.opinion-verificada {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #1E6B3A; border: 1px solid #CBE3D3; border-radius: 999px; padding: 1px 7px;
}
.opinion-mini-titulo { font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.opinion-mini-texto { font-size: 13px; margin-top: 3px; line-height: 1.45; }
.opinion-mini-resp { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--amber, #8A5A19); font-size: 12.5px; color: var(--ink-soft); }
.opinion-mini-resp span { display: block; color: var(--amber, #8A5A19); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

/* --- Escribir una opinión, desde la cuenta --- */
.opinar-lista { display: flex; flex-direction: column; gap: 12px; }
.opinar-fila { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--hairline, #E4E1DC); border-radius: 3px; padding: 10px; }
.opinar-fila img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; }
.opinar-nombre { font-size: 14px; }
.opinar-pedido { font-size: 11.5px; color: var(--ink-soft); }
.opinar-estrellas { display: flex; gap: 4px; margin: 10px 0; }
.opinar-estrella { background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1; color: #DCD8D2; padding: 0 2px; }
.opinar-estrella.on { color: #B8860B; }
.opinar-estrella:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* ---------------- Suscripción desde el pie ---------------- */
.footer-nota { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.45; margin-bottom: 10px; }
.footer-suscribir { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-suscribir input[type=email] {
  flex: 1 1 150px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 9px 11px;
  border-radius: 2px;
  font: inherit;
  font-size: 13px;
}
.footer-suscribir input[type=email]::placeholder { color: rgba(255,255,255,.4); }
.footer-suscribir input[type=email]:focus-visible { outline: 2px solid var(--tint-arabe, #F3E7D3); outline-offset: 1px; }
.footer-suscribir button {
  background: var(--tint-arabe, #F3E7D3);
  color: var(--ink);
  border: none;
  padding: 9px 16px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.footer-suscribir button:hover { background: #fff; }
.footer-suscribir button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.footer-suscribir-msg { font-size: 12.5px; color: var(--tint-arabe, #F3E7D3); margin-top: 8px; line-height: 1.4; }
.footer-suscribir-msg.error { color: #F0B3B3; }
/* La trampa para robots: invisible para las personas, rellenable por un
   guion automático. No se usa display:none porque muchos robots lo miran. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------- Sugerencias dentro del carrito ---------------- */
/* Aparecen justo encima del total, que es donde el cliente está mirando
   la cifra y decidiendo. Cuando falta poco para el envío gratis, añadir
   otro frasco le sale más a cuenta que no añadirlo — y decirlo con el
   número delante convierte mucho mejor que un «también te puede gustar». */
.cart-sugerencias { border-top: 1px solid var(--hairline-soft, #EFEDEA); padding-top: 12px; margin-bottom: 12px; }
.cart-sug-tit {
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--amber, #8A5A19); margin-bottom: 8px;
}
.cart-sug {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  background: none;
  border: 1px solid var(--hairline, #E4E1DC);
  border-radius: 2px;
  padding: 7px;
  margin-bottom: 7px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color .15s;
}
.cart-sug:hover { border-color: var(--amber, #8A5A19); }
.cart-sug:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.cart-sug img, .cart-sug-sinfoto {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  background: var(--tint-arabe, #F3E7D3); border-radius: 2px; display: block;
}
.cart-sug-info { display: block; min-width: 0; }
.cart-sug-nombre { display: block; font-size: 12.5px; line-height: 1.3; }
.cart-sug-precio { display: block; font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.cart-sug-mas { font-size: 18px; color: var(--amber, #8A5A19); padding: 0 6px; }

/* ---------------- Rendimiento de la rejilla ---------------- */
/* Los 84 productos se pintan de una vez. Con esto el navegador se salta
   el cálculo de maquetado y el pintado de las tarjetas que están fuera de
   la pantalla, que en la vista de tienda son casi todas. `contain-
   intrinsic-size` le da la altura aproximada para que la barra de
   desplazamiento no dé saltos mientras se baja.
   Donde no esté soportado se ignora y todo sigue igual que antes. */
@supports (content-visibility: auto) {
  .grid .producto {
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
  }
}

/* ============================================================
   FILTROS EN UN CAJÓN
   ============================================================
   Siete grupos de filtros desplegados empujaban la rejilla por debajo del
   pliegue: lo primero que veía el cliente era un muro de etiquetas en vez
   de perfumes. Ahora la barra se queda con lo que se usa en cada visita
   —buscar y ordenar— y el resto vive detrás de un botón.

   Lo que sí permanece a la vista es lo que está aplicado, en fichas que se
   quitan de un toque. Un filtro activo que no se ve es la forma más rápida
   de que alguien crea que la tienda tiene seis frascos y se marche. */

.btn-filtros {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--hairline, #E4E1DC);
  border-radius: 2px;
  padding: 0 16px;
  height: 44px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.btn-filtros svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-filtros:hover { border-color: var(--ink); }
.btn-filtros:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.btn-filtros.con-filtros { border-color: var(--ink); background: var(--ink); color: #fff; }
.filtros-n {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber, #8A5A19);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
}
.btn-filtros.con-filtros .filtros-n { background: var(--tint-arabe, #F3E7D3); color: var(--ink); }

/* --- Fichas de lo aplicado --- */
.filtros-activos { display: flex; flex-wrap: wrap; gap: 7px; }
.filtro-ficha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--tint-arabe, #F3E7D3);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}
.filtro-ficha span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .55; }
.filtro-ficha:hover { border-color: var(--oxblood); }
.filtro-ficha:hover span[aria-hidden] { opacity: 1; color: var(--oxblood); }
.filtro-ficha:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.filtro-ficha-todo { background: none; border-color: var(--hairline, #E4E1DC); color: var(--ink-soft); }

/* --- El cajón --- */
.filtros-overlay { position: fixed; inset: 0; background: rgba(26, 26, 26, .4); z-index: 90; }
.filtros-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, 94vw);
  background: var(--paper);
  border-left: 1px solid var(--hairline, #E4E1DC);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: slideIn .22s ease;
}
@media (prefers-reduced-motion: reduce) { .filtros-panel { animation: none; } }
.filtros-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--hairline-soft, #EFEDEA);
}
.filtros-head h3 { font-family: 'Bodoni Moda', serif; font-size: 22px; font-weight: 400; }
.filtros-cerrar {
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft); padding: 0 4px;
}
.filtros-cerrar:hover { color: var(--ink); }
.filtros-cerrar:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

.filtros-cuerpo { flex: 1; overflow-y: auto; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 20px; }
.filtro-grupo { display: flex; flex-direction: column; gap: 9px; }
.filtro-rotulo {
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--amber, #8A5A19);
}
.filtro-grupo .chips { gap: 7px; }
.filtro-grupo select { width: 100%; }

.filtros-pie {
  border-top: 1px solid var(--hairline-soft, #EFEDEA);
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filtros-ver {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.filtros-ver:hover { background: var(--oxblood); }
.filtros-ver:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.filtros-limpiar {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}
.filtros-limpiar:hover { color: var(--oxblood); }
.filtros-limpiar:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* Con el cajón abierto, el fondo no se desplaza detrás del velo. */
body.filtros-abiertos { overflow: hidden; }

@media (max-width: 620px) {
  .btn-filtros { flex: 1 1 auto; justify-content: center; }
  .tienda-fila .buscador { flex: 1 1 100%; }
}