/* ============================================================
   BROOK · Design tokens
   Paleta: azul profundo (marca/confianza) + blanco (limpieza)
   + amarillo (luz/energía, coherente con productos de iluminación)
   ============================================================ */
:root{
    --azul-950:#0A1F3D;
    --azul-900:#0B3D91;
    --azul-700:#12489C;
    --azul-500:#1E6FD9;
    --azul-100:#E8F0FD;
    --blanco:#FFFFFF;
    --gris-bg:#F5F8FC;
    --gris-linea:#E3E9F2;
    --texto:#1B2A41;
    --texto-suave:#5A6B85;
    --amarillo:#FFC72C;
    --amarillo-oscuro:#E6A800;

    --fuente-display:'Sora', sans-serif;
    --fuente-texto:'Inter', sans-serif;

    --radio:14px;
    --sombra: 0 10px 30px -12px rgba(10,31,61,.18);
    --sombra-hover: 0 20px 40px -14px rgba(10,31,61,.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--fuente-texto);
    color:var(--texto);
    background:var(--gris-bg);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
.contenedor{max-width:1240px; margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{font-family:var(--fuente-display); color:var(--azul-950); letter-spacing:-.01em;}

:focus-visible{outline:3px solid var(--amarillo); outline-offset:2px;}

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

/* ============ Barra de anuncio ============ */
.anuncio-top{
    background:var(--azul-950);
    color:var(--blanco);
    text-align:center;
    font-size:.8rem;
    padding:8px 12px;
    letter-spacing:.02em;
}

/* ============ Header ============ */
.header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--gris-linea);
}
.header-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
}
.logo{
    display:flex; align-items:center; gap:10px;
    font-family:var(--fuente-display); font-weight:800; font-size:1.3rem;
    color:var(--azul-950);
}
.logo-icono{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(145deg, var(--azul-500), var(--azul-900));
    color:var(--amarillo);
}
.nav-principal{display:flex; align-items:center; gap:32px;}
.nav-principal > a{
    font-weight:600; font-size:.95rem; color:var(--texto-suave);
    padding:8px 0; position:relative; transition:color .2s;
}
.nav-principal > a:hover, .nav-principal > a.activo{color:var(--azul-900);}
.nav-principal > a.activo::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
    background:var(--amarillo); border-radius:3px;
}
.nav-dropdown{position:relative;}
.nav-dropdown .flecha{font-size:.7rem; margin-left:2px;}
.nav-dropdown-menu{
    position:absolute; top:100%; left:-14px; margin-top:8px;
    background:var(--blanco); border-radius:12px; box-shadow:var(--sombra);
    min-width:220px; padding:8px; opacity:0; visibility:hidden;
    transform:translateY(8px); transition:all .2s ease;
    border:1px solid var(--gris-linea);
}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1; visibility:visible; transform:translateY(0);}
.nav-dropdown-menu a{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; border-radius:8px; font-size:.9rem; font-weight:500;
    color:var(--texto);
}
.nav-dropdown-menu a:hover{background:var(--azul-100); color:var(--azul-900);}
.nav-dropdown-menu a span{
    font-size:.72rem; color:var(--texto-suave); background:var(--gris-bg);
    padding:1px 7px; border-radius:20px;
}
.menu-toggle{display:none; flex-direction:column; gap:5px; width:26px;}
.menu-toggle span{height:2px; background:var(--azul-950); border-radius:2px; transition:.25s;}

/* ============ Botones ============ */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 26px; border-radius:100px; font-weight:600; font-size:.92rem;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
}
.btn-primario{background:var(--azul-900); color:var(--blanco);}
.btn-primario:hover{background:var(--azul-700); transform:translateY(-2px); box-shadow:var(--sombra-hover);}
.btn-amarillo{background:var(--amarillo); color:var(--azul-950);}
.btn-amarillo:hover{background:var(--amarillo-oscuro); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(255,199,44,.5);}
.btn-outline{background:transparent; color:var(--azul-900); border:1.5px solid var(--azul-900);}
.btn-outline:hover{background:var(--azul-900); color:var(--blanco);}
.btn-sm{padding:9px 18px; font-size:.82rem;}
.btn-full{width:100%;}

/* ============ HERO ============ */
.hero{
    position:relative; overflow:hidden;
    background:radial-gradient(120% 120% at 15% 0%, var(--azul-700) 0%, var(--azul-950) 55%, #061530 100%);
    padding:100px 0 130px;
}
.hero-glow{
    position:absolute; border-radius:50%;
    background:radial-gradient(circle, rgba(255,199,44,.55) 0%, rgba(255,199,44,0) 70%);
    filter:blur(10px);
    animation:pulso 4.5s ease-in-out infinite;
}
.hero-glow-1{width:520px; height:520px; top:-160px; right:-120px;}
.hero-glow-2{width:300px; height:300px; bottom:-100px; left:10%; animation-delay:1.2s;}
@keyframes pulso{
    0%,100%{transform:scale(1); opacity:.55;}
    50%{transform:scale(1.15); opacity:.85;}
}
.hero-inner{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
.hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--amarillo); font-weight:700; font-size:.8rem;
    letter-spacing:.08em; text-transform:uppercase;
    margin-bottom:18px; opacity:0; animation:subir .7s ease forwards;
}
.hero h1{
    color:var(--blanco); font-size:clamp(2.3rem, 4.6vw, 3.6rem); line-height:1.08;
    font-weight:800; margin-bottom:20px;
    opacity:0; animation:subir .7s ease .1s forwards;
}
.hero h1 em{font-style:normal; color:var(--amarillo);}
.hero p{
    color:#C6D4EC; font-size:1.08rem; max-width:520px; margin-bottom:34px;
    opacity:0; animation:subir .7s ease .2s forwards;
}
.hero-acciones{display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:subir .7s ease .3s forwards;}
@keyframes subir{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}

.hero-bombilla{
    position:relative; display:flex; align-items:center; justify-content:center;
    opacity:0; animation:aparecer 1s ease .3s forwards;
}
@keyframes aparecer{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);}}
.hero-bombilla svg{width:min(320px, 80%); filter:drop-shadow(0 30px 60px rgba(255,199,44,.35));}
.rayo{transform-origin:center; animation:parpadeo 2.4s ease-in-out infinite;}
.rayo:nth-child(2){animation-delay:.3s;}
.rayo:nth-child(3){animation-delay:.6s;}
@keyframes parpadeo{0%,100%{opacity:.35;} 50%{opacity:1;}}

.hero-stats{display:flex; gap:36px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div{opacity:0; animation:subir .7s ease .4s forwards;}
.hero-stats strong{display:block; font-family:var(--fuente-display); font-size:1.7rem; color:var(--amarillo);}
.hero-stats span{color:#AEC0DD; font-size:.82rem;}

/* ============ Secciones generales ============ */
.seccion{padding:90px 0;}
.seccion-header{text-align:center; max-width:640px; margin:0 auto 50px;}
.eyebrow{
    display:inline-block; font-weight:700; font-size:.78rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--azul-500); margin-bottom:12px;
}
.seccion-header h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px;}
.seccion-header p{color:var(--texto-suave); font-size:1.02rem;}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ============ Nosotros (home) ============ */
.nosotros-seccion{ background: var(--gris-bg); }
.nosotros-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 50px;
}
.nosotros-card{
    background: var(--blanco);
    border: 1px solid var(--gris-linea);
    border-radius: var(--radio);
    padding: 40px 34px;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
}
.nosotros-card:hover{
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
    border-color: var(--azul-500);
}
.nosotros-icono{
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--azul-500), var(--azul-900));
    color: var(--blanco);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px -4px rgba(30,111,217,.35);
}
.nosotros-card h3{
    font-size: 1.15rem;
    font-family: var(--fuente-display);
    margin-bottom: 12px;
    color: var(--texto);
}
.nosotros-card p{
    color: var(--texto-suave);
    font-size: .92rem;
    line-height: 1.65;
}

/* Política de calidad */
.nosotros-politica{
    text-align: center;
    max-width: 740px;
    margin: 0 auto;
    padding: 50px 0 0;
}
.nosotros-politica h3{
    font-size: 1.4rem;
    font-family: var(--fuente-display);
    margin-bottom: 16px;
    color: var(--texto);
}
.nosotros-politica-linea{
    width: 50px; height: 3px;
    background: var(--amarillo);
    border-radius: 4px;
    margin: 0 auto 22px;
}
.nosotros-politica p{
    color: var(--texto-suave);
    font-size: .98rem;
    line-height: 1.7;
}

/* ============ Familias (home) ============ */
.familias-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:22px;
}
.familia-card{
    position:relative; overflow:hidden;
    background:var(--blanco); border-radius:var(--radio); padding:30px 24px;
    border:1px solid var(--gris-linea);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.familia-card:hover{transform:translateY(-6px); box-shadow:var(--sombra-hover); border-color:transparent;}
.familia-icono{
    width:52px; height:52px; border-radius:12px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background:var(--azul-100); color:var(--azul-900);
    transition:background .25s ease, color .25s ease;
}
.familia-card:hover .familia-icono{background:var(--amarillo); color:var(--azul-950);}
.familia-card h3{font-size:1.12rem; margin-bottom:6px;}
.familia-card p{color:var(--texto-suave); font-size:.86rem; margin-bottom:16px;}
.familia-card .familia-link{font-weight:700; font-size:.85rem; color:var(--azul-900); display:inline-flex; align-items:center; gap:6px;}
.familia-card .familia-link svg{transition:transform .2s;}
.familia-card:hover .familia-link svg{transform:translateX(4px);}

/* ============ Grid de productos ============ */
.productos-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(255px,1fr)); gap:24px;
}
.producto-card{
    background:var(--blanco); border-radius:var(--radio); overflow:hidden;
    border:1px solid var(--gris-linea);
    transition:transform .25s ease, box-shadow .25s ease;
    display:flex; flex-direction:column;
}
.producto-card:hover{transform:translateY(-6px); box-shadow:var(--sombra-hover);}
.producto-img{
    position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--azul-100);
}
.producto-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.producto-card:hover .producto-img img{transform:scale(1.06);}
.producto-badge{
    position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:100px;
    font-size:.72rem; font-weight:700; color:var(--azul-950);
}
.producto-familia-tag{
    position:absolute; top:12px; right:12px; background:rgba(10,31,61,.75); color:#fff;
    font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:100px; backdrop-filter:blur(4px);
}
.producto-info{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.producto-info h3{font-size:1rem; line-height:1.3;}
.producto-info p{color:var(--texto-suave); font-size:.85rem; flex:1;}
.producto-acciones{display:flex; gap:8px; margin-top:6px;}

/* Filtros */
.filtros-barra{
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;
}
.filtro-chip{
    padding:9px 18px; border-radius:100px; border:1.5px solid var(--gris-linea);
    font-weight:600; font-size:.85rem; color:var(--texto-suave); background:var(--blanco);
    transition:.2s;
}
.filtro-chip:hover{border-color:var(--azul-500); color:var(--azul-900);}
.filtro-chip.activo{background:var(--azul-900); border-color:var(--azul-900); color:var(--blanco);}

/* ============ Certificaciones (franja) ============ */
.certificados-franja{background:var(--azul-950); padding:70px 0;}
.certificados-franja .seccion-header h2{color:var(--blanco);}
.certificados-franja .seccion-header p{color:#AEC0DD;}
.certificados-franja .eyebrow{color:var(--amarillo);}
.cert-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px;}
.cert-card{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radio); padding:26px 18px; text-align:center;
    transition:.25s;
}
.cert-card:hover{background:rgba(255,199,44,.1); border-color:var(--amarillo); transform:translateY(-4px);}
.cert-card .cert-icono{
    width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
    background:var(--amarillo); display:flex; align-items:center; justify-content:center; color:var(--azul-950);
}
.cert-card h4{color:var(--blanco); font-size:.92rem; margin-bottom:4px;}
.cert-card p{color:#9FB2D1; font-size:.76rem;}

/* ============ CTA final home ============ */
.cta-final{
    background:linear-gradient(120deg, var(--azul-900), var(--azul-700));
    border-radius:24px; padding:60px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta-final::before{
    content:''; position:absolute; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,199,44,.4), transparent 70%);
    top:-100px; right:-60px;
}
.cta-final h2{color:var(--blanco); position:relative; z-index:1;}
.cta-final p{color:#C6D4EC; max-width:480px; margin:14px auto 30px; position:relative; z-index:1;}
.cta-final .hero-acciones{justify-content:center; position:relative; z-index:1;}

/* ============ Página de detalle de producto ============ */
.migas{font-size:.85rem; color:var(--texto-suave); margin-bottom:26px; display:flex; gap:8px; flex-wrap:wrap;}
.migas a{color:var(--azul-900); font-weight:600;}
.detalle-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:flex-start;
}
.detalle-info .familia-tag{
    display:inline-block; background:var(--azul-100); color:var(--azul-900);
    font-weight:700; font-size:.78rem; padding:5px 14px; border-radius:100px; margin-bottom:14px;
}
.detalle-info h1{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:14px;}
.detalle-info .descripcion{color:var(--texto-suave); font-size:1rem; margin-bottom:22px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.chip{
    background:var(--gris-bg); border:1px solid var(--gris-linea); color:var(--texto);
    font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:100px;
}
.detalle-acciones{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;}

.specs-tabla-simple{width:100%; border-collapse:collapse; margin-top:8px;}
.specs-tabla-simple tr{border-bottom:1px solid var(--gris-linea);}
.specs-tabla-simple td{padding:12px 6px; font-size:.9rem;}
.specs-tabla-simple td:first-child{color:var(--texto-suave); font-weight:600; width:42%;}
.specs-tabla-simple td:last-child{color:var(--texto); font-weight:500;}

.specs-tabla-variantes{width:100%; border-collapse:collapse; font-size:.85rem; margin-top:14px;}
.specs-tabla-variantes th{
    background:var(--azul-900); color:var(--blanco); padding:12px 14px; text-align:left; font-weight:600;
    white-space:nowrap;
}
.specs-tabla-variantes th:first-child{border-radius:10px 0 0 0;}
.specs-tabla-variantes th:last-child{border-radius:0 10px 0 0;}
.specs-tabla-variantes td{padding:11px 14px; border-bottom:1px solid var(--gris-linea);}
.specs-tabla-variantes tr:nth-child(even) td{background:var(--gris-bg);}
.specs-tabla-variantes-wrap{overflow-x:auto; border-radius:10px; border:1px solid var(--gris-linea);}

/* Tarjeta QR ficha técnica */
.qr-card{
    display:flex; align-items:center; gap:18px;
    background:var(--azul-950); border-radius:var(--radio); padding:22px;
    margin-top:30px; color:var(--blanco);
}
.qr-card img{width:96px; height:96px; border-radius:10px; background:#fff; padding:6px;}
.qr-card h4{color:var(--blanco); font-size:.98rem; margin-bottom:6px;}
.qr-card p{color:#AEC0DD; font-size:.82rem;}

/* ============ Carrusel (reutilizable) ============ */
.carrusel{position:relative; border-radius:var(--radio); overflow:hidden; background:var(--azul-100); aspect-ratio:1/1;}
.carrusel-track{display:flex; height:100%; transition:transform .45s cubic-bezier(.65,0,.35,1);}
.carrusel-slide{min-width:100%; height:100%;}
.carrusel-slide img{width:100%; height:100%; object-fit:cover;}
.carrusel-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92);
    color:var(--azul-950); font-size:1.4rem; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.18); transition:.2s;
}
.carrusel-btn:hover{background:var(--amarillo);}
.carrusel-prev{left:14px;} .carrusel-next{right:14px;}
.carrusel-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px;}
.carrusel-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.6); border:1px solid rgba(10,31,61,.2);}
.carrusel-dot.activo{background:var(--amarillo); width:22px; border-radius:5px;}

/* ============ Ficha técnica imprimible ============ */
.ficha-doc{
    max-width:760px; margin:0 auto; background:var(--blanco); border-radius:var(--radio);
    border:1px solid var(--gris-linea); overflow:hidden;
}
.ficha-doc-header{
    background:var(--azul-950); color:var(--blanco); padding:30px 34px;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.ficha-doc-header h1{color:var(--blanco); font-size:1.3rem;}
.ficha-doc-header .familia-tag{background:rgba(255,199,44,.15); color:var(--amarillo);}
.ficha-doc-body{padding:34px;}
.ficha-doc-body img{border-radius:12px; margin-bottom:24px; aspect-ratio:1/1; object-fit:cover; width:100%;}

/* ============ Vendedores (contacto) ============ */
.vendedores-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:20px;
}
.vendedor-card{
    background:var(--blanco); border:1px solid var(--gris-linea); border-radius:var(--radio);
    padding:24px; text-align:center; transition:.25s;
}
.vendedor-card:hover{transform:translateY(-4px); box-shadow:var(--sombra-hover);}
.vendedor-avatar{
    width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
    background:linear-gradient(145deg, var(--azul-500), var(--azul-900));
    color:var(--amarillo); display:flex; align-items:center; justify-content:center;
    font-family:var(--fuente-display); font-weight:700; font-size:1.1rem;
    object-fit:cover;
}
img.vendedor-avatar{
    display:block; border:2px solid var(--gris-linea);
}
.vendedor-card h4{font-size:1rem; margin-bottom:4px;}
.vendedor-cargo{color:var(--texto-suave); font-size:.82rem; margin-bottom:16px;}
.vendedor-acciones{display:flex; gap:8px; margin-bottom:12px;}
.vendedor-correo{font-size:.78rem; color:var(--texto-suave); word-break:break-all;}

/* ============ Formulario de contacto ============ */
.form-contacto{
    background:var(--blanco); border:1px solid var(--gris-linea); border-radius:var(--radio);
    padding:32px; display:flex; flex-direction:column; gap:20px;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-campo{display:flex; flex-direction:column; gap:8px;}
.form-campo label{font-weight:600; font-size:.86rem; color:var(--texto);}
.form-campo input, .form-campo select, .form-campo textarea{
    border:1.5px solid var(--gris-linea); border-radius:10px; padding:12px 14px;
    font-family:inherit; font-size:.92rem; color:var(--texto); background:var(--gris-bg);
    transition:border-color .2s, background .2s;
}
.form-campo input:focus, .form-campo select:focus, .form-campo textarea:focus{
    outline:none; border-color:var(--azul-500); background:var(--blanco);
}
.form-campo textarea{resize:vertical;}
.campo-trampa{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.form-aviso{
    border-radius:12px; padding:18px 20px; margin-bottom:22px; font-size:.9rem;
}
.form-aviso-ok{background:#EAF7EF; border:1px solid #B7E4C7; color:#1E7A44;}
.form-aviso-ok strong{display:block; margin-bottom:4px; font-size:1rem;}
.form-aviso-error{background:#FDECEC; border:1px solid #F3B9B9; color:#B12E2E; font-weight:600;}

/* ============ Certificados página completa ============ */
.certificado-item{
    background:var(--blanco); border:1px solid var(--gris-linea); border-radius:var(--radio);
    padding:26px; text-align:center; transition:.25s;
}
.certificado-item:hover{transform:translateY(-4px); box-shadow:var(--sombra-hover);}

/* ============ Footer ============ */
.footer{
    background: var(--azul-950);
    color: #C6D4EC;
    padding: 0;
    position: relative;
    overflow: hidden;
}
/* Canvas de partículas */
.footer-particles{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* Brillo decorativo superior */
.footer-glow{
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--azul-500) 20%, var(--amarillo) 50%, var(--azul-500) 80%, transparent 100%);
    opacity: .7;
    position: relative;
    z-index: 1;
    animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}
.footer-glow::after{
    content: '';
    display: block;
    height: 80px;
    background: radial-gradient(ellipse at 50% 0%, rgba(30,111,217,.15) 0%, transparent 70%);
}
.footer-grid{
    display: grid;
    grid-template-columns: 1.6fr 0.8fr 1.2fr 1.2fr;
    gap: 40px;
    padding: 60px 0 50px;
    position: relative;
    z-index: 1;
}
.footer-marca{ max-width: 300px; }
.logo-footer{ color: var(--blanco); margin-bottom: 14px; display: inline-block; }
.footer-texto{ font-size: .88rem; color: #9FB2D1; max-width: 280px; line-height: 1.6; }

/* Redes sociales */
.footer-redes{ display: flex; gap: 12px; margin-top: 20px; }
.footer-red{
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: #9FB2D1;
    transition: all .3s ease;
}
.footer-red:hover{
    background: var(--amarillo);
    border-color: var(--amarillo);
    color: var(--azul-950);
    transform: translateY(-2px);
}

/* Títulos de columna */
.footer h4{
    color: var(--blanco);
    font-size: .85rem;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: var(--fuente-display);
    position: relative;
    padding-bottom: 10px;
}
.footer h4::after{
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 24px; height: 2px;
    background: var(--amarillo);
    border-radius: 2px;
}

/* Links generales del footer */
.footer ul{ list-style: none; }
.footer ul li{ margin-bottom: 10px; font-size: .85rem; color: #AEC0DD; }
.footer ul li a{ color: #AEC0DD; text-decoration: none; transition: color .25s, padding-left .25s; }
.footer ul li a:hover{ color: var(--amarillo); padding-left: 4px; }

/* Lista de contacto con íconos */
.footer-contacto-lista li{
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-icono{
    flex-shrink: 0;
    color: var(--amarillo);
    opacity: .8;
}
.footer-subtitulo{
    font-weight: 700;
    color: var(--blanco) !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    opacity: .85;
}
.footer-subtitulo:first-child{ margin-top: 0 !important; }
.footer-ubicacion{
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #9FB2D1 !important;
}

/* Footer bottom */
.footer-bottom{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 24px;
    font-size: .8rem;
    color: #7C90B3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.footer-bottom-derecha{ opacity: .7; }

/* ============ Vacío ============ */
.vacio{text-align:center; padding:70px 20px; color:var(--texto-suave);}

/* ============ Responsive ============ */

@media (max-width: 900px) {

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-bombilla {
        order: -1;
    }

    .detalle-grid {
        grid-template-columns: 1fr;
    }

    .nosotros-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 720px) {

    /* HEADER */
    .header {
        position: relative;
        z-index: 1000;
    }

    /* MENÚ PRINCIPAL */
    .nav-principal {
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        bottom: 0;

        background: var(--blanco);

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        height: calc(100vh - 96px);

        padding: 28px 24px;
        gap: 6px;

        transform: translateX(-100%);
        transition: transform 0.3s ease;

        overflow-y: auto;

        z-index: 9999;
    }

    /* CUANDO SE ABRE */
    .nav-principal.abierto {
        transform: translateX(0);
    }

    /* ENLACES */
    .nav-principal > a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid var(--gris-linea);
    }

    /* DROPDOWN */
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;

        display: none;

        width: 100%;
        margin-top: 0;
        padding-left: 12px;
    }

    .nav-dropdown.abierto .nav-dropdown-menu {
        display: block;
    }

    /* BOTÓN HAMBURGUESA */
    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 10001;
    }

    /* OTROS ELEMENTOS */
    .qr-card {
        flex-direction: column;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   HERO CAROUSEL
===================================================== */
.hero-carousel {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    background: #07182f;
}
.hero-slides {
    position: absolute;
    inset: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition:opacity 0.8s ease,visibility 0.8s ease;
    z-index: 1;
}
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
/* Overlay para mantener legible el texto */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:linear-gradient(90deg,rgba(5, 20, 43, 0.96) 0%, rgba(5, 20, 43, 0.418) 35%,rgba(5, 20, 43, 0.203) 70%,rgba(5, 20, 43, 0) 100%);
}
/* Contenido */
.hero-carousel .hero-inner {
    position: relative;
    z-index: 5;
    min-height: 570px;
    display: flex;
    align-items: center;
}
.hero-content {
    width: 100%;
    max-width: 680px;
    padding-top: 40px;
    padding-bottom: 90px;
}
.hero-content h1 {
    color: #fff;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.02;
    max-width: 680px;
    margin: 15px 0 22px;
}
.hero-content h1 em {
    color: #ffc72c;
    font-style: normal;
}
.hero-content p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 620px;
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 30px;
}
.hero-carousel .hero-eyebrow {
    display: inline-flex;
    color: #ffc72c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.hero-btn-outline {
    color: #fff !important;
    border-color: rgba(255,255,255,.45) !important;
}
/* =====================================================
   FLECHAS
===================================================== */
.hero-arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(5, 20, 43, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: 0.25s ease;
    backdrop-filter: blur(8px);
}
.hero-arrow:hover {
    background: #ffc72c;
    color: #0a1f3d;
    border-color: #ffc72c;
}
.hero-arrow-prev {
    left: 28px;
}
.hero-arrow-next {
    right: 28px;
}
/* =====================================================
   DOTS
===================================================== */

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 130px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
}
.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: 0.3s ease;
}
.hero-dot.active {
    width: 30px;
    background: #ffc72c;
}
/* =====================================================
   STATS
===================================================== */
.hero-stats-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: rgba(4, 15, 32, 0.72);
    border-top: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
}
.hero-carousel .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 24px 0;
    gap: 20px;
}
.hero-carousel .hero-stats > div {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.15);
}
.hero-carousel .hero-stats > div:last-child {
    border-right: 0;
}
.hero-carousel .hero-stats strong {
    color: #ffc72c;
    font-size: 25px;
    line-height: 1;
}
.hero-carousel .hero-stats span {
    color: rgba(255,255,255,.7);
    margin-top: 6px;
    font-size: 13px;
}
/* =====================================================
   ANIMACIÓN DEL TEXTO
==================================================== */
.hero-slide .hero-content {
    opacity: 0;
    transform: translateY(25px);
    transition:opacity 0.65s ease 0.15s,transform 0.65s ease 0.15s;
}
.hero-slide.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}
/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 900px) {
    .hero-carousel {
        min-height: 650px;
    }
    .hero-carousel .hero-inner {
        min-height: 540px;
    }
    .hero-overlay {
        background:linear-gradient( 90deg, rgba(5,20,43,.95) 0%,rgba(5,20,43,.82) 65%, rgba(5,20,43,.55) 100%);
    }
    .hero-arrow {
        width: 40px;
        height: 40px;
    }
    .hero-arrow-prev {
        left: 12px;
    }
    .hero-arrow-next {
        right: 12px;
    }

}

@media (max-width: 650px) {
    .hero-carousel {
        min-height: 720px;
    }
    .hero-carousel .hero-inner {
        min-height: 610px;
    }
    .hero-content {
        padding-left: 5px;
        padding-right: 5px;
    }
    .hero-content h1 {
        font-size: 42px;
    }
    .hero-content p {
        font-size: 16px;
    }
    .hero-overlay {
        background: rgba(5,20,43,.78);
    }
    .hero-arrow {
        display: none;
    }
    .hero-dots {
        bottom: 150px;
    }
    .hero-carousel .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 20px 0;
    }
    .hero-carousel .hero-stats strong {
        font-size: 21px;
    }
    .hero-carousel .hero-stats span {
        font-size: 11px;
    }
}
.logo-footer-img {
    height: 60px;
    width: auto;
    display: block;
    object-fit: contain;
}
.logo-img {
    height: 70px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* =====================================================
   PRODUCTOS NUEVOS
===================================================== */

.productos-nuevos {
    padding: 85px 0 95px;
    background: #eef8ff;
}


/* Header */

.productos-nuevos-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.productos-nuevos-header .eyebrow {
    display: inline-block;

    color: #1676b8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;

    margin-bottom: 10px;
}

.productos-nuevos-header h2 {
    color: #0a1f3d;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;

    margin: 0 0 14px;

    font-weight: 750;
}

.productos-nuevos-header p {
    color: #748395;

    font-size: 16px;
    line-height: 1.6;

    margin: 0;
}


/* Grid */

.productos-nuevos-grid {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 28px;
}


/* Producto */

.producto-nuevo {
    display: block;

    color: inherit;
    text-decoration: none;

    min-width: 0;

    transition: transform .25s ease;
}

.producto-nuevo:hover {
    transform: translateY(-6px);
}


/* Imagen */

.producto-nuevo-imagen {
    width: 100%;

    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    overflow: hidden;

    margin-bottom: 20px;
}

.producto-nuevo-imagen img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform .35s ease;
}

.producto-nuevo:hover .producto-nuevo-imagen img {
    transform: scale(1.04);
}


/* Información */

.producto-nuevo-info {
    text-align: center;
}

.producto-nuevo-familia {
    display: block;

    color: #8b98a7;

    font-size: 14px;
    font-weight: 400;

    margin-bottom: 8px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.producto-nuevo h3 {
    color: #0a1f3d;

    font-size: 17px;
    line-height: 1.3;

    font-weight: 700;

    margin: 0;

    transition: color .25s ease;
}

.producto-nuevo:hover h3 {
    color: #1676b8;
}


/* Botón inferior */

.productos-nuevos-footer {
    display: flex;
    justify-content: center;

    margin-top: 48px;
}

.productos-nuevos-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

    .productos-nuevos-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .productos-nuevos {
        padding: 65px 0 75px;
    }

    .productos-nuevos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 25px 18px;
    }

}


@media (max-width: 600px) {

    .productos-nuevos {
        padding: 55px 0 65px;
    }

    .productos-nuevos-header {
        margin-bottom: 35px;
    }

    .productos-nuevos-header h2 {
        font-size: 32px;
    }

    .productos-nuevos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 30px 14px;
    }

    .producto-nuevo-imagen {
        margin-bottom: 14px;
    }

    .producto-nuevo h3 {
        font-size: 15px;
    }

    .producto-nuevo-familia {
        font-size: 12px;
    }

}
/* =====================================================
   POR QUÉ ELEGIRNOS
===================================================== */

.porque-elegirnos {
    padding: 90px 0;
    background: #eef8ff;
}

.porque-elegirnos-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 75px;
}

.porque-elegirnos-texto {
    max-width: 590px;
}

.porque-elegirnos-texto .eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #1676b8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.porque-elegirnos-texto h2 {
    margin: 0 0 26px;

    color: #0a1f3d;

    font-size: clamp(31px, 3vw, 43px);
    line-height: 1.15;

    font-weight: 750;
}

.porque-elegirnos-texto p {
    margin: 0 0 16px;

    color: #536579;

    font-size: 17px;
    line-height: 1.75;
}


/* Imagen */

.porque-elegirnos-imagen {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 4px;
}

.porque-elegirnos-imagen img {
    display: block;

    width: 100%;
    height: 350px;

    object-fit: cover;
}


/* =====================================================
   MÉTRICAS
===================================================== */

.metricas-home {
    position: relative;

    padding: 58px 0;

    background:
        linear-gradient(
            135deg,
            #071d59 0%,
            #05164c 100%
        );

    overflow: hidden;
}

.metricas-home::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -180px;
    top: -250px;

    border-radius: 50%;

    background: rgba(255, 199, 44, .08);

    pointer-events: none;
}


.metricas-home-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1.2fr
        repeat(3, 1fr);

    align-items: center;

    gap: 40px;
}


/* Intro */

.metricas-intro span {
    display: block;

    margin-bottom: 8px;

    color: #ffc72c;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.metricas-intro h2 {
    max-width: 280px;

    margin: 0;

    color: #fff;

    font-size: 27px;
    line-height: 1.12;

    font-weight: 750;
}


/* Métricas */

.metrica-item {
    text-align: center;
}

.metrica-item strong {
    display: block;

    color: #fff;

    font-size: clamp(40px, 4vw, 58px);
    line-height: 1;

    font-weight: 700;

    margin-bottom: 12px;
}

.metrica-item span {
    color: rgba(255,255,255,.88);

    font-size: 17px;
}


/* Separadores opcionales */

.metrica-item {
    position: relative;
}

.metrica-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: -20px;
    top: 10%;

    width: 1px;
    height: 80%;

    background: rgba(255,255,255,.12);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1000px) {

    .porque-elegirnos-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

    .metricas-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .metricas-intro {
        grid-column: 1 / -1;

        text-align: center;

        margin-bottom: 15px;
    }

    .metricas-intro h2 {
        max-width: none;
    }

    .metrica-item::after {
        display: none;
    }

}


@media (max-width: 720px) {

    .porque-elegirnos {
        padding: 60px 0;
    }

    .porque-elegirnos-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .porque-elegirnos-imagen {
        order: -1;
    }

    .porque-elegirnos-imagen img {
        height: 280px;
    }

    .porque-elegirnos-texto h2 {
        font-size: 31px;
    }

    .porque-elegirnos-texto p {
        font-size: 16px;
    }


    .metricas-home {
        padding: 50px 0;
    }

    .metricas-home-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .metrica-item strong {
        font-size: 46px;
    }

    .metrica-item span {
        font-size: 16px;
    }

}
/* =====================================================
   APTOS PARA MÚLTIPLES ÁREAS
===================================================== */

.areas-home {
    padding: 85px 0 95px;

    background: #eef8ff;
}


/* =====================================================
   HEADER
===================================================== */

.areas-home-header {
    max-width: 760px;

    margin: 0 auto 46px;

    text-align: center;
}


.areas-home-header .eyebrow {
    display: inline-block;

    margin-bottom: 10px;

    color: #1676b8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.areas-home-header h2 {
    margin: 0 0 13px;

    color: #0a1f3d;

    font-size: clamp(32px, 4vw, 46px);
    font-weight: 750;

    line-height: 1.1;
}


.areas-home-header p {
    margin: 0;

    color: #748395;

    font-size: 16px;
    line-height: 1.6;
}


/* =====================================================
   GRID
===================================================== */

.areas-home-grid {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 10px;
}


/* =====================================================
   ITEM
===================================================== */

.area-home-item {
    position: relative;

    height: 290px;

    overflow: hidden;

    background: #dbe7ef;

    cursor: pointer;
}


.area-home-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .55s ease,
        filter .4s ease;
}


/* =====================================================
   OVERLAY
===================================================== */

.area-home-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 20, 45, .7) 0%,
            rgba(4, 20, 45, .05) 55%,
            transparent 100%
        );

    opacity: .65;

    transition: opacity .35s ease;
}


/* =====================================================
   TEXTO
===================================================== */

.area-home-info {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 2;

    transform: translateY(5px);

    transition: transform .35s ease;
}


.area-home-info span {
    display: block;

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.25;

    text-shadow: 0 2px 10px rgba(0,0,0,.25);
}


/* =====================================================
   HOVER
===================================================== */

.area-home-item:hover img {
    transform: scale(1.07);
}


.area-home-item:hover .area-home-overlay {
    opacity: 1;
}


.area-home-item:hover .area-home-info {
    transform: translateY(0);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

    .areas-home-grid {
        grid-template-columns: repeat(3, 1fr);

        gap: 14px;
    }

    .area-home-item {
        height: 300px;
    }

}


@media (max-width: 700px) {

    .areas-home {
        padding: 60px 0 70px;
    }

    .areas-home-header {
        margin-bottom: 34px;
    }

    .areas-home-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .area-home-item {
        height: 235px;
    }

    .area-home-info {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .area-home-info span {
        font-size: 14px;
    }

}


@media (max-width: 430px) {

    .area-home-item {
        height: 205px;
    }

}

/* =====================================================
   PRODUCTOS LED DESTACADOS
===================================================== */

.led-destacado {
    padding: 100px 0;

    background: #eef8ff;
}


/* =====================================================
   GRID GENERAL
===================================================== */

.led-destacado-grid {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    align-items: center;

    gap: 85px;
}


/* =====================================================
   TARJETA PRODUCTO IZQUIERDA
===================================================== */

.led-producto-card {
    position: relative;

    padding:
        0
        50px
        45px;

    background: #fff;

    border-radius: 14px;

    box-shadow:
        0 20px 50px rgba(10, 31, 61, .08);
}


/* Imagen sobresaliendo */

.led-producto-imagen {
    position: relative;

    width: calc(100% - 90px);

    margin:
        -55px
        auto
        45px;

    aspect-ratio: 1.3 / 1;

    overflow: hidden;

    border-radius: 10px;

    background: #071d59;
}


.led-producto-imagen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


.led-producto-card:hover .led-producto-imagen img {
    transform: scale(1.03);
}


/* =====================================================
   CONTENIDO IZQUIERDO
===================================================== */

.led-producto-contenido {
    text-align: center;
}


.led-producto-categoria {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 15px;
}


.led-producto-categoria > span {
    color: #0a1f3d;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .06em;
    text-transform: uppercase;
}


.led-stars {
    display: flex;

    gap: 3px;
}


.led-stars span {
    color: #f4a62a;

    font-size: 18px;
}


.led-producto-contenido h3 {
    margin: 0 0 20px;

    color: #0a1f3d;

    font-size: 27px;
    line-height: 1.2;
}


.led-producto-contenido p {
    max-width: 720px;

    margin: 0 auto 10px;

    color: #536579;

    font-size: 16px;
    line-height: 1.75;
}


/* =====================================================
   BLOQUE DERECHO
===================================================== */

.led-destacado-info {
    max-width: 570px;
}


.led-certificacion {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 22px;

    align-items: flex-start;

    margin-bottom: 38px;
}


/* Icono */

.led-certificacion-icono {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #1676b8,
            #0a1f3d
        );

    box-shadow:
        0 10px 28px rgba(22, 118, 184, .2);
}


.led-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #0a1f3d;

    font-size: 22px;
    font-weight: 750;
}


.led-certificacion p {
    margin: 0;

    color: #536579;

    font-size: 16px;
    line-height: 1.65;
}


/* Título */

.led-destacado-info h2 {
    max-width: 560px;

    margin:
        0
        0
        32px;

    color: #0a1f3d;

    font-size: clamp(32px, 3.4vw, 47px);
    line-height: 1.08;

    font-weight: 750;
}


/* =====================================================
   BENEFICIOS
===================================================== */

.led-beneficios {
    display: flex;

    flex-direction: column;

    gap: 16px;

    padding: 0;

    margin:
        0
        0
        34px;

    list-style: none;
}


.led-beneficios li {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #536579;

    font-size: 16px;
}


.led-check {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: #1676b8;
}


/* =====================================================
   BOTÓN
===================================================== */

.led-boton {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {

    .led-destacado-grid {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }


    .led-producto-card {
        padding:
            0
            30px
            35px;
    }


    .led-producto-imagen {
        width: calc(100% - 30px);
    }

}


@media (max-width: 800px) {

    .led-destacado {
        padding:
            100px
            0
            70px;
    }


    .led-destacado-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .led-destacado-info {
        max-width: none;
    }


    .led-producto-imagen {
        max-width: 580px;
    }

}


@media (max-width: 550px) {

    .led-destacado {
        padding:
            80px
            0
            60px;
    }


    .led-producto-card {
        padding:
            0
            20px
            30px;

        border-radius: 10px;
    }


    .led-producto-imagen {
        width: calc(100% - 10px);

        margin-top: -35px;
        margin-bottom: 30px;

        aspect-ratio: 1 / .85;
    }


    .led-producto-categoria {
        flex-direction: column;

        gap: 5px;
    }


    .led-producto-contenido h3 {
        font-size: 23px;
    }


    .led-producto-contenido p {
        font-size: 15px;
    }


    .led-certificacion {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .led-certificacion-icono {
        width: 58px;
        height: 58px;
    }


    .led-eyebrow {
        font-size: 20px;
    }


    .led-destacado-info h2 {
        font-size: 32px;
    }

}

/* ============================================================
   CARRUSEL DE MARCAS (SOBRE EL FOOTER)
   ============================================================ */
.marcas-seccion {
    padding: 76px 0 86px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%);
    border-top: 1px solid var(--gris-linea);
    border-bottom: 1px solid var(--gris-linea);
    position: relative;
    overflow: hidden;
}

.marcas-seccion .seccion-header h2 {
    font-size: 2.2rem;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.marcas-seccion .seccion-header p {
    color: var(--texto-suave);
    font-size: 1.02rem;
    line-height: 1.6;
}

.marcas-carrusel-contenedor {
    position: relative;
    width: 100%;
    margin-top: 36px;
    padding: 10px 0;
}

.marcas-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    display: flex;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.marcas-viewport::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.marcas-track {
    display: flex;
    align-items: center;
    gap: 22px;
    width: max-content;
    will-change: transform;
    animation: marcasMarquee 38s linear infinite;
    padding: 10px 15px;
}

.marcas-carrusel-contenedor:hover .marcas-track,
.marcas-track.pausado {
    animation-play-state: paused;
}

@keyframes marcasMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marca-card-wrap {
    flex-shrink: 0;
}

.marca-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 120px;
    padding: 14px 18px;
    background: var(--blanco);
    border: 1px solid #DFE6F0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(10, 31, 61, 0.05);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.28s ease;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

.marca-card:hover {
    transform: translateY(-5px);
    border-color: var(--amarillo);
    box-shadow: 0 14px 28px -8px rgba(10, 31, 61, 0.16),
                0 0 0 1.5px rgba(255, 199, 44, 0.4);
}

.marca-img-wrap {
    width: 100%;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marca-card img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    transition: transform 0.25s ease, filter 0.25s ease;
    filter: grayscale(12%) contrast(100%);
}

.marca-card:hover img {
    transform: scale(1.08);
    filter: grayscale(0%) contrast(105%);
}

.marca-nombre {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texto-suave);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.marca-card:hover .marca-nombre {
    color: var(--azul-900);
}

/* Difuminado suave en extremos */
.marcas-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 5;
    pointer-events: none;
}

.marcas-fade-inicio {
    left: 0;
    background: linear-gradient(to right, #FFFFFF 15%, rgba(255, 255, 255, 0) 100%);
}

.marcas-fade-fin {
    right: 0;
    background: linear-gradient(to left, #F5F8FC 15%, rgba(245, 248, 252, 0) 100%);
}

/* Flechas de navegación */
.marcas-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blanco);
    border: 1.5px solid var(--gris-linea);
    box-shadow: 0 4px 14px rgba(10, 31, 61, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--azul-950);
    z-index: 10;
    cursor: pointer;
    transition: all 0.22s ease;
    opacity: 0.85;
}

.marcas-nav-btn:hover {
    opacity: 1;
    background: var(--azul-950);
    color: var(--amarillo);
    border-color: var(--azul-950);
    box-shadow: 0 6px 20px rgba(10, 31, 61, 0.25);
    transform: translateY(-50%) scale(1.08);
}

.marcas-nav-prev {
    left: 20px;
}

.marcas-nav-next {
    right: 20px;
}

@media (max-width: 768px) {
    .marcas-seccion {
        padding: 55px 0 65px;
    }
    .marcas-seccion .seccion-header h2 {
        font-size: 1.7rem;
    }
    .marca-card {
        width: 165px;
        height: 105px;
        padding: 12px 14px;
    }
    .marca-img-wrap {
        height: 52px;
    }
    .marca-card img {
        max-height: 46px;
    }
    .marcas-fade {
        width: 50px;
    }
    .marcas-nav-btn {
        display: none;
    }
}