:root {
    --bg: #faf8f5;
    --surface: #ffffff;
    --text: #1f1d1b;
    --muted: #6b6660;
    --primary: #b3261e;
    --primary-dark: #8c1c17;
    --accent: #d4a373;
    --border: #e8e2d9;
    --danger: #c0392b;
    --success: #2e7d32;
    --shadow: 0 6px 20px rgba(30, 20, 10, 0.06);
    --shadow-lift: 0 18px 40px -12px rgba(30, 20, 10, 0.18);
    --radius: 10px;
    --ease: cubic-bezier(.2,.8,.2,1);

    /* Paleta por categoría — usada en cat-explore Y en el contexto de categoría */
    --cat-hombre-glow:  #5b9be8;
    --cat-hombre-bg-1:  #1d3247;
    --cat-hombre-bg-2:  #0d1622;
    --cat-mujer-glow:   #f4a8c0;
    --cat-mujer-bg-1:   #5b1d2c;
    --cat-mujer-bg-2:   #1d0a13;
    --cat-decants-glow: #f6d9a8;
    --cat-decants-bg-1: #7a4a26;
    --cat-decants-bg-2: #2a160b;
 
    /* Contexto activo (cuando body[data-section] = una categoría) */
    --section-glow: var(--accent);
    --section-bg-1: #3a2410;
    --section-bg-2: #1a1208;
}
body[data-section="hombre"] {
    --section-glow: var(--cat-hombre-glow);
    --section-bg-1: var(--cat-hombre-bg-1);
    --section-bg-2: var(--cat-hombre-bg-2);
}
body[data-section="mujer"] {
    --section-glow: var(--cat-mujer-glow);
    --section-bg-1: var(--cat-mujer-bg-1);
    --section-bg-2: var(--cat-mujer-bg-2);
}
body[data-section="decants"] {
    --section-glow: var(--cat-decants-glow);
    --section-bg-1: var(--cat-decants-bg-1);
    --section-bg-2: var(--cat-decants-bg-2);
}

/* ---- Acentos contextuales (aparecen cuando hay sección de categoría activa) ---- */
body[data-section="hombre"],
body[data-section="mujer"],
body[data-section="decants"] {
    /* Fondo: leve neblina de color en la parte superior */
    background:
        radial-gradient(ellipse 1200px 400px at 50% -150px,
            color-mix(in srgb, var(--section-glow) 14%, transparent),
            transparent 70%),
        var(--bg);
}

/* Sección-head con accent lateral del color de la categoría */
body[data-section="hombre"] .section-head h2::before,
body[data-section="mujer"] .section-head h2::before,
body[data-section="decants"] .section-head h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: .9em;
    background: var(--section-glow);
    border-radius: 2px;
    margin-right: .65rem;
    vertical-align: -.05em;
    box-shadow: 0 0 12px color-mix(in srgb, var(--section-glow) 70%, transparent);
}
/* Y el underline existente del h2 también toma el color de la sección */
body[data-section="hombre"] .section-head h2::after,
body[data-section="mujer"] .section-head h2::after,
body[data-section="decants"] .section-head h2::after {
    background: linear-gradient(90deg,
        var(--section-glow),
        color-mix(in srgb, var(--section-glow) 50%, var(--accent)));
    box-shadow: 0 1px 8px color-mix(in srgb, var(--section-glow) 45%, transparent);
}

/* Navbar: ítem activo de la categoría con su color */
body[data-section="hombre"] .nav-links a.active,
body[data-section="mujer"] .nav-links a.active,
body[data-section="decants"] .nav-links a.active {
    color: color-mix(in srgb, var(--section-glow) 75%, var(--text));
    background: color-mix(in srgb, var(--section-glow) 12%, transparent);
}
body[data-section="hombre"] .nav-links a.active::after,
body[data-section="mujer"] .nav-links a.active::after,
body[data-section="decants"] .nav-links a.active::after {
    background: var(--section-glow);
    box-shadow: 0 0 10px color-mix(in srgb, var(--section-glow) 65%, transparent);
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scroll progress bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(179,38,30,.25);
    transition: transform .1s linear;
}

/* Ripple compartido */
.ui-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    transform: scale(0);
    animation: ripple-spread .6s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}
.btn-secondary .ui-ripple,
.btn-tabla .ui-ripple,
.cart-btn .ui-ripple,
.chip .ui-ripple { background: rgba(179,38,30,.18); }
@keyframes ripple-spread {
    to { transform: scale(2.5); opacity: 0; }
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
.reveal-in { opacity: 1; transform: translateY(0); }

/* En móvil desactivamos el scroll-reveal: la animación dispara con el JS
   conforme cada bloque entra al viewport y eso da sensación de que la página
   carga a pedazos / mal optimizada. En pantallas chicas el efecto no aporta
   y mejora la percepción de velocidad si todo aparece inmediato. */
@media (max-width: 700px) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* Tilt sutil en cards (desktop) */
@media (hover: hover) and (pointer: fine) {
    .card {
        transform-style: preserve-3d;
        --tilt-x: 0deg;
        --tilt-y: 0deg;
    }
    .card:hover {
        transform: translateY(-6px) perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
        transition: transform .25s var(--ease), box-shadow .35s var(--ease);
    }
}

/* Sin hover (móvil/tablet táctil) — tap state simple en cards */
@media (hover: none) {
    .card:active {
        transform: scale(.98);
        transition: transform .12s ease;
    }
    .opcion:hover { transform: none; box-shadow: none; }
    .metodo:hover { transform: none; box-shadow: none; }
    .nav-links a::after { transition: none; }
    .producto-img { cursor: default; }
}

* { box-sizing: border-box; }

*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;             /* fallback navegadores antiguos */
    overflow-x: clip;               /* moderno: evita scroll horizontal del viewport */
    overscroll-behavior-x: none;    /* corta el "swipe diagonal" en iOS Safari */
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100vw;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 2.4rem; margin: 0 0 .5em; }
h2 { font-size: 1.8rem; margin: 0 0 .3em; }
h3 { font-size: 1.1rem; margin: 0 0 .3em; }
.muted { color: var(--muted); font-size: .92rem; }

/* =========================================================
   Navbar — versión refinada con drawer móvil
   El blur va en ::before para no crear un containing block que
   atrape al drawer position:fixed dentro del navbar.
   ========================================================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    z-index: -1;
    transition: background .3s ease;
    pointer-events: none;
}
.navbar.is-scrolled {
    box-shadow: 0 4px 20px -10px rgba(30,20,10,.15);
}
.navbar.is-scrolled::before {
    background: rgba(255,255,255,.94);
}
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Logo con icono frasco */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    transition: transform .3s var(--ease);
    flex: 0 0 auto;
}
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent)));
    color: white;
    box-shadow: 0 4px 12px -4px rgba(179,38,30,.45);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logo:hover .logo-mark {
    transform: rotate(-6deg) scale(1.05);
    box-shadow: 0 6px 16px -4px rgba(179,38,30,.55);
}
.logo-text { letter-spacing: -.01em; }
.logo-sep { color: var(--primary); margin: 0 .15rem; display: inline-block; transition: transform .4s var(--ease); }
.logo:hover .logo-sep { transform: rotate(180deg); }

/* Nav links */
.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Hamburger (oculto en desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    width: 42px;
    height: 42px;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .25s cubic-bezier(.34, 1.5, .64, 1);
}
.nav-toggle:hover { background: var(--bg); border-color: var(--text); }
.nav-toggle:active { transform: scale(.92); }
.nav-open .nav-toggle {
    background: var(--text);
    border-color: var(--text);
}
.nav-toggle-bars {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 14px;
}
.nav-toggle-bars span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition:
        transform .35s cubic-bezier(.34, 1.4, .64, 1),
        opacity .2s ease,
        background .25s ease;
    transform-origin: center;
}
.nav-open .nav-toggle-bars span { background: white; }
.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer header (sólo visible en móvil) */
.nav-drawer-head { display: none; }
.nav-close {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
    padding: .25rem .5rem;
    border-radius: 6px;
    transition: color .2s ease, background .2s ease;
}
.nav-close:hover { color: var(--text); background: var(--bg); }

/* Backdrop (la transición real está más abajo, junto al dropdown móvil) */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,10,8,.42);
    z-index: 49;
}

/* Nav actions wrapper */
.nav-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}
.nav-links a {
    position: relative;
    color: var(--muted);
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: 99px;
    transition:
        color .2s ease,
        background .25s ease,
        transform .2s var(--ease);
}
/* Indicador inferior (puntito centrado) */
.nav-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 0;
    height: 3px;
    background: var(--primary);
    border-radius: 99px;
    transform: translateX(-50%);
    transition: width .3s var(--ease);
}
.nav-links a:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 5%, transparent);
}
.nav-links a:hover::after { width: 6px; }
.nav-links a.active {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    font-weight: 600;
}
.nav-links a.active::after { width: 18px; }

/* Pill / etiqueta de categoría junto al link */
.nav-pill {
    display: inline-block;
    margin-left: .4rem;
    padding: .12rem .55rem;
    border-radius: 99px;
    background: var(--pill-color, var(--accent));
    color: white;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.4;
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--pill-color, var(--accent)) 60%, transparent);
    animation: nav-pill-pulse 2.4s ease-in-out infinite;
}
@keyframes nav-pill-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Botón Carrito refinado con ícono */
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.05rem .55rem .85rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--text);
    background: var(--surface);
    transition:
        border-color .25s var(--ease),
        transform .25s var(--ease),
        box-shadow .25s var(--ease),
        background .2s ease,
        color .2s ease;
}
.cart-btn .cart-icon {
    transition: transform .35s var(--ease);
}
.cart-btn:hover {
    background: var(--text);
    color: white;
    border-color: var(--text);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(30,20,10,.25);
}
.cart-btn:hover .cart-icon { transform: translateY(-1px) rotate(-6deg); }

/* Cuando hay items, resalta el botón */
.cart-btn.has-items {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.cart-btn.has-items:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 20px -8px rgba(179,38,30,.45);
}

.cart-btn.cart-pop { animation: cart-pop .6s var(--ease); }
@keyframes cart-pop {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(179,38,30,.35); }
    25%  { transform: scale(1.18) rotate(-4deg); box-shadow: 0 0 0 8px rgba(179,38,30,.18); }
    55%  { transform: scale(.94) rotate(3deg); box-shadow: 0 0 0 14px rgba(179,38,30,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(179,38,30,0); }
}

/* Badge: ahora es contador flotante en la esquina del ícono */
.cart-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    background: var(--primary);
    color: white;
    border: 2px solid var(--surface);
    border-radius: 99px;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(179,38,30,.35);
    transition: background .2s ease, transform .25s var(--ease), border-color .25s ease;
}
.cart-btn:not(.has-items) .cart-badge {
    background: var(--muted);
    box-shadow: none;
    opacity: .55;
}
.cart-btn:hover .cart-badge { border-color: var(--text); }
.cart-btn.has-items:hover .cart-badge { border-color: var(--primary); background: white; color: var(--primary); }
.cart-badge.bump { animation: badge-bump .55s var(--ease); }
@keyframes badge-bump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.55); background: var(--accent); }
    60%  { transform: scale(.85); }
    100% { transform: scale(1); }
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    min-height: 70vh;
    animation: container-in .55s var(--ease) both;
}
@keyframes container-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero */
.hero {
    --hero-start: #1f1410;
    --hero-end: #3a1f1a;
    --hero-accent: #d4a373;
    color: white;
    padding: 3rem 2.5rem;
    border-radius: 18px;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
    background-color: var(--hero-end);
    background-image:
        radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--hero-accent) 35%, transparent), transparent 55%),
        radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--hero-end)   60%, transparent), transparent 55%),
        linear-gradient(135deg, var(--hero-start), var(--hero-end));
    background-size: 200% 200%;
    animation: hero-gradient 18s ease-in-out infinite alternate;
}
@keyframes hero-gradient {
    0%   { background-position: 0% 50%, 100% 50%, 0% 0%; }
    100% { background-position: 100% 50%, 0% 50%, 100% 100%; }
}
.hero::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--hero-accent) 22%, transparent);
    filter: blur(60px);
    top: -120px;
    right: -100px;
    animation: hero-orb 16s ease-in-out infinite alternate;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    filter: blur(70px);
    bottom: -140px;
    left: -80px;
    animation: hero-orb-2 14s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes hero-orb {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(-30px, 30px) scale(1.15); }
}
@keyframes hero-orb-2 {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(40px, -20px) scale(1.1); }
}

.hero-content {
    max-width: 700px;
    position: relative;
    z-index: 1;
    /* Centrado vertical para que el texto se alinee con la imagen */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero h1 {
    color: white;
    font-size: 2.6rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: .6rem;
    animation: hero-line-in .8s var(--ease) .1s both;
}
.hero p {
    font-size: 1.05rem;
    opacity: .9;
    margin-bottom: 1.5rem;
    animation: hero-line-in .8s var(--ease) .25s both;
}
.hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    animation: hero-line-in .8s var(--ease) .4s both;
}
@keyframes hero-line-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-art img { animation: hero-art-in 1s var(--ease) .35s both, hero-float 6s ease-in-out infinite alternate; }
@keyframes hero-art-in {
    from { opacity: 0; transform: translateY(20px) scale(.92); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }
}
@keyframes hero-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}
/* Layout 50/50 con stretch: la imagen llena su mitad sin distorsionarse */
.hero.hero-con-imagen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}
.hero.hero-con-imagen.hero--img-izquierda { grid-template-columns: 1fr 1fr; }
.hero.hero-con-imagen.hero--img-izquierda .hero-content { order: 2; }
.hero.hero-con-imagen.hero--img-izquierda .hero-art     { order: 1; }

.hero--align-center .hero-content,
.hero--align-center .hero-art      { text-align: center; }
.hero--align-center .hero-actions  { justify-content: center; }
.hero--align-center .hero-content  { margin-left: auto; margin-right: auto; }

.hero--align-right .hero-content,
.hero--align-right .hero-art       { text-align: right; }
.hero--align-right .hero-actions   { justify-content: flex-end; }
.hero--align-right .hero-content   { margin-left: auto; }

.hero-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Imagen siempre se ajusta al espacio disponible:
   - chica → crece (limitado por max-height para no quedar enorme)
   - grande → encoge
   - object-fit: contain preserva aspect-ratio (nunca distorsiona) */
.hero-art img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
    margin: 0 0 30px 0;
}

/* Hero con imagen como FONDO */
.hero.hero--bg-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
}
.hero.hero--bg-image::before,
.hero.hero--bg-image::after { display: none; } /* sin orbs cuando hay imagen de fondo */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    animation: hero-bg-zoom 18s ease-in-out infinite alternate;
}
@keyframes hero-bg-zoom {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12); }
}
/* Capas de overlay:
   1) tinte de marca (configurable por usuario via --overlay)
   2) vignette inferior siempre presente — asegura legibilidad del texto
   3) base oscura mínima */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(0,0,0,.55) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--hero-start) calc(var(--overlay, 0) * 100%), transparent),
            color-mix(in srgb, var(--hero-end)   calc(var(--overlay, 0) * 100%), transparent)),
        rgba(0,0,0, calc(.18 + var(--overlay, 0) * .45));
    pointer-events: none;
}

.hero.hero--bg-image .hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
}
/* Sombras de texto para legibilidad sobre imagen */
.hero.hero--bg-image .hero-content h1 {
    text-shadow:
        0 2px 14px rgba(0,0,0,.55),
        0 1px 3px rgba(0,0,0,.55);
}
.hero.hero--bg-image .hero-content p {
    text-shadow:
        0 1px 8px rgba(0,0,0,.5),
        0 1px 2px rgba(0,0,0,.5);
}
/* ============================================================
   Configuración móvil INDEPENDIENTE del banner editable
   - .hero-art--desktop / .hero-art--mobile: imágenes separadas
   - .hero-bg--desktop / .hero-bg--mobile: fondos separados
   - .hero--img-m-arriba / -abajo / -oculta / -fondo: posición móvil
   ============================================================ */

/* Por defecto (≥701px): solo se muestran versiones desktop */
.hero-art--mobile { display: none; }
.hero-bg--mobile { display: none; }

@media (max-width: 700px) {
    .hero {
        padding: 1.5rem 1.1rem;
        border-radius: 16px;
    }

    /* En móvil ocultamos versiones desktop */
    .hero-art--desktop { display: none !important; }
    .hero-bg--desktop  { display: none !important; }

    /* Y mostramos las móviles */
    .hero-art--mobile { display: flex !important; }
    .hero-bg--mobile  { display: block !important; }

    /* En móvil la grilla SIEMPRE pasa a una columna —
       sobreescribe cualquier .hero--img-derecha / -izquierda */
    .hero.hero-con-imagen,
    .hero.hero-con-imagen.hero--img-derecha,
    .hero.hero-con-imagen.hero--img-izquierda {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    /* Editable banner: imagen arriba del texto (sobre-escribe las reglas
       de hero--img-derecha / -izquierda que en desktop la ponen al lado). */
    .hero.hero-con-imagen.hero--img-derecha .hero-art--desktop,
    .hero.hero-con-imagen.hero--img-derecha .hero-art--mobile,
    .hero.hero-con-imagen.hero--img-izquierda .hero-art--desktop,
    .hero.hero-con-imagen.hero--img-izquierda .hero-art--mobile { order: 1 !important; }
    .hero.hero-con-imagen.hero--img-derecha .hero-content,
    .hero.hero-con-imagen.hero--img-izquierda .hero-content { order: 2 !important; }

    /* En slides producto y contacto la imagen va DEBAJO del texto en móvil */
    .hero--producto .hero-art,
    .hero--contacto .hero-art {
        order: 2;
    }
    .hero--producto .hero-content,
    .hero--contacto .hero-content { order: 1; }

    /* Posición móvil: arriba (default) — imagen primero, texto después */
    .hero--img-m-arriba .hero-art--mobile { order: 1 !important; }
    .hero--img-m-arriba .hero-content     { order: 2 !important; }

    /* Posición móvil: abajo — texto primero, imagen después */
    .hero--img-m-abajo .hero-art--mobile { order: 2 !important; }
    .hero--img-m-abajo .hero-content     { order: 1 !important; }

    /* Posición móvil: oculta — el .hero-art--mobile ya no se renderiza,
       así que el banner queda como single-column de solo texto.
       Si la grilla era hero-con-imagen, igual la dejamos pero sin imagen. */
    .hero--img-m-oculta .hero-art--desktop,
    .hero--img-m-oculta .hero-art--mobile {
        display: none !important;
    }

    /* Posición móvil: fondo — la imagen pasa a ser un background */
    .hero--bg-image-mobile {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 220px;
    }
    .hero--bg-image-mobile::before,
    .hero--bg-image-mobile::after { display: none !important; }
    .hero--bg-image-mobile .hero-art--desktop,
    .hero--bg-image-mobile .hero-art--mobile {
        display: none !important;
    }
    .hero--bg-image-mobile .hero-content h1 {
        text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.55);
    }
    .hero--bg-image-mobile .hero-content p {
        text-shadow: 0 1px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.5);
    }

    /* Si el banner desktop es bg-image pero el móvil NO,
       devolver a layout normal en móvil (anular display:block + ocultar bg desktop) */
    .hero--bg-image.hero--img-m-arriba,
    .hero--bg-image.hero--img-m-abajo,
    .hero--bg-image.hero--img-m-oculta {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .hero--bg-image.hero--img-m-arriba::before,
    .hero--bg-image.hero--img-m-arriba::after,
    .hero--bg-image.hero--img-m-abajo::before,
    .hero--bg-image.hero--img-m-abajo::after,
    .hero--bg-image.hero--img-m-oculta::before,
    .hero--bg-image.hero--img-m-oculta::after {
        display: block;
    }
    .hero--bg-image.hero--img-m-arriba .hero-bg--desktop,
    .hero--bg-image.hero--img-m-abajo .hero-bg--desktop,
    .hero--bg-image.hero--img-m-oculta .hero-bg--desktop {
        display: none !important;
    }

    /* En móvil el contenido del slide ya debe estar visible, sin entradas
       secuenciales ni animaciones pesadas al entrar al viewport. */
    .hero,
    .hero::before,
    .hero::after,
    .hero-bg img,
    .hero h1,
    .hero p,
    .hero-actions,
    .hero-eyebrow,
    .hero-marca,
    .hero-meta,
    .hero-contactos,
    .hero--principal .hero-principal-eyebrow,
    .hero--principal .hero-principal-eyebrow svg,
    .hero--principal .hero-title-accent,
    .hero--principal .hero-principal-trust,
    .hero-title-accent-dot,
    .hero-eyebrow-dot,
    .hero-art img,
    .hero-contacto-illust,
    .hero-art-glow,
    .hero-art-ring,
    .hero-art-sparkle,
    .hero-art-pill,
    .hero-principal-chip,
    .hero-art-badge-float,
    .hc-sparkle,
    .hc-bottle {
        animation: none !important;
    }

    .hero-slide:not(.is-active) .hero h1,
    .hero-slide:not(.is-active) .hero p,
    .hero-slide:not(.is-active) .hero-actions,
    .hero-slide:not(.is-active) .hero-eyebrow,
    .hero-slide:not(.is-active) .hero-marca,
    .hero-slide:not(.is-active) .hero-meta,
    .hero-slide:not(.is-active) .hero-contactos,
    .hero-slide:not(.is-active) .hero-art img,
    .hero-slide:not(.is-active) .hero-contacto-illust,
    .hero-slide.is-active .hero h1,
    .hero-slide.is-active .hero p,
    .hero-slide.is-active .hero-actions,
    .hero-slide.is-active .hero--producto .hero-eyebrow,
    .hero-slide.is-active .hero--producto .hero-marca,
    .hero-slide.is-active .hero-meta,
    .hero-slide.is-active .hero-art img,
    .hero-slide.is-active .hero-contacto-illust {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .hero-content {
        max-width: none;
        gap: .2rem;
    }
    .hero h1 {
        font-size: 1.8rem;
        margin-bottom: .45rem;
    }
    .hero p {
        font-size: .95rem;
        margin-bottom: 1rem;
    }
    .hero-actions { gap: .6rem; }
    .hero--principal .hero-principal-trust {
        margin-top: .9rem;
        gap: .45rem .7rem;
        font-size: .74rem;
    }
    .hero.hero--bg-image {
        min-height: 220px;
    }
    .hero-art {
        min-height: 140px;
    }
    .hero-art img {
        max-height: 160px;
        margin-bottom: 0;
    }
    .hero--producto .hero-art img {
        max-height: 150px;
        transform: none !important;
    }
    .hero--contacto .hero-art {
        min-height: 120px;
    }
    .hero-contacto-illust {
        max-height: 150px;
    }
}

/* =========================================================
   Hero carousel (banner principal con auto-scroll de slides)
   ========================================================= */
.hero-carousel {
    position: relative;
    margin-bottom: 3rem;
    isolation: isolate;
}
/* Stage = slides + progress bar. La meta queda fuera, debajo del stage. */
.hero-carousel-stage {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    /* Fix Safari: al hacer scroll fuera y volver, Safari descartaba la capa
       de render del carrusel y lo repintaba tarde / recortado. Forzando una
       capa de composición estable (translateZ) la textura se conserva en GPU
       y al regresar se muestra al instante, sin parpadeo ni corte. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.hero-carousel .hero {
    margin-bottom: 0;
    border-radius: 18px;
    height: 100%;
}
.hero-slides {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 18px;
    /* Nota: se quitó `-webkit-overflow-scrolling: touch`. En iOS moderno el
       scroll con inercia ya es el default, y esa propiedad creaba una capa
       de scroll aparte que en Safari dejaba el contenido en blanco/recortado
       al volver a entrar al viewport hasta tocar el carrusel. */
    scrollbar-width: none;
    /* Evita que el swipe diagonal arrastre al viewport en móvil */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
}
.hero-slides::-webkit-scrollbar { display: none; }
.hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    contain: layout style;
}
.hero-slide > .hero {
    flex: 1;
    width: 100%;
}

/* Slide solitario: ocultar dots/flechas y mantener margen */
.hero-carousel--solo .hero-slides { overflow: hidden; }

/* ---- Meta bar inferior: flechas + dots integrados en una pill ----
   Va debajo del stage (no encima) para evitar colisiones con el contenido
   de los slides (botones, chips flotantes, listas, etc.) */
.hero-carousel-meta {
    position: relative;
    margin: 1rem auto 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: .35rem;
    z-index: 4;
    padding: .35rem .5rem;
    background: rgba(20, 12, 8, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 22px -10px rgba(0,0,0,.4);
}

/* Flechas compactas dentro de la meta bar */
.hero-carousel-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, transform .15s var(--ease);
}
.hero-carousel-nav:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
}
.hero-carousel-nav:active { transform: scale(.92); }
.hero-carousel-nav:disabled { opacity: .3; cursor: default; }

/* ---- Dots con fill de progreso ---- */
.hero-carousel-dots {
    display: flex;
    gap: .35rem;
    align-items: center;
    padding: 0 .35rem;
}
.hero-carousel-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(255,255,255,.32);
    cursor: pointer;
    transition: width .35s var(--ease), background .25s ease, border-radius .35s var(--ease);
    overflow: hidden;
}
.hero-carousel-dot:hover { background: rgba(255,255,255,.55); }
.hero-carousel-dot.is-active {
    width: 36px;
    border-radius: 6px;
    background: rgba(255,255,255,.25);
}
.hero-carousel-dot-fill {
    position: absolute;
    inset: 0;
    background: #fff;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: inherit;
    transition: transform .25s ease;
}
.hero-carousel-dot.is-active .hero-carousel-dot-fill {
    transform: scaleX(var(--dot-progress, 0));
}
.hero-carousel.is-paused .hero-carousel-dot.is-active .hero-carousel-dot-fill {
    background: rgba(255,255,255,.65);
}

/* ---- Barra de progreso global ---- */
.hero-carousel-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,.10);
    overflow: hidden;
    z-index: 3;
    border-radius: 0 0 18px 18px;
}
.hero-carousel-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg,
        rgba(255,255,255,.6),
        #fff,
        rgba(255,255,255,.6));
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
}
.hero-carousel.is-paused .hero-carousel-progress-fill {
    background: linear-gradient(90deg,
        rgba(255,255,255,.35),
        rgba(255,255,255,.65));
}

/* ---- Re-animación del contenido al activarse el slide ----
   Slides inactivos: animaciones desactivadas y contenido en su estado inicial.
   Slide activo: las animaciones se redeclaran → el navegador las re-ejecuta. */
.hero-slide:not(.is-active) .hero h1,
.hero-slide:not(.is-active) .hero p,
.hero-slide:not(.is-active) .hero-actions,
.hero-slide:not(.is-active) .hero-eyebrow,
.hero-slide:not(.is-active) .hero-marca,
.hero-slide:not(.is-active) .hero-meta,
.hero-slide:not(.is-active) .hero-contactos {
    animation: none !important;
    opacity: 0;
    transform: translateY(14px);
}
.hero-slide:not(.is-active) .hero-art img,
.hero-slide:not(.is-active) .hero-contacto-illust {
    animation: none !important;
    opacity: 0;
    transform: translateY(20px) scale(.94);
}

/* Performance: pausar animaciones infinitas en slides inactivos
   (gradiente del hero, orbs, zoom de bg, sparkles del slide de contacto) */
.hero-slide:not(.is-active) .hero,
.hero-slide:not(.is-active) .hero::before,
.hero-slide:not(.is-active) .hero::after,
.hero-slide:not(.is-active) .hero-bg img,
.hero-slide:not(.is-active) .hc-sparkle {
    animation-play-state: paused !important;
}
.hero-slide.is-active .hero-contacto-illust {
    animation: hero-art-in 1s var(--ease) .35s both;
}

.hero-slide.is-active .hero h1            { animation: hero-line-in .9s var(--ease) .15s both; }
.hero-slide.is-active .hero p             { animation: hero-line-in .9s var(--ease) .28s both; }
.hero-slide.is-active .hero-actions       { animation: hero-line-in .9s var(--ease) .48s both; }
.hero-slide.is-active .hero--producto .hero-eyebrow { animation: hero-line-in .9s var(--ease) .05s both; }
.hero-slide.is-active .hero--producto .hero-marca   { animation: hero-line-in .9s var(--ease) .18s both; }
.hero-slide.is-active .hero-meta                    { animation: hero-line-in .9s var(--ease) .35s both; }

.hero-slide.is-active .hero-art img {
    animation:
        hero-art-in 1s var(--ease) .35s both,
        hero-art-kenburns 9s ease-in-out 1.2s infinite alternate;
}
@keyframes hero-art-kenburns {
    0%   { transform: translateY(0) scale(1) rotate(0deg); filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }
    100% { transform: translateY(-14px) scale(1.06) rotate(-1.5deg); filter: drop-shadow(0 22px 44px rgba(0,0,0,.45)); }
}

/* ---- Variante de slide tipo producto ---- */
/* === Slide producto y banner editable decorado: layout limpio === */
/* El contenedor .hero-art queda centrado en su columna (no se desplaza)
   para que las decoraciones (ring, chips, badges) no se corten en el borde derecho.
   Solo la IMAGEN se desplaza un poco a la derecha vía translate. */
.hero--producto .hero-art,
.hero-art--decorated {
    overflow: visible;
}
.hero--producto .hero-art img {
    z-index: 2;
    max-height: 240px;
    transform: translateX(6%);
}
/* En el banner editable decorado, la imagen sigue las reglas estándar
   (ya tiene width/height/contain). Solo aseguramos z-index encima de las decoraciones. */
.hero-art--decorated img {
    position: relative;
    z-index: 2;
}

/* Halo radial detrás del frasco — centrado en el contenedor (no se mueve) */
.hero-art-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        color-mix(in srgb, var(--hero-accent) 35%, transparent) 0%,
        color-mix(in srgb, var(--hero-accent) 8%, transparent) 45%,
        transparent 75%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
    animation: hero-art-glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes hero-art-glow-pulse {
    0%   { opacity: .7; transform: translate(-50%, -50%) scale(.95); }
    100% { opacity: 1;  transform: translate(-50%, -50%) scale(1.08); }
}

/* === Decoraciones del slide producto === */

/* Anillo decorativo orbitando — centrado en el contenedor */
.hero-art-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--hero-accent) 35%, transparent);
    pointer-events: none;
    z-index: 1;
    animation: hero-ring-rotate 28s linear infinite;
}
@keyframes hero-ring-rotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Patrón de puntos sutil de fondo */
.hero-art-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.10) 1.2px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

/* Sparkles ✦ animadas */
.hero-art-sparkle {
    position: absolute;
    color: var(--hero-accent);
    pointer-events: none;
    z-index: 3;
    transform-origin: center;
    animation: hero-art-sparkle-pulse 2.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hero-accent) 50%, transparent));
}
.hero-art-sparkle svg { width: 100%; height: 100%; display: block; }
.hero-art-sparkle-1 { top: 8%;   left:  8%; width: 22px; height: 22px; animation-delay: 0s; }
.hero-art-sparkle-2 { top: 12%;  right: 4%; width: 16px; height: 16px; animation-delay: .8s; }
.hero-art-sparkle-3 { bottom: 14%; left: 18%; width: 14px; height: 14px; animation-delay: 1.4s; }
@keyframes hero-art-sparkle-pulse {
    0%, 100% { opacity: 0;   transform: scale(.4) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.1) rotate(45deg); }
}

/* Chips ml flotantes orbitando el frasco */
.hero-art-pill {
    position: absolute;
    z-index: 3;
    padding: .3rem .55rem;
    background: rgba(255,255,255,.95);
    color: #1a1208;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    box-shadow:
        0 6px 14px -2px rgba(0,0,0,.4),
        0 0 0 1px color-mix(in srgb, var(--hero-accent) 30%, transparent) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: hero-pill-float 4s ease-in-out infinite alternate;
}
.hero-art-pill strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: .92rem;
    font-weight: 800;
    margin-right: .15rem;
    color: color-mix(in srgb, var(--hero-accent) 40%, #1a1208);
}
@keyframes hero-pill-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}
.hero-art-pill-1 { top: 22%;    left:  -2%; animation-delay: 0s;   }
.hero-art-pill-2 { top: 50%;    right: -4%; animation-delay: .8s;  }
.hero-art-pill-3 { bottom: 22%; left:   2%; animation-delay: 1.6s; }

/* Badge "Top venta" anclado abajo */
.hero-art-badge {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .75rem;
    background: color-mix(in srgb, var(--hero-accent) 95%, white);
    color: #1a0e08;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow:
        0 8px 18px -4px color-mix(in srgb, var(--hero-accent) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,.4);
}

/* Eyebrow con dot pulsante */
.hero--producto .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hero-accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--hero-accent) 45%, transparent);
    color: var(--hero-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .75rem;
    animation: hero-line-in .8s var(--ease) .05s both;
}
.hero-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hero-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hero-accent) 70%, transparent);
    animation: hero-eyebrow-pulse 1.8s ease-in-out infinite;
}
@keyframes hero-eyebrow-pulse {
    0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--hero-accent) 60%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hero-accent) 0%, transparent); }
}

.hero--producto h1 {
    font-size: 2.2rem;
    line-height: 1.08;
    margin-bottom: .3rem;
}
.hero--producto .hero-marca {
    color: var(--hero-accent);
    font-size: .82rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: .75rem;
    opacity: 1;
    animation: hero-line-in .8s var(--ease) .18s both;
}
.hero--producto p:not(.hero-marca) {
    margin-bottom: 1rem;
    font-size: .98rem;
    opacity: .85;
}

/* Hero meta: precio + tamaños en una fila elegante */
.hero-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0 0 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(255,255,255,.12);
    animation: hero-line-in .8s var(--ease) .3s both;
    flex-wrap: wrap;
}
.hero-meta-price {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.hero-meta-price small {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255,255,255,.55);
    margin-bottom: .25rem;
}
.hero-meta-price strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hero-accent);
    letter-spacing: -.01em;
}
.hero-meta-sizes {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.hero-meta-size {
    padding: .25rem .55rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    letter-spacing: .03em;
}

/* Botón CTA con icono */
.hero--producto .btn-accent {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.hero--producto .btn-accent svg {
    transition: transform .25s var(--ease);
}
.hero--producto .btn-accent:hover svg {
    transform: translateX(3px);
}

.hero--producto.hero--sin-imagen { display: block; }
.hero--producto.hero--sin-imagen .hero-content { max-width: 720px; }

/* ============================================================
   Slide de contacto / pedidos a la medida
   ============================================================ */
.hero.hero--contacto.hero-con-imagen {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    /* Sin min-height: deja que el alto del banner sea el natural de su contenido */
}
.hero--contacto .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hero-accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--hero-accent) 45%, transparent);
    color: var(--hero-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}
.hero--contacto h1 { font-size: 2rem; margin-bottom: .25rem; line-height: 1.1; }
.hero--contacto .hero-marca {
    color: var(--hero-accent);
    font-size: .82rem;
    letter-spacing: .04em;
    margin-bottom: .75rem;
    opacity: 1;
}
.hero--contacto p:not(.hero-marca) {
    font-size: .95rem;
    margin-bottom: .85rem;
}

/* Grid de contactos: 2x2 compacto */
.hero-contactos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin: .75rem 0 1rem;
    animation: hero-line-in .8s var(--ease) .35s both;
}
.hero-contacto {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s var(--ease),
        box-shadow .25s ease;
}
.hero-contacto:hover,
.hero-contacto:focus-visible {
    background: color-mix(in srgb, var(--hero-accent) 14%, transparent);
    border-color: var(--hero-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--hero-accent) 45%, transparent);
    outline: none;
}
.hero-contacto-ico {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--hero-accent) 18%, transparent);
    color: var(--hero-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, color .25s ease;
}
.hero-contacto-ico svg { width: 16px; height: 16px; }
.hero-contacto:hover .hero-contacto-ico {
    background: var(--hero-accent);
    color: #1a0e08;
}
.hero-contacto-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}
.hero-contacto-info small {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    line-height: 1;
}
.hero-contacto-info strong {
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* WhatsApp destacado con tinte verde sutil */
.hero-contacto-wa {
    background: color-mix(in srgb, #25d366 14%, transparent);
    border-color: color-mix(in srgb, #25d366 35%, transparent);
}
.hero-contacto-wa .hero-contacto-ico {
    background: color-mix(in srgb, #25d366 25%, transparent);
    color: #25d366;
}
.hero-contacto-wa:hover {
    background: color-mix(in srgb, #25d366 22%, transparent);
    border-color: #25d366;
    box-shadow: 0 10px 22px -8px rgba(37, 211, 102, .45);
}
.hero-contacto-wa:hover .hero-contacto-ico {
    background: #25d366;
    color: #052b15;
}

/* Botón CTA del slide de contacto con icono */
.hero--contacto .btn-accent {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* ---- Ilustración del lado derecho ---- */
.hero-art--contacto {
    width: 100%;
    height: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}
.hero-contacto-illust {
    width: 100%;
    height: 100%;
    max-width: 260px;
    max-height: 280px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transform: translateX(6%); /* desplaza solo la ilustración, no las decoraciones */
}

/* === Decoraciones del slide contacto === */

/* Anillo orbital (reusa la animación del slide producto) */
.hero-art--contacto .hero-art-ring {
    left: 50%;
    width: 260px;
    height: 260px;
}
.hero-art--contacto .hero-art-dots {
    mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 72%);
}

/* === Banner editable decorado: decoraciones centradas EXACTO con la imagen ===
   En el editable la imagen no se desplaza (la posición la elige el admin),
   así que las decoraciones también van en el centro geométrico. */
.hero-art--decorated .hero-art-ring,
.hero-art--decorated .hero-art-glow {
    left: 50%;
}
.hero-art--decorated .hero-art-dots {
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}
.hero-art--decorated .hero-art-ring { width: 260px; height: 260px; }
.hero-art--decorated .hero-art-glow { width: 280px; height: 280px; }

/* Badges flotantes con stats */
.hero-art-badge-float {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: .4rem .65rem;
    background: rgba(255,255,255,.95);
    color: #1a1208;
    border-radius: 12px;
    box-shadow:
        0 8px 18px -2px rgba(0,0,0,.42),
        0 0 0 1px color-mix(in srgb, var(--hero-accent) 30%, transparent) inset;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: hero-pill-float 4s ease-in-out infinite alternate;
    line-height: 1.1;
}
.hero-art-badge-float strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--hero-accent) 35%, #1a0e08);
}
.hero-art-badge-float small {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(0,0,0,.6);
    margin-top: .05rem;
}
.hero-art-badge-float-1 { top: 8%;    left: -2%;  animation-delay: 0s; }
.hero-art-badge-float-2 { top: 48%;   right: -5%; animation-delay: .8s; }
.hero-art-badge-float-3 { bottom: 12%; left: 4%;  animation-delay: 1.6s; }

/* Sparkles animadas */
.hc-sparkle {
    transform-origin: center;
    transform-box: fill-box;
    animation: hc-sparkle-pulse 2.6s ease-in-out infinite;
}
.hc-sparkle-1 { animation-delay: 0s; }
.hc-sparkle-2 { animation-delay: .5s; }
.hc-sparkle-3 { animation-delay: 1s;  }
.hc-sparkle-4 { animation-delay: 1.5s; }
@keyframes hc-sparkle-pulse {
    0%, 100% { opacity: 0;   transform: scale(.4) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.1) rotate(45deg); }
}

/* Burbuja con bobbing */
.hc-bubble {
    transform-origin: 257px 90px;
    transform-box: fill-box;
    animation: hc-bubble-bob 3.5s ease-in-out infinite alternate;
}
@keyframes hc-bubble-bob {
    0%   { transform: translate(0, 0) rotate(-2deg); }
    100% { transform: translate(-6px, -10px) rotate(2deg); }
}

/* Frasco con float sutil */
.hc-bottle {
    transform-origin: center;
    transform-box: fill-box;
    animation: hc-bottle-float 5s ease-in-out infinite alternate;
}
@keyframes hc-bottle-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

/* =========================================================
   Slide editable (hero--principal): decoraciones de contenido
   ========================================================= */

/* Eyebrow de marca arriba del título */
.hero--principal .hero-principal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem .3rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hero-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--hero-accent) 42%, transparent);
    color: var(--hero-accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .9rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: hero-line-in .8s var(--ease) .05s both;
    width: max-content;
    max-width: 100%;
}
.hero--principal .hero-principal-eyebrow svg {
    color: var(--hero-accent);
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hero-accent) 55%, transparent));
    animation: hero-eyebrow-spin 6s linear infinite;
}
@keyframes hero-eyebrow-spin {
    to { transform: rotate(360deg); }
}

/* Acento decorativo bajo el título: línea — dot — línea */
.hero--principal .hero-title-accent {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .25rem 0 1rem 0;
    animation: hero-line-in .8s var(--ease) .2s both;
}
.hero-title-accent-line {
    flex: 0 0 32px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hero-accent), color-mix(in srgb, var(--hero-accent) 25%, transparent));
}
.hero-title-accent-line:last-child {
    flex: 1 1 auto;
    max-width: 110px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 25%, transparent), transparent);
}
.hero-title-accent-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hero-accent);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--hero-accent) 70%, transparent),
        0 0 0 3px color-mix(in srgb, var(--hero-accent) 15%, transparent);
    animation: hero-accent-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-accent-dot-pulse {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 10px color-mix(in srgb, var(--hero-accent) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--hero-accent) 15%, transparent); }
    50%      { transform: scale(1.3); box-shadow: 0 0 16px color-mix(in srgb, var(--hero-accent) 85%, transparent), 0 0 0 6px color-mix(in srgb, var(--hero-accent) 8%, transparent); }
}

/* Alineación: centrar/derecha cuando el banner lo pide */
.hero--principal.hero--align-center .hero-principal-eyebrow { align-self: center; }
.hero--principal.hero--align-center .hero-title-accent      { justify-content: center; }
.hero--principal.hero--align-center .hero-title-accent-line:last-child { background: linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 25%, transparent), transparent); }
.hero--principal.hero--align-center .hero-title-accent-line:first-child { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-accent) 25%, transparent)); }
.hero--principal.hero--align-center .hero-principal-trust   { justify-content: center; }

.hero--principal.hero--align-right .hero-principal-eyebrow  { align-self: flex-end; }
.hero--principal.hero--align-right .hero-title-accent       { justify-content: flex-end; }
.hero--principal.hero--align-right .hero-title-accent-line:first-child { flex: 1 1 auto; max-width: 110px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-accent) 25%, transparent)); }
.hero--principal.hero--align-right .hero-title-accent-line:last-child  { flex: 0 0 32px; background: linear-gradient(90deg, color-mix(in srgb, var(--hero-accent) 25%, transparent), var(--hero-accent)); }
.hero--principal.hero--align-right .hero-principal-trust    { justify-content: flex-end; }

/* Lista de promesas/trust al pie del contenido */
.hero--principal .hero-principal-trust {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.1rem;
    font-size: .82rem;
    color: rgba(255,255,255,.85);
    animation: hero-line-in .8s var(--ease) .55s both;
}
.hero--principal .hero-principal-trust li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 500;
    letter-spacing: .01em;
}
.hero-principal-trust-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--hero-accent) 22%, transparent);
    color: var(--hero-accent);
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--hero-accent) 30%, transparent);
}

/* Chips flotantes alrededor de la imagen del slide editable */
.hero-principal-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .55rem .75rem;
    background: rgba(20, 12, 8, .82);
    color: #fff;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--hero-accent) 50%, transparent);
    box-shadow:
        0 12px 26px -10px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: hero-pill-float 4.2s ease-in-out infinite alternate;
    white-space: nowrap;
}
.hero-principal-chip strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--hero-accent);
    line-height: 1;
    letter-spacing: -.02em;
}
.hero-principal-chip small {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .82;
    margin-top: .25rem;
}

/* Posiciones desktop (imagen a la derecha por defecto) */
.hero-principal-chip-1 { top: 6%;     left: -4%;  animation-delay: 0s;   }
.hero-principal-chip-2 { top: 48%;    right: -4%; animation-delay: .9s;  }
.hero-principal-chip-3 { bottom: 8%;  left: 4%;   animation-delay: 1.6s; }

/* Si la imagen está a la izquierda, espejear las posiciones */
.hero--principal.hero--img-izquierda .hero-principal-chip-1 { left: auto; right: -4%; }
.hero--principal.hero--img-izquierda .hero-principal-chip-2 { right: auto; left: -4%; }
.hero--principal.hero--img-izquierda .hero-principal-chip-3 { left: auto; right: 4%; }

/* Anillo exterior adicional (más amplio y casi transparente) */
.hero-art-ring-2 {
    width: 340px !important;
    height: 340px !important;
    opacity: .35;
    border-color: color-mix(in srgb, var(--hero-accent) 22%, transparent) !important;
    animation: hero-ring-rotate 42s linear infinite reverse !important;
}

/* Cuando el banner es bg-image, el contenido va sobre la imagen — necesita
   más contraste en el eyebrow y trust */
.hero--principal.hero--bg-image .hero-principal-eyebrow,
.hero--principal.hero--bg-image-mobile .hero-principal-eyebrow {
    background: rgba(0,0,0,.45);
    border-color: color-mix(in srgb, var(--hero-accent) 55%, transparent);
}
.hero--principal.hero--bg-image .hero-principal-trust,
.hero--principal.hero--bg-image-mobile .hero-principal-trust {
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.hero--principal.hero--bg-image .hero-principal-trust-ico,
.hero--principal.hero--bg-image-mobile .hero-principal-trust-ico {
    background: rgba(0,0,0,.4);
    border-color: color-mix(in srgb, var(--hero-accent) 55%, transparent);
}

/* Responsive del slide contacto */
@media (max-width: 900px) {
    .hero.hero--contacto.hero-con-imagen { gap: 1.5rem; }
    .hero--contacto h1 { font-size: 2rem; }
    .hero-contacto-info strong { font-size: .8rem; }
}
@media (max-width: 700px) {
    /* La regla universal .hero.hero-con-imagen ya cambia a 1 columna
       y pone la imagen arriba — solo ajustamos contenidos internos */
    .hero--contacto h1 { font-size: 1.75rem; }
    .hero-contactos { grid-template-columns: 1fr; gap: .55rem; }
    .hero-art--contacto { min-height: 200px; }
    .hero-contacto-illust { max-width: 200px; max-height: 200px; }
}

@media (max-width: 900px) {
    .hero-art-glow { width: 220px; height: 220px; }
}
@media (max-width: 700px) {
    /* Meta bar más visible y con mejor área táctil */
    .hero-carousel-meta {
        margin-top: .85rem;
        padding: .35rem .45rem;
        gap: .15rem;
        background-color: rgba(20, 12, 8, .9);
    }
    .hero-carousel-nav {
        width: 36px;
        height: 36px;
    }
    .hero-carousel-nav svg { width: 15px; height: 15px; }
    .hero-carousel-dot { width: 10px; height: 10px; }
    .hero-carousel-dot.is-active { width: 32px; height: 10px; border-radius: 5px; }
    .hero-carousel-dots { gap: .55rem; padding: 0 .35rem; }
    .hero-carousel-progress { height: 4px; }

    /* Padding compacto en móvil — la meta vive fuera del slide */
    .hero { padding: 2rem 1.5rem; }
    .hero h1 { font-size: 1.9rem; }
    .hero p { font-size: .98rem; margin-bottom: 1.15rem; }
    .hero--producto h1 { font-size: 1.7rem; }
    .hero--producto .hero-marca { font-size: .72rem; }
    .hero-meta { gap: .85rem; padding-top: .65rem; margin-bottom: .9rem; }
    .hero-meta-price strong { font-size: 1.35rem; }
    .hero-art-glow { width: 180px; height: 180px; filter: blur(16px); }
    /* En móvil escondemos las decoraciones que rodean la imagen para evitar saturar */
    .hero-art-ring,
    .hero-art-dots,
    .hero-art-sparkle,
    .hero-art-pill,
    .hero-art-badge,
    .hero-art-badge-float { display: none; }
    /* En móvil la imagen recupera su centro (sin translate) para mejor encuadre */
    .hero--producto .hero-art img,
    .hero-art--contacto .hero-contacto-illust { transform: none; }

    /* === Banner editable: re-habilitar decoraciones SOLO en su imagen móvil ===
       En el slide editable la imagen iba sola y se sentía "hueca". Mostramos
       un anillo orbital sutil + dos sparkles + glow más visible, todo escalado
       para móvil para no saturar. */
    .hero-art--mobile.hero-art--decorated .hero-art-ring,
    .hero-art--mobile.hero-art--decorated .hero-art-sparkle {
        display: block;
    }
    .hero-art--mobile.hero-art--decorated .hero-art-glow {
        width: 220px;
        height: 220px;
        filter: blur(22px);
    }
    .hero-art--mobile.hero-art--decorated .hero-art-ring {
        width: 200px;
        height: 200px;
        border-style: dashed;
        opacity: .55;
    }
    .hero-art--mobile.hero-art--decorated .hero-art-sparkle-1 {
        top: 6%; left: 10%; width: 18px; height: 18px;
    }
    .hero-art--mobile.hero-art--decorated .hero-art-sparkle-2 {
        top: 10%; right: 8%; width: 14px; height: 14px;
    }

    /* Imagen móvil del banner editable: más compacta para que el texto no
       quede tan empujado hacia abajo. */
    .hero-art--mobile.hero-art--decorated {
        min-height: 180px;
        margin-bottom: .25rem;
    }
    .hero-art--mobile.hero-art--decorated img {
        max-height: 170px;
        margin: 0;
    }

    /* === Ajustes móviles del slide editable (hero--principal) === */
    .hero--principal .hero-principal-eyebrow {
        font-size: .62rem;
        padding: .25rem .65rem .25rem .45rem;
        margin-bottom: .7rem;
        gap: .35rem;
    }
    .hero--principal .hero-principal-eyebrow svg { width: 10px; height: 10px; }
    .hero--principal .hero-title-accent {
        margin: .2rem 0 .85rem;
        gap: .4rem;
    }
    .hero-title-accent-line { flex-basis: 24px; }
    .hero-title-accent-line:last-child { max-width: 70px; }
    .hero-title-accent-dot { width: 6px; height: 6px; }

    .hero--principal .hero-principal-trust {
        margin-top: 1rem;
        gap: .55rem .85rem;
        font-size: .72rem;
        color: rgba(255,255,255,.88);
    }
    .hero-principal-trust-ico {
        width: 22px; height: 22px;
        border-radius: 7px;
    }
    .hero-principal-trust-ico svg { width: 11px; height: 11px; }

    /* Chips flotantes en móvil — re-habilitados solo dentro del editable */
    .hero-art--mobile .hero-principal-chip { display: inline-flex; }
    .hero-art--mobile .hero-principal-chip {
        padding: .4rem .6rem;
        border-radius: 11px;
    }
    .hero-art--mobile .hero-principal-chip strong { font-size: .95rem; }
    .hero-art--mobile .hero-principal-chip small {
        font-size: .52rem;
        letter-spacing: .12em;
        margin-top: .15rem;
    }
    .hero-principal-chip-m1 {
        top: 4%; left: 2%;
        animation: hero-pill-float 4.2s ease-in-out 0s infinite alternate;
    }
    .hero-principal-chip-m2 {
        bottom: 4%; right: 2%;
        animation: hero-pill-float 4.2s ease-in-out .8s infinite alternate;
    }

    /* Anillo extra: en móvil más chico para no salirse del recuadro */
    .hero-art-ring-2 {
        width: 240px !important;
        height: 240px !important;
        display: none; /* mantenemos solo el anillo principal en móvil */
    }
}

/* Pantallas muy pequeñas: el swipe es la navegación natural — ocultamos flechas,
   maximizamos dots como afordancia visible */
@media (max-width: 480px) {
    .hero-carousel-nav { display: none; }
    .hero-carousel-meta {
        gap: 0;
        padding: .4rem .75rem;
    }
    .hero-carousel-dots { gap: .6rem; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slides { scroll-behavior: auto; }
    /* Reducir animaciones infinitas que consumen CPU */
    .hero,
    .hero::before,
    .hero::after,
    .hero-bg img,
    .hero-art img,
    .hero-principal-eyebrow svg,
    .hero-title-accent-dot,
    .hero-principal-chip,
    .hero-art-ring,
    .hero-art-ring-2,
    .hero-art-glow,
    .hero-art-sparkle {
        animation: none !important;
    }
}

/* Buttons */
.btn {
    position: relative;
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
    font-size: 1rem;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.18);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(1px) scale(.98); }
/* Variantes — soportan --btn-color para override personalizado */
.btn-primary {
    background: var(--btn-color, var(--primary));
    color: white;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--btn-color, var(--primary)) 50%, transparent);
}
.btn-primary:hover {
    background: var(--btn-color, var(--primary-dark));
    filter: brightness(.95);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--btn-color, var(--primary)) 65%, transparent);
}
.btn-secondary {
    background: transparent;
    border: 1.5px solid currentColor;
    color: inherit;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }

.btn-accent {
    background: var(--btn-color, var(--accent));
    color: #2a1f12;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--btn-color, var(--accent)) 60%, transparent);
}
.btn-accent:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--btn-color, var(--accent)) 70%, transparent);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--btn-color, rgba(255,255,255,.65));
    color: var(--btn-color, currentColor);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.btn-outline:hover {
    background: color-mix(in srgb, var(--btn-color, white) 14%, transparent);
    border-color: var(--btn-color, white);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--btn-color, currentColor);
    box-shadow: none;
    padding-left: 1rem;
    padding-right: 1rem;
}
.btn-ghost::after {
    content: ' →';
    transition: transform .25s var(--ease);
    display: inline-block;
}
.btn-ghost:hover {
    background: color-mix(in srgb, var(--btn-color, white) 10%, transparent);
    transform: translateY(-1px);
}
.btn-ghost:hover::after { transform: translateX(3px); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; margin-top: .5rem; }

.btn-loading { pointer-events: none; opacity: .7; }
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: white;
    border-radius: 50%;
    right: 1rem;
    top: 50%;
    margin-top: -8px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Section */
.section { margin-bottom: 3rem; }
.section-head {
    margin-bottom: 1.75rem;
    position: relative;
}
.section-head h2 {
    position: relative;
    display: inline-block;
    padding-bottom: .35rem;
}
.section-head h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    animation: section-line-in 1s var(--ease) .25s forwards;
}
@keyframes section-line-in {
    from { width: 0; }
    to   { width: 64px; }
}
.section-head .muted { font-size: .98rem; }

/* Grid de productos */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}
.card {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(30, 20, 10, 0.05),
        0 8px 24px -8px rgba(30, 20, 10, 0.10);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(12px);
    animation: card-in .55s var(--ease) forwards;
    border: 1px solid rgba(232, 226, 217, 0.6);
}
.grid .card:nth-child(1)  { animation-delay: .02s; }
.grid .card:nth-child(2)  { animation-delay: .08s; }
.grid .card:nth-child(3)  { animation-delay: .14s; }
.grid .card:nth-child(4)  { animation-delay: .20s; }
.grid .card:nth-child(5)  { animation-delay: .26s; }
.grid .card:nth-child(6)  { animation-delay: .32s; }
.grid .card:nth-child(7)  { animation-delay: .38s; }
.grid .card:nth-child(8)  { animation-delay: .44s; }
.grid .card:nth-child(n+9){ animation-delay: .50s; }
@keyframes card-in {
    to { opacity: 1; transform: translateY(0); }
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    pointer-events: none;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow .3s var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(30, 20, 10, 0.06),
        0 24px 48px -12px rgba(30, 20, 10, 0.22);
}
.card:hover::after { box-shadow: inset 0 0 0 1px var(--accent); }

/* Property registrada para permitir transición suave del tinte */
@property --card-tint {
    syntax: '<color>';
    inherits: false;
    initial-value: #efe2c8;
}
.card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    --card-tint: #efe2c8;
    background:
        radial-gradient(ellipse at 50% 38%,
            color-mix(in srgb, var(--card-tint) 10%, #fdf8f0) 0%,
            color-mix(in srgb, var(--card-tint) 28%, #f4ecdd) 55%,
            color-mix(in srgb, var(--card-tint) 50%, #e6d8c0) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: --card-tint .8s ease;
}
/* Halo sutil detrás del frasco — usa el mismo tinte */
.card-img::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--card-tint) 55%, transparent) 0%,
        color-mix(in srgb, var(--card-tint) 0%, transparent) 65%);
    pointer-events: none;
    transition: opacity .4s ease, transform .6s var(--ease), --card-tint .8s ease;
    z-index: 0;
}
.card:hover .card-img::after {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
}
/* Sombra elíptica "de superficie" bajo el frasco */
.card-img-shadow {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    width: 58%;
    height: 14px;
    background: radial-gradient(ellipse at center,
        rgba(30, 20, 10, 0.32) 0%,
        rgba(30, 20, 10, 0.18) 35%,
        rgba(30, 20, 10, 0) 72%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
    transition: width .5s var(--ease), opacity .35s ease, transform .5s var(--ease);
}
.card:hover .card-img-shadow {
    width: 64%;
    transform: translateX(-50%) translateY(2px);
    opacity: .85;
}
.card-img img {
    position: relative;
    z-index: 1;
    width: 72%;
    height: 72%;
    object-fit: contain;
    transition: transform .55s var(--ease), filter .45s ease;
    filter:
        drop-shadow(0 6px 10px rgba(30, 20, 10, .18))
        drop-shadow(0 14px 22px rgba(30, 20, 10, .22));
}
.card:hover .card-img img {
    transform: translateY(-4px) scale(1.06) rotate(-1.5deg);
    filter:
        drop-shadow(0 10px 14px rgba(30, 20, 10, .22))
        drop-shadow(0 22px 34px rgba(30, 20, 10, .32));
}
.card-img::before {
    content: '';
    position: absolute;
    inset: -50% -50% auto auto;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,.55), transparent 60%);
    transform: translate(60%, -60%);
    opacity: 0;
    transition: opacity .4s ease, transform .8s var(--ease);
    pointer-events: none;
    z-index: 1;
}
.card:hover .card-img::before {
    opacity: 1;
    transform: translate(20%, -20%);
}
.ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    padding: .3rem .8rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent),
        inset 0 1px 0 rgba(255,255,255,.22);
    transform-origin: top right;
    transition: transform .3s var(--ease), padding .25s var(--ease);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ribbon-icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: inline-block;
}
.card:hover .ribbon { transform: scale(1.06) rotate(-2deg); }

/* ---- Responsive del ribbon: en móvil solo el icono en un badge circular ---- */
@media (max-width: 600px) {
    .ribbon {
        top: 8px;
        right: 8px;
        padding: 0;
        width: 26px;
        height: 26px;
        justify-content: center;
        gap: 0;
        border-radius: 50%;
    }
    .ribbon-label { display: none; }
    .ribbon-icon { width: 14px; height: 14px; }
    /* Ribbon-hot (Top venta) también compacto en móvil */
    .ribbon.ribbon-hot { width: 28px; height: 28px; }
}

.card-body {
    padding: 1rem 1.25rem 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
}
.brand {
    color: var(--muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.card-body h3 {
    margin: .15rem 0 .5rem;
    font-size: 1.05rem;
    line-height: 1.3;
    transition: color .2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card:hover .card-body h3 { color: var(--primary); }

.card-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(232, 226, 217, 0.7);
}
.price {
    font-weight: 700;
    color: var(--primary);
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    transition: transform .25s var(--ease);
    font-size: 1rem;
}
.price .price-label {
    font-size: .65rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .15rem;
}
.card:hover .price { transform: translateX(2px); }

/* =========================================================
   Precios con descuento / ofertas
   ========================================================= */
/* Badge de % en la esquina superior izquierda de la tarjeta */
.card-oferta {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: linear-gradient(135deg, #d4422f, #a01b14);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .01em;
    padding: .26rem .58rem;
    border-radius: 99px;
    box-shadow:
        0 4px 12px rgba(160,27,20,.4),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .3s var(--ease);
}
.card:hover .card-oferta { transform: scale(1.07); }

/* Precio "Desde" de tarjeta — el span suelto cuando no hay descuento */
.price .price-amount { display: block; }

/* Variante con descuento: lista tachada arriba, precio de oferta abajo */
.price-stack {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1.15;
}
.price-top {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 .4rem;
}
.price-was {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: line-through;
}
.price-now {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .3rem;
    font-size: 1.1rem;
    color: var(--primary);
}
.price-off {
    font-size: .6rem;
    font-weight: 800;
    color: #fff;
    background: var(--danger);
    padding: .1rem .34rem;
    border-radius: 5px;
    letter-spacing: .02em;
    transform: translateY(-1px);
}

/* Slide del producto destacado (hero-meta) con descuento */
.hero-meta-price-row {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}
.hero-meta-price-row s {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
}
.hero-meta-off {
    margin-top: .35rem;
    width: max-content;
    max-width: 100%;
    font-size: .6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    background: var(--danger);
    padding: .16rem .48rem;
    border-radius: 5px;
}

/* Opciones de presentación (detalle de producto) en oferta */
.opcion--oferta { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.opcion--oferta.selected { border-color: var(--primary); }
.opcion-off {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--danger);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    padding: .12rem .38rem;
    border-radius: 99px;
    line-height: 1.3;
}
.opcion-precio-was {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: line-through;
}
.opcion-precio-now {
    display: block;
    color: var(--danger);
    font-weight: 800;
}

/* Responsive: en pantallas chicas se compacta el precio de oferta */
@media (max-width: 600px) {
    .card-oferta { font-size: .68rem; padding: .22rem .5rem; top: 10px; left: 10px; }
    .price-now { font-size: 1rem; }
    .price-was { font-size: .72rem; }
    .price-off { font-size: .56rem; }
    .opcion-off { font-size: .56rem; }
    .hero-meta-price-row s { font-size: .9rem; }
}

.card-cta {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, color .25s ease, transform .25s var(--ease), border-color .25s ease;
    flex-shrink: 0;
}
.card-cta svg { width: 14px; height: 14px; }
.card:hover .card-cta {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateX(2px);
}

/* Carruseles (decants por género) */
.carousel-block {
    margin-bottom: 3rem;
    position: relative;
}
.carousel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    padding: 0 .25rem;
}
.carousel-head h3 {
    font-size: 1.5rem;
    margin: 0;
    position: relative;
    padding-left: 1rem;
}
.carousel-head h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.1em;
    background: var(--primary);
    border-radius: 2px;
}
.carousel-hint {
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.carousel-viewport {
    position: relative;
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
}
.carousel-viewport::before,
.carousel-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 48px;
    pointer-events: none;
    z-index: 2;
    transition: opacity .3s;
}
.carousel-viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
}
.carousel-viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
}
.carousel-viewport.at-start::before { opacity: 0; }
.carousel-viewport.at-end::after   { opacity: 0; }

.carousel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .25rem 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    transform: translateY(8px);
    opacity: 0;
    animation: carousel-in .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.carousel-card:nth-child(1) { animation-delay: .02s; }
.carousel-card:nth-child(2) { animation-delay: .08s; }
.carousel-card:nth-child(3) { animation-delay: .14s; }
.carousel-card:nth-child(4) { animation-delay: .20s; }
.carousel-card:nth-child(5) { animation-delay: .26s; }
.carousel-card:nth-child(6) { animation-delay: .32s; }
.carousel-card:nth-child(n+7) { animation-delay: .38s; }

@keyframes carousel-in {
    to { transform: translateY(0); opacity: 1; }
}

.carousel-card .card-img img {
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.carousel-card:hover .card-img img {
    transform: scale(1.06);
}
.carousel-card .card-body h3 {
    transition: color .2s;
}
.carousel-card:hover .card-body h3 {
    color: var(--primary);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--surface);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text);
    box-shadow: 0 6px 16px rgba(30,20,10,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition: opacity .25s, transform .25s, background .2s, color .2s;
    pointer-events: none;
}
.carousel-btn[data-dir="-1"] { left: -6px; }
.carousel-btn[data-dir="1"]  { right: -6px; }
.carousel-block:hover .carousel-btn,
.carousel-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
.carousel-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-50%) scale(1.08);
}
.carousel-btn:disabled {
    opacity: 0 !important;
    pointer-events: none;
}

@media (max-width: 600px) {
    .carousel-card { flex-basis: 70%; }
    .carousel-btn { display: none; }
}

/* =========================================================
   Producto detalle — rediseñado con tabs, total grande, trust
   ========================================================= */
.producto-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 1rem;
}
.producto-img {
    position: relative;
    --card-tint: #efe2c8;
    background:
        radial-gradient(ellipse at 50% 35%,
            color-mix(in srgb, var(--card-tint) 8%, #fdf8f0) 0%,
            color-mix(in srgb, var(--card-tint) 25%, #f4ecdd) 50%,
            color-mix(in srgb, var(--card-tint) 48%, #e6d8c0) 100%);
    border-radius: 18px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    position: sticky;
    top: 90px;
    align-self: start;
    /* Sombra neutral (sin tinte) y compacta: la sombra grande con `--card-tint`
       se notaba como un halo amarillento bajo la card y, con sticky, se metía
       en el área de opciones al hacer scroll. La profundidad de la imagen
       sigue cubierta por el drop-shadow del <img> y .producto-img-shadow,
       que viven DENTRO de la card. */
    box-shadow:
        0 1px 2px rgba(30, 20, 10, 0.05),
        0 8px 20px -14px rgba(30, 20, 10, 0.22);
    transition: --card-tint .8s ease, box-shadow .5s ease;
}
.producto-img::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at center, rgba(255,255,255,.45), transparent 55%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    z-index: 1;
}
.producto-img:hover::before { opacity: 1; }
/* Halo tintado tras el frasco */
.producto-img::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 42%;
    width: 75%;
    height: 75%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        color-mix(in srgb, var(--card-tint) 50%, transparent) 0%,
        color-mix(in srgb, var(--card-tint) 0%, transparent) 65%);
    pointer-events: none;
    z-index: 0;
    transition: transform .6s var(--ease), --card-tint .8s ease;
}
.producto-img:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
}
/* Sombra "de superficie" bajo el frasco */
.producto-img-shadow {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    width: 55%;
    height: 18px;
    background: radial-gradient(ellipse at center,
        rgba(30, 20, 10, 0.32) 0%,
        rgba(30, 20, 10, 0.18) 35%,
        rgba(30, 20, 10, 0) 72%);
    filter: blur(5px);
    pointer-events: none;
    z-index: 0;
    transition: width .5s var(--ease);
}
.producto-img:hover .producto-img-shadow {
    width: 62%;
}
.producto-img img {
    position: relative;
    z-index: 2;
    width: 65%;
    height: 65%;
    object-fit: contain;
    transition: transform .65s var(--ease), filter .35s ease;
    filter:
        drop-shadow(0 8px 14px rgba(30, 20, 10, .20))
        drop-shadow(0 18px 28px rgba(30, 20, 10, .24));
}
.producto-img:hover img {
    transform: translateY(-4px) scale(1.07) rotate(-1deg);
    filter:
        drop-shadow(0 12px 18px rgba(30, 20, 10, .26))
        drop-shadow(0 26px 38px rgba(30, 20, 10, .34));
}
.producto-img-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--border);
    padding: .35rem .75rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px -4px rgba(30,20,10,.12);
    animation: badge-in .5s var(--ease) .4s both;
}
.producto-img-badge svg { color: var(--accent); }
@keyframes badge-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Breadcrumb */
.pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--muted);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.pd-breadcrumb a {
    color: var(--muted);
    transition: color .2s ease;
}
.pd-breadcrumb a:hover { color: var(--text); }
.pd-breadcrumb span[aria-hidden] { opacity: .5; }
.pd-bc-current { color: var(--text); font-weight: 500; }

.producto-info > .brand,
.producto-info > h1,
.producto-info > .descripcion {
    opacity: 0;
    animation: detalle-line .55s var(--ease) forwards;
}
.producto-info > .brand { animation-delay: .2s; display: block; margin-bottom: .35rem; }
.producto-info > h1 { animation-delay: .28s; font-size: 2.2rem; margin: 0 0 .85rem; line-height: 1.1; }
.producto-info > .descripcion { animation-delay: .36s; }
@keyframes detalle-line {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.back-link { color: var(--muted); font-size: .9rem; }
.descripcion {
    color: var(--muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: .98rem;
}

/* Tabs Frasco / Decants */
.pd-tabs {
    display: flex;
    gap: .35rem;
    background: var(--bg);
    padding: .3rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.pd-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .65rem .85rem;
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s var(--ease), box-shadow .25s ease;
    font-family: inherit;
}
.pd-tab:hover { color: var(--text); }
.pd-tab.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 10px -4px rgba(30,20,10,.15);
}
.pd-tab.is-active svg { color: var(--primary); }
.pd-tab:active { transform: scale(.98); }

.pd-section-title { margin: 0 0 .5rem; font-size: 1.05rem; }
.pd-panel { animation: detalle-line .4s var(--ease); }
.pd-panel-hint {
    font-size: .85rem;
    margin: 0 0 .85rem;
}

.opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .5rem;
}
.opcion {
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: .8rem .5rem;
    cursor: pointer;
    text-align: center;
    transition: transform .2s var(--ease), border-color .2s ease, background .2s ease, box-shadow .25s var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    background: var(--surface);
    position: relative;
    min-height: 90px;
    justify-content: center;
}
.opcion:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 14px -6px rgba(30,20,10,.18);
}
.opcion input { display: none; }
.opcion.selected {
    border-color: var(--primary);
    background: #fdf2f1;
    box-shadow: 0 0 0 3px rgba(179,38,30,.08), 0 6px 14px -6px rgba(179,38,30,.2);
}
.opcion.agotado { opacity: .5; cursor: not-allowed; }
.opcion.agotado:hover { transform: none; box-shadow: none; }
.opcion-ml {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}
.opcion-ml small {
    font-size: .68rem;
    font-weight: 500;
    color: var(--muted);
    margin-left: .1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-family: inherit;
}
.opcion-precio {
    color: var(--primary);
    font-size: .92rem;
    font-weight: 600;
}
.stock-tag {
    font-size: .68rem;
    color: var(--danger);
    margin-top: .15rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.stock-tag.bajo { color: #c47200; }

/* Bloque de compra (qty + total + CTA) */
.pd-buy {
    margin-top: 1.25rem;
    padding: 1.1rem 1.2rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.pd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pd-row-label {
    font-size: .85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.pd-row-total .pd-total {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.75rem;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -.01em;
}

.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}
.qty-btn {
    background: transparent;
    border: none;
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .15s var(--ease);
}
.qty-btn:hover { background: var(--bg); color: var(--primary); }
.qty-btn:active { transform: scale(.88); }
.qty-control input {
    width: 52px;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
    height: 38px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--surface);
}
.qty-control input::-webkit-inner-spin-button { display: none; }
.qty-control input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pd-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.5rem;
}
.pd-add-btn svg { transition: transform .35s var(--ease); }
.pd-add-btn:hover svg { transform: translateY(-2px) rotate(-6deg); }

/* Trust badges debajo de la compra */
.pd-trust {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .35rem;
    text-align: center;
}
.pd-trust li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .35rem .25rem;
    border-right: 1px solid var(--border);
}
.pd-trust li:last-child { border-right: 0; }
.pd-trust-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--primary);
    margin-bottom: .15rem;
}
.pd-trust strong { font-size: .82rem; line-height: 1.2; }
.pd-trust small { font-size: .7rem; color: var(--muted); }

.msg {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-top: 1rem;
    border-left: 3px solid transparent;
}
.msg.ok { background: #e8f5e9; color: var(--success); border-left-color: var(--success); }
.msg.err { background: #fdecea; color: var(--danger); border-left-color: var(--danger); }
.msg-in { animation: msg-slide-in .35s var(--ease); }
@keyframes msg-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Toasts */
.toast-host {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    z-index: 9999;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--surface);
    color: var(--text);
    padding: .85rem 1.1rem .85rem .9rem;
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(30,20,10,.25), 0 2px 6px rgba(30,20,10,.06);
    border: 1px solid var(--border);
    min-width: 240px;
    max-width: 360px;
    opacity: 0;
    transform: translateX(20px) scale(.97);
    transition: opacity .3s var(--ease), transform .35s var(--ease);
    font-size: .92rem;
}
.toast.show { opacity: 1; transform: translateX(0) scale(1); }
.toast.out { opacity: 0; transform: translateX(20px) scale(.97); }
.toast-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    color: white;
    flex: 0 0 26px;
}
.toast-ok   { border-left: 3px solid var(--success); }
.toast-ok   .toast-icon { background: var(--success); }
.toast-err  { border-left: 3px solid var(--danger); }
.toast-err  .toast-icon { background: var(--danger); }
.toast-info { border-left: 3px solid var(--accent); }
.toast-info .toast-icon { background: var(--accent); }

@media (max-width: 600px) {
    .toast-host { left: 1rem; right: 1rem; top: 1rem; }
    .toast { min-width: 0; max-width: none; }
}

/* =========================================================
   Encargo (variación agotada) — rediseñado
   ========================================================= */
.encargo-box {
    border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    background:
        radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
        linear-gradient(135deg, #fdf7ee, #faf3e3);
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
    margin-top: 1.25rem;
    animation: msg-slide-in .35s var(--ease);
}
.encargo-head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}
.encargo-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--primary);
}
.encargo-head h4 {
    margin: 0 0 .15rem;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    color: var(--text);
}
.encargo-aviso {
    color: var(--muted);
    font-size: .88rem;
    margin: 0;
    line-height: 1.5;
}
.encargo-aviso strong { color: var(--text); font-weight: 600; }

.encargo-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.encargo-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.encargo-field span {
    font-size: .75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.encargo-form input {
    padding: .7rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
    width: 100%;
}
.encargo-form input::placeholder { color: #b8b1a7; }
.encargo-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(179,38,30,.10);
}
.encargo-btn {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: .15rem;
}
.encargo-trust {
    grid-column: 1 / -1;
    text-align: center;
    font-size: .78rem;
    margin: 0;
}

/* Carrito */
.carrito-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}
.carrito-items { display: flex; flex-direction: column; gap: 1rem; }
.carrito-item {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1rem;
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: 1rem;
    align-items: center;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
    transform-origin: center top;
    opacity: 0;
    transform: translateY(8px);
    animation: cart-item-in .45s var(--ease) forwards;
    transition: border-color .25s ease, box-shadow .3s var(--ease), transform .3s var(--ease),
                opacity .35s ease, height .35s var(--ease), padding .35s var(--ease), margin .35s var(--ease);
    overflow: hidden;
}
.carrito-items .carrito-item:nth-child(1) { animation-delay: .05s; }
.carrito-items .carrito-item:nth-child(2) { animation-delay: .12s; }
.carrito-items .carrito-item:nth-child(3) { animation-delay: .19s; }
.carrito-items .carrito-item:nth-child(4) { animation-delay: .26s; }
.carrito-items .carrito-item:nth-child(n+5) { animation-delay: .33s; }
@keyframes cart-item-in {
    to { opacity: 1; transform: translateY(0); }
}
.carrito-item:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-lift);
    transform: translateY(-2px);
}
.carrito-item.removing {
    opacity: 0;
    transform: translateX(-40px) scale(.96);
    border-color: transparent;
    box-shadow: none;
}

.ci-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7f1e8, #ede4d3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ci-img img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    transition: transform .4s var(--ease);
}
.carrito-item:hover .ci-img img { transform: scale(1.08); }
.ci-info h3 { margin: .15rem 0; font-size: 1rem; }
.ci-presentacion { color: var(--muted); font-size: .85rem; margin: 0; }
.ci-precio { font-size: .85rem; color: var(--muted); margin: .25rem 0 0; }
.ci-qty { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.ci-subtotal {
    font-weight: 600;
    min-width: 80px;
    text-align: right;
    color: var(--primary);
    transition: transform .25s var(--ease);
}
.qty-input { width: 40px; }
.link-danger {
    background: none;
    border: none;
    color: var(--danger);
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    padding: .15rem .4rem;
    border-radius: 4px;
    transition: background .2s ease, color .2s ease;
}
.link-danger:hover {
    background: #fdecea;
    text-decoration: underline;
}

.flash { animation: flash-pulse .55s var(--ease); }
@keyframes flash-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); color: var(--accent); }
    100% { transform: scale(1); }
}

.qty-btn { transition: background .15s ease, transform .15s ease; }
.qty-btn.tap { animation: qty-tap .35s var(--ease); }
@keyframes qty-tap {
    0%   { transform: scale(1); }
    50%  { transform: scale(.85); background: var(--bg); }
    100% { transform: scale(1); }
}

.carrito-resumen {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 90px;
}
.carrito-resumen h3 { margin-bottom: 1rem; }
.resumen-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.resumen-row.total { font-weight: 700; font-size: 1.15rem; color: var(--primary); }
.resumen-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: .9rem;
}
.resumen-item small { display: block; color: var(--muted); font-size: .8rem; }
.carrito-resumen hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }

.empty-state {
    position: relative;
    text-align: center;
    padding: 3.5rem 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: container-in .55s var(--ease) both;
}
.empty-state::before {
    content: '🛒';
    display: block;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: .55;
    animation: empty-float 3.5s ease-in-out infinite alternate;
}
@keyframes empty-float {
    from { transform: translateY(0)    rotate(-3deg); }
    to   { transform: translateY(-8px) rotate(3deg); }
}
.empty-state p { font-size: 1.05rem; margin-bottom: 1.5rem; color: var(--muted); }
.empty { color: var(--muted); }

/* =========================================================
   Checkout — stepper, secciones, validación en vivo
   ========================================================= */

/* Stepper de pasos */
.checkout-stepper {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.checkout-stepper::-webkit-scrollbar { display: none; }
.checkout-stepper .step {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem .25rem;
    flex: 0 0 auto;
    transition: opacity .25s ease;
}
.checkout-stepper .step:not(.current):not(.done) { opacity: .55; }
.step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--muted);
    font-weight: 700;
    font-size: .9rem;
    flex: 0 0 32px;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.checkout-stepper .done .step-circle {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    animation: dot-pop .45s var(--ease);
}
.checkout-stepper .current .step-circle {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
    animation: dot-pulse 2s ease-in-out infinite;
}
.checkout-stepper .step-label {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.checkout-stepper .step-label small {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.checkout-stepper .step-label strong { font-size: .92rem; }
.checkout-stepper .current .step-label strong { color: var(--primary); }
.step-bar {
    flex: 1 1 auto;
    height: 3px;
    border-radius: 99px;
    background: var(--border);
    min-width: 24px;
    position: relative;
    overflow: hidden;
}
.step-bar.done {
    background: linear-gradient(90deg, var(--primary), var(--accent));
}
.step-bar:not(.done)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
    opacity: .35;
}

/* Layout principal */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}
.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Las form-card globales no aplican; usamos co-section */
.checkout-form .co-section,
.checkout-form .co-submit-bar {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Secciones del checkout */
.co-section {
    overflow: hidden;
    transition: box-shadow .3s var(--ease);
}
.co-section:focus-within {
    box-shadow: 0 16px 32px -16px rgba(30,20,10,.18);
}
.co-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent);
}
.co-ico {
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex: 0 0 40px;
}
.co-head h3 {
    font-size: 1.05rem;
    margin: 0;
    letter-spacing: -.01em;
}
.co-head p { margin: .1rem 0 0; font-size: .85rem; }
.co-body { padding: 1.25rem 1.5rem 1.4rem; }
.co-body .form-row + .form-row { margin-top: 0; }
.co-body .form-group:last-child { margin-bottom: 0; }

/* Estados de validación por campo */
.fg { position: relative; }
.fg .hint { color: var(--muted); font-size: .78rem; margin-top: .25rem; display: block; }
.fg.is-valid input { border-color: var(--success); }
/* Tick ✓ solo en inputs sin prefijo */
.fg.is-valid:not(:has(.input-with-prefix)) input { padding-right: 2.5rem; }
.fg.is-valid:not(:has(.input-with-prefix))::after {
    content: '✓';
    position: absolute;
    right: .9rem;
    top: 2.15rem;
    color: var(--success);
    font-weight: 700;
    font-size: .95rem;
    animation: dot-pop .35s var(--ease);
    pointer-events: none;
}
.fg.has-err input {
    border-color: var(--danger);
    background: #fef7f6;
    animation: fg-shake .4s var(--ease);
}
.fg.has-err .err {
    color: var(--danger);
    font-size: .78rem;
    display: block;
    margin-top: .3rem;
    animation: msg-slide-in .25s var(--ease);
}
@keyframes fg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}

/* Input con prefijo (teléfono) */
.input-with-prefix {
    position: relative;
    display: flex;
    align-items: stretch;
}
.input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 .85rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    font-size: .92rem;
    color: var(--muted);
    font-weight: 500;
    transition: border-color .2s ease;
}
.input-with-prefix input {
    border-radius: 0 8px 8px 0 !important;
    flex: 1;
}
.fg.is-valid .input-prefix,
.input-with-prefix:focus-within .input-prefix { border-color: var(--primary); color: var(--text); }
.fg.has-err .input-prefix { border-color: var(--danger); }

/* Método de pago refinado */
.metodo .metodo-info {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1;
    min-width: 0;
}
.metodo-ico {
    font-size: 1.5rem;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex: 0 0 42px;
    transition: transform .3s var(--ease);
}
.metodo:hover .metodo-ico { transform: rotate(-6deg) scale(1.05); }
.metodo:has(input:checked) .metodo-ico {
    background: white;
    border-color: var(--primary);
}

/* Barra de submit */
.co-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
}
.co-submit-bar .back-link {
    color: var(--muted);
    font-size: .9rem;
    transition: color .2s ease, transform .2s var(--ease);
}
.co-submit-bar .back-link:hover { color: var(--text); transform: translateX(-2px); }
#checkout-submit {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.5rem;
}
.co-submit-total {
    background: rgba(255,255,255,.18);
    padding: .25rem .75rem;
    border-radius: 99px;
    font-weight: 700;
    font-size: .95rem;
}

/* Resumen (sidebar) refinado */
.co-resumen { padding: 1.5rem 1.25rem; }
.co-resumen-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.co-resumen-head h3 { margin: 0; }
.link-edit {
    color: var(--primary);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: opacity .2s ease;
}
.link-edit:hover { opacity: .75; }

.co-resumen-items {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-bottom: 1rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: .25rem;
}
.co-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: .75rem;
    align-items: center;
}
.co-item-img {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7f1e8, #ede4d3);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-item-img img { width: 75%; height: 75%; object-fit: contain; }
.co-item-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--primary);
    color: white;
    border-radius: 99px;
    padding: 0 .45rem;
    font-size: .68rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(179,38,30,.3);
    min-width: 18px;
    text-align: center;
}
.co-item-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.co-item-info strong { font-size: .88rem; line-height: 1.25; }
.co-item-info small { font-size: .75rem; }
.co-item-sub { font-weight: 600; color: var(--primary); font-size: .9rem; white-space: nowrap; }

.co-resumen-totales hr { border: none; border-top: 1px solid var(--border); margin: .85rem 0; }

.co-trust {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.co-trust-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.35;
}
.co-trust-item span {
    font-size: 1.05rem;
    flex: 0 0 22px;
    text-align: center;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: .35rem;
    font-size: .92rem;
}
.form-group input {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
    background: var(--bg);
}
.form-group input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(179,38,30,.10);
}
.form-group input::placeholder { color: #b8b1a7; }
.form-row { display: flex; gap: 1rem; }
.form-row .flex-1 { flex: 1; }
.form-row .flex-2 { flex: 2; }
.err { color: var(--danger); font-size: .8rem; margin-top: .25rem; display: block; }

.metodos-pago { display: flex; flex-direction: column; gap: .65rem; }
.metodo {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem 1rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: var(--surface);
    transition: border-color .25s var(--ease), background .25s ease,
                transform .2s var(--ease), box-shadow .25s var(--ease);
    overflow: hidden;
}
.metodo input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 50%;
    margin: 0;
    flex: 0 0 22px;
    cursor: pointer;
    position: relative;
    transition: border-color .2s ease, background .2s ease;
}
.metodo input[type="radio"]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--primary);
    transform: scale(0);
    transition: transform .25s var(--ease);
}
.metodo input[type="radio"]:checked { border-color: var(--primary); }
.metodo input[type="radio"]:checked::after { transform: scale(1); }
.metodo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 50%, rgba(179,38,30,.06), transparent 65%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.metodo:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(30,20,10,.18);
}
.metodo:has(input:checked) {
    border-color: var(--primary);
    background: #fdf2f1;
    box-shadow: 0 0 0 3px rgba(179,38,30,.08);
    animation: metodo-pick .45s var(--ease);
}
.metodo:has(input:checked)::before { opacity: 1; }
@keyframes metodo-pick {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}
.metodo small { display: block; color: var(--muted); }

/* Método de pago no disponible (regla de contra entrega) */
.metodo.is-disabled {
    opacity: .6;
    cursor: not-allowed;
    background: var(--bg);
}
.metodo.is-disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
}
.metodo.is-disabled input[type="radio"] { cursor: not-allowed; }
.metodo-bloqueo {
    color: var(--danger);
    font-weight: 600;
    margin-top: .2rem;
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}
.alert.error { background: #fdecea; color: var(--danger); }

/* Confirmación / pago */
.pago-section { display: flex; justify-content: center; }
.confirm-card {
    background: var(--surface);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 720px;
    width: 100%;
    text-align: center;
    animation: confirm-card-in .55s var(--ease) both;
}
@keyframes confirm-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.check-icon {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--success);
    color: white;
    font-size: 2.1rem;
    line-height: 72px;
    margin: 0 auto 1.25rem;
    animation: check-pop .65s cubic-bezier(.4,1.6,.5,1) .15s both;
    box-shadow: 0 10px 30px -8px rgba(46,125,50,.45);
}
@keyframes check-pop {
    0%   { opacity: 0; transform: scale(.2) rotate(-30deg); }
    60%  { opacity: 1; transform: scale(1.15) rotate(0deg); }
    100% { opacity: 1; transform: scale(1)    rotate(0deg); }
}
.check-icon::before,
.check-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--success);
    opacity: 0;
    animation: check-ripple 1.4s ease-out .5s infinite;
}
.check-icon::after { animation-delay: 1.1s; }
@keyframes check-ripple {
    0%   { transform: scale(.9); opacity: .55; }
    80%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}

.confirm-card h1 {
    font-size: 1.9rem;
    animation: confirm-fade-up .55s var(--ease) .35s both;
}
.confirm-card > p.muted { animation: confirm-fade-up .55s var(--ease) .45s both; }
@keyframes confirm-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: left;
}
.confirm-block {
    background: var(--bg);
    padding: 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s ease;
    animation: confirm-fade-up .55s var(--ease) both;
    opacity: 0;
}
.confirm-grid .confirm-block:nth-child(1) { animation-delay: .55s; }
.confirm-grid .confirm-block:nth-child(2) { animation-delay: .65s; }
.confirm-block:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 12px 24px -16px rgba(30,20,10,.2);
}
.datos-pago { margin-top: .75rem; }
.datos-pago > div {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: .9rem;
    transition: padding-left .2s var(--ease);
}
.datos-pago > div:hover { padding-left: .25rem; }
.datos-pago span { color: var(--muted); }
.datos-pago .total-pagar { font-size: 1.1rem; padding-top: .75rem; border-bottom: none; }

.detalle-pedido {
    text-align: left;
    margin-top: 2rem;
    animation: confirm-fade-up .55s var(--ease) .8s both;
}
.detalle-pedido .resumen-item {
    opacity: 0;
    animation: confirm-fade-up .45s var(--ease) both;
}
.detalle-pedido .resumen-item:nth-child(2) { animation-delay: .9s; }
.detalle-pedido .resumen-item:nth-child(3) { animation-delay: .98s; }
.detalle-pedido .resumen-item:nth-child(4) { animation-delay: 1.06s; }
.detalle-pedido .resumen-item:nth-child(n+5) { animation-delay: 1.14s; }

.confirm-actions {
    margin-top: 2rem;
    animation: confirm-fade-up .55s var(--ease) 1s both;
}
.confirm-actions .btn { padding: .9rem 2rem; }

/* Footer */
.footer {
    position: relative;
    background:
        radial-gradient(circle at 80% 0%, rgba(212,163,115,.10), transparent 55%),
        linear-gradient(180deg, #1f1d1b, #161412);
    color: #c8c2b8;
    padding: 3rem 1.5rem 1.75rem;
    margin-top: 4rem;
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-50%);
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1.3fr 1fr;
    gap: 2.5rem;
}
.footer-col--brand { max-width: 320px; }
.footer-brand {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: .03em;
    margin: 0 0 .6rem;
}
.footer-brand span { color: var(--accent); margin: 0 .25rem; }
.footer-tagline {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.6;
    color: #9c968c;
}
.footer-social {
    display: flex;
    gap: .6rem;
}
.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #c8c2b8;
    transition: background .2s ease, color .2s ease, transform .15s var(--ease), border-color .2s ease;
}
.footer-social a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #1f1d1b;
    transform: translateY(-2px);
}
.footer-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    color: #fff;
    margin: 0 0 1rem;
}
/* Lista de contactos del footer */
.footer-contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.footer-contacts a {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #c8c2b8;
    transition: color .2s ease;
}
.footer-contacts a:hover { color: #fff; }
.footer-contact-ico {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,163,115,.12);
    border: 1px solid rgba(212,163,115,.25);
    color: var(--accent);
    transition: background .2s ease, color .2s ease;
}
.footer-contacts a:hover .footer-contact-ico {
    background: var(--accent);
    color: #1f1d1b;
}
.footer-contacts small {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #908a82;
}
.footer-contacts strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
}
/* Links rápidos del footer */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.footer-links a {
    color: #c8c2b8;
    font-size: .9rem;
    transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover {
    color: var(--accent);
    padding-left: .25rem;
}
/* Barra inferior */
.footer-bottom {
    max-width: 1200px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1rem;
}
.footer-bottom p { margin: 0; font-size: .85rem; }
.footer-bottom p.muted { color: #908a82; }

/* Responsive */
@media (max-width: 900px) {
    .producto-detalle, .carrito-layout, .checkout-layout, .confirm-grid {
        grid-template-columns: 1fr;
    }
    .producto-detalle { gap: 1.75rem; }
    /* En móvil la card queda full-width sobre el contenido. La sombra grande
       de 40px blur del desktop se prolonga hacia el bloque de info y se ve mal,
       así que la quitamos y dejamos solo un borde suave. La sombra del frasco
       (drop-shadow sobre el img) sigue viva dentro de la card.

       IMPORTANTE: hay que mantener position: relative (no static) para que el
       card siga siendo containing block de sus ::before/::after absolutos.
       Si pasa a static, esos pseudo-elementos (uno con `inset: -30%` y otro
       con halo radial tintado vía --card-tint) escapan del `overflow: hidden`
       y se vuelven enormes rectángulos amarillos en la pantalla.

       También hay que neutralizar `top: 90px` de la regla base (que era para
       el sticky de desktop). Con position: relative, top: 90px empuja la card
       90px hacia abajo y la hace traslapar con el bloque de info. */
    .producto-img {
        position: relative;
        top: auto;
        aspect-ratio: 4/3;
        box-shadow: 0 1px 2px rgba(30, 20, 10, 0.05);
    }
    .producto-img img { width: 60%; height: 80%; }
    /* En móvil la card es más compacta (aspect 4/3) y el badge "Decants
       disponibles" colisiona con el frasco. La info de decants ya está visible
       en el tab de la derecha del bloque de presentaciones, así que no la
       necesitamos duplicada aquí. */
    .producto-img-badge { display: none; }
    .producto-info > h1 { font-size: 1.7rem; }
    .pd-trust { grid-template-columns: repeat(3, 1fr); }
    .carrito-resumen { position: static; }
    .checkout-layout { gap: 1.25rem; }
    .co-resumen-items { max-height: none; }
    .hero { padding: 2.5rem 1.5rem; }
    .hero h1 { font-size: 2rem; }
    .container { padding: 1.5rem 1.25rem 3rem; }
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 1rem;
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
}

/* Navbar mobile: dropdown compacto con apertura y cierre animados */
@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; order: 3; }
    .nav-actions { order: 2; }
    .logo { order: 1; flex: 1; min-width: 0; }
    .nav-inner { gap: .65rem; }

    .nav-links {
        position: fixed;
        top: calc(var(--navbar-h, 64px) + .5rem);
        right: 1rem;
        width: min(82vw, 260px);
        background: rgba(255,255,255,.96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding: .5rem;
        z-index: 60;

        /* ── Estado cerrado: encogido desde la esquina superior derecha ── */
        opacity: 0;
        transform: translateY(-14px) scale(.86);
        transform-origin: top right;
        pointer-events: none;
        /* Cierre: rápido y limpio (sin overshoot) */
        transition:
            opacity .18s cubic-bezier(.4, 0, .8, .5),
            transform .22s cubic-bezier(.4, 0, .8, .5);

        border: 1px solid color-mix(in srgb, var(--text) 6%, var(--border));
        border-radius: 16px;
        box-shadow:
            0 22px 44px -16px rgba(30,20,10,.32),
            0 6px 14px -4px rgba(30,20,10,.12),
            0 0 0 1px rgba(255,255,255,.4) inset;
        max-height: calc(100vh - var(--navbar-h, 64px) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* ── Apertura: rebote suave (overshoot) ── */
    body.nav-open .nav-links,
    .nav-open .nav-links {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        transition:
            opacity .2s cubic-bezier(.2, .9, .35, 1),
            transform .42s cubic-bezier(.34, 1.56, .56, 1); /* overshoot back-out */
    }

    /* Flecha que apunta al hamburguesa */
    .nav-links::before {
        content: '';
        position: absolute;
        top: -7px;
        right: 25px;
        width: 14px;
        height: 14px;
        background: inherit;
        border-top: 1px solid color-mix(in srgb, var(--text) 6%, var(--border));
        border-left: 1px solid color-mix(in srgb, var(--text) 6%, var(--border));
        transform: rotate(45deg);
        border-top-left-radius: 3px;
    }

    /* Drawer-head ya no es necesario en el dropdown compacto */
    .nav-drawer-head { display: none; }

    /* Items del menú */
    .nav-links a {
        position: relative;
        padding: .7rem .85rem .7rem 1rem;
        font-size: .95rem;
        font-weight: 500;
        color: var(--text);
        border-radius: 10px;
        gap: .5rem;
        justify-content: space-between;
        transition:
            background .2s ease,
            color .2s ease,
            padding-left .2s var(--ease),
            transform .25s cubic-bezier(.34, 1.4, .64, 1) var(--item-delay, 0s),
            opacity .25s ease-out var(--item-delay, 0s);

        /* Estado cerrado de cada item */
        opacity: 0;
        transform: translateX(10px);
    }
    /* Indicador lateral acento para link activo */
    .nav-links a::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 50%;
        width: 3px;
        height: 0;
        background: var(--primary);
        border-radius: 2px;
        transform: translateY(-50%);
        transition: height .3s var(--ease);
        pointer-events: none;
    }

    /* Stagger en la apertura (usando transition-delay por nth-child) */
    .nav-open .nav-links a {
        opacity: 1;
        transform: translateX(0);
    }
    .nav-open .nav-links a:nth-child(1) { --item-delay: .06s; }
    .nav-open .nav-links a:nth-child(2) { --item-delay: .10s; }
    .nav-open .nav-links a:nth-child(3) { --item-delay: .14s; }
    .nav-open .nav-links a:nth-child(4) { --item-delay: .18s; }
    .nav-open .nav-links a:nth-child(5) { --item-delay: .22s; }
    .nav-open .nav-links a:nth-child(6) { --item-delay: .26s; }

    /* Hover y activo */
    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: color-mix(in srgb, var(--primary) 5%, var(--bg));
        padding-left: 1.2rem;
    }
    .nav-links a.active {
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 9%, transparent);
        font-weight: 600;
    }
    .nav-links a.active::before { height: 60%; }

    /* Quita el underline del estilo desktop */
    .nav-links a::after { display: none; }
    .nav-pill { margin-left: auto; }
}

/* Backdrop animado con transición (en lugar de hidden attr) */
.nav-backdrop {
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .22s ease-out,
        backdrop-filter .25s ease;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}
.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 720px) {
    .nav-inner {
        padding: .7rem 1rem;
        gap: .5rem;
    }
    .logo { font-size: 1.15rem; }
    .logo-mark { width: 32px; height: 32px; }
    .logo-mark svg { width: 18px; height: 18px; }
    .cart-btn { padding: .45rem .85rem .45rem .65rem; font-size: .85rem; }
    .hero { padding: 2rem 1.25rem; border-radius: 14px; }
    .hero h1 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }
    .hero-actions .btn { flex: 1 1 auto; }
    .hero::before, .hero::after { width: 200px; height: 200px; filter: blur(50px); }
    .grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: .85rem;
    }
    .card-body { padding: .75rem .85rem 1rem; }
    .card-body h3 { font-size: .95rem; }
    .opciones { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
    .acciones { gap: .75rem; }
    .acciones .btn { flex: 1 1 auto; }
    .footer { padding: 2.25rem 1.25rem 1.5rem; margin-top: 3rem; }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    .footer-col--brand { max-width: none; }
    .footer-brand { font-size: 1.25rem; }
    .footer-bottom {
        margin-top: 1.75rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .empty-state { padding: 2.5rem 1.25rem; }
    .empty-state::before { font-size: 2.75rem; }
}

@media (max-width: 600px) {
    .container { padding: 1.25rem 1rem 2.5rem; }
    .hero h1 { font-size: 1.6rem; }
    .hero { padding: 1.85rem 1.1rem; margin-bottom: 2rem; animation: none; }
    .hero::before { width: 160px; height: 160px; top: -60px; right: -60px; }
    .hero::after { width: 160px; height: 160px; bottom: -80px; left: -50px; }
    .hero-art img { animation: hero-art-in 1s var(--ease) .35s both; }
    .scroll-progress { height: 2px; }
    .section-head h2::after { animation-delay: .15s; }
    .grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .carrito-item {
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "img info"
            "qty subtotal";
        gap: .85rem .75rem;
        padding: .85rem;
    }
    .carrito-item .ci-img    { grid-area: img; width: 64px; height: 64px; }
    .carrito-item .ci-info   { grid-area: info; min-width: 0; }
    .carrito-item .ci-qty    { grid-area: qty; flex-direction: row; align-items: center; gap: .75rem; justify-content: flex-start; }
    .carrito-item .ci-subtotal { grid-area: subtotal; text-align: right; align-self: center; }
    .ci-info h3 { font-size: .95rem; line-height: 1.25; word-break: break-word; }
    .qty-control { transform: scale(.95); transform-origin: left center; }
    .carrito-resumen { padding: 1.25rem; }
    .encargo-form { grid-template-columns: 1fr; }
    .encargo-box { padding: 1.1rem; }
    .encargo-head { gap: .65rem; }
    .encargo-ico { width: 38px; height: 38px; flex-basis: 38px; }
    .producto-detalle { gap: 1.5rem; }
    .producto-img { aspect-ratio: 4 / 3; border-radius: 14px; }
    .producto-img img { width: 60%; height: 80%; }
    .producto-img-badge { font-size: .72rem; padding: .25rem .6rem; }
    .pd-breadcrumb { font-size: .75rem; }
    .producto-info > h1 { font-size: 1.45rem; }
    .descripcion { font-size: .92rem; margin-bottom: 1.25rem; }
    .pd-tab { padding: .55rem .65rem; font-size: .85rem; }
    .pd-tab svg { width: 14px; height: 14px; }
    .opciones { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .4rem; }
    .opcion { min-height: 80px; padding: .65rem .35rem; }
    .opcion-ml { font-size: 1.2rem; }
    .pd-buy { padding: .95rem 1rem; gap: .7rem; }
    .pd-row-total .pd-total { font-size: 1.45rem; }
    .pd-add-btn { padding: .85rem 1.25rem; }
    .pd-trust { grid-template-columns: 1fr 1fr 1fr; padding: .85rem .5rem; }
    .pd-trust li { padding: .25rem .1rem; }
    .pd-trust strong { font-size: .75rem; }
    .pd-trust small { font-size: .65rem; }
    .pd-trust-ico { width: 28px; height: 28px; }
    .pd-trust-ico svg { width: 14px; height: 14px; }
    .form-group input, .form-group select { font-size: 16px; } /* evita zoom iOS */
    .form-row { flex-direction: column; gap: 0; }
    .metodo { padding: .85rem .9rem; gap: .65rem; }
    .metodo input[type="radio"] { width: 20px; height: 20px; flex-basis: 20px; }
    .metodo strong { font-size: .95rem; }
    .metodo small { font-size: .8rem; }

    /* Checkout móvil */
    .checkout-stepper { gap: .35rem; padding-bottom: .25rem; margin-bottom: 1.25rem; }
    .checkout-stepper .step { gap: .5rem; padding: .25rem .15rem; }
    .step-circle { width: 28px; height: 28px; flex-basis: 28px; font-size: .8rem; }
    .checkout-stepper .step-label small { font-size: .62rem; }
    .checkout-stepper .step-label strong { font-size: .82rem; }
    .step-bar { min-width: 16px; height: 2px; }

    .co-head { padding: .85rem 1.1rem; gap: .65rem; }
    .co-body { padding: 1rem 1.1rem 1.1rem; }
    .co-ico { width: 36px; height: 36px; flex-basis: 36px; font-size: 1.2rem; }
    .co-head h3 { font-size: .98rem; }
    .co-head p { font-size: .78rem; }
    .co-submit-bar { padding: .85rem 1rem; flex-direction: column-reverse; align-items: stretch; gap: .65rem; }
    .co-submit-bar .back-link { text-align: center; }
    #checkout-submit { width: 100%; justify-content: center; }
    .metodo-ico { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.25rem; }
    .input-prefix { font-size: .85rem; padding: 0 .65rem; }
    .confirm-card { padding: 1.5rem 1.1rem; border-radius: 14px; }
    .confirm-card h1 { font-size: 1.4rem; }
    .check-icon { width: 60px; height: 60px; line-height: 60px; font-size: 1.7rem; margin-bottom: 1rem; }
    .confirm-block { padding: 1rem; }
    .confirm-block h3 { font-size: 1rem; }
    .datos-pago > div { font-size: .85rem; }
    .confirm-actions .btn { width: 100%; }
    .btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
    .carousel-head h3 { font-size: 1.2rem; }
    .carousel-card { flex-basis: 78%; }
    .toast-host { left: .75rem; right: .75rem; top: .75rem; gap: .4rem; }
    .toast { min-width: 0; max-width: none; padding: .7rem .9rem; font-size: .88rem; }
    .toast-icon { width: 22px; height: 22px; flex: 0 0 22px; font-size: .75rem; }
}

@media (max-width: 600px) {
    /* En phones pequeños el botón Carrito sólo muestra icono */
    .cart-btn-text { display: none; }
    .cart-btn {
        padding: .55rem;
        width: 42px;
        height: 42px;
        justify-content: center;
    }
    .cart-badge {
        top: -2px;
        right: -2px;
        min-width: 18px;
        height: 18px;
        font-size: .65rem;
        line-height: 14px;
    }
}

@media (max-width: 400px) {
    .grid { grid-template-columns: 1fr; }
    .carrito-item { grid-template-columns: 56px 1fr; }
    .carrito-item .ci-img { width: 56px; height: 56px; }
    .check-icon { width: 56px; height: 56px; line-height: 56px; font-size: 1.5rem; }
    .confirm-card { padding: 1.25rem 1rem; }
}

/* =========================================================
   Seguimiento de pedido
   ========================================================= */
.seguimiento-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.75rem;
    align-items: start;
}

.seguimiento-form {
    background: var(--surface);
    padding: 1.75rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: sticky;
    top: 90px;
}
.seguimiento-form h3 { margin-bottom: 1.25rem; }
.seguimiento-form .form-group { margin-bottom: 1rem; }
.seguimiento-form label {
    display: block;
    font-weight: 500;
    margin-bottom: .35rem;
    font-size: .92rem;
}
.seguimiento-form input {
    width: 100%;
    padding: .7rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg);
    transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.seguimiento-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(179,38,30,.10);
}
.seguimiento-form input::placeholder { color: #b8b1a7; }
.seguimiento-form input#tel::placeholder { letter-spacing: .35em; }

.seguimiento-hint {
    background: var(--surface);
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    animation: container-in .55s var(--ease) both;
}
.seguimiento-hint-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
    animation: empty-float 3.5s ease-in-out infinite alternate;
}
.seguimiento-hint h3 { margin-bottom: .5rem; }
.seguimiento-hint p { max-width: 480px; margin: 0 auto; }

.seguimiento-detalle {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    animation: container-in .55s var(--ease) both;
}
.sd-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.sd-head .muted { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.sd-head h3 {
    font-size: 1.75rem;
    margin: .15rem 0;
    letter-spacing: -.01em;
}
.estado-actual {
    padding: .35rem .85rem;
    font-size: .85rem;
    letter-spacing: .02em;
    animation: estado-glow 2.4s ease-in-out infinite;
}
@keyframes estado-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    50%      { box-shadow: 0 0 0 6px rgba(179,38,30,.08); }
}
.estado-pendiente  { background: #fff4e0; color: #c47200; }
.estado-preparando { background: #e3f2fd; color: #1565c0; }
.estado-enviado    { background: #ede7f6; color: #6a1b9a; }
.estado-entregado  { background: #e8f5e9; color: var(--success); }

/* Timeline */
.timeline {
    position: relative;
    margin: 0 0 2.25rem;
    padding: .5rem 0 0;
}
.timeline-track {
    position: relative;
    height: 4px;
    background: var(--border);
    border-radius: 99px;
    margin: 0 28px 1.5rem;
}
.timeline-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    animation: timeline-fill 1.2s var(--ease) .35s forwards;
}
@keyframes timeline-fill {
    to { width: var(--progreso, 0%); }
}
.timeline-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.timeline-step {
    position: relative;
    text-align: center;
    opacity: 0;
    animation: step-in .5s var(--ease) var(--delay, .2s) forwards;
}
@keyframes step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.step-dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    border: 2px solid var(--border);
    margin-top: -42px;
    margin-bottom: .65rem;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease);
    z-index: 1;
}
.step-num { font-weight: 700; font-size: .9rem; }
.timeline-step.done .step-dot {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    animation: dot-pop .45s var(--ease) var(--delay, .2s) both;
}
.timeline-step.current .step-dot {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
    animation: dot-pulse 2s ease-in-out infinite, dot-pop .45s var(--ease) var(--delay, .2s) both;
}
@keyframes dot-pop {
    0%   { transform: scale(.3); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179,38,30,.35); }
    50%      { box-shadow: 0 0 0 10px rgba(179,38,30,0); }
}
.step-label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    color: var(--text);
}
.timeline-step:not(.done):not(.current) .step-label { color: var(--muted); }
.step-desc {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4;
    margin-top: .15rem;
    max-width: 16ch;
    margin-left: auto;
    margin-right: auto;
}

/* Detalle de envío y pago */
.sd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sd-block {
    background: var(--bg);
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sd-block:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -16px rgba(30,20,10,.2);
}
.sd-block h4 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    margin: 0 0 .5rem;
}
.sd-block p { margin: 0; line-height: 1.55; }

.sd-items { margin-top: 1.25rem; }
.sd-items h4 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    margin: 0 0 .85rem;
}
.sd-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .75rem;
    border-radius: var(--radius);
    transition: background .25s ease;
}
.sd-item:hover { background: var(--bg); }
.sd-item + .sd-item { border-top: 1px dashed var(--border); }
.sd-item-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f7f1e8, #ede4d3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.sd-item-img img { width: 70%; height: 70%; object-fit: contain; }
.sd-item-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sd-item-info strong { font-size: 1rem; line-height: 1.25; }
.sd-item-info .brand { font-size: .72rem; }
.sd-item-sub { font-weight: 600; color: var(--primary); }

/* Tracking hint en pago.php */
.tracking-hint {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: linear-gradient(135deg, #fdf6ed, #faf8f5);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-top: 1.75rem;
    animation: confirm-fade-up .55s var(--ease) 1.1s both;
}
.tracking-hint-icon {
    font-size: 1.75rem;
    flex: 0 0 auto;
    animation: empty-float 3.5s ease-in-out infinite alternate;
}
.tracking-hint strong { display: block; margin-bottom: .15rem; }
.tracking-hint p { margin: 0; font-size: .9rem; }

/* Responsive seguimiento */
@keyframes connector-fill-v {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@media (max-width: 900px) {
    .seguimiento-layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .seguimiento-form { position: static; }
}

@media (max-width: 720px) {
    .seguimiento-detalle { padding: 1.5rem 1.25rem; }
    .seguimiento-form { padding: 1.5rem 1.25rem; }
    .seguimiento-form input { font-size: 16px; } /* evita zoom iOS */
    .sd-grid { grid-template-columns: 1fr; gap: .75rem; }

    /* Timeline pasa a layout vertical */
    .timeline { padding: 0; }
    .timeline-track { display: none; } /* la usamos solo en desktop */

    .timeline-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 0;
        padding: 0;
    }
    .timeline-step {
        position: relative;
        text-align: left;
        display: grid;
        grid-template-columns: 42px 1fr;
        grid-template-rows: auto auto;
        column-gap: .9rem;
        row-gap: .15rem;
        align-items: start;
    }
    /* Conector vertical: línea desde el dot hacia el siguiente paso */
    .timeline-step::before {
        content: '';
        position: absolute;
        left: 19px;
        top: 42px;
        bottom: -1.5rem;
        width: 4px;
        background: var(--border);
        border-radius: 99px;
        transform-origin: top center;
        transition: background .4s ease;
        z-index: 0;
    }
    .timeline-step:last-child::before { display: none; }
    .timeline-step.done::before {
        background: linear-gradient(180deg, var(--primary), var(--accent));
        animation: connector-fill-v .55s var(--ease) var(--delay, .2s) both;
    }
    .timeline-step.current::before {
        background: linear-gradient(180deg, var(--primary) 0%, var(--border) 70%);
        animation: connector-fill-v .55s var(--ease) var(--delay, .2s) both;
    }

    .timeline-step .step-dot {
        grid-row: 1 / span 2;
        grid-column: 1;
        margin: 0;
        align-self: start;
        position: relative;
        z-index: 1;
    }
    .step-label {
        grid-column: 2;
        grid-row: 1;
        padding-top: 11px;
        font-size: 1rem;
        line-height: 1.2;
    }
    .step-desc {
        grid-column: 2;
        grid-row: 2;
        max-width: none;
        margin: 0;
        line-height: 1.45;
    }

    .sd-head { padding-bottom: 1rem; margin-bottom: 1.25rem; }
    .sd-head h3 { font-size: 1.4rem; }
    .estado-actual { align-self: flex-start; }
    .sd-item { grid-template-columns: 48px 1fr auto; padding: .55rem; gap: .75rem; }
    .sd-item-img { width: 48px; height: 48px; }
    .sd-item-info strong { font-size: .95rem; }
    .tracking-hint { flex-direction: column; align-items: flex-start; text-align: left; gap: .65rem; }
}

@media (max-width: 480px) {
    .seguimiento-detalle { padding: 1.25rem 1rem; }
    .seguimiento-form { padding: 1.25rem 1rem; }
    .seguimiento-hint { padding: 2rem 1.25rem; }
    .seguimiento-hint-icon { font-size: 2.5rem; }

    .sd-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .sd-head h3 { font-size: 1.25rem; }

    /* Timeline aún más compacta */
    .timeline-steps { gap: 1.25rem; }
    .timeline-step { grid-template-columns: 38px 1fr; column-gap: .75rem; }
    .timeline-step .step-dot { width: 38px; height: 38px; }
    .timeline-step::before {
        left: 17px;
        top: 38px;
        bottom: -1.25rem;
    }
    .step-label { font-size: .95rem; padding-top: 10px; }
    .step-desc { font-size: .78rem; }

    .sd-item { grid-template-columns: 44px 1fr auto; gap: .55rem; }
    .sd-item-img { width: 44px; height: 44px; }
    .sd-item-info small { font-size: .78rem; }
    .sd-item-sub { font-size: .92rem; }
}

/* =========================================================
   Home — trust strip, full-bleed CTA, ribbon-hot, carousel-link
   ========================================================= */

/* Truco full-bleed: rompe el max-width del .container */
.full-bleed {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Trust strip — 4 features arriba */
.trust-strip {
    --ts-bg-1: #1f1410;
    --ts-bg-2: #0c1422;

    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
    padding: 1.5rem 1.25rem;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    color: white;
    background:
        radial-gradient(circle at 15% 0%,
            color-mix(in srgb, var(--cat-hombre-glow) 22%, transparent), transparent 55%),
        radial-gradient(circle at 50% 110%,
            color-mix(in srgb, var(--cat-decants-glow) 18%, transparent), transparent 55%),
        radial-gradient(circle at 85% 0%,
            color-mix(in srgb, var(--cat-mujer-glow) 22%, transparent), transparent 55%),
        linear-gradient(160deg, var(--ts-bg-1) 0%, var(--ts-bg-2) 100%);
    box-shadow:
        0 18px 36px -20px rgba(30, 20, 10, .55),
        0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.trust-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.trust-item {
    --ts-glow: var(--accent);

    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .5rem .75rem;
    transition: transform .25s var(--ease);
}
.trust-item:nth-child(1) { --ts-glow: var(--cat-hombre-glow); }
.trust-item:nth-child(2) { --ts-glow: var(--cat-decants-glow); }
.trust-item:nth-child(3) { --ts-glow: var(--cat-mujer-glow); }
.trust-item:nth-child(4) { --ts-glow: var(--accent); }

.trust-item:hover { transform: translateY(-2px); }
.trust-item + .trust-item {
    border-left: 1px solid color-mix(in srgb, white 12%, transparent);
    padding-left: 1.1rem;
}
.trust-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ts-glow) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ts-glow) 45%, transparent);
    border-radius: 12px;
    color: var(--ts-glow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 18px -6px color-mix(in srgb, var(--ts-glow) 60%, transparent);
    transition: transform .35s var(--ease), background .35s ease, color .25s ease, box-shadow .35s ease;
}
.trust-item:hover .trust-ico {
    transform: rotate(-8deg) scale(1.06);
    background: var(--ts-glow);
    color: var(--ts-bg-2, #0c1422);
    box-shadow: 0 0 24px -4px color-mix(in srgb, var(--ts-glow) 75%, transparent);
}

.cta-decants-list svg { color: var(--cta-accent); }
.trust-item strong {
    display: block;
    font-size: .95rem;
    line-height: 1.2;
    color: white;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.trust-item small {
    display: block;
    font-size: .78rem;
    color: rgba(255,255,255,.72);
    margin-top: .15rem;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Ribbon "Top venta" — overrides al ribbon estándar */
.ribbon-hot {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 6px 14px -4px rgba(179,38,30,.45);
    animation: ribbon-pulse 2.4s ease-in-out infinite;
}
@keyframes ribbon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* Link "Ver todos →" en cabecera de carrusel */
.carousel-head { align-items: center; }
.carousel-head div { display: flex; flex-direction: column; gap: .2rem; }
.carousel-head p { margin: 0; font-size: .82rem; }
.carousel-link {
    color: var(--primary);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .35rem .65rem;
    border-radius: 99px;
    transition: background .2s ease, transform .25s var(--ease);
    white-space: nowrap;
}
.carousel-link:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    transform: translateX(2px);
}

/* =========================================================
   Explora por categoría — 3 tarjetas con preview de productos
   ========================================================= */
.cat-explore {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.cat-explore-card {
    --card-bg-1: #1f1410;
    --card-bg-2: #0c1422;
    --card-glow: var(--accent);
    position: relative;
    aspect-ratio: 4 / 5.4;
    border-radius: 20px;
    overflow: hidden;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    color: white;
    text-decoration: none;
    isolation: isolate;
    box-shadow:
        0 18px 36px -20px color-mix(in srgb, var(--card-glow) 50%, rgba(30,20,10,.45)),
        0 0 0 1px color-mix(in srgb, var(--card-glow) 18%, transparent);
    transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease);
}
.cat-explore-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.75rem;
    right: 1.75rem;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--card-glow) 80%, transparent),
        transparent);
    z-index: 2;
    opacity: .7;
    transition: opacity .35s ease, transform .45s var(--ease);
}
.cat-explore-card:hover::before {
    opacity: 1;
    transform: scaleX(1.08);
}
.cat-explore-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 32px 60px -20px color-mix(in srgb, var(--card-glow) 60%, rgba(30,20,10,.55)),
        0 0 0 1px color-mix(in srgb, var(--card-glow) 45%, transparent);
}

/* Paletas por categoría (referencian variables globales — ver :root) */
.cat-explore-hombre  { --card-bg-1: var(--cat-hombre-bg-1);  --card-bg-2: var(--cat-hombre-bg-2);  --card-glow: var(--cat-hombre-glow); }
.cat-explore-mujer   { --card-bg-1: var(--cat-mujer-bg-1);   --card-bg-2: var(--cat-mujer-bg-2);   --card-glow: var(--cat-mujer-glow); }
.cat-explore-decants { --card-bg-1: var(--cat-decants-bg-1); --card-bg-2: var(--cat-decants-bg-2); --card-glow: var(--cat-decants-glow); }

/* Background con gradientes radiales + linear */
.cat-explore-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--card-glow) 35%, transparent), transparent 55%),
        radial-gradient(circle at 20% 100%, color-mix(in srgb, var(--card-glow) 18%, transparent), transparent 55%),
        linear-gradient(160deg, var(--card-bg-1) 0%, var(--card-bg-2) 100%);
    transition: transform .65s var(--ease);
}
.cat-explore-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.cat-explore-card:hover .cat-explore-bg { transform: scale(1.06); }

/* Stack de productos */
.cat-explore-stack {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem auto 1.25rem;
    width: 100%;
    height: 60%;
    z-index: 0;
}
.cat-explore-thumb {
    position: absolute;
    width: 38%;
    aspect-ratio: 3 / 4;
    --card-tint: #efe2c8;
    background:
        radial-gradient(ellipse at 50% 35%,
            color-mix(in srgb, var(--card-tint) 10%, #ffffff) 0%,
            color-mix(in srgb, var(--card-tint) 28%, #f6efe2) 60%,
            color-mix(in srgb, var(--card-tint) 50%, #e6d8c0) 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 16px 32px -10px color-mix(in srgb, var(--card-glow) 45%, rgba(0,0,0,.55)),
        0 0 0 1px rgba(255,255,255,.22) inset;
    transition:
        transform .55s cubic-bezier(.34, 1.4, .64, 1),
        --card-tint .8s ease,
        box-shadow .45s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.cat-explore-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .6rem;
    transition: transform .45s var(--ease), filter .35s ease;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, .25))
        drop-shadow(0 10px 18px rgba(0, 0, 0, .25));
}
/* 3 cartas apiladas en V con la del medio adelante */
.cat-explore-thumb.thumb-1 { transform: translateX(-34%) translateY(8px) rotate(-9deg); z-index: 1; }
.cat-explore-thumb.thumb-2 { transform: translateX(0)    translateY(-6px) rotate(0deg);  z-index: 3; }
.cat-explore-thumb.thumb-3 { transform: translateX(34%)  translateY(8px) rotate(9deg);  z-index: 2; }
/* Si solo hay 1 ó 2 productos */
.cat-explore-stack .cat-explore-thumb:only-child { transform: translateY(-6px); }

.cat-explore-card:hover .cat-explore-thumb.thumb-1 { transform: translateX(-52%) translateY(-2px) rotate(-14deg); }
.cat-explore-card:hover .cat-explore-thumb.thumb-2 { transform: translateX(0)    translateY(-16px) rotate(0deg); }
.cat-explore-card:hover .cat-explore-thumb.thumb-3 { transform: translateX(52%)  translateY(-2px) rotate(14deg); }

/* Cuerpo de texto */
.cat-explore-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.cat-explore-body > div:first-child {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.cat-explore-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: fit-content;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    padding: .3rem .75rem;
    background: color-mix(in srgb, var(--card-glow) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--card-glow) 55%, transparent);
    border-radius: 99px;
    font-weight: 700;
    color: var(--card-glow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.cat-explore-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--card-glow);
    box-shadow: 0 0 8px color-mix(in srgb, var(--card-glow) 80%, transparent);
}
.cat-explore-body h3 {
    color: white;
    font-size: 1.55rem;
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
    position: relative;
    padding-bottom: .55rem;
}
.cat-explore-body h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--card-glow);
    border-radius: 2px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--card-glow) 70%, transparent);
    transition: width .4s var(--ease);
}
.cat-explore-card:hover .cat-explore-body h3::after {
    width: 64px;
}
.cat-explore-body p {
    color: rgba(255,255,255,.82);
    font-size: .92rem;
    margin: 0;
    line-height: 1.4;
    max-width: 28ch;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.cat-explore-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .55rem;
}
.cat-explore-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--card-bg-1);
    padding: .55rem 1rem;
    background: white;
    border-radius: 99px;
    width: fit-content;
    transition:
        gap .25s var(--ease),
        background .25s ease,
        transform .25s var(--ease),
        box-shadow .25s ease;
    box-shadow: 0 6px 14px -4px rgba(0,0,0,.3);
}
.cat-explore-cta svg { transition: transform .3s var(--ease); }
.cat-explore-card:hover .cat-explore-cta {
    gap: .65rem;
    background: var(--card-glow);
    box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--card-glow) 55%, transparent);
}
.cat-explore-card:hover .cat-explore-cta svg { transform: translateX(4px); }

.cat-explore-count {
    font-size: .72rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--card-glow) 70%, white);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .55rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--card-glow) 10%, rgba(0,0,0,.18));
    border: 1px solid color-mix(in srgb, var(--card-glow) 25%, transparent);
}

/* Responsive */
@media (max-width: 900px) {
    .cat-explore { grid-template-columns: 1fr; gap: 1rem; }
    .cat-explore-card { aspect-ratio: 16 / 10; padding: 1.5rem 1.75rem; }
    .cat-explore-stack { height: auto; flex: 0 0 auto; min-height: 130px; margin: .25rem auto .85rem; }
    .cat-explore-thumb { width: 28%; }
    .cat-explore-body h3 { font-size: 1.35rem; }
}
@media (max-width: 600px) {
    .cat-explore-card {
        aspect-ratio: auto;
        padding: 1.25rem 1.25rem 1.4rem;
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 1rem;
        align-items: center;
    }
    .cat-explore-stack {
        width: 130px;
        height: 150px;
        min-height: 0;
        margin: 0;
    }
    .cat-explore-thumb { width: 70%; }
    .cat-explore-thumb.thumb-1 { transform: translateX(-22%) translateY(8px) rotate(-10deg); }
    .cat-explore-thumb.thumb-2 { transform: translateX(0)    translateY(-4px); }
    .cat-explore-thumb.thumb-3 { transform: translateX(22%)  translateY(8px) rotate(10deg); }
    .cat-explore-body { gap: .35rem; }
    .cat-explore-body h3 { font-size: 1.15rem; }
    .cat-explore-body p { font-size: .82rem; max-width: 100%; }
    .cat-explore-eyebrow { font-size: .58rem; padding: .25rem .55rem; }
    .cat-explore-foot { margin-top: .15rem; }
    .cat-explore-cta { padding: .45rem .85rem; font-size: .85rem; }
}

/* =========================================================
   CTA Decants — sección contenida dentro del .container
   Sin full-bleed: evita el bug de posicionamiento.
   ========================================================= */
.cta-decants {
    --cta-start: #1f1410;
    --cta-end: #3a1f1a;
    --cta-accent: #d4a373;
    background:
        radial-gradient(circle at 12% 85%, color-mix(in srgb, var(--cta-accent) 28%, transparent), transparent 55%),
        radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 55%),
        linear-gradient(135deg, var(--cta-start), var(--cta-end));
    background-size: 200% 200%;
    animation: hero-gradient 22s ease-in-out infinite alternate;
    color: white;
    padding: 3.25rem 2.5rem;
    margin: 3rem 0;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 50px -30px rgba(31,20,16,.5);
}
.cta-decants::before {
    content: '';
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cta-accent) 22%, transparent);
    filter: blur(90px);
    top: -160px;
    left: -120px;
    pointer-events: none;
    animation: hero-orb 18s ease-in-out infinite alternate;
}
.cta-decants::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: .35;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Grid interno: texto a la izquierda, frasco a la derecha */
.cta-decants-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: center;
}
.cta-decants-inner {
    max-width: 560px;
    min-width: 0;
}

/* Eyebrow con punto pulsante */
.cta-decants-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cta-accent);
    padding: .4rem .9rem;
    border: 1px solid color-mix(in srgb, var(--cta-accent) 55%, transparent);
    background: rgba(255,255,255,.04);
    border-radius: 99px;
    margin-bottom: 1.1rem;
    font-weight: 600;
}
.eb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cta-accent);
    box-shadow: 0 0 0 0 var(--cta-accent);
    animation: eb-pulse 2s ease-out infinite;
}
@keyframes eb-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta-accent) 70%, transparent); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.cta-decants h2 {
    color: white;
    font-size: 2.6rem;
    line-height: 1.04;
    margin: 0 0 .9rem;
    letter-spacing: -.02em;
}
.cta-decants p {
    font-size: 1.05rem;
    opacity: .92;
    margin: 0 0 1.5rem;
    max-width: 540px;
    line-height: 1.55;
}
.cta-decants p strong { color: var(--cta-accent); font-weight: 600; }

/* Steps list */
.cta-decants-steps {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: .9rem;
}
.cta-decants-steps li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: rgba(255,255,255,.85);
    position: relative;
}
.cta-decants-steps li + li::before {
    content: '';
    position: absolute;
    left: -.75rem;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cta-accent) 50%, transparent);
    transform: translateY(-50%);
}
.cta-decants-steps strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cta-accent) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--cta-accent) 50%, transparent);
    color: var(--cta-accent);
    font-size: .82rem;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    flex: 0 0 26px;
}

.cta-decants-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}
.cta-decants-actions .btn-accent {
    color: #2a1f12;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.cta-decants-actions .btn-accent svg { transition: transform .25s var(--ease); }
.cta-decants-actions .btn-accent:hover svg { transform: translateX(4px); }

/* ── Size chips (3/5/10/30 ml) ───────────────────────────── */
.size-chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
}
.size-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .15rem;
    padding: .4rem .85rem;
    border: 1px solid color-mix(in srgb, var(--cta-accent) 35%, transparent);
    background: color-mix(in srgb, var(--cta-accent) 8%, transparent);
    color: var(--cta-accent);
    border-radius: 99px;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .03em;
    transition: transform .25s var(--ease), background .25s ease, border-color .25s ease;
}
.size-chip:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--cta-accent) 18%, transparent);
    border-color: var(--cta-accent);
}
.size-chip strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}
.size-chip.is-feature {
    background: var(--cta-accent);
    border-color: var(--cta-accent);
    color: #2a1810;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--cta-accent) 60%, transparent);
}
.size-chip.is-feature strong { color: #2a1810; }

/* ── Bottle illustration (SVG) ───────────────────────────── */
.cta-decants-art {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
}
.bottle-illustration {
    width: 100%;
    max-width: 240px;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
    animation: bottle-rise .85s var(--ease) .1s both, bottle-sway 7s ease-in-out infinite alternate;
    transform-origin: 50% 95%;
}
@keyframes bottle-rise {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes bottle-sway {
    0%   { transform: rotate(-1.5deg); }
    100% { transform: rotate(1.5deg); }
}

/* Responsive home */
@media (max-width: 900px) {
    .trust-strip { grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1.25rem 1rem; }
    .trust-item + .trust-item { border-left: 0; padding-left: .5rem; }
    .trust-item:nth-child(2) { border-left: 1px solid color-mix(in srgb, white 12%, transparent); padding-left: 1rem; }
    .trust-item:nth-child(3),
    .trust-item:nth-child(4) { border-top: 1px dashed color-mix(in srgb, white 14%, transparent); padding-top: .85rem; }

    .cta-decants { padding: 2.5rem 1.75rem; margin: 2.5rem 0; border-radius: 16px; }
    .cta-decants-wrap {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    .cta-decants-inner {
        max-width: none;
        margin: 0 auto;
    }
    .cta-decants-eyebrow,
    .cta-decants-steps,
    .size-chips,
    .cta-decants-actions { justify-content: center; }
    .cta-decants p { margin-left: auto; margin-right: auto; }
    .cta-decants h2 { font-size: 2rem; }
    .cta-decants-art {
        order: -1; /* el frasco va arriba en tablet/móvil */
        padding: 0;
    }
    .bottle-illustration { max-width: 200px; }
}
@media (max-width: 600px) {
    .trust-strip { grid-template-columns: 1fr; }
    .trust-item { padding: .65rem .5rem; }
    .trust-item + .trust-item {
        border-top: 1px dashed color-mix(in srgb, white 14%, transparent);
        border-left: 0;
        padding-top: .85rem;
        padding-left: .5rem;
    }

    .cta-decants { padding: 2rem 1.25rem; margin: 2rem 0; border-radius: 14px; }
    .cta-decants h2 { font-size: 1.65rem; }
    .cta-decants p { font-size: .95rem; margin-bottom: 1.25rem; }
    .cta-decants-eyebrow { font-size: .65rem; padding: .3rem .7rem; }
    .cta-decants-steps {
        gap: .55rem;
        font-size: .85rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        max-width: 260px;
        margin: 0 auto 1.25rem;
    }
    .cta-decants-steps li { width: 100%; }
    .cta-decants-steps li + li::before { display: none; }
    .cta-decants-actions { flex-direction: column; align-items: stretch; }
    .cta-decants-actions .btn { width: 100%; }
    .bottle-illustration { max-width: 170px; }
    .size-chips { gap: .35rem; }
    .size-chip { padding: .3rem .7rem; font-size: .76rem; }
    .size-chip strong { font-size: .98rem; }

    .carousel-link { font-size: .78rem; padding: .25rem .5rem; }
    .carousel-head div p { display: none; }
}

/* En tablets/desktop pequeño */
@media (min-width: 901px) and (max-width: 1100px) {
    .cta-decants-wrap { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .cta-decants h2 { font-size: 2.2rem; }
    .bottle-illustration { max-width: 200px; }
}

/* =========================================================
   OPTIMIZACIÓN MÓVIL (≤700px)
   En pantallas chicas los efectos en bucle (orbs, glows, anillos
   girando, chips flotando) y los backdrop-filter consumen batería y
   provocan jank al hacer scroll, sin aportar mucho. Aquí los apagamos
   conservando el diseño: las animaciones de ENTRADA (corren una vez:
   título, texto, botones) y los degradados estáticos se mantienen, así
   que la página sigue viéndose bonita pero rinde mucho mejor.
   ========================================================= */
@media (max-width: 700px) {

    /* --- 1. Apagar animaciones decorativas en bucle infinito ---
       Se conservan: animaciones de entrada, spinner de carga, skeleton
       shimmer e indicadores de estado (no están en esta lista). */
    .hero,
    .hero::before,
    .hero::after,
    .hero-bg img,
    .hero-art img,
    .hero-art-glow,
    .hero-art-ring,
    .hero-art-ring-2,
    .hero-art-sparkle,
    .hero-principal-chip,
    .hero-principal-eyebrow svg,
    .hero-title-accent-dot,
    .hero-eyebrow-dot,
    .nav-pill,
    .hc-sparkle,
    .hc-bubble,
    .hc-bottle,
    .empty-state::before,
    .seguimiento-hint-icon,
    .tracking-hint-icon,
    .bottle-illustration {
        animation: none !important;
    }

    /* --- 2. Quitar backdrop-filter (re-difumina el fondo en cada frame
       de scroll, muy costoso en móvil). Los fondos translúcidos se
       vuelven más opacos para que se sigan leyendo bien. --- */
    .navbar::before,
    .hero-carousel-meta,
    .hero-principal-chip,
    .hero-principal-eyebrow,
    .hero-eyebrow,
    .hero-art-badge-float,
    .producto-img-badge,
    .cat-explore-thumb {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .navbar::before          { background: rgba(255,255,255,.97); }
    .navbar.is-scrolled::before { background: rgba(255,255,255,.99); }

    /* --- 3. Soltar la capa GPU permanente de elementos con will-change
       (mantienen una textura en memoria aunque ya no animen). --- */
    .reveal,
    .hero-carousel-progress-fill {
        will-change: auto;
    }

    /* --- 4. Scroll del carrusel sin "smooth" programático: el swipe
       nativo del dedo se siente más directo y consume menos. --- */
    .hero-slides { scroll-behavior: auto; }
}

/* =========================================================
   Safari iOS / WebKit touch
   El combo overflow + border-radius + contain + capas forzadas puede
   dejar slides y chips sin repintar o recortados al volver arriba.
   Aquí simplificamos la composición para evitar banners en blanco o
   pintados solo a la mitad.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        .hero-carousel-stage {
            transform: none !important;
            -webkit-transform: none !important;
            -webkit-backface-visibility: visible !important;
            backface-visibility: visible !important;
            will-change: auto !important;
            mask-image: radial-gradient(white, black);
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }

        .hero-slide {
            contain: none !important;
        }

        .hero-slide > .hero,
        .cat-explore-card,
        .cat-explore-thumb,
        .hero-carousel-meta,
        .hero-principal-chip,
        .hero-art-badge-float {
            mask-image: radial-gradient(white, black);
            -webkit-mask-image: -webkit-radial-gradient(white, black);
        }
    }
}