/*====================================================*/
/* EMERGENCIAS */
/*====================================================*/

.emergency{

    position:relative;
    overflow:hidden;
    padding:90px 20px;
    background:#050b13;

}

.emergency-container{

    max-width:1250px;
    margin:auto;
    position:relative;
    z-index:2;

}

/************************************************/

.emergency-bg{

    position:absolute;
    inset:0;

    background:

    radial-gradient(circle at 20% 30%,
    rgba(0,170,255,.08),
    transparent 35%),

    radial-gradient(circle at 80% 70%,
    rgba(255,213,74,.08),
    transparent 30%);

}

/************************************************/

.emergency-card{

    position:relative;

    display:grid;
    gap:50px;

    padding:35px;

    border-radius:34px;

    background:
    linear-gradient(145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.03));

    backdrop-filter:blur(28px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

    inset 0 1px 1px rgba(255,255,255,.15),

    0 30px 80px rgba(0,0,0,.35);

}

/************************************************/

.emergency-light{

    position:relative;

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

    min-height:220px;

}

.lightning-core{

    position:relative;

    width:120px;
    height:120px;

    border-radius:50%;

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

    font-size:58px;

    color:#FFD54A;

    background:

    linear-gradient(145deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.04));

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:

    inset 0 1px 1px rgba(255,255,255,.25),

    0 0 45px rgba(255,213,74,.20);

    animation:floatLightning 5s ease-in-out infinite;

}

/************************************************/

.pulse-ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(255,213,74,.30);

    animation:ring 3s linear infinite;

}

.ring-1{

    width:170px;
    height:170px;

}

.ring-2{

    width:220px;
    height:220px;

    animation-delay:1.5s;

}

/************************************************/

.emergency-tag{

    display:inline-block;

    color:#FFD54A;

    letter-spacing:3px;

    font-size:.8rem;

    margin-bottom:16px;

}

.emergency-content h2{

    color:#fff;

    font-size:clamp(2rem,7vw,3.4rem);

    line-height:1.1;

    margin-bottom:22px;

}

.emergency-content p{

    color:#c8d2dd;

    line-height:1.8;

}

/************************************************/

.emergency-list{

    display:grid;
    gap:14px;

    margin:35px 0;

}

.emergency-item{

    display:flex;
    align-items:center;
    gap:16px;

    padding:16px 18px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.07);

    backdrop-filter:blur(15px);

    transition:.35s;

}

.emergency-item span{

    font-size:24px;

}

.emergency-item p{

    color:white;

}

/************************************************/

.emergency-btn{

    display:inline-flex;

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

    padding:16px 34px;

    border-radius:60px;

    background:linear-gradient(135deg,#FFD54A,#FFA000);

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

@media(hover:hover){

.emergency-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(255,193,7,.35);

}

.emergency-item:hover{

    transform:translateX(8px);

    border-color:#FFD54A;

}

}

/************************************************/
/* Tablet */
/************************************************/

@media(min-width:768px){

.emergency-card{

    grid-template-columns:320px 1fr;
    align-items:center;
    gap:60px;

}

}

/************************************************/
/* Desktop */
/************************************************/

@media(min-width:1100px){

.emergency{

    padding:140px 20px;

}

.emergency-card{

    padding:60px;

}

.lightning-core{

    width:150px;
    height:150px;

    font-size:72px;

}

.ring-1{

    width:220px;
    height:220px;

}

.ring-2{

    width:290px;
    height:290px;

}

}

/************************************************/

@keyframes ring{

    0%{

        transform:scale(.6);
        opacity:0;

    }

    30%{

        opacity:.7;

    }

    100%{

        transform:scale(1.2);
        opacity:0;

    }

}

@keyframes floatLightning{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}




.lightning-core.flash{

    box-shadow:

    inset 0 1px 2px rgba(255,255,255,.35),

    0 0 25px rgba(255,255,255,.6),

    0 0 80px rgba(255,213,74,.8),

    0 0 140px rgba(255,193,7,.45);

    transform:scale(1.08);

}