/* ============================= */
/* VARIABLES BASE */
/* ============================= */
:root{
    --sky-yellow:#f5c400;
    --sky-dark:#0c0c0c;
    --sky-gray:#1a1a1a;
    --sky-soft:#2a2a2a;
    --sky-text:#e6e6e6;
    --sky-muted:#b5b5b5;
    --glow:0 0 25px rgba(245,196,0,0.25);
}

/* ============================= */
/* HERO */
/* ============================= */
.calidad-hero{
    background:linear-gradient(120deg,#000,#111,#000);
    padding:120px 0 90px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.calidad-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 30% 20%, rgba(245,196,0,0.08), transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(245,196,0,0.06), transparent 40%);
}

.calidad-title{
    color:var(--sky-yellow);
    font-weight:900;
    letter-spacing:6px;
    font-size:3rem;
    text-shadow:0 0 15px rgba(245,196,0,0.3);
}

.calidad-subtitle{
    color:#fff;
    margin-top:15px;
    font-size:1.1rem;
    opacity:0.85;
}

/* ============================= */
/* INTRO */
/* ============================= */
.calidad-intro{
    background:#0b0b0b;
    padding:70px 0;
}

.calidad-text{
    color:var(--sky-text);
    max-width:900px;
    margin:0 auto 20px;
    text-align:center;
    font-size:1.05rem;
    line-height:1.8;
}

/* ============================= */
/* BLOQUES */
/* ============================= */
.calidad-bloques{
    background:#0e0e0e;
    padding:80px 0;
}

.calidad-bloques .container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.calidad-card{
    background:linear-gradient(160deg,#121212,#0a0a0a);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:16px;
    padding:30px;
    position:relative;
    overflow:hidden;
    transition:.4s ease;
    box-shadow:0 10px 40px rgba(0,0,0,0.6);
}

.calidad-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent, rgba(245,196,0,0.08), transparent);
    transform:translateX(-100%);
    transition:.6s;
}

.calidad-card:hover::before{
    transform:translateX(100%);
}

.calidad-card:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 20px 60px rgba(0,0,0,0.8), var(--glow);
    border-color:rgba(245,196,0,0.25);
}

.calidad-card h3{
    color:var(--sky-yellow);
    font-size:1.1rem;
    letter-spacing:2px;
    margin-bottom:15px;
    font-weight:800;
}

.calidad-card p{
    color:var(--sky-text);
    font-size:0.95rem;
    line-height:1.7;
}

/* ============================= */
/* OBJETIVOS */
/* ============================= */
.calidad-objetivos{
    background:#080808;
    padding:90px 0;
    text-align:center;
}

.calidad-objetivos-title{
    color:var(--sky-yellow);
    letter-spacing:4px;
    font-weight:900;
    margin-bottom:40px;
}

.calidad-list{
    list-style:none;
    padding:0;
    max-width:700px;
    margin:0 auto;
}

.calidad-list li{
    background:#111;
    margin-bottom:15px;
    padding:15px 20px;
    border-radius:10px;
    color:#fff;
    position:relative;
    border-left:4px solid var(--sky-yellow);
    transition:.3s;
}

.calidad-list li:hover{
    transform:translateX(8px);
    box-shadow:var(--glow);
}

/* ============================= */
/* COMUNICACIÓN */
/* ============================= */
.calidad-comunicacion{
    background:#0b0b0b;
    padding:80px 0;
    text-align:center;
}

.calidad-comunicacion h2{
    color:var(--sky-yellow);
    font-weight:900;
    letter-spacing:4px;
    margin-bottom:25px;
}

.calidad-comunicacion p{
    max-width:800px;
    margin:0 auto;
    color:#ddd;
    line-height:1.8;
}

/* ============================= */
/* DECLARACIÓN */
/* ============================= */
.calidad-declaracion{
    background:radial-gradient(circle at center,#111,#050505);
    padding:100px 0;
    text-align:center;
}

.calidad-declaracion h2{
    color:var(--sky-yellow);
    font-weight:900;
    letter-spacing:4px;
    margin-bottom:25px;
}

.calidad-declaracion p{
    color:#fff;
    max-width:850px;
    margin:0 auto 20px;
    font-size:1.05rem;
}

.firma-calidad{
    margin-top:30px;
    font-size:0.9rem;
    color:var(--sky-yellow);
    letter-spacing:3px;
}

/* ============================= */
/* REVEAL ANIMATION */
/* ============================= */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ============================= */
/* EFECTOS DE ENERGÍA GLOBAL */
/* ============================= */

body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            120deg,
            transparent,
            transparent 120px,
            rgba(245,196,0,0.015) 121px,
            transparent 140px
        );
    z-index:1;
}

/* ============================= */
/* HERO ENERGY FLOW */
/* ============================= */

.calidad-hero{
    position:relative;
}

.calidad-hero::before{
    content:"";
    position:absolute;
    inset:-200px;
    background:
        radial-gradient(circle at 20% 30%, rgba(245,196,0,0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(245,196,0,0.12), transparent 40%),
        linear-gradient(120deg, transparent, rgba(245,196,0,0.08), transparent);
    animation:energyFlow 12s linear infinite;
}

@keyframes energyFlow{
    0%{transform:translateX(-5%) translateY(-5%)}
    50%{transform:translateX(5%) translateY(5%)}
    100%{transform:translateX(-5%) translateY(-5%)}
}

/* ============================= */
/* RAYOS ELÉCTRICOS SUAVES */
/* ============================= */

.calidad-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, transparent, rgba(245,196,0,0.06), transparent),
        linear-gradient(180deg, transparent, rgba(245,196,0,0.05), transparent);
    animation:lightScan 6s linear infinite;
}

@keyframes lightScan{
    0%{opacity:0.3}
    50%{opacity:0.7}
    100%{opacity:0.3}
}

/* ============================= */
/* ELECTRIC GLOW CARDS */
/* ============================= */

.calidad-card{
    box-shadow:
        0 0 0 rgba(0,0,0,0),
        0 0 40px rgba(245,196,0,0.05);
}

.calidad-card:hover{
    box-shadow:
        0 0 30px rgba(245,196,0,0.15),
        0 0 80px rgba(245,196,0,0.1),
        0 0 140px rgba(245,196,0,0.05);
}

/* ============================= */
/* LÍNEAS DE ENERGÍA ANIMADAS */
/* ============================= */

.calidad-bloques::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 80px,
            rgba(245,196,0,0.02) 82px,
            transparent 100px
        );
    animation:energyLines 20s linear infinite;
    pointer-events:none;
}

@keyframes energyLines{
    from{background-position:0 0}
    to{background-position:1000px 0}
}

/* ============================= */
/* OBJETIVOS ELECTRIC HOVER */
/* ============================= */

.calidad-list li{
    position:relative;
    overflow:hidden;
}

.calidad-list li::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent, rgba(245,196,0,0.15), transparent);
    transform:translateX(-100%);
    transition:.6s;
}

.calidad-list li:hover::after{
    transform:translateX(100%);
}

/* ============================= */
/* DECLARACIÓN POWER GLOW */
/* ============================= */

.calidad-declaracion{
    box-shadow:inset 0 0 120px rgba(245,196,0,0.08);
}

/* ============================= */
/* HERO PULSE EFFECT */
/* ============================= */

.calidad-hero.pulse{
    filter:brightness(1.1);
}

.calidad-hero.pulse::before{
    animation:energyPulse 2s ease-in-out infinite;
}

@keyframes energyPulse{
    0%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.25);
    }
    100%{
        filter:brightness(1);
    }
}

/* ============================= */
/* ENERGY PARTICLES LAYER */
/* ============================= */

.energy-particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    mix-blend-mode:screen;
}

/* ============================= */
/* GLOBAL ELECTRIC AMBIENT */
/* ============================= */

body{
    background:#050505;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 50%, rgba(245,196,0,0.04), transparent 60%);
    z-index:0;
}

/* ===== BLOQUE ISO ===== */

/* ============================= */
/* ISO CERTIFICACIÓN PRO STYLE */
/* ============================= */

.calidad-iso{
    padding:120px 0;
    background: radial-gradient(circle at center, #111, #050505);
    text-align:center;
    position:relative;
    overflow:hidden;
}

.iso-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
}

/* Contenedor del logo */
.iso-logo-wrapper{
    position:relative;
    width:260px;
    height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Luz de fondo */
.iso-glow{
    position:absolute;
    width:260px;
    height:260px;
    background:radial-gradient(circle, rgba(245,196,0,0.35), rgba(245,196,0,0.15), transparent 70%);
    border-radius:50%;
    animation:isoPulse 3s ease-in-out infinite;
    filter:blur(10px);
}

/* Logo */
.iso-logo{
    width:220px;
    position:relative;
    z-index:2;
    animation:isoFloat 4s ease-in-out infinite;
    filter:drop-shadow(0 15px 40px rgba(0,0,0,.6));
}

/* Texto */
.iso-texto{
    max-width:850px;
}

.iso-texto h2{
    color:var(--sky-yellow);
    font-weight:900;
    letter-spacing:4px;
    margin-bottom:20px;
}

.iso-texto p{
    color:#ddd;
    line-height:1.8;
}

/* Animaciones */
@keyframes isoFloat{
    0%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
    100%{transform:translateY(0)}
}

@keyframes isoPulse{
    0%{opacity:.7; transform:scale(1)}
    50%{opacity:1; transform:scale(1.1)}
    100%{opacity:.7; transform:scale(1)}
}