/* ═══════════════════════════════════════════════════
   MARSAN HOME — Stylesheet
   Fuentes: Cormorant Garamond (títulos) + Poppins (cuerpo)
═══════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   🎬  INTRO 3D — MARSAN HOME
════════════════════════════════════════ */
#introOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at center, #1A1D22 0%, #0A0C0F 100%);
  overflow: hidden;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1), visibility 1.2s;
  cursor: pointer;
}
#introOverlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Escena 3D ── */
#introScene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* ── Logo central ── */
#introLogo {
  position: relative;
  z-index: 10;
  text-align: center;
  transform-style: preserve-3d;
  animation: introLogoPush 1.8s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes introLogoPush {
  from { opacity:0; transform: translateZ(-800px) scale(.3); }
  60%  { opacity:1; }
  to   { opacity:1; transform: translateZ(0) scale(1); }
}
#introLogoImg {
  width: min(700px, 95vw);
  border-radius: 16px;
  display: block;
  margin: 0 auto 1.4rem;
  box-shadow:
    0 0 0 1px rgba(196,168,130,.2),
    0 30px 80px rgba(0,0,0,.7),
    0 0 120px rgba(196,168,130,.15);
  animation: introGlow 3s ease-in-out 3.5s infinite alternate;
}
@keyframes introGlow {
  from { box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 80px rgba(196,168,130,.1); }
  to   { box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 140px rgba(196,168,130,.3); }
}
#introTagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,.7);
  letter-spacing: .1em;
  margin: 0 0 1.2rem;
  animation: introFadeUp 1s ease 2.2s both;
}
#introCta {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(196,168,130,.6);
  animation: introBlink 2s ease-in-out 3.5s infinite alternate;
}
@keyframes introFadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes introBlink {
  from { opacity:.5; } to { opacity:1; }
}

/* ── Tarjetas flotantes de productos ── */
.intro-card {
  position: absolute;
  width: 140px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: .7rem;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform .3s;
}
.intro-card:hover { transform: scale(1.06) !important; }
.intro-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  padding: 6px;
  display: block;
  margin-bottom: .5rem;
}
.intro-card span {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: .6rem;
  color: rgba(255,255,255,.55);
  line-height: 1.3;
  margin-bottom: .25rem;
}
.intro-card strong {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: #C4A882;
}

@media (max-width: 600px) {
  .intro-card { width: 104px; padding: .5rem; }
  .intro-card span { font-size: .54rem; }
  .intro-card strong { font-size: .62rem; }
}

/* Posiciones y animaciones de cada tarjeta */
.ic1 { top:8%; left:5%; animation: ic1anim 3s ease .1s both, icFloat 5s ease-in-out 3s infinite alternate; }
.ic2 { top:6%; right:4%; animation: ic2anim 3s ease .3s both, icFloat 6s ease-in-out 3.5s infinite alternate; }
.ic3 { bottom:15%; left:3%; animation: ic3anim 3s ease .5s both, icFloat 5.5s ease-in-out 2.5s infinite alternate; }
.ic4 { bottom:12%; right:3%; animation: ic4anim 3s ease .2s both, icFloat 4.5s ease-in-out 4s infinite alternate; }
.ic5 { top:42%; left:2%; animation: ic5anim 3s ease .4s both, icFloat 5s ease-in-out 3s infinite alternate; }
.ic6 { top:38%; right:2%; animation: ic6anim 3s ease .6s both, icFloat 6s ease-in-out 2s infinite alternate; }

@keyframes ic1anim { from{opacity:0;transform:translateZ(-600px) translate(-80px,-60px) rotate(-15deg)} to{opacity:1;transform:translateZ(-120px) translate(0,0) rotate(-8deg)} }
@keyframes ic2anim { from{opacity:0;transform:translateZ(-600px) translate(80px,-60px) rotate(15deg)} to{opacity:1;transform:translateZ(-80px) translate(0,0) rotate(6deg)} }
@keyframes ic3anim { from{opacity:0;transform:translateZ(-600px) translate(-80px,60px) rotate(10deg)} to{opacity:1;transform:translateZ(-150px) translate(0,0) rotate(-5deg)} }
@keyframes ic4anim { from{opacity:0;transform:translateZ(-600px) translate(80px,60px) rotate(-12deg)} to{opacity:1;transform:translateZ(-100px) translate(0,0) rotate(4deg)} }
@keyframes ic5anim { from{opacity:0;transform:translateZ(-600px) translate(-100px,0) rotate(8deg)} to{opacity:1;transform:translateZ(-200px) translate(0,0) rotate(-3deg)} }
@keyframes ic6anim { from{opacity:0;transform:translateZ(-600px) translate(100px,0) rotate(-8deg)} to{opacity:1;transform:translateZ(-160px) translate(0,0) rotate(7deg)} }

@keyframes icFloat {
  from { transform: translateY(0px); }
  to   { transform: translateY(-14px); }
}

/* ── Partículas ── */
#introParticles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.i-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(196,168,130,.35);
  animation: iDotFloat linear infinite;
}

/* ── Barra progreso ── */
#introProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 20;
}
#introProgressBar {
  height: 100%;
  background: linear-gradient(90deg, #C4A882, #C06B44, #C4A882);
  background-size: 200% 100%;
  width: 0%;
  animation: barShimmer 2s linear infinite;
}
@keyframes barShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes iDotFloat {
  from { transform: translateY(100vh) translateZ(0); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:.6; }
  to   { transform: translateY(-20vh) translateZ(0); opacity:0; }
}

/* ─── TOKENS — Paleta basada en logo MarSan Home ─── */
:root {
  /* ── Colores del logo ──
     Fondo logo:  #5A5C62 (gris cálido oscuro)
     Dorado:      #C4A882 (techo de la casa)
     Texto logo:  #FFFFFF (blanco)
  */
  --bg:        #F6F2ED;           /* crema cálida, fondo principal */
  --white:     #FFFFFF;
  --gold:      #C4A882;           /* dorado del techo — color principal */
  --gold-lt:   #D9C4A8;           /* dorado claro */
  --gold-dk:   #9E7E58;           /* dorado oscuro / texto dorado */
  --dark:      #3A3C41;           /* igual al fondo del logo */
  --dark2:     #2C2E33;           /* más oscuro para contraste */
  --body-col:  #5A5C62;           /* gris body = color exacto del logo */
  --sage:      #7DA87A;
  --sage-dk:   #5A8A57;
  --terra:     #B85C38;           /* terracota para acciones */
  --mist:      #E8E0D5;           /* beige claro complementario */
  --border:    rgba(196, 168, 130, .25);

  /* Tipografía */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Poppins', system-ui, sans-serif;

  /* Colores adicionales */
  --beige-light: #E8D9C4;
  --cream:       #F6F2ED;         /* mismo que --bg */
  --charcoal:    #3A3C41;         /* mismo que --dark */

  /* Velocidad scroll testimonios */
  --tspd: 45s;

  /* Curvas de animación */
  --ease:    cubic-bezier(.4, 0, .2, 1);
  --bounce:  cubic-bezier(.175, .885, .32, 1.275);
  --smooth:  cubic-bezier(.25, .46, .45, .94);
  --spring:  cubic-bezier(.34, 1.56, .64, 1);

  /* Sombras */
  --shadow-sm:  0 2px  8px  rgba(28,31,34,.06);
  --shadow-md:  0 8px  32px rgba(28,31,34,.10);
  --shadow-lg:  0 24px 64px rgba(28,31,34,.14);
  --shadow-xl:  0 40px 96px rgba(28,31,34,.18);
  --shadow-gold: 0 16px 48px rgba(196,168,130,.35);

  /* ─── Sistema premium "Boutique Dorado" — puente entre paleta clara y oscura ─── */
  --ink:           #15171B;                                  /* negro de marca, más profundo que --dark2 */
  --gold-glow:     rgba(196,168,130,.4);                      /* halo dorado translúcido — usado en claro y oscuro */
  --gold-glow-soft:rgba(196,168,130,.18);
  --shadow-warm:   0 18px 44px rgba(184,92,56,.10), 0 6px 18px rgba(28,31,34,.10); /* sombra cálida unificada */
  --shadow-warm-lg:0 28px 70px rgba(184,92,56,.14), 0 10px 28px rgba(28,31,34,.12);
  --gold-gradient: linear-gradient(115deg, var(--gold-dk) 0%, var(--gold) 35%, var(--gold-lt) 50%, var(--gold) 65%, var(--gold-dk) 100%);
  --shine-sweep:   linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.0) 66%);

  /* Espaciado base */
  --pad-section: 8rem;
  --pad-mobile:  2.5rem;

  /* Radio */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 26px;
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--body-col);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── SCROLLBAR PERSONALIZADO ─── */
::-webkit-scrollbar             { width: 6px; }
::-webkit-scrollbar-track       { background: var(--bg); }
::-webkit-scrollbar-thumb       { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dk); }

/* ─── SELECTION ─── */
::selection        { background: rgba(196,168,130,.25); color: var(--dark); }
::-moz-selection   { background: rgba(196,168,130,.25); color: var(--dark); }

/* ─── IMÁGENES ─── */
img { max-width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════
   BARRA DE PROGRESO
═══════════════════════════════════════════════════ */
#bar {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--terra), var(--sage));
  background-size: 200% 100%;
  animation: barShift 3s linear infinite;
  z-index: 999;
  pointer-events: none;
  transition: width .06s linear;
}
@keyframes barShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ═══════════════════════════════════════════════════
   NAVEGACIÓN
═══════════════════════════════════════════════════ */
nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  padding: 1rem var(--pad-section);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  /* Color del logo — siempre oscuro */
  background: rgba(58, 60, 65, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(196, 168, 130, .18);
  transition:
    box-shadow .4s var(--ease),
    padding    .3s var(--ease);
}

nav.on {
  background: rgba(44, 46, 51, .99);
  box-shadow: 0 2px 24px rgba(0,0,0,.25), 0 1px 0 var(--gold-glow-soft);
  padding: .8rem var(--pad-section);
  border-bottom-color: rgba(196,168,130,.25);
}

/* Logo */
.brand { text-decoration: none; line-height: 1; }

.brand-m {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dark);
  display: block;
  transition: color .3s var(--ease);
}
.brand-m em { color: var(--gold); font-style: normal; }
.brand:hover .brand-m { color: var(--gold-dk); }

.brand-s {
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 2px;
  transition: letter-spacing .4s var(--ease);
}
.brand:hover .brand-s { letter-spacing: .45em; }

/* Links — flex:1 empuja los botones de la derecha hacia el extremo */
.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; flex: 1; justify-content: center; }

.nav-links a {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  position: relative;
  transition: color .25s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1.5px;
  background: var(--gold);
  transition: width .3s var(--ease);
}
.nav-links a:hover         { color: var(--gold); }
.nav-links a:hover::after  { width: 100%; }

/* CTA Contacto */
.nav-cta {
  background: var(--gold) !important;
  color: var(--dark) !important;
  padding: .68rem 1.9rem;
  border-radius: 40px;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  box-shadow: 0 4px 16px rgba(196,168,130,.4);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s !important;
}
.nav-cta::after  { display: none !important; }
.nav-cta:hover   { background: var(--gold-lt) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,168,130,.45) !important; }

/* Botón Admin */
.nav-admin-btn {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  background: rgba(196,168,130,.15);
  border: 1.5px solid rgba(196,168,130,.45);
  border-radius: 8px;
  padding: .42rem .9rem;
  color: var(--gold);
  cursor: pointer;
  transition: all .25s;
  white-space: nowrap;
}
.nav-admin-btn:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* Hamburguesa */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.ham span {
  display: block;
  width: 24px; height: 1.5px;
  background: #fff;
  transition: all .35s var(--ease);
  transform-origin: left;
}
.ham.open span:nth-child(1) { transform: rotate(45deg)  translateY(-1px); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: rotate(-45deg) translateY(1px); }

/* Menú móvil */
.mob {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--dark);
  z-index: 490;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.mob.open { display: flex; }
.mob a {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .3s var(--ease), letter-spacing .4s var(--ease);
}
.mob a:hover { color: var(--gold); letter-spacing: .08em; }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero {
  min-height: auto;
  display: grid;
  grid-template-columns: 52% 48%;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 75% 60% at 68% 48%, rgba(196,168,130,.22) 0%, transparent 65%),
    radial-gradient(ellipse 45% 65% at 8% 90%, rgba(196,168,130,.08) 0%, transparent 55%),
    linear-gradient(148deg, #EDE7DE 0%, #E4DAD0 35%, #ECE4DA 100%);
}

/* Círculos decorativos de fondo */
.hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hdc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(196,168,130,.1);
  animation: hdcPulse 8s ease-in-out infinite;
}
.hdc1 { width: 700px; height: 700px; top: -250px; right: -200px; }
.hdc2 { width: 400px; height: 400px; bottom: -120px; left: -100px; animation-delay: -4s; }
@keyframes hdcPulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.04); }
}

/* ── LADO IZQUIERDO ── */
.hero-l {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 3rem 5rem min(8rem, 7vw);
  position: relative;
  z-index: 10;
  will-change: transform, opacity;
}

/* Eyebrow */
.h-ey { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.h-ey-line {
  width: 38px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  transition: width .5s var(--ease);
}
.h-ey-txt {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Eyebrow tag sobre H1 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(196,168,130,.12);
  border: 1px solid rgba(196,168,130,.3);
  border-radius: 50px;
  padding: .38rem 1rem;
  margin-bottom: 1.6rem;
  width: fit-content;
}
.hero-eyebrow span {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dk);
}

/* Heading principal */
.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  color: var(--dark);
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}
.hero-h1 em {
  font-style: italic;
  color: var(--gold);
  background: linear-gradient(135deg, var(--gold), var(--terra));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Botones */
.hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; }

.btn-dk {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--dark);
  color: #fff;
  padding: 1rem 2.4rem;
  border-radius: 50px;
  border: 1.5px solid var(--dark);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .3s var(--ease);
  box-shadow: 0 4px 20px rgba(28,31,34,.22);
}
.btn-dk:hover {
  background: linear-gradient(135deg, var(--dark), #3A3D41);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(28,31,34,.28);
}
.btn-dk::after { content: '→'; font-size:.9em; transition: transform .25s; }
.btn-dk:hover::after { transform: translateX(3px); }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 4.5rem; /* subido para no solaparse con la franja */
  left: 8rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  will-change: opacity;
}
.sc-ring {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scBounce 2.5s ease-in-out infinite;
  transition: background .3s, border-color .3s;
}
.sc-ring:hover { background: var(--gold); border-color: var(--gold); }
.sc-ring svg { width: 12px; height: 12px; }
.sc-lbl {
  font-family: var(--sans);
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--body-col);
  opacity: .55;
}
@keyframes scBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ═══════════════════════════════════════════════════
   HERO — PRODUCTO DESTACADO
═══════════════════════════════════════════════════ */
.hero-r {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ══════════════════════════════════════════════
   TARJETA DESTACADA — Diseño Premium
══════════════════════════════════════════════ */
.h-mc-w {
  width: 100%;
  max-width: 360px;
}
.h-mc {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  box-shadow:
    0 4px 6px rgba(28,31,34,.04),
    0 24px 60px rgba(28,31,34,.22),
    0 48px 80px rgba(28,31,34,.1);
  animation: fY1 6s ease-in-out infinite;
  transition: transform .4s var(--bounce), box-shadow .4s;
}
.h-mc:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 32px 80px rgba(28,31,34,.28),
    0 0 0 1.5px var(--gold);
}
/* Imagen del producto */
.mc-img-area {
  position: relative;
  background: linear-gradient(145deg, #FAF7F2 0%, #FFFFFF 100%);
  padding: 1.4rem 1.4rem 1rem;
}
.mc-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.mc-badge-fire {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(192,107,68,.12);
  color: var(--terra);
  padding: .28rem .85rem;
  border-radius: 20px;
  border: 1px solid rgba(192,107,68,.2);
}
.mc-cat-pill {
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body-col);
  opacity: .7;
}
.h-mc-img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  display: block;
}
/* Barra de info inferior */
.mc-info-bar {
  background: var(--dark);
  padding: 1.1rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.mc-info-top { display: flex; flex-direction: column; gap: .25rem; }
.mc-ttl {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.25;
  margin-bottom: .3rem;
}
.mc-sub {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 300;
  color: rgba(255,255,255,.5);
}
.mc-info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mc-price-big {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.01em;
}
.mc-ver-btn {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: .38rem 1rem;
  border-radius: 20px;
}
.h-mc-prod { background: #fff; }

/* Dots de rotación en la tarjeta principal */
.hero-rotate-dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 0 .3rem;
}
.hero-rotate-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(28,31,34,.15);
  transition: all .35s;
  cursor: pointer;
}
.hero-rotate-dot.active {
  background: var(--gold);
  width: 18px;
  border-radius: 3px;
}

/* Flotado base */
@keyframes fY1 { 0%,100%{transform:translateY(0);}  50%{transform:translateY(-14px);} }

/* ═══════════════════════════════════════════════════
   RIBBON DE ESTADÍSTICAS
═══════════════════════════════════════════════════ */
.ribbon {
  background: linear-gradient(135deg, #2A2D33 0%, #22262C 100%);
  padding: 2rem var(--pad-section);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-top: 1px solid rgba(196,168,130,.15);
  border-bottom: 1px solid rgba(196,168,130,.1);
}
.ri { display: flex; align-items: center; gap: 1.4rem; }
.ri-n {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  transition: color .3s var(--ease);
}
.ri:hover .ri-n { color: var(--gold-lt); }
.ri-n sup { font-size: .5em; }
.ri-t { display: flex; flex-direction: column; }
.ri-l {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ri-d {
  font-family: var(--serif);
  font-size: .98rem;
  font-weight: 300;
  color: rgba(255,255,255,.8);
}
.ri-div { width: 1px; height: 48px; background: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════════
   HELPERS DE SECCIÓN
═══════════════════════════════════════════════════ */
.s-ey { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.s-ln {
  width: 32px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  transition: width .4s var(--ease);
}
.s-tg {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.s-h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.6vw, 3.85rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  color: var(--dark);
  margin-bottom: 1rem;
}
.s-p {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--body-col);
  max-width: 500px;
}
.s-hd { margin-bottom: 4.5rem; }

/* ═══════════════════════════════════════════════════
   SERVICIOS — 3D FLIP
═══════════════════════════════════════════════════ */
.services {
  background: var(--white);
  padding: var(--pad-section);
}
.svcs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Contenedor con perspectiva */
.sv {
  perspective: 1100px;
  height: 310px;
  cursor: pointer;
}
.sv-inn {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4, 0, .2, 1);
}
.sv:hover .sv-inn { transform: rotateY(180deg); }

/* Cara delantera */
.sv-f {
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  padding: 2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow .4s var(--ease);
}
.sv-f::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--gold), var(--terra));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.sv:hover .sv-f::before { transform: scaleX(1); }

.sv-num {
  font-family: var(--serif);
  font-size: .83rem;
  color: var(--gold);
  display: block;
  margin-bottom: 1.2rem;
}
.sv-ico {
  width: 50px; height: 50px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  transition: transform .3s var(--spring);
}
.sv:hover .sv-ico { transform: scale(1.1) rotate(-5deg); }

.ic-g { background: rgba(196,168,130,.15); }
.ic-s { background: rgba(125,168,122,.15); }
.ic-t { background: rgba(192,107,68,.12); }
.ic-m { background: rgba(210,226,232,.45); }

.sv-f h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: .6rem;
  line-height: 1.25;
}
.sv-f p {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--body-col);
}

/* Cara trasera */
.sv-b {
  position: absolute; inset: 0;
  border-radius: var(--r-lg);
  padding: 2rem;
  background: var(--dark);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.sv-b-ico { font-size: 2.5rem; opacity: .8; }
.sv-b h4 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
}
.sv-b p {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  max-width: 200px;
}
.sv-b a {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gold);
  color: #fff;
  padding: .7rem 1.8rem;
  border-radius: 30px;
  margin-top: .4rem;
  transition: background .3s var(--ease),
              transform  .3s var(--spring),
              box-shadow .3s var(--ease);
}
.sv-b a:hover {
  background: var(--terra);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(192,107,68,.35);
}

/* ═══════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════ */
.about-wrap { background: linear-gradient(140deg, #F0E8DC 0%, var(--mist) 100%); }

.about {
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--pad-section);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.about-vis { position: relative; }

.a-card {
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 500px;
  background: linear-gradient(155deg, var(--gold) 0%, #8B5E2C 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.a-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.a-card-ico {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  opacity: .15;
}
.a-card::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,.03) 10px,
    rgba(255,255,255,.03) 20px
  );
}

.a-float {
  position: absolute;
  bottom: -2rem; right: -2rem;
  background: var(--dark);
  border-radius: var(--r-md);
  padding: 1.6rem 1.8rem;
  width: 215px;
  box-shadow: var(--shadow-lg);
  transition: transform .4s var(--ease);
}
.a-float:hover { transform: translateY(-4px); }
.af-n {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.af-n sup { font-size: .5em; }
.af-l {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: .3rem;
  line-height: 1.55;
}
.af-bar { width: 34px; height: 1.5px; background: var(--gold); margin-top: .9rem; }

.about-p {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.92;
  color: var(--body-col);
  margin: 1.4rem 0;
}
.about-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-top: 2rem;
}
.af-it {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  color: var(--dark2);
  transition: color .3s var(--ease);
}
.af-it:hover { color: var(--dark); }
.af-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  transition: background .3s var(--ease), transform .3s var(--spring);
}
.af-it:hover .af-dot { background: var(--gold); transform: scale(1.4); }

/* ═══════════════════════════════════════════════════
   PROCESO
═══════════════════════════════════════════════════ */
.process {
  background: var(--dark);
  padding: var(--pad-section);
}
.process .s-h2  { color: #fff; }
.process .s-p   { color: rgba(255,255,255,.45); }
.process .s-ln  { background: var(--gold); }
.process .s-tg  { color: var(--gold); }

.psteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  position: relative;
}
.psteps::before {
  content: '';
  position: absolute;
  top: 1.55rem;
  left: 3.2rem; right: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--terra), var(--sage), transparent);
  opacity: .25;
}
.pstep-n {
  width: 48px; height: 48px;
  border-radius: 50%;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(196,168,130,.35);
  background: rgba(196,168,130,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--gold);
  transition: background .3s var(--ease), transform .3s var(--spring);
}
.pstep:hover .pstep-n {
  background: rgba(196,168,130,.15);
  transform: scale(1.12);
}
.pstep h4 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: .7rem;
}
.pstep p {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.82;
  color: rgba(255,255,255,.45);
}

/* ═══════════════════════════════════════════════════
   GALERÍA — CARRUSEL 3D
═══════════════════════════════════════════════════ */
.gallery {
  background: var(--white);
  padding: var(--pad-section) 0 6rem;
  overflow: hidden;
}
.gallery-hd { padding: 0 var(--pad-section); margin-bottom: 3.5rem; }

.gtrack {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  padding: 2rem var(--pad-section) 4rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.gtrack::-webkit-scrollbar { display: none; }
.gtrack:active { cursor: grabbing; }

.gcard {
  min-width: 300px; height: 400px;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  flex-shrink: 0;
  will-change: transform;
  transition: transform .4s var(--ease),
              box-shadow .4s var(--ease),
              filter     .4s var(--ease);
}
.gcard-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,22,26,.88) 0%, transparent 52%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem;
  transition: background .3s var(--ease);
}
.gcard:hover .gcard-ov {
  background: linear-gradient(to top, rgba(20,22,26,.95) 0%, transparent 55%);
}

/* Gradientes de tarjetas */
.gc1 { background: linear-gradient(148deg, #8BAF88, #3E7B3B); }
.gc2 { background: linear-gradient(148deg, #C4A882, #7A5820); }
.gc3 { background: linear-gradient(148deg, #C4714A, #7A3018); }
.gc4 { background: linear-gradient(148deg, #89A8B4, #3A6578); }
.gc5 { background: linear-gradient(148deg, #A8C4A5, #507B50); }
.gc6 { background: linear-gradient(148deg, #B4A0C4, #5A3A78); }

.gtag {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  padding: .18rem .85rem;
  border-radius: 20px;
  width: fit-content;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.gcard h3 {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: .2rem;
}
.gcard p {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 300;
  color: rgba(255,255,255,.62);
}

/* Botones de navegación galería */
.gnav { display: flex; gap: .8rem; padding: 0 var(--pad-section); }
.gnav-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .3s var(--ease),
              color     .3s var(--ease),
              border-color .3s var(--ease),
              transform .3s var(--spring);
}
.gnav-btn:hover {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════
   TARJETA DE RESEÑA (.tc)
   Reusada en "Opiniones de clientes" dentro del modal
   de producto (ver renderProductReviews en el script)
═══════════════════════════════════════════════════ */
.tc {
  flex-shrink: 0;
  width: 340px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--bounce),
              box-shadow .35s var(--ease),
              border-color .3s;
  cursor: default;
}
.tc:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(28,31,34,.1);
  border-color: rgba(196,168,130,.5);
}

/* Header de la tarjeta */
.tc-top {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.tc-av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--beige-light, #E8D9C4), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(196,168,130,.25);
}
.tc-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.tc-meta b {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--dark);
}
.tc-meta span {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 300;
  color: var(--body-col);
}
.tc-stars {
  color: var(--gold);
  font-size: .85rem;
  letter-spacing: 2px;
  flex-shrink: 0;
}

/* Badge de producto */
.tc-prod {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dk);
  background: rgba(196,168,130,.1);
  border: 1px solid rgba(196,168,130,.2);
  padding: .28rem .9rem;
  border-radius: 20px;
  display: inline-block;
  width: fit-content;
}

/* Texto de la reseña */
.tc-txt {
  font-family: var(--serif);
  font-size: .98rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: var(--dark2);
  flex: 1;
  margin: 0;
}

/* Fecha */
.tc-date {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 400;
  color: var(--body-col);
  opacity: .5;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   CONTACTO
═══════════════════════════════════════════════════ */
.contact {
  background: var(--dark);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contact-l {
  padding: var(--pad-section) 5rem var(--pad-section) var(--pad-section);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-l .s-h2  { color: #fff; }
.contact-l .s-ln  { background: var(--gold); }
.contact-l .s-tg  { color: var(--gold); }

.contact-body {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.88;
  color: rgba(255,255,255,.5);
  margin: 1.4rem 0 2.5rem;
}

.cinfo-list { display: flex; flex-direction: column; gap: 1.4rem; }
.cinfo { display: flex; align-items: flex-start; gap: 1rem; }
.cinfo-ic {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background: rgba(196,168,130,.1);
  border: 1px solid rgba(196,168,130,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background .3s var(--ease), transform .3s var(--spring);
}
.cinfo:hover .cinfo-ic {
  background: rgba(196,168,130,.2);
  transform: scale(1.08);
}
.cinfo-label {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: .18rem;
}
.cinfo-val {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 400;
  color: rgba(255,255,255,.8);
}

.social-row { display: flex; gap: .7rem; margin-top: 3rem; }
.soc {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: background .3s var(--ease),
              border-color .3s var(--ease),
              transform .3s var(--spring),
              box-shadow .3s var(--ease);
}
.soc:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 24px rgba(196,168,130,.35);
}

/* Formulario */
.contact-r {
  padding: var(--pad-section) var(--pad-section) var(--pad-section) 5rem;
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cform { display: flex; flex-direction: column; gap: 1rem; }
.frow  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }

.field label {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  transition: color .3s var(--ease);
}
.field:focus-within label { color: var(--gold); }

.field input,
.field textarea,
.field select {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 300;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-sm);
  padding: .88rem 1.2rem;
  color: #fff;
  outline: none;
  transition: border-color .3s var(--ease),
              background  .3s var(--ease),
              box-shadow  .3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,.22); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(196,168,130,.55);
  background: rgba(196,168,130,.08);
  box-shadow: 0 0 0 3px rgba(196,168,130,.12);
}
.field textarea { resize: none; height: 112px; }
.field select option { background: var(--dark); }

.btn-send {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold), var(--terra));
  background-size: 200% 100%;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 1.1rem;
  cursor: pointer;
  transition: background-position .5s var(--ease),
              transform  .35s var(--ease),
              box-shadow .35s var(--ease);
  width: 100%;
}
.btn-send:hover {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(192,107,68,.35);
}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
footer {
  background: var(--ink);
  padding: 4rem var(--pad-section) 2rem;
}
.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 2rem;
}
.foot-desc {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.82;
  color: rgba(255,255,255,.35);
  margin-top: .9rem;
  max-width: 260px;
}
.foot-col h5 {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 1.2rem;
}
.foot-col ul  { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.foot-col a {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 300;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
  display: block;
}
.foot-col a:hover { color: var(--gold); padding-left: 4px; }
.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.foot-cr {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 300;
  color: rgba(255,255,255,.22);
}
.foot-cr a { color: var(--gold); text-decoration: none; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.foot-legal a {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 300;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.foot-legal a:hover { color: var(--gold); }
@media (max-width: 640px) {
  .foot-legal { gap: .8rem 1.2rem; justify-content: center; }
  .foot-bot { justify-content: center; text-align: center; }
}

/* Logo en el footer: texto blanco sobre fondo oscuro */
footer .brand-m      { color: #FFFFFF; }
footer .brand-m em   { color: var(--gold); font-style: normal; }
footer .brand-s      { color: var(--gold); }

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL — EMERGE DESDE PROFUNDIDAD 3D
═══════════════════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: perspective(1000px) translateY(60px) translateZ(-120px) rotateX(20deg);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94),
              transform .9s cubic-bezier(.25,.46,.45,.94);
}
.rv.in {
  opacity: 1;
  transform: perspective(1000px) translateY(0) translateZ(0) rotateX(0deg);
}
.d1 { transition-delay: .10s; }
.d2 { transition-delay: .20s; }
.d3 { transition-delay: .30s; }
.d4 { transition-delay: .40s; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root { --pad-section: 5rem; }
  .svcs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  :root { --pad-section: var(--pad-mobile); }
  nav, nav.on { padding: 1.2rem var(--pad-mobile); }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-l { padding: 2.5rem var(--pad-mobile) 3rem; }
  .hero-r { padding: 0 var(--pad-mobile) 4rem; }
  .scroll-cue { left: var(--pad-mobile); }
  .ribbon { padding: 2rem var(--pad-mobile); }
  .about { grid-template-columns: 1fr; gap: 3rem; padding: 5rem var(--pad-mobile); }
  .a-float { display: none; }
  .psteps { grid-template-columns: 1fr 1fr; }
  .psteps::before { display: none; }
  .tgrid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact-l,
  .contact-r { padding: 5rem var(--pad-mobile); }
  footer { padding: 3rem var(--pad-mobile) 2rem; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .ham { display: flex; }
  .nav-links { display: none; }
  .ri-div { display: none; }
}

@media (max-width: 640px) {
  .svcs { grid-template-columns: 1fr; }
  .sv   { height: 290px; }
  .psteps { grid-template-columns: 1fr; }
  .frow   { grid-template-columns: 1fr; }
  .foot-top   { grid-template-columns: 1fr; }
  .ribbon     { gap: 1.5rem; }
  .about-feats { grid-template-columns: 1fr; }
}

/* ── Móvil (≤600px): botón de cuenta queda solo con ícono, como el carrito,
   para que no se amontone junto al logo grande y el menú hamburguesa ── */
@media (max-width: 600px) {
  nav { gap: .5rem; }
  .user-nav-btn{width:42px;height:42px;padding:0;justify-content:center;border-radius:50%}
  .unb-lbl{display:none}
  .unb-ico svg{width:19px;height:19px}
  .cart-btn{width:42px;height:42px}
  /* El WhatsApp + Homy flotantes ocupan la esquina inferior derecha hasta
     ~9rem desde abajo en móvil (ver .wa-float/.homy-wrap) — sin este
     colchón, el pie de página (política de privacidad, copyright) queda
     físicamente tapado e imposible de tocar cuando se llega al final. */
  footer { padding-bottom: 9rem; }
}

/* ── Celulares (≤480px): nav, hero y footer ── */
@media (max-width: 480px) {
  nav, nav.on { padding: .8rem 1rem; }
  .nav-logo-img { height: 64px; }
  .brand-m { font-size: 1.35rem; }
  .brand-s { font-size: .52rem; letter-spacing: .3em; }

  .hero-l { padding: 2rem 1.5rem 3rem; }
  .hero-h1 { font-size: clamp(2.1rem, 11vw, 2.8rem); }
  .hero-btns { flex-direction: column; align-items: stretch; gap: .6rem; }
  .btn-dk { justify-content: center; }
  .hero-r { padding: 0 1.5rem 3rem; }

  /* padding-bottom 9rem (no 1.5rem): dejar espacio para que el WhatsApp +
     Homy flotantes (ver .wa-float/.homy-wrap, ~9rem de alto en esta misma
     esquina) no tapen "Política de Privacidad" ni el resto del pie —
     esta regla pisa la de @media(max-width:600px) porque aparece después
     en la hoja de estilos y coincide con los mismos celulares (≤480px). */
  footer { padding: 2.5rem 1.5rem 9rem; }
  .foot-top { gap: 2rem; padding-bottom: 2rem; margin-bottom: 1.5rem; }
  .foot-desc { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════════════════ */
.text-gold  { color: var(--gold); }
.text-sage  { color: var(--sage); }
.text-terra { color: var(--terra); }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 3rem; }

/* ═══════════════════════════════════════════════════
   🔥  BANNER DE OFERTAS Y PROMOCIONES
═══════════════════════════════════════════════════ */
.promo-banner {
  background: linear-gradient(90deg, var(--gold) 0%, #D4903A 50%, var(--gold) 100%);
  background-size: 200% 100%;
  animation: promoGrad 6s linear infinite;
  overflow: hidden;
  padding: .8rem 0;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}

@keyframes promoGrad {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Fades laterales */
.promo-banner::before,
.promo-banner::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.promo-banner::before {
  left: 0;
  background: linear-gradient(to right, var(--gold) 0%, transparent 100%);
}
.promo-banner::after {
  right: 0;
  background: linear-gradient(to left, var(--gold) 0%, transparent 100%);
}

/* Track que desliza */
.promo-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: promoDesliza 40s linear infinite;
  will-change: transform;
  padding: 1rem 0;
}
.promo-banner:hover .promo-track {
  animation-play-state: paused;
}

@keyframes promoDesliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Items del banner */
.promo-item {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  padding: 0 1.4rem;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.promo-item strong {
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}

/* Separador dorado brillante */
.promo-sep {
  color: rgba(255,255,255,.6);
  font-size: .65rem;
  flex-shrink: 0;
  padding: 0 .2rem;
}
.pi-dash { color: rgba(255,255,255,.6); margin: 0 .15rem; }
.pi-offer strong,.pi-ship strong,.pi-pay strong,.pi-trust strong,.pi-brand strong,.pi-cat strong { color: #fff; }

@media (max-width: 768px) {
  .promo-item { font-size: .78rem; padding: 0 1.2rem; }
  .promo-track { padding: .8rem 0; }
}

@media (max-width: 480px) {
  .promo-item { font-size: .72rem; padding: 0 .9rem; }
}

/* ═══════════════════════════════════════════════════
   🏠  LOGO MARSAN HOME — NAV + HERO + FOOTER
═══════════════════════════════════════════════════ */

/* ── Logo en el NAV ── */
.logo-img-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform .35s var(--bounce), opacity .3s;
}
.logo-img-brand:hover { transform: scale(1.04); opacity: .9; }

.nav-logo-img {
  height: 110px;        /* tamaño extra grande en nav, bien notorio */
  width: auto;
  object-fit: contain;
  border-radius: 8px;   /* redondea esquinas del JPEG */
  display: block;
  /* El logo tiene fondo oscuro (#3D3D3D), perfecto para el nav */
}

/* Cuando el nav se vuelve claro (scrolled), el logo sigue visible
   porque tiene su propio fondo oscuro */
nav.on .nav-logo-img {
  box-shadow: 0 2px 12px rgba(28,31,34,.15);
}

/* ── Logo en el FOOTER ── */
.footer-logo-img {
  height: 55px;
  width: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  opacity: .85;
  transition: opacity .3s, transform .3s var(--bounce);
}
.logo-img-brand:hover .footer-logo-img {
  opacity: 1;
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 768px) {
  .nav-logo-img  { height: 82px; }
  .footer-logo-img { height: 48px; }
}

/* ═══════════════════════════════════════════════════
/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL — CSS PROFESIONAL DEFINITIVO
══════════════════════════════════════════════════════════════ */

.nav-admin-btn { font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.08em;background:rgba(196,168,130,.1);border:1.5px solid rgba(196,168,130,.3);border-radius:8px;padding:.4rem .9rem;color:var(--gold);cursor:pointer;transition:all .3s var(--bounce); }
.nav-admin-btn:hover { background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-2px); }
.admin-trigger { background:none;border:1px solid rgba(255,255,255,.1);border-radius:50%;width:24px;height:24px;color:rgba(255,255,255,.2);font-size:.7rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center; }
.admin-trigger:hover { border-color:var(--gold);color:var(--gold); }

/* ══════════════════════════════════════════
   ADMIN PANEL — MarSan Home (Falabella-style)
══════════════════════════════════════════ */

/* OVERLAY */
.adm-ov,.adm-overlay{position:fixed;inset:0;z-index:9999;display:none;overflow:hidden}
.adm-ov.open,.adm-overlay.open{display:flex;flex-direction:column}

/* LOGIN */
.adm-login{flex:1;background:linear-gradient(145deg,#0D1014,#1A1D21);display:flex;align-items:center;justify-content:center;padding:2rem}
.adml-box{background:#21252C;border:1px solid rgba(196,168,130,.18);border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:380px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.adml-logo{height:52px;border-radius:8px;display:block;margin:0 auto 1.2rem}
.adml-sub{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.25);text-align:center;margin-bottom:1.8rem}
.adml-field{margin-bottom:1rem}
.adml-field label{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.08em}
.adml-field input{width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.08);border-radius:8px;padding:.75rem 1rem;color:#fff;font-family:var(--sans);font-size:.9rem;outline:none;box-sizing:border-box;transition:border-color .2s}
.adml-field input:focus{border-color:rgba(196,168,130,.5)}
.adml-btn{width:100%;margin-top:.6rem;background:linear-gradient(135deg,var(--gold),var(--terra));border:none;border-radius:8px;padding:.95rem;color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:opacity .2s}
.adml-btn:hover{opacity:.9}
.adml-err{color:#ff6b6b;font-family:var(--sans);font-size:.74rem;text-align:center;min-height:1.2em;margin-top:.5rem}
.adml-back{width:100%;margin-top:.8rem;background:none;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.72rem;color:rgba(255,255,255,.3);font-family:var(--sans);font-size:.76rem;cursor:pointer;transition:all .2s}
.adml-back:hover{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.22)}

/* APP SHELL */
.adm-app{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden;background:#F0F2F5;height:100%}
.adm-sb{width:240px;flex-shrink:0;background:linear-gradient(180deg,#16191E 0%,#1E2229 100%);display:flex;flex-direction:column;overflow:hidden;box-shadow:4px 0 20px rgba(0,0,0,.15)}

/* SIDEBAR */
.adm-sb-brand{padding:1.5rem 1.4rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.75rem}
.adm-sb-logo{height:34px;border-radius:6px;display:block;flex-shrink:0}
.adm-sb-tagline{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.28);display:block;line-height:1.2}
.adm-sb-nav{flex:1;overflow-y:auto;padding:.6rem .8rem}
.adm-sb-nav::-webkit-scrollbar{width:3px}
.adm-sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.adm-nav-section,.adm-nav-label{font-family:var(--sans);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.22);padding:.9rem .6rem .35rem;display:block}
.adm-nav-item{display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;cursor:pointer;font-family:var(--sans);font-size:.84rem;font-weight:400;color:rgba(255,255,255,.5);text-decoration:none;transition:all .18s;border:none;background:none;width:100%;text-align:left;border-radius:8px;position:relative;margin:.15rem 0}
.adm-nav-item:hover{color:rgba(255,255,255,.92);background:rgba(255,255,255,.07)}
.adm-nav-item.active{color:#E8C98A;background:rgba(196,168,130,.14);font-weight:600}
.adm-nav-item.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:#C4A882;border-radius:0 3px 3px 0}
.adm-nav-svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.6;opacity:.65}
.adm-nav-item.active .adm-nav-svg,.adm-nav-item:hover .adm-nav-svg{opacity:1}
.adm-nav-count{margin-left:auto;background:rgba(196,168,130,.18);color:#E8C98A;font-size:.63rem;font-weight:700;padding:.18rem .55rem;border-radius:20px;font-family:var(--sans)}
.adm-sb-footer{padding:1rem 1.2rem;border-top:1px solid rgba(255,255,255,.07)}
.adm-sb-user{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.adm-sb-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#C4A882,#C06B44);display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0;color:#fff;font-weight:700;font-family:var(--sans);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.adm-sb-uname{font-family:var(--sans);font-size:.8rem;font-weight:700;color:rgba(255,255,255,.88);display:block}
.adm-sb-uemail{font-family:var(--sans);font-size:.65rem;color:rgba(255,255,255,.32);display:block}
.adm-sb-logout{width:100%;background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.2);border-radius:8px;padding:.5rem;font-family:var(--sans);font-size:.73rem;font-weight:600;color:rgba(231,76,60,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;transition:all .2s}
.adm-sb-logout:hover{background:rgba(231,76,60,.16);color:#ff6b6b;border-color:rgba(231,76,60,.4)}

/* MAIN CONTENT AREA */
.adm-main{flex:1;min-width:0;position:relative;overflow:hidden;height:100%}
.adm-view{position:absolute;top:0;left:0;right:0;bottom:0;display:none;flex-direction:column;overflow:hidden;background:#F2F4F7}
.adm-banner-view{grid-template-columns:320px 1fr;overflow:hidden;background:#F2F4F7}

/* TOPBAR */
.adm-topbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.6rem;background:#fff;border-bottom:1px solid #E5E7EB;flex-shrink:0;gap:1rem;min-height:64px}
.adm-topbar-left{display:flex;align-items:center;gap:.85rem}
.adm-topbar-title{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:#111827;margin:0}
.adm-topbar-sub{font-family:var(--sans);font-size:.73rem;color:#9CA3AF;margin:0}
.adm-topbar-actions{display:flex;align-items:center;gap:.6rem}
.adm-back-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1.5px solid #E8EAF0;border-radius:8px;background:#fff;cursor:pointer;color:#6B7280;transition:all .2s;flex-shrink:0}
.adm-back-btn:hover{border-color:#C4A882;color:#8B6E4E}
.adm-back-btn svg{width:18px;height:18px}

/* SCROLL AREA */
.adm-scroll{flex:1;overflow-y:auto;padding:1.4rem 1.6rem}
.adm-scroll::-webkit-scrollbar{width:4px}
.adm-scroll::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px}

/* DASHBOARD CARDS */
.adm-dash-cols{display:grid;grid-template-columns:1fr 1.5fr;gap:1.1rem;margin-bottom:1.1rem}
.adm-dash-card{background:#fff;border:1px solid #E9EBF0;border-radius:14px;overflow:hidden}
.adm-dash-card-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem;border-bottom:1px solid #F3F4F6}
.adm-dash-card-title{font-family:var(--sans);font-size:.75rem;font-weight:700;color:#374151;letter-spacing:.05em;text-transform:uppercase}
.adm-dash-card-link{font-family:var(--sans);font-size:.76rem;font-weight:600;color:#8B6E4E;background:rgba(196,168,130,.08);border:none;border-radius:6px;padding:.28rem .7rem;cursor:pointer;transition:all .18s}
.adm-dash-card-link:hover{background:rgba(196,168,130,.18)}
.adm-quick-actions{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem}
.adm-qa-btn{background:#F9FAFB;border:1.5px solid #E9EBF0;border-radius:10px;padding:.8rem 1rem;font-family:var(--sans);font-size:.82rem;font-weight:600;color:#374151;cursor:pointer;text-align:left;transition:all .2s;display:flex;align-items:center;gap:.7rem;width:100%}
.adm-qa-btn-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}

/* KPI CARDS */
.adm-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.4rem}
.adm-kpi-card{background:#fff;border:1px solid #E9EBF0;border-radius:14px;padding:1.3rem 1.4rem;display:flex;align-items:center;gap:1rem;transition:transform .2s,box-shadow .2s}
.adm-kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.adm-kpi-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adm-kpi-num{font-family:var(--sans);font-size:1.8rem;font-weight:800;color:#111827;line-height:1;margin-bottom:.18rem}
.adm-kpi-label{font-family:var(--sans);font-size:.75rem;color:#6B7280;font-weight:600;letter-spacing:.02em}
.adm-kpi-sub{font-family:var(--sans);font-size:.65rem;color:#9CA3AF;margin-top:.12rem}


/* RECENT PRODUCTS TABLE */
.adm-recent-table{width:100%;border-collapse:collapse}
.adm-recent-table th{font-family:var(--sans);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9CA3AF;padding:.65rem 1rem;border-bottom:1px solid #F0F1F5;text-align:left;background:#F9FAFB}
.adm-recent-table td{padding:.7rem 1rem;border-bottom:1px solid #F5F6FA;vertical-align:middle}
.adm-recent-table tr:last-child td{border-bottom:none}
.adm-recent-table tr:hover td{background:#FAFBFC}
.adm-rt-thumb{width:36px;height:36px;border-radius:7px;overflow:hidden;background:#F5F6FA;display:inline-flex;align-items:center;justify-content:center}
.adm-rt-thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.adm-rt-name{font-family:var(--sans);font-size:.82rem;font-weight:600;color:#1A1D24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;display:block}
.adm-rt-cat{font-family:var(--sans);font-size:.65rem;color:#9CA3AF;margin-top:.1rem}
.adm-rt-price{font-family:var(--sans);font-size:.82rem;font-weight:700;color:#1A1D24;white-space:nowrap}
.adm-rt-badge{display:inline-flex;align-items:center;font-family:var(--sans);font-size:.62rem;font-weight:700;padding:.2rem .5rem;border-radius:20px;white-space:nowrap}
.adm-rt-badge-cat{background:rgba(196,168,130,.1);color:#8B6E4E}
.adm-rt-badge-new{background:rgba(74,166,128,.1);color:#2D8D64}

/* PRODUCTS VIEW */
.adm-toolbar{display:flex;align-items:center;gap:.75rem;padding:.85rem 1.2rem;background:#fff;border-bottom:1px solid #E8EAF0;flex-shrink:0;flex-wrap:wrap}
.adm-search-box{flex:1;min-width:180px;display:flex;align-items:center;gap:.55rem;background:#F5F6FA;border:1.5px solid #E8EAF0;border-radius:8px;padding:.55rem .9rem;transition:all .2s}
.adm-search-box:focus-within{border-color:#C4A882;background:#fff}
.adm-search-box svg{color:#9CA3AF;flex-shrink:0}
.adm-search-box input{border:none;outline:none;background:transparent;font-family:var(--sans);font-size:.84rem;color:#1A1D24;width:100%}
.adm-search-box input::placeholder{color:#9CA3AF}
.adm-filter-sel{border:1.5px solid #E8EAF0;border-radius:8px;padding:.55rem .9rem;font-family:var(--sans);font-size:.82rem;color:#374151;background:#F5F6FA;outline:none;cursor:pointer;transition:all .2s}
.adm-filter-sel:focus{border-color:#C4A882;background:#fff}
.adm-product-badge{font-family:var(--sans);font-size:.72rem;color:#9CA3AF;white-space:nowrap}

/* PRODUCT TABLE */
.adm-prod-table-wrap{flex:1;overflow-y:auto}
.adm-prod-table-wrap::-webkit-scrollbar{width:4px}
.adm-prod-table-wrap::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px}
.adm-prod-table{width:100%;border-collapse:collapse;background:#fff}
.adm-prod-table th{font-family:var(--sans);font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9CA3AF;padding:.75rem 1rem;border-bottom:2px solid #E8EAF0;text-align:left;position:sticky;top:0;background:#F9FAFB;z-index:1}
.adm-prod-table td{padding:.75rem 1rem;border-bottom:1px solid #F0F1F5;vertical-align:middle;font-family:var(--sans);font-size:.83rem;color:#374151}
.adm-prod-table tbody tr:hover td{background:#FAFBFC}
.adm-prod-thumb{width:42px;height:42px;border-radius:8px;overflow:hidden;background:#F5F6FA;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.adm-prod-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.adm-prod-name{font-weight:600;color:#1A1D24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;display:block}
.adm-prod-price{font-weight:700;color:#1A1D24;white-space:nowrap}
.adm-cat-chip{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--sans);font-size:.67rem;font-weight:600;background:#F0F1F5;color:#5A6070;padding:.22rem .6rem;border-radius:20px;white-space:nowrap}
.adm-src-chip{font-family:var(--sans);font-size:.63rem;font-weight:600;padding:.2rem .55rem;border-radius:20px;display:inline-block;white-space:nowrap}
.adm-src-chip-cat{background:rgba(196,168,130,.1);color:#8B6E4E}
.adm-src-chip-new{background:rgba(74,166,128,.1);color:#2D8D64}
.adm-status-chip{font-family:var(--sans);font-size:.63rem;font-weight:600;padding:.2rem .55rem;border-radius:20px;display:inline-block;white-space:nowrap}
.adm-status-chip-active{background:rgba(74,166,128,.1);color:#2D8D64}
.adm-status-chip-paused{background:rgba(230,150,60,.12);color:#B5680F}

/* PAGINATION */
.adm-pagination{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.2rem;background:#fff;border-top:1px solid #E8EAF0;flex-shrink:0}
.adm-pg-info{font-family:var(--sans);font-size:.74rem;color:#9CA3AF}
.adm-pg-btns{display:flex;align-items:center;gap:.3rem}
.adm-pg-btn{font-family:var(--sans);font-size:.74rem;font-weight:600;background:#fff;border:1.5px solid #E8EAF0;border-radius:6px;padding:.36rem .7rem;cursor:pointer;transition:all .18s;color:#374151;min-width:32px;text-align:center}
.adm-pg-btn:hover:not(:disabled):not(.active){border-color:#C4A882;color:#8B6E4E}
.adm-pg-btn.active{background:#1A1D24;color:#fff;border-color:#1A1D24}
.adm-pg-btn:disabled{opacity:.35;cursor:default}

/* BUTTONS */
.adm-cta-btn{background:linear-gradient(135deg,var(--gold),var(--terra));border:none;border-radius:8px;padding:.62rem 1.2rem;color:#fff;font-family:var(--sans);font-size:.8rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:opacity .2s,transform .18s;white-space:nowrap}
.adm-cta-btn:hover{opacity:.9;transform:translateY(-1px)}
.adm-ghost-btn{background:#fff;border:1.5px solid #E8EAF0;border-radius:8px;padding:.6rem 1.1rem;font-family:var(--sans);font-size:.79rem;font-weight:600;color:#374151;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .2s;white-space:nowrap}
.adm-ghost-btn:hover{border-color:#C4A882;color:#8B6E4E}
.adm-icon-btn{width:32px;height:32px;border:1.5px solid #E8EAF0;border-radius:7px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .18s;flex-shrink:0}
.adm-icon-btn:hover{border-color:#C4A882;background:rgba(196,168,130,.05)}
.adm-icon-btn-del{border-color:#FEE2E2}
.adm-icon-btn-del:hover{border-color:#ff6b6b;background:rgba(255,107,107,.05)}
.adm-icon-btn-pause{border-color:#FDE7C8}
.adm-icon-btn-pause:hover{border-color:#E6963C;background:rgba(230,150,60,.08)}
.adm-icon-btn-play{border-color:#CDEBD9}
.adm-icon-btn-play:hover{border-color:#2D8D64;background:rgba(45,141,100,.08)}

/* FORM VIEW */
.adm-form-layout{display:grid;grid-template-columns:1fr 340px;gap:0;flex:1;min-height:0;overflow:hidden}
.adm-form-left{overflow-y:auto;padding:.6rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.65rem}
.adm-form-left::-webkit-scrollbar{width:4px}
.adm-form-left::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:2px}
.adm-form-right{background:#fff;border-left:1px solid #E8EAF0;overflow-y:auto;padding:.8rem 1rem}
.adm-form-section{background:#fff;border:1px solid #E8EAF0;border-radius:12px;padding:1.1rem 1.3rem}
.adm-form-section-title{font-family:var(--sans);font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#9CA3AF;margin:0 0 .9rem;display:block}
.adm-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem}
.adm-field:last-child{margin-bottom:0}
.adm-field-label{font-family:var(--sans);font-size:.74rem;font-weight:700;color:#374151}
.adm-req{color:#EF4444}
.adm-field-input{border:1.5px solid #E8EAF0;border-radius:8px;padding:.62rem .9rem;font-family:var(--sans);font-size:.85rem;color:#1A1D24;outline:none;transition:border-color .2s;background:#fff;width:100%;box-sizing:border-box}
.adm-field-input:focus{border-color:#C4A882}
.adm-field-textarea{min-height:88px;resize:vertical}
.adm-field-hint{font-family:var(--sans);font-size:.67rem;color:#9CA3AF}
.adm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.adm-price-inp-wrap{position:relative}
.adm-price-sym{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.85rem;color:#9CA3AF;pointer-events:none}
.adm-toggle-row{display:flex;align-items:center;gap:.6rem}
.adm-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.adm-toggle input{position:absolute;opacity:0;width:0;height:0}
.adm-toggle-track{width:38px;height:20px;background:#E8EAF0;border-radius:20px;transition:background .2s;flex-shrink:0;position:relative;display:block}
.adm-toggle input:checked + .adm-toggle-track{background:#C4A882}
.adm-toggle-track::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.adm-toggle input:checked + .adm-toggle-track::after{transform:translateX(18px)}
.adm-toggle-lbl{font-family:var(--sans);font-size:.78rem;color:#6B7280}

/* DROPZONE */
.adm-dropzone{border:2px dashed #E8EAF0;border-radius:10px;background:#FAFBFC;transition:all .22s;cursor:pointer}
.adm-dropzone:hover,.adm-dropzone.drag-over{border-color:#C4A882;background:rgba(196,168,130,.04)}
.adm-dropzone-label{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;cursor:pointer;text-align:center}
.adm-dropzone-label strong{font-family:var(--sans);font-size:.84rem;color:#374151}
.adm-dropzone-label span{font-family:var(--sans);font-size:.71rem;color:#9CA3AF}
#afFile{display:none}

/* FORM ACTIONS */
.adm-form-actions{display:flex;gap:.6rem;padding:1rem 1.4rem;background:#fff;border-top:1px solid #E8EAF0;flex-shrink:0}
.adm-save-feedback{font-family:var(--sans);font-size:.78rem;font-weight:600;padding:.3rem 0;min-height:1.1em}

/* LIVE PREVIEW */
.adm-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.adm-preview-header span:first-child{font-family:var(--sans);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#9CA3AF}
.adm-preview-badge{font-family:var(--sans);font-size:.62rem;font-weight:700;background:rgba(74,166,128,.12);color:#2D8D64;padding:.2rem .55rem;border-radius:20px;letter-spacing:.06em;text-transform:uppercase}
.adm-preview-card{background:#fff;border:1px solid #E8EAF0;border-radius:12px;overflow:hidden}
.apc-img-wrap{position:relative;aspect-ratio:1/1;background:#F5F6FA;overflow:hidden}
.apc-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.apc-img-placeholder{font-family:var(--sans);font-size:.75rem;color:#C5CAD5}
.apc-body{padding:1rem 1.1rem}
.apc-cat{font-family:var(--sans);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8B6E4E;display:block;margin-bottom:.3rem}
.apc-name{font-family:var(--serif);font-size:.95rem;font-weight:600;color:#1A1D24;line-height:1.3;margin-bottom:.5rem}
.apc-price-row{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.5rem}
.apc-price{font-family:var(--sans);font-size:1.1rem;font-weight:800;color:#1A1D24}
.apc-old-price{font-family:var(--sans);font-size:.78rem;color:#9CA3AF;text-decoration:line-through}
.apc-stock{font-family:var(--sans);font-size:.7rem;color:#6B7280;margin-bottom:.8rem}
.apc-add-btn{width:100%;background:#1A1D24;color:#fff;border:none;border-radius:8px;padding:.7rem;font-family:var(--sans);font-size:.8rem;font-weight:700;cursor:pointer}

/* BANNER VIEW */
.adm-banner-left{background:#fff;border-right:1px solid #E8EAF0;display:flex;flex-direction:column;overflow:hidden}
.adm-banner-form{flex:1;overflow-y:auto;padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.8rem}
.adm-banner-form::-webkit-scrollbar{width:3px}
.adm-banner-form::-webkit-scrollbar-thumb{background:#C4A882;border-radius:2px}
.adm-banner-right{display:flex;flex-direction:column;overflow:hidden;background:#F5F6FA;gap:0}
.adm-panel-block{background:#fff;border:1px solid #E8EAF0;border-radius:12px;margin:.9rem .9rem 0;overflow:hidden;flex-shrink:0}
.adm-panel-block:last-child{margin-bottom:.9rem;flex:1;display:flex;flex-direction:column;min-height:0}
.adm-panel-title{display:flex;justify-content:space-between;align-items:center;padding:.72rem 1rem;font-family:var(--sans);font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#374151;background:#F9FAFB;border-bottom:1px solid #F0F1F5;flex-shrink:0}
.adm-count-chip{background:#E8EAF0;color:#6B7280;font-size:.62rem;font-weight:700;padding:.18rem .5rem;border-radius:20px}
.adm-chip-btn{background:rgba(196,168,130,.1);border:none;border-radius:6px;padding:.3rem .75rem;font-family:var(--sans);font-size:.7rem;font-weight:700;color:#8B6E4E;cursor:pointer;transition:background .18s}
.adm-chip-btn:hover{background:rgba(196,168,130,.2)}
.bnr-emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem;margin-bottom:.6rem}
a.bnr-ep,.bnr-ep{width:34px;height:34px;border:1.5px solid #E8EAF0;border-radius:8px;background:#F9FAFB;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:all .18s;user-select:none;pointer-events:auto}
.bnr-ep:hover{border-color:#C4A882;background:rgba(196,168,130,.08);transform:scale(1.06)}
.bnr-ep.active{border-color:#C4A882;background:rgba(196,168,130,.14)}
.bnr-sel-row{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.bnr-sel-disp{font-size:1.5rem;line-height:1}
.bnr-live-preview{background:linear-gradient(90deg,var(--gold),#D4903A,var(--gold));border-radius:8px;padding:.6rem 1rem;font-family:var(--sans);font-size:.8rem;font-weight:600;color:#fff;min-height:36px;display:flex;align-items:center;gap:.5rem;overflow:hidden}
.adm-banner-msg{display:flex;align-items:center;gap:.5rem;padding:.58rem .85rem;border-bottom:1px solid #F5F6FA;font-family:var(--sans);font-size:.78rem;color:#374151}
.adm-banner-msg:last-child{border-bottom:none}
.adm-banner-num{color:#C0C5D0;font-size:.63rem;font-weight:700;width:16px;flex-shrink:0;text-align:center}
.adm-banner-emoji{font-size:1.1rem;flex-shrink:0}
.adm-banner-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-banner-acts{display:flex;gap:.25rem;flex-shrink:0}
.adm-banner-acts button{background:#fff;border:1.5px solid #E8EAF0;border-radius:5px;width:24px;height:24px;cursor:pointer;font-size:.75rem;color:#6B7280;transition:all .18s;display:inline-flex;align-items:center;justify-content:center}
.adm-banner-acts button:hover{border-color:#C4A882;color:#8B6E4E}
.abr-del:hover{border-color:#ff6b6b !important;color:#ff6b6b !important}
.bnr-prod-grid{display:flex;flex-direction:column;overflow-y:auto;flex:1}
.bnr-prod-item{display:flex;align-items:center;gap:.6rem;padding:.58rem .8rem;border-radius:8px;transition:background .18s}
.bnr-prod-item:hover{background:#F5F6FA}
.bnr-prod-thumb{width:38px;height:38px;border-radius:7px;overflow:hidden;background:#F5F6FA;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.bnr-prod-thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.bnr-prod-info{flex:1;min-width:0}
.bnr-prod-cat{font-family:var(--sans);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8B6E4E;display:block}
.bnr-prod-name{font-family:var(--sans);font-size:.78rem;font-weight:600;color:#1A1D24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.bnr-prod-price{font-family:var(--sans);font-size:.74rem;font-weight:700;color:#374151}
.bnr-prod-acts{display:flex;gap:.28rem;flex-shrink:0}
.bpa-edit,.bpa-del{width:26px;height:26px;border:1.5px solid #E8EAF0;border-radius:6px;background:#fff;cursor:pointer;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;transition:all .18s}
.bpa-edit:hover{border-color:#C4A882}
.bpa-del:hover{border-color:#ff6b6b}
.bnr-prod-search-box{display:flex;align-items:center;gap:.5rem;padding:.58rem .85rem;border-bottom:1px solid #F5F6FA;background:#F9FAFB}
.bnr-prod-search-box input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:.8rem;color:#374151;background:transparent}
.bnr-prod-empty{padding:1.2rem;text-align:center;font-family:var(--sans);font-size:.78rem;color:#9CA3AF;display:flex;flex-direction:column;align-items:center;gap:.4rem}

/* MISC */
.adm-dash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;gap:.6rem;font-family:var(--sans);color:#9CA3AF;text-align:center}

/* RESPONSIVE */
@media(max-width:1100px){.adm-kpi-grid{grid-template-columns:1fr 1fr}.adm-dash-cols{grid-template-columns:1fr}}
@media(max-width:900px){
  .adm-sb{width:200px}
  .adm-form-layout{grid-template-columns:1fr}
  .adm-form-right{display:none}
  .adm-banner-view{grid-template-columns:1fr}
  .adm-field-row{grid-template-columns:1fr}
}


/* ════════════════════════════════════════════════
   ESTILOS DEL SITIO — Restaurados
   MarSan Home — Componentes principales
════════════════════════════════════════════════ */

/* ── USER NAV BTN ── */
.user-nav-btn{background:none;border:1.5px solid rgba(255,255,255,.2);border-radius:50px;display:flex;align-items:center;gap:.4rem;cursor:pointer;padding:.5rem 1.1rem .5rem .7rem;transition:all .25s;flex-shrink:0;color:#fff}
.user-nav-btn:hover{background:rgba(196,168,130,.15);border-color:rgba(196,168,130,.5);color:var(--gold)}
.unb-ico{display:flex;align-items:center;color:inherit}
.unb-ico svg{stroke:currentColor;width:21px;height:21px}
.unb-lbl{font-family:var(--sans);font-size:.86rem;font-weight:500;color:rgba(255,255,255,.75)}

/* ── CART BUTTON ── */
.cart-btn{position:relative;background:none;border:1.5px solid rgba(255,255,255,.2);border-radius:50%;width:46px;height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);transition:all .25s;flex-shrink:0}
.cart-btn:hover{background:rgba(196,168,130,.15);border-color:rgba(196,168,130,.5);color:var(--gold);transform:scale(1.06)}
.cart-btn svg{width:24px;height:24px}
.cart-badge{position:absolute;top:-5px;right:-5px;background:var(--terra);color:#fff;font-family:var(--sans);font-size:.62rem;font-weight:800;min-width:20px;height:20px;padding:0 3px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(44,46,51,.99);line-height:1}

/* ── CART OVERLAY + PANEL ── */
.cart-overlay{position:fixed;inset:0;background:rgba(10,12,16,.5);z-index:800;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(3px)}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:#FAFAFA;z-index:850;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:-24px 0 64px rgba(0,0,0,.14)}
.cart-panel.open{transform:translateX(0)}

/* Header */
.cp-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.4rem 1.1rem;background:#fff;border-bottom:1px solid #F0F0F0;flex-shrink:0}
.cp-title-wrap{display:flex;align-items:center;gap:.65rem}
.cp-icon{color:var(--dark);display:flex;align-items:center}
.cp-title{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--dark);display:block;line-height:1}
.cp-subtitle{font-family:var(--sans);font-size:.7rem;color:#9CA3AF;display:block;margin-top:.1rem}
.cp-close{width:32px;height:32px;background:none;border:1.5px solid #E8EAF0;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6B7280;transition:all .2s}
.cp-close:hover{border-color:#1A1D24;color:#1A1D24}

/* Lista de items */
.cp-items{flex:1;overflow-y:auto;padding:.6rem 0}
.cp-items::-webkit-scrollbar{width:3px}
.cp-items::-webkit-scrollbar-thumb{background:#E0E0E0;border-radius:2px}

/* Estado vacío */
.cart-empty{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:4rem 1.5rem;text-align:center}
.ce-ico{font-size:2.5rem;opacity:.4}
.cart-empty h3{font-family:var(--serif);font-size:1.15rem;color:var(--dark)}
.cart-empty p{font-family:var(--sans);font-size:.79rem;color:#9CA3AF;line-height:1.6}
.ce-btn{margin-top:.8rem;background:var(--dark);color:#fff;border:none;border-radius:8px;padding:.7rem 1.6rem;font-family:var(--sans);font-size:.8rem;font-weight:700;cursor:pointer;letter-spacing:.06em;transition:all .25s}
.ce-btn:hover{background:var(--gold);transform:translateY(-1px)}

/* Cada ítem del carrito */
.ci{display:flex;align-items:flex-start;gap:.85rem;padding:.95rem 1.3rem;background:#fff;border-bottom:1px solid #F5F5F5;transition:background .18s}
.ci:hover{background:#FAFAFA}
.ci-img-wrap{width:72px;height:72px;border-radius:10px;overflow:hidden;background:#F5F6FA;flex-shrink:0;border:1px solid #ECEEF2}
.ci-img-wrap img{width:100%;height:100%;object-fit:contain;padding:6px}
.ci-body{flex:1;min-width:0}
.ci-cat{font-family:var(--sans);font-size:.59rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-dk);display:block;margin-bottom:.2rem}
.ci-name{font-family:var(--sans);font-size:.82rem;font-weight:500;color:#1A1D24;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin-bottom:.5rem}
.ci-color{font-family:var(--sans);font-size:.72rem;color:rgba(58,60,65,.6);margin:-.3rem 0 .5rem}
.ci-color strong{color:var(--gold-dk);font-weight:600}
.ci-bottom-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ci-qty-row{display:inline-flex;align-items:center;border:1.5px solid #E8EAF0;border-radius:8px;overflow:hidden}
.ci-qty-btn{width:30px;height:28px;border:none;background:none;cursor:pointer;font-size:1rem;color:#374151;display:flex;align-items:center;justify-content:center;transition:background .15s;font-family:var(--sans)}
.ci-qty-btn:hover{background:#F5F6FA;color:var(--dark)}
.ci-qty-val{font-family:var(--sans);font-size:.82rem;font-weight:700;color:#1A1D24;min-width:28px;text-align:center;border-left:1.5px solid #E8EAF0;border-right:1.5px solid #E8EAF0;height:28px;display:flex;align-items:center;justify-content:center}
.ci-price{font-family:var(--sans);font-size:.88rem;font-weight:800;color:#1A1D24;white-space:nowrap}
.ci-del{background:none;border:none;cursor:pointer;color:#C8CACF;padding:.3rem;display:flex;align-items:center;flex-shrink:0;margin-top:.1rem;transition:color .18s;border-radius:5px}
.ci-del:hover{color:#EF4444;background:rgba(239,68,68,.06)}

/* Footer */
/* FOOTER DEL CARRITO */
.cp-footer{
  padding:1rem 1.2rem 1.1rem;
  border-top:1px solid #EDEBE7;
  flex-shrink:0;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

/* Total */
.cp-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#F8F4EE;
  border-radius:10px;
  padding:.75rem 1rem;
}
.cp-total-label{font-family:var(--sans);font-size:.78rem;font-weight:600;color:#374151;display:block}
.cp-total-note{font-family:var(--sans);font-size:.62rem;color:#9CA3AF;display:block;margin-top:.15rem}
.cp-total-val{
  font-family:var(--sans);
  font-size:1.25rem;
  font-weight:800;
  color:#1A1D24;
  line-height:1;
  white-space:nowrap;
}

/* Botón principal */
.cp-buy-now{
  width:100%;
  background:var(--dark);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:.9rem 1rem;
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
  transition:all .25s;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.cp-buy-now:hover{
  background:var(--gold);
  color:var(--dark);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(196,168,130,.35);
}

/* Métodos de pago */
.cp-pays{display:flex;flex-direction:column;gap:.4rem}
.cpp-label{
  font-family:var(--sans);
  font-size:.6rem;
  font-weight:600;
  color:#B0B5C0;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.cpp-list{display:flex;justify-content:center;gap:.3rem;flex-wrap:wrap}
.pmi{font-family:var(--sans);font-size:.6rem;font-weight:700;padding:.18rem .5rem;border-radius:5px;background:#F5F2EE;color:#8B7B6B;letter-spacing:.03em;text-transform:uppercase;border:1px solid rgba(196,168,130,.2)}
.cp-clear{
  width:100%;
  background:none;
  border:none;
  padding:.3rem;
  font-family:var(--sans);
  font-size:.72rem;
  color:#C0C5D0;
  cursor:pointer;
  transition:color .2s;
  text-align:center;
}
.cp-clear:hover{color:#EF4444}

/* ── AUTH OVERLAY ── */
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:700;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:1rem}
.auth-overlay.open{display:flex}
.auth-modal{background:#fff;border-radius:20px;width:100%;max-width:440px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.25);animation:slideUp .35s var(--bounce)}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.auth-head{display:flex;justify-content:space-between;align-items:flex-start;padding:1.4rem 1.6rem 1rem;background:linear-gradient(135deg,var(--dark) 0%,#2A2D31 100%)}
.auth-logo{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:#fff;display:block}
.auth-logo em{color:var(--gold);font-style:normal}
.auth-tagline{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);display:block;margin-top:.15rem}
.auth-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.2rem;cursor:pointer;padding:.2rem;line-height:1;transition:color .2s}
.auth-close:hover{color:#fff}
.auth-tabs{display:flex;border-bottom:1px solid rgba(0,0,0,.08)}
.auth-tab{flex:1;background:none;border:none;padding:.85rem;font-family:var(--sans);font-size:.82rem;font-weight:500;color:rgba(90,92,96,.55);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s}
.auth-tab.active{color:var(--dark);border-bottom-color:var(--gold);font-weight:700}
.auth-body{padding:1.4rem 1.6rem}
.google-signin-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.7rem;background:#fff;border:1.5px solid rgba(0,0,0,.12);border-radius:50px;padding:.82rem;font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--dark);cursor:pointer;transition:all .25s;margin-bottom:.9rem}
.google-signin-btn:hover{border-color:var(--gold);background:rgba(196,168,130,.04)}
.auth-or{text-align:center;position:relative;margin:.8rem 0;font-family:var(--sans);font-size:.72rem;color:rgba(90,92,96,.4)}
.auth-or::before,.auth-or::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:rgba(0,0,0,.1)}
.auth-or::before{left:0}.auth-or::after{right:0}
.auth-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}
.auth-field label{font-family:var(--sans);font-size:.72rem;font-weight:600;color:rgba(90,92,96,.8);text-transform:uppercase;letter-spacing:.06em}
.auth-field input{border:1.5px solid rgba(0,0,0,.1);border-radius:8px;padding:.7rem 1rem;font-family:var(--sans);font-size:.9rem;color:var(--dark);outline:none;transition:border-color .2s}
.auth-field input:focus{border-color:var(--gold)}
.auth-err{font-family:var(--sans);font-size:.74rem;color:#e74c3c;min-height:1.1em;margin-bottom:.4rem}
.auth-submit{width:100%;background:linear-gradient(135deg,var(--gold),var(--terra));border:none;border-radius:50px;padding:.9rem;color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:700;cursor:pointer;margin-top:.3rem;transition:opacity .2s}
.auth-submit:hover{opacity:.9}
.auth-switch{font-family:var(--sans);font-size:.78rem;color:rgba(90,92,96,.55);text-align:center;margin-top:.8rem}
.auth-switch a{color:var(--gold-dk);cursor:pointer;text-decoration:underline;font-weight:600}
.logged-card{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1rem 0}
.lc-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--terra));display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.lc-info{text-align:center}
.lc-name{font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--dark);display:block}
.lc-email{font-family:var(--sans);font-size:.75rem;color:rgba(90,92,96,.55);display:block}
.logged-actions{display:flex;gap:.6rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}
.la-btn{background:var(--dark);color:#fff;border:none;border-radius:30px;padding:.55rem 1.1rem;font-family:var(--sans);font-size:.76rem;font-weight:600;cursor:pointer;transition:background .2s}
.la-btn:hover{background:var(--gold)}
.la-logout{background:rgba(231,76,60,.1);color:#e74c3c;border:1px solid rgba(231,76,60,.2)}
.la-logout:hover{background:rgba(231,76,60,.2)}

/* ── CHECKOUT OVERLAY ── */
.co-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:900;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:1rem;overflow-y:auto}
.co-overlay.open{display:flex}
.co-modal{background:#fff;border-radius:20px;width:100%;max-width:820px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,.25);animation:slideUp .35s var(--bounce)}
.co-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.6rem;background:linear-gradient(135deg,var(--dark),#2C2E33);flex-shrink:0;gap:1rem;flex-wrap:wrap}
.co-head-info{flex-shrink:0}
.co-head-title{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:#fff;margin:0 0 .1rem}
.co-head-sub{font-family:var(--sans);font-size:.72rem;color:rgba(255,255,255,.38);margin:0}

/* Indicador de pasos del checkout */
.co-steps{display:flex;align-items:center;gap:0;flex-shrink:0}
.co-step{display:flex;flex-direction:column;align-items:center;gap:.3rem;position:relative}
.co-step-num{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.72rem;font-weight:700;color:rgba(255,255,255,.4);transition:all .3s}
.co-step span{font-family:var(--sans);font-size:.6rem;color:rgba(255,255,255,.3);font-weight:500;white-space:nowrap;transition:all .3s}
.co-step.active .co-step-num{background:var(--gold);border-color:var(--gold);color:var(--dark)}
.co-step.active span{color:var(--gold);font-weight:700}
.co-step.done .co-step-num{background:#2ecc71;border-color:#2ecc71;color:#fff}
.co-step.done span{color:rgba(255,255,255,.6)}
.co-step-line{width:32px;height:1.5px;background:rgba(255,255,255,.15);flex-shrink:0;margin:0 .3rem;margin-bottom:1.4rem}
.co-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.3rem;cursor:pointer;padding:.2rem;line-height:1;transition:color .2s}
.co-close:hover{color:#fff}
.co-body{display:grid;grid-template-columns:1fr 1.3fr;overflow:auto;flex:1}
.co-summary{padding:1.4rem 1.6rem;background:#F8F5F1;border-right:1px solid rgba(0,0,0,.07);overflow-y:auto}
.co-sec-title{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--dark);margin:0 0 .9rem}
.co-items-list{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.cpc-inner{display:grid;grid-template-columns:52px 1fr auto;gap:.65rem;align-items:center}
.co-item-img{width:52px;height:52px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.co-item-img img{width:100%;height:100%;object-fit:contain;padding:3px}
.cpc-badges{display:flex;flex-direction:column;min-width:0}
.cpc-name{font-family:var(--serif);font-size:.88rem;font-weight:500;color:var(--dark);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.cpc-cat{font-family:var(--sans);font-size:.62rem;color:rgba(90,92,96,.5);margin-top:.1rem;display:block}
.cpc-qty{font-family:var(--sans);font-size:.72rem;color:rgba(90,92,96,.5)}
.cpc-price{font-family:var(--sans);font-size:.86rem;font-weight:700;color:var(--dark);white-space:nowrap}
.co-total-row{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;border-top:1px solid rgba(0,0,0,.08);margin-top:.3rem}
.co-total-label{font-family:var(--sans);font-size:.8rem;color:rgba(90,92,96,.7)}
.co-total-val{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--dark)}
.co-shipping-note{font-family:var(--sans);font-size:.72rem;color:rgba(90,92,96,.55);margin-top:.3rem;line-height:1.5}
.co-pay-methods{margin-top:1rem}
.co-pm-label{font-family:var(--sans);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(90,92,96,.5);display:block;margin-bottom:.45rem}
.co-pm-list{display:flex;flex-wrap:wrap;gap:.35rem}

/* ── CHECKOUT FORM — Diseño organizado ── */
.co-form{display:flex;flex-direction:column;gap:0;padding:1.2rem 1.4rem;overflow-y:auto;flex:1}
.co-form::-webkit-scrollbar{width:4px}
.co-form::-webkit-scrollbar-thumb{background:#E0DDD9;border-radius:2px}

/* Secciones del formulario */
.co-form-section{background:#fff;border:1px solid #EEEDE9;border-radius:12px;padding:1.1rem 1.2rem;margin-bottom:.85rem}
.co-form-section-title{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--dark);margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:1px solid #F5F2EE}

/* Campos del formulario */
.co-form-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.65rem}
.co-form-field:last-child{margin-bottom:0}
.co-form-label{font-family:var(--sans);font-size:.72rem;font-weight:600;color:#374151}
.co-req{color:var(--terra)}
.co-form-input{border:1.5px solid #E5E7EB;border-radius:8px;padding:.65rem .9rem;font-family:var(--sans);font-size:.85rem;color:var(--dark);outline:none;width:100%;transition:border-color .25s,box-shadow .25s;background:#fff;box-sizing:border-box}
.co-form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,168,130,.12)}
.co-form-textarea{resize:vertical;min-height:70px}
.co-form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* Métodos de pago — lista organizada */
.co-pay-list{display:flex;flex-direction:column;gap:.5rem}
.co-pay-option{cursor:pointer;display:block}
.co-pay-option input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.co-pay-option-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:.6rem;padding:.75rem 1rem;border:1.5px solid #E5E7EB;border-radius:10px;transition:all .2s;background:#fff}
.co-pay-option:hover .co-pay-option-inner{border-color:var(--gold);background:rgba(196,168,130,.03)}
.co-pay-option input:checked + .co-pay-option-inner{border-color:var(--gold);background:rgba(196,168,130,.06);box-shadow:0 0 0 3px rgba(196,168,130,.12)}
.co-pay-option-left{display:flex;align-items:center;gap:.75rem;flex:1;min-width:220px}
.co-pay-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:#F5F2EE;flex-shrink:0}
.co-pay-name{font-family:var(--sans);font-size:.83rem;font-weight:700;color:var(--dark);display:block;line-height:1.2}
.co-pay-sub{font-family:var(--sans);font-size:.67rem;color:#9CA3AF;display:block}
.co-pay-badges{display:flex;flex-wrap:wrap;gap:.3rem;flex-shrink:0;max-width:100%}
.co-submit{width:100%;background:var(--dark);border:none;border-radius:10px;padding:1rem;color:#fff;font-family:var(--sans);font-size:.88rem;font-weight:700;cursor:pointer;margin-top:.5rem;transition:all .25s;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;gap:.55rem;text-transform:uppercase}
.co-submit:hover{background:var(--gold);color:var(--dark);transform:translateY(-1px);box-shadow:0 8px 28px rgba(196,168,130,.35)}
.co-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.co-secure-note{display:flex;align-items:center;justify-content:center;gap:.4rem;font-family:var(--sans);font-size:.68rem;color:rgba(90,92,96,.45);margin-top:.65rem;text-align:center}
.co-pay-error{font-family:var(--sans);font-size:.78rem;color:#e74c3c;background:rgba(231,76,60,.06);border:1px solid rgba(231,76,60,.2);border-radius:8px;padding:.6rem .9rem;margin-top:.5rem;text-align:center}
@media(max-width:700px){.co-body{grid-template-columns:1fr}.co-summary{border-right:none;border-bottom:1px solid rgba(0,0,0,.07)}}

@media (max-width: 480px) {
  .co-head { padding: .8rem 1rem; gap: .5rem; }
  .co-head-title { font-size: 1rem; }
  .co-head-sub { display: none; }
  .co-step span { display: none; }
  .co-step-num { width: 24px; height: 24px; font-size: .65rem; }
  .co-step-line { width: 16px; margin-bottom: 0; }
  .co-form-row { grid-template-columns: 1fr; }
  .co-form { padding: 1rem; }
  .co-form-section { padding: .9rem 1rem; }
}

/* ── BARRA DE COOKIES ── */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--dark);color:#fff;display:none;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;padding:1rem 1.6rem;box-shadow:0 -8px 30px rgba(0,0,0,.18);animation:slideUp .4s var(--bounce)}
.cookie-bar.open{display:flex}
.cookie-text{font-family:var(--sans);font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.85);flex:1;min-width:240px}
.cookie-text a{color:var(--gold);text-decoration:underline;font-weight:600}
.cookie-actions{display:flex;gap:.6rem;flex-shrink:0}
.cookie-btn{border:none;border-radius:30px;padding:.65rem 1.4rem;font-family:var(--sans);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}
.cookie-reject{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.cookie-reject:hover{background:rgba(255,255,255,.18)}
.cookie-accept{background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff}
.cookie-accept:hover{opacity:.9}
@media(max-width:640px){
  .cookie-bar{flex-direction:column;align-items:stretch;text-align:center;padding:1rem 1.2rem}
  .cookie-actions{justify-content:center}
  .cookie-btn{flex:1}
}

/* ── POPUP DE BIENVENIDA ── */
.promo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:1rem}
.promo-overlay.open{display:flex}
.promo-modal{background:#fff;border-radius:20px;width:100%;max-width:420px;padding:2.2rem 2rem;text-align:center;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.25);animation:slideUp .35s var(--bounce)}
.promo-close{position:absolute;top:.9rem;right:.9rem;background:rgba(0,0,0,.06);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.promo-close:hover{background:rgba(0,0,0,.12)}
.promo-badge{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:30px;padding:.4rem 1rem;margin-bottom:1rem}
.promo-title{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--dark);margin:0 0 .7rem}
.promo-title em{color:var(--gold-dk);font-style:normal}
.promo-text{font-family:var(--sans);font-size:.88rem;line-height:1.7;color:rgba(90,92,96,.75);margin:0 0 1.4rem}
.promo-cta{background:linear-gradient(135deg,var(--gold),var(--terra));border:none;border-radius:50px;padding:.9rem 2.2rem;color:#fff;font-family:var(--sans);font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity .2s;width:100%}
.promo-cta:hover{opacity:.9}
.promo-noshow{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.1rem;font-family:var(--sans);font-size:.74rem;color:rgba(90,92,96,.6);cursor:pointer}
.promo-noshow input{cursor:pointer}
@media(max-width:640px){
  .promo-modal{padding:1.8rem 1.4rem}
  .promo-title{font-size:1.35rem}
}

/* ── MODAL LEGAL (Términos, Privacidad, Cookies) ── */
.legal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9100;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:1rem}
.legal-overlay.open{display:flex}
.legal-modal{background:#fff;border-radius:20px;width:100%;max-width:680px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,.25);animation:slideUp .35s var(--bounce)}
.legal-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.6rem;background:linear-gradient(135deg,var(--dark),#2C2E33);flex-shrink:0}
.legal-head h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:#fff;margin:0}
.legal-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.3rem;cursor:pointer;padding:.2rem;line-height:1;transition:color .2s}
.legal-close:hover{color:#fff}
.legal-body{padding:1.4rem 1.8rem;overflow-y:auto;font-family:var(--sans);font-size:.85rem;line-height:1.75;color:rgba(60,60,60,.85)}
.legal-body h4{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--dark);margin:1.2rem 0 .5rem}
.legal-body h4:first-child{margin-top:0}
.legal-body p{margin:0 0 .7rem}
.legal-body ul{margin:0 0 .9rem;padding-left:1.3rem}
.legal-body li{margin-bottom:.35rem}
.legal-body a{color:var(--gold-dk);text-decoration:underline;font-weight:600}
@media(max-width:640px){
  .legal-modal{max-height:90vh}
  .legal-head{padding:1rem 1.2rem}
  .legal-body{padding:1.1rem 1.2rem}
}

/* ── PRODUCT MODAL ── */
/* ══ MODAL PRODUCTO — Diseño profesional ══ */
.prod-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 8000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1rem;
  overflow-y: auto;
}
.prod-modal.open { display: flex; }

.pm-inner {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: 1fr;   /* fuerza que las celdas llenen la altura del grid */
  height: min(720px, 90vh);  /* altura fija — no min-height, sino height */
  max-height: 90vh;
  box-shadow: 0 32px 100px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
  animation: slideUp .4s cubic-bezier(.16,1,.3,1);
  position: relative;
  overflow: hidden;
}

/* Panel imagen */
.pm-img-panel {
  background: linear-gradient(145deg, #F5EFE7 0%, #EDE5D8 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(196,168,130,.2);
  min-height: 0;
}

/* Área de imagen — ocupa todo el espacio disponible */
.pm-img-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.8rem;
  position: relative;
  min-height: 0;
}

/* Skeleton mientras carga */
.pm-img-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248,244,238,.8);
  border-radius: 12px;
  margin: 1.5rem;
}

/* Imagen del producto */
#pmImg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  opacity: 0;
  transition: opacity .4s ease;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.14));
}

/* Footer del panel — logo y badges */
.pm-img-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.2rem;
  border-top: 1px solid rgba(196,168,130,.15);
  background: rgba(255,255,255,.5);
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.pm-modal-logo { height: 24px; border-radius: 5px; display: block; opacity:.8; }

/* Panel detalle — los botones siempre al fondo */
.pm-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  /* height viene del grid con grid-template-rows:1fr */
}

/* Cabecera del detalle — fija arriba */
.pm-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 1.4rem;
  border-bottom: 1px solid #F5F5F5;
  flex-shrink: 0;
  background: #fff;
}
.pm-back-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1.5px solid #E5E7EB;
  border-radius: 50px;
  padding: .42rem 1rem;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all .2s;
}
.pm-back-btn:hover { border-color: var(--dark); color: var(--dark); }
.pm-close-btn {
  width: 34px; height: 34px;
  background: #F5F6FA;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6B7280;
  transition: all .2s;
}
.pm-close-btn:hover { background: #E5E7EB; color: #1A1D24; }

/* Contenido scrollable */
.pm-detail-body {
  flex: 1;
  min-height: 0;
  padding: 1.1rem 1.4rem .8rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pm-detail-body::-webkit-scrollbar { width: 3px; }
.pm-detail-body::-webkit-scrollbar-thumb { background: rgba(196,168,130,.3); border-radius: 2px; }

/* CTAs — siempre visibles al fondo */
.pm-cta-sticky {
  padding: .9rem 1.4rem 1rem;
  border-top: 1px solid #F0EEEA;
  background: #fff;
  flex-shrink: 0;
}
.pm-cta-group {
  display: flex;
  gap: .6rem;
}
.pm-cta-cart {
  flex: 1;
  background: #fff;
  color: var(--dark);
  border: 2px solid #D0CBC3;
  border-radius: 10px;
  padding: .92rem 1rem;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
  letter-spacing: .02em;
}
.pm-cta-cart:hover { border-color: var(--dark); background: var(--dark); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(58,60,65,.22); }
.pm-cta-cod {
  flex: 1;
  background: #fff;
  color: var(--gold-dk);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: .92rem 1rem;
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
  letter-spacing: .02em;
}
.pm-cta-cod:hover { background: var(--gold); color: var(--dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(196,168,130,.3); }
.pm-cta-buy {
  flex: 1.2;
  background: var(--dark);
  color: #fff;
  border: 2px solid var(--dark);
  border-radius: 10px;
  padding: .92rem 1rem;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28,31,34,.25);
  transition: all .25s;
  letter-spacing: .03em;
}
.pm-cta-buy:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(196,168,130,.45); }

/* Trust badges compactos */
.pm-trust-row {
  display: flex;
  gap: 0;
  margin-top: .75rem;
  background: #F8F4EE;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #EEEBE5;
}
.pm-trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  text-align: center;
  padding: .7rem .3rem;
  border-right: 1px solid #EEEBE5;
}
.pm-trust-item:last-child { border-right: none; }
.pm-trust-ico { font-size: 1.1rem; }
.pm-trust-item strong { font-family: var(--sans); font-size: .68rem; font-weight: 700; color: var(--dark); display: block; }
.pm-trust-item span { font-family: var(--sans); font-size: .6rem; color: #9CA3AF; display: block; }

/* Precio */
.pm-price-section { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .9rem; flex-wrap: wrap; background: #FDFAF7; border-radius: 10px; padding: .8rem 1rem; margin-left: -4px; margin-right: -4px; }
.pm-price-main { font-family: var(--sans); font-size: 2rem; font-weight: 800; color: #1A1D24; }
.pm-price-old { font-family: var(--sans); font-size: 1rem; color: #9CA3AF; text-decoration: line-through; }
.pm-price-save { font-family: var(--sans); font-size: .72rem; font-weight: 700; background: rgba(239,68,68,.08); color: #EF4444; padding: .22rem .6rem; border-radius: 20px; }
.pm-price-cop { font-family: var(--sans); font-size: .82rem; color: #9CA3AF; }

/* Selector de color (landing de producto) */
.ld-color-section { margin-bottom: 1.1rem; }
.ld-color-label { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .6rem; }
.ld-color-label strong { color: var(--gold-dk); font-weight: 700; }
.ld-color-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.ld-color-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #E5E7EB; cursor: pointer; padding: 0; transition: box-shadow .18s, transform .18s; }
.ld-color-swatch:hover { transform: translateY(-1px); }
.ld-color-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }

/* Cantidad */
.pm-qty-section { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.pm-qty-label { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: #374151; }
.pm-qty-ctrl { display: inline-flex; align-items: center; border: 1.5px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.pm-qty-btn { width: 36px; height: 36px; border: none; background: none; cursor: pointer; font-size: 1.1rem; color: #374151; display: flex; align-items: center; justify-content: center; transition: background .18s; }
.pm-qty-btn:hover { background: #F5F6FA; }
.pm-qty-val { font-family: var(--sans); font-size: .9rem; font-weight: 700; color: #1A1D24; min-width: 40px; text-align: center; border-left: 1.5px solid #E5E7EB; border-right: 1.5px solid #E5E7EB; height: 36px; display: flex; align-items: center; justify-content: center; }
.pm-qty-total { font-family: var(--sans); font-size: .82rem; font-weight: 700; color: var(--gold-dk); }

/* Separador */
.pm-sep { height: 1px; background: #F5F5F5; margin: 1rem 0; }

/* Descripción */
.pm-desc-title { font-family: var(--sans); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #9CA3AF; margin-bottom: .5rem; }
.pm-desc-text { font-family: var(--sans); font-size: .84rem; color: #4B5563; line-height: 1.75; margin: 0; }
.pm-feats-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.pm-feats-list li { font-family: var(--sans); font-size: .81rem; color: #4B5563; display: flex; align-items: flex-start; gap: .45rem; }
.pm-feats-list li::before { content: '✓'; color: #10B981; font-weight: 800; flex-shrink: 0; }

/* Rating */
.pm-prod-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: #1A1D24; line-height: 1.25; margin: 0 0 .45rem; flex-shrink: 0; padding: .85rem 1.4rem 0; }
.pm-rating-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; padding: 0 1.4rem .8rem; border-bottom: 1px solid #F0EEEA; }
.pm-stars-row { display: flex; gap: .05rem; }
.pm-star { color: #FFC107; font-size: .9rem; }
.pm-star.half { opacity: .5; }
.pm-rating-val { font-family: var(--sans); font-size: .8rem; font-weight: 700; color: #1A1D24; }
.pm-rating-cnt { font-family: var(--sans); font-size: .75rem; color: #9CA3AF; }
.pm-stock-chip { font-family: var(--sans); font-size: .7rem; font-weight: 700; background: rgba(16,185,129,.1); color: #059669; padding: .22rem .7rem; border-radius: 20px; }

/* Badges */
.pm-badge-cat { display: inline-flex; align-items: center; font-family: var(--sans); font-size: .65rem; font-weight: 700; padding: .25rem .7rem; border-radius: 20px; background: rgba(196,168,130,.15); color: var(--gold-dk); text-transform: uppercase; letter-spacing: .1em; }
.pm-badge-new { font-family: var(--sans); font-size: .63rem; font-weight: 700; padding: .22rem .65rem; border-radius: 20px; background: rgba(74,166,128,.12); color: #059669; }
.pm-badge-hot { font-family: var(--sans); font-size: .63rem; font-weight: 700; padding: .22rem .65rem; border-radius: 20px; background: rgba(196,168,130,.15); color: var(--gold-dk); }

/* FAQ */
.pm-faq-section { margin-top: .5rem; }
.pm-faq-toggle { width: 100%; background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; font-family: var(--sans); font-size: .82rem; font-weight: 600; color: #1A1D24; margin-bottom: .5rem; transition: background .2s; }
.pm-faq-toggle:hover { background: #F3F4F6; }
.pm-faq-toggle-ico { transition: transform .3s; color: #9CA3AF; }
.pm-faq-toggle.open .pm-faq-toggle-ico { transform: rotate(180deg); color: var(--gold-dk); }
.pm-faq-body { display: none; padding: .8rem 1rem; background: #F9FAFB; border-radius: 0 0 10px 10px; margin-top: -.5rem; margin-bottom: .5rem; }
.pm-faq-body.open { display: block; }
.pm-faq-item { padding: .55rem 0; border-bottom: 1px solid #F0F0F0; }
.pm-faq-item:last-child { border-bottom: none; }
.pm-faq-q { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: #1A1D24; margin-bottom: .3rem; }
.pm-faq-ans { font-family: var(--sans); font-size: .77rem; color: #6B7280; line-height: 1.65; }

/* Relacionados */
.pm-related { padding: 1rem 1.4rem; border-top: 1px solid #F0EEEA; background: #FDFAF7; flex-shrink: 0; }
.pm-related-title { font-family: var(--sans); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #B0A89E; margin-bottom: .75rem; }
.pm-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; }
.pm-rel-card { background: #fff; border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform .22s, box-shadow .22s; border: 1px solid #EEEBE5; }
.pm-rel-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(196,168,130,.25); border-color: rgba(196,168,130,.4); }
.pm-rel-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 8px; background: #F8F4EE; display: block; }
.pm-rel-name { font-family: var(--sans); font-size: .67rem; padding: .4rem .6rem .2rem; color: #1A1D24; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.pm-rel-price { font-family: var(--sans); font-size: .72rem; font-weight: 800; color: var(--dark); padding: 0 .6rem .6rem; }

/* Opiniones de clientes */
.pm-reviews { padding: 1.2rem 1.4rem; border-top: 1px solid #F0EEEA; background: #fff; flex-shrink: 0; }
.pm-reviews-grid { display: flex; flex-direction: column; gap: .8rem; }
.pm-reviews-grid .tc { width: 100%; }

@media(max-width:768px){
  .pm-inner{grid-template-columns:1fr;max-height:98vh;border-radius:16px 16px 0 0;margin-top:auto;align-self:flex-end;width:100%;max-width:100%}
  .pm-img-panel{min-height:240px;max-height:280px}
  .pm-related-grid{grid-template-columns:repeat(2,1fr)}
  .prod-modal{padding:0;align-items:flex-end}
}
.pm-img-badges{position:absolute;bottom:1rem;left:1rem;display:flex;flex-direction:column;gap:.3rem}
.pm-badge-cat,.pm-badge-new,.pm-badge-hot{display:inline-flex;font-family:var(--sans);font-size:.62rem;font-weight:700;padding:.22rem .65rem;border-radius:20px;background:rgba(255,255,255,.85);color:var(--dark);backdrop-filter:blur(4px)}
.pm-badge-hot{background:rgba(196,168,130,.88)}
.pm-badge-new{background:rgba(46,204,113,.85);color:#fff}
.pm-trust-item{display:flex;align-items:flex-start;gap:.45rem;flex:1;min-width:100px}
.pm-trust-ico{font-size:1.1rem;margin-top:.1rem}
.pm-trust-item strong{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--dark);display:block;line-height:1.2}
.pm-trust-item span{font-family:var(--sans);font-size:.68rem;color:rgba(90,92,96,.5);display:block}
.pm-faq-section{margin-top:1rem}
.pm-faq-toggle{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:.7rem 0;font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--dark);border-top:1px solid rgba(0,0,0,.07)}
.pm-faq-toggle-ico{transition:transform .3s;font-size:.8rem;color:rgba(90,92,96,.4)}
.pm-faq-toggle.open .pm-faq-toggle-ico{transform:rotate(180deg)}
.pm-faq-body{display:none;padding-bottom:.5rem}
.pm-faq-body.open{display:block}
.pm-faq-item{padding:.55rem 0;border-bottom:1px solid rgba(0,0,0,.05)}
.pm-faq-q{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--dark);margin-bottom:.25rem}
.pm-faq-ans{font-family:var(--sans);font-size:.76rem;color:rgba(90,92,96,.65);line-height:1.6}
.pm-related{padding:1.2rem 1.4rem;border-top:1px solid rgba(0,0,0,.06);background:#F8F5F1}
.pm-related-title{font-family:var(--sans);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(90,92,96,.5);margin-bottom:.8rem}
.pm-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.pm-rel-card{background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid rgba(0,0,0,.06)}
.pm-rel-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.pm-rel-card img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:8px;background:#F8F5F1}
.pm-rel-name{font-family:var(--sans);font-size:.7rem;padding:.5rem .6rem .3rem;color:var(--dark);font-weight:500;display:-webkit-box;display:block;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-rel-price{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--gold-dk);padding:0 .6rem .6rem}
@media(max-width:700px){.pm-inner{grid-template-columns:1fr;max-height:95vh}.pm-img-panel{aspect-ratio:unset;padding:1.2rem}.pm-img-main{aspect-ratio:1/1}.pm-related-grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width: 480px) {
  .pm-img-panel { min-height: 200px; max-height: 240px; }
  .pm-related-grid { gap: .5rem; }
  .pm-trust-item { min-width: 0; flex: 1 1 100%; }
}

/* ── CATALOG SECTION ── */
.catalog-sec{padding:var(--pad-section) 1.5rem;background:#F5EFE6}
.cat-hd{text-align:center;margin-bottom:2.5rem}
.cat-toolbar{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem;flex-wrap:wrap}
.cat-search-wrap{display:flex;align-items:center;gap:.5rem;background:#fff;border:1.5px solid rgba(0,0,0,.09);border-radius:50px;padding:.55rem 1rem .55rem .8rem;flex:1;min-width:180px;transition:border-color .3s}
.cat-search-wrap:focus-within{border-color:var(--gold)}
.cat-search-ico{font-size:.9rem;color:rgba(90,92,96,.4)}
.cat-search-wrap input{border:none;outline:none;background:none;font-family:var(--sans);font-size:.85rem;color:var(--dark);width:100%}
.cat-search-wrap input::placeholder{color:rgba(90,92,96,.35)}
.cat-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.cf{font-family:var(--sans);font-size:.74rem;font-weight:500;background:#fff;border:1.5px solid rgba(0,0,0,.09);border-radius:50px;padding:.42rem .9rem;cursor:pointer;color:rgba(90,92,96,.7);box-shadow:var(--shadow-sm);transition:all .25s;white-space:nowrap}
.cf:hover,.cf.active{background:var(--dark);color:#fff;border-color:var(--dark);transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,31,34,.25)}
.cat-sort{border:1.5px solid rgba(0,0,0,.09);border-radius:50px;padding:.48rem .9rem;font-family:var(--sans);font-size:.78rem;color:rgba(90,92,96,.7);background:#fff;outline:none;cursor:pointer}
/* Banner promocional de la categoría seleccionada (catálogo) — barra dorada estilo ticker de ofertas */
.cat-promo-banner{
  display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;width:100%;
  border-radius:14px;padding:1rem 1.6rem;margin-bottom:1.4rem;
  background:linear-gradient(90deg,var(--gold) 0%,#D4903A 50%,var(--gold) 100%);
  background-size:200% 100%;animation:promoGrad 6s linear infinite;
  box-shadow:var(--shadow-md);
}
.cpb-ico{font-size:1.2rem;line-height:1}
.cpb-title{font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.cpb-dash{color:rgba(255,255,255,.6)}
.cpb-sub{font-family:var(--sans);font-size:.88rem;font-weight:400;color:#fff}

@media(max-width:768px){
  .cat-promo-banner{padding:.85rem 1.2rem}
  .cpb-title{font-size:.82rem}
  .cpb-sub{font-size:.8rem}
}
@media(max-width:480px){
  .cat-promo-banner{padding:.75rem 1rem;gap:.4rem}
  .cpb-ico{font-size:1.05rem}
  .cpb-title{font-size:.74rem}
  .cpb-sub{font-size:.72rem}
}

.cat-result-bar{font-family:var(--sans);font-size:.78rem;color:rgba(90,92,96,.5);margin-bottom:1rem}
.cat-result-bar span{font-weight:700;color:var(--dark)}
.cat-carousel{position:relative}
.cat-carousel.cat-no-scroll .pic-arrow{display:none}
.cat-grid{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.5rem 1.5rem 1.5rem}
.cat-grid::-webkit-scrollbar{display:none}
.cat-empty{flex:0 0 100%;padding:3rem 1rem;text-align:center}

/* Categoría específica activa: mostrar TODOS los productos en grilla completa (sin carrusel) */
.cat-carousel.cat-full-grid .pic-arrow{display:none}
.cat-carousel.cat-full-grid .cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.8rem;
  overflow:visible;scroll-snap-type:none;cursor:default;
}
.cat-carousel.cat-full-grid .cat-card{flex:initial;scroll-snap-align:none}

@media(max-width:600px){
  .cat-carousel.cat-full-grid .cat-grid{grid-template-columns:repeat(2,1fr);gap:.9rem;padding:.5rem .8rem 1.5rem}
  .cat-carousel.cat-full-grid .cc-name{font-size:.78rem}
  .cat-carousel.cat-full-grid .cc-price{font-size:.85rem}
  .cat-carousel.cat-full-grid .cc-btn{font-size:.68rem;padding:.5rem}
}

/* Catalog cards */
.cat-card{flex:0 0 220px;scroll-snap-align:start;background:#fff;border-radius:18px;overflow:hidden;border:1.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);transition:transform .35s var(--bounce),box-shadow .35s,border-color .3s;cursor:pointer}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(28,31,34,.12);border-color:rgba(196,168,130,.3)}
.cat-card-new{border-color:rgba(196,168,130,.25)}
.cc-img-wrap{position:relative;aspect-ratio:1/1;background:linear-gradient(135deg,#F8F5F1,#EDE8E2);overflow:hidden}
.cc-img{width:100%;height:100%;object-fit:contain;padding:1.3rem;transition:transform .4s}
.cat-card:hover .cc-img{transform:scale(1.05)}
.cc-badge{position:absolute;top:.6rem;left:.6rem;font-family:var(--sans);font-size:.6rem;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;padding:.22rem .65rem;border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.cc-badge-new{background:linear-gradient(135deg,#2ecc71,#27ae60)}
.cc-brand-logo{position:absolute;top:.5rem;right:.5rem;height:24px;border-radius:4px;opacity:.55}
.cc-body{padding:1.15rem}
.cc-cat{font-family:var(--sans);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-dk);display:block;margin-bottom:.45rem}
.cc-name{font-family:var(--serif);font-size:.95rem;font-weight:500;color:var(--dark);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.65rem}
.cc-price-row{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.9rem}
.cc-price{font-family:var(--sans);font-size:1rem;font-weight:800;color:var(--dark)}
.cc-old-price{font-family:var(--sans);font-size:.78rem;color:rgba(90,92,96,.45);text-decoration:line-through}
.cc-btn{width:100%;background:var(--dark);color:#fff;border:none;border-radius:30px;padding:.72rem;font-family:var(--sans);font-size:.77rem;font-weight:700;cursor:pointer;letter-spacing:.04em;box-shadow:0 4px 14px rgba(28,31,34,.22);transition:background .2s,transform .25s var(--bounce),box-shadow .25s var(--ease)}
.cc-btn:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 8px 22px rgba(196,168,130,.4)}

/* ══ FRANJA DE OFERTAS — estilo Falabella ══ */
.deals-strip{
  position:relative;overflow:hidden;
  padding:9.4rem 1.8rem 1.1rem;
  background:linear-gradient(135deg,var(--dark2),var(--dark));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.deals-strip::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 12% 60%,rgba(196,168,130,.22),transparent 55%);
  pointer-events:none;
}
.ds-msg{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;position:relative;z-index:1}
.ds-line1{font-family:var(--sans);font-size:.92rem;font-weight:600;color:#fff;letter-spacing:.04em}
.ds-pill{background:var(--gold);color:var(--dark2);font-family:var(--sans);font-weight:700;font-size:.92rem;letter-spacing:.02em;padding:.5rem 1.3rem;border-radius:50px;text-transform:uppercase}
.ds-icons{display:flex;gap:.9rem;font-size:1.25rem;position:relative;z-index:1}
.ds-cta{display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:.6rem 1.3rem;border-radius:50px;text-decoration:none;transition:all .25s;position:relative;z-index:1;white-space:nowrap}
.ds-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--dark2);transform:translateY(-2px)}
.ds-arrow{display:inline-block;transition:transform .25s}
.ds-cta:hover .ds-arrow{transform:translateX(4px)}

@media(max-width:768px){
  .deals-strip{padding:7.8rem 1.2rem 1rem;justify-content:center;text-align:center}
  .ds-icons{display:none}
}
@media(max-width:480px){
  .deals-strip{padding:6.2rem 1rem .9rem;flex-direction:column;gap:.7rem}
  .ds-line1{font-size:.8rem}
  .ds-pill{font-size:.78rem;padding:.45rem 1rem}
}

/* Category tiles — bloque de color + insignia circular de producto + etiqueta */
.cats-sec{padding:2.4rem 1.5rem 2rem;background:#EDE7DE}
.cats-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr);gap:1.1rem}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-decoration:none;color:var(--dark);transition:transform .35s var(--bounce)}
.cat-tile:hover{transform:translateY(-5px)}
.ct-swatch{position:relative;width:100%;aspect-ratio:1/.82;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.10);transition:box-shadow .35s var(--ease)}
.cat-tile:hover .ct-swatch{box-shadow:var(--shadow-warm-lg)}
.ct-photo{position:relative;width:62%;aspect-ratio:1/1;border-radius:50%;background:#fff;border:3px solid rgba(255,255,255,.85);box-shadow:0 8px 18px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .4s var(--bounce)}
.cat-tile:hover .ct-photo{transform:scale(1.07)}
.ct-photo img{width:76%;height:76%;object-fit:contain;display:block;filter:drop-shadow(0 4px 7px rgba(0,0,0,.18))}
.ct-label{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:.1px;line-height:1.25;color:var(--dark);text-align:center;transition:color .25s var(--ease)}
.cat-tile:hover .ct-label{color:var(--gold-dk)}

.ct-cocina{background:linear-gradient(150deg,#C16B45,var(--terra))}
.ct-dormitorio{background:linear-gradient(150deg,#425370,#2E3A52)}
.ct-organizacion{background:linear-gradient(150deg,#6E7F5C,#4E5C42)}
.ct-electro{background:linear-gradient(150deg,#B4946A,var(--gold-dk))}
.ct-decoracion{background:linear-gradient(150deg,#7C4A60,#5A3548)}
.ct-bienestar{background:linear-gradient(150deg,#48695F,#324E45)}
.ct-seguridad{background:linear-gradient(150deg,#2A2D33,var(--ink))}
.ct-belleza{background:linear-gradient(150deg,#B5637E,#8A4560)}
.ct-all{background:var(--gold-gradient);background-size:220% 100%}
.ct-photo-all{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.ct-all-ico{font-size:1.6rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2)}

@media(max-width:900px){
  .cats-grid{grid-template-columns:repeat(4,1fr);row-gap:1.4rem}
}

@media(max-width:600px){
  .cats-grid{grid-template-columns:repeat(4,1fr);column-gap:.55rem;row-gap:1.15rem}
  .cat-tile{gap:.45rem}
  .ct-swatch{border-radius:16px}
  .ct-photo{border-width:2px}
  .ct-label{font-size:.64rem;min-height:1.85em;display:flex;align-items:flex-start;justify-content:center}
  .ct-all-ico{font-size:1.25rem}
}

@media (max-width: 480px) {
  .cats-sec { padding: 1.5rem .8rem 1.3rem; }
  .cats-grid{grid-template-columns:repeat(4,1fr);column-gap:.4rem;row-gap:1rem}
  .cat-tile{gap:.4rem}
  .ct-swatch{border-radius:14px}
  .ct-label{font-size:.6rem;min-height:1.7em}

  .cat-toolbar { flex-direction: column; align-items: stretch; }
  .cat-search-wrap { min-width: 0; width: 100%; }
  .cat-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .3rem; width: 100%; }
  .cat-filters::-webkit-scrollbar { display: none; }
  .cf { flex-shrink: 0; }
  .cat-sort { width: 100%; }

  .cat-grid { gap: .7rem; }
  .cat-card { flex-basis: 46%; }
  .cc-body { padding: .7rem; }
  .cc-name { font-size: .8rem; }
  .cc-price { font-size: .88rem; }
  .cc-btn { font-size: .7rem; padding: .55rem; }
  .cc-cat { font-size: .58rem; }
}

/* ── PROMO BANNERS (grilla de ofertas destacadas) ── */
.promo-img-sec{padding:0;background:#13151a;position:relative}
.promo-img-inner{max-width:none;margin:0}
.promo-img-hd{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:1.6rem 2.5rem 3rem;
  background:linear-gradient(180deg,rgba(10,8,6,.75) 0%,rgba(10,8,6,.35) 55%,transparent 100%);
  pointer-events:none;
}
.promo-img-hd .s-ey{margin-bottom:.3rem}
.promo-img-hd .s-ey .s-tg{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.35)}
.promo-img-hd .s-ey .s-ln{background:rgba(255,255,255,.35)}
.promo-img-hd .s-h2{color:#fff;font-size:1.6rem;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.promo-img-carousel{position:relative;z-index:1}
.promo-img-grid{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.promo-img-grid::-webkit-scrollbar{display:none}
.pic-card{
  flex:0 0 100%;scroll-snap-align:start;position:relative;display:block;overflow:hidden;
  aspect-ratio:3/1;height:min(70vh,680px);
  text-decoration:none;background:#13151a;
  transition:transform .35s var(--bounce)
}
.pic-card:hover .pic-img{transform:scale(1.04)}
.pic-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transition:transform .7s ease;
}
/* Velo sutil sobre toda la foto para que el texto se lea limpio sin importar
   qué tan "ocupada" sea la imagen de fondo — evita el efecto amontonado */
.pic-card::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,7,6,.4) 0%, rgba(8,7,6,.05) 26%, rgba(8,7,6,.1) 58%, rgba(8,7,6,.82) 100%);
  pointer-events:none;
  z-index:1;
}
.pic-overlay{
  position:absolute;
  bottom:0;left:0;right:0;z-index:2;
  min-height:210px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem 3rem 2.4rem;
  background:linear-gradient(180deg,transparent 0%,rgba(22,14,10,.55) 40%,rgba(17,11,9,.9) 100%)
}
.pic-badge{
  position:absolute;top:1.6rem;left:2.5rem;z-index:3;
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;
  padding:.3rem .9rem;border-radius:20px;box-shadow:0 6px 16px rgba(0,0,0,.3)
}
.pic-title{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:#fff;line-height:1.2;margin:0 0 .8rem;text-shadow:0 3px 20px rgba(0,0,0,.5)}
.pic-sub{font-family:var(--sans);font-size:.96rem;color:rgba(255,255,255,.88);margin:0 0 1.5rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.pic-cta{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:.5rem;border-bottom:2px solid var(--gold);padding-bottom:.25rem;width:fit-content}
.pic-cta::after{content:'→';transition:transform .25s}
.pic-card:hover .pic-cta::after{transform:translateX(6px)}

/* Flechas de navegación del carrusel */
.pic-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:none;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;color:#fff;cursor:pointer;z-index:6;transition:background .25s,transform .2s}
.pic-arrow:hover{background:var(--gold)}
.pic-arrow:active{transform:translateY(-50%) scale(.9)}
.pic-arrow-l{left:1.5rem}
.pic-arrow-r{right:1.5rem}

@media(max-width:900px){
  .pic-card{aspect-ratio:2/1;height:min(48vh,420px)}
  .promo-img-hd{padding:1.2rem 1.5rem 0}
  .promo-img-hd .s-h2{font-size:1.25rem}
  /* Los banners se suben pensados para el recorte panorámico de escritorio
     (3/1) — en pantallas angostas el aspect-ratio cambia mucho (hasta 4/3)
     y con object-fit:cover ese recorte corta texto/logos que quedaban cerca
     de los bordes de la imagen original. object-fit:contain siempre muestra
     el banner completo (con franjas del fondo oscuro si sobra espacio) en
     vez de arriesgarse a mostrar texto cortado a la mitad. */
  .pic-img{object-fit:contain}
}
@media(max-width:600px){
  .pic-card{aspect-ratio:4/3;height:min(48vh,340px);background:#13151a}
  .pic-overlay{min-height:150px;padding:1.2rem 1.4rem 1.5rem}
  .pic-badge{top:1.1rem;left:1.4rem}
  .pic-title{font-size:1.5rem;margin-bottom:.5rem}
  .pic-sub{margin-bottom:.9rem}
  .pic-arrow{width:38px;height:38px;font-size:1.2rem}
  .pic-arrow-l{left:.8rem}
  .pic-arrow-r{right:.8rem}
}
@media(max-width:480px){
  .pic-card{height:min(46vh,300px)}
  .pic-overlay{min-height:130px;padding:1rem 1.1rem 1.3rem}
  .pic-badge{top:.9rem;left:1rem}
  .pic-title{font-size:1.2rem;margin-bottom:.35rem}
  .pic-sub{font-size:.8rem;margin-bottom:.6rem}
  .promo-img-hd{padding:.9rem 1.2rem 1.6rem}
  .promo-img-hd .s-h2{font-size:1.1rem}
  .pic-arrow{width:36px;height:36px;font-size:1.1rem}
  .pic-arrow-l{left:.6rem}
  .pic-arrow-r{right:.6rem}
}

/* ── WHY SECTION ── */
.why-sec{padding:var(--pad-section) 1.5rem;background:linear-gradient(160deg,#F5EFE7 0%,#EDE7DE 60%,#F0EAE1 100%)}
.why-hd{text-align:center;margin-bottom:2.5rem}
.why-hd .s-h2{color:var(--dark)}
.why-hd .s-p{color:rgba(58,60,65,.6)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1100px;margin:0 auto}
.why-card{background:#fff;border:1px solid rgba(196,168,130,.25);border-radius:16px;padding:1.8rem 1.4rem;text-align:center;transition:all .3s;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.why-card:hover{background:#fff;border-color:rgba(196,168,130,.5);transform:translateY(-5px);box-shadow:0 12px 36px rgba(196,168,130,.2)}
.why-num{font-family:var(--serif);font-size:2.5rem;font-weight:600;color:var(--gold);line-height:1;margin-bottom:.4rem}
.why-ttl{font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--dark);margin-bottom:.5rem}
.why-txt{font-family:var(--sans);font-size:.8rem;color:rgba(58,60,65,.6);line-height:1.7}
@media(max-width:700px){.why-grid{grid-template-columns:1fr}}

/* ── BOTÓN FLOTANTE DE WHATSAPP (apilado arriba de Homy) ── */
.wa-float{
  position:fixed;bottom:6rem;right:1.5rem;z-index:750;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(37,211,102,.5);
  transition:transform .3s var(--bounce),box-shadow .3s;
  animation:waPulse 2.4s ease-in-out infinite;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 38px rgba(37,211,102,.6)}
@keyframes waPulse{
  0%,100%{box-shadow:0 8px 28px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 8px 28px rgba(37,211,102,.5),0 0 0 10px rgba(37,211,102,0)}
}
@media(max-width:600px){
  .wa-float{bottom:5.2rem;right:1rem;width:50px;height:50px}
  .wa-float svg{width:26px;height:26px}
}
/* En producto.html no existe el widget de Homy, así que el botón vuelve a su esquina normal */
.wa-float-standalone{bottom:1.5rem}
@media(max-width:600px){.wa-float-standalone{bottom:1rem}}

/* ── HOMY CHATBOT ── */
.homy-wrap{position:fixed;bottom:1.5rem;right:1.5rem;z-index:750}
.homy-float{background:linear-gradient(135deg,var(--dark),#2A2D31);border-radius:50px;padding:.7rem 1rem .7rem .75rem;display:flex;align-items:center;gap:.6rem;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform .35s var(--bounce),box-shadow .35s}
.homy-float:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,0,0,.4)}
.hf-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--terra));display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.hf-txt{display:flex;flex-direction:column}
.hf-name{font-family:var(--sans);font-size:.8rem;font-weight:700;color:#fff;line-height:1.2}
.hf-sub{font-family:var(--sans);font-size:.65rem;color:rgba(255,255,255,.45);line-height:1.2}
.hf-badge{background:var(--terra);color:#fff;font-family:var(--sans);font-size:.6rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:-4px;right:-4px}
@media(max-width:600px){
  /* En móvil el botón flotante se colapsa a solo el ícono para no tapar contenido */
  .homy-wrap{bottom:1rem;right:1rem}
  .homy-float{padding:.6rem;border-radius:50%}
  .homy-float .hf-txt{display:none}
  .hf-av{width:44px;height:44px;font-size:1.25rem}
}
.homy-panel{position:fixed;bottom:6rem;right:1.5rem;width:min(380px,95vw);background:#fff;border-radius:20px;box-shadow:0 20px 64px rgba(0,0,0,.2);display:none;flex-direction:column;max-height:560px;z-index:748}
.homy-panel.open{display:flex}
.hp-head{background:linear-gradient(135deg,var(--dark),#2A2D31);border-radius:20px 20px 0 0;padding:1rem 1.2rem;display:flex;align-items:center;gap:.7rem}
.hp-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--terra));display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.hp-info{display:flex;flex-direction:column}
.hp-name{font-family:var(--sans);font-size:.88rem;font-weight:700;color:#fff;display:block}
.hp-meta{font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.45);display:block}
.hp-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.2rem;cursor:pointer;margin-left:auto;line-height:1;transition:color .2s}
.hp-close:hover{color:#fff}
.hp-msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:#F8F5F1}
.hp-msgs::-webkit-scrollbar{width:3px}
.hp-msgs::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
.hm-bub{max-width:82%;padding:.65rem .85rem;border-radius:14px;font-family:var(--sans);font-size:.81rem;line-height:1.55}
.hm-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--terra));display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;align-self:flex-end}
.hm-body{display:flex;align-items:flex-end;gap:.4rem}
.hm-body.bot{justify-content:flex-start}
.hm-body.usr{justify-content:flex-end}
.hm-body.bot .hm-bub{background:#fff;color:var(--dark);border:1px solid rgba(0,0,0,.07);border-radius:14px 14px 14px 3px}
.hm-body.usr .hm-bub{background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;border-radius:14px 14px 3px 14px}
.hm-prods{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.4rem}
.hm-prod{background:#fff;border-radius:10px;overflow:hidden;cursor:pointer;border:1px solid rgba(0,0,0,.06);transition:transform .2s}
.hm-prod:hover{transform:translateY(-2px)}
.hm-prod img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:6px;background:#F8F5F1}
.hm-prod-name{font-family:var(--sans);font-size:.68rem;padding:.35rem .5rem .25rem;color:var(--dark);font-weight:500}
.hm-prod-price{font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--gold-dk);padding:0 .5rem .4rem}
.hm-user-bub{max-width:78%;padding:.6rem .85rem;background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;border-radius:14px 14px 3px 14px;font-family:var(--sans);font-size:.81rem;line-height:1.55;align-self:flex-end}
.hp-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.6rem 1rem;border-top:1px solid rgba(0,0,0,.06);background:#fff}
.hc{font-family:var(--sans);font-size:.73rem;font-weight:500;background:rgba(196,168,130,.1);color:var(--gold-dk);border:1px solid rgba(196,168,130,.25);border-radius:50px;padding:.35rem .8rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.hc:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.hp-input{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-top:1px solid rgba(0,0,0,.08);background:#fff;border-radius:0 0 20px 20px}
.hp-input input{flex:1;border:none;outline:none;font-family:var(--sans);font-size:.84rem;color:var(--dark);background:transparent}
.hp-send{background:linear-gradient(135deg,var(--gold),var(--terra));border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .2s}
.hp-send:hover{transform:scale(1.08)}

/* ── 3D SCROLL SECTION ── */
.s3d-sec{padding:var(--pad-section) 0;overflow:hidden;background:linear-gradient(180deg,#1E2026 0%,#26292F 50%,#1E2026 100%)}
.s3d-hd{text-align:center;padding:0 1.5rem;margin-bottom:2.5rem}
.s3d-hd .s-h2{color:#fff}
.s3d-hd .s-p{color:rgba(255,255,255,.42)}
.s3d-stage{overflow:hidden;padding:.5rem 0 1.5rem}
.s3d-scroll-wrap{position:relative;padding:0 3rem}
@media(max-width:600px){
  .s3d-scroll-wrap{padding:0 2.1rem}
  .s3d-card{width:155px}
}
@media(max-width:480px){
  .s3d-scroll-wrap{padding:0 1.7rem}
  .s3d-card{width:138px}
  .s3d-name{font-size:.68rem}
}
.s3d-scroll-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.5rem .2rem 1rem;cursor:grab}
.s3d-scroll-track::-webkit-scrollbar{display:none}
.s3d-scroll-track.is-dragging{cursor:grabbing}
.s3d-scroll-track .s3d-card{scroll-snap-align:start}
/* Animaciones — pausa total al hover en la fila */

/* Tarjeta del scroll */
.s3d-card{
  width:190px;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.07) inset;
  flex-shrink:0;
  cursor:pointer;
  transition:transform .3s,border-color .3s,background .3s,box-shadow .3s;
  position:relative;
  user-select:none;
}
.s3d-card:hover{
  transform:scale(1.05) translateY(-3px);
  border-color:rgba(196,168,130,.55);
  background:rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  z-index:10;
}
/* Badge "Ver" — no bloquea clicks (pointer-events:none) */
.s3d-card-ver{
  position:absolute;
  bottom:.55rem;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold),var(--terra));
  color:#fff;
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:.28rem .85rem;
  border-radius:20px;
  opacity:0;
  transition:opacity .25s,transform .25s;
  pointer-events:none;
  white-space:nowrap;
  transform:translateX(-50%) translateY(4px);
}
.s3d-card:hover .s3d-card-ver{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.s3d-card img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:.8rem;background:rgba(255,255,255,.05)}
.s3d-info{padding:.7rem .85rem .8rem}
.s3d-name{font-family:var(--sans);font-size:.74rem;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;margin-bottom:.28rem;font-weight:500}
.s3d-price{font-family:var(--sans);font-size:.82rem;font-weight:800;color:var(--gold)}
.s3d-card img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:.8rem;background:rgba(255,255,255,.04);display:block;transition:transform .3s}
.s3d-card:hover img{transform:scale(1.08)}
.s3d-card-new{border-color:rgba(196,168,130,.25)}
.s3d-new-badge{font-family:var(--sans);font-size:.6rem;font-weight:700;background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;padding:.2rem .6rem;border-radius:0 0 8px 0;display:inline-block;position:absolute;top:0;left:0}

/* ── MÁS VENDIDOS + PROMOCIONES — una sola sección, mitad y mitad ── */
.dual-promo-sec{display:grid;grid-template-columns:1fr 1fr}
.dual-panel{padding:calc(var(--pad-section) * .7) 1.5rem;overflow:hidden}
.dual-panel .s3d-hd{padding:0 .5rem}
.dual-panel .s3d-hd .s-h2{font-size:clamp(1.5rem,2.4vw,2.2rem)}
.dual-bestsellers{background:linear-gradient(180deg,#22201E 0%,#2B2521 50%,#22201E 100%)}
.dual-promo{background:linear-gradient(180deg,#241713 0%,#2E1B15 50%,#241713 100%)}
.bs-ribbon{position:absolute;top:.6rem;left:.6rem;z-index:2;background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;font-family:var(--sans);font-size:.58rem;font-weight:700;letter-spacing:.03em;padding:.24rem .6rem;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap}
.promo-ribbon{position:absolute;top:.6rem;left:.6rem;z-index:2;background:#E74C3C;color:#fff;font-family:var(--sans);font-size:.64rem;font-weight:800;padding:.25rem .65rem;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap}
.s3d-price-old{font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.4);text-decoration:line-through;margin-right:.4rem;font-weight:500}

/* ── Chips de filtro por categoría (Más Vendidos / Promociones) ── */
.dp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;padding:0 .5rem;margin-bottom:1.2rem}
.dp-chip{font-family:var(--sans);font-size:.68rem;font-weight:500;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:.36rem .85rem;cursor:pointer;color:rgba(255,255,255,.65);transition:all .25s;white-space:nowrap}
.dp-chip:hover{background:rgba(255,255,255,.12);color:#fff}
.dp-chip.active{background:linear-gradient(135deg,var(--gold),var(--terra));color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(0,0,0,.3)}

@media(max-width:900px){
  .dual-promo-sec{grid-template-columns:1fr}
}

/* ── RIBBON / STATS BAR ── */
.ri-pro{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.rp-stat{display:flex;flex-direction:column;gap:.12rem}
.rp-n{font-family:var(--serif);font-size:1.8rem;font-weight:600;color:var(--gold);line-height:1;transition:color .25s}
.rp-stat:hover .rp-n{color:var(--gold-lt)}
.rp-n sup{font-size:.5em;vertical-align:super;color:rgba(196,168,130,.7)}
.rp-l{font-family:var(--sans);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.rp-div{width:1px;height:32px;background:rgba(196,168,130,.25);flex-shrink:0}
.ri-pays{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.rip-label{font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.rip-list{display:flex;flex-wrap:wrap;gap:.3rem}
.rip-list .pmi{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.1)}

/* ── FAQ ── */
.faq-item{border-bottom:1px solid rgba(0,0,0,.07)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0;cursor:pointer;font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--dark)}
.faq-icon{color:rgba(90,92,96,.4);font-size:.8rem;transition:transform .3s}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--gold)}
.faq-a{display:none;padding:.1rem 0 .9rem;font-family:var(--sans);font-size:.82rem;color:rgba(90,92,96,.7);line-height:1.7}
.faq-item.open .faq-a{display:block}

/* ── TARJETA DE RESEÑA — overrides ── */
.tc-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--beige-light,#E8D9C4),var(--gold));display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;font-weight:700;font-family:var(--sans);color:var(--dark)}
.tc-stars{color:#FFC107;font-size:.82rem;letter-spacing:.08rem;margin-bottom:.6rem}
/* mc-ttl defined elsewhere */
.mc-body{font-family:var(--sans);font-size:.82rem;color:rgba(90,92,96,.7);line-height:1.65}
.mc-det{font-family:var(--sans);font-size:.74rem;color:rgba(90,92,96,.5);margin-top:.5rem}
.mc-prod-chip{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--sans);font-size:.64rem;font-weight:600;background:rgba(196,168,130,.1);color:var(--gold-dk);padding:.2rem .6rem;border-radius:20px;margin-top:.5rem}

/* ── RIBBON PROD ── */
.ribbon-prod{display:flex;flex-direction:column;align-items:center;gap:.1rem}

/* MISC utility */
.adm-filter-sel{border:1.5px solid rgba(0,0,0,.09);border-radius:8px;padding:.55rem .9rem;font-family:var(--sans);font-size:.82rem;color:#374151;background:#F5F6FA;outline:none;cursor:pointer}

/* ── Promo carousel: scroll-snap activo en todos los tamaños (banners a ancho completo) ── */

/* ── Drag-to-scroll: cursor hints ── */
.cat-grid{cursor:grab}
.promo-img-grid{cursor:grab}
.cat-grid.is-dragging,.promo-img-grid.is-dragging{cursor:grabbing}
.cat-grid.is-dragging *,.promo-img-grid.is-dragging *{pointer-events:none;user-select:none}

/* ── Dots de navegación del carrusel promo ── */
.pic-dots{display:flex;justify-content:center;gap:.55rem;padding:.9rem 0 1.4rem;background:#13151a}
.pic-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:background .3s,transform .3s;padding:0;flex-shrink:0}
.pic-dot.active{background:var(--gold);transform:scale(1.45)}
.pic-dot:hover:not(.active){background:rgba(255,255,255,.55)}

/* ── MIS PEDIDOS (modal cliente) ── */
.mped-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:1rem}
.mped-overlay.open{display:flex}
.mped-modal{background:#fff;border-radius:20px;width:100%;max-width:620px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 32px 80px rgba(0,0,0,.25);animation:slideUp .35s var(--bounce,cubic-bezier(.175,.885,.32,1.275))}
.mped-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.6rem;background:linear-gradient(135deg,var(--dark,#1C1F22),#2C2E33);flex-shrink:0}
.mped-head h3{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:#fff;margin:0}
.mped-close{background:none;border:none;color:rgba(255,255,255,.4);font-size:1.3rem;cursor:pointer;padding:.2rem;line-height:1;transition:color .2s}
.mped-close:hover{color:#fff}
.mped-body{padding:1.4rem 1.6rem;overflow-y:auto;font-family:var(--sans,Poppins,sans-serif)}
.mped-search{display:flex;gap:.6rem;margin-bottom:1.2rem}
.mped-search input{flex:1;border:1.5px solid rgba(0,0,0,.1);border-radius:10px;padding:.72rem 1rem;font-family:var(--sans);font-size:.87rem;color:var(--dark,#1C1F22);outline:none;transition:border-color .3s}
.mped-search input:focus{border-color:var(--gold,#C4A882)}
.mped-search button{background:linear-gradient(135deg,var(--gold,#C4A882),#C06B44);border:none;border-radius:10px;padding:.72rem 1.3rem;color:#fff;font-family:var(--sans);font-size:.84rem;font-weight:600;cursor:pointer;white-space:nowrap}
.mped-order-card{background:#F9F7F3;border-radius:14px;padding:1.1rem 1.3rem;margin-bottom:.9rem;border:1px solid rgba(0,0,0,.06)}
.mped-order-card:last-child{margin-bottom:0}
.mped-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.7rem;gap:.8rem;flex-wrap:wrap}
.mped-ref{font-family:var(--sans);font-size:.82rem;font-weight:700;color:var(--gold,#C4A882);letter-spacing:.03em}
.mped-date{font-size:.74rem;color:rgba(90,92,96,.55);margin-top:.15rem}
.mped-status-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;padding:.32rem .85rem;border-radius:20px;white-space:nowrap}
.mped-items{font-size:.82rem;color:rgba(90,92,96,.7);margin-bottom:.5rem;line-height:1.6}
.mped-total{font-size:.9rem;font-weight:700;color:var(--dark,#1C1F22)}
.mped-empty{text-align:center;padding:2.5rem 1rem;color:rgba(90,92,96,.45)}
.mped-empty p{font-size:.9rem;margin-top:.4rem}
@media(max-width:480px){
  .mped-modal{border-radius:16px 16px 0 0;max-height:92vh;margin-top:auto}
  .mped-overlay{align-items:flex-end;padding:0}
}

/* ═══════════════════════════════════════════════════
   SISTEMA PREMIUM "BOUTIQUE DORADO" — micro-interacciones
   reutilizadas en botones, badges y tarjetas de toda la web
   (claro y oscuro comparten el mismo dorado como hilo conductor).
   Va al final de la hoja a propósito: necesita ganar la cascada
   sobre las reglas de componente (background, box-shadow, etc.)
   definidas más arriba para cada selector.
═══════════════════════════════════════════════════ */

/* ── Shine-sweep: barrido de luz diagonal al hover ── */
.btn-dk, .cc-btn, .ds-cta, .nav-cta {
  position: relative;
  overflow: hidden;
}
.btn-dk::before, .cc-btn::before, .ds-cta::before, .nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shine-sweep);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .65s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.btn-dk:hover::before, .cc-btn:hover::before, .ds-cta:hover::before, .nav-cta:hover::before {
  transform: translateX(130%) skewX(-12deg);
}

/* ── Shimmer: brillo dorado recorriendo badges destacados ── */
@keyframes goldShimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
.cc-badge, .cc-badge-new, .pic-badge {
  position: relative;
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  animation: goldShimmer 3.2s linear infinite;
}
.cc-badge-new { background-image: linear-gradient(115deg, #1f8a4c 0%, #2ecc71 35%, #6be095 50%, #2ecc71 65%, #1f8a4c 100%); }

/* ── Hover premium de tarjetas: sombra cálida + borde dorado ── */
.cat-card, .pic-card, .s3d-card {
  transition: transform .4s var(--bounce), box-shadow .4s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.cat-card:hover { box-shadow: var(--shadow-warm-lg); border-color: var(--gold-glow); }
.pic-card:hover { box-shadow: var(--shadow-warm-lg); }
.s3d-card:hover { box-shadow: var(--shadow-warm), 0 0 0 1px var(--gold-glow-soft) inset; }

/* ── Eyebrow con vida: la línea dorada crece y brilla al pasar el cursor por la etiqueta ── */
.s-ey:hover .s-ln { width: 52px; box-shadow: 0 0 10px var(--gold-glow); }

/* ── Hilo dorado: costura entre secciones claras y oscuras ──
   En los 4 puntos donde el fondo cambia de claro a oscuro (o viceversa)
   se añade una línea dorada con brillo que actúa de hilo conductor,
   uniendo visualmente ambas paletas en lugar de un corte abrupto. */
.promo-img-sec, .catalog-sec, .contact { position: relative; }
.promo-img-sec::before, .catalog-sec::before, .contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  animation: goldShimmer 7s linear infinite;
  z-index: 5;
  box-shadow: 0 0 16px var(--gold-glow-soft);
}

/* ── Jerarquía tipográfica: títulos serif más dramáticos y consistentes ── */
.pic-title { letter-spacing: -.01em; }

/* ── Nav: link activo con subrayado dorado y glow ── */
.nav-links a.nav-active { color: var(--gold); }
.nav-links a.nav-active::after { width: 100%; box-shadow: 0 0 8px var(--gold-glow); }

/* ── Deals-strip: glow dorado en el pill destacado ── */
.ds-pill { box-shadow: 0 6px 22px var(--gold-glow-soft); transition: box-shadow .3s var(--ease), transform .3s var(--bounce); }
.deals-strip:hover .ds-pill { box-shadow: 0 8px 28px var(--gold-glow); transform: translateY(-2px); }

/* ── Ribbon de estadísticas: glow dorado + leve elevación al pasar el cursor ── */
.rp-stat { transition: transform .3s var(--bounce); }
.rp-stat:hover { transform: translateY(-3px); }
.rp-n { transition: color .25s, text-shadow .35s var(--ease); }
.rp-stat:hover .rp-n { text-shadow: 0 0 18px var(--gold-glow); }

/* ── Footer: remate con hilo dorado superior ── */
footer { position: relative; }
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background-image: var(--gold-gradient);
  background-size: 220% 100%;
  animation: goldShimmer 8s linear infinite;
  opacity: .8;
}