:root{
    --fp-bg:#f5f5f7;
    --fp-card:#ffffff;
    --fp-text:#1d1d1f;
    --fp-muted:#6e6e73;
    --fp-primary:#111111;
    --fp-accent:#22c55e;
    --fp-accent-dark:#16a34a;
    --fp-border:rgba(0,0,0,.08);
    --fp-shadow:0 10px 30px rgba(0,0,0,.08);
    --fp-radius:22px;
}

body{
    background:var(--fp-bg);
    color:var(--fp-text);
    font-family:Arial, Helvetica, sans-serif;
}

.navbar-fixphone{
    background:rgba(17,17,17,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* HERO BASE */

.hero-catalogo{
    position:relative;
    overflow:hidden;
    color:white;
    text-align:center;
    min-height:520px;
    display:flex;
    align-items:center;
    padding:90px 0 70px;
}

.hero-catalogo .container{
    position:relative;
    z-index:2;
}

.hero-catalogo-content{
    max-width:1000px;
    margin:0 auto;
    width:100%;
}

.hero-title{
    font-size:clamp(38px, 6vw, 68px);
    font-weight:700;
    letter-spacing:-1px;
    margin-bottom:12px;
    line-height:1.05;
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-text{
    max-width:760px;
    color:rgba(255,255,255,.82);
    font-size:18px;
    margin:0 auto 30px;
    text-align:center;
    min-height:72px;
}

.hero-badge-catalogo{
    display:inline-block;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    color:#dff7e7;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.2px;
    margin-bottom:16px;
}

.hero-info{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    align-items:stretch;
    min-height:96px;
}

.hero-info-box{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:16px 18px;
    min-width:210px;
    text-align:center;
    backdrop-filter:blur(8px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.hero-info-box strong{
    display:block;
    font-size:15px;
    margin-bottom:4px;
}

.hero-info-box span{
    color:rgba(255,255,255,.7);
    font-size:14px;
}

/* HERO PANTALLAS */

.hero-catalogo-destacado{
    background:
        linear-gradient(135deg, rgba(0,0,0,.84), rgba(0,0,0,.90)),
        url("https://guide-images.cdn.ifixit.com/igi/3YqSYNiGN2RQrZrM.large");
    background-size:cover;
    background-position:center;
}

.hero-catalogo-destacado::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("https://guide-images.cdn.ifixit.com/igi/3YqSYNiGN2RQrZrM.large");
    background-size:cover;
    background-position:center;
    filter:blur(12px);
    opacity:.22;
    transform:scale(1.15);
    z-index:0;
}

/* HERO BATERIAS */

.hero-baterias{
    background:
        linear-gradient(135deg, rgba(0,0,0,.88), rgba(0,0,0,.92)),
        url("https://guide-images.cdn.ifixit.com/igi/oC6W6xyAZGqW1wrp.large");
    background-size:cover;
    background-position:center;
}

.hero-baterias::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("https://guide-images.cdn.ifixit.com/igi/oC6W6xyAZGqW1wrp.large");
    background-size:cover;
    background-position:center;
    filter:blur(14px);
    opacity:.22;
    transform:scale(1.2);
    z-index:0;
}

/* HERO CAMARAS */

.hero-camaras{
    background:
        linear-gradient(135deg, rgba(0,0,0,.88), rgba(0,0,0,.92)),
        url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1600&q=80");
    background-size:cover;
    background-position:center;
}

.hero-camaras::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("https://images.unsplash.com/photo-1516035069371-29a1b244cc32?auto=format&fit=crop&w=1600&q=80");
    background-size:cover;
    background-position:center;
    filter:blur(14px);
    opacity:.22;
    transform:scale(1.2);
    z-index:0;
}

/* HERO BASES DE CARGA */

.hero-carga{
    background:
        linear-gradient(135deg, rgba(0,0,0,.88), rgba(0,0,0,.92)),
        url("https://images.unsplash.com/photo-1583863788434-e58a36330cf0?auto=format&fit=crop&w=1600&q=80");
    background-size:cover;
    background-position:center;
}

.hero-carga::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("https://images.unsplash.com/photo-1583863788434-e58a36330cf0?auto=format&fit=crop&w=1600&q=80");
    background-size:cover;
    background-position:center;
    filter:blur(14px);
    opacity:.22;
    transform:scale(1.2);
    z-index:0;
}

/* SECCION GENERAL */

.catalogo-section{
    padding:0 0 48px;
}

/* COTIZADOR */

.control-pro{
    border-radius:14px;
    min-height:48px;
    border:1px solid rgba(0,0,0,.12);
}

.control-pro:focus{
    box-shadow:0 0 0 .2rem rgba(34,197,94,.15);
    border-color:rgba(34,197,94,.55);
}

.cotizador-box{
    background:rgba(255,255,255,.96);
    border:1px solid var(--fp-border);
    border-radius:24px;
    box-shadow:0 14px 32px rgba(0,0,0,.06);
    padding:24px;
    margin-top:-58px;
    margin-bottom:28px;
    position:relative;
    z-index:3;
}

.cotizador-head{
    margin-bottom:18px;
}

.cotizador-head h2{
    font-size:28px;
    font-weight:800;
    margin-bottom:6px;
    letter-spacing:-.5px;
}

.cotizador-head p{
    margin:0;
    color:var(--fp-muted);
    font-size:15px;
}

.cotizador-badge{
    display:inline-block;
    background:#ecfdf3;
    color:#15803d;
    border:1px solid rgba(34,197,94,.18);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    margin-bottom:12px;
    letter-spacing:.2px;
}

.cotizador-preview{
    background:#f8f9fb;
    border:1px solid rgba(0,0,0,.06);
    border-radius:16px;
    padding:14px 16px;
    color:var(--fp-muted);
    font-size:15px;
    flex:1 1 320px;
}

.btn-cotizador-wa{
    border-radius:14px;
    padding:12px 20px;
    font-weight:800;
    min-width:240px;
}

.btn-cotizador-wa.disabled{
    pointer-events:none;
    opacity:.65;
}

/* ENCABEZADO CATALOGO */

.catalogo-head{
    align-items:end;
}

.catalogo-badge{
    display:inline-block;
    background:#ecfdf3;
    color:#15803d;
    border:1px solid rgba(34,197,94,.18);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    margin-bottom:10px;
    letter-spacing:.2px;
}

.seccion-titulo{
    font-size:30px;
    font-weight:700;
    letter-spacing:-.5px;
}

.seccion-subtitulo{
    color:var(--fp-muted);
}

.resultado-pill{
    background:white;
    border:1px solid var(--fp-border);
    padding:10px 16px;
    border-radius:999px;
    color:var(--fp-muted);
    font-size:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.resultado-pill span{
    color:var(--fp-text);
    font-weight:700;
}

/* CARDS */

.card-pro{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.06);
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:transform .25s ease, box-shadow .25s ease;
    height:100%;
    backdrop-filter:blur(10px);
}

.card-pro:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 42px rgba(0,0,0,.14);
}

.card-top{
    position:relative;
    padding:20px 20px 0;
}

.badge-marca{
    position:absolute;
    top:18px;
    left:18px;
    z-index:2;
    background:#111;
    color:white;
    font-size:11px;
    font-weight:800;
    padding:8px 11px;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.card-image-wrap{
    background:
        radial-gradient(circle at top, rgba(34,197,94,.06), transparent 35%),
        linear-gradient(180deg, #ffffff 0%, #f3f5f7 100%);
    border-radius:20px;
    height:260px;
    min-height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:20px;
}

.card-image-wrap img{
    width:100%;
    max-width:180px;
    max-height:220px;
    object-fit:contain;
    display:block;
    transition:transform .28s ease;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.12));
}

.card-pro:hover .card-image-wrap img{
    transform:scale(1.04);
}

.card-body-pro{
    padding:22px 22px 24px;
}

.modelo-nombre{
    font-size:25px;
    font-weight:800;
    line-height:1.08;
    margin-bottom:10px;
    letter-spacing:-.9px;
}

.modelo-descripcion{
    color:var(--fp-muted);
    min-height:48px;
    margin-bottom:16px;
    font-size:15px;
}

.detalles-mini{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.detalle-chip{
    background:#f2f4f5;
    color:#333;
    border-radius:999px;
    padding:8px 12px;
    font-size:12px;
    font-weight:600;
    border:1px solid rgba(0,0,0,.05);
}

/* OPCIONES */

.opciones-calidad-wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:18px;
}

.opcion-calidad-box{
    background:#f8f9fb;
    border:1px solid rgba(0,0,0,.06);
    border-radius:16px;
    padding:14px;
}

.opcion-calidad-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.opcion-calidad-head{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.opcion-calidad-texto{
    font-size:12px;
    font-weight:700;
    color:var(--fp-muted);
    line-height:1.3;
}

.opcion-calidad-nombre{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    border:1px solid transparent;
}

.opcion-calidad-precio{
    font-size:22px;
    font-weight:900;
    color:var(--fp-accent-dark);
    letter-spacing:-.6px;
}

.opcion-calidad-oled{
    background:linear-gradient(135deg, #312e81, #4f46e5, #7c3aed);
    color:#fff;
    box-shadow:0 8px 18px rgba(79,70,229,.22);
}

.opcion-calidad-mechanic{
    background:linear-gradient(135deg, #166534, #16a34a, #22c55e);
    color:#fff;
    box-shadow:0 8px 18px rgba(34,197,94,.20);
}

.opcion-calidad-original{
    background:linear-gradient(135deg, #111111, #1f1f1f);
    color:#f5d97b;
    border-color:rgba(245,217,123,.35);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.btn-pro-principal,
.btn-pro-secundario{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.btn-pro-principal{
    border-radius:14px;
    padding:12px 16px;
    font-weight:800;
    color:white;
    flex:1 1 180px;
    text-align:center;
}

.btn-pro-secundario{
    border-radius:14px;
    padding:12px 16px;
    font-weight:800;
    flex:1 1 140px;
}

.btn-calidad-oled{
    background:linear-gradient(135deg, #312e81, #4f46e5, #7c3aed);
    color:#fff;
    border:none;
    box-shadow:0 10px 22px rgba(79,70,229,.22);
}

.btn-calidad-oled:hover{
    background:linear-gradient(135deg, #2b2773, #4338ca, #6d28d9);
    color:#fff;
}

.btn-calidad-mechanic{
    background:linear-gradient(135deg, #166534, #16a34a, #22c55e);
    color:#fff;
    border:none;
    box-shadow:0 10px 22px rgba(34,197,94,.20);
}

.btn-calidad-mechanic:hover{
    background:linear-gradient(135deg, #14532d, #15803d, #16a34a);
    color:#fff;
}

.btn-calidad-original{
    background:linear-gradient(135deg, #111111, #1f1f1f);
    color:#f5d97b;
    border:1px solid rgba(245,217,123,.35);
    box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.btn-calidad-original:hover{
    background:linear-gradient(135deg, #000000, #181818);
    color:#ffe7a3;
    border-color:rgba(245,217,123,.5);
}

/* OTROS */

.sin-resultados{
    text-align:center;
    padding:50px 20px;
    background:white;
    border-radius:24px;
    border:1px solid var(--fp-border);
    box-shadow:var(--fp-shadow);
    margin-top:20px;
}

.sin-resultados h3{
    font-weight:700;
    margin-bottom:10px;
}

.sin-resultados p{
    color:var(--fp-muted);
    margin:0;
}

.whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1000;
    background:#25D366;
    color:white;
    text-decoration:none;
    border-radius:999px;
    padding:14px 18px;
    font-weight:700;
    box-shadow:0 16px 30px rgba(37,211,102,.35);
    transition:transform .2s ease;
}

.whatsapp-float:hover{
    transform:translateY(-3px);
    color:white;
}

#catalogo > div{
    display:flex;
}

/* RESPONSIVE */

@media (max-width:991px){
    .hero-catalogo{
        min-height:auto;
        padding:78px 0 58px;
    }

    .hero-title{
        min-height:auto;
    }

    .hero-text{
        min-height:auto;
    }

    .hero-info{
        min-height:auto;
    }

    .cotizador-box{
        margin-top:-42px;
    }
}

@media (max-width:576px){
    .hero-catalogo{
        min-height:auto;
        padding:72px 0 52px;
    }

    .hero-title{
        font-size:40px;
        min-height:auto;
    }

    .hero-text{
        font-size:17px;
        min-height:auto;
    }

    .hero-info{
        min-height:auto;
    }

    .hero-info-box{
        min-width:100%;
    }

    .cotizador-box{
        margin-top:-34px;
        padding:20px;
    }

    .card-image-wrap{
        min-height:190px;
        height:190px;
    }

    .card-image-wrap img{
        height:180px;
        max-width:180px;
    }

    .modelo-nombre{
        font-size:22px;
    }

    .opcion-calidad-info{
        flex-direction:column;
        align-items:flex-start;
    }

    .opcion-calidad-precio{
        font-size:20px;
    }

    .whatsapp-float{
        right:16px;
        bottom:16px;
        padding:12px 16px;
    }
}