/* =========================================================
   GINZA Fragancias — Estilos
   Paleta: lila · amarillo · crema · blanco
   ========================================================= */
:root {
  --lila-900: #33264D;
  --lila-800: #46366A;
  --lila-700: #5E4A87;
  --lila-500: #9580C2;
  --lila-300: #C9BBE4;
  --lila-100: #EEE8F7;
  --oro-600: #B98E1E;
  --oro-500: #D9B23A;
  --oro-200: #F5E3A0;
  --crema: #F8F2E7;
  --crema-2: #EFE5D3;
  --blanco: #FFFFFF;
  --texto: #2A2236;
  --texto-suave: #6B6278;
  --borde: #E4DBEC;
  --ok: #2E7D5B;
  --error: #A8323E;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --radio: 14px;
  --radio-sm: 8px;
  --sombra: 0 10px 30px -12px rgba(51, 38, 77, .25);
  --sombra-lg: 0 24px 60px -20px rgba(51, 38, 77, .35);
  --ancho: 1240px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--crema);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lila-700); outline-offset: 3px; border-radius: 4px; }
.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; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; color: var(--lila-900); letter-spacing: .01em; }
.eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--lila-700);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--oro-500); }
.titulo-seccion { font-size: clamp(32px, 4.5vw, 48px); margin-top: 10px; }
.cabecera-seccion { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primario { background: var(--lila-800); color: var(--blanco); }
.btn-primario:hover { background: var(--lila-900); box-shadow: var(--sombra); }
.btn-oro { background: var(--oro-500); color: var(--lila-900); }
.btn-oro:hover { background: #E6C04C; box-shadow: var(--sombra); }
.btn-borde { border-color: var(--lila-800); color: var(--lila-800); background: transparent; }
.btn-borde:hover { background: var(--lila-800); color: var(--blanco); }
.btn-wa { background: #1F8F55; color: #fff; }
.btn-wa:hover { background: #18774A; box-shadow: var(--sombra); }
.btn-ml { background: #FFE600; color: #2D3277; }
.btn-ml:hover { background: #F5DC00; }
.btn-bloque { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.link-sub { color: var(--lila-700); border-bottom: 1px solid var(--oro-500); padding-bottom: 2px; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.link-sub:hover { color: var(--lila-900); }

/* ---------- Anuncio + Header ---------- */
.anuncio { background: var(--lila-900); color: var(--oro-200); text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 9px 16px; }
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.marca { display: flex; align-items: center; gap: 12px; flex: none; }
.marca img { width: 46px; height: 46px; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-texto strong { font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: .22em; color: var(--lila-900); }
.marca-texto span { font-size: 10px; letter-spacing: .42em; text-transform: uppercase; color: var(--oro-600); margin-top: 4px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto); position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--oro-500); transform: scaleX(0); transition: transform .25s; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.acciones { display: flex; align-items: center; gap: 6px; }
.icono-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--lila-900);
  transition: background .2s;
}
.icono-btn:hover { background: var(--lila-100); }
.icono-btn svg { width: 22px; height: 22px; }
.contador {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--oro-500); color: var(--lila-900);
  font-size: 11px; font-weight: 600; display: grid; place-items: center; line-height: 1;
}
.contador[hidden] { display: none; }
.menu-btn { display: none; }

.buscador-header { border-top: 1px solid var(--borde); background: var(--blanco); }
.buscador-header form { display: flex; gap: 10px; padding: 14px 0; }
.buscador-header input {
  flex: 1; border: 1px solid var(--borde); border-radius: 999px; padding: 12px 20px; background: var(--crema);
}

.menu-movil { display: none; }

@media (max-width: 960px) {
  :root { --header-h: 66px; }
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .acciones { margin-left: auto; }
  .marca img { width: 40px; height: 40px; }
  .marca-texto strong { font-size: 23px; }
  .menu-movil {
    display: block; border-top: 1px solid var(--borde); background: var(--blanco);
  }
  .menu-movil[hidden] { display: none; }
  .menu-movil a { display: block; padding: 15px 20px; border-bottom: 1px solid var(--lila-100); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--blanco) 0%, var(--crema) 55%, var(--lila-100) 100%); }
.hero::before {
  content: ""; position: absolute; width: 640px; height: 640px; right: -160px; top: -200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 187, 228, .55), rgba(201, 187, 228, 0) 70%);
}
.hero::after {
  content: ""; position: absolute; width: 420px; height: 420px; left: -180px; bottom: -220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 227, 160, .6), rgba(245, 227, 160, 0) 70%);
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; min-height: 600px; padding: 60px 20px; }
.hero h1 { font-size: clamp(46px, 7vw, 86px); font-weight: 400; margin: 18px 0 20px; }
.hero h1 em { font-style: italic; color: var(--lila-700); }
.hero p { font-size: 18px; color: var(--texto-suave); max-width: 480px; margin: 0 0 34px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual { position: relative; aspect-ratio: 1 / 1; max-width: 540px; width: 100%; justify-self: center; }
.hero-visual .aro {
  position: absolute; inset: 6%; border-radius: 50%; border: 1px solid var(--oro-500);
}
.hero-visual .aro::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed var(--lila-300); }
.hero-visual .flor { position: absolute; width: 30%; top: 2%; right: 4%; opacity: .95; animation: girar 40s linear infinite; }
.hero-frascos { position: absolute; inset: 14% 8% 6%; display: flex; align-items: end; justify-content: center; }
.hero-frascos .frasco { width: 38%; filter: drop-shadow(0 20px 26px rgba(51, 38, 77, .25)); }
.hero-frascos .frasco:nth-child(1) { transform: translateX(18%) translateY(-4%) rotate(-6deg); width: 36%; }
.hero-frascos .frasco:nth-child(2) { z-index: 2; width: 50%; }
.hero-frascos .frasco:nth-child(3) { transform: translateX(-18%) translateY(-2%) rotate(6deg); width: 36%; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-visual .flor { animation: none; } html { scroll-behavior: auto; } }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding: 44px 20px 30px; text-align: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero .eyebrow { justify-content: center; }
  .hero-visual { max-width: 380px; }
}
@media (max-width: 480px) {
  .hero-ctas .btn { width: 100%; }
}

/* ---------- Beneficios ---------- */
.beneficios { background: var(--blanco); border-block: 1px solid var(--borde); }
.beneficios-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.beneficio { display: flex; gap: 14px; align-items: center; padding: 24px 18px; }
.beneficio + .beneficio { border-left: 1px solid var(--borde); }
.beneficio svg { width: 30px; height: 30px; color: var(--lila-700); flex: none; }
.beneficio strong { display: block; font-weight: 500; font-size: 15px; }
.beneficio span { font-size: 13px; color: var(--texto-suave); }
@media (max-width: 900px) {
  .beneficios-grid { grid-template-columns: repeat(2, 1fr); }
  .beneficio:nth-child(3) { border-left: 0; }
  .beneficio:nth-child(n+3) { border-top: 1px solid var(--borde); }
}
@media (max-width: 480px) {
  .beneficio { padding: 18px 10px; flex-direction: column; text-align: center; gap: 8px; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 90px 0; }
.seccion-blanca { background: var(--blanco); }
@media (max-width: 700px) { .seccion { padding: 60px 0; } }

/* Categorías */
.categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.categoria {
  position: relative; border-radius: var(--radio); overflow: hidden; min-height: 360px;
  display: flex; flex-direction: column; justify-content: end; padding: 30px;
  color: var(--blanco); isolation: isolate; box-shadow: var(--sombra);
  transition: transform .3s, box-shadow .3s;
}
.categoria:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }
.categoria .fondo { position: absolute; inset: 0; z-index: -1; }
.categoria .fondo svg { width: 100%; height: 100%; object-fit: cover; }
.categoria::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(51,38,77,0) 35%, rgba(51,38,77,.82) 100%); }
.categoria h3 { color: var(--blanco); font-size: 40px; }
.categoria p { margin: 6px 0 16px; opacity: .9; font-size: 15px; }
.categoria .link-sub { color: var(--oro-200); align-self: start; }
@media (max-width: 860px) { .categorias { grid-template-columns: 1fr; } .categoria { min-height: 240px; } }

/* ---------- Grilla de productos ---------- */
.grilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .grilla { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grilla { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.tarjeta {
  background: var(--blanco); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--borde); transition: box-shadow .25s, transform .25s;
}
.tarjeta:hover { box-shadow: var(--sombra-lg); transform: translateY(-3px); }
.tarjeta-img { position: relative; display: block; aspect-ratio: 5 / 6; background: var(--crema); overflow: hidden; }
.tarjeta-img img, .tarjeta-img svg { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tarjeta:hover .tarjeta-img img, .tarjeta:hover .tarjeta-img svg { transform: scale(1.04); }
.etiquetas { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--blanco); color: var(--lila-800); }
.etiqueta-oferta { background: var(--oro-500); color: var(--lila-900); }
.etiqueta-agotado { background: var(--lila-900); color: var(--blanco); }
.tarjeta-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tarjeta-marca { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-600); font-weight: 500; }
.tarjeta-nombre { font-family: var(--serif); font-size: 23px; font-weight: 500; color: var(--lila-900); line-height: 1.15; }
.tarjeta-detalle { font-size: 13px; color: var(--texto-suave); }
.tarjeta-pie { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.precio { font-weight: 500; font-size: 18px; color: var(--texto); }
.precio-ant { font-size: 13px; color: var(--texto-suave); text-decoration: line-through; margin-right: 6px; font-weight: 400; }
.btn-agregar {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--lila-800); background: var(--blanco); color: var(--lila-800);
  display: grid; place-items: center; flex: none; transition: background .2s, color .2s;
}
.btn-agregar:hover:not([disabled]) { background: var(--lila-800); color: var(--blanco); }
.btn-agregar svg { width: 18px; height: 18px; }
.btn-agregar[disabled] { opacity: .35; cursor: not-allowed; }
@media (max-width: 480px) {
  .tarjeta-cuerpo { padding: 12px; }
  .tarjeta-nombre { font-size: 19px; }
  .precio { font-size: 15.5px; }
  .precio-ant { display: block; margin: 0; }
  .btn-agregar { width: 38px; height: 38px; }
}

/* Marcas */
.marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.marcas a {
  font-family: var(--serif); font-size: 22px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--blanco); color: var(--lila-800); transition: all .2s;
}
.marcas a:hover { border-color: var(--oro-500); background: var(--oro-200); }

/* Cómo comprar */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: paso; }
.paso { background: var(--blanco); border-radius: var(--radio); padding: 34px 28px; border: 1px solid var(--borde); position: relative; }
.paso::before {
  counter-increment: paso; content: "0" counter(paso);
  font-family: var(--serif); font-size: 54px; color: var(--lila-300); line-height: 1; display: block; margin-bottom: 14px;
}
.paso h3 { font-size: 26px; margin-bottom: 8px; }
.paso p { margin: 0; color: var(--texto-suave); }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } }

/* Banda CTA */
.banda {
  background: radial-gradient(circle at 85% 20%, rgba(217,178,58,.35), transparent 40%), var(--lila-800);
  color: var(--blanco); border-radius: 22px; padding: 56px; display: grid; grid-template-columns: 1.4fr auto; gap: 30px; align-items: center;
}
.banda h2 { color: var(--blanco); font-size: clamp(30px, 4vw, 44px); }
.banda p { margin: 10px 0 0; color: var(--lila-100); }
.banda .acciones-banda { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .banda { grid-template-columns: 1fr; padding: 36px 24px; } }

/* ---------- Footer ---------- */
.footer { background: var(--lila-900); color: var(--lila-100); padding: 70px 0 30px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer .marca-texto strong { color: var(--blanco); }
.footer p { color: var(--lila-300); font-size: 14px; max-width: 320px; }
.footer h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-200); margin: 6px 0 16px; font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.footer ul a:hover { color: var(--oro-200); }
.footer-legal { margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: var(--lila-300); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Encabezado de página ---------- */
.page-head { background: linear-gradient(180deg, var(--blanco), var(--crema)); padding: 46px 0 30px; border-bottom: 1px solid var(--borde); }
.page-head h1 { font-size: clamp(36px, 5vw, 56px); margin-top: 10px; }
.migas { font-size: 13px; color: var(--texto-suave); display: flex; gap: 8px; flex-wrap: wrap; }
.migas a:hover { color: var(--lila-700); }

/* ---------- Catálogo ---------- */
.catalogo { display: grid; grid-template-columns: 270px 1fr; gap: 40px; padding-top: 40px; padding-bottom: 90px; align-items: start; }
.filtros { position: sticky; top: calc(var(--header-h) + 20px); background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.filtros h2 { font-size: 26px; margin-bottom: 4px; }
.filtro { border-top: 1px solid var(--borde); padding: 18px 0; }
.filtro:first-of-type { border-top: 0; }
.filtro-titulo { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--lila-700); font-weight: 500; margin: 0 0 12px; }
.campo-busqueda { position: relative; }
.campo-busqueda input { width: 100%; border: 1px solid var(--borde); border-radius: 999px; padding: 11px 16px 11px 42px; background: var(--crema); }
.campo-busqueda svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--borde); background: var(--blanco); padding: 8px 14px; border-radius: 999px; font-size: 13px; transition: all .2s; }
.chip[aria-pressed="true"] { background: var(--lila-800); border-color: var(--lila-800); color: var(--blanco); }
.chip:hover:not([aria-pressed="true"]) { border-color: var(--lila-500); }
.lista-check { display: grid; gap: 9px; max-height: 260px; overflow: auto; padding-right: 4px; }
.lista-check label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.lista-check input { width: 18px; height: 18px; accent-color: var(--lila-700); }
.lista-check .cant { margin-left: auto; color: var(--texto-suave); font-size: 12px; }
.rango { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rango label { font-size: 12px; color: var(--texto-suave); display: grid; gap: 4px; }
.rango input { width: 100%; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 10px 12px; background: var(--crema); }
.check-simple { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check-simple input { width: 18px; height: 18px; accent-color: var(--lila-700); }

.barra-resultados { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.barra-resultados p { margin: 0; color: var(--texto-suave); font-size: 14px; }
.orden { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.orden select { border: 1px solid var(--borde); border-radius: 999px; padding: 9px 14px; background: var(--blanco); }
.btn-filtros { display: none; }
.filtros-cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.filtros-cerrar { display: none; }
.vacio { text-align: center; padding: 70px 20px; background: var(--blanco); border-radius: var(--radio); border: 1px dashed var(--lila-300); }
.vacio h3 { font-size: 30px; margin-bottom: 8px; }
.vacio p { color: var(--texto-suave); margin: 0 0 20px; }

@media (max-width: 960px) {
  .catalogo { grid-template-columns: 1fr; padding-top: 24px; }
  .btn-filtros { display: inline-flex; padding: 11px 18px; }
  .filtros {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 92vw); z-index: 80; border-radius: 0; overflow: auto;
    transform: translateX(105%); transition: transform .3s; top: 0;
  }
  .filtros.abierto { transform: none; box-shadow: var(--sombra-lg); }
  .filtros-cerrar { display: inline-grid; }
}

/* ---------- Ficha de producto ---------- */
.ficha { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; padding: 40px 0 70px; align-items: start; }
.galeria-principal { background: var(--blanco); border-radius: 20px; overflow: hidden; border: 1px solid var(--borde); aspect-ratio: 5 / 6; }
.galeria-principal img, .galeria-principal svg { width: 100%; height: 100%; object-fit: cover; }
.miniaturas { display: flex; gap: 10px; margin-top: 12px; }
.miniaturas button { width: 76px; aspect-ratio: 5/6; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--blanco); }
.miniaturas button[aria-current="true"] { border-color: var(--lila-700); }
.miniaturas img, .miniaturas svg { width: 100%; height: 100%; object-fit: cover; }
.ficha-info .tarjeta-marca { font-size: 13px; }
.ficha-info h1 { font-size: clamp(40px, 5vw, 60px); margin: 8px 0 6px; }
.ficha-sub { color: var(--texto-suave); margin: 0 0 22px; }
.ficha-precio { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.ficha-precio .precio { font-size: 32px; font-family: var(--serif); font-weight: 600; color: var(--lila-900); }
.ficha-precio .precio-ant { font-size: 18px; }
.stock { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ok); margin-bottom: 24px; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock.sin { color: var(--error); }
.ficha-desc { font-size: 17px; color: var(--texto); margin: 0 0 26px; }
.comprar { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-bottom: 12px; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); }
.cantidad button { width: 42px; height: 48px; border: 0; background: transparent; font-size: 20px; color: var(--lila-800); }
.cantidad input { width: 38px; text-align: center; border: 0; background: transparent; font-weight: 500; -moz-appearance: textfield; appearance: textfield; }
.cantidad input::-webkit-outer-spin-button, .cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad.chica button { width: 34px; height: 36px; font-size: 17px; }
.cantidad.chica input { width: 28px; font-size: 14px; }
.ficha-extra { display: grid; gap: 10px; margin-bottom: 26px; }
.piramide { margin-top: 34px; border-top: 1px solid var(--borde); }
.piramide-fila { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.piramide-fila dt { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--lila-700); font-weight: 500; padding-top: 3px; }
.piramide-fila dd { margin: 0; }
.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.dato { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 12px 14px; }
.dato span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.dato strong { font-weight: 500; font-size: 14.5px; }
@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
  .datos { grid-template-columns: 1fr 1fr; }
}

/* ---------- Carrito (drawer) ---------- */
.velo { position: fixed; inset: 0; background: rgba(42, 34, 54, .45); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .3s; }
.velo.visible { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 90; background: var(--blanco);
  display: flex; flex-direction: column; transform: translateX(105%); transition: transform .32s ease; box-shadow: var(--sombra-lg);
}
.drawer.abierto { transform: none; }
.drawer-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--borde); }
.drawer-cabecera h2 { font-size: 28px; }
.drawer-cuerpo { flex: 1; overflow: auto; padding: 8px 22px; }
.drawer-pie { border-top: 1px solid var(--borde); padding: 20px 22px; display: grid; gap: 10px; background: var(--crema); }
.fila-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.fila-total strong { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--lila-900); }

.item { display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--lila-100); align-items: center; }
.item-img { width: 78px; aspect-ratio: 5/6; border-radius: 10px; overflow: hidden; background: var(--crema); }
.item-img img, .item-img svg { width: 100%; height: 100%; object-fit: cover; }
.item-nombre { font-family: var(--serif); font-size: 19px; color: var(--lila-900); line-height: 1.15; display: block; }
.item-meta { font-size: 12.5px; color: var(--texto-suave); }
.item-controles { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.item-precio { font-weight: 500; text-align: right; white-space: nowrap; }
.btn-quitar { border: 0; background: transparent; color: var(--texto-suave); font-size: 12.5px; text-decoration: underline; padding: 4px; }
.btn-quitar:hover { color: var(--error); }
.carrito-vacio { text-align: center; padding: 50px 10px; color: var(--texto-suave); }
.carrito-vacio svg { width: 54px; height: 54px; margin: 0 auto 14px; color: var(--lila-300); }

/* ---------- Página carrito ---------- */
.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding-top: 40px; padding-bottom: 90px; align-items: start; }
.panel { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; }
.panel h2 { font-size: 30px; margin-bottom: 10px; }
.panel + .panel { margin-top: 20px; }
.form { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-size: 13px; font-weight: 500; color: var(--lila-900); }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 12px 14px; background: var(--crema);
}
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--lila-500); outline-offset: 0; background: var(--blanco); }
.campo .ayuda { font-size: 12px; color: var(--texto-suave); }
.campo.invalido input { border-color: var(--error); }
.campo .error { font-size: 12.5px; color: var(--error); display: none; }
.campo.invalido .error { display: block; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: block; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 12px 14px; background: var(--crema); font-size: 14px; cursor: pointer; transition: all .2s; }
.opcion input:checked + span { border-color: var(--lila-700); background: var(--lila-100); color: var(--lila-900); font-weight: 500; }
.opcion input:focus-visible + span { outline: 2px solid var(--lila-700); outline-offset: 2px; }
.resumen-fila { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }
.resumen-fila.total { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 14px; }
.resumen-fila.total strong { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--lila-900); }
.nota { font-size: 13px; color: var(--texto-suave); background: var(--lila-100); border-radius: var(--radio-sm); padding: 12px 14px; margin: 6px 0 0; }
.nota-oro { background: #FBF3D6; }
.metodos { display: grid; gap: 10px; margin-top: 16px; }
.metodo-prox { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed var(--lila-300); border-radius: var(--radio-sm); padding: 12px 14px; font-size: 14px; color: var(--texto-suave); }
.metodo-prox em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: var(--oro-200); color: var(--lila-900); padding: 4px 9px; border-radius: 999px; }
.confirmacion { border: 1px solid var(--ok); background: #EEF7F2; border-radius: var(--radio-sm); padding: 14px; font-size: 14px; display: grid; gap: 10px; }
.confirmacion[hidden] { display: none; }
@media (max-width: 960px) { .checkout { grid-template-columns: 1fr; padding-top: 20px; } }
@media (max-width: 480px) { .panel { padding: 20px 16px; } .opciones { grid-template-columns: 1fr; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 100;
  background: var(--lila-900); color: var(--blanco); padding: 13px 22px; border-radius: 999px; font-size: 14px;
  box-shadow: var(--sombra-lg); transition: transform .3s; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
}
.toast.visible { transform: translate(-50%, 0); }
.toast svg { width: 18px; height: 18px; color: var(--oro-500); flex: none; }

/* Botón flotante WhatsApp */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
  background: #1F8F55; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -8px rgba(31,143,85,.6);
  transition: transform .2s;
}
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { width: 30px; height: 30px; }
body.sin-flotante .wa-flotante { display: none; }

.error-404 { text-align: center; padding: 120px 20px; }
.error-404 h1 { font-size: clamp(60px, 12vw, 130px); color: var(--lila-300); }
.error-404 p { color: var(--texto-suave); margin: 10px 0 28px; }
.noscript { background: var(--oro-200); color: var(--lila-900); text-align: center; padding: 12px; font-size: 14px; }
.grilla .vacio { grid-column: 1 / -1; }
.migas-ficha { padding-top: 24px; }
[hidden] { display: none !important; }

/* ---------- Ajustes finos ---------- */
.hero-frascos { inset: 20% 12% 16%; align-items: end; }
.hero-frascos .frasco svg { width: 100%; height: auto; }
.categoria .fondo { background: radial-gradient(circle at 72% 40%, var(--blanco) 0, var(--lila-100) 45%, var(--lila-300) 100%); }
.categoria:nth-child(2) .fondo { background: radial-gradient(circle at 72% 40%, var(--blanco) 0, var(--crema-2) 45%, #D9C9A8 100%); }
.categoria:nth-child(3) .fondo { background: radial-gradient(circle at 72% 40%, var(--blanco) 0, #F7EBC4 45%, var(--oro-200) 100%); }
.categoria .fondo svg { position: absolute; right: 6%; top: 8%; height: 74%; width: auto; filter: drop-shadow(0 18px 22px rgba(51,38,77,.25)); }
.toast { bottom: auto; top: 18px; transform: translate(-50%, -160%); }
.toast.visible { transform: translate(-50%, 0); }
@media (max-width: 860px) {
  .hero .eyebrow::before { display: none; }
  .hero-visual { max-width: 320px; margin-top: 6px; }
}
@media (max-width: 960px) {
  .barra-resultados { display: grid; grid-template-columns: auto 1fr; align-items: center; }
  .barra-resultados p { grid-column: 1 / -1; grid-row: 2; }
  .orden { justify-self: end; }
}
@media (max-width: 480px) {
  .orden .orden-txt { display: none; }
  .wa-flotante { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .wa-flotante svg { width: 26px; height: 26px; }
}
.categoria h3, .categoria p { max-width: 62%; }

/* =========================================================
   Versión comercial: carrusel, banners, videos y estados
   ========================================================= */
body.cargando #contenido { min-height: 70vh; }
.hero-cargando { min-height: 520px; }
.hero-cargando .hero-inner { min-height: 520px; }

/* Carrusel de banners */
.carrusel { position: relative; overflow: hidden; background: var(--lila-100); }
.carrusel .slide { display: none; }
.carrusel .slide.activa { display: block; animation: aparecer .6s ease; }
@keyframes aparecer { from { opacity: .3; } to { opacity: 1; } }
.banner { position: relative; display: block; overflow: hidden; color: var(--blanco); }
.banner picture, .banner img { display: block; width: 100%; }
.carrusel .banner img { aspect-ratio: 16 / 6; object-fit: cover; }
.banner-texto {
  position: absolute; inset: auto 0 0 0; padding: 40px clamp(20px, 6vw, 80px);
  background: linear-gradient(180deg, rgba(51,38,77,0) 0%, rgba(51,38,77,.72) 100%);
  display: grid; gap: 10px; justify-items: start;
}
.banner-texto h2 { color: var(--blanco); font-size: clamp(28px, 4.4vw, 56px); max-width: 760px; }
.banner-texto p { margin: 0; max-width: 560px; font-size: clamp(14px, 1.6vw, 18px); color: var(--lila-100); }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.85); color: var(--lila-900); display: grid; place-items: center; z-index: 2; box-shadow: var(--sombra);
}
.carrusel-flecha svg { width: 22px; height: 22px; }
.carrusel-flecha.izq { left: 16px; } .carrusel-flecha.der { right: 16px; }
.carrusel-puntos { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.carrusel-puntos button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--blanco); background: rgba(255,255,255,.35); padding: 0; }
.carrusel-puntos button[aria-current="true"] { background: var(--oro-500); border-color: var(--oro-500); width: 26px; border-radius: 6px; }
@media (max-width: 760px) {
  .carrusel .banner img { aspect-ratio: 4 / 5; }
  .carrusel-flecha { display: none; }
  .banner-texto { padding: 28px 20px 40px; }
}
.banner-catalogo { padding-top: 24px; }
.banner-catalogo .carrusel { border-radius: var(--radio); }
.banner-catalogo .carrusel .banner img { aspect-ratio: 16 / 4; }
@media (max-width: 760px) { .banner-catalogo .carrusel .banner img { aspect-ratio: 16 / 9; } }

/* Banners promocionales */
.promos { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.promos-1 { grid-template-columns: 1fr; }
.promos-2 { grid-template-columns: repeat(2, 1fr); }
.promos .banner { border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .3s, box-shadow .3s; }
.promos .banner:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }
.promos .banner img { aspect-ratio: 4 / 3; object-fit: cover; }
.promos-1 .banner img { aspect-ratio: 16 / 5; }
.promos .banner-texto { padding: 24px; }
.promos .banner-texto h2 { font-size: clamp(24px, 2.6vw, 34px); }
@media (max-width: 860px) { .promos, .promos-2 { grid-template-columns: 1fr; } .promos-1 .banner img { aspect-ratio: 16 / 9; } }

/* Videos */
.videos { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.videos-1 { grid-template-columns: minmax(0, 900px); justify-content: center; }
.videos-2 { grid-template-columns: repeat(2, 1fr); }
.video { margin: 0; }
.video-marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--lila-900); box-shadow: var(--sombra); }
.video-marco video, .video-marco iframe, .video-marco img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-yt { position: absolute; inset: 0; border: 0; padding: 0; background: #000; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: rgba(51,38,77,.85); color: var(--oro-200); display: grid; place-items: center; transition: transform .2s; }
.video-yt:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-titulo { margin: 10px 2px 0; font-family: var(--serif); font-size: 21px; color: var(--lila-900); }
@media (max-width: 860px) { .videos, .videos-2 { grid-template-columns: 1fr; } }

/* Bloque de texto libre */
.bloque-texto { max-width: 760px; font-size: 17px; color: var(--texto); }
.bloque-texto p { margin: 0 0 16px; }

/* Avisos */
.aviso-error { margin-top: 14px; border: 1px solid var(--error); background: #FBEFF0; color: var(--error); border-radius: var(--radio-sm); padding: 12px 14px; font-size: 14px; }
.aviso-error ul { margin: 6px 0 0; padding-left: 18px; }
.confirmacion { margin-top: 6px; }
.confirmacion:focus { outline: none; }
.hero-frascos .frasco img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: 18px; }
.categoria .fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }


/* ===== GINZA · Rediseño de tienda comercial (inspiración editorial de perfumerías) ===== */
:root { --crema:#fff; --crema-2:#f7f7f7; --texto:#191919; --texto-suave:#6b6b6b; --borde:#e8e8e8; --radio:3px; --radio-sm:3px; --ancho:1440px; --header-h:86px; --sombra:0 5px 20px rgba(0,0,0,.06); --sombra-lg:0 10px 28px rgba(0,0,0,.1); }
body {background:#fff;color:#181818;font-family:Arial,Helvetica,sans-serif}
h1,h2,h3,.tarjeta-nombre {font-family:Arial,Helvetica,sans-serif;color:#202020;letter-spacing:-.02em}
.anuncio {background:#181818;color:#fff;font-weight:500;font-size:11px;letter-spacing:.1em;padding:7px 14px}
.header {background:#fff;backdrop-filter:none;border-bottom:1px solid #eee}
.header-inner {gap:32px}
.marca {width:245px;min-width:190px;max-width:29%;gap:0}
.marca img {width:100%;height:70px;object-fit:contain;object-position:left center}
.marca-texto {display:none}
.busqueda-principal {flex:1;max-width:740px;display:flex;height:44px;min-width:0;border:1px solid #bebebe;border-radius:4px;background:#fff;overflow:hidden}
.busqueda-principal input {flex:1;min-width:0;border:0;background:transparent;outline:0;padding:0 15px;font-size:15px}
.busqueda-principal button {width:48px;border:0;background:#fff;display:grid;place-items:center}
.busqueda-principal svg {height:21px;width:21px}
.acciones {margin-left:auto}
.nav-comercial {border-top:1px solid #eee;display:block;margin:0}
.nav-comercial-inner {height:48px;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,44px)}
.nav-comercial a {font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:14px 0;color:#333;white-space:nowrap}
.nav-comercial a:hover,.nav-comercial a[aria-current=page] {color:#6b528b}
.nav-comercial a::after {bottom:7px}
.icono-btn {color:#222}
.hero {background:#f5f5f5}
.hero::before,.hero::after,.hero-visual .aro,.hero-visual .flor {display:none!important}
.hero-inner {min-height:460px;grid-template-columns:1fr 1.1fr;padding-top:46px;padding-bottom:46px}
.hero h1 {font-family:Arial,Helvetica,sans-serif;letter-spacing:-.045em;font-weight:600;font-size:clamp(38px,5.4vw,70px);line-height:1.05}
.hero h1 em {color:#4c4c4c;font-style:normal}
.hero p {font-size:16px;color:#555}
.hero-visual {aspect-ratio:1.35/1;max-width:630px}
.hero-frascos {inset:4% 5%;align-items:center;justify-content:center}
.hero-frascos .frasco {filter:drop-shadow(0 15px 16px rgba(0,0,0,.11))}
.hero-frascos .frasco img {border-radius:0;object-fit:contain}
.btn {border-radius:4px;letter-spacing:.035em;font-weight:600}
.btn-primario {background:#191919;color:#fff}.btn-primario:hover {background:#493a56}
.btn-borde {border-color:#222;color:#222}.btn-borde:hover {background:#222;color:#fff}
.seccion {background:#fff}.seccion-blanca {background:#fafafa}
.titulo-seccion {font-family:Arial,Helvetica,sans-serif;font-size:clamp(24px,3vw,35px);font-weight:600}
.eyebrow {font-size:11px;letter-spacing:.15em;color:#777}
.eyebrow::before {display:none}
.grilla {gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.tarjeta {border:1px solid #efefef;border-radius:2px;transition:box-shadow .2s}
.tarjeta:hover {transform:none;box-shadow:0 4px 24px rgba(0,0,0,.09)}
.tarjeta-img {aspect-ratio:1/1.22;background:#fff}
.tarjeta-img img {object-fit:contain;padding:16px}
.tarjeta-img svg {object-fit:contain;padding:18px}
.tarjeta-cuerpo {padding:14px}
.tarjeta-marca {font-family:Arial,sans-serif;color:#222;letter-spacing:0;font-size:13px;font-weight:700;text-transform:none}
.tarjeta-nombre {font-weight:400;font-size:15px;line-height:1.45;letter-spacing:0}
.tarjeta-detalle {font-size:12px}
.etiqueta {border-radius:3px;font-size:10px;background:#191919;color:#fff;letter-spacing:0}
.etiqueta-oferta {background:#df1026;color:#fff}
.precio {font-weight:700;font-size:17px}
.btn-agregar {border-color:#222;color:#222}.btn-agregar:hover:not([disabled]) {background:#222}
.page-head {background:#fff}
.catalogo {grid-template-columns:265px minmax(0,1fr);gap:34px;padding-top:18px}
.filtros {border:0;border-radius:0;padding:0 8px 0 0}
.filtros h2 {font-size:20px;font-weight:600}
.filtro-titulo {font-size:13px;font-weight:700;text-transform:none;letter-spacing:0;color:#202020}
.chip {border-radius:4px}.chip[aria-pressed=true] {background:#202020;border-color:#202020}
.campo-busqueda input,.rango input,.orden select {border-radius:4px;background:#fff}
.accesos-catalogo {display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.accesos-catalogo a {padding:11px 20px;border:1px solid #e6e6e6;border-radius:3px;background:#fff;font-size:13px;font-weight:600}
.accesos-catalogo a:hover {border-color:#777}
.accesos-catalogo span {padding-left:12px}
.barra-resultados {border-bottom:1px solid #ededed;padding-bottom:18px}
@media(max-width:1100px) {.grilla {grid-template-columns:repeat(3,minmax(0,1fr))}.nav-comercial-inner {gap:17px}}
@media(max-width:960px) {
 :root {--header-h:68px}
 .header-inner {gap:12px}
 .marca {width:195px;min-width:140px}
 .marca img {height:55px}
 .nav-comercial {display:none}
 .busqueda-principal {max-width:none}
 .catalogo {grid-template-columns:1fr}
 .filtros {padding:24px;background:#fff;border-left:1px solid #eee}
}
@media(max-width:640px) {
 .marca {width:145px;min-width:130px}
 .marca img {height:48px}
 .header-inner {gap:6px}
 .busqueda-principal {display:none}
 .hero-inner {grid-template-columns:1fr;gap:10px;padding:36px 20px}
 .hero h1 {font-size:38px}
 .hero-visual {max-width:330px;aspect-ratio:1.35/1}
 .hero-frascos {inset:0 4%}
 .grilla {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .tarjeta-img img {padding:9px}
 .tarjeta-nombre {font-size:13px}
 .tarjeta-cuerpo {padding:10px}
 .accesos-catalogo {display:grid;grid-template-columns:1fr 1fr}
 .accesos-catalogo a {padding:10px 9px;font-size:12px}
}