/* ==========================================================
   IMPERIAL ESSENCE — detalle.css
   Versión 2.0 — Rewrite completo
   ========================================================== */

/* ── Variables ─────────────────────────────────────────── */
:root {
    --gold:          #8A8E75;
    --gold-light:    #A8AC94;
    --gold-gradient: linear-gradient(135deg,#5F6350,#8A8E75 45%,#9FA389 75%,#A8AC94);
    --gold-glow:     rgba(138,142,117,.25);
    --dark:          #FFFFFF;
    --dark2:         #FFFFFF;
    --dark3:         #2C2D23;
    --card:          #FFFFFF;
    --border:        rgba(138,142,117,.22);
    --border-gold:   rgba(138,142,117,.35);
    --text:          #2C2D23;
    --muted:         #8A8C7E;
    --radius-sm:     6px;
    --radius-md:     14px;
    --radius-lg:     22px;
    --transition:    .35s cubic-bezier(.4,0,.2,1);
    --font-title:    'Cormorant Garamond', serif;
    --font-body:     'Inter', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--dark);
    color: var(--text);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Container ─────────────────────────────────────────── */
.container { width: min(1400px, 92%); margin: auto; }

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════════════════ */
.breadcrumb {
    margin-top: 100px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    letter-spacing: .5px;
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color var(--transition);
}

.breadcrumb a:hover { color: var(--gold); }

.breadcrumb .sep { color: var(--muted); font-size: 11px; }

.breadcrumb .current { color: var(--gold); }

/* ══════════════════════════════════════════════════════════
   HERO DEL PRODUCTO — LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════ */
.detalle-producto { padding: 60px 0 100px; }

.detalle-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 64px;
    align-items: start;
}

/* ══════════════════════════════════════════════════════════
   GALERÍA
══════════════════════════════════════════════════════════ */
.galeria-producto {
    position: sticky;
    top: 110px;
}

/* Imagen principal */
.imagen-principal-wrap {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    overflow: hidden;
    height: 680px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-in;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.imagen-principal-wrap:hover {
    border-color: var(--border-gold);
    box-shadow: 0 0 60px var(--gold-glow);
}

#imagenPrincipal {
    width: 88%;
    max-height: 580px;
    object-fit: contain;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}

/* Video principal */
#videoPrincipal {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Cuando se muestra el video, la galería no hace zoom-in */
.imagen-principal-wrap.modo-video { cursor: default; }
.imagen-principal-wrap.modo-video:hover { box-shadow: none; }

/* Badge de oferta sobre imagen */
.badge-oferta-galeria {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--gold);
    color: #2C2D23;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Miniaturas */
.miniaturas {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.miniatura {
    width: 82px;
    height: 82px;
    background: var(--card);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    object-fit: contain;
    transition: border-color var(--transition), transform var(--transition);
    flex-shrink: 0;
}

.miniatura:hover { border-color: var(--gold-light); transform: translateY(-3px); }
.miniatura.activa { border-color: var(--gold); }

/* Miniatura de video — usa el primer frame del <video> como imagen */
.miniatura-video-wrap {
    position: relative;
    width: 82px;
    height: 82px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--card);
    transition: border-color var(--transition), transform var(--transition);
}

.miniatura-video-wrap:hover { border-color: var(--gold-light); transform: translateY(-3px); }
.miniatura-video-wrap.activa { border-color: var(--gold); }

.miniatura-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.miniatura-video-wrap .icono-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
    pointer-events: none;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    cursor: zoom-out;
    backdrop-filter: blur(8px);
    animation: fadeIn .2s ease;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════════════════════
   INFORMACIÓN DEL PRODUCTO
══════════════════════════════════════════════════════════ */
.info-producto { display: flex; flex-direction: column; }

/* Marca */
.info-producto .marca {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 500;
}

/* Nombre */
.info-producto h1 {
    font-family: var(--font-title);
    font-size: clamp(44px, 5vw, 72px);
    line-height: .95;
    margin-bottom: 22px;
    font-weight: 600;
    letter-spacing: -1px;
}

/* Valoración */
.valoracion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.estrellas { color: #C9A227; font-size: 18px; letter-spacing: 2px; }

.valoracion-texto { color: var(--muted); font-size: 14px; }

/* Precio */
.precio-box {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 24px;
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
}

#precio {
    font-size: 46px;
    color: var(--gold);
    font-weight: 700;
    line-height: 1;
    font-family: var(--font-title);
}

#precioOriginal {
    color: var(--muted);
    text-decoration: line-through;
    font-size: 22px;
}

.ahorro-badge {
    background: rgba(53,208,127,.12);
    color: #4FBE86;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    margin-left: auto;
}

/* Descripción corta */
.descripcion-corta {
    color: #55574A;
    line-height: 1.9;
    font-size: 16px;
    margin-bottom: 28px;
}

/* Packs por cantidad (producto-shopping.html) */
.packs-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.pack-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 10px 14px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    color: var(--cream);
    transition: border-color var(--transition), transform var(--transition);
}

.pack-card:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.pack-card.activo { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.pack-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--on-gold, #2C2D23);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.pack-badge-max { background: #E2574C; color: #fff; }

.pack-titulo { font-size: 14px; font-weight: 600; }
.pack-ahorro { font-size: 11px; color: #4FBE86; font-weight: 600; }
.pack-precio { font-family: var(--font-title); font-size: 20px; color: var(--gold); margin-top: 2px; }

@media (max-width: 576px) {
    .packs-box { grid-template-columns: 1fr; }
}

/* Estado de stock */
.estado-stock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    background: var(--card);
    border: 1px solid var(--border);
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 500;
}

.estado-stock i { font-size: 16px; }
.estado-stock.disponible { border-color: rgba(53,208,127,.25); }
.estado-stock.disponible i { color: #4FBE86; }
.estado-stock.agotado { border-color: rgba(239,68,68,.25); }
.estado-stock.agotado i { color: #E2574C; }

/* Selector de cantidad */
.cantidad-box { margin-bottom: 28px; }

.cantidad-box label {
    display: block;
    margin-bottom: 12px;
    color: #55574A;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.cantidad button {
    width: 54px;
    height: 54px;
    border: none;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-size: 22px;
    transition: background var(--transition), color var(--transition);
    line-height: 1;
}

.cantidad button:hover { background: var(--gold); color: #2C2D23; }

.cantidad input {
    width: 72px;
    height: 54px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: rgba(255,255,255,.06);
    color: var(--text);
    text-align: center;
    font-size: 18px;
    font-family: var(--font-body);
}

.cantidad input:focus { outline: none; }

/* Acciones */
.acciones-producto {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-gold {
    width: 100%;
    height: 62px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--gold);
    color: #2C2D23;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background-position .6s;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-gold:hover {
    transform: translateY(-3px);
    background-position: 100% 0;
    box-shadow: 0 16px 40px rgba(201,162,77,.30);
}

.btn-gold:disabled {
    background: #E5E3D8;
    color: #ADAA9C;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-whatsapp {
    width: 100%;
    height: 62px;
    border: none;
    border-radius: var(--radius-sm);
    background: #25D366;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-whatsapp:hover {
    transform: translateY(-3px);
    background: #4FBE86;
    box-shadow: 0 16px 40px rgba(37,211,102,.28);
}

.acciones-secundarias {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

/* ── Confirmación rápida tras "Agregar al carrito" ── */
.confirmacion-agregado {
    margin-top: -2px;
    background: rgba(138,142,117,.06);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: confirmAgregadoIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes confirmAgregadoIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.confirmacion-texto {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cream);
    font-weight: 600;
}
.confirmacion-texto i { color: #4FBE86; font-size: 18px; }
.confirmacion-acciones {
    display: flex;
    align-items: center;
    gap: 18px;
}
.btn-finalizar-rapido {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gold-gradient);
    color: var(--on-gold, #2C2D23);
    border: none;
    border-radius: var(--radius-sm);
    height: 48px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: transform var(--transition), filter var(--transition);
}
.btn-finalizar-rapido:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-seguir-viendo {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.btn-seguir-viendo:hover { color: var(--gold); }

.btn-favorito, .btn-compartir {
    flex: 1;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
}

.btn-favorito:hover { border-color: #E2574C; color: #E2574C; background: rgba(239,68,68,.06); }
.btn-compartir:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }

.btn-favorito.activo { border-color: #E2574C; color: #E2574C; background: rgba(239,68,68,.08); }

/* Beneficios mini */
.beneficios-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
}

.beneficio-item {
    text-align: center;
    padding: 18px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), transform var(--transition);
}

.beneficio-item:hover { border-color: var(--border-gold); transform: translateY(-4px); }

.beneficio-item i {
    display: block;
    font-size: 24px;
    color: var(--gold);
    margin-bottom: 10px;
}

.beneficio-item p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

/* Viewer social proof */
.viewer-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    padding: 10px 0;
    margin-top: 16px;
}

.viewer-box strong { color: var(--gold); }

/* Oferta box */
.oferta-box {
    background: var(--card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oferta-box h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

#contadorOferta {
    font-family: var(--font-title);
    font-size: 32px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 2px;
}

/* ══════════════════════════════════════════════════════════
   TÍTULOS DE SECCIÓN
══════════════════════════════════════════════════════════ */
.titulo-seccion {
    text-align: center;
    margin-bottom: 60px;
}

.titulo-seccion .eyebrow {
    display: inline-block;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
}

.titulo-seccion h2 {
    font-family: var(--font-title);
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 400;
    line-height: 1.05;
    color: var(--text);
}

.titulo-seccion p {
    color: var(--muted);
    max-width: 680px;
    margin: 16px auto 0;
    line-height: 1.8;
    font-size: 16px;
}

/* ══════════════════════════════════════════════════════════
   NOTAS OLFATIVAS
══════════════════════════════════════════════════════════ */
.notas-olfativas {
    padding: 110px 0;
    background: var(--dark2);
}

.notas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.nota-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 42px 36px;
    text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
}

.nota-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0, var(--gold-glow), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition);
}

.nota-card:hover { transform: translateY(-8px); border-color: var(--border-gold); box-shadow: 0 24px 60px rgba(44,45,35,.18); }
.nota-card:hover::before { opacity: 1; }

.nota-icono {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: rgba(200,164,77,.10);
    border: 1px solid var(--border-gold);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    position: relative;
    z-index: 1;
}

.nota-label {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.nota-card h3 {
    font-family: var(--font-title);
    font-size: 30px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.nota-card ul {
    list-style: none;
    position: relative;
    z-index: 1;
}

.nota-card li {
    padding: 11px 0;
    color: #55574A;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}

.nota-card li:last-child { border: none; }

/* ══════════════════════════════════════════════════════════
   DESCRIPCIÓN
══════════════════════════════════════════════════════════ */
.seccion-diferencia { padding: 110px 0; background: var(--dark2); }

.descripcion-producto { padding: 110px 0; }

.descripcion-box {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 60px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.descripcion-box::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold-glow), transparent 70%);
    pointer-events: none;
}

.descripcion-box p {
    color: #55574A;
    font-size: 18px;
    line-height: 2;
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: auto;
}

/* ══════════════════════════════════════════════════════════
   ESPECIFICACIONES
══════════════════════════════════════════════════════════ */
.especificaciones {
    padding: 110px 0;
    background: var(--dark2);
}

.especificaciones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.item {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 28px;
    border: 1px solid var(--border);
    transition: transform var(--transition), border-color var(--transition);
}

.item:hover { transform: translateY(-6px); border-color: var(--border-gold); }

.item-icono {
    font-size: 20px;
    color: var(--gold);
    margin-bottom: 14px;
}

.item strong {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.item span {
    color: var(--text);
    font-size: 17px;
    font-weight: 500;
}

/* Beneficios (producto-shopping.html reutiliza .item con esta variante) */
.item.item-beneficio strong {
    text-transform: none;
    letter-spacing: 0;
    font-size: 17px;
    color: var(--cream);
}
.item.item-beneficio p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
    margin-top: 8px;
}

/* Cómo funciona — pasos numerados (producto-shopping.html) */
.pasos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.paso-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    transition: transform var(--transition), border-color var(--transition);
}
.paso-item:hover { transform: translateY(-6px); border-color: var(--border-gold); }
.paso-numero {
    font-family: var(--font-title);
    font-size: 34px;
    color: var(--gold);
    margin-bottom: 10px;
}
.paso-item strong { display: block; color: var(--cream); font-size: 15px; margin-bottom: 8px; }
.paso-item p { color: var(--muted); font-size: 13px; line-height: 1.7; }

/* Puntos del problema (producto-shopping.html reutiliza .nota-card) */
.nota-card p.punto-desc {
    color: #55574A;
    font-size: 14.5px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   PERFORMANCE (barras)
══════════════════════════════════════════════════════════ */
.performance { padding: 110px 0; }

.performance-grid { max-width: 820px; margin: auto; }

.barra-item { margin-bottom: 32px; }

.barra-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
}

.barra-header span { font-size: 15px; color: #55574A; font-weight: 500; }

.barra-header .valor { color: var(--gold); font-weight: 700; }

.barra {
    width: 100%;
    height: 8px;
    background: #EFEBDE;
    border-radius: 20px;
    overflow: hidden;
}

.progreso {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    width: 0;
    transition: width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════
   IDEAL PARA
══════════════════════════════════════════════════════════ */
.ideal-para {
    padding: 110px 0;
    background: var(--dark2);
}

.ideal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ideal-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 32px 28px;
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 15px;
    transition: transform var(--transition), background var(--transition),
                color var(--transition), border-color var(--transition);
    cursor: default;
}

.ideal-card i { display: block; font-size: 28px; color: var(--gold); margin-bottom: 14px; transition: color var(--transition); }
.ideal-card p { color: var(--muted); font-size: 13px; margin-top: 6px; transition: color var(--transition); }

.ideal-card:hover {
    transform: translateY(-6px);
    background: var(--gold);
    border-color: var(--gold);
    color: #2C2D23;
}

.ideal-card:hover i { color: #2C2D23; }
.ideal-card:hover p { color: #2C2D23; }

/* ══════════════════════════════════════════════════════════
   GARANTÍA
══════════════════════════════════════════════════════════ */
.garantia { padding: 110px 0; }

.garantia-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.garantia-card {
    background: var(--card);
    padding: 36px 28px;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: transform var(--transition), border-color var(--transition);
}

.garantia-card:hover { transform: translateY(-8px); border-color: var(--border-gold); }

.garantia-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(200,164,77,.08);
    display: flex;
    justify-content: center;
    align-items: center;
}

.garantia-card i { font-size: 28px; color: var(--gold); }

.garantia-card h3 {
    font-family: var(--font-title);
    font-size: 22px;
    margin-bottom: 14px;
}

.garantia-card p { color: #8A8C7E; line-height: 1.8; font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   PRODUCTOS RELACIONADOS
══════════════════════════════════════════════════════════ */
.productos-relacionados {
    padding: 110px 0;
    background: var(--dark2);
}

.relacionados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

.card-relacionado {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}
.card-relacionado:hover { transform: translateY(-6px); border-color: var(--gold); }

.card-imagen-contenedor {
    aspect-ratio: 3/4;
    background: var(--dark2, #FFFFFF);
    overflow: hidden;
}
.card-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.card-relacionado:hover .card-imagen { transform: scale(1.06); }

.card-info { padding: 20px; }
.card-info .marca {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-d, var(--gold));
    margin-bottom: 6px;
}
.card-info h3 {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-weight: 300;
    font-size: 20px;
    color: var(--cream, #2C2D23);
    margin-bottom: 10px;
    line-height: 1.15;
}
.card-info .precios { margin-bottom: 16px; }
.card-info .precio-normal {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--gold);
}
.card-info .btn-premium {
    width: 100%;
    background: var(--gold);
    color: #2C2D23;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    transition: filter .2s;
}
.card-info .btn-premium:hover { filter: brightness(1.1); }

.oculto-permanente { display: none !important; }

/* ══════════════════════════════════════════════════════════
   OPINIONES
══════════════════════════════════════════════════════════ */
.opiniones { padding: 110px 0; }

.opiniones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.opinion-card {
    background: var(--card);
    border-radius: var(--radius-md);
    padding: 32px;
    border: 1px solid var(--border);
    transition: transform var(--transition), border-color var(--transition);
}

.opinion-card:hover { transform: translateY(-6px); border-color: var(--border-gold); }

.estrellas { color: #C9A227; font-size: 16px; letter-spacing: 2px; margin-bottom: 16px; }

.opinion-card p { line-height: 1.9; color: #55574A; font-size: 15px; margin-bottom: 22px; }

.cliente { display: flex; align-items: center; gap: 14px; }

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #2C2D23;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cliente strong { display: block; font-size: 15px; }
.cliente small { color: var(--muted); font-size: 12px; }

.sin-opiniones { color: var(--muted); font-size: 14px; grid-column: 1/-1; text-align: center; padding: 20px 0; }

.opiniones-resumen { display: flex; align-items: center; gap: 14px; margin: -12px 0 40px; flex-wrap: wrap; }
.opiniones-promedio-valor { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 32px; color: var(--gold); font-weight: 300; }
.opiniones-promedio-estrellas { color: #C9A227; font-size: 18px; letter-spacing: 2px; }
.opiniones-promedio-cant { color: var(--muted); font-size: 13px; }

.opinion-form-wrap { max-width: 560px; margin: 56px auto 0; text-align: center; }
.opinion-form-wrap h3 { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: 24px; margin-bottom: 20px; color: var(--cream, #2C2D23); }
.opinion-stars-picker { display: flex; justify-content: center; gap: 6px; font-size: 30px; margin-bottom: 18px; cursor: pointer; }
.opinion-stars-picker span { color: rgba(200,169,106,.25); transition: color .15s; }
.opinion-stars-picker span.activa { color: #8A8E75; }
.opinion-stars-picker span:focus-visible { outline: 2px solid #8A8E75; outline-offset: 3px; border-radius: 4px; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#formOpinion input, #formOpinion textarea {
    width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--cream, #2C2D23); padding: 12px 16px;
    font-family: 'Inter', sans-serif; font-size: 13.5px; outline: none; margin-bottom: 12px; resize: vertical;
}
#formOpinion input:focus, #formOpinion textarea:focus { border-color: var(--gold); }
#formOpinion input::placeholder, #formOpinion textarea::placeholder { color: var(--muted); }
.btn-enviar-opinion {
    background: var(--gold); color: #2C2D23; border: none; border-radius: var(--radius-sm);
    padding: 13px 32px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .15em;
    text-transform: uppercase; font-weight: 600; cursor: pointer; transition: filter .2s;
}
.btn-enviar-opinion:hover { filter: brightness(1.1); }
.btn-enviar-opinion:disabled { opacity: .6; cursor: not-allowed; }
.opinion-nota { color: var(--muted); font-size: 12px; margin-top: 14px; }

/* ══════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════ */
.faq {
    padding: 110px 0;
    background: var(--dark2);
}

.faq-lista { max-width: 860px; margin: auto; }

.faq-lista details {
    background: var(--card);
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color var(--transition);
}

.faq-lista details[open] { border-color: var(--border-gold); }

.faq-lista summary {
    padding: 22px 26px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color var(--transition);
}

.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after { content: '+'; color: var(--gold); font-size: 22px; font-weight: 300; flex-shrink: 0; transition: transform var(--transition); }
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista details[open] summary { color: var(--gold); }

.faq-lista p {
    padding: 0 26px 22px;
    color: #8A8C7E;
    line-height: 1.8;
    font-size: 15px;
}

/* ══════════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════════ */
.cta-final { padding: 110px 0; }

.cta-box {
    max-width: 1050px;
    margin: auto;
    text-align: center;
    padding: 80px 60px;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border-gold);
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(200,164,77,.08), transparent 60%);
    pointer-events: none;
}

.cta-box h2 {
    font-family: var(--font-title);
    font-size: clamp(36px, 5vw, 56px);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.cta-box p {
    color: #8A8C7E;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 40px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.cta-botones {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cta-botones .btn-gold { width: auto; padding: 0 40px; }

.btn-outline-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 62px;
    padding: 0 40px;
    border: 1px solid var(--gold);
    color: var(--gold);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
    font-family: var(--font-body);
}

.btn-outline-gold:hover { background: var(--gold); color: #2C2D23; }

/* ══════════════════════════════════════════════════════════
   BOTÓN VOLVER ARRIBA
══════════════════════════════════════════════════════════ */
.btn-top {
    position: fixed;
    right: 24px;
    bottom: 28px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--gold);
    color: #2C2D23;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 8px 28px rgba(200,164,77,.35);
    transition: transform var(--transition), box-shadow var(--transition);
    z-index: 998;
    display: none;
    place-items: center;
}

.btn-top:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(200,164,77,.45); }

/* ══════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
══════════════════════════════════════════════════════════ */
.btn-whatsapp-float {
    position: fixed;
    left: 24px;
    bottom: 28px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 26px;
    box-shadow: 0 8px 28px rgba(37,211,102,.30);
    transition: transform var(--transition), box-shadow var(--transition);
    z-index: 998;
}

.btn-whatsapp-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;animation:waPulse 2.4s ease-out infinite;z-index:-1}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}

.btn-whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 14px 40px rgba(37,211,102,.40); }

.wa-tooltip{position:fixed;left:92px;bottom:44px;z-index:998;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:12px;padding:10px 14px;border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(44,45,35,.18);display:flex;align-items:center;gap:10px;white-space:nowrap}
.wa-tooltip button{background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;line-height:1;padding:0}

/* ══════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA
══════════════════════════════════════════════════════════ */
.oculto { opacity: 0; transform: translateY(30px); }
.mostrar { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

@keyframes latido {
    0%   { transform: scale(1) }
    40%  { transform: scale(1.3) }
    100% { transform: scale(1) }
}

.latido { animation: latido .5s ease; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .detalle-container { gap: 50px; }
    .especificaciones-grid { grid-template-columns: repeat(2, 1fr); }
    .garantia-grid { grid-template-columns: repeat(2, 1fr); }
    .pasos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .pasos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .detalle-container { grid-template-columns: 1fr; gap: 40px; }
    .galeria-producto { position: static; }
    .imagen-principal-wrap { height: 440px; }
    .notas-grid { grid-template-columns: 1fr; }
    .opiniones-grid { grid-template-columns: 1fr; }
    .ideal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .beneficios-mini { grid-template-columns: 1fr; }
    .especificaciones-grid { grid-template-columns: 1fr; }
    .garantia-grid { grid-template-columns: 1fr; }
    .ideal-grid { grid-template-columns: 1fr; }
    .cta-box { padding: 50px 28px; }
    .descripcion-box { padding: 40px 28px; }
    #precio { font-size: 36px; }
    .info-producto h1 { font-size: 42px; }
    .miniaturas { flex-wrap: wrap; }
}