/* ═══════════════════════════════════════════════════════
   Starvasos Store — Design System
   Primary: #99b2d1 (blue-grey)  Accent: #d0b799 (warm gold)
═══════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────── */
:root {
    --primary:       #99b2d1;
    --primary-dark:  #7a97bc;
    --primary-light: #c2d3e8;
    --accent:        #d0b799;
    --accent-dark:   #b99a78;
    --accent-light:  #e8d9c2;

    --bg:            #f8f9fb;
    --surface:       #ffffff;
    --surface-2:     #f2f5f9;
    --border:        #e2e8f0;
    --text:          #1e2a3a;
    --text-sec:      #4a5568;
    --text-muted:    #5a6b80;

    --radius-sm:     8px;
    --radius:        14px;
    --radius-lg:     20px;
    --shadow-sm:     0 2px 8px rgba(0,0,0,.06);
    --shadow:        0 4px 20px rgba(0,0,0,.09);
    --shadow-lg:     0 10px 40px rgba(0,0,0,.13);

    --nav-h:         68px;
    --header-h:      var(--nav-h);
    --transition:    .22s cubic-bezier(.4,0,.2,1);

    --font-display:  'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:     'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset / Base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    /* overflow-x:hidden NO va aquí a propósito — ponerlo en <body> crea un
       contenedor de scroll propio que rompe position:sticky en varios
       navegadores (el resumen del carrito/checkout dejaba de pegarse al
       hacer scroll). <html> ya tiene overflow-x:hidden (ver arriba), eso
       basta para seguir cortando cualquier elemento decorativo que se
       asome del viewport, sin el efecto secundario sobre sticky. */
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── Typography ─────────────────────────────────────── */
.store-heading { font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.store-sub     { color: var(--text-sec); line-height: 1.65; }

/* ════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════ */
.store-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--nav-h);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

.store-nav-inner {
    width: 100%; max-width: 1280px; margin: 0 auto;
    padding: 0 24px;
    display: flex; align-items: center; gap: 24px;
}
.store-logo {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
.store-logo img { height: 38px; width: auto; object-fit: contain; }
.store-logo-text {
    font-size: 1.2rem; font-weight: 800;
    background: linear-gradient(135deg, var(--primary-dark), var(--accent-dark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.store-nav-links {
    display: flex; align-items: center; gap: 4px;
    margin: 0; padding: 0;
}
.store-nav-links a {
    position: relative;
    padding: 8px 16px; border-radius: 999px;
    font-size: .9rem; font-weight: 600; color: var(--text-sec);
    transition: color .2s ease, background .2s ease;
}
.store-nav-links a:hover {
    color: var(--primary-dark);
    background: var(--surface-2);
}
.store-nav-links a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ── "Productos" — desplegable de marcas (business units) ───────────
   Escritorio: panel flotante al hover/focus. Teléfono: en vez de un
   desplegable anidado, se listan los mismos enlaces como sub-ítems
   indentados justo debajo de "Productos" en el propio menú móvil. */
.store-nav-dropdown { position: relative; }
.store-nav-dropdown-caret { font-size: .6rem; margin-left: 3px; transition: transform .2s ease; }
.store-nav-dropdown:hover .store-nav-dropdown-caret,
.store-nav-dropdown:focus-within .store-nav-dropdown-caret { transform: rotate(180deg); }
.store-nav-dropdown-panel {
    position: absolute; top: calc(100% + 12px); left: 50%;
    min-width: 210px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 600;
}
.store-nav-dropdown:hover .store-nav-dropdown-panel,
.store-nav-dropdown:focus-within .store-nav-dropdown-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Los enlaces .snd-item viven dentro de .store-nav-links (la panel es hija
   de un <li> de esa lista), así que hace falta ganarle en especificidad a
   ".store-nav-links a" / ".store-nav-links a::after" combinando selector +
   clase en vez de la clase sola — si no, el padding/subrayado del link de
   navbar normal se filtraba encima de los ítems del desplegable. */
.store-nav-dropdown-panel a.snd-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 9px;
    font-size: .86rem; font-weight: 600; color: var(--text-sec);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.store-nav-dropdown-panel a.snd-item::after { content: none; }
.snd-item i { width: 14px; text-align: center; color: var(--text-muted); font-size: .78rem; flex-shrink: 0; }
.store-nav-dropdown-panel a.snd-item:hover,
.store-nav-dropdown-panel a.snd-item.active { background: var(--surface-2); color: var(--primary-dark); }
.store-nav-dropdown-panel a.snd-item.active i { color: var(--primary-dark); }
.snd-divider { height: 1px; background: var(--border); margin: 6px 4px; }

.store-nav-actions {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto;
}
.store-cart-btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-size: 1.1rem;
    transition: background var(--transition), transform var(--transition);
    cursor: pointer;
}
.store-cart-btn:hover { background: var(--primary-light); transform: scale(1.05); }
.store-cart-badge {
    position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-dark); color: #fff;
    font-size: .65rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--surface);
}
.store-cart-badge.d-none { display: none !important; }
.store-account-btn {
    display: flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px 0 14px; border-radius: 21px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-size: .85rem; font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.store-account-btn i { font-size: 1rem; }
.store-account-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--text); }
.d-none { display: none !important; }
.btn-store-outline {
    padding: 7px 18px; border-radius: 9px;
    border: 1.5px solid var(--primary);
    background: transparent; color: var(--primary-dark);
    font-size: .88rem; font-weight: 600;
    transition: all var(--transition); cursor: pointer;
}
.btn-store-outline:hover {
    background: var(--primary); color: #fff;
}
.btn-store-primary {
    padding: 8px 20px; border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-size: .88rem; font-weight: 600;
    box-shadow: 0 2px 8px rgba(153,178,209,.4);
    transition: all var(--transition); cursor: pointer;
}
.btn-store-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), #5f7fa0);
    box-shadow: 0 4px 16px rgba(153,178,209,.5); transform: translateY(-1px);
}
.btn-store-accent {
    padding: 10px 26px; border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-size: .95rem; font-weight: 700;
    box-shadow: 0 2px 10px rgba(153,178,209,.45);
    transition: all var(--transition); cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
}
.btn-store-accent:hover {
    background: linear-gradient(135deg, var(--primary-dark), #5f7ba3);
    transform: translateY(-2px); box-shadow: 0 6px 20px rgba(153,178,209,.5);
}
.store-hamburger {
    display: none; background: none; border: none;
    font-size: 1.4rem; color: var(--text); cursor: pointer;
    padding: 4px 8px; border-radius: 6px;
}
.store-hamburger:hover { background: var(--surface-2); }

/* ── Mobile Nav ─────────────────────────────────────── */
.store-mobile-menu {
    display: none; position: fixed;
    top: var(--header-h); left: 0; right: 0; z-index: 999;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow);
}
.store-mobile-menu.open { display: block; }
.store-mobile-menu a {
    display: block; padding: 10px 0;
    font-weight: 500; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.store-mobile-menu a:last-child { border-bottom: none; }

/* ── Page offset ────────────────────────────────────── */
.store-page { padding-top: var(--header-h); min-height: 100vh; }

/* ════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.store-hero {
    position: relative; overflow: hidden;
    min-height: calc(100vh - var(--header-h));
    display: flex; align-items: center;
    background: linear-gradient(135deg, #eef3f9 0%, #f8f4ef 100%);
}
.store-hero-blob {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: .35;
    pointer-events: none;
}
.store-hero-blob-1 {
    width: 600px; height: 600px;
    background: var(--primary-light);
    top: -120px; left: -100px;
}
.store-hero-blob-2 {
    width: 500px; height: 500px;
    background: var(--accent-light);
    bottom: -80px; right: -60px;
}
.store-hero-content {
    position: relative; z-index: 2;
    max-width: 1280px; margin: 0 auto; padding: 80px 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.store-hero-text h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 900; line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--text);
    margin-bottom: 20px;
}
.store-hero-text h1 span {
    background: linear-gradient(135deg, var(--primary-dark), var(--accent-dark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.store-hero-text p {
    font-size: 1.1rem; color: var(--text-sec);
    line-height: 1.7; margin-bottom: 32px; max-width: 480px;
}
.store-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.store-hero-visual {
    display: flex; justify-content: center; align-items: center;
}
.store-hero-img-wrap {
    position: relative;
    width: 420px; max-width: 100%;
}
.store-hero-img-wrap img {
    width: 100%; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: cover; aspect-ratio: 4/5;
}
.store-hero-badge {
    position: absolute; bottom: 24px; left: -20px;
    background: var(--surface); border-radius: 14px;
    padding: 12px 18px; box-shadow: var(--shadow);
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: .9rem;
}
.store-hero-badge span { color: var(--text-muted); font-size: .75rem; font-weight: 500; }

/* ════════════════════════════════════════════════════
   SECTION LAYOUTS
═══════════════════════════════════════════════════════ */
.store-section {
    padding: 72px 24px; max-width: 1280px; margin: 0 auto;
}
.store-section-full {
    padding: 72px 24px;
    background: var(--surface-2);
}
.store-section-full .store-section { padding-top: 0; padding-bottom: 0; }
.section-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 40px; gap: 20px; flex-wrap: wrap;
}
.section-title {
    font-family: var(--font-display);
    font-size: 2.1rem; font-weight: 600;
    letter-spacing: -.01em; color: var(--text);
}
.section-title span {
    color: var(--primary-dark);
}
.section-sub {
    color: var(--text-muted); font-size: 1.02rem; font-weight: 500; margin-top: 4px;
}
.section-link {
    font-size: .88rem; font-weight: 600; color: var(--primary-dark);
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
    transition: gap var(--transition);
}
.section-link:hover { gap: 10px; }

/* ════════════════════════════════════════════════════
   PRODUCT CARDS — grid containers
═══════════════════════════════════════════════════════ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1100px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .products-grid { grid-template-columns: 1fr; } }

.products-grid-home {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1100px) { .products-grid-home { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .products-grid-home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .products-grid-home { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════
   PRODUCT CARD v3 — Portrait editorial
   · Imagen portrait 3:4, sin overlays
   · Precio grande y visible en el body
   · Stock como texto de color
   · Botón dorado sólido siempre visible
   · Hover: elevación + borde primary
═══════════════════════════════════════════════════════ */
.product-card {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid var(--border);
    overflow: hidden;
    display: flex; flex-direction: column;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 12px rgba(30,42,58,.055);
    transition:
        transform .3s cubic-bezier(.34,1.2,.64,1),
        box-shadow .3s ease,
        border-color .22s ease;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 56px rgba(30,42,58,.13);
    border-color: var(--primary);
}

/* ── Imagen cuadrada 1:1 — altura compacta ── */
.product-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
}
.product-card-img img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block;
    transition: transform .55s cubic-bezier(.34,1.06,.64,1);
    /* Fondo del contenedor = blanco puro, igual que el de la mayoría de las
       fotos de producto: con multiply, el blanco de la foto se funde con el
       blanco de la tarjeta y "desaparece" (se ve como si no tuviera fondo),
       sin tocar los colores reales del producto. */
    mix-blend-mode: multiply;
}
.product-card:hover .product-card-img img { transform: scale(1.06); }

/* ── Vignette oscura — aparece suavemente al hover ── */
.product-card-img::before {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(
        to top,
        rgba(20,30,48,.52) 0%,
        rgba(20,30,48,.12) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity .32s ease;
    pointer-events: none;
}
.product-card:hover .product-card-img::before { opacity: 1; }

/* ── Panel vidrio — sube desde abajo al hacer hover ── */
.product-card-glass-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
    padding: 14px 16px;
    background: rgba(153,178,209,.28);          /* tinte #99b2d1 */
    backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
    border-top: 1px solid rgba(153,178,209,.45);
    display: flex; align-items: center; justify-content: center;
    transform: translateY(102%);
    transition: transform .34s cubic-bezier(.34,1.22,.64,1);
    pointer-events: none;
}
.product-card:hover .product-card-glass-overlay {
    transform: translateY(0);
    pointer-events: auto;
}
.pcgo-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: #fff;
    background: rgba(122,151,188,.65);          /* primary-dark #7a97bc */
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    padding: 6px 15px;
}
.pcgo-label i { font-size: .68rem; transition: transform .22s; }
.product-card:hover .pcgo-label i { transform: translateX(4px); }

/* Colección — top-left */
.product-card-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: rgba(255,255,255,.96); color: var(--accent-dark);
    font-size: .57rem; font-weight: 800; padding: 3px 10px; border-radius: 20px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(208,183,153,.4);
    letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.product-card-badge-sold {
    background: rgba(71,85,105,.94); color: #fff; border-color: rgba(71,85,105,.5);
}

/* Producto marcado como No disponible dentro de una colección de
   preventa que sigue activa (ver toggle en el admin) — se queda visible
   por continuidad pero sin CTA ni hover de "apartar". */
.product-card-unavailable { cursor: default; }
.product-card-unavailable:hover { transform: none; box-shadow: none; }

/* Stock badge — top-right (mantenido para compatibilidad collection-show) */
.product-card-stock-badge {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .6rem; font-weight: 700;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
    backdrop-filter: blur(8px);
}
.product-card-stock-badge.sb-ok   { background: rgba(220,252,231,.95); color: #15803d; }
.product-card-stock-badge.sb-low  { background: rgba(254,243,199,.97); color: #92400e; border: 1px solid rgba(252,211,77,.55); }
.product-card-stock-badge.sb-soon { background: rgba(255,255,255,.88); color: var(--text-muted); border: 1px solid rgba(226,232,240,.8); }

/* Price badge overlay (compatibilidad collection-show + product-detail overlay) */
.product-card-price-badge {
    position: absolute; bottom: 10px; left: 10px; z-index: 2;
    background: rgba(20,30,48,.85); color: #fff;
    font-size: .88rem; font-weight: 900;
    padding: 5px 13px; border-radius: 20px;
    letter-spacing: -.02em; backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.product-card-price-badge small { font-size: .57rem; font-weight: 500; opacity: .7; margin-left: 2px; }

/* ── Body ── */
.product-card-body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 3px;
    flex: 1;
}
.product-card-brand {
    font-size: .58rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted);
}
.product-card-name {
    font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1; margin-bottom: 2px;
}

/* ── Fila de precio — grande y prominente ── */
.product-card-price-row {
    display: flex; align-items: baseline; gap: 5px;
    padding-top: 10px; margin-top: auto;
    border-top: 1px solid var(--border);
    margin-bottom: 4px;
}
.product-card-price-num {
    font-size: 1.46rem; font-weight: 900;
    color: var(--primary-dark); letter-spacing: -.03em; line-height: 1;
    display: inline-flex; align-items: baseline; gap: 1px;
}
.product-card-price-sym {
    font-size: 1em; font-weight: 900; color: var(--primary-dark);
}
.product-card-price-cur {
    font-size: .68rem; font-weight: 600; color: var(--text-muted);
    margin-left: 4px;
}

/* ── Stock — línea de texto coloreada ── */
.product-card-stock-line {
    display: flex; align-items: center; gap: 6px;
    font-size: .84rem; font-weight: 600; margin-bottom: 10px;
}
.product-card-stock-line i { font-size: .86rem; flex-shrink: 0; }
.pcsl-ok   { color: #15803d; }
.pcsl-low  { color: #b45309; }
.pcsl-soon { color: var(--primary-dark); margin-bottom: 2px; }
.pcsl-order { color: var(--text-muted); }
.product-card-stock-sub {
    font-size: .76rem; color: var(--text-muted);
    margin: -4px 0 10px 22px;
}

/* ── Card "flat": sin caja/borde/sombra propia — se funde con el fondo
   gris clarito de la página (var(--bg)), solo la foto redondeada y el
   texto quedan visibles. Sombra sutil solo al hover, como retroalimentación. ── */
.product-card-flat {
    background: transparent;
    border: none;
    box-shadow: none;
}
.product-card-flat:hover {
    box-shadow: 0 18px 38px rgba(30,42,58,.12);
    border-color: transparent;
}

/* ── Etiqueta bandera — reemplaza el pill genérico. Forma de banderín
   (fold en la punta) tipo etiqueta de envío/regalo, más propia de una
   tienda de coleccionables que se regalan/envían que un badge de SaaS. ── */
.product-tag {
    position: absolute; top: 14px; left: 0; z-index: 3;
    padding: 5px 22px 5px 12px;
    font-size: .62rem; font-weight: 800; letter-spacing: .03em;
    color: #fff; white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, 93% 50%, 100% 100%, 0 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.pt-primary { background: var(--primary-dark); }
.pt-danger  { background: #c53030; }
.pt-accent  { background: var(--accent-dark); }
.pt-ink     { background: #2d3748; }
.pt-ok      { background: #15803d; }

/* ── Precio — texto simple, sin chip/fondo ── */
.product-card-price-plain {
    font-weight: 900; font-size: 1.1rem; color: var(--primary-dark);
    letter-spacing: -.02em; margin-bottom: 8px;
    display: inline-flex; align-items: baseline; gap: 1px;
}
.pcf-sym { font-size: .8em; margin-right: 1px; }
.pcf-cur { font-size: .6rem; font-weight: 600; color: var(--text-muted); margin-left: 4px; }

/* ── Fila de acciones: botón (flex, ocupa el espacio libre) + favoritos ── */
.product-card-actions-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: auto;
}

/* ── Favoritos — junto al botón de carrito, mismo tamaño que su alto ── */
.product-card-fav {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2, #f1f5f9); color: var(--text-muted);
    font-size: 1rem;
    transition: transform .18s ease, color .18s ease, background .18s ease;
}
.product-card-fav:hover { transform: scale(1.08); color: #e0245e; }
.product-card-fav.is-favorited { color: #e0245e; background: rgba(224,36,94,.1); animation: pcFavPop .35s ease; }
@keyframes pcFavPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ── Botón de acción — ancho completo (dentro de la fila), azul (color de
   marca), mismo estilo tanto para "Agregar al carrito" como para el
   stepper +/- que lo reemplaza al instante en cuanto hay piezas en el
   carrito. ── */
.product-card-cta-full {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 12px; border-radius: 11px; border: none; cursor: pointer;
    font-size: .82rem; font-weight: 700; letter-spacing: .01em; text-decoration: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; box-shadow: 0 3px 12px rgba(122,151,188,.4);
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-card-cta-full:hover { box-shadow: 0 8px 22px rgba(122,151,188,.55); transform: translateY(-1px); color: #fff; }
.product-card-cta-full-disabled,
.product-card-cta-full-disabled:hover {
    background: var(--surface-2); color: var(--text-muted); box-shadow: none; cursor: not-allowed; transform: none;
}

/* ── Producto agotado — imagen desaturada, sin link ni acciones de compra ── */
.product-card-sold-out { cursor: default; }
.product-card-sold-out:hover { transform: none; box-shadow: none; }
.product-card-sold-out .product-card-img img { filter: grayscale(1) opacity(.65); }
.product-card-sold-out .product-card-glass-overlay { display: none; }
.product-card-cta-full-wa { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 3px 12px rgba(122,151,188,.4); }
.product-card-cta-full-wa:hover { box-shadow: 0 8px 22px rgba(122,151,188,.55); }
.product-card-cta-full-stepper { gap: 4px; }
/* Animación al aparecer (agregar ⇄ stepper) — un solo "pop" suave, no un
   efecto continuo, para marcar el cambio de estado sin ser ruidoso. */
.pc-cta-swap { animation: pcCtaSwap .3s cubic-bezier(.34,1.4,.64,1); }
@keyframes pcCtaSwap {
    0%   { transform: scale(.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.product-card-cta-full-stepper button {
    width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(255,255,255,.2);
    color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, opacity .15s ease;
}
.product-card-cta-full-stepper button:hover { background: rgba(255,255,255,.34); }
.product-card-cta-full-stepper button:disabled { opacity: .4; cursor: default; background: transparent; }
.product-card-cta-full-stepper span { min-width: 22px; text-align: center; font-weight: 800; font-size: .92rem; }
.product-card-add-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; font-size: .9rem; text-decoration: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; box-shadow: 0 4px 14px rgba(185,154,120,.4);
    transition: box-shadow .2s ease, transform .2s ease, opacity .15s ease;
}
.product-card-add-icon:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(185,154,120,.5); color: #fff; }
.product-card-add-icon:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* Botón de carrito en la tarjeta de producto — igual en teléfono y PC
   (antes había un stepper +/- en escritorio y este botón solo en
   teléfono; ahora es el mismo botón único en todos lados). Azul
   (var(--primary)), no el dorado/amarillo del ícono base de WhatsApp. El
   selector doble (misma clase repetida) le gana en especificidad a la
   regla que encoge .product-card-add-icon en pantallas angostas. */
.product-card-add-icon.product-card-cart-btn {
    position: relative;
    width: 38px; height: 38px; font-size: .9rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 14px rgba(122,151,188,.45);
}
.product-card-add-icon.product-card-cart-btn:hover {
    box-shadow: 0 10px 24px rgba(122,151,188,.55);
}
.pcab-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 50%;
    background: var(--primary-dark); color: #fff;
    font-size: .64rem; font-weight: 800; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}

/* ── Botón Añadir — sólido dorado siempre visible ── */
.product-card-add-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 10px 12px;
    border-radius: 11px; border: none; cursor: pointer;
    font-size: .81rem; font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; letter-spacing: .01em;
    box-shadow: 0 3px 12px rgba(185,154,120,.36);
    transition: box-shadow .2s, transform .2s, opacity .15s;
}
.product-card-add-btn:hover {
    box-shadow: 0 8px 22px rgba(185,154,120,.54);
    transform: translateY(-1px);
}
.product-card-add-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* Variante WhatsApp — preventa */
.product-card-add-btn.pca-wa {
    background: var(--primary-dark);
    box-shadow: 0 3px 12px rgba(122,151,188,.32);
    text-decoration: none;
}
.product-card-add-btn.pca-wa:hover {
    box-shadow: 0 8px 22px rgba(122,151,188,.5);
}

/* fallback sin imagen */
.product-no-img {
    width: 100%; height: 100%; display: flex;
    align-items: center; justify-content: center;
    font-size: 3rem; color: var(--border);
}

/* ── Ajustes para tarjetas angostas (2 columnas en teléfono) ──
   Evita que el precio y el botón de carrito se corten por el
   overflow:hidden de .product-card cuando el ancho es reducido. */
@media (max-width: 576px) {
    .product-card-body { padding: 11px 12px 12px; gap: 2px; }
    .product-card-name { font-size: .82rem; }
    .product-card-price-plain { font-size: .98rem; }
    .product-card-actions-row { gap: 6px; }
    /* El texto completo ("Agregar al carrito") no cabe en 2 columnas por
       fila en teléfono — se acorta a "Agregar" (sin "al carrito") en vez
       de dejar solo el ícono, para que el botón siga diciendo qué hace. */
    .product-card-cta-full { padding: 0 8px; font-size: .78rem; gap: 4px; }
    .product-card-cta-full i { font-size: .85rem; }
    .product-card-cta-full .pcf-cta-full-text { display: none; }
    .product-card-cta-full-stepper { padding: 0 4px; }
    .product-card-fav { width: 36px; height: 36px; }
}
/* Tablets (grid a 3 columnas, row-cols-md-3): la card sigue angosta, así
   que el botón también se acorta a "Agregar", igual que en teléfono. */
@media (min-width: 577px) and (max-width: 991px) {
    .product-card-cta-full { padding: 0 8px; font-size: .78rem; gap: 4px; }
    .product-card-cta-full i { font-size: .85rem; }
    .product-card-cta-full .pcf-cta-full-text { display: none; }
}
@media (max-width: 360px) {
    .product-card-price-plain { font-size: .9rem; }
}

/* ════════════════════════════════════════════════════
   COLLECTION CARDS
═══════════════════════════════════════════════════════ */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.collection-card {
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden; aspect-ratio: 4/3;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.collection-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.collection-card-bg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.collection-card:hover .collection-card-bg { transform: scale(1.06); }
.collection-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,30,45,.75) 0%, transparent 60%);
}
.collection-card-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px; color: #fff;
}
.collection-card-year {
    font-size: .72rem; font-weight: 700; opacity: .75;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
.collection-card-name {
    font-size: 1.2rem; font-weight: 800; line-height: 1.2;
}
.collection-card-count {
    font-size: .78rem; opacity: .7; margin-top: 6px;
}
.collection-card-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════════════════ */
.product-detail-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: start;
    max-width: 1280px; margin: 0 auto; padding: 60px 24px;
}
/* Miniaturas a la izquierda de la foto grande (estilo Amazon) — el HTML
   trae primero la foto grande y luego las miniaturas, así que se usa
   row-reverse para no tener que tocar el orden del markup ni el JS que
   las controla. */
.product-gallery {
    position: sticky; top: calc(var(--header-h) + 20px);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 14px;
}
.product-gallery-main {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-lg); overflow: hidden;
    background: #fff;
    /* Misma altura que el tope de las miniaturas (max-height de
       .product-gallery-thumbs) — así la foto grande no se queda más baja
       que la columna de miniaturas cuando hay varias. */
    height: 560px;
    display: flex; align-items: center; justify-content: center;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.product-gallery-thumbs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 10px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.product-gallery-thumbs::-webkit-scrollbar { display: none; }
.product-gallery-thumb-video { position: relative; }
.product-gallery-thumb-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); color: #fff; font-size: 1rem; pointer-events: none;
}
.product-gallery-thumb {
    width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
    flex-shrink: 0; background: #fff;
    border: 2px solid transparent; cursor: pointer;
    transition: border-color var(--transition);
}
.product-gallery-thumb.active { border-color: var(--primary); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-info { display: flex; flex-direction: column; gap: 20px; }
.product-info-brand-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.product-info-brand {
    font-size: .78rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em;
}
.product-info-brand-badge {
    --bu-color: var(--primary-dark);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 20px;
    font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    color: var(--bu-color);
    background: color-mix(in srgb, var(--bu-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bu-color) 35%, transparent);
}
.product-info-brand-badge i { font-size: .68rem; }
.product-info-name { font-size: 2rem; font-weight: 900; line-height: 1.15; }
.product-info-price {
    font-size: 2rem; font-weight: 900;
    color: var(--primary-dark);
}
.product-info-price small { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.product-info-collection {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--primary-light); color: var(--primary-dark);
    border-radius: 8px; padding: 5px 12px;
    font-size: .8rem; font-weight: 700;
}
.product-info-stock {
    font-size: .85rem; color: var(--text-muted);
}
.product-qty-wrap {
    display: flex; align-items: center; gap: 12px;
}
@media (max-width: 480px) {
    /* El selector de cantidad + el botón (con textos largos como "Apartar
       — 3-4 semanas") uno al lado del otro no cabían en teléfono y el
       texto del botón se partía en dos renglones. Se apilan: cantidad
       centrada arriba, botón a todo el ancho abajo. */
    .product-qty-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
    .qty-ctrl { align-self: center; }
    .product-add-cart-btn { width: 100%; }
}
.qty-ctrl {
    display: flex; align-items: center; gap: 0;
    border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden;
}
.qty-ctrl button {
    width: 38px; height: 38px; background: var(--surface-2);
    border: none; font-size: 1.1rem; cursor: pointer;
    transition: background var(--transition); color: var(--text);
}
.qty-ctrl button:hover { background: var(--primary-light); }
.qty-ctrl input {
    width: 52px; height: 38px; text-align: center;
    border: none; border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
    font-size: .95rem; font-weight: 700; color: var(--text);
    background: var(--surface);
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
}
.qty-ctrl input:focus { outline: none; }
.qty-ctrl input::-webkit-outer-spin-button,
.qty-ctrl input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.product-add-cart-btn {
    flex: 1; padding: 12px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-size: 1rem; font-weight: 700;
    border: none; cursor: pointer;
    transition: all var(--transition);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.product-add-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(153,178,209,.5);
}
/* Variant for pre-order / incoming */
.product-add-cart-btn.btn-preorder {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 2px 10px rgba(153,178,209,.35);
}
.product-add-cart-btn.btn-preorder:hover {
    box-shadow: 0 6px 20px rgba(153,178,209,.5);
}
.product-info-divider { border: none; border-top: 1px solid var(--border); }
.product-info-meta { display: flex; flex-direction: column; gap: 8px; }
.product-info-meta-row {
    display: flex; gap: 10px; font-size: .87rem;
}
.product-info-meta-label { color: var(--text-muted); min-width: 100px; }
.product-info-meta-value { font-weight: 600; color: var(--text); }

/* ════════════════════════════════════════════════════
   FILTERS BAR (Products Page)
═══════════════════════════════════════════════════════ */
.store-filters-bar {
    background: var(--surface); border-radius: var(--radius);
    padding: 18px 24px; margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    /* Al ser flex, sus hijos (como el picker de colección) crean su propio
       contexto de apilamiento — su z-index alto no alcanza a ganarle a la
       cuadrícula de productos de más abajo si esta barra no tiene el suyo
       propio. position+z-index aquí hace que TODO el bloque (con su
       dropdown) se compare como una unidad contra el resto de la página. */
    position: relative; z-index: 50;
}
.store-search-wrap {
    flex: 1; min-width: 200px; position: relative;
}
@media (max-width: 576px) {
    .store-filters-bar { padding: 14px 16px; gap: 10px; }
    .store-search-wrap { flex-basis: 100%; min-width: 0; }
    .store-filter-select, .store-collection-picker { flex: 1 1 auto; min-width: 0; }
    .store-results-count { flex-basis: 100%; }
}
.store-search-wrap i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .9rem; pointer-events: none;
}
.store-search-input {
    width: 100%; padding: 10px 14px 10px 36px;
    border: 1.5px solid var(--border); border-radius: 9px;
    background: var(--surface-2); color: var(--text); font-size: .9rem;
    transition: border-color var(--transition);
}
.store-search-input:focus { outline: none; border-color: var(--primary); }
.store-filter-select {
    padding: 9px 14px; border: 1.5px solid var(--border);
    border-radius: 9px; background: var(--surface-2);
    color: var(--text); font-size: .88rem; cursor: pointer;
    transition: border-color var(--transition);
}
.store-filter-select:focus { outline: none; border-color: var(--primary); }
.store-results-count { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }

/* ── Selector de colección: buscador + miniatura ─────── */
.store-collection-picker {
    position: relative;
    /* Antes tenía un tope de 220px que lo dejaba angosto y suelto en la
       barra de filtros — ahora crece para ocupar el espacio disponible,
       igual que el buscador. */
    flex: 1 1 240px;
}
.store-collection-picker-trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 7px 12px 7px 8px; border: 1.5px solid var(--border);
    border-radius: 9px; background: var(--surface-2);
    color: var(--text); font-size: .88rem; font-family: inherit;
    cursor: pointer; transition: border-color var(--transition);
}
.store-collection-picker-trigger:hover,
.store-collection-picker-trigger:focus { outline: none; border-color: var(--primary); }
.scp-trigger-thumb {
    width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.scp-trigger-icon { color: var(--text-muted); font-size: .85rem; flex-shrink: 0; }
.store-collection-picker-trigger span:not([class]) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: left;
}
.scp-trigger-caret { font-size: .72rem; color: var(--text-muted); flex-shrink: 0; }

.store-collection-picker-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 500;
    width: 300px; max-width: 90vw;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden;
}
.scp-search-wrap {
    position: relative; padding: 10px; border-bottom: 1px solid var(--border);
}
.scp-search-wrap i {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: .85rem; pointer-events: none;
}
.scp-search-input {
    width: 100%; padding: 8px 10px 8px 30px;
    border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--text); font-size: .86rem;
}
.scp-search-input:focus { outline: none; border-color: var(--primary); }
.scp-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.scp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px; border-radius: 8px; cursor: pointer;
    font-size: .87rem; color: var(--text);
    transition: background var(--transition);
}
.scp-item:hover { background: var(--surface-2); }
.scp-thumb {
    width: 32px; height: 32px; border-radius: 7px; overflow: hidden;
    flex-shrink: 0; background: var(--surface-2);
}
.scp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scp-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: .8rem;
}
.scp-empty { padding: 16px 8px; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* ════════════════════════════════════════════════════
   CART PAGE
═══════════════════════════════════════════════════════ */
.cart-layout {
    display: grid; grid-template-columns: 1fr 360px; gap: 28px;
    max-width: 1100px; margin: 0 auto; padding: 48px 24px;
    align-items: start;
}
.cart-panel {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.cart-panel-header {
    padding: 20px 24px 0; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 18px;
}
.cart-panel-title { font-size: 1.2rem; font-weight: 800; }
.cart-item {
    padding: 18px 24px; border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: var(--surface-2); }
.cart-item-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.cart-item-img {
    width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
    background: #fff; flex-shrink: 0;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.cart-item-sub { font-size: .78rem; color: var(--text-muted); }
.store-incoming-box {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: 6px; padding: 8px 10px;
    background: #fffbf0; border: 1px solid #f6c90e; border-radius: 8px;
    font-size: .72rem; font-weight: 600; color: #92600a; line-height: 1.45;
}
.store-incoming-box i { margin-top: 2px; flex-shrink: 0; }
.store-incoming-box strong { font-weight: 800; }

/* Foto + nombre arriba; cantidad, precio y eliminar juntos en su propio
   renglón abajo — evita el layout de 3 columnas que en teléfono se
   apretaba demasiado (y a veces generaba scroll horizontal). */
.cart-item-actions-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-left: 92px;
}
.cart-item-price { font-weight: 800; font-size: 1rem; }
.cart-qty-ctrl { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cart-qty-ctrl button { width: 30px; height: 30px; background: var(--surface-2); border: none; cursor: pointer; font-size: .95rem; color: var(--text); transition: background var(--transition); }
.cart-qty-ctrl button:hover { background: var(--primary-light); }
.cart-qty-ctrl span { min-width: 34px; text-align: center; font-weight: 700; font-size: .9rem; padding: 0 6px; }
.cart-remove-btn {
    background: none; border: none; color: var(--text-muted);
    font-size: .78rem; cursor: pointer; transition: color var(--transition);
    padding: 2px 0; flex-shrink: 0;
}
.cart-remove-btn:hover { color: #e53e3e; }
@media (max-width: 480px) {
    .cart-item-actions-row { padding-left: 0; flex-wrap: wrap; }
}
.cart-empty { text-align: center; padding: 60px 24px; color: var(--text-muted); }
.cart-empty i { font-size: 3rem; display: block; margin-bottom: 14px; opacity: .4; }
.cart-summary {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 24px;
    position: sticky; top: calc(var(--header-h) + 20px);
}
.cart-summary-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 20px; }
.cart-summary-row {
    display: flex; justify-content: space-between;
    font-size: .9rem; margin-bottom: 12px; color: var(--text-sec);
}
.cart-summary-row strong { color: var(--text); }
.cart-summary-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.cart-summary-total {
    display: flex; justify-content: space-between;
    font-size: 1.15rem; font-weight: 800;
}
.cart-checkout-btn {
    width: 100%; margin-top: 20px; padding: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: all var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.cart-checkout-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cart-checkout-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.cart-continue-link {
    display: block; text-align: center; margin-top: 14px;
    font-size: .85rem; color: var(--text-muted);
}
.cart-continue-link:hover { color: var(--primary-dark); }

/* ════════════════════════════════════════════════════
   CHECKOUT PAGE
═══════════════════════════════════════════════════════ */
.checkout-layout {
    display: grid; grid-template-columns: 1fr 380px; gap: 28px;
    max-width: 1100px; margin: 0 auto; padding: 48px 24px;
    align-items: start;
}
.checkout-panel {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ── Línea de tiempo de rastreo de pedido (store.track-order) ── */
.track-timeline { position: relative; padding-left: 34px; }
.track-timeline::before {
    content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px;
    width: 2px; background: var(--border);
}
.track-timeline-step { position: relative; padding-bottom: 26px; }
.track-timeline-step:last-child { padding-bottom: 0; }
.track-timeline-dot {
    position: absolute; left: -34px; top: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .6rem;
}
.track-timeline-step.is-reached .track-timeline-dot {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
}
.track-timeline-label { font-weight: 800; font-size: .95rem; }
.track-timeline-step:not(.is-reached) .track-timeline-label { color: var(--text-muted); }
.track-timeline-date { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.checkout-panel-header {
    padding: 20px 28px 18px; border-bottom: 1px solid var(--border);
}
.checkout-panel-title { font-size: 1.15rem; font-weight: 800; }
.checkout-form { padding: 24px 28px; }
.checkout-form .form-group { margin-bottom: 18px; }
.checkout-form label {
    display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px;
    color: var(--text-sec);
}
.checkout-form input, .checkout-form select, .checkout-form textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--surface-2); color: var(--text); font-size: .92rem;
    transition: border-color var(--transition);
}
.checkout-form input:focus, .checkout-form select:focus, .checkout-form textarea:focus {
    outline: none; border-color: var(--primary);
    background: var(--surface);
}
.checkout-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checkout-submit-btn {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff; border: none; border-radius: 12px;
    font-size: 1.05rem; font-weight: 700; cursor: pointer;
    transition: all var(--transition); margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.checkout-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(208,183,153,.5); }
.checkout-submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.checkout-order-item {
    padding: 14px 0; border-bottom: 1px solid var(--border);
}
.checkout-order-item:last-child { border-bottom: none; }
.checkout-order-top { display: flex; align-items: center; gap: 12px; }
.checkout-order-img { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: #fff; flex-shrink: 0; }
.checkout-order-img img { width: 100%; height: 100%; object-fit: contain; }
.checkout-order-name { font-size: .88rem; font-weight: 700; }
.checkout-order-qty { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.checkout-order-price { font-weight: 800; font-size: .92rem; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   AUTH PAGES
═══════════════════════════════════════════════════════ */
.auth-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef3f9 0%, #f8f4ef 100%);
    padding: 40px 20px;
}
.auth-card {
    width: 100%; max-width: 440px;
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.auth-card-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 24px 36px 18px; text-align: center;
}
.auth-card-header img { height: 40px; margin: 0 auto 10px; filter: brightness(0) invert(1); }
.auth-card-header h2 { color: #fff; font-size: 1.3rem; font-weight: 800; margin: 0; }
.auth-card-header p { color: rgba(255,255,255,.8); font-size: .85rem; margin-top: 4px; }
.auth-card-body { padding: 24px 36px; }

/* ── Login / registro en modal (reusa .auth-card-header/.auth-card-body) ── */
.store-auth-modal .modal-dialog { max-width: 440px; }
.store-auth-modal-content {
    position: relative;
    border: none; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.store-auth-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    background-color: rgba(255,255,255,.22);
    opacity: 1;
    filter: brightness(0) invert(1);
    transition: background-color .18s ease;
}
.store-auth-modal-close:hover { background-color: rgba(255,255,255,.38); }
@media (max-width: 480px) {
    .store-auth-modal .modal-dialog { margin: 14px; }
    .auth-card-body, .store-auth-modal .auth-card-header { padding-left: 24px; padding-right: 24px; }
}
.auth-form-group { margin-bottom: 14px; }
.auth-form-group label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--text-sec); margin-bottom: 5px;
}
.auth-input {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--surface-2); color: var(--text); font-size: .93rem;
    transition: border-color var(--transition);
}
.auth-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.auth-input.is-invalid { border-color: #e53e3e; }
.auth-error { color: #e53e3e; font-size: .8rem; margin-top: 4px; }
.auth-submit-btn {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border: none; border-radius: 11px;
    font-size: 1rem; font-weight: 700; cursor: pointer;
    transition: all var(--transition); margin-top: 2px;
}
.auth-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(153,178,209,.5); }
.auth-divider {
    text-align: center; margin: 14px 0;
    position: relative; color: var(--text-muted); font-size: .82rem;
}
.auth-divider::before, .auth-divider::after {
    content: ''; position: absolute; top: 50%;
    width: 38%; height: 1px; background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-link-row {
    text-align: center; margin-top: 14px;
    font-size: .88rem; color: var(--text-sec);
}
.auth-link-row a { color: var(--primary-dark); font-weight: 700; }
.auth-google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px;
    background: #fff; border: 1.5px solid var(--border); border-radius: 11px;
    color: var(--text); font-size: .92rem; font-weight: 600; text-decoration: none;
    transition: all var(--transition);
}
.auth-google-btn:hover { border-color: var(--primary); background: var(--surface-2); color: var(--text); }

/* ════════════════════════════════════════════════════
   ORDER SUCCESS
═══════════════════════════════════════════════════════ */
.success-page {
    min-height: calc(100vh - var(--header-h));
    display: flex; align-items: center; justify-content: center;
    padding: 60px 24px;
}
.success-card {
    max-width: 920px; width: 100%;
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); text-align: center;
    padding: 60px 56px;
}
@media (max-width: 600px) {
    .success-card { padding: 40px 22px; }
}
.success-icon {
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px; font-size: 2.5rem;
}
.success-title { font-size: 1.8rem; font-weight: 900; margin-bottom: 12px; }
.success-sub { color: var(--text-sec); line-height: 1.6; margin-bottom: 32px; }
.success-order-num {
    background: var(--surface-2); border-radius: 10px;
    padding: 14px; font-weight: 700; font-size: 1.1rem;
    margin-bottom: 28px; letter-spacing: .04em;
    color: var(--primary-dark);
}

/* ════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.store-footer {
    background: var(--surface); color: var(--text-sec);
    border-top: 1px solid var(--border);
    padding: 56px 24px 32px; margin-top: 80px;
}
/* La franja final del home ya trae su propio "aire"; no hace falta el hueco extra */
.store-page:has(> .final-cta:last-child) + .store-footer {
    margin-top: 0;
}
.store-footer-container { max-width: 1280px; margin: 0 auto; }

/* Marca siempre arriba en su propio renglón (nunca al lado de los
   enlaces); los 3 grupos de enlaces (Tienda/Cuenta/Contacto) forman su
   propia cuadrícula debajo, que se acomoda sola según el espacio
   disponible — 1 columna en xs muy angosto, 2-3 según vaya cabiendo,
   evitando que "Contacto" (el más largo, con el correo) se apriete y
   se desborde. Desde escritorio, la marca pasa a ir al lado. */
.store-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 32px 24px;
}
@media (min-width: 992px) {
    .store-footer-grid { flex-direction: row; align-items: flex-start; gap: 40px; }
    .footer-brand { flex: 0 0 300px; }
    .footer-links-grid { flex: 1; grid-template-columns: repeat(3, 1fr); }
}

.footer-brand img { height: 36px; margin-bottom: 14px; }
.footer-brand p { font-size: .88rem; line-height: 1.7; max-width: 280px; margin-bottom: 18px; color: var(--text-sec); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--primary-dark); font-size: .95rem;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social a:hover {
    background: var(--accent-dark); border-color: var(--accent-dark);
    color: #fff; transform: translateY(-2px);
}

.footer-col h4 {
    display: flex; align-items: center; gap: 8px;
    color: var(--text); font-size: .95rem; font-weight: 700; margin-bottom: 16px;
}
.footer-col h4 i { color: var(--accent-dark); font-size: .85rem; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: .88rem; color: var(--text-sec); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--primary-dark); }

.footer-contact-list li a,
.footer-contact-list li > span {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .88rem; color: var(--text-sec);
    min-width: 0;
}
.footer-contact-list li a:hover { color: var(--primary-dark); }
.footer-contact-list i { color: var(--accent-dark); font-size: .82rem; width: 14px; text-align: center; flex-shrink: 0; margin-top: 3px; }
/* El correo es lo más largo de la columna — que se parta en vez de
   desbordar la tarjeta cuando la columna queda angosta. */
.footer-contact-list li a span, .footer-contact-list li > span > span {
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}

.store-footer-bottom {
    max-width: 1280px; margin: 40px auto 0;
    padding-top: 24px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    font-size: .82rem; flex-wrap: wrap; gap: 12px;
    color: var(--text-muted);
}
.footer-privacy-link { color: var(--text-sec); text-decoration: none; transition: color var(--transition); }
.footer-privacy-link:hover { color: var(--primary-dark); }
.footer-credit-link {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}
.footer-credit-link:hover { color: var(--primary); }

/* ════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
═══════════════════════════════════════════════════════ */
.whatsapp-float-btn {
    position: fixed; right: 24px; bottom: 24px; z-index: 9998;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 8px 22px rgba(37,211,102,.45);
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(37,211,102,.55);
    color: #fff;
}
@media (max-width: 767px) {
    .whatsapp-float-btn { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 1.5rem; }
}

/* ════════════════════════════════════════════════════
   TOAST NOTIFICATION
═══════════════════════════════════════════════════════ */
.store-toast-container {
    /* bottom más alto que el botón flotante de WhatsApp (mismo rincón) para
       que los toasts aparezcan encima de él, no se lo tapen */
    position: fixed; bottom: 96px; right: 28px; z-index: 9999;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.store-toast {
    background: var(--text); color: #fff;
    padding: 14px 20px; border-radius: 12px;
    font-size: .9rem; font-weight: 600;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 10px;
    pointer-events: all;
    animation: toastIn .3s ease;
    max-width: 340px;
}
.store-toast.toast-success { background: #2d8a4e; }
.store-toast.toast-error   { background: #c53030; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
.store-toast.out { animation: toastOut .3s ease forwards; }

/* ════════════════════════════════════════════════════
   PAGE HEADER (inner pages)
═══════════════════════════════════════════════════════ */
.store-page-header {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
    padding: 48px 24px 42px;
    text-align: center;
}
.store-page-header h1 { font-size: 2rem; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.store-page-header p { color: var(--text-sec); font-size: .95rem; }
.store-breadcrumb {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: .82rem; margin-top: 14px; color: var(--text-muted);
}
.store-breadcrumb a { color: var(--primary-dark); font-weight: 600; }
.store-breadcrumb .sep { opacity: .5; }

/* ════════════════════════════════════════════════════
   LOADING SKELETON
═══════════════════════════════════════════════════════ */
@keyframes skeleton-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 6px;
}

/* ════════════════════════════════════════════════════
   HERO — Light & clean (sin filtros pesados)
═══════════════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

/* ════════════════════════════════════════════════════
   HERO — imagen grande izquierda, texto derecha
═══════════════════════════════════════════════════════ */
.hero-v2 {
    position: relative; overflow: hidden;
    min-height: 100vh;
    background: #fff;
    display: flex; align-items: center;
    padding-top: var(--header-h);
}

/* Fondo de color detrás del área de imagen */
.hero-v2-bg-slab {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 48%;
    background: linear-gradient(160deg, #edf3f9 0%, #f5eee6 100%);
    z-index: 0; pointer-events: none;
}
/* Cuadrícula de puntos decorativos en la esquina derecha */
.hero-v2-dots {
    position: absolute; right: 4%; bottom: 12%;
    width: 160px; height: 160px; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(153,178,209,.4) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
}

/* Grid interno: imagen | texto */
.hero-v2-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1280px; margin: 0 auto;
    padding: 64px 32px 72px;
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 56px; align-items: center;
}

/* ── Lado imagen ────────────────────────────────── */
.hero-img-side { position: relative; }

/* Rectángulo de acento detrás de la foto */
.hero-img-accent-block {
    position: absolute;
    width: 82%; height: 82%;
    bottom: -18px; right: -18px;
    background: linear-gradient(145deg, var(--primary-light), var(--accent-light));
    border-radius: 22px;
    z-index: 0;
}
/* Cuadrado pequeño en esquina superior izquierda */
.hero-img-corner {
    position: absolute;
    width: 60px; height: 60px;
    top: -16px; left: -16px;
    border: 3px solid var(--accent);
    border-radius: 14px;
    z-index: 0;
}

/* Foto principal */
.hero-img-main {
    position: relative; z-index: 1;
    border-radius: 20px; overflow: hidden;
    aspect-ratio: 3/4; width: 100%;
    max-width: 380px; margin-left: auto;
    box-shadow: 0 24px 56px rgba(30,42,58,.16);
    background: var(--surface-2);
}
.hero-img-main img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-img-no-img {
    width:100%; height:100%; min-height:380px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    color: var(--primary-dark);
}
.hero-img-no-img img { height: 90px; opacity: .6; }

/* Badge flotante sobre la foto */
.hero-img-float-badge {
    position: absolute; z-index: 3;
    bottom: 24px; left: -22px;
    background: #fff; border-radius: 14px;
    padding: 11px 16px; box-shadow: 0 6px 24px rgba(30,42,58,.13);
    display: flex; align-items: center; gap: 11px;
    border: 1.5px solid var(--border); min-width: 162px;
}
.hero-float-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem;
}
.hero-float-num   { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.hero-float-label { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* Badge en la esquina superior derecha de la foto */
.hero-img-tag {
    position: absolute; top: 16px; right: -14px; z-index: 3;
    background: var(--accent); color: #fff;
    border-radius: 10px; padding: 6px 12px;
    font-size: .72rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; box-shadow: 0 3px 12px rgba(208,183,153,.45);
}

/* ── Lado texto ─────────────────────────────────── */
.hero-text-side { display: flex; flex-direction: column; gap: 0; }

.hero-v2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(153,178,209,.12); border: 1.5px solid rgba(153,178,209,.28);
    border-radius: 100px; padding: 5px 14px;
    font-size: .76rem; font-weight: 700; color: var(--primary-dark);
    letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 20px; align-self: flex-start;
    animation: fadeUp .55s both;
}
.hero-v2-eyebrow span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-dark); flex-shrink: 0;
    animation: pulse 2s infinite;
}

.hero-v2-title {
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 900; line-height: 1.07;
    letter-spacing: -.035em; color: var(--text);
    margin-bottom: 20px;
    animation: fadeUp .55s .08s both;
}
/* Nombre de marca grande con gradiente */
.hero-brand-name {
    display: block;
    font-size: clamp(3rem, 6vw, 5rem);
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1; margin-bottom: 6px;
}

.hero-v2-desc {
    font-size: 1rem; color: var(--text-sec);
    line-height: 1.78; margin-bottom: 32px; max-width: 430px;
    animation: fadeUp .55s .16s both;
}

.hero-v2-ctas {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    animation: fadeUp .55s .24s both;
}
.hero-v2-cta-primary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border-radius: 12px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff; font-size: .95rem; font-weight: 700; border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(208,183,153,.38);
    transition: all var(--transition);
}
.hero-v2-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 24px rgba(208,183,153,.5); }
.hero-v2-cta-secondary {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 20px; border-radius: 12px;
    background: transparent; border: 1.5px solid var(--border);
    color: var(--text-sec); font-size: .95rem; font-weight: 600; cursor: pointer;
    transition: all var(--transition);
}
.hero-v2-cta-secondary:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-light); }

/* Stats bar */
.hero-v2-stats {
    display: flex; align-items: center; gap: 24px;
    margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border);
    animation: fadeUp .55s .32s both;
}
.hero-v2-stat-num   { font-size: 1.7rem; font-weight: 900; color: var(--text); line-height: 1; margin-bottom: 3px; }
.hero-v2-stat-num span { color: var(--accent-dark); }
.hero-v2-stat-label { font-size: .73rem; color: var(--text-muted); font-weight: 500; }
.hero-v2-stat-sep   { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; }

/* Scroll hint */
.hero-v2-scroll {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--text-muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; animation: fadeUp .55s .5s both;
}
.scroll-line {
    width: 1px; height: 32px;
    background: linear-gradient(to bottom, var(--primary), transparent);
}

/* Unused selectors kept for compat */
.hero-v2-shape-r, .hero-v2-dot-grid, .hero-v2-circle-deco,
.hero-v2-mosaic, .mosaic-card, .mosaic-c1, .mosaic-c2, .mosaic-c3, .mosaic-c4,
.mosaic-no-img, .mosaic-float-badge, .mosaic-badge-top, .mosaic-badge-bot,
.mosaic-badge-icon, .mosaic-badge-sub { display: none; }

/* ════════════════════════════════════════════════════
   HERO V3 — Logo badge + stacked product cards
═══════════════════════════════════════════════════════ */
.hero-v3 {
    position: relative; overflow: hidden;
    min-height: 92vh;
    background: #fff;
    display: flex; align-items: center;
    padding-top: var(--header-h);
}
/* Soft ambient blobs — no blur/filter */
.hero-v3-blob-a {
    position: absolute; top: -200px; right: -200px;
    width: 680px; height: 680px; border-radius: 50%;
    background: radial-gradient(circle, rgba(153,178,209,.13) 0%, transparent 62%);
    pointer-events: none; z-index: 0;
}
.hero-v3-blob-b {
    position: absolute; bottom: -130px; left: -120px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(208,183,153,.10) 0%, transparent 62%);
    pointer-events: none; z-index: 0;
}
.hero-v3-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: 1220px; margin: 0 auto;
    padding: 56px 40px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
}

/* ── Logo block ── */
.hero-v3-logo {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 28px;
}
.hero-v3-logo-circle {
    width: 68px; height: 68px; flex-shrink: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #edf3f9 0%, #f5eee6 100%);
    border: 2px solid rgba(153,178,209,.32);
    box-shadow: 0 6px 24px rgba(153,178,209,.22);
    display: flex; align-items: center; justify-content: center;
    padding: 11px;
}
.hero-v3-logo-circle img { width:100%; height:100%; object-fit:contain; }
.hero-v3-logo-name {
    font-size: 1.4rem; font-weight: 900; line-height: 1; letter-spacing: -.025em;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-v3-logo-sub {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-muted); font-weight: 500; margin-top: 4px;
}

/* ── Eyebrow ── */
.hero-v3-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--primary-dark);
    background: rgba(153,178,209,.11); border: 1px solid rgba(153,178,209,.26);
    padding: 6px 14px; border-radius: 100px;
    margin-bottom: 18px;
    animation: fadeUp .5s both;
}
.hero-v3-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); display: inline-block;
    animation: pulse 2.2s infinite;
}

/* ── Headline ── */
.hero-v3-title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 900; color: var(--text);
    line-height: 1.09; letter-spacing: -.03em;
    margin-bottom: 18px;
    animation: fadeUp .5s .07s both;
}
.hero-v3-title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Description ── */
.hero-v3-desc {
    font-size: .96rem; color: var(--text-sec);
    line-height: 1.78; margin-bottom: 28px; max-width: 440px;
    animation: fadeUp .5s .14s both;
}

/* ── CTAs ── */
.hero-v3-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 36px;
    animation: fadeUp .5s .20s both;
}

/* ── Stats bar ── */
.hero-v3-stats {
    display: flex; align-items: center; gap: 0;
    padding-top: 22px; border-top: 1px solid var(--border);
    animation: fadeUp .5s .27s both;
}
.hero-v3-stat { flex: 1; text-align: center; }
.hero-v3-stat:first-child { text-align: left; }
.hero-v3-stat:last-child  { text-align: right; }
.hero-v3-stat-num {
    font-size: 1.45rem; font-weight: 900; color: var(--text);
    letter-spacing: -.02em; line-height: 1;
}
.hero-v3-stat-label {
    font-size: .66rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-top: 4px;
}
.hero-v3-stat-sep { width:1px; height:34px; background:var(--border); flex-shrink:0; }

/* ── Visual wrapper ── */
.hero-v3-visual {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 500px;
}
.hero-v3-deco-ring {
    position: absolute; top: 20px; right: 20px;
    width: 90px; height: 90px; border-radius: 50%;
    border: 3px solid var(--primary-light); z-index: 0;
}
.hero-v3-deco-dots {
    position: absolute; bottom: 30px; left: 6px;
    width: 72px; height: 72px; z-index: 0; opacity: .5;
    background-image: radial-gradient(circle, var(--border) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}

/* ── Cards stack ── */
.hero-v3-stack {
    position: relative; width: 310px; height: 460px;
}
.hero-v3-card {
    position: absolute;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid rgba(230,237,247,.9);
    transition: transform .3s ease;
}
.hero-v3-card:hover { transform: translateY(-8px) scale(1.03) !important; z-index: 10 !important; }

.hero-v3-card-img { overflow: hidden; background: var(--surface-2); }
.hero-v3-card-img img { width:100%; height:100%; object-fit:cover; display:block; }

.hero-v3-card-foot {
    padding: 9px 12px 11px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    border-top: 1px solid var(--border);
}
.hero-v3-card-name {
    font-size: .73rem; font-weight: 700; color: var(--text);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 105px;
}
.hero-v3-card-price {
    font-size: .78rem; font-weight: 900; color: var(--primary-dark); white-space: nowrap;
}

/* Card 1 — principal al frente */
.hero-v3-card-main {
    width: 215px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    box-shadow: 0 24px 64px rgba(30,42,58,.16);
}
.hero-v3-card-main .hero-v3-card-img { height: 258px; }

/* Card 2 — atrás a la izquierda */
.hero-v3-card-left {
    width: 162px;
    top: 9%; left: -16px;
    transform: rotate(-7deg);
    z-index: 2;
    box-shadow: 0 10px 30px rgba(30,42,58,.09);
}
.hero-v3-card-left .hero-v3-card-img { height: 156px; }

/* Card 3 — atrás a la derecha */
.hero-v3-card-right {
    width: 162px;
    bottom: 7%; right: -16px;
    transform: rotate(6deg);
    z-index: 2;
    box-shadow: 0 10px 30px rgba(30,42,58,.09);
}
.hero-v3-card-right .hero-v3-card-img { height: 156px; }

/* ── Badge flotante ── */
.hero-v3-float-badge {
    position: absolute; bottom: 48px; left: -14px;
    z-index: 5;
    background: #fff; border-radius: 14px;
    padding: 10px 15px; border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(30,42,58,.11);
    display: flex; align-items: center; gap: 10px; min-width: 152px;
}
.hero-v3-float-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .88rem;
}
.hero-v3-float-num  { font-size: 1rem; font-weight: 900; color: var(--text); line-height:1; }
.hero-v3-float-lbl  { font-size: .65rem; color: var(--text-muted); margin-top:2px; }

/* ── Responsive ── */
@media (max-width: 960px) {
    .hero-v3-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; padding: 56px 28px 60px; }
    .hero-v3-logo  { justify-content: center; }
    .hero-v3-eyebrow { align-self: center; }
    .hero-v3-desc  { margin-left: auto; margin-right: auto; }
    .hero-v3-ctas  { justify-content: center; }
    .hero-v3-stat:first-child { text-align: center; }
    .hero-v3-stat:last-child  { text-align: center; }
    .hero-v3-visual { min-height: 370px; order: -1; }
    .hero-v3-stack  { width: 270px; height: 370px; }
    .hero-v3-card-main { width: 182px; }
    .hero-v3-card-main .hero-v3-card-img { height: 210px; }
    .hero-v3-card-left, .hero-v3-card-right { width: 138px; }
    .hero-v3-card-left .hero-v3-card-img,
    .hero-v3-card-right .hero-v3-card-img  { height: 126px; }
    .hero-v3-float-badge { left: 4px; }
}
@media (max-width: 520px) {
    .hero-v3-stack { width: 238px; height: 320px; }
    .hero-v3-card-main { width: 158px; }
    .hero-v3-card-main .hero-v3-card-img { height: 178px; }
    .hero-v3-card-left, .hero-v3-card-right { width: 118px; }
    .hero-v3-card-left .hero-v3-card-img,
    .hero-v3-card-right .hero-v3-card-img  { height: 108px; }
    .hero-v3-float-badge { display: none; }
}

/* ════════════════════════════════════════════════════
   HERO V4 — Split panel: gradiente izquierda / fotos derecha
═══════════════════════════════════════════════════════ */
.hero-v4 {
    display: grid;
    grid-template-columns: 52fr 48fr;
    min-height: calc(100vh - var(--header-h));
    margin-top: var(--header-h);
    overflow: hidden;
}

/* ── Panel izquierdo (gradiente) ── */
.hero-v4-left {
    background: linear-gradient(155deg, #dfe9f5 0%, #f0e3d4 100%);
    display: flex; flex-direction: column; justify-content: center;
    padding: 64px 52px 64px 60px;
    position: relative; overflow: hidden;
}
/* Círculos decorativos sin blur */
.hero-v4-left::before {
    content: ''; position: absolute; top: -100px; left: -100px;
    width: 340px; height: 340px; border-radius: 50%;
    background: rgba(255,255,255,.18); pointer-events: none;
}
.hero-v4-left::after {
    content: ''; position: absolute; bottom: -70px; right: -50px;
    width: 240px; height: 240px; border-radius: 50%;
    background: rgba(255,255,255,.12); pointer-events: none;
}

/* Logo badge dentro del panel */
.hero-v4-brand {
    display: inline-flex; align-items: center; gap: 13px;
    background: rgba(255,255,255,.58);
    border: 1.5px solid rgba(255,255,255,.75);
    border-radius: 16px; padding: 10px 20px 10px 12px;
    margin-bottom: 34px; width: fit-content;
    box-shadow: 0 4px 16px rgba(153,178,209,.15);
}
.hero-v4-brand img {
    width: 38px; height: 38px; object-fit: contain; border-radius: 8px;
}
.hero-v4-brand-name {
    font-size: 1.08rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
    color: var(--primary-dark);
}
.hero-v4-brand-sub {
    font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-sec); font-weight: 500; margin-top: 3px;
}

/* Headline */
.hero-v4-title {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 900; color: var(--text);
    line-height: 1.06; letter-spacing: -.04em;
    margin-bottom: 18px;
    animation: fadeUp .5s both;
}
.hero-v4-title em {
    font-style: normal; color: var(--primary-dark);
}

/* Descripción */
.hero-v4-desc {
    font-size: .96rem; color: var(--text-sec);
    line-height: 1.75; margin-bottom: 30px; max-width: 400px;
    animation: fadeUp .5s .09s both;
}

/* CTAs */
.hero-v4-ctas {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-bottom: 36px;
    animation: fadeUp .5s .17s both;
}

/* Trust chips */
.hero-v4-trust {
    display: flex; gap: 9px; flex-wrap: wrap;
    animation: fadeUp .5s .24s both;
}
.hero-v4-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 100px; padding: 6px 14px;
    font-size: .74rem; font-weight: 600; color: var(--text-sec);
}
.hero-v4-chip i { color: var(--primary-dark); font-size: .78rem; }

/* ── Panel derecho (blanco — fotos) ── */
.hero-v4-right {
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 36px 48px 36px 36px;
    position: relative;
}

/* Showcase container */
.hero-v4-showcase {
    width: 100%; max-width: 420px;
    display: flex; flex-direction: column; gap: 12px;
    height: 100%; max-height: 560px;
}

/* Imagen principal */
.hero-v4-main-img {
    flex: 1; border-radius: 22px; overflow: hidden;
    background: var(--surface-2);
    position: relative; min-height: 300px;
}
.hero-v4-main-img > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-v4-img-tag {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,255,255,.92);
    border-radius: 9px; padding: 5px 12px;
    font-size: .71rem; font-weight: 800;
    color: var(--accent-dark);
    border: 1px solid rgba(208,183,153,.28);
}
.hero-v4-img-price {
    position: absolute; bottom: 14px; right: 14px;
    background: rgba(30,42,58,.82);
    border-radius: 9px; padding: 6px 13px;
    font-size: .82rem; font-weight: 900; color: #fff;
}

/* Sub-imágenes */
.hero-v4-sub-imgs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-shrink: 0;
}
.hero-v4-sub-img {
    border-radius: 16px; overflow: hidden;
    background: var(--surface-2);
    aspect-ratio: 4/3; position: relative;
}
.hero-v4-sub-img > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-v4-sub-price {
    position: absolute; bottom: 7px; right: 8px;
    background: rgba(30,42,58,.72);
    border-radius: 7px; padding: 3px 9px;
    font-size: .69rem; font-weight: 800; color: #fff;
}

/* Estado vacío */
.hero-v4-empty {
    width: 100%; aspect-ratio: 1; border-radius: 22px;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    display: flex; align-items: center; justify-content: center;
}
.hero-v4-empty img { width: 90px; opacity: .38; }

/* ── Responsive ── */
@media (max-width: 940px) {
    .hero-v4 { grid-template-columns: 1fr; }
    .hero-v4-left { padding: 52px 32px 48px; }
    .hero-v4-right { padding: 28px 32px 36px; max-height: 360px; }
    .hero-v4-showcase { max-height: 300px; flex-direction: row; gap: 10px; }
    .hero-v4-main-img { flex: 1; min-height: 0; border-radius: 16px; }
    .hero-v4-sub-imgs { display: none; }
}
@media (max-width: 540px) {
    .hero-v4-left { padding: 40px 22px; }
    .hero-v4-right { padding: 20px 22px 28px; max-height: 280px; }
    .hero-v4-brand-sub { display: none; }
}

/* ════════════════════════════════════════════════════
   HERO V5 — Brand statement, logo como protagonista
═══════════════════════════════════════════════════════ */
.hero-v5 {
    position: relative;
    /* Sin margin-top fijo — el padding-top absorbe la navbar */
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 60px;
    background: #eaf1f9; /* Azul suave, sin amarillo */
    display: flex; align-items: flex-start;
    overflow: hidden;
    min-height: calc(100vh - var(--header-h));
}
/* Barra de acento izquierda */
.hero-v5::before {
    content: '';
    position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
    border-radius: 0 4px 4px 0;
    z-index: 2;
}
/* Blobs azulados */
.hero-v5-blob-a {
    position: absolute; top: -140px; right: -140px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(153,178,209,.18) 0%, transparent 62%);
    pointer-events: none;
}
.hero-v5-blob-b {
    position: absolute; bottom: -100px; left: -80px;
    width: 380px; height: 380px; border-radius: 50%;
    background: radial-gradient(circle, rgba(122,151,188,.12) 0%, transparent 62%);
    pointer-events: none;
}
.hero-v5-dots {
    position: absolute; bottom: 12%; right: 5%;
    width: 100px; height: 100px; opacity: .38; pointer-events: none;
    background-image: radial-gradient(circle, rgba(122,151,188,.6) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
}

/* Grid interior */
.hero-v5-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: 1220px; margin: 0 auto;
    padding: 0 72px 0 80px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 64px; align-items: center;
}

/* ── Lado texto ── */
.hero-v5-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(153,178,209,.1); border: 1px solid rgba(153,178,209,.25);
    border-radius: 100px; padding: 7px 16px;
    font-size: .76rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--primary-dark);
    margin-bottom: 28px;
    animation: fadeUp .55s both;
}
.hero-v5-title {
    font-size: clamp(3rem, 5.2vw, 5rem);
    font-weight: 900; color: var(--text);
    line-height: 1.04; letter-spacing: -.042em;
    margin-bottom: 22px;
    animation: fadeUp .55s .07s both;
}
.hero-v5-title-accent {
    display: block;
    background: linear-gradient(125deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-v5-desc {
    font-size: 1rem; color: var(--text-sec);
    line-height: 1.8; margin-bottom: 36px; max-width: 480px;
    animation: fadeUp .55s .14s both;
}
.hero-v5-ctas {
    display: flex; gap: 13px; flex-wrap: wrap; margin-bottom: 48px;
    animation: fadeUp .55s .21s both;
}
.hero-v5-stats {
    display: flex; align-items: flex-start; gap: 36px;
    padding-top: 28px; border-top: 1px solid rgba(0,0,0,.08);
    animation: fadeUp .55s .28s both;
}
.hero-v5-stat-num {
    font-size: 1.75rem; font-weight: 900; color: var(--text); line-height: 1;
}
.hero-v5-stat-num small { font-size: .65em; color: var(--accent-dark); }
.hero-v5-stat-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted); margin-top: 5px;
}

/* ── Lado visual — sello del logo ── */
.hero-v5-seal {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: fadeUp .55s .1s both;
}
/* Anillos decorativos */
.hero-v5-ring {
    position: absolute; border-radius: 50%; pointer-events: none;
}
.hero-v5-ring-1 {
    width: 342px; height: 342px;
    border: 2px dashed rgba(153,178,209,.3);
}
.hero-v5-ring-2 {
    width: 400px; height: 400px;
    border: 1.5px solid rgba(208,183,153,.18);
}
/* Círculo exterior con gradiente */
.hero-v5-seal-outer {
    width: 296px; height: 296px; border-radius: 50%;
    background: linear-gradient(135deg, #dce9f6 0%, #f0e3d4 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 32px 80px rgba(153,178,209,.28), 0 8px 24px rgba(208,183,153,.18);
    position: relative; z-index: 1;
}
/* Círculo interior blanco */
.hero-v5-seal-inner {
    width: 234px; height: 234px; border-radius: 50%;
    background: #fff; padding: 36px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 10px rgba(30,42,58,.05);
}
.hero-v5-seal-inner img { width: 100%; height: 100%; object-fit: contain; }

/* Badges orbitales flotantes */
.hero-v5-badge {
    position: absolute; z-index: 2;
    background: #fff; border-radius: 12px;
    padding: 9px 15px; box-shadow: 0 6px 22px rgba(30,42,58,.11);
    border: 1px solid var(--border);
    font-size: .74rem; font-weight: 700;
    display: flex; align-items: center; gap: 7px;
    white-space: nowrap; animation: fadeUp .55s .3s both;
}
.hero-v5-badge-1 { top: -4px; right: -18px; color: var(--primary-dark); }
.hero-v5-badge-2 { bottom: 28px; left: -28px; color: var(--accent-dark); }
.hero-v5-badge-3 { bottom: -8px; right: 12px; color: var(--text-sec); }

/* ── Responsive ── */
@media (max-width: 960px) {
    .hero-v5 { padding-top: calc(var(--header-h) + 32px); padding-bottom: 48px; }
    .hero-v5-inner {
        grid-template-columns: 1fr; gap: 40px;
        padding: 0 28px; text-align: center;
    }
    .hero-v5-eyebrow { margin-left: auto; margin-right: auto; }
    .hero-v5-desc    { margin-left: auto; margin-right: auto; }
    .hero-v5-ctas    { justify-content: center; }
    .hero-v5-stats   { justify-content: center; }
    .hero-v5-seal    { order: -1; }
    .hero-v5-seal-outer { width: 210px; height: 210px; }
    .hero-v5-seal-inner { width: 166px; height: 166px; padding: 26px; }
    .hero-v5-ring-1  { width: 248px; height: 248px; }
    .hero-v5-ring-2  { width: 294px; height: 294px; }
    .hero-v5-badge-1 { top: -2px; right: 20px; }
    .hero-v5-badge-2 { left: 10px; bottom: 10px; }
    .hero-v5-badge-3 { display: none; }
}
@media (max-width: 540px) {
    .hero-v5 { padding-top: calc(var(--header-h) + 24px); }
    .hero-v5-inner { padding: 0 20px; gap: 32px; }
    .hero-v5-seal-outer { width: 180px; height: 180px; }
    .hero-v5-seal-inner { width: 142px; height: 142px; padding: 22px; }
    .hero-v5-ring-1 { width: 212px; height: 212px; }
    .hero-v5-ring-2 { width: 250px; height: 250px; }
    .hero-v5-stats  { gap: 20px; flex-wrap: wrap; }
    .hero-v5-badge-2 { display: none; }
}

/* ════════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════════ */
.about-section {
    padding: 100px 24px;
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.about-visual {
    position: relative;
}
.about-img-frame {
    position: relative; border-radius: 24px; overflow: hidden;
    aspect-ratio: 4/5; max-width: 420px;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
}
.about-img-frame img { width:100%; height:100%; object-fit:cover; }
.about-img-deco {
    position: absolute; border-radius: 20px;
    border: 3px solid var(--accent);
    width: 60%; aspect-ratio: 1/1;
    bottom: -24px; right: -24px; z-index: -1;
}
.about-img-deco-2 {
    position: absolute; border-radius: 16px;
    background: var(--primary-light);
    width: 40%; height: 36%;
    top: -20px; left: -20px; z-index: -1;
}
.about-float-pill {
    position: absolute; bottom: 24px; right: -28px;
    background: var(--surface); border-radius: 14px; padding: 14px 20px;
    box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: 12px;
    min-width: 180px;
}
.about-float-pill-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem;
}
.about-float-pill-num { font-size: 1.4rem; font-weight: 900; line-height: 1; }
.about-float-pill-label { font-size: .75rem; color: var(--text-muted); }
.about-text { display: flex; flex-direction: column; gap: 22px; }
.about-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 700; color: var(--accent-dark);
    text-transform: uppercase; letter-spacing: .08em;
}
.about-eyebrow::before { content:''; width:28px; height:2px; background:var(--accent); border-radius:2px; }
.about-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--text);
}
.about-title span { color: var(--primary-dark); }
.about-body { font-size: .97rem; color: var(--text-sec); line-height: 1.8; }
.about-milestones {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px;
}
.about-milestone {
    background: var(--surface-2); border-radius: 14px; padding: 18px;
    border-left: 3px solid var(--primary);
}
.about-milestone-num { font-size: 1.6rem; font-weight: 900; color: var(--primary-dark); line-height: 1; }
.about-milestone-label { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }
.about-signature {
    font-family: 'Georgia', serif; font-style: italic;
    font-size: 1.3rem; color: var(--accent-dark); margin-top: 4px;
}

/* ════════════════════════════════════════════════════
   TESTIMONIALS — Light warm
═══════════════════════════════════════════════════════ */
.testimonials-wrap {
    background: linear-gradient(160deg, #fdf8f3 0%, #f0f5fb 100%);
    padding: 88px 0; overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.testimonials-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.testimonials-header { text-align: center; margin-bottom: 52px; }
.testimonials-header .section-title { color: var(--text); }
.testimonials-header .section-sub   { color: var(--text-muted); }
.reviews-track-wrap { position: relative; }
.reviews-track-wrap::before,
.reviews-track-wrap::after {
    content:''; position:absolute; top:0; bottom:0; z-index:2; pointer-events:none; width:80px;
}
.reviews-track-wrap::before { left:0; background:linear-gradient(to right, #fdf8f3, transparent); }
.reviews-track-wrap::after  { right:0; background:linear-gradient(to left, #f0f5fb, transparent); }
.reviews-track {
    display: flex; gap: 20px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 12px 24px 20px;
    scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.review-card {
    flex-shrink: 0; width: 310px;
    background: #fff; border: 1.5px solid var(--border);
    border-radius: 18px; padding: 26px;
    scroll-snap-align: start;
    transition: box-shadow var(--transition), transform var(--transition);
    box-shadow: var(--shadow-sm);
}
.review-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.review-stars { color: var(--accent-dark); font-size: .92rem; letter-spacing: 2px; margin-bottom: 12px; }
.review-text {
    font-size: .9rem; color: var(--text-sec); line-height: 1.7;
    margin-bottom: 18px; font-style: italic;
    position: relative; padding-left: 20px;
}
.review-text::before {
    content: '"'; position: absolute; left: 0; top: -6px;
    font-size: 2.4rem; color: var(--accent); opacity: .5;
    line-height: 1; font-style: normal;
}
.review-author { display: flex; align-items: center; gap: 10px; }
.review-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: .9rem;
}
.review-name  { font-size: .87rem; font-weight: 700; color: var(--text); }
.review-from  { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.reviews-dots { display:flex; justify-content:center; gap:8px; margin-top:28px; }
.reviews-dot {
    width:8px; height:8px; border-radius:50%;
    background: var(--border); border:none; cursor:pointer; transition:.2s; padding:0;
}
.reviews-dot.active { background: var(--accent-dark); width:24px; border-radius:4px; }

/* ════════════════════════════════════════════════════
   HEADER BANNER CENTRADO — reutilizable (preventas, productos)
═══════════════════════════════════════════════════════ */
/* Header simple y compacto: centrado, banner bajo — con un fondo de
   partículas flotantes (JS, ver layouts/store.blade.php) para que no se
   vea plano, y un ícono chico como acento arriba del título. */
.store-hero-banner {
    position: relative; overflow: hidden;
    background: var(--primary-light);
    padding: 34px 0;
    text-align: center;
}
.store-hero-banner-pattern { display: none; }
.store-hero-banner-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.store-hero-banner-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; margin-bottom: 10px;
    background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--primary-dark); font-size: 1.05rem;
}
.store-hero-banner-inner {
    position: relative; z-index: 1;
    max-width: 640px; margin: 0 auto;
}
.store-hero-banner-breadcrumb {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
    font-size: .78rem; color: rgba(30,42,58,.55); margin-bottom: 8px;
}
.store-hero-banner-breadcrumb a {
    color: var(--primary-dark); font-weight: 700; text-decoration: none;
}
.store-hero-banner-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem); color: var(--primary-dark);
    margin-bottom: 4px; letter-spacing: -.02em;
}
.store-hero-banner-sub {
    font-size: .9rem; color: var(--text-sec);
    max-width: 460px; margin: 0 auto;
}

/* ════════════════════════════════════════════════════
   PREVENTAS SECTION
═══════════════════════════════════════════════════════ */
.preorder-section-wrap {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
/* ── Grid de tarjetas de preventa ── */
.preorder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}
.preorder-grid-4col {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .preorder-grid-4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .preorder-grid-4col { grid-template-columns: 1fr; } }

/* ── Grid de 2 columnas, tarjeta horizontal (página /tienda/preventas) ── */
.preorder-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) { .preorder-grid-2col { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════
   PREORDER POSTER CARD — 3 por fila. Foto completa de fondo, con una
   tarjetita de vidrio flotante (nombre + botones) sobre la parte inferior
   de la foto — nada de panel separado ni franja de ancho completo.
═══════════════════════════════════════════════════════ */
.preorder-poster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 992px) { .preorder-poster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .preorder-poster-grid { grid-template-columns: 1fr; }
    /* En una sola columna, 3:4 se ve exageradamente alto/recortado —
       proporción más ancha para que la foto se vea completa y natural. */
    .preorder-poster-card { aspect-ratio: 16 / 11; }
}

.preorder-poster-card {
    position: relative; border-radius: 20px; overflow: hidden;
    aspect-ratio: 3 / 4;
    box-shadow: 0 10px 28px rgba(30,42,58,.16);
    transition: transform .3s cubic-bezier(.34,1.2,.64,1), box-shadow .3s ease;
}
.preorder-poster-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(30,42,58,.24);
}
.preorder-poster-bg { position: absolute; inset: 0; cursor: zoom-in; background: #e8eef5; }
.preorder-poster-bg img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease, filter .3s ease;
}
.preorder-poster-card:hover .preorder-poster-bg img { transform: scale(1.06); }
.preorder-poster-card .preorder-card-deadline { top: 14px; right: 14px; }

/* Finalizada — misma forma que las activas, foto desaturada (igual que el
   resto del sitio marca las colecciones que ya cerraron). */
.preorder-poster-card-finished .preorder-poster-bg img { filter: grayscale(.85) opacity(.85); }
.preorder-poster-card-finished:hover .preorder-poster-bg img { filter: grayscale(0) opacity(1); }

/* Tarjetita de vidrio flotante — mismo tratamiento que el panel de texto
   del cover principal (.hero-photo-content): fondo oscuro semitransparente
   + blur + borde sutil, para que el texto tenga su propia superficie
   legible sin importar qué tan clara sea la foto detrás. */
.preorder-poster-content {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
    padding: 14px 16px 16px; border-radius: 14px;
    background: rgba(10,14,20,.46);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    color: #fff;
}
.preorder-poster-title {
    font-size: 1.05rem; font-weight: 800; line-height: 1.25;
    margin-bottom: 8px;
    text-shadow: 0 2px 16px rgba(0,0,0,.3);
}
.preorder-poster-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
    margin-bottom: 12px;
}
.preorder-poster-pieces, .preorder-poster-launch { font-size: .74rem; color: rgba(255,255,255,.78); white-space: nowrap; }
.preorder-poster-actions { display: flex; gap: 8px; }
.preorder-poster-btn {
    flex: 1; text-align: center; padding: 8px 12px; border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none; color: #fff; font-weight: 700; font-size: .78rem;
    box-shadow: 0 3px 12px rgba(122,151,188,.4);
    transition: box-shadow .2s ease, transform .2s ease;
}
.preorder-poster-btn:hover { box-shadow: 0 8px 20px rgba(122,151,188,.55); transform: translateY(-1px); color: #fff; }
.preorder-poster-btn-wa {
    flex-shrink: 0; width: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 9px; background: #25d366; color: #fff; font-size: 1rem;
    transition: background .2s ease;
}
.preorder-poster-btn-wa:hover { background: #1aac55; }

/* ════════════════════════════════════════════════════
   PREORDER CARD HORIZONTAL — foto completa a la izquierda
   (sin degradado ni texto encima), info a la derecha.
   Sigue en uso en "Preventas anteriores".
═══════════════════════════════════════════════════════ */
.preorder-card-h {
    background: var(--surface);
    border-radius: 20px;
    overflow: hidden;
    display: flex; flex-direction: row; align-items: stretch;
    border: 1.5px solid var(--border);
    box-shadow: 0 3px 14px rgba(30,42,58,.06);
    transition: transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .25s ease, border-color .22s ease;
}
.preorder-card-h:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 56px rgba(30,42,58,.13);
    border-color: var(--primary);
}
.preorder-card-h-cover-link {
    /* position:relative + la foto adentro en position:absolute la saca del
       cálculo de tamaño de flexbox — si no, la relación de aspecto NATURAL
       de la imagen "empuja" la fila a estirarse más de lo que el texto
       necesita (eso era el espacio en blanco de sobra). Así el alto real
       de la card lo define solo el lado de texto, y la foto (absoluta,
       inset:0) se estira exacto a esa medida, sin dejar hueco. */
    display: block; flex-shrink: 0; width: 46%; position: relative;
    max-height: 460px; overflow: hidden; cursor: pointer;
}
.preorder-card-h-cover-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.preorder-card-h-cover {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
}
.preorder-card-h-cover img {
    /* object-fit:cover evita cualquier distorsión — solo recorta el
       sobrante para llenar el espacio, nunca achata la imagen. */
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.34,1.06,.64,1), filter .3s ease;
}
.preorder-card-h:hover .preorder-card-h-cover img { transform: scale(1.05); }

/* Preventas anteriores (finalizadas) — blanco y negro hasta que pasas el
   mouse encima, mismo efecto que tenía el diseño viejo. */
.preorder-card-h-past .preorder-card-h-cover img {
    filter: grayscale(1) opacity(.82);
}
.preorder-card-h-past:hover .preorder-card-h-cover img {
    filter: grayscale(0) opacity(1);
}

.preorder-card-h-body {
    flex: 1; min-width: 0;
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 12px;
}
.preorder-card-h-top {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.preorder-card-h-title {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    color: var(--text); line-height: 1.25; margin: 0;
    width: 100%;
}
.preorder-card-h-top .preorder-card-deadline { position: static; backdrop-filter: none; flex-shrink: 0; }
.preorder-card-h-top .preorder-deadline-days { background: var(--surface-2); border-color: var(--border); }

.preorder-card-h-footer {
    /* Antes tenía margin-top:auto — empujaba los botones hasta el fondo de
       la card, dejando un hueco en blanco justo antes (el "espacio a la
       mitad" reportado). Sin eso, quedan pegados al contenido de arriba
       con el mismo gap que el resto. */
    display: flex; gap: 10px; padding-top: 6px;
}
.preorder-card-h-footer .preorder-card-btn-info,
.preorder-card-h-footer .preorder-card-btn-wa {
    flex: 1;
}

@media (max-width: 700px) {
    /* En columna ya no hay "estirar para igualar al hermano" — aquí sí
       necesita un alto propio explícito (position:absolute no tiene de
       dónde tomarlo si el contenedor no mide nada). */
    .preorder-card-h { flex-direction: column; }
    .preorder-card-h-cover-link { width: 100%; height: 220px; max-height: none; }
}

/* ════════════════════════════════════════════════════
   PREORDER CARD V2 — Redesign
   Cover + compact body + dual CTA
═══════════════════════════════════════════════════════ */
.preorder-card-v2 {
    background: var(--surface);
    border-radius: 20px;
    overflow: hidden;
    display: flex; flex-direction: column;
    border: 1.5px solid var(--border);
    box-shadow: 0 3px 14px rgba(30,42,58,.06);
    transition: transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .25s ease, border-color .22s ease;
    position: relative;
}
.preorder-card-v2:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 56px rgba(30,42,58,.13);
    border-color: var(--primary);
}

/* ── Cover image ── */
.preorder-card-cover {
    position: relative; height: 300px; overflow: hidden;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    flex-shrink: 0;
}
.preorder-card-cover > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.34,1.06,.64,1);
}
.preorder-card-v2:hover .preorder-card-cover > img { transform: scale(1.06); }

.preorder-card-cover-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(16,28,46,.72) 100%);
    pointer-events: none;
}

/* Collection name on image */
.preorder-card-cover-title {
    position: absolute; bottom: 12px; left: 16px; right: 10px; z-index: 1;
    font-size: 1rem; font-weight: 800; color: #fff; line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Deadline badge on image */
.preorder-card-deadline {
    position: absolute; top: 12px; right: 10px; z-index: 2;
    border-radius: 20px; padding: 4px 11px;
    font-size: .67rem; font-weight: 800; letter-spacing: .02em;
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3);
}
.preorder-deadline-days   { background: rgba(255,255,255,.88); color: var(--text); }
.preorder-deadline-urgent { background: rgba(220,53,69,.85); color: #fff; border-color: transparent; }
.preorder-deadline-open   { background: var(--primary-dark); color: #fff; border-color: transparent; }

/* ── Body ── */
.preorder-card-body {
    padding: 14px 16px 12px;
    display: flex; flex-direction: column; gap: 10px; flex: 1;
}

/* Product thumbnails */
.preorder-card-thumbs {
    display: flex; gap: 7px; overflow-x: auto;
    scrollbar-width: none; padding-bottom: 2px;
}
.preorder-card-thumbs::-webkit-scrollbar { display: none; }
.preorder-card-thumb {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.preorder-card-thumb-img {
    width: 60px; height: 60px; border-radius: 10px; overflow: hidden;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    transition: border-color .2s, transform .2s;
}
.preorder-card-thumb:hover .preorder-card-thumb-img {
    border-color: var(--primary); transform: scale(1.06);
}
.preorder-card-thumb-img img { width:100%; height:100%; object-fit:cover; display:block; }
.preorder-card-thumb-price {
    font-size: .62rem; font-weight: 800; color: var(--primary-dark); white-space: nowrap;
}
.preorder-card-thumb-name {
    font-size: .57rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px;
    text-align: center;
}

/* Price row */
.preorder-card-price-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.preorder-card-price-num {
    font-size: 1rem; font-weight: 900; color: var(--primary-dark); letter-spacing: -.02em;
}
.preorder-card-price-label { font-size: .76rem; font-weight: 600; color: #5a6b80; margin-top: 1px; }
.preorder-card-pieces {
    font-size: .68rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--surface-2); border-radius: 6px; padding: 3px 8px;
}

/* Launch date chip */
.preorder-card-launch {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 600; color: var(--accent-dark);
    background: var(--accent-light); border-radius: 8px; padding: 5px 11px;
    border: 1px solid rgba(208,183,153,.3);
}

/* ── Footer CTA ── */
.preorder-card-footer {
    padding: 0 18px 18px;
}
.preorder-card-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, #25D366, #1aac55);
    color: #fff; border-radius: 13px;
    font-size: .9rem; font-weight: 700; text-decoration: none;
    transition: opacity .2s, transform .2s;
}
.preorder-card-cta:hover { opacity: .92; transform: translateY(-1px); }
.preorder-card-cta i { font-size: 1.05rem; }

/* ── Estado vacío ── */
.preorder-empty {
    text-align: center; padding: 52px 24px; color: var(--text-muted);
    grid-column: 1 / -1;
}
.preorder-empty i { font-size: 2.5rem; opacity: .25; display: block; margin-bottom: 12px; }

/* ════════════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   CONTACT V2 — Dark bento
═══════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   CONTACT V2 — Brand palette (#99b2d1 / #d0b799)
═══════════════════════════════════════════════════════ */
.contact-v2-wrap {
    background: linear-gradient(160deg, #eef3f9 0%, #f5f0e8 100%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 80px 24px;
}
.contact-v2-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 48px;
}

/* Header */
.contact-v2-head { text-align: center; }
.contact-v2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid rgba(153,178,209,.4);
    border-radius: 100px; padding: 5px 18px;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em;
    margin-bottom: 16px;
}
.contact-v2-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 900; line-height: 1.15; color: var(--text);
    letter-spacing: -.03em; margin-bottom: 12px;
}
.contact-v2-title span {
    background: linear-gradient(125deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.contact-v2-desc {
    font-size: .97rem; color: var(--text-sec); line-height: 1.72;
    max-width: 500px; margin: 0 auto;
}

/* Channel cards grid */
.contact-v2-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 760px) { .contact-v2-channels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .contact-v2-channels { grid-template-columns: 1fr; } }

.contact-v2-card {
    border-radius: 18px; padding: 26px 22px;
    display: flex; flex-direction: column; gap: 12px;
    text-decoration: none;
    background: #fff;
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 12px rgba(30,42,58,.05);
    transition: transform .26s cubic-bezier(.34,1.2,.64,1), box-shadow .26s, border-color .2s;
    color: var(--text);
}
.contact-v2-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(30,42,58,.11);
    border-color: var(--primary);
}

/* Todos los canales usan la misma paleta de marca */
.cv2-wa, .cv2-ig, .cv2-em { background: #fff; }

.cv2-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
/* WA: accent dorado */
.cv2-wa .cv2-icon { background: var(--accent-light); color: var(--accent-dark); }
/* IG: primary azul-gris */
.cv2-ig .cv2-icon { background: var(--primary-light); color: var(--primary-dark); }
/* Email: mezcla accent claro */
.cv2-em .cv2-icon { background: linear-gradient(135deg, var(--primary-light), var(--accent-light)); color: var(--primary-dark); }

.cv2-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.cv2-sub   { font-size: .82rem; color: var(--text-sec); line-height: 1.55; flex: 1; }
.cv2-action {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .74rem; font-weight: 700;
    color: var(--primary-dark);
    padding: 5px 13px; border-radius: 20px;
    background: var(--primary-light);
    border: 1px solid rgba(153,178,209,.35);
    align-self: flex-start;
    transition: background .18s, color .18s;
}
.contact-v2-card:hover .cv2-action {
    background: var(--primary);
    color: #fff; border-color: var(--primary-dark);
}

/* Bottom: ubicación + horario */
.contact-v2-bottom {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 640px) { .contact-v2-bottom { grid-template-columns: 1fr; } }

.contact-v2-info-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 16px; padding: 24px 26px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 2px 10px rgba(30,42,58,.04);
}
.cv2-info-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
    display: flex; align-items: center; gap: 7px;
}
.cv2-info-title i { color: var(--primary-dark); }

.cv2-loc-val {
    font-size: .97rem; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 9px;
}
.cv2-loc-val i { color: var(--accent-dark); font-size: 1rem; }

.cv2-schedule-rows { display: flex; flex-direction: column; gap: 8px; }
.cv2-sched-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .86rem;
}
.cv2-sched-day   { color: var(--text-sec); }
.cv2-sched-hours { font-weight: 700; color: var(--text); }
.cv2-sched-hours.closed { color: var(--text-muted); font-weight: 500; }
.cv2-sched-divider { border: none; border-top: 1px solid var(--border); margin: 2px 0; }

/* ── Legacy classes kept for backward compat (no longer used in home) ── */
.contact-section-wrap { padding: 88px 24px; max-width: 1280px; margin: 0 auto; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-eyebrow { font-size: .78rem; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.contact-eyebrow::before { content:''; width:28px; height:2px; background:var(--accent); border-radius:2px; }
.contact-title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.2; color: var(--text); letter-spacing: -.02em; }
.contact-title span { color: var(--primary-dark); }
.contact-desc { font-size: .97rem; color: var(--text-sec); line-height: 1.75; }
.contact-items { display: flex; flex-direction: column; gap: 16px; }
.contact-item { display: flex; align-items: center; gap: 16px; background: var(--surface); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); }
.contact-item:hover { box-shadow: var(--shadow); transform: translateX(4px); }
.contact-item-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; }
.contact-item-icon.c-blue   { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.contact-item-icon.c-gold   { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.contact-item-icon.c-green  { background: linear-gradient(135deg, #4ade80, #16a34a); }
.contact-item-icon.c-purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.contact-item-label { font-size: .75rem; color: var(--text-muted); font-weight: 500; margin-bottom: 2px; }
.contact-item-value { font-size: .93rem; font-weight: 700; color: var(--text); }
.contact-map-wrap { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; position: relative; }
.contact-map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.contact-map-overlay-tag { position: absolute; top: 16px; left: 16px; background: var(--surface); border-radius: 10px; padding: 8px 14px; font-size: .82rem; font-weight: 700; color: var(--text); box-shadow: var(--shadow); display: flex; align-items: center; gap: 7px; }

/* ════════════════════════════════════════════════════
   RESPONSIVE — new sections
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-v2-inner     { grid-template-columns: 1fr; text-align: center; gap: 44px; padding-bottom: 72px; }
    .hero-v2-bg-slab   { display: none; }
    .hero-img-side     { display: flex; justify-content: center; }
    .hero-img-main     { max-width: 300px; margin: 0 auto; }
    .hero-img-float-badge { left: auto; right: -10px; bottom: 18px; }
    .hero-img-tag      { right: auto; left: 50%; transform: translateX(-50%); top: -14px; }
    .hero-text-side    { align-items: center; }
    .hero-v2-eyebrow   { align-self: center; }
    .hero-v2-desc      { max-width: 100%; }
    .hero-v2-ctas, .hero-v2-stats { justify-content: center; }
    .about-section     { grid-template-columns: 1fr; gap: 48px; }
    .about-visual      { display: flex; justify-content: center; padding: 0 14px; }
    .about-img-frame   { max-width: 340px; }
    .about-float-pill  { right: -10px; }
    .contact-layout    { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hero-v2-inner     { padding: 52px 20px 64px; gap: 32px; }
    .hero-img-main     { max-width: 260px; }
    .hero-img-accent-block { display: none; }
    .hero-img-corner   { display: none; }
    .hero-v2-stats     { gap: 14px; flex-wrap: wrap; justify-content: center; }
    .hero-v2-stat-sep  { display: none; }
    .about-milestones  { grid-template-columns: 1fr 1fr; }
    .review-card       { width: 278px; }
}
@media (max-width: 480px) {
    .about-milestones  { grid-template-columns: 1fr; }
    .hero-img-main     { max-width: 220px; }
    .hero-img-float-badge { display: none; }
    .about-visual      { padding: 0 20px; }
    .about-img-deco    { right: -10px; bottom: -14px; }
    .about-img-deco-2  { left: -10px; top: -14px; }
    .about-float-pill  { right: 0; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .store-hero-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .store-hero-visual { order: -1; }
    .store-hero-img-wrap { max-width: 360px; }
    .store-hero-text p { max-width: 100%; }
    .store-hero-actions { justify-content: center; }
    .product-detail-layout { grid-template-columns: 1fr; gap: 40px; }
    .product-detail-layout > * { min-width: 0; }
    .product-gallery { position: static; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; }
    .product-gallery-main { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1/1; }
    .product-gallery-main img,
    .product-gallery-main iframe,
    .product-gallery-main video { max-width: 100%; }
    .product-gallery-thumbs {
        max-width: 100%; width: 100%;
        flex-direction: row; flex-wrap: nowrap; max-height: none; overflow-y: visible;
        overflow-x: auto; padding-right: 0; padding-bottom: 4px;
        /* Scroll horizontal sin que se vea la barra — se puede seguir
           desplazando con el dedo/mouse, solo no se dibuja la barra. */
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .product-gallery-thumbs::-webkit-scrollbar { display: none; }
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
    .store-hamburger { display: block; }

    /* Con el logo + botón de cuenta/usuario + carrito + hamburguesa todos
       compitiendo por espacio en una sola fila, el padding/gap de escritorio
       (24px) desbordaba la fila en teléfonos angostos y generaba scroll
       horizontal en todo el sitio (el navbar está en el layout compartido). */
    .store-nav-inner { padding: 0 14px; gap: 10px; }
    .store-nav-actions { gap: 6px; }
    .store-account-btn { padding: 0 12px 0 10px; }
    .store-user-btn { padding: 6px 10px 6px 5px; gap: 6px; }

    /* El desplegable ya NO empuja el layout del navbar (logo/cart/hamburguesa
       se quedan en su fila fija) — flota debajo como panel propio, con su
       propio fondo, para que nunca se vea "sin fondo" ni corte los botones. */
    #storeNavbar {
        position: absolute; top: calc(100% + 10px); left: 12px; right: 12px;
        margin: 0; padding: 8px 20px 20px;
        /* Sólido, no translúcido — con alpha + blur se alcanzaba a ver el
           sitio detrás del panel. */
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 22px;
        box-shadow: 0 24px 48px rgba(20,30,48,.22);
        max-height: calc(100vh - var(--header-h) - 20px);
        transform-origin: top center;
        /* OJO: nunca declarar aquí un `transition` normal (por ejemplo
           "transition: opacity .28s ease"). Bootstrap anima la altura del
           desplegable con su propia regla ".collapsing{transition:height
           .35s ease}", y "transition" es shorthand: una regla nuestra con
           más especificidad (#storeNavbar es ID) la REEMPLAZA por completo
           en vez de sumarse, así que la altura dejaba de animarse (saltaba
           de golpe) y además el fin de nuestra transición de opacidad
           disparaba el "transitionend" que Bootstrap usa para saber que ya
           terminó de cerrar — como opacity duraba menos que la altura,
           Bootstrap daba por cerrado el menú a la mitad del slide y lo
           ocultaba de golpe, dejando un resto visible que tardaba en irse.
           Por eso el desvanecido de abajo usa @keyframes (animation, no
           transition): dispara "animationend", no "transitionend", así que
           corre en paralelo sin pisarle nada a Bootstrap. */
    }
    /* Mientras Bootstrap anima la altura (abriendo o cerrando) el
       contenido no cabe en la altura intermedia — con overflow-y:auto
       "de fábrica" eso hace parpadear una barra de scroll a medias.
       Igual que hace Bootstrap con .collapsing, se mantiene oculto y
       solo se habilita el scroll cuando ya quedó totalmente abierto. */
    #storeNavbar.show {
        overflow-y: auto;
    }
    #storeNavbar.is-closing {
        animation: storeNavPanelOut .3s ease both;
    }
    .store-nav-links {
        flex-direction: column; align-items: stretch;
        width: 100%; gap: 0; margin: 6px 0 4px !important;
    }
    .store-nav-links a {
        display: block; width: 100%;
        padding: 13px 6px; border-radius: 10px;
        border-bottom: 1px solid var(--border);
    }
    .store-nav-links li:last-child a { border-bottom: none; }
    .store-nav-links a::after { display: none; }
    .store-nav-links a:hover, .store-nav-links a.active {
        background: var(--surface-2); color: var(--primary-dark); padding-left: 12px;
    }
    /* Sub-enlaces de marca bajo "Productos" — indentados, sin línea
       divisoria propia, tipografía más chica para leerse como hijos. */
    .store-nav-links a.store-nav-links-a-sub {
        display: flex; align-items: center; gap: 8px;
        padding: 9px 6px 9px 30px;
        font-size: .84rem; font-weight: 500; color: var(--text-muted);
        border-bottom: none;
    }
    .store-nav-links a.store-nav-links-a-sub i { font-size: .74rem; width: 14px; text-align: center; }
    .store-nav-links a.store-nav-links-a-sub:hover,
    .store-nav-links a.store-nav-links-a-sub.active {
        background: var(--surface-2); color: var(--primary-dark); padding-left: 30px;
    }

    /* Panel: entra con un pequeño rebote (overshoot) en vez de deslizarse plano.
       IMPORTANTE: la clase que dispara esto es ".is-opening", puesta a mano
       por JS (ver store.blade.php) SOLO durante la apertura — NUNCA
       ".collapsing" ni ".show":
       - .collapsing la usa Bootstrap tanto al abrir como al cerrar, así que
         si el rebote depende de ella se repite también al cerrar (brinco).
       - .show solo se agrega DESPUÉS de que termina el slide de Bootstrap,
         así que si el rebote depende de ella, corre por separado — primero
         se ve el slide plano y LUEGO el rebote, como si abriera dos veces.
       Con .is-opening el rebote arranca justo cuando empieza a abrirse y
       corre en paralelo con el slide de Bootstrap: un solo movimiento. */
    #storeNavbar.is-opening {
        animation: storeNavPanelIn .38s cubic-bezier(.34,1.56,.64,1) both;
    }
    #storeNavbar.is-opening .store-nav-links li {
        animation: storeNavLinkIn .34s cubic-bezier(.34,1.56,.64,1) both;
    }
    #storeNavbar .store-nav-links li:nth-child(1) { animation-delay: .05s; }
    #storeNavbar .store-nav-links li:nth-child(2) { animation-delay: .09s; }
    #storeNavbar .store-nav-links li:nth-child(3) { animation-delay: .13s; }
    #storeNavbar .store-nav-links li:nth-child(4) { animation-delay: .17s; }
    #storeNavbar .store-nav-links li:nth-child(5) { animation-delay: .21s; }
    #storeNavbar .store-nav-links li:nth-child(6) { animation-delay: .24s; }
    #storeNavbar .store-nav-links li:nth-child(7) { animation-delay: .27s; }
    #storeNavbar .store-nav-links li:nth-child(8) { animation-delay: .30s; }
}
@keyframes storeNavPanelIn {
    0%   { opacity: 0; transform: translateY(-22px) scale(.94); }
    60%  { opacity: 1; transform: translateY(6px) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes storeNavLinkIn {
    0%   { opacity: 0; transform: translateX(-14px); }
    65%  { opacity: 1; transform: translateX(4px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes storeNavPanelOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@media (max-width: 768px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
    .collections-grid { grid-template-columns: 1fr 1fr; }
    .auth-card-body, .auth-card-header { padding-left: 24px; padding-right: 24px; }
    .success-card { padding: 40px 28px; }
    .checkout-form .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr 1fr; }
    .collections-grid { grid-template-columns: 1fr; }
    .store-section { padding: 48px 16px; }
}
@media (max-width: 400px) {
    .store-nav-inner { padding: 0 10px; gap: 6px; }
}

/* ════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════════════════════ */
.reveal-up, .reveal-fade, .reveal-card {
    transition-delay: var(--delay, 0s);
}
.reveal-up {
    opacity: 0;
    transform: translateY(52px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-fade {
    opacity: 0;
    transition: opacity .6s ease;
}
.reveal-fade.revealed { opacity: 1; }
.reveal-card {
    opacity: 0;
    transform: translateY(44px) scale(.92);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-fade, .reveal-card {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ════════════════════════════════════════════════════
   PRODUCT CARD — MODERN OVERLAY (two buttons)
═══════════════════════════════════════════════════════ */
/* ── Product card overlay — panel slides up from bottom ── */
.product-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: rgba(18,28,42,.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.34,1.2,.64,1);
    pointer-events: none;
}
.product-card:hover .product-card-overlay {
    transform: translateY(0);
    pointer-events: all;
}

.product-overlay-btn {
    flex: 1;
    border: none; border-radius: 9px;
    padding: 9px 10px; font-weight: 700; font-size: .78rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
    white-space: nowrap; text-decoration: none;
    transition: opacity .15s ease, transform .15s ease;
}
.product-overlay-btn:hover { opacity: .88; transform: scale(.97); }

.product-overlay-info {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
}
.product-overlay-add {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 8px rgba(122,151,188,.4);
}
.product-overlay-add:hover { opacity: 1 !important; }

/* (stock badge classes moved to product card v2 section above) */

/* Small stock text in footer */
.product-card-stock-text {
    font-size: .71rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 4px;
}
.product-card-stock-text.stock-ok       { color: #2d8a4e; }
.product-card-stock-text.stock-incoming { color: #92400e; }

/* View-detail icon button (replaces old + btn) */
.btn-view-detail {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--primary-dark); font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
    flex-shrink: 0;
    text-decoration: none;
}
.btn-view-detail:hover {
    background: var(--primary-light); transform: scale(1.08);
    border-color: var(--primary);
}

/* ════════════════════════════════════════════════════
   HERO COMPACT — above the fold, split layout
   Height: content-driven, no min-height, no JS override
════════════════════════════════════════════════════ */
.hero-compact {
    position: relative;
    padding: 64px 0 72px;
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(153,178,209,.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 80%, rgba(208,183,153,.18) 0%, transparent 55%),
        #f5f7fa;
    overflow: hidden;
}
.hc-blob-a {
    position: absolute; top: -100px; right: -80px;
    width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(153,178,209,.32) 0%, transparent 65%);
    pointer-events: none;
    animation: blob-drift-a 18s ease-in-out infinite alternate;
}
.hc-blob-b {
    position: absolute; bottom: -110px; left: -80px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(208,183,153,.28) 0%, transparent 65%);
    pointer-events: none;
    animation: blob-drift-b 22s ease-in-out infinite alternate;
}
@keyframes blob-drift-a { to { transform: translate(-40px, 30px); } }
@keyframes blob-drift-b { to { transform: translate(30px, -40px); } }

/* ── Anillo giratorio detrás del collage ── */
.hc-ring-deco {
    position: absolute;
    width: 370px; height: 370px;
    top: 50%; left: 50%;
    transform: translate(-50%, -54%);
    border-radius: 50%;
    border: 1.5px dashed rgba(122,151,188,.3);
    pointer-events: none; z-index: 0;
    animation: hc-ring-spin 40s linear infinite;
}
.hc-ring-deco::after {
    content: '';
    position: absolute; inset: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(153,178,209,.14) 0%, transparent 65%);
}
@keyframes hc-ring-spin {
    to { transform: translate(-50%, -54%) rotate(360deg); }
}
/* 2-col grid */
.hc-inner {
    position: relative; z-index: 1;
    width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 36px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 52px; align-items: center;
}
/* ── Text column ── */
.hc-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, var(--primary-light), rgba(208,183,153,.25));
    color: var(--primary-dark);
    border-radius: 100px; padding: 6px 18px;
    font-size: .77rem; font-weight: 700; letter-spacing: .04em;
    margin-bottom: 22px;
    border: 1px solid rgba(122,151,188,.3);
    box-shadow: 0 2px 12px rgba(153,178,209,.2);
}
.hc-title {
    font-size: clamp(2.6rem, 4.5vw, 4.4rem);
    font-weight: 900; line-height: 1.03; letter-spacing: -.04em;
    color: var(--text); margin-bottom: 18px;
}
.hc-title span {
    background: linear-gradient(125deg, var(--primary-dark) 0%, #6a8cb8 40%, var(--accent-dark) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: hero-title-shimmer 6s ease infinite;
}
@keyframes hero-title-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hc-desc {
    font-size: 1rem; color: var(--text-sec);
    line-height: 1.76; max-width: 440px; margin-bottom: 30px;
}
.hc-ctas {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
}
.hc-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--primary-dark), #5f7fa0);
    color: #fff;
    padding: 14px 28px; border-radius: 14px;
    font-weight: 700; font-size: .93rem;
    box-shadow: 0 6px 22px rgba(122,151,188,.42);
    transition: transform .22s, box-shadow .22s;
}
.hc-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(122,151,188,.55);
}
.hc-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.8);
    border: 1.5px solid rgba(122,151,188,.3);
    color: var(--text-sec); padding: 14px 24px; border-radius: 14px;
    font-weight: 600; font-size: .93rem;
    backdrop-filter: blur(8px);
    transition: border-color .22s, color .22s, background .22s, transform .22s;
}
.hc-btn-secondary:hover {
    border-color: var(--accent); color: var(--accent-dark);
    background: rgba(255,255,255,.95);
    transform: translateY(-2px);
}
/* Trust stat cards */
.hc-trust {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.hc-trust-card {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    border-radius: 14px; padding: 10px 15px;
    flex: 1; min-width: 88px;
    box-shadow: 0 2px 10px rgba(30,42,58,.06);
    transition: transform .22s, box-shadow .22s;
}
.hc-trust-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,42,58,.1); }
.hc-trust-card i {
    font-size: 1.1rem; color: var(--primary-dark); flex-shrink: 0;
}
.hc-trust-num  { font-size: .92rem; font-weight: 900; color: var(--text); line-height: 1; }
.hc-trust-lbl  { font-size: .62rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }

/* Promo badge */
.hc-promo {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1.5px solid #fcd34d;
    color: #92400e;
    border-radius: 10px; padding: 8px 14px;
    font-size: .78rem; font-weight: 700;
    margin-top: 10px; width: 100%;
}
.hc-promo i { font-size: .85rem; flex-shrink: 0; color: #b45309; }

/* ── Visual column: photo collage ── */
.hc-collage-wrap {
    position: relative;
    padding-bottom: 28px;
}

/* Grid: 3-image layout (A spans full left, B+C stacked right) */
.hc-collage {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    height: 380px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(30,42,58,.14),
        0 4px 16px rgba(30,42,58,.08);
}
.hcc-frame {
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    position: relative;
}
.hcc-frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.34,1.06,.64,1);
}
.hcc-frame:hover img { transform: scale(1.08); }

/* 3-image positions */
.hcc-a { grid-column: 1; grid-row: 1 / 3; }
.hcc-b { grid-column: 2; grid-row: 1; }
.hcc-c { grid-column: 2; grid-row: 2; }

/* 2-image override */
.hc-collage-2 .hcc-a { grid-column: 1; grid-row: 1 / 3; }
.hc-collage-2 .hcc-b { grid-column: 2; grid-row: 1 / 3; }

/* Overlay shine on each frame */
.hcc-frame::after {
    content: '';
    position: absolute; inset: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.3),
        inset 0 1px 0 rgba(255,255,255,.5);
    pointer-events: none;
}

/* Gold badge — floats below the collage */
.hcc-badge {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    border-radius: 100px; padding: 8px 22px;
    font-size: .77rem; font-weight: 800; white-space: nowrap;
    box-shadow: 0 6px 20px rgba(185,154,120,.5);
}

/* Logo fallback */
.hcm-fallback {
    height: 360px; border-radius: 24px;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 60px rgba(30,42,58,.12);
}
.hcm-fallback img { width: 140px; height: 140px; object-fit: contain; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .hc-inner {
        grid-template-columns: 1fr;
        gap: 28px; text-align: center;
    }
    .hc-eyebrow { margin-left: auto; margin-right: auto; }
    .hc-desc    { margin-left: auto; margin-right: auto; }
    .hc-ctas    { justify-content: center; }
    .hc-trust   { justify-content: center; }
    .hc-promo   { justify-content: center; }
    .hc-collage { height: 220px; }
    .hcc-badge  { font-size: .71rem; padding: 5px 14px; }
}
@media (max-width: 500px) {
    .hero-compact { padding: 36px 0 40px; }
    .hc-inner { padding: 0 20px; }
    .hc-title { font-size: 2.1rem; }
    .hc-collage { height: 180px; gap: 5px; }
}

/* Featured section mini-header (home page products row) */
.featured-mini-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════
   PREORDER CARD — FOOTER (two buttons)
═══════════════════════════════════════════════════════ */
/* Override old single CTA */
.preorder-card-footer {
    padding: 0 16px 16px;
    display: flex; gap: 8px;
}
.preorder-card-btn-info {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border-radius: 10px;
    background: var(--surface-2); color: var(--text-sec);
    border: 1.5px solid var(--border);
    font-size: .82rem; font-weight: 600;
    transition: all .2s ease; text-decoration: none;
}
.preorder-card-btn-info:hover {
    background: var(--primary-light); color: var(--primary-dark);
    border-color: var(--primary);
    transform: translateY(-1px);
}
.preorder-card-btn-wa {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border-radius: 10px;
    background: var(--primary-dark);
    color: #fff; border: none;
    font-size: .82rem; font-weight: 700;
    transition: all .2s ease; text-decoration: none;
}
.preorder-card-btn-wa:hover { opacity: .92; transform: translateY(-1px); }

/* ── Formulario de contacto — card partida en 2: panel + campos ── */
/* Dos bloques independientes con su propia sombra y espacio entre ellos —
   antes era una sola caja gigante uniendo formulario + mapa. */
.contact-form-card {
    display: flex; flex-wrap: wrap; gap: 26px;
    background: transparent;
}
.contact-form-fields {
    flex: 1.3 1 360px; padding: 42px 36px;
    position: relative; overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(30,42,58,.16);
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 55%, #5f7ba3 100%);
}
/* Textura sutil de puntos sobre el degradado */
.contact-form-fields::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 0% 0%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 85% 70% at 0% 0%, #000 0%, transparent 75%);
}
/* Ícono grande de fondo (taza) — mismo guiño de marca que el resto del sitio */
.contact-form-fields::after {
    content: '\f0f4'; font-family: FontAwesome;
    position: absolute; right: -14px; bottom: -26px;
    font-size: 8.5rem; color: #fff;
    opacity: .09; transform: rotate(-12deg);
    pointer-events: none;
}
.contact-form-fields > * { position: relative; z-index: 1; }

/* Blobs difuminados — misma profundidad que el resto del sitio */
.contact-form-fields-blob {
    position: absolute; z-index: 0; border-radius: 50%; filter: blur(38px);
    pointer-events: none;
}
.contact-form-fields-blob-1 {
    width: 220px; height: 220px; background: rgba(255,255,255,.16);
    top: -70px; right: -60px;
}
.contact-form-fields-blob-2 {
    width: 180px; height: 180px; background: var(--accent);
    opacity: .35; bottom: -80px; left: -50px;
}

.contact-form-fields-intro { margin-bottom: 24px; }

/* Taza con "vapor" animado — el mismo guiño de marca, pero con vida */
.contact-form-fields-icon {
    position: relative;
    width: 54px; height: 54px; border-radius: 15px;
    background: rgba(255,255,255,.16); color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; margin-bottom: 20px;
}
.contact-form-fields-steam {
    position: absolute; top: -4px; width: 3px; height: 10px; border-radius: 999px;
    background: rgba(255,255,255,.75);
    animation: contact-steam-rise 2.4s ease-in-out infinite;
}
.contact-form-fields-steam-1 { left: 16px; animation-delay: 0s; }
.contact-form-fields-steam-2 { left: 26px; animation-delay: .5s; }
.contact-form-fields-steam-3 { left: 36px; animation-delay: 1s; }
@keyframes contact-steam-rise {
    0%   { transform: translateY(0) scaleY(1);   opacity: 0; }
    25%  { opacity: .85; }
    100% { transform: translateY(-22px) scaleY(1.6); opacity: 0; }
}

.contact-form-fields-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 8px; color: #fff;
}
.contact-form-fields-sub {
    font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0;
}
.contact-form-fields .form-control {
    background: #fff; color: var(--text);
    border-radius: 10px; border-color: var(--border);
    padding: 10px 14px; font-size: .9rem;
}
.contact-form-fields .form-control:focus {
    border-color: var(--primary); box-shadow: 0 0 0 .18rem rgba(153,178,209,.25);
}
.contact-form-submit-btn {
    /* Blanco a propósito: el panel del formulario es azul, así que un botón
       azul se perdía contra el fondo — el blanco es lo único que rompe la
       paleta de esa caja y por eso se nota. */
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    color: var(--primary-dark); border: none; border-radius: 12px;
    padding: 13px 30px; font-weight: 700; font-size: .92rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-form-submit-btn:hover {
    /* Bootstrap trae su propio background-color de hover para .btn (claro,
       casi blanco) que no se sobrescribía — quedaba el botón claro con
       texto blanco encima, invisible. Se fija el fondo explícito aquí. */
    transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.22);
    background: #f2f5f9; color: var(--primary-dark);
}
@media (max-width: 767px) {
    .contact-form-fields { padding: 30px 24px; }
}

/* ── Contacto: mapa dentro de la misma card, junto al formulario ── */
.contact-form-map {
    flex: 1 1 320px;
    position: relative;
    overflow: hidden;
    min-height: 380px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(30,42,58,.16);
    background: var(--surface-2);
}
.contact-form-map iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    filter: saturate(.92) contrast(1.02);
    pointer-events: none; /* la interacción es con los links de arriba, no con el mapa embebido */
}
.contact-form-map-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px;
    background: linear-gradient(180deg, rgba(30,42,58,0) 45%, rgba(30,42,58,.78) 100%);
}
.contact-form-map-item {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
    margin-bottom: 10px;
}
.contact-form-map-item > i:first-child {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.contact-form-map-item-title { display: block; font-weight: 800; font-size: .88rem; color: #fff; }
.contact-form-map-item-sub { display: block; font-size: .72rem; color: rgba(255,255,255,.8); margin-top: 2px; }
.contact-form-map-go { margin-left: auto; color: #fff; font-size: .8rem; flex-shrink: 0; opacity: .85; }
.contact-form-map-links {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.contact-form-map-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px; padding: 7px 13px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background var(--transition), border-color var(--transition);
}
.contact-form-map-chip:hover {
    background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45);
}

@media (max-width: 767px) {
    .contact-form-map { min-height: 300px; }
}

/* ── Preventas anteriores — thumbnail cuadrado a prueba de imágenes con
   proporción distinta (padding-top: técnica clásica, más confiable que
   aspect-ratio dentro de grids/cards con h-100), gris hasta hover ── */
.past-preorder-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.past-preorder-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.past-preorder-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%; /* fuerza 1:1 sin depender de aspect-ratio */
    background: var(--surface-2);
    overflow: hidden;
}
.past-preorder-thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) opacity(.82);
    transition: filter .3s ease, transform .3s ease;
}
.past-preorder-card:hover .past-preorder-thumb img {
    filter: grayscale(0) opacity(1);
    transform: scale(1.04);
}

/* Cover link wrapper (makes cover clickable) */
.preorder-card-cover-link { display: block; color: inherit; text-decoration: none; }
.preorder-card-cover-link:hover .preorder-card-cover img { transform: scale(1.04); }

/* Rango de precio (min—max) reutilizado en preorder-card-v2 */
.preorder-ticket-price-range {
    font-size: .8rem; font-weight: 600; color: var(--text-muted);
}

/* ════════════════════════════════════════════════════
   PREVENTAS DETAIL PAGE — anuncio editorial a pantalla completa
═══════════════════════════════════════════════════════ */
.preorder-launch {
    position: relative; overflow: hidden;
    min-height: clamp(480px, 76vh, 720px);
    display: flex; align-items: flex-end;
    background: linear-gradient(135deg, var(--primary-dark), var(--accent-dark));
}
.preorder-launch-media { position: absolute; inset: 0; }
.preorder-launch-media img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.preorder-launch-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(0deg, rgba(15,20,28,.92) 0%, rgba(15,20,28,.4) 50%, rgba(15,20,28,.1) 100%),
        linear-gradient(90deg, rgba(15,20,28,.4) 0%, rgba(15,20,28,0) 60%);
}
.preorder-launch-ribbon {
    position: absolute; top: 30px; left: 0; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-dark); color: #fff;
    font-family: var(--font-display); font-weight: 600; font-size: .82rem;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 10px 24px 10px 18px; border-radius: 0 999px 999px 0;
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.preorder-launch-content {
    position: relative; z-index: 2;
    padding: 100px 0 56px;
    max-width: 780px;
}
.preorder-launch-breadcrumb {
    justify-content: flex-start; margin-bottom: 18px; color: rgba(255,255,255,.55);
}
.preorder-launch-breadcrumb a { color: rgba(255,255,255,.85); }
.preorder-launch-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2.3rem, 5vw, 3.8rem); color: #fff; line-height: 1.05;
    letter-spacing: -.02em; margin-bottom: 16px;
    text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.preorder-launch-desc {
    font-size: 1.05rem; color: rgba(255,255,255,.85); line-height: 1.7;
    max-width: 580px; margin-bottom: 24px;
}
.preorder-detail-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.preorder-d-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 13px; border-radius: 20px;
    font-size: .78rem; font-weight: 600;
    background: rgba(255,255,255,.14); color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.preorder-d-badge-urgent { background: #c53030; color: #fff; border-color: transparent; }
.preorder-d-badge-open   { background: var(--primary-dark); color: #fff; border-color: transparent; }
.preorder-d-badge-launch { background: rgba(208,183,153,.35); color: var(--accent-light); border-color: rgba(208,183,153,.4); }
.preorder-d-badge-price  { background: rgba(255,255,255,.9); color: var(--text); border-color: transparent; }

@media (max-width: 767px) {
    .preorder-launch-content { padding: 80px 0 40px; }
    .preorder-launch-ribbon { top: 18px; }
}

.preorder-detail-cta-wa {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 28px; border-radius: 12px;
    background: var(--primary-dark);
    color: #fff; font-weight: 700; font-size: .95rem;
    box-shadow: 0 4px 16px rgba(122,151,188,.3);
    transition: opacity .2s, transform .2s; text-decoration: none;
}
.preorder-detail-cta-wa:hover { opacity: .92; transform: translateY(-2px); }
.preorder-detail-cta-wa i { font-size: 1.15rem; }

/* Products grid in detail page */
.preorder-detail-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
    margin-top: 0;
}
.preorder-detail-product-card {
    background: var(--surface); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.preorder-detail-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.preorder-detail-product-img {
    position: relative; aspect-ratio: 1/1; overflow: hidden;
    background: var(--surface-2);
}
.preorder-detail-product-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.preorder-detail-product-card:hover .preorder-detail-product-img img { transform: scale(1.05); }
.preorder-no-img {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--border); font-size: 2.5rem;
}
.preorder-product-badge-pre {
    position: absolute; top: 10px; left: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-size: .65rem; font-weight: 700;
    padding: 3px 9px; border-radius: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.preorder-detail-product-body { padding: 14px 16px 18px; }
.preorder-detail-product-brand {
    font-size: .68rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.preorder-detail-product-name {
    font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.preorder-detail-product-price {
    font-size: 1.1rem; font-weight: 800; color: var(--primary-dark);
}
.preorder-detail-product-price small { font-size: .7rem; font-weight: 500; color: var(--text-muted); }
.preorder-detail-product-price-tbd {
    font-size: .82rem; color: var(--text-muted); font-style: italic;
}

/* Bottom CTA block */
.preorder-detail-bottom-cta {
    margin-top: 52px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
    border-radius: var(--radius-lg); padding: 40px;
    border: 1.5px solid var(--border);
}
.preorder-detail-bottom-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.preorder-detail-bottom-text h3 {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.3rem; color: var(--text); margin-bottom: 6px;
}
.preorder-detail-bottom-text p {
    font-size: .9rem; color: var(--text-sec); line-height: 1.65; max-width: 440px;
}
.preorder-detail-bottom-actions {
    display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.preorder-detail-cta-sec {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 13px 22px; border-radius: 11px;
    background: transparent; border: 2px solid var(--primary);
    color: var(--primary-dark); font-weight: 700; font-size: .9rem;
    transition: all .2s ease; text-decoration: none;
}
.preorder-detail-cta-sec:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════
   CHECKOUT — STEPS INDICATOR
═══════════════════════════════════════════════════════ */
.ck-steps {
    display: flex; align-items: flex-start; gap: 0;
    padding: 24px 16px; border-bottom: 1px solid var(--border);
}
.ck-step {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    position: relative;
    text-decoration: none; cursor: pointer;
    text-align: center;
}
.ck-step:hover .ck-step-num { border-color: var(--primary); transform: translateY(-1px); }
/* Línea conectora centrada detrás de los círculos — mitad izquierda del
   step actual + mitad derecha del anterior, para que se vea continua. */
.ck-step::before, .ck-step::after {
    content: '';
    position: absolute; top: 18px; height: 3px; border-radius: 3px;
    background: var(--border); z-index: 0;
    transition: background .3s ease;
}
.ck-step::before { left: 0; right: 50%; margin-right: 18px; }
.ck-step::after  { left: 50%; right: 0; margin-left: 18px; }
.ck-step:first-child::before { display: none; }
.ck-step:last-child::after { display: none; }
.ck-step.done::after { background: linear-gradient(90deg, #34d399, #22c55e); }
.ck-step.done + .ck-step::before { background: linear-gradient(90deg, #34d399, #22c55e); }
.ck-step-num {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 800;
    background: var(--surface); color: var(--text-muted);
    border: 2px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: all .25s ease;
}
.ck-step.active .ck-step-num {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border-color: transparent;
    box-shadow: 0 0 0 5px rgba(153,178,209,.25), 0 4px 12px rgba(122,151,188,.35);
    transform: scale(1.08);
}
.ck-step.done .ck-step-num {
    background: linear-gradient(135deg, #34d399, #22c55e);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(34,197,94,.3);
}
.ck-step-label {
    display: flex; flex-direction: column; align-items: center;
    max-width: 90px;
}
.ck-step-label span {
    font-size: .6rem; font-weight: 700; color: var(--text-muted);
    letter-spacing: .04em; opacity: .7;
}
.ck-step-label strong {
    font-size: .8rem; font-weight: 700; color: var(--text-muted);
    line-height: 1.25; transition: color .25s ease;
}
.ck-step.active .ck-step-label strong { color: var(--primary-dark); }
.ck-step.done  .ck-step-label strong { color: #16a34a; }
@media (max-width: 480px) {
    .ck-step-label span { display: none; }
    .ck-step-label strong { font-size: .7rem; }
    .ck-step-num { width: 32px; height: 32px; }
}

.ck-section {
    padding: 24px 28px 0;
}
/* Wizard (solo checkout.blade.php): un solo ck-section visible a la vez —
   scoped a [data-step] porque payment.blade.php también usa .ck-section
   pero sin JS de wizard, así que nunca le pondría .ck-section-current. */
.ck-section[data-step] { display: none; }
.ck-section[data-step].ck-section-current { display: block; }
.ck-wizard-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 28px; padding: 20px 0 28px;
    border-top: 1px solid var(--border);
}
.ck-btn-next, .ck-btn-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 10px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: all var(--transition); border: none;
}
.ck-btn-next {
    margin-left: auto;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}
.ck-btn-next:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(153,178,209,.5); }
.ck-btn-back {
    background: var(--surface-2); color: var(--text-sec);
    border: 1.5px solid var(--border);
}
.ck-btn-back:hover { background: var(--surface); border-color: var(--primary); }
.ck-section-label {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 20px;
}
.ck-section-num {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary-dark); color: #fff;
    font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.ck-section-title {
    font-size: .88rem; font-weight: 800; color: var(--text);
    letter-spacing: -.01em;
}
.ck-section-divider {
    border: none; border-top: 1px solid var(--border);
    margin: 24px 0 0;
}

/* ── "Tus datos": ya logueado (badge de cuenta) o invitado (aviso de login) ── */
.ck-account-badge {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
}
.ck-account-badge i { font-size: 1.6rem; color: var(--primary-dark); flex-shrink: 0; }
.ck-account-badge > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ck-account-badge strong { font-size: .9rem; color: var(--text); }
.ck-account-badge small { font-size: .78rem; color: var(--text-muted); }
.ck-account-badge a { font-size: .8rem; font-weight: 600; color: var(--primary-dark); white-space: nowrap; }
.ck-login-prompt {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
    background: var(--surface-2); border: 1px dashed var(--border);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
    font-size: .85rem; color: var(--text-sec);
}
.ck-login-prompt a {
    font-weight: 700; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 8px 16px; border-radius: 9px; white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   CHECKOUT — DELIVERY OPTIONS
═══════════════════════════════════════════════════════ */

/* Option cards row */
.ck-delivery-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 560px) { .ck-delivery-options { grid-template-columns: 1fr; } }

.ck-delivery-opt {
    border: 2px solid var(--border);
    border-radius: 14px; padding: 16px 18px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    background: var(--surface);
    transition: border-color .2s, background .2s, box-shadow .2s;
    user-select: none;
}
/* .checkout-form label{display:block} le gana en especificidad cuando esta
   tarjeta es un <label> (opción "Punto de encuentro") — se reafirma aquí,
   con la misma columna (ícono arriba, texto debajo) para ambas tarjetas. */
.checkout-form label.ck-delivery-opt {
    display: flex; flex-direction: column; align-items: flex-start;
}
.ck-delivery-opt:hover { border-color: var(--primary); background: rgba(153,178,209,.1); }
.ck-delivery-opt.selected {
    border-color: var(--primary-dark);
    background: rgba(153,178,209,.1);
    box-shadow: 0 0 0 3px rgba(122,151,188,.18);
}
.ck-delivery-opt.selected-meetup {
    border-color: #2d8a4e;
    background: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.ck-opt-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.ck-opt-icon-ship  { background: #fff; color: var(--primary-dark); border: 1px solid rgba(122,151,188,.3); }
.ck-opt-icon-meet  { background: #fff; color: #15803d; border: 1px solid rgba(34,197,94,.3); }
.ck-opt-text strong { display: block; font-size: .9rem; font-weight: 800; color: var(--text); }
.ck-opt-text small  { display: block; font-size: .75rem; color: var(--text-sec); line-height: 1.5; }
.ck-opt-price {
    display: block; margin-top: 8px;
    font-size: 1rem; font-weight: 900; color: var(--text);
}
.ck-opt-price.free { color: #15803d; }

/* Meetup info card */
.ck-meetup-info {
    background: #f0fdf4; border: 1.5px solid #86efac;
    border-radius: 12px; padding: 16px 18px;
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 18px;
    font-size: .86rem; line-height: 1.6; color: #166534;
}
.ck-meetup-info i { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.ck-meetup-info strong { display: block; font-weight: 800; margin-bottom: 4px; }

/* Address fields wrapper */
.ck-address-fields { transition: opacity .2s ease; }
.ck-address-fields.hidden { display: none; }

/* Saved address cards (checkout) */
.ck-address-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 560px) { .ck-address-grid { grid-template-columns: 1fr; } }
.ck-address-card {
    border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px;
    cursor: pointer; display: block; background: var(--surface);
    transition: border-color .2s, background .2s, box-shadow .2s;
    user-select: none;
}
.ck-address-card:hover { border-color: var(--primary); background: rgba(153,178,209,.1); }
.ck-address-card.selected {
    border-color: var(--primary-dark); background: rgba(153,178,209,.1);
    box-shadow: 0 0 0 3px rgba(122,151,188,.18);
}
.ck-address-card-label { font-weight: 800; font-size: .86rem; color: var(--text); margin-bottom: 4px; }
.ck-address-card-body { font-size: .78rem; color: var(--text-sec); line-height: 1.55; }
.ck-address-card-new { display: flex; align-items: center; justify-content: center; min-height: 56px; }
.ck-address-card-new .ck-address-card-label { margin: 0; color: var(--primary-dark); }

/* Legacy classes preserved */
.checkout-shipping-option {
    background: var(--surface-2); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; transition: border-color .2s, background .2s;
}
.checkout-shipping-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.checkout-shipping-toggle input[type="checkbox"] { display: none; }
.checkout-shipping-toggle-box {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    background: var(--surface); border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-dark); font-size: 1rem; transition: all .2s ease;
}
.checkout-shipping-toggle input:checked + .checkout-shipping-toggle-box { background: var(--primary); border-color: var(--primary-dark); color: #fff; }
.checkout-shipping-toggle-text strong { display: block; font-size: .9rem; font-weight: 700; color: var(--text); }
.checkout-shipping-toggle-text small { font-size: .78rem; color: var(--text-muted); }
.checkout-shipping-cost { text-align: right; }
.checkout-shipping-label { font-size: .75rem; color: var(--text-muted); display: block; margin-bottom: 2px; }
.checkout-shipping-amount { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.checkout-shipping-amount.free { color: #2d8a4e; }

/* ── Product detail stock pills ── */
.product-info-stock {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 4px;
}
.stock-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 20px;
    font-size: .82rem; font-weight: 700;
}
.stock-pill-ok {
    background: #dcfce7; color: #166534;
    border: 1px solid #bbf7d0;
}
.stock-pill-incoming {
    background: #fef9c3; color: #92400e;
    border: 1px solid #fde68a;
}
.stock-pill-out {
    background: #fee2e2; color: #991b1b;
    border: 1px solid #fecaca;
}
.stock-detail-text {
    font-size: .8rem; color: var(--text-muted);
}

/* hero-v5 padding-top is set dynamically by JS in layouts/store.blade.php */

/* ════════════════════════════════════════════════════
   RESPONSIVE — new components
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .preorder-detail-hero-content { padding: 0 20px; }
    .preorder-detail-title { font-size: 1.7rem; }
    .preorder-detail-bottom-inner { flex-direction: column; }
    .preorder-detail-bottom-cta { padding: 28px 20px; }
    .preorders-listing-grid { grid-template-columns: 1fr; }
    .preorder-detail-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .checkout-shipping-option { flex-direction: column; align-items: flex-start; }
    .checkout-shipping-cost { text-align: left; }
}
@media (max-width: 480px) {
    .preorder-detail-badges { gap: 6px; }
    .preorder-d-badge { font-size: .72rem; }
    .preorder-detail-cta-wa { padding: 12px 20px; font-size: .87rem; }
}

/* ════════════════════════════════════════════════════
   HERO S25 — Split panel: primary blue-grey / white
   Izquierda: color de marca sólido + texto blanco
   Derecha:   fondo claro + layout magazine de fotos
════════════════════════════════════════════════════ */
.hero-s25 {
    display: grid;
    grid-template-columns: 46fr 54fr;
    min-height: calc(100vh - var(--header-h));
    overflow: hidden;
}

/* ── Panel izquierdo (brand color) ── */
.hs25-left {
    background: linear-gradient(148deg, #6f91b5 0%, #99b2d1 52%, #aabfda 100%);
    padding: 64px 52px 64px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Círculos decorativos sutiles */
.hs25-deco-ring {
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.11);
    top: -130px; right: -130px;
    pointer-events: none;
}
.hs25-deco-ring::after {
    content: '';
    position: absolute;
    inset: 70px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
}
.hs25-deco-dots {
    position: absolute;
    bottom: 48px; left: 44px;
    width: 90px; height: 90px;
    background-image: radial-gradient(circle, rgba(255,255,255,.22) 1.5px, transparent 1.5px);
    background-size: 13px 13px;
    pointer-events: none;
}

/* Brand pill */
.hs25-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 100px;
    padding: 6px 18px 6px 9px;
    margin-bottom: 30px;
    width: fit-content;
    backdrop-filter: blur(4px);
}
.hs25-brand-pill img {
    width: 26px; height: 26px;
    border-radius: 7px; object-fit: contain;
    background: rgba(255,255,255,.3);
    padding: 2px;
}
.hs25-brand-pill span {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Título */
.hs25-title {
    font-size: clamp(2.4rem, 3.8vw, 3.8rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff;
    margin-bottom: 18px;
}
.hs25-title em {
    font-style: normal;
    color: var(--accent-light);
}

/* Descripción */
.hs25-desc {
    font-size: .96rem;
    color: rgba(255,255,255,.8);
    line-height: 1.76;
    margin-bottom: 32px;
    max-width: 380px;
}

/* Botones CTA */
.hs25-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.hs25-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 13px 26px;
    border-radius: 12px;
    font-size: .93rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(208,183,153,.38);
    transition: all .22s;
}
.hs25-btn-primary:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(208,183,153,.52);
    color: #fff;
}
.hs25-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.34);
    color: rgba(255,255,255,.92);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: .93rem;
    font-weight: 600;
    transition: all .22s;
}
.hs25-btn-secondary:hover {
    background: rgba(255,255,255,.25);
    border-color: rgba(255,255,255,.6);
    color: #fff;
}

/* Chips de confianza */
.hs25-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hs25-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: .73rem;
    font-weight: 600;
    color: rgba(255,255,255,.88);
}
.hs25-chip i { font-size: .76rem; opacity: .85; }

/* ── Panel derecho (fondo claro + fotos) ── */
.hs25-right {
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 52px 48px 44px;
    position: relative;
}

/* Acento de color en el borde izquierdo del panel derecho */
.hs25-right::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 3px;
    background: linear-gradient(to bottom, transparent, rgba(153,178,209,.4), transparent);
    border-radius: 2px;
}

/* Mosaic: imagen grande + 2 imágenes pequeñas */
.hs25-mosaic {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 430px;
    height: 510px;
}
.hs25-mosaic-main {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #e2e8f0;
    box-shadow: 0 20px 56px rgba(30,42,58,.15);
}
.hs25-mosaic-main img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hs25-main-badge {
    position: absolute;
    bottom: 14px; left: 14px;
    background: rgba(255,255,255,.93);
    border-radius: 9px;
    padding: 6px 12px;
    font-size: .69rem;
    font-weight: 800;
    color: var(--accent-dark);
    border: 1px solid rgba(208,183,153,.28);
    backdrop-filter: blur(4px);
}
.hs25-mosaic-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hs25-mosaic-sm {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: 0 8px 24px rgba(30,42,58,.1);
}
.hs25-mosaic-sm img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Stat flotante */
.hs25-float-stat {
    position: absolute;
    bottom: 52px; left: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 11px 15px;
    box-shadow: 0 8px 30px rgba(30,42,58,.12);
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    min-width: 155px;
}
.hs25-float-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .9rem; flex-shrink: 0;
}
.hs25-float-num  { font-size: 1.05rem; font-weight: 900; color: var(--text); line-height: 1; }
.hs25-float-lbl  { font-size: .63rem; color: var(--text-muted); margin-top: 2px; }

/* Fallback sin imágenes */
.hs25-empty {
    width: 180px; height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    display: flex; align-items: center; justify-content: center;
    padding: 36px;
}
.hs25-empty img { width: 100%; opacity: .55; }

/* ── Responsive ── */
@media (max-width: 880px) {
    .hero-s25 { grid-template-columns: 1fr; min-height: auto; }
    .hs25-left { padding: 52px 28px 44px; text-align: center; }
    .hs25-brand-pill { margin: 0 auto 28px; }
    .hs25-desc { margin: 0 auto 28px; }
    .hs25-ctas { justify-content: center; }
    .hs25-chips { justify-content: center; }
    .hs25-right { padding: 32px 24px 40px; min-height: 340px; }
    .hs25-right::before { display: none; }
    .hs25-mosaic { height: 260px; max-width: 340px; gap: 8px; }
    .hs25-mosaic-main { border-radius: 16px; }
    .hs25-mosaic-sm { border-radius: 12px; }
    .hs25-float-stat { bottom: 14px; left: 14px; }
}
@media (max-width: 480px) {
    .hs25-left { padding: 44px 22px 36px; }
    .hs25-mosaic { height: 220px; max-width: 296px; }
    .hs25-float-stat { display: none; }
}

/* ════════════════════════════════════════════════════
   PC2 — Product Card, React-style
   · Imagen 1:1 cuadrada
   · Overlay "Añadir" desliza al hover
   · Footer minimal: nombre + precio + dot de stock
════════════════════════════════════════════════════ */
.pc2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition:
        box-shadow .24s ease,
        transform   .24s cubic-bezier(.34,1.3,.64,1),
        border-color .18s ease;
    position: relative;
}
.pc2:hover {
    box-shadow:
        0 0 0 2px rgba(153,178,209,.22),
        0 16px 42px rgba(30,42,58,.12);
    transform: translateY(-5px);
    border-color: var(--primary);
}

/* Área de imagen 1:1 */
.pc2-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-2);
    flex-shrink: 0;
}
.pc2-img > img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .48s cubic-bezier(.34,1.06,.64,1);
}
.pc2:hover .pc2-img > img { transform: scale(1.07); }

/* Badge colección — esquina superior izquierda */
.pc2-tag {
    position: absolute;
    top: 9px; left: 9px;
    z-index: 2;
    background: rgba(255,255,255,.93);
    color: var(--accent-dark);
    font-size: .59rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid rgba(208,183,153,.22);
    backdrop-filter: blur(4px);
}

/* Badge stock — esquina superior derecha */
.pc2-stk {
    position: absolute;
    top: 9px; right: 9px;
    z-index: 2;
    font-size: .59rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.pc2-stk-low  { background: rgba(254,243,199,.96); color: #92400e; border: 1px solid #fcd34d; }
.pc2-stk-soon { background: rgba(255,255,255,.88); color: var(--text-muted); border: 1px solid var(--border); }

/* Overlay al hover — contiene botón quick-add */
.pc2-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20,32,48,.0);
    display: flex;
    align-items: flex-end;
    padding: 12px;
    transition: background .22s ease;
    z-index: 3;
    pointer-events: none;
}
.pc2:hover .pc2-overlay {
    background: rgba(20,32,48,.24);
    pointer-events: auto;
}

/* Botón quick-add (sube desde abajo) */
.pc2-add {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: .81rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transform: translateY(10px);
    opacity: 0;
    transition:
        transform .24s cubic-bezier(.34,1.4,.64,1),
        opacity   .2s ease,
        background .15s ease,
        color .15s ease;
    pointer-events: auto;
    letter-spacing: .01em;
}
.pc2:hover .pc2-add {
    transform: translateY(0);
    opacity: 1;
}
.pc2-add:hover {
    background: var(--primary-dark);
    color: #fff;
}
.pc2-add:disabled { opacity: .45; cursor: default; }

/* Cuerpo de la card */
.pc2-body {
    padding: 11px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.pc2-name {
    font-size: .87rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Footer: precio + indicador de stock */
.pc2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.pc2-price {
    font-size: 1.18rem;
    font-weight: 900;
    color: var(--primary-dark);
    letter-spacing: -.025em;
    line-height: 1;
}
.pc2-price sup {
    font-size: .54rem;
    font-weight: 600;
    color: var(--text-muted);
    vertical-align: super;
    line-height: 0;
    letter-spacing: 0;
}
.pc2-price small {
    font-size: .66rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
    margin-left: 2px;
}

/* Indicador de stock como punto de color */
.pc2-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: box-shadow .2s;
}
.pc2-dot-ok   {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.pc2-dot-low  {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}
.pc2-dot-soon {
    background: var(--border);
}


/* ════════════════════════════════════════════════════
   HERO SLIDER — Pantalla completa, texto sobre imagen
   Producto como protagonista · #d0b799 accent · ligero
════════════════════════════════════════════════════ */
.hero-slider {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    overflow: hidden;
    background: #1a2840;
}

/* ── Celda marca (texto + CTA) ── */
.hb-brand {
    grid-column: 1; grid-row: 1;
    background: var(--primary);
    border-radius: 22px;
    padding: 44px 40px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
}
.hb-brand::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.17) 1px, transparent 0);
    background-size: 22px 22px; pointer-events: none;
}
.hb-brand::after {
    content: '';
    position: absolute; bottom: -60px; right: -40px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255,255,255,.13); pointer-events: none;
}
.hb-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.5);
    border-radius: 100px; padding: 5px 14px 5px 7px;
    margin-bottom: 22px; width: fit-content; position: relative; z-index: 1;
}
.hb-pill img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.hb-pill span {
    font-size: .68rem; font-weight: 700; color: var(--text);
    letter-spacing: .07em; text-transform: uppercase;
}
.hb-headline {
    font-size: clamp(2rem, 3vw, 3.6rem);
    font-weight: 900; line-height: 1.05; letter-spacing: -.038em;
    color: var(--text); margin-bottom: 14px; position: relative; z-index: 1;
}
.hb-headline em { font-style: normal; color: var(--accent-dark); }
.hb-desc {
    font-size: .9rem; color: rgba(30,42,58,.7);
    line-height: 1.68; margin-bottom: 26px; max-width: 320px; position: relative; z-index: 1;
}
.hb-ctas { display: flex; gap: 9px; flex-wrap: wrap; position: relative; z-index: 1; }
.hb-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 22px; border-radius: 11px;
    background: var(--text); color: #fff;
    font-size: .88rem; font-weight: 700;
    box-shadow: 0 3px 14px rgba(30,42,58,.22);
    transition: transform .2s, box-shadow .2s, background .2s;
}
.hb-btn-primary:hover { color: #fff; background: #2c4a6a; transform: translateY(-2px); box-shadow: 0 7px 22px rgba(30,42,58,.3); }
.hb-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; border-radius: 11px;
    background: rgba(255,255,255,.28); border: 1.5px solid rgba(255,255,255,.55);
    color: var(--text); font-size: .88rem; font-weight: 600;
    transition: background .2s;
}
.hb-btn-ghost:hover { background: rgba(255,255,255,.46); }

/* ── Celdas de fotos (top-center y top-right) ── */
.hb-photo {
    border-radius: 22px; overflow: hidden;
    background: var(--surface-2); position: relative; display: block;
}
.hb-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .55s cubic-bezier(.34,1.06,.64,1);
}
.hb-photo:hover img { transform: scale(1.05); }
.hb-photo-1 { grid-column: 2; grid-row: 1; }
.hb-photo-2 { grid-column: 3; grid-row: 1; }

/* Overlay info sobre cada foto */
.hb-photo-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px 14px 13px;
    background: linear-gradient(to top, rgba(20,35,55,.78) 0%, transparent 100%);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 6px;
}
.hb-photo-name {
    font-size: .76rem; font-weight: 700; color: #fff; line-height: 1.25; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hb-photo-price {
    font-size: .8rem; font-weight: 900; color: var(--accent);
    white-space: nowrap; background: rgba(0,0,0,.28);
    border-radius: 6px; padding: 2px 8px; backdrop-filter: blur(4px);
}
.hb-photo-tag {
    position: absolute; top: 10px; left: 10px;
    background: rgba(255,255,255,.93); color: var(--accent-dark);
    font-size: .57rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
    border: 1px solid rgba(208,183,153,.3);
}

/* ── Celda stats (fila inferior izquierda) ── */
.hb-stats {
    grid-column: 1; grid-row: 2;
    background: var(--surface); border-radius: 18px;
    border: 1.5px solid var(--border);
    padding: 0 28px;
    display: flex; align-items: center; gap: 0;
}
.hb-stat { flex: 1; text-align: center; }
.hb-stat:first-child { text-align: left; }
.hb-stat:last-child  { text-align: right; }
.hb-stat-n {
    font-size: 1.45rem; font-weight: 900; color: var(--text);
    line-height: 1; letter-spacing: -.02em;
}
.hb-stat-l {
    font-size: .6rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .07em; margin-top: 4px;
}
.hb-stat-sep { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

/* ── Celda CTA dorada (fila inferior, 2 columnas) ── */
.hb-cta-wide {
    grid-column: 2 / 4; grid-row: 2;
    border-radius: 18px; overflow: hidden;
    background: linear-gradient(125deg, var(--accent-dark) 0%, var(--accent) 55%, #e8d5b0 100%);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px; text-decoration: none;
    transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 20px rgba(185,154,120,.3);
    position: relative;
}
.hb-cta-wide::before {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 140px; height: 140px; border-radius: 50%;
    background: rgba(255,255,255,.1); pointer-events: none;
}
.hb-cta-wide:hover { opacity: .94; transform: translateY(-1px); }
.hb-cta-label {
    font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: -.02em; line-height: 1.2;
}
.hb-cta-sub { font-size: .75rem; color: rgba(255,255,255,.78); margin-top: 3px; }
.hb-cta-arrow {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1rem; position: relative; z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hero-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 90px;
        gap: 8px; padding: 10px; min-height: auto;
    }
    .hb-brand    { grid-column: 1 / 3; grid-row: 1; padding: 34px 26px; }
    .hb-photo-1  { grid-column: 1; grid-row: 2; min-height: 220px; }
    .hb-photo-2  { grid-column: 2; grid-row: 2; min-height: 220px; }
    .hb-stats    { grid-column: 1; grid-row: 3; }
    .hb-cta-wide { grid-column: 2; grid-row: 3; padding: 0 20px; }
    .hb-headline { font-size: 2.2rem; }
}
@media (max-width: 540px) {
    .hero-bento  { grid-template-columns: 1fr 1fr; padding: 8px; gap: 8px; }
    .hb-brand    { padding: 26px 20px; }
    .hb-headline { font-size: 1.9rem; }
    .hb-desc     { display: none; }
    .hb-photo-1, .hb-photo-2 { min-height: 170px; }
    .hb-stats    { grid-column: 1 / 3; grid-row: 3; }
    .hb-cta-wide { grid-column: 1 / 3; grid-row: 4; padding: 0 22px; }
    .hero-bento  { grid-template-rows: auto auto 88px 82px; }
}

/* Compatibilidad: hero-edi ya no se usa */
.hero-edi, .hedi-bg-blob { display: none; }


/* ════════════════════════════════════════════════════
   PCARD — Product Card moderna (2025)
   Portrait 4:5 · Overlay dual-button on hover
════════════════════════════════════════════════════ */
.pcard {
    background: #fff; border-radius: 16px; overflow: hidden;
    cursor: pointer; border: 1.5px solid #edf1f7;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 8px rgba(30,42,58,.06);
    transition:
        transform .28s cubic-bezier(.34,1.3,.64,1),
        box-shadow .28s ease, border-color .2s;
}
.pcard:hover {
    transform: translateY(-8px);
    box-shadow:
        0 0 0 2.5px rgba(208,183,153,.28),
        0 24px 60px rgba(30,42,58,.13);
    border-color: var(--accent);
}

.pcard-img {
    aspect-ratio: 4 / 5;
    position: relative; overflow: hidden;
    background: #f0f2f6; flex-shrink: 0;
}
.pcard-img > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.34,1.06,.64,1);
}
.pcard:hover .pcard-img > img { transform: scale(1.09); }

/* Etiqueta de colección */
.pcard-tag {
    position: absolute; top: 9px; left: 9px; z-index: 2;
    background: rgba(255,255,255,.96); border-radius: 6px;
    padding: 3px 9px; font-size: .58rem; font-weight: 700;
    color: var(--accent-dark); letter-spacing: .05em; text-transform: uppercase;
    border: 1px solid rgba(208,183,153,.25); backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Chips de urgencia/stock */
.pcard-chip {
    position: absolute; bottom: 52px; left: 9px; z-index: 2;
    font-size: .59rem; font-weight: 700;
    padding: 3px 9px; border-radius: 5px;
    backdrop-filter: blur(4px);
}
.pcard-chip-low  { background: rgba(254,243,199,.96); color: #92400e; }
.pcard-chip-soon { background: rgba(255,255,255,.82); color: var(--text-muted); border: 1px solid rgba(0,0,0,.1); }

/* Quick button: deshabilitado, reemplazado por overlay */
.pcard-quick { display: none; }

/* ── Overlay con dos botones de acción ── */
.pcard-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex; gap: 7px;
    padding: 10px;
    background: linear-gradient(to top, rgba(10,18,30,.82) 0%, rgba(10,18,30,.2) 100%);
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.34,1.12,.64,1);
    pointer-events: none; z-index: 3;
}
.pcard:hover .pcard-overlay {
    transform: translateY(0);
    pointer-events: all;
}
.pcard-ov-btn {
    flex: 1; padding: 9px 6px; border-radius: 9px;
    font-size: .76rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; border: none;
    transition: opacity .18s, transform .18s;
    text-decoration: none; white-space: nowrap;
}
.pcard-ov-btn:hover { opacity: .9; transform: scale(.98); }
.pcard-ov-detail {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.26) !important;
    color: #fff;
}
.pcard-ov-detail:hover { background: rgba(255,255,255,.22); color: #fff; }
.pcard-ov-add {
    flex: 1.4;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    box-shadow: 0 2px 12px rgba(185,154,120,.4);
}
.pcard-ov-add:disabled { opacity: .45; cursor: default; transform: none; }

/* ── Cuerpo de la card ── */
.pcard-body {
    padding: 11px 13px 14px;
    flex: 1; display: flex; flex-direction: column; gap: 7px;
}
.pcard-name {
    font-size: .87rem; font-weight: 700; color: var(--text); line-height: 1.32;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-foot {
    display: flex; align-items: baseline; gap: 4px;
    margin-top: auto; padding-top: 8px; border-top: 1px solid #edf0f5;
}
.pcard-price { font-size: 1.15rem; font-weight: 900; color: var(--primary-dark); letter-spacing: -.02em; }
.pcard-price sup { font-size: .52rem; font-weight: 600; color: var(--text-muted); vertical-align: super; line-height: 0; }
.pcard-price small { font-size: .68rem; font-weight: 600; color: var(--text-muted); margin-left: 2px; }


/* ════════════════════════════════════════════════════════
   PAYMENT METHOD SELECTION
════════════════════════════════════════════════════════ */
.payment-method-opt {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    position: relative;
    background: var(--surface);
}
.payment-method-opt:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(208,183,153,.12);
}
.payment-method-opt.selected-payment {
    border-color: var(--accent);
    background: linear-gradient(135deg, #fffbf6 0%, #fdf6ee 100%);
    box-shadow: 0 0 0 4px rgba(208,183,153,.18);
}
.pm-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
    color: var(--accent-dark);
}
.pm-icon-mp { background: #e8f6ff; }
.pm-icon-pp { background: #e8f0ff; }
.pm-icon img { width: 28px; height: 28px; object-fit: contain; }
.pm-body {
    flex: 1;
    min-width: 0;
}
.pm-body strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.pm-body p {
    font-size: .82rem;
    color: var(--text-sec);
    line-height: 1.5;
    margin: 0;
}
.pm-check {
    font-size: 1.2rem;
    color: var(--border);
    flex-shrink: 0;
    align-self: center;
    transition: color var(--transition);
}
.selected-payment .pm-check { color: var(--accent); }
.pm-highlight {
    font-weight: 700;
    color: var(--accent-dark);
}
.pm-deposit-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    background: #fff;
    border: 1px dashed var(--accent);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .82rem;
    color: var(--text-sec);
}
.pm-deposit-amount {
    font-size: 1.05rem;
    font-weight: 900;
    color: #b8975a;
}
.pm-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    font-size: .78rem;
    color: #888;
    line-height: 1.55;
}
.pm-note .fa { color: var(--accent); margin-top: 1px; flex-shrink: 0; }
.pm-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.pm-card-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text-sec);
    border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════
   USER DROPDOWN MENU
════════════════════════════════════════════════════════ */
.store-user-menu {
    position: relative;
}
.store-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: 40px;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.store-user-btn:hover {
    border-color: var(--primary);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgba(153,178,209,.15);
}
.store-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.store-user-name {
    font-weight: 600;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.store-user-caret {
    font-size: .65rem;
    color: var(--text-muted);
    transition: transform var(--transition);
}
.store-user-btn[aria-expanded="true"] .store-user-caret {
    transform: rotate(180deg);
}
/* Dropdown panel */
.store-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(30,42,58,.14);
    opacity: 0;
    transform: translateY(-8px) scale(.97);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 1000;
}
.store-user-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}
.store-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
}
.sud-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sud-name {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.sud-email {
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.sud-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}
.sud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-sec);
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
}
.sud-item:hover {
    background: var(--surface-2);
    color: var(--primary-dark);
}
.sud-item .fa {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    transition: color var(--transition);
}
.sud-item:hover .fa {
    color: var(--primary-dark);
}
.sud-item-danger:hover {
    background: #fff5f5;
    color: #c53030;
}
.sud-item-danger:hover .fa {
    color: #c53030;
}
.store-user-dropdown > *:last-child.sud-item {
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ════════════════════════════════════════════════════
   HERO PHOTO — foto de fondo a pantalla completa
════════════════════════════════════════════════════ */
.hero-photo {
    position: relative;
    overflow: hidden;
    /* Antes tenía un tope de 840px — en pantallas muy altas (monitores
       grandes, 4K) el hero se quedaba corto y dejaba un bloque blanco
       debajo antes de la siguiente sección. Ahora siempre llena el alto
       visible bajo la barra de navegación, sin importar qué tan alta sea
       la pantalla; el mínimo de 560px sigue protegiendo viewports muy
       bajos (celulares en horizontal). */
    min-height: max(560px, calc(100vh - var(--header-h)));
    display: flex;
    align-items: center;
    background: var(--text);
    /* En teléfono el 100vh de arriba cuenta la barra de direcciones del
       navegador como si siempre estuviera oculta, así que al cargar la
       página el cover en realidad mide más que el alto visible real y
       empuja la franja de confianza (100% originales, envíos...) fuera
       de la pantalla. dvh SÍ tiene en cuenta esa barra dinámica; donde
       no hay soporte, el valor de abajo (más corto que 100vh) sigue
       sirviendo como red de seguridad. */
}

.hero-photo-slides { position: absolute; inset: 0; }
.hero-photo-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    transform-origin: center center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.1s ease, transform 1.1s ease;
}
.hero-photo-slide.active {
    opacity: 1;
    animation: hero-ken-burns 9s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}
.hero-photo-slide-noimg {
    background-image: linear-gradient(135deg, var(--primary-dark), #4a6288) !important;
}
.hero-photo-slide-noimg::after {
    content: '\f290';
    font-family: 'FontAwesome';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: rgba(255,255,255,.25);
}

.hero-photo-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(0deg, rgba(15,20,28,.68) 0%, rgba(15,20,28,.28) 45%, rgba(15,20,28,.12) 100%),
        linear-gradient(90deg, rgba(15,20,28,.55) 0%, rgba(15,20,28,0) 55%);
}

.hero-photo-inner {
    position: relative; z-index: 2;
    width: 100%;
    padding-top: 40px; padding-bottom: 40px;
    display: flex; flex-direction: column; gap: 20px;
}

/* Panel de vidrio sobre la foto — antes el texto flotaba directo sobre la
   imagen sostenido solo por el degradado del scrim, así que en fotos
   claras o muy ocupadas (como collages de producto) se veía desordenado
   y poco legible. Ahora el bloque de texto tiene su propia superficie
   (fondo oscuro semitransparente + blur + borde sutil), separada
   visualmente de la foto de fondo, que sigue siendo a pantalla completa
   detrás — no es una card con la foto empujada al lado. */
.hero-photo-content {
    max-width: 620px;
    background: rgba(10,14,20,.46);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    padding: 28px 34px;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.hero-photo-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: #fff;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 7px 14px 7px 11px; border-radius: 99px; margin-bottom: 14px;
}
.hbe-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(153,178,209,.4);
    animation: hbe-pulse 2.4s ease-in-out infinite;
}
@keyframes hbe-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* "Nueva colección" — misma escala tipográfica que el título, en azul */
.hero-photo-kicker {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
    color: var(--primary-light); margin-bottom: 4px;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero-photo-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 600; line-height: 1.08; letter-spacing: -.01em;
    color: #fff; margin-bottom: 10px;
    text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.hero-photo-title em {
    font-style: normal; font-weight: 600; color: var(--primary-light);
}
.hero-photo-urgency {
    display: inline-flex; align-items: center; gap: 8px;
    width: fit-content;
    font-family: var(--font-body); font-size: .92rem; font-weight: 700;
    letter-spacing: .01em;
    color: #fff; background: rgba(153,178,209,.22);
    border: 1px solid rgba(153,178,209,.55);
    padding: 8px 16px; border-radius: 99px; margin-bottom: 8px;
}
.hero-photo-urgency i { color: var(--primary-light); }
.hero-photo-urgency:empty { display: none; }
.hero-photo-sub {
    font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.9);
    margin-bottom: 18px; max-width: 100%; white-space: normal;
}
.hero-photo-sub strong { color: #fff; }

.hero-photo-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-photo-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primary-dark); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    padding: 15px 26px; border-radius: 99px;
    text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.hero-photo-btn-primary i { font-size: .8rem; transition: transform .22s ease; }
.hero-photo-btn-primary:hover { transform: translateY(-2px); background: #5f7ba3; box-shadow: 0 14px 32px rgba(0,0,0,.4); color: #fff; }
.hero-photo-btn-primary:hover i { transform: translateX(4px); }
.hero-photo-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    padding: 15px 24px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.55);
    text-decoration: none; transition: border-color .2s ease, background .2s ease;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-photo-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.18); color: #fff; }

@media (max-width: 767px) {
    .hero-photo {
        align-items: flex-end;
        /* A pantalla completa real: dvh (no vh) para que el cálculo use el
           alto visible de verdad del teléfono en cada momento — con vh a
           secas, el navegador cuenta como si la barra de direcciones
           siempre estuviera oculta, y el resultado queda más alto que la
           pantalla real, dejando espacio en blanco abajo hasta que se
           hace scroll (ver comentario en la regla de escritorio). */
        min-height: max(560px, calc(100vh - var(--header-h)));
        min-height: max(560px, calc(100dvh - var(--header-h)));
    }
    .hero-photo-inner {
        padding-top: 70px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    }

    /* Mismo panel de vidrio que en escritorio (fondo oscuro semitransparente
       + blur + borde sutil) en vez del panel "hoja" de ancho completo que
       había antes — la foto sigue a pantalla completa detrás, solo cambia
       de ancho completo/pegado al borde a una tarjeta flotante. */
    .hero-photo-content {
        width: 100%; max-width: 100%;
        padding: 24px 22px;
    }
    .hero-photo-eyebrow { margin-bottom: 14px; }
    .hero-photo-kicker { margin-bottom: 4px; }
    .hero-photo-urgency { margin-bottom: 10px; }
    .hero-photo-title { margin-bottom: 10px; }
    .hero-photo-sub { margin-bottom: 18px; }
}
@media (max-width: 480px) {
    .hero-photo-ctas { flex-wrap: nowrap; gap: 10px; }
    .hero-photo-btn-primary,
    .hero-photo-btn-ghost {
        flex: 1 1 0; min-width: 0;
        padding: 13px 10px; font-size: .78rem; gap: 6px;
        justify-content: center; text-align: center; white-space: normal;
    }
}

/* ── Franja de confianza — texto plano con íconos, separado por líneas ── */
.hero-photo-trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    margin-top: 18px;
}
.ts-item {
    display: inline-flex; align-items: center; gap: 8px;
}
.ts-item i {
    color: var(--primary-light); font-size: .95rem;
}
.ts-label {
    font-size: .82rem; font-weight: 700; color: #fff;
    white-space: nowrap;
}
.ts-sep {
    width: 1px; height: 16px;
    background: rgba(255,255,255,.35);
}
/* Versión larga/corta del texto — toggle con CSS propio en vez de
   utilidades de Bootstrap (antes d-none/d-sm-inline), consistente con el
   resto de los toggles responsivos de este archivo. */
.ts-label-short { display: none; }
.ts-label-full { display: inline; }
@media (max-width: 767px) {
    .hero-photo-trust { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
    .ts-item { gap: 6px; min-width: 0; flex: 0 1 auto; }
    .ts-item i { font-size: .85rem; }
    .ts-label {
        font-size: .8rem; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    .ts-label-short { display: inline; }
    .ts-label-full { display: none; }
    .ts-sep { display: none; }

    /* nowrap + max-width con elipsis: letra cómoda de leer, y si algún
       texto dinámico llega a ser inusualmente largo, se recorta con "…"
       en vez de partirse en dos líneas o desbordar la pantalla. */
    .hero-photo-urgency {
        font-size: .82rem; padding: 8px 15px; gap: 7px;
        max-width: calc(100vw - 64px);
    }
    .hero-photo-urgency i { font-size: .85rem; flex-shrink: 0; }
    .hero-photo-urgency span {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}
@media (max-width: 400px) {
    .ts-label { font-size: .72rem; max-width: 30vw; }
    .ts-item { gap: 5px; }
    .hero-photo-urgency { font-size: .74rem; padding: 7px 13px; max-width: calc(100vw - 48px); }
}

/* ── CTA final ── */
.final-cta {
    position: relative; overflow: hidden;
    padding: 96px 0;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
}
.final-cta-texture {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(30,42,58,.08) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 50%, #000 0%, transparent 78%);
            mask-image: radial-gradient(ellipse 60% 100% at 50% 50%, #000 0%, transparent 78%);
}

/* Variante con foto de la preventa llenando toda la franja (cover, sin bordes blancos) */
.final-cta-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.final-cta-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(20,28,40,.82) 0%, rgba(20,28,40,.6) 55%, rgba(20,28,40,.82) 100%);
}

.final-cta-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body); font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--primary-dark);
    background: rgba(255,255,255,.6); border: 1px solid rgba(122,151,188,.35);
    padding: 7px 14px 7px 11px; border-radius: 99px;
}
.final-cta-title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.9rem, 3.5vw, 2.7rem); letter-spacing: -.01em;
    color: var(--text); margin: 16px 0 12px;
}
.final-cta-sub {
    font-size: .98rem; line-height: 1.7; color: var(--text-sec);
    max-width: 440px; margin: 0 auto 30px;
}
.final-cta-has-photo .final-cta-eyebrow {
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.final-cta-has-photo .final-cta-title { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.final-cta-has-photo .final-cta-sub   { color: rgba(255,255,255,.86); }

.final-cta-btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--primary-dark); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    padding: 15px 26px; border-radius: 99px;
    text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,.25);
}
.final-cta-btn-primary:hover { transform: translateY(-2px); background: #5f7ba3; color: #fff; }
.final-cta-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); color: var(--text);
    font-family: var(--font-body); font-weight: 600; font-size: .92rem;
    padding: 15px 24px; border-radius: 99px; border: 1.5px solid rgba(30,42,58,.18);
    text-decoration: none; transition: border-color .2s ease, background .2s ease;
}
.final-cta-has-photo .final-cta-btn-ghost {
    color: #fff; border-color: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.final-cta-btn-ghost:hover { background: rgba(255,255,255,.5); }
.final-cta-has-photo .final-cta-btn-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; }

/* ════════════════════════════════════════════════════
   STORE PHOTO CARDS (preventas grid en home)
════════════════════════════════════════════════════ */
.store-photo-card {
    position: relative; border-radius: 18px; overflow: hidden;
    display: block; text-decoration: none;
    cursor: pointer; aspect-ratio: 3 / 4;
    background: var(--surface-2);
    transition: box-shadow .28s ease, transform .28s ease;
}
.store-photo-card:hover { box-shadow: 0 18px 50px rgba(30,42,58,.2); transform: translateY(-4px); }
.store-photo-card > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.store-photo-card:hover > img { transform: scale(1.05); }
.store-photo-card-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
}
.store-photo-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.06) 50%, transparent 100%);
}
.store-photo-card-badge {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    background: rgba(255,255,255,.92); color: #1e2a3a;
    font-size: .6rem; font-weight: 700; padding: 4px 11px; border-radius: 20px;
    letter-spacing: .04em; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.55);
}
.store-photo-card-badge.spc-urgent { background: #c53030; color: #fff; border-color: transparent; }
.store-photo-card-body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 20px 18px; }
.store-photo-card-name {
    font-size: 1.2rem; font-weight: 800; color: #fff;
    line-height: 1.2; margin-bottom: 4px; text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.store-photo-card-sub { font-size: .78rem; color: rgba(255,255,255,.68); margin-bottom: 12px; }
.store-photo-card-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.16); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.32); color: #fff;
    font-size: .76rem; font-weight: 600; padding: 6px 14px; border-radius: 7px;
    transition: background .2s;
}
.store-photo-card:hover .store-photo-card-btn { background: rgba(255,255,255,.28); }

/* ════════════════════════════════════════════════════
   SECTION HEADINGS (store-eyebrow / heading / sub)
════════════════════════════════════════════════════ */
.store-eyebrow {
    font-size: .82rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--primary-dark);
    display: block; margin-bottom: 8px;
}
.store-section-heading {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 600; letter-spacing: -.01em;
    color: var(--text); margin-bottom: 4px; line-height: 1.1;
}

/* ── Tabs: En camino / Lo más nuevo ──
   Sin flex-wrap ni overflow controlado, 4 pestañas con texto largo
   ("Disponible para apartar") desbordaban el ancho en teléfono y
   contribuían al scroll horizontal del sitio. Ahora se deslizan
   horizontalmente en vez de desbordar o apretarse. */
.product-tabs {
    display: flex; gap: 6px; margin-bottom: 24px;
    border-bottom: 1.5px solid var(--border);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.product-tabs::-webkit-scrollbar { display: none; }
.product-tab {
    background: none; border: none; cursor: pointer;
    padding: 10px 10px 12px; margin-bottom: -1.5px;
    font-family: var(--font-body); font-size: .92rem; font-weight: 700;
    color: var(--text-muted); text-decoration: none; display: inline-block;
    white-space: nowrap; flex-shrink: 0;
    border-bottom: 2.5px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.product-tab:hover { color: var(--text); }
.product-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary-dark); }
.product-tab-panel.d-none { display: none !important; }
@media (max-width: 576px) {
    .product-tab { font-size: .82rem; padding: 9px 8px 11px; }
}
.store-section-sub { color: #5a6b80; font-size: 1.02rem; font-weight: 500; line-height: 1.6; }

/* ════════════════════════════════════════════════════
   PRODUCT PILLS (badges de estado en product-card-img)
════════════════════════════════════════════════════ */
.product-pill {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: rgba(255,255,255,.93); color: var(--text);
    font-size: .57rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    letter-spacing: .05em; text-transform: uppercase;
    backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.product-pill.pp-danger { background: #c53030; color: #fff; border-color: transparent; }
.product-pill.pp-accent { background: var(--accent); color: #4a3a1f; border-color: var(--accent-dark); }
.product-pill.pp-ok { background: rgba(21,128,61,.95); color: #fff; border-color: transparent; }
.product-pill.pp-primary { background: var(--primary-dark); color: #fff; border-color: transparent; }

/* ════════════════════════════════════════════════════
   IMAGE HOVER PREVIEW (fotos de producto en tablas)
════════════════════════════════════════════════════ */
.js-hover-preview {
    cursor: zoom-in;
    transition: transform .15s ease, box-shadow .15s ease;
}
.js-hover-preview:hover { transform: scale(1.08); box-shadow: var(--shadow); }
.store-image-hover-preview {
    position: fixed; display: none; z-index: 20000; pointer-events: none;
    background: #fff; border: 1px solid var(--border); padding: 10px;
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.store-image-hover-preview img {
    width: 380px; height: 380px; object-fit: contain; display: block; background: #fff;
}
@media (hover: none), (pointer: coarse) {
    .js-hover-preview:hover { transform: none; }
    .store-image-hover-preview { display: none !important; }
}

/* ════════════════════════════════════════════════════
   LIGHTBOX de foto de colección (SweetAlert2) — sin fondo
   propio, la imagen cabe completa en pantalla sin scroll
════════════════════════════════════════════════════ */
.preorder-lightbox-popup {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.preorder-lightbox-img {
    margin: 0 !important;
    max-width: 92vw !important;
    max-height: 92vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.preorder-lightbox-close {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Teléfonos angostos: con sesión iniciada el navbar (logo + 4 botones + hamburguesa)
   no cabía y dejaba fuera el menú de cuenta y la hamburguesa. */
@media (max-width: 575.98px) {
    .store-nav-inner { padding: 0 10px; gap: 6px; }
    .store-nav-actions { gap: 5px; }
    .store-nav-actions .store-cart-btn { width: 38px; height: 38px; font-size: 1rem; }
    .store-user-caret { display: none; }
    .store-user-btn { padding: 4px; }
}
@media (max-width: 420px) {
    .store-logo-text { display: none; }
}

/* Teléfonos: "¿Te interesa esta colección?" — botones a todo el ancho. */
@media (max-width: 768px) {
    .preorder-detail-bottom-inner { align-items: stretch; }
    .preorder-detail-bottom-actions { width: 100%; flex-direction: column; flex-shrink: 1; }
    .preorder-detail-bottom-actions .preorder-detail-cta-wa,
    .preorder-detail-bottom-actions .preorder-detail-cta-sec { width: 100%; justify-content: center; text-align: center; }
}

/* Teléfonos: el botón de rastrear ya está en el menú de hamburguesa. */
@media (max-width: 991.98px) {
    .store-nav-actions a[aria-label="Rastrear pedido"] { display: none; }
}

/* Menú móvil: "Cerrar sesión" como botón rojo. */
@media (max-width: 991.98px) {
    #storeNavbar .store-mobile-logout {
        display: flex; align-items: center; justify-content: center;
        margin-top: 8px; padding: 12px 16px; border-radius: 12px;
        background: #dc3545; color: #fff !important; font-weight: 700;
        border: none;
    }
    #storeNavbar .store-mobile-logout:hover,
    #storeNavbar .store-mobile-logout:active { background: #bb2d3b; color: #fff !important; }
    #storeNavbar .store-mobile-logout i { color: #fff; }
}

/* Páginas sin navbar (ej. aviso de privacidad): no dejar el hueco del navbar fijo. */
.store-page.store-page-no-nav { padding-top: 0; }