/* =========================================================
   Ser Diva — Sistema de diseño
   Paleta: vino profundo + oro apagado sobre marfil cálido
   Tipografía: Cormorant (display) + Jost (cuerpo)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,400..600&family=Jost:wght@300..600&display=swap');

:root {
  --ivory: #0C0910;
  --ivory-deep: #1A1521;
  --wine: #E3B65C;
  --wine-deep: #B8863A;
  --wine-ink: #F1E7D8;
  --gold: #D9C08A;
  --gold-soft: #ECE2C8;
  --nav-gold: #E3B65C;
  --nav-gold-light: #F2D48A;
  --line: rgba(255, 255, 255, 0.13);

  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  --radius: 2px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--wine-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  color: var(--wine-deep);
}

h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
h3 { font-size: 1.35rem; font-weight: 500; }

p { margin: 0 0 var(--space-2); max-width: 62ch; }

.lede {
  font-size: 1.15rem;
  color: var(--wine-ink);
  opacity: 0.82;
  max-width: 46ch;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(12, 9, 13, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--wine);
  display: flex;
  align-items: center;
}

.brand-logo {
  height: clamp(50px, 9vw, 84px);
  width: auto;
  display: block;
}

.brand em { font-style: italic; color: var(--gold); }

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.nav-links a {
  position: relative;
  padding-bottom: 4px;
  color: var(--nav-gold);
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--nav-gold-light);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--nav-gold-light);
}

.nav-actions { display: flex; align-items: center; gap: var(--space-3); color: var(--nav-gold); }

.nav-actions .icon-btn:hover { color: var(--nav-gold-light); }

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem;
}

.cart-count {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--wine);
  color: var(--ivory);
  font-size: 0.65rem;
  border-radius: 50%;
  width: 1.1rem; height: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

.menu-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--nav-gold); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary { background: var(--wine); color: var(--ivory); }
.btn-primary:hover { background: var(--wine-deep); }

.btn-outline { background: transparent; color: var(--wine); border-color: var(--wine); }
.btn-outline:hover { background: var(--wine); color: var(--ivory); }

.btn-gold { background: var(--gold); color: var(--ivory); }
.btn-gold:hover { background: var(--gold-soft); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

.hero-visual {
  position: relative;
  aspect-ratio: 3/4;
  background: linear-gradient(155deg, var(--wine) 0%, var(--wine-deep) 65%, var(--ivory) 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  color: var(--gold-soft);
}

.hero-visual::before {
  content: '';
  position: absolute;
  inset: var(--space-4);
  border: 1px solid rgba(217, 201, 168, 0.35);
}

.hero-visual .bottle {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%);
  width: 40%;
}

.hero-visual .caption {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
}

/* ---------- Sections ---------- */

.section { padding: var(--space-5) 0; }
.section-tight { padding: var(--space-4) 0; }
.section-alt { background: var(--ivory-deep); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
}

/* ---------- Product grid & cards ---------- */

.grid-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-3);
}

.card-product {
  display: flex;
  flex-direction: column;
}

.card-product .thumb {
  aspect-ratio: 4/5;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  overflow: hidden;
  position: relative;
}

.card-product .thumb svg { width: 46%; }

.card-product .thumb img.foto-producto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card-product .thumb:hover img.foto-producto { transform: scale(1.06); }

/* ---------- Foto real de producto (miniatura de lista + detalle) ---------- */

.lista-thumb {
  width: 72px;
  height: 90px;
  flex-shrink: 0;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lista-thumb svg { width: 46%; }
.lista-thumb img.foto-producto { width: 100%; height: 100%; object-fit: cover; }

.lista-item-info { flex: 1; min-width: 180px; }

.hero-visual img.foto-producto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria-miniaturas {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.galeria-thumb {
  width: 64px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--ivory-deep);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.galeria-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-thumb:hover { opacity: 1; }
.galeria-thumb.activa { opacity: 1; border-color: var(--wine); }

.card-product .familia {
  font-size: 0.78rem;
  color: var(--gold);
  font-style: italic;
  font-family: var(--font-display);
  margin-bottom: 0.2rem;
}

.card-product h3 { margin-bottom: 0.2rem; }

.card-product .precio {
  font-family: var(--font-display);
  color: var(--wine);
  font-size: 1.15rem;
  margin-top: 0.35rem;
}

.card-product .precio-antes {
  font-size: 0.85rem;
  text-decoration: line-through;
  opacity: 0.5;
  margin-right: 0.4rem;
}

.card-product .add-row {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-2);
}

.card-product .add-row .btn { flex: 1; padding: 0.65rem 1rem; font-size: 0.85rem; }

.stock-baja {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--wine);
}

/* ---------- Filters ---------- */

.catalog-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-4);
}

.filters { border-right: 1px solid var(--line); padding-right: var(--space-3); }
.filters h4 { margin-bottom: var(--space-2); }
.filter-group { margin-bottom: var(--space-4); }
.filter-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  margin-bottom: 0.55rem;
  cursor: pointer;
}
.filter-group input[type="checkbox"],
.filter-group input[type="radio"] { accent-color: var(--wine); }

.search-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.input, select.input, textarea.input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--ivory-deep);
  border-radius: var(--radius);
  width: 100%;
  color: var(--wine-ink);
}

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

.sort-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

.disclaimer-box {
  border: 1px solid var(--line);
  background: var(--ivory-deep);
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
}
.disclaimer-box strong { color: var(--wine); }

/* ---------- Listado de catálogo sin imágenes ---------- */

.lista-productos {
  display: flex;
  flex-direction: column;
}

.lista-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.lista-item-info h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
.lista-item-info .familia {
  font-size: 0.8rem;
  font-style: italic;
  font-family: var(--font-display);
  color: var(--gold);
  margin: 0;
}

.lista-formatos {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.formato-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--wine-ink);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.formato-btn:hover { border-color: var(--wine); color: var(--wine); }
.formato-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.formato-btn .formato-precio {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--wine);
}

@media (max-width: 640px) {
  .lista-item { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .lista-formatos { width: 100%; }
  .formato-btn { flex: 1; }
}

/* ---------- Cart / checkout ---------- */

.checkout-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

.steps {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
}

.step { display: flex; align-items: center; gap: 0.5rem; opacity: 0.45; }
.step.active { opacity: 1; color: var(--wine); }
.step .num {
  width: 1.6rem; height: 1.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  font-family: var(--font-display);
}

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.cart-item .thumb-sm {
  width: 72px; height: 90px;
  background: var(--ivory-deep);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.cart-item .thumb-sm svg { width: 60%; }

.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  width: fit-content;
}
.qty-control button {
  background: none; border: none; width: 2rem; height: 2rem;
  cursor: pointer; font-size: 1rem; color: var(--wine);
}
.qty-control span { width: 2rem; text-align: center; font-size: 0.9rem; }

.remove-link {
  font-size: 0.8rem;
  color: var(--wine);
  opacity: 0.6;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.remove-link:hover { opacity: 1; text-decoration: underline; }

.summary-box {
  border: 1px solid var(--line);
  padding: var(--space-3);
  background: var(--ivory-deep);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}

.summary-row.total {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--wine);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
  opacity: 0.75;
}

.transbank-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  opacity: 0.7;
  margin-top: var(--space-2);
}

.empty-state {
  text-align: center;
  padding: var(--space-5) 0;
}
.empty-state p { margin: 0 auto var(--space-3); }

/* ---------- Members area ---------- */

.auth-shell {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--space-4);
  border: 1px solid var(--line);
  background: var(--ivory-deep);
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-size: 0.92rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-left: none; border-right: none; border-top: none;
  font-family: var(--font-body);
  color: var(--wine-ink);
}
.auth-tab.active { border-bottom-color: var(--wine); color: var(--wine); }

.field-full { margin-bottom: var(--space-2); }

.member-card {
  border: 1px solid var(--line);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.order-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.tag-estado {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  color: var(--wine);
}

.form-msg {
  font-size: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--wine);
  background: var(--ivory-deep);
  margin-bottom: var(--space-2);
  display: none;
}
.form-msg.show { display: block; }
.form-msg.error { border-color: #8a2b2b; }

/* ---------- Policy page ---------- */

.policy-nav {
  position: sticky;
  top: 90px;
  font-size: 0.9rem;
  align-self: start;
}
.policy-nav a { display: block; padding: 0.4rem 0; opacity: 0.7; border-left: 2px solid transparent; padding-left: 0.8rem; }
.policy-nav a:hover { opacity: 1; border-color: var(--gold); }

.policy-content h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.policy-content h2:first-child { margin-top: 0; }
.policy-content p, .policy-content li { opacity: 0.85; max-width: 68ch; }
.policy-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-5); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-4);
  background: var(--ivory-deep);
  color: var(--wine-ink);
}
.site-footer a { opacity: 0.75; }
.site-footer a:hover { opacity: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.footer-grid h4 { color: var(--wine-ink); font-size: 0.85rem; margin-bottom: var(--space-2); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.footer-bottom {
  border-top: 1px solid rgba(250,247,242,0.15);
  padding-top: var(--space-3);
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--ivory);
  color: var(--wine-ink);
  padding: 0.9rem 1.6rem;
  font-size: 0.9rem;
  border-radius: var(--radius);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s;
  border: 1px solid var(--line);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }

/* ---------- Botón flotante de WhatsApp ---------- */

.whatsapp-float {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(12, 9, 13, 0.28);
  z-index: 90;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 30px; height: 30px; }

@media (max-width: 640px) {
  .whatsapp-float { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
  .grid-products { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: var(--space-3); }
  .checkout-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .policy-layout { grid-template-columns: 1fr; }
  .policy-nav { position: static; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .policy-nav a { border-left: none; padding-left: 0; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }

  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ivory-deep);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
    padding: 0.5rem 0;
  }

  .nav-links.nav-open li { width: 100%; }

  .nav-links.nav-open a {
    display: block;
    padding: 0.9rem var(--space-3);
    font-size: 1rem;
  }

  .nav-links.nav-open a.active::after { display: none; }
  .nav-links.nav-open a.active { background: rgba(255, 255, 255, 0.05); }

  .menu-toggle.active svg path { display: none; }
  .menu-toggle.active { position: relative; }
  .menu-toggle.active::before,
  .menu-toggle.active::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 50%;
    height: 1.5px;
    background: currentColor;
  }
  .menu-toggle.active::before { transform: translateY(0) rotate(45deg); }
  .menu-toggle.active::after { transform: translateY(0) rotate(-45deg); }

}

@media (max-width: 640px) {
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  h1 { font-size: 2.4rem; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* ---------- Hero 3D protagonista ---------- */

.p3d-hero-section {
  background:
    radial-gradient(ellipse 90% 60% at 50% 60%,
      rgba(227,182,92,0.05) 0%,
      rgba(227,182,92,0.02) 45%,
      rgba(227,182,92,0) 75%),
    var(--ivory);
  padding: var(--space-5) 0 var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.p3d-stage-wrap {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.p3d-spotlight {
  position: absolute;
  top: -60%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 45%,
    rgba(255,235,195,0.22) 0%,
    rgba(240,210,160,0.10) 30%,
    rgba(227,182,92,0) 60%);
  pointer-events: none;
  z-index: 0;
}

.p3d-ground-glow {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 55%;
  height: 14%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(227,182,92,0.22) 0%, rgba(227,182,92,0.08) 45%, rgba(227,182,92,0) 78%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 0;
}

.p3d-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.p3d-particles span {
  position: absolute;
  bottom: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,222,180,0.6) 0%, rgba(240,222,180,0.15) 55%, rgba(240,222,180,0) 78%);
  animation: p3dFloat ease-in-out infinite;
  opacity: 0;
}

.p3d-particles span.p3d-alt {
  background: radial-gradient(circle, rgba(255,244,222,0.5) 0%, rgba(255,244,222,0.12) 55%, rgba(255,244,222,0) 78%);
  animation-name: p3dFloatAlt;
}

.p3d-particles span:nth-child(1)  { left: 12%; width:10px; height:10px; filter: blur(1px);   animation-duration: 22s; animation-delay: 0s; }
.p3d-particles span:nth-child(2)  { left: 22%; width:5px;  height:5px;  filter: blur(2.2px); animation-duration: 26s; animation-delay: 3s; }
.p3d-particles span:nth-child(3)  { left: 33%; width:14px; height:14px; filter: blur(0.6px); animation-duration: 20s; animation-delay: 6s; }
.p3d-particles span:nth-child(4)  { left: 62%; width:6px;  height:6px;  filter: blur(2px);   animation-duration: 25s; animation-delay: 1.5s; }
.p3d-particles span:nth-child(5)  { left: 72%; width:12px; height:12px; filter: blur(1px);   animation-duration: 23s; animation-delay: 8s; }
.p3d-particles span:nth-child(6)  { left: 84%; width:4px;  height:4px;  filter: blur(2.4px); animation-duration: 27s; animation-delay: 4.5s; }
.p3d-particles span:nth-child(7)  { left: 90%; width:9px;  height:9px;  filter: blur(1.4px); animation-duration: 21s; animation-delay: 10s; }
.p3d-particles span:nth-child(8)  { left: 5%;  width:7px;  height:7px;  filter: blur(1.8px); animation-duration: 24s; animation-delay: 12s; }
.p3d-particles span:nth-child(9), .p3d-particles span:nth-child(10),
.p3d-particles span:nth-child(11), .p3d-particles span:nth-child(12) { display: none; }

@keyframes p3dFloat {
  0%   { transform: translate(0, 0) scale(0.85); opacity: 0; }
  10%  { opacity: 0.55; }
  28%  { transform: translate(10px, -85px) scale(1); }
  46%  { transform: translate(-8px, -150px) scale(0.95); opacity: 0.3; }
  64%  { transform: translate(9px, -195px) scale(1); opacity: 0.45; }
  82%  { transform: translate(-5px, -235px) scale(0.9); opacity: 0.2; }
  100% { transform: translate(4px, -270px) scale(0.8); opacity: 0; }
}

@keyframes p3dFloatAlt {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  12%  { opacity: 0.5; }
  30%  { transform: translate(-9px, -70px) scale(1); }
  50%  { transform: translate(7px, -140px) scale(1.05); opacity: 0.35; }
  70%  { transform: translate(-10px, -195px) scale(0.95); opacity: 0.4; }
  88%  { transform: translate(6px, -240px) scale(0.85); opacity: 0.18; }
  100% { transform: translate(-3px, -270px) scale(0.75); opacity: 0; }
}

.p3d-hero-viewer {
  position: relative;
  z-index: 2;
}

.p3d-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--wine-deep);
  max-width: 20ch;
  margin: 0 auto var(--space-3);
  line-height: 1.2;
}

.p3d-hero-viewer {
  width: 100%;
  max-width: 620px;
  height: min(560px, 78vw);
  display: block;
  margin: 0 auto;
  --poster-color: transparent;
  background: transparent;
  background-color: transparent;
}

@media (max-width: 640px) {
  .p3d-hero-viewer { height: 420px; }
  .p3d-hero-title { max-width: 22ch; }
}

/* ---------- Showcase Black Parfums ---------- */

.bp-section {
  background: var(--ivory-deep);
  color: #EDE3E6;
  padding: var(--space-6) 0;
}

.bp-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-soft);
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.bp-section h2 { color: #fff; }

.bp-lede {
  color: #C9BBA0;
  max-width: 52ch;
  font-size: 1.05rem;
}

.bp-single {
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-4) 0;
}
.bp-single img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Perfume 3D + vaporizado ---------- */

.p3d-wrap {
  display: flex;
  justify-content: center;
  padding: 3.2rem 0 var(--space-2);
}

.p3d-stage {
  position: relative;
  width: min(230px, 54vw);
  perspective: 1100px;
  overflow: visible;
}

.p3d-glow {
  position: absolute;
  inset: -25% -35%;
  background: radial-gradient(circle, rgba(227, 182, 92, 0.28) 0%, rgba(227, 182, 92, 0) 70%);
  filter: blur(14px);
  animation: p3dPulse 7s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.p3d-inner {
  position: relative;
  z-index: 1;
  animation: p3dSway 7s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

.p3d-inner img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.5));
}

@keyframes p3dSway {
  0%, 100% { transform: rotateY(-6deg) rotateX(1.5deg) translateY(0); }
  50%      { transform: rotateY(6deg) rotateX(-1.5deg) translateY(-6px); }
}

@keyframes p3dPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

.spray-origin {
  position: absolute;
  left: 78%;
  top: 1.5%;
  width: 1px;
  height: 1px;
  z-index: 2;
}

.mist {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  margin-left: -13px; margin-top: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,236,220,0.4) 45%, rgba(255,236,220,0) 75%);
  animation: mistPuff 3.6s ease-out infinite;
  opacity: 0;
}
.mist.m2 { animation-delay: 0.12s; }
.mist.m3 { animation-delay: 0.22s; }

@keyframes mistPuff {
  0%        { transform: translate(0, 0) scale(0.15); opacity: 0; }
  4%        { opacity: 0.9; }
  20%       { transform: translate(-3px, -14px) scale(0.7); opacity: 0.7; }
  45%       { transform: translate(-7px, -30px) scale(1.15); opacity: 0.3; }
  60%,100%  { transform: translate(-9px, -40px) scale(1.4); opacity: 0; }
}

.droplet {
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  animation: dropletFly 3.6s ease-out infinite;
  opacity: 0;
}
.droplet.d1 { --dx: -16px; --dy: -38px; animation-delay: 0s; }
.droplet.d2 { --dx: 4px;   --dy: -44px; animation-delay: 0.08s; }
.droplet.d3 { --dx: -8px;  --dy: -32px; animation-delay: 0.18s; }
.droplet.d4 { --dx: 11px;  --dy: -36px; animation-delay: 0.26s; }

@keyframes dropletFly {
  0%       { transform: translate(0, 0) scale(0.4); opacity: 0; }
  6%       { opacity: 1; }
  50%      { transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(1); opacity: 0.8; }
  62%,100% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
}

.p3d-caption {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-soft);
  margin-top: var(--space-2);
  font-size: 0.95rem;
}

.bp-carousel {
  position: relative;
  margin: var(--space-4) 0;
  border-radius: var(--radius);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.6);
}

.bp-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--radius);
}
.bp-carousel-track::-webkit-scrollbar { display: none; }

.bp-section { --vineta: rgba(26, 21, 33, 0.94); }
.bp-section-alt { --vineta: rgba(42, 20, 32, 0.94); }

.bp-slide { flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; position: relative; }

.bp-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, var(--vineta, rgba(26,21,33,0.94)) 96%);
}

.bp-slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  animation: bpKenBurns 18s ease-in-out infinite alternate;
}

@keyframes bpKenBurns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .bp-slide img { animation: none; }
}

/* Sección Red Parfums: mismo lenguaje visual, con un fondo levemente más cálido/rosado */
.bp-section-alt {
  background: linear-gradient(180deg, var(--ivory-deep) 0%, #2A1420 100%);
}

.bp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(12, 9, 13, 0.55);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.bp-arrow:hover { background: rgba(12, 9, 13, 0.8); }
.bp-arrow-prev { left: 0.8rem; }
.bp-arrow-next { right: 0.8rem; }

.bp-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-2);
}

.bp-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.bp-dot.active { background: #fff; }

@media (max-width: 640px) {
  .bp-arrow { width: 36px; height: 36px; font-size: 1.2rem; }
}

.bp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-soft);
  border: 1px solid rgba(237, 227, 230, 0.25);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}

.bp-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }

.btn-bp {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-bp:hover { background: rgba(255,255,255,0.08); }

/* ---------- Secciones cinematográficas (fondo de foto a pantalla completa) ---------- */

.cinematic-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ivory-deep);
  min-height: 60vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 900px) {
  .cinematic-banner { background-attachment: fixed; }
}

.cinematic-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,12,0.55) 0%, rgba(10,8,12,0.78) 55%, rgba(10,8,12,0.92) 100%);
}

.cinematic-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

/* En carruseles con flechas laterales, el texto deja espacio libre para que no quede bajo ellas */
@media (max-width: 640px) {
  .cinematic-carousel .cinematic-content {
    padding-left: 3.6rem;
    padding-right: 3.6rem;
  }
}

.cinematic-content .bp-tag { justify-content: center; margin-left: auto; margin-right: auto; }
.cinematic-content h2 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.6rem); margin-top: var(--space-2); }
.cinematic-content .lede { color: rgba(255,255,255,0.85); max-width: 56ch; margin: var(--space-2) auto var(--space-3); }
.cinematic-content .btn-bp { border-color: rgba(255,255,255,0.55); }

.cinematic-banner-alt { min-height: 50vh; }

.cinematic-banner-hero { min-height: 78vh; }
@media (max-width: 700px) { .cinematic-banner-hero { min-height: 70vh; } }
@media (min-width: 900px) { .cinematic-banner-hero { min-height: 94vh; } }

.cinematic-banner-black { min-height: 60vh; }

.cinematic-banner-black .cinematic-overlay {
  background:
    linear-gradient(180deg, rgba(10,8,12,0.68) 0%, rgba(10,8,12,0.85) 55%, rgba(10,8,12,0.94) 100%);
}

/* Carrusel de fondo: varias fotos apiladas, una visible a la vez con transición suave */
.cinematic-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cinematic-bg.active { opacity: 1; }

@media (min-width: 900px) {
  .cinematic-bg { background-attachment: fixed; }
}

.cinematic-carousel .bp-arrow,
.cinematic-carousel .cinematic-dots {
  z-index: 2;
}

.cinematic-dots {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
}

.cinematic-banner-hero .cinematic-overlay {
  background:
    linear-gradient(180deg, rgba(10,8,12,0.30) 0%, rgba(10,8,12,0.55) 55%, rgba(10,8,12,0.82) 100%);
}

/* Carrusel cinemático solo con imágenes (sin texto encima) */
.cinematic-banner-visual {
  width: 100%;
  min-height: 0;
  height: clamp(320px, 56.25vw, 88vh);
}
.cinematic-banner-visual .cinematic-bg { background-attachment: scroll; }
.cinematic-banner-visual .cinematic-overlay {
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,8,12,0.18) 0%, rgba(10,8,12,0) 22%, rgba(10,8,12,0) 72%, rgba(10,8,12,0.5) 100%);
}
@media (max-width: 700px) {
  .cinematic-banner-visual { height: 62vw; }
}


/* ---------- Franja de confianza ---------- */

.trust-strip {
  background: var(--ivory-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-2);
}

@media (min-width: 860px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--wine-ink);
  font-size: 0.85rem;
  line-height: 1.25;
}

.trust-item svg { flex-shrink: 0; color: var(--wine); }

/* ---------- Animación de aparición al hacer scroll ---------- */

.reveal {
  opacity: .45;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mejora progresiva: en navegadores con scroll-driven animations nativas
   (Chrome/Edge/Safari recientes) esto se anima solo con CSS, sin JavaScript. */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: bpRevealIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

@keyframes bpRevealIn {
  from { opacity: .45; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal.is-visible .trust-item,
.reveal.is-visible .card-product {
  animation: revealItem .35s ease both;
}

.trust-grid .trust-item:nth-child(1) { animation-delay: .05s; }
.trust-grid .trust-item:nth-child(2) { animation-delay: .15s; }
.trust-grid .trust-item:nth-child(3) { animation-delay: .25s; }
.trust-grid .trust-item:nth-child(4) { animation-delay: .35s; }

.grid-products .card-product:nth-child(1) { animation-delay: .05s; }
.grid-products .card-product:nth-child(2) { animation-delay: .15s; }
.grid-products .card-product:nth-child(3) { animation-delay: .25s; }
.grid-products .card-product:nth-child(4) { animation-delay: .35s; }

@keyframes revealItem {
  from { opacity: .5; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible .trust-item, .reveal.is-visible .card-product {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Micro-interacciones ---------- */

.btn {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary:hover, .btn-bp:hover {
  box-shadow: 0 8px 20px rgba(227, 182, 92, 0.25);
}

.card-product {
  transition: transform .35s ease, box-shadow .35s ease;
}

.card-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.formato-btn {
  transition: transform .2s ease, background-color .2s ease;
}

.formato-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* =========================================================
   Portada 2026 — capa premium
   Grano cinematográfico, tipografía editorial cinética,
   layout en espejo y cursor personalizado.
   Todo lo nuevo va bajo .home-premium para no afectar
   ninguna otra página del sitio.
   ========================================================= */

.home-premium { position: relative; }

/* Grano sutil sobre toda la portada (textura de película, no imagen pesada) */
.home-premium::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Cursor personalizado (solo en mouse/trackpad; en táctil no aplica) */
@media (hover: hover) and (pointer: fine) {
  .home-premium a,
  .home-premium button {
    cursor: pointer;
  }
  .home-premium .bp-carousel,
  .home-premium .p3d-hero-viewer,
  .home-premium .card-product .thumb {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%23E3B65C' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23E3B65C'/%3E%3C/svg%3E") 20 20, pointer;
  }
}

/* Tipografía editorial: los títulos de línea ganan protagonismo */
.bp-section h2 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: -0.01em;
  line-height: 1.02;
}

/* Peso variable de la fuente (Cormorant) animado con el scroll: de liviana a firme */
@supports (animation-timeline: view()) {
  .p3d-hero-title {
    animation: heroPesoIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
@keyframes heroPesoIn {
  from { font-variation-settings: 'wght' 360; opacity: 0.35; transform: translateY(18px); }
  to   { font-variation-settings: 'wght' 560; opacity: 1; transform: translateY(0); }
}

/* Línea editorial cinética: palabras que ganan opacidad al entrar en pantalla */
.kinetic-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  line-height: 1.25;
  color: var(--wine-ink);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
}
.kinetic-line span { display: inline-block; opacity: 1; }

@supports (animation-timeline: view()) {
  .kinetic-line span {
    opacity: 0.18;
    animation: kineticWord linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 55%;
  }
  @keyframes kineticWord { to { opacity: 1; } }
}

.kinetic-section {
  padding: var(--space-5) 0;
  text-align: center;
  background: var(--ivory);
}

@media (max-width: 899px) {
  .p3d-hero-section { padding-bottom: 2rem; border-bottom: none; }
}

@media (max-width: 899px) {
  .kinetic-section { padding: var(--space-3) 0; }
}

/* Layout editorial en espejo: foto + texto, alternando de lado según la línea */
@media (min-width: 900px) {
  .editorial-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-5);
    align-items: center;
  }
  .editorial-split .editorial-copy { order: 1; }
  .editorial-split .editorial-media { order: 2; }
  .editorial-split-reverse .editorial-copy { order: 2; }
  .editorial-split-reverse .editorial-media { order: 1; }
  .editorial-split .bp-carousel,
  .editorial-split .bp-actions { margin-left: 0; margin-right: 0; }
}

@media (max-width: 899px) {
  .editorial-split {
    display: flex;
    flex-direction: column;
  }
  .editorial-split .editorial-media {
    order: -1;
    width: calc(100% + var(--space-3) * 2);
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    margin-top: calc(var(--space-6) * -1);
    margin-bottom: var(--space-4);
  }
  .editorial-split .editorial-copy {
    text-align: center;
  }
  .editorial-split .editorial-copy .bp-lede {
    margin-left: auto;
    margin-right: auto;
  }
  .editorial-split .bp-actions {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-line span,
  .p3d-hero-title {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Producto destacado: misma estructura que la ficha de producto ---------- */
.spot-section { padding: var(--space-5) 0; }
.spot-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.spot-visual { padding: 0; overflow: hidden; }
.spot-visual::before { display: none; }
.spot-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 51% 50%;
  display: block;
}
.spot-title { font-size: 2.6rem; font-weight: 400; }
.spot-title a { color: inherit; text-decoration: none; }
.spot-title a:hover { text-decoration: underline; }
.spot-section .precio { font-size: 1.6rem; margin: 1rem 0; }
.spot-section .qty-control { margin-bottom: 1.2rem; }

@media (max-width: 900px) {
  .spot-grid { gap: var(--space-3); }
}
@media (max-width: 560px) {
  .spot-grid { grid-template-columns: 1fr; }
  .spot-title { font-size: 2.2rem; }
}

/* ---------- Portada: tres mundos (árabe · francesa · belleza) ---------- */

.portal-intro { text-align: center; padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.2rem, 3vw, 2rem); }
.portal-intro .bp-tag { justify-content: center; margin: 0 auto; }
.portal-intro h1 { font-size: clamp(2.1rem, 6vw, 3.8rem); margin: .6rem 0 .3rem; }
.portal-intro .lede { opacity: .8; margin: 0; }

.portal { padding-bottom: clamp(2rem, 6vw, 4.5rem); }
.portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.6rem, 1.6vw, 1.2rem);
}
.portal-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 62vh, 620px);
  overflow: hidden;
  border: 1px solid rgba(217, 192, 138, 0.28);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.portal-belleza { grid-column: 1 / -1; min-height: clamp(260px, 44vh, 460px); }
.portal-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.portal-bg-arabe {
  background-color: #150d08;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(227,182,92,.35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23E3B65C' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M40 8l9.4 22.6L72 40l-22.6 9.4L40 72l-9.4-22.6L8 40l22.6-9.4z'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #2a1a0c 0%, #120b07 55%, #0c0910 100%);
  background-size: auto, 80px 80px, cover;
}
.portal-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,8,12,.05) 30%, rgba(10,8,12,.55) 62%, rgba(10,8,12,.92) 100%);
}
.portal-copy {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1rem, 3vw, 2.4rem);
  width: 100%;
}
.portal-kicker { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.portal-title { font-family: var(--font-display); font-size: clamp(1.35rem, 3.6vw, 2.8rem); line-height: 1.1; }
.portal-text { font-size: .95rem; color: rgba(255,255,255,.8); max-width: 38ch; }
.portal-cta {
  margin-top: .6rem;
  align-self: flex-start;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nav-gold-light);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.portal-cta span { display: inline-block; transition: transform .3s ease; }
.portal-tile:hover .portal-bg,
.portal-tile:focus-visible .portal-bg { transform: scale(1.05); }
.portal-tile:hover .portal-cta span { transform: translateX(4px); }
.portal-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 640px) {
  .portal-tile { min-height: 58vw; }
  .portal-arabe, .portal-francesa { min-height: 118vw; max-height: 520px; }
  .portal-text { display: none; }
  .portal-kicker { font-size: .62rem; letter-spacing: .16em; }
  .portal-cta { font-size: .72rem; }
  .portal-belleza .portal-text { display: block; }
}

/* ---------- Encabezado de páginas de sección ---------- */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 56vh, 560px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border-bottom: 1px solid rgba(217, 192, 138, 0.2);
}
.page-hero-content { padding: var(--space-5) var(--space-3); }
.page-hero .bp-tag { justify-content: center; margin: 0 auto; }
.page-hero h1, .page-title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.8rem); margin: .8rem 0 0; }
.page-hero .lede { color: rgba(255,255,255,.82); max-width: 58ch; margin: 1rem auto 0; }

.coming-soon { text-align: center; max-width: 620px; margin: 0 auto; }
.coming-soon .lede { margin: 1rem auto 1.5rem; }

.card-product .precio-desde {
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
  margin-right: .35rem;
}
.card-product .add-row .btn { justify-content: center; }

@media (max-width: 640px) {
  .section-head { flex-wrap: wrap; align-items: flex-start; }
  .card-product h3 { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-bg, .portal-cta span { transition: none; }
}

html, body { overflow-x: clip; }
@media (max-width: 640px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
}
.portal-intro .lede { margin: 0 auto; }
.portal-belleza .portal-overlay {
  background: linear-gradient(90deg, rgba(10,8,12,.9) 0%, rgba(10,8,12,.6) 45%, rgba(10,8,12,.1) 80%),
              linear-gradient(180deg, transparent 50%, rgba(10,8,12,.6) 100%);
}

/* Portada a pantalla completa: bloques sin márgenes, bordes ni separación */
.portal { padding-bottom: 0; }
.portal-grid { gap: 0; }
.portal-tile { border: none; min-height: clamp(360px, 78vh, 820px); }
.portal-belleza { min-height: clamp(300px, 60vh, 640px); }
@media (max-width: 640px) {
  .portal-arabe, .portal-francesa { min-height: 130vw; max-height: none; }
  .portal-belleza { min-height: 90vw; }
}

/* Cormorant tiene letra más fina y pequeña: títulos un poco más firmes y grandes */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.8rem, 5.6vw, 4.8rem); }
h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
body { letter-spacing: 0.01em; }

/* ---------- Perfumería francesa ---------- */
/* Carruseles editoriales a todo el ancho en móvil (corrige el desborde lateral) */
@media (max-width: 899px) {
  .editorial-split .editorial-media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
.p3d-spotlight { max-width: 100%; }
.p3d-stage-wrap { overflow: hidden; }

.hero-actions { justify-content: center; gap: .8rem; }

.subnav {
  position: sticky;
  top: var(--header-h, 0px);
  z-index: 30;
  background: rgba(12, 9, 13, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(217, 192, 138, 0.18);
}
.subnav-track {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  padding: .85rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.subnav-track::-webkit-scrollbar { display: none; }
.subnav a {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}
.subnav a:hover { opacity: 1; color: var(--nav-gold-light); }
@media (max-width: 640px) { .subnav-track { justify-content: flex-start; } }

[id="red-parfums"], [id="black-parfums"], [id="masculinas"], [id="femeninas"], [id="destacados"] { scroll-margin-top: 150px; }

/* Botones apilados del mismo ancho en móvil */
@media (max-width: 640px) {
  .bp-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .bp-actions .btn { justify-content: center; }
  .spot-section { padding-top: 2rem; padding-bottom: 2.5rem; }
  .spot-title { font-size: 2rem; }
}

/* ---------- Vitrina del modelo 3D (Black Parfums) ---------- */
.vitrina {
  max-width: 560px;
  margin: 0 auto;
  border-radius: 4px;
  isolation: isolate;
  overflow: hidden;
  background: #07060a;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
}
.vitrina .p3d-hero-viewer { position: relative; z-index: 3; height: min(600px, 100vw); }
.vitrina-fondo {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%, rgba(255,240,215,.10), transparent 70%),
    linear-gradient(180deg, #121017 0%, #0a090d 60%, #050407 100%);
}
/* Haz de luz cenital: degradado suave, sin bordes definidos */
.vitrina-haz {
  position: absolute; z-index: 1; left: 50%; top: -25%;
  width: 90%; height: 125%;
  transform-origin: 50% 0;
  background: radial-gradient(ellipse 32% 70% at 50% 0%, rgba(255,242,220,.20) 0%, rgba(255,238,210,.08) 45%, rgba(255,236,205,0) 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 50% 10%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 60% 90% at 50% 10%, #000 30%, transparent 85%);
  mix-blend-mode: screen;
  animation: vitrinaHaz 9s ease-in-out infinite alternate;
}
@keyframes vitrinaHaz {
  0%   { transform: translateX(-50%) rotate(-4deg); opacity: .8; }
  50%  { opacity: 1; }
  100% { transform: translateX(-50%) rotate(4deg); opacity: .85; }
}
/* Pedestal negro satinado: volumen por degradados, sin aristas duras */
.vitrina-pedestal {
  position: absolute; z-index: 2; left: 50%; bottom: 0;
  width: 66%; height: 13.8%;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.6)),
    linear-gradient(180deg, #34303b 0%, #1c1921 16%, #100e14 55%, #08070a 100%);
  box-shadow: 0 -30px 50px -30px rgba(255,236,200,.12);
}
.vitrina-pedestal::before {           /* luz que resbala por el canto superior */
  content: ''; position: absolute; left: 4%; right: 4%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,240,215,.35) 50%, transparent);
  filter: blur(1px);
}
.vitrina-pedestal span {              /* reflejo del haz sobre la superficie */
  position: absolute; left: 50%; top: -14px; width: 52%; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 60%, rgba(255,238,205,.28), transparent 70%);
  filter: blur(6px);
  animation: vitrinaPiso 9s ease-in-out infinite alternate;
}
@keyframes vitrinaPiso {
  0%   { transform: translateX(-58%); opacity: .75; }
  100% { transform: translateX(-42%); opacity: 1; }
}
.vitrina-polvo { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
/* Cristal de la vitrina: reflejos difusos en los bordes, sin líneas marcadas */
.vitrina-cristal {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden;
  box-shadow:
    inset 26px 0 40px -30px rgba(255,255,255,.20),
    inset -26px 0 40px -30px rgba(255,255,255,.14),
    inset 0 70px 70px -70px rgba(255,255,255,.12),
    inset 0 0 90px rgba(0,0,0,.55);
}
.vitrina-brillo {
  position: absolute; top: -20%; left: -60%; width: 38%; height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.03) 65%, transparent 100%);
  filter: blur(8px);
  transform: skewX(-14deg);
  animation: vitrinaBrillo 11s ease-in-out infinite;
}
@keyframes vitrinaBrillo {
  0%, 15% { left: -60%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrina-haz, .vitrina-pedestal span, .vitrina-brillo { animation: none; }
}

/* Vitrina sin bordes visibles: se funde con el fondo de la sección */
.vitrina {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 55%, transparent 100%);
}
.vitrina-fondo {
  background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(255,240,215,.08), transparent 75%);
}
.vitrina-cristal { box-shadow: none; }
.vitrina-pedestal {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, #000 30%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, #000 30%, transparent);
          mask-composite: intersect;
  border-radius: 0;
}

/* =========================================================
   Perfumería árabe
   ========================================================= */
.arabe { --ar-oro: #E3B65C; --ar-oro2: #F2D48A; }
.ar-hero {
  position: relative; min-height: clamp(560px, 92vh, 900px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #2a1a0c 0%, #140c07 55%, #0a0709 100%);
}
.ar-hero-patron {
  position: absolute; inset: -20%; z-index: -3; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E3B65C' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M60 10l14 36 36 14-36 14-14 36-14-36-36-14 36-14z'/%3E%3Crect x='33' y='33' width='54' height='54' transform='rotate(45 60 60)'/%3E%3Crect x='33' y='33' width='54' height='54'/%3E%3Ccircle cx='60' cy='60' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 20%, transparent 80%);
  animation: arDeriva 60s linear infinite;
}
@keyframes arDeriva { to { transform: translate(120px, 120px); } }
.ar-hero-luz {
  position: absolute; z-index: -2; left: 50%; top: 40%; width: 70vmin; height: 70vmin;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(242,212,138,.35) 0%, rgba(227,182,92,.12) 40%, transparent 70%);
  animation: arLatido 7s ease-in-out infinite;
}
@keyframes arLatido { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .75; } }
/* Arco de mihrab dorado detrás del título */
.ar-arco {
  position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(560px, 86vw); height: min(640px, 110vw);
  transform: translate(-50%, -52%);
  border: 1px solid rgba(227,182,92,.45);
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  box-shadow: inset 0 0 60px rgba(227,182,92,.08), 0 0 40px rgba(227,182,92,.06);
}
.ar-arco::before {
  content: ''; position: absolute; inset: 14px;
  border: 1px solid rgba(227,182,92,.22);
  border-radius: inherit;
}
.ar-hero-copia { position: relative; max-width: 640px; padding-top: 4rem; padding-bottom: 4rem; }
.ar-hero-copia .bp-tag { margin: 0 auto; justify-content: center; }
.ar-hero h1 {
  font-size: clamp(2.8rem, 9vw, 5.6rem); margin: 1rem 0 .6rem; line-height: 1;
  background: linear-gradient(180deg, #FFF3D6 0%, var(--ar-oro2) 45%, var(--ar-oro) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ar-hero .lede { color: rgba(255,255,255,.82); max-width: 46ch; margin: 0 auto 1.8rem; }
.ar-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--ar-oro));
  animation: arBaja 2.4s ease-in-out infinite;
}
@keyframes arBaja { 0% { transform: translateY(-12px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }

.ar-cifras { border-top: 1px solid rgba(227,182,92,.25); border-bottom: 1px solid rgba(227,182,92,.25); background: #0e0a0c; }
.ar-cifras-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ar-cifras-grid > div { padding: 1.6rem .5rem; display: flex; flex-direction: column; gap: .2rem; }
.ar-cifras-grid > div + div { border-left: 1px solid rgba(227,182,92,.18); }
.ar-cifras strong { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 500; color: var(--ar-oro2); }
.ar-cifras span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

.ar-titulo { text-align: center; margin-bottom: var(--space-4); }
.ar-titulo .lede { opacity: .75; margin: .4rem 0 0; }
.ar-ornamento {
  display: block; width: 120px; height: 14px; margin: 0 auto 1rem; position: relative;
  background: linear-gradient(90deg, transparent, var(--ar-oro) 40%, transparent 40%, transparent 60%, var(--ar-oro) 60%, transparent) center / 100% 1px no-repeat;
}
.ar-ornamento::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border: 1px solid var(--ar-oro); transform: translate(-50%, -50%) rotate(45deg);
}
.ar-notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ar-nota {
  position: relative; padding: 2rem 1.4rem; text-align: center;
  background: linear-gradient(180deg, rgba(227,182,92,.07), rgba(227,182,92,0) 70%), #120d10;
  border: 1px solid rgba(227,182,92,.2);
  border-radius: 90px 90px 4px 4px;
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.ar-nota:hover { transform: translateY(-6px); border-color: rgba(227,182,92,.55); box-shadow: 0 24px 40px -24px rgba(227,182,92,.35); }
.ar-nota svg { width: 44px; height: 44px; margin: .8rem auto 1rem; display: block; fill: none; stroke: var(--ar-oro); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ar-nota h3 { font-size: 1.6rem; color: var(--ar-oro2); margin-bottom: .4rem; }
.ar-nota p { font-size: .92rem; opacity: .75; margin: 0; }

.ar-ritual { padding: var(--space-5) 0; background: linear-gradient(180deg, #0c0910, #150e0a 50%, #0c0910); }
.ar-ritual-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4); align-items: center; }
.ar-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ar-pasos li { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 0; border-bottom: 1px solid rgba(227,182,92,.15); }
.ar-pasos li > span { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--ar-oro); min-width: 3rem; }
.ar-pasos h3 { font-size: 1.35rem; margin-bottom: .25rem; }
.ar-pasos p { margin: 0; opacity: .75; }

.ar-pronto {
  max-width: 620px; margin: 0 auto; text-align: center; padding: 3rem 1.5rem;
  border: 1px solid rgba(227,182,92,.25);
  border-radius: 200px 200px 6px 6px;
  background: radial-gradient(ellipse at 50% 0%, rgba(227,182,92,.12), transparent 60%);
}
.ar-pronto-sello {
  width: 110px; height: 110px; margin: 0 auto 1.6rem; display: grid; place-items: center;
  border: 1px solid var(--ar-oro);
  animation: arGiro 18s linear infinite;
}
.ar-pronto-sello span {
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1.05; color: var(--ar-oro2);
  animation: arContra 18s linear infinite;
}
@keyframes arGiro { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes arContra { from { transform: rotate(-45deg); } to { transform: rotate(-405deg); } }
.ar-pronto h3 { font-size: 1.8rem; margin-bottom: .6rem; }
.ar-pronto p { opacity: .78; margin: 0 auto 1.6rem; max-width: 44ch; }

.ar-cita { padding: var(--space-5) 0; text-align: center; }
.ar-cita blockquote {
  margin: 0 auto; max-width: 20ch; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; color: var(--ar-oro2);
}

@media (max-width: 900px) {
  .ar-notas { grid-template-columns: repeat(2, 1fr); }
  .ar-ritual-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ar-cifras span { font-size: .64rem; letter-spacing: .06em; }
  .ar-nota { padding: 1.6rem .9rem; border-radius: 70px 70px 4px 4px; }
  .ar-nota h3 { font-size: 1.3rem; }
  .ar-nota p { font-size: .82rem; }
  .ar-pronto { border-radius: 120px 120px 6px 6px; }
}

/* =========================================================
   Productos de belleza
   ========================================================= */
.bz-hero { display: grid; grid-template-columns: 1.15fr 1fr; min-height: clamp(520px, 86vh, 820px); }
.bz-hero-media { position: relative; overflow: hidden; }
.bz-hero-carrusel { position: absolute; inset: 0; }
.bz-hero-carrusel .cinematic-bg { background-attachment: scroll !important; background-size: cover; background-position: center; }
.bz-hero-copia {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-5) clamp(1.5rem, 5vw, 5rem);
  background: radial-gradient(ellipse at 20% 30%, rgba(227,182,92,.08), transparent 60%), #0e0b10;
}
.bz-hero-copia h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; margin: 1rem 0 .8rem; }
.bz-hero-copia .lede { opacity: .8; max-width: 38ch; }

.bz-titulo { text-align: center; margin-bottom: var(--space-4); }
.bz-titulo .bp-tag { margin: 0 auto .6rem; justify-content: center; }
.bz-categorias {
  display: grid; gap: 1rem;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 260px 160px;
}
.bz-cat {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  padding: 1.3rem; color: #fff; text-decoration: none; isolation: isolate;
  background: #16121a; border: 1px solid rgba(217,192,138,.16);
}
.bz-cat-grande { grid-row: 1 / 3; }
.bz-cat-img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.bz-cat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(10,8,12,.88)); }
.bz-cat:hover .bz-cat-img { transform: scale(1.06); }
.bz-cat-txt { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.1; }
.bz-cat-txt small { display: block; font-family: var(--font-body); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.bz-cat-texto { background: radial-gradient(ellipse at 80% 0%, rgba(227,182,92,.16), transparent 60%), #16121a; }
.bz-cat-texto::after { display: none; }
.bz-cat-texto:hover { border-color: rgba(227,182,92,.5); }

.bz-ritual { padding: var(--space-5) 0; background: var(--ivory-deep); }
.bz-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.bz-paso { padding: 2rem 1.6rem; background: #0f0c12; border: 1px solid var(--line); }
.bz-paso span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 1rem;
}
.bz-paso h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.bz-paso p { margin: 0; opacity: .75; }

.bz-filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--space-3); }
.bz-filtro {
  font: inherit; font-size: .85rem; padding: .55rem 1.1rem; cursor: pointer;
  background: transparent; color: var(--gold-soft); border: 1px solid var(--line); border-radius: 999px;
  transition: all .25s ease;
}
.bz-filtro small { opacity: .6; margin-left: .2rem; }
.bz-filtro:hover { border-color: var(--gold); }
.bz-filtro.activo { background: var(--gold); color: var(--ivory); border-color: var(--gold); }
.card-product[hidden] { display: none !important; }

.bz-cta { padding: 0 0 var(--space-5); }
.bz-cta-caja {
  text-align: center; padding: var(--space-4) var(--space-3);
  background: radial-gradient(ellipse at 50% 0%, rgba(227,182,92,.14), transparent 65%), #120e15;
  border: 1px solid rgba(217,192,138,.2);
}
.bz-cta-caja .lede { opacity: .8; margin: .6rem auto 1.4rem; }

@media (max-width: 900px) {
  .bz-hero { grid-template-columns: 1fr; }
  .bz-hero-media { min-height: 58vh; }
  .bz-hero-copia { padding: 2.2rem 1rem 2.8rem; text-align: center; align-items: center; }
  .bz-hero-copia .bp-tag { margin: 0 auto; }
  .bz-categorias { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 170px 110px; }
  .bz-cat-grande { grid-column: 1 / -1; grid-row: auto; }
  .bz-pasos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bz-filtros { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .3rem; scrollbar-width: none; }
  .bz-filtro { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-hero-patron, .ar-hero-luz, .ar-scroll, .ar-pronto-sello, .ar-pronto-sello span { animation: none; }
}
.ar-titulo .lede, .ar-titulo p { margin-left: auto; margin-right: auto; }
.bz-hero-copia .bp-tag { align-self: flex-start; }
@media (max-width: 900px) { .bz-hero-copia .bp-tag { align-self: center; } }

/* Perfumería árabe: guía SEO + preguntas frecuentes */
.ar-seo-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ar-seo-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.ar-seo p { line-height: 1.7; }
.ar-seo a { color: var(--gold); }
.ar-garantias { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ar-garantias li { padding: .7rem 1rem; border: 1px solid rgba(201,169,97,.3); border-radius: 6px; }
.ar-garantias li::before { content: "✦ "; color: var(--gold); }
.ar-faq details { border-bottom: 1px solid rgba(201,169,97,.25); padding: .9rem 0; }
.ar-faq summary { cursor: pointer; font-family: 'Cormorant Garamond', 'Cormorant', serif; font-size: 1.2rem; color: var(--gold-soft); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after { content: "+"; color: var(--gold); }
.ar-faq details[open] summary::after { content: "–"; }
.ar-faq details p { margin: .6rem 0 0; line-height: 1.6; opacity: .85; }

/* Productos sin precio + filtros de la colección árabe + pirámide olfativa */
.precio-consultar { color: var(--gold-soft); font-style: italic; }
.ar-filtros { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 var(--space-4); }
.ar-filtro { background: transparent; color: inherit; border: 1px solid rgba(201,169,97,.35); border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-size: .9rem; cursor: pointer; }
.ar-filtro.activo, .ar-filtro:hover { background: var(--gold); color: var(--ivory); border-color: var(--gold); }
.arabe .card-product .thumb img { object-fit: contain; }
.piramide { margin: 1.2rem 0; border-top: 1px solid rgba(201,169,97,.25); }
.piramide h4 { margin: 1rem 0 .4rem; }
.piramide-fila { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid rgba(201,169,97,.15); }
.piramide-fila span { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; padding-top: .15rem; }
.piramide-fila p { margin: 0; }

/* Botón siempre al pie de la tarjeta, alineado aunque el nombre ocupe más líneas */
.card-product .add-row { margin-top: auto; }
.card-product .precio { margin-bottom: .9rem; }

/* ===== Catálogo premium (misma estética que Perfumería árabe) ===== */
.catalogo-premium { --ar-oro: #E3B65C; --ar-oro2: #F2D48A; }
.cat-hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  background: radial-gradient(ellipse 80% 90% at 50% 20%, #2a1a0c 0%, #140c07 55%, #0a0709 100%);
  border-bottom: 1px solid rgba(227,182,92,.18);
}
.cat-hero-luz {
  position: absolute; z-index: -2; left: 50%; top: 30%; width: 60vmin; height: 60vmin;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(242,212,138,.28) 0%, rgba(227,182,92,.08) 45%, transparent 70%);
}
.cat-hero-copia { position: relative; max-width: 760px; }
.cat-hero-copia .bp-tag { margin: 0 auto; justify-content: center; }
.cat-hero h1 {
  font-size: clamp(2.4rem, 7vw, 4.4rem); margin: .8rem 0 .4rem; line-height: 1.05;
  background: linear-gradient(180deg, #FFF3D6 0%, var(--ar-oro2) 45%, var(--ar-oro) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cat-hero .lede { color: rgba(255,255,255,.75); margin: 0 auto 1.6rem; }
.cat-buscador {
  display: flex; align-items: center; gap: .6rem; max-width: 560px; margin: 0 auto;
  padding: .45rem .45rem .45rem 1.1rem; border-radius: 999px;
  background: rgba(12,9,16,.65); border: 1px solid rgba(227,182,92,.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.cat-buscador svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ar-oro); stroke-width: 1.8; }
.cat-buscador input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff;
  font: inherit; font-size: 1rem; padding: .5rem 0;
}
.cat-buscador input::placeholder { color: rgba(255,255,255,.45); }
.cat-buscador .btn { border-radius: 999px; padding: .6rem 1.3rem; }

.cat-filtros-wrap { padding: 1.6rem 0 .4rem; border-bottom: 1px solid rgba(227,182,92,.12); }
.cat-grupo { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 1rem; }
.cat-grupo-titulo {
  flex: none; width: 9.5rem; color: var(--ar-oro); text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; padding-top: .55rem;
}
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-chips .ar-filtro { text-decoration: none; }

.cat-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.cat-titulo-izq { margin: 0; flex: 1; }
.cat-titulo-izq .ar-ornamento { margin: 0; }
.cat-orden { display: flex; align-items: center; gap: .6rem; }
.cat-orden label { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6); }
.cat-orden select { width: auto; border-radius: 999px; padding: .5rem 1rem; }

.catalogo-premium .card-product .thumb img { object-fit: contain; }
.cat-aviso {
  margin: 3rem auto 0; max-width: 780px; text-align: center; font-size: .82rem; line-height: 1.6;
  color: rgba(255,255,255,.5); border-top: 1px solid rgba(227,182,92,.15); padding-top: 1.4rem;
}

@media (max-width: 700px) {
  .cat-grupo { flex-direction: column; gap: .5rem; }
  .cat-grupo-titulo { width: auto; padding-top: 0; }
  .cat-chips { flex-wrap: wrap; gap: .4rem; }
  .cat-chips .ar-filtro { padding: .42rem .85rem; font-size: .82rem; }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chips .ar-filtro { white-space: nowrap; flex: none; }
  .cat-buscador .btn { padding: .55rem 1rem; }
  .cat-barra { justify-content: flex-end; }
  .cat-titulo-izq { display: none; }
}

.cat-chip-arabe { border-color: rgba(227,182,92,.6); color: var(--ar-oro); }
.cat-aviso a { color: var(--ar-oro); }

/* Portada: bloque "Productos de belleza" con la foto completa (los 7 productos visibles) */
.portal-belleza { background: #0f0b0d; align-items: center; min-height: 0; aspect-ratio: auto; }
.portal-belleza .portal-bg {
  left: auto; right: 0; width: min(66%, calc(clamp(300px, 46vh, 520px) * 1.5));
  background-size: contain; background-repeat: no-repeat; background-position: right center;
}
.portal-belleza .portal-overlay {
  background: linear-gradient(90deg, #0f0b0d 0%, #0f0b0d 34%, rgba(15,11,13,.55) 44%, rgba(15,11,13,0) 58%);
}
.portal-belleza { height: clamp(300px, 46vh, 520px); }
@media (orientation: landscape) and (max-height: 500px) { .portal-belleza { height: 82vh; } }
.portal-belleza .portal-copy { max-width: 40%; }
.portal-belleza:hover .portal-bg { transform: scale(1.03); transform-origin: right center; }
@media (min-width: 901px), (min-width: 601px) and (orientation: landscape) {
  .portal-belleza .portal-bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 9%);
  }
  .portal-belleza .portal-overlay { background: none; }
}

@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .portal-belleza { height: auto; flex-direction: column; align-items: stretch; }
  .portal-belleza .portal-bg {
    position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; z-index: 0;
    background-size: cover; background-position: center;
  }
  .portal-belleza .portal-overlay {
    background: linear-gradient(180deg, rgba(15,11,13,0) 45%, rgba(15,11,13,.0) 60%, #0f0b0d 100%);
    bottom: auto; height: calc(100vw / 1.5); z-index: 1;
  }
  .portal-belleza .portal-copy { max-width: none; position: relative; z-index: 2; margin-top: -2.5rem; }
}

/* Fotos de producto siempre completas (sin recorte) en tarjetas, listas y ficha */
.card-product .thumb img.foto-producto,
.lista-thumb img.foto-producto,
.hero-visual img.foto-producto { object-fit: contain; }
.hero-visual img.foto-producto { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; padding: clamp(1rem, 4vw, 2.2rem); }
@media (max-width: 700px) {
  .hero .wrap[style*="0.8fr"] { grid-template-columns: 1fr !important; }
  #foto-principal { max-width: 360px; width: 100%; margin: 0 auto; }
}

/* Celulares: imágenes completas, sin recortes */
@media (max-width: 700px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-arabe, .portal-francesa { min-height: 0; max-height: none; aspect-ratio: 6 / 5; }
  .portal-arabe .portal-bg { background-position: center !important; }
  .portal-francesa .portal-bg { background-position: center !important; }
  .portal-text { display: block; }
  .bz-hero-media { min-height: 0; aspect-ratio: 3 / 2; }
  .bz-categorias { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: .6rem; }
  .bz-cat { aspect-ratio: 3 / 2; min-height: 0; padding: .7rem; }
  .bz-cat-grande { grid-row: auto; grid-column: 1 / -1; }
  .bz-cat-txt { font-size: 1.05rem; }
  .bz-cat-txt small { font-size: .55rem; }
}
@media (max-width: 900px) {
  .spot-visual { aspect-ratio: 3 / 2 !important; max-width: none; width: 100%; }
}

/* Ofertas: sets lado a lado */
.ofertas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ofertas-grid .member-card { margin: 0; }
@media (max-width: 700px) { .ofertas-grid { grid-template-columns: 1fr; } }

/* Buscador de la portada */
.portal-buscador { margin: 1.4rem auto 0; max-width: 560px; }
.portal-buscador .cat-buscador { background: rgba(255,255,255,.04); }
@media (max-width: 480px) { .cat-buscador .btn { padding: .55rem 1rem; } }

/* Pie de página en celulares */
@media (max-width: 640px) {
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid a, .footer-grid li { overflow-wrap: anywhere; }
}

/* Buscador global (lupa del encabezado) */
.buscador-global { padding: .8rem 0 1rem; border-top: 1px solid rgba(227,182,92,.15); background: rgba(12,9,16,.97); }
.buscador-global[hidden] { display: none; }
.nav-actions button.icon-btn { background: none; border: 0; cursor: pointer; color: inherit; padding: 0; font: inherit; }

/* Logos de confianza: Webpay Plus (Transbank) y Chilexpress, sobre fondo claro */
.footer-confianza { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: center; padding: 1.4rem 0 .4rem; border-top: 1px solid var(--line); margin-top: 1.6rem; }
.footer-confianza-item { display: flex; align-items: center; gap: .7rem; font-size: .8rem; }
.footer-confianza-item span { opacity: .8; }
.footer-confianza-item img, .logos-confianza img { background: #fff; border-radius: 8px; padding: .45rem .7rem; height: 42px; width: auto; display: block; }
.logos-confianza { display: flex; justify-content: center; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.logos-resumen img { height: 34px; }
@media (max-width: 480px) { .footer-confianza-item { flex-direction: column; gap: .4rem; } }

/* Compartir ficha (WhatsApp / menú nativo del teléfono) */
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(214,178,110,.2); font-size: .9rem; color: var(--gold-soft); }
.compartir-wa { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem; border-radius: 999px; background: #25D366; color: #fff; text-decoration: none; font-weight: 500; }
.compartir-wa::before { content: ""; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2.1 1-2.4c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 .9c.3.2.5.2.6.4.1.1.1.7-.2 1.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.compartir-wa:hover { filter: brightness(1.08); }