.emergencias-page{
    background:#f7f7f7;
}

/* CONTENEDOR */
.emergencias-container{
    max-width:1300px;
}

/* TEXTO */
.emergencias-intro p{
    font-size:16px;
    line-height:1.8;
    color:#333;
    max-width:900px;
    margin:0 auto 40px auto;
    text-align:justify;
}

/* GRID */
.emergencias-grid{
    margin-top:40px;
}

/* IMAGEN */
.emergencias-img img{
    border-radius:8px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* CARDS */
.emergencias-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.cap-card{
    background:white;
    padding:18px;
    border-left:4px solid #ffd000;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    font-weight:600;
    transition:.3s;
}

.cap-card:hover{
    transform:translateY(-6px);
}

/* PROCESO */
.emergencias-proceso{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.paso{
    background:#111;
    color:white;
    padding:15px;
    text-align:center;
    font-size:14px;
    border-bottom:4px solid #ffd000;
}

/* RESPONSIVE */
@media(max-width:991px){
    .emergencias-proceso{
        grid-template-columns:repeat(3,1fr);
    }
}

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

.cap-card, .paso{
    opacity:0;
    transform:translateY(20px);
    transition:.6s;
}

.cap-card.visible, .paso.visible{
    opacity:1;
    transform:translateY(0);
}

/* INFRAESTRUCTURA */
.emergencias-infraestructura{
    margin-top:80px;
}

.emergencias-infraestructura h3{
    text-align:center;
    margin-bottom:40px;
    font-weight:700;
}

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

.infra-box{
    background:white;
    padding:25px;
    border-top:4px solid #ffd000;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    transition:.4s;
}

.infra-box h4{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
}

.infra-box p{
    font-size:14px;
    color:#444;
    line-height:1.6;
}

.infra-box:hover{
    transform:translateY(-10px);
}

/* APLICACIONES */
.emergencias-aplicaciones{
    margin-top:80px;
}

.emergencias-aplicaciones h3{
    text-align:center;
    margin-bottom:30px;
    font-weight:700;
}

.app-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.app-box{
    background:#111;
    color:white;
    padding:18px;
    text-align:center;
    font-size:13px;
    letter-spacing:0.5px;
    transition:.3s;
}

.app-box:hover{
    background:#ffd000;
    color:#000;
}

/* RESPONSIVE */
@media(max-width:1200px){
    .infra-grid{ grid-template-columns:repeat(2,1fr); }
    .app-grid{ grid-template-columns:repeat(3,1fr); }
}

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

.infra-box, .app-box, .emergencias-img img{
    opacity:0;
    transform:translateY(25px);
    transition:0.8s cubic-bezier(.2,.8,.2,1);
}

.infra-box.visible,
.app-box.visible,
.emergencias-img img.visible{
    opacity:1;
    transform:translateY(0);
}

/* TITULOS ENERGÉTICOS */
#tituloR{
    color:#ffd000;
    font-weight:800;
    letter-spacing:2px;
    text-shadow:
        0 0 5px rgba(255,208,0,0.4),
        0 0 15px rgba(255,208,0,0.3),
        0 0 30px rgba(255,208,0,0.15);
    position:relative;
}

#tituloR::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
    width:120px;
    height:3px;
    background:linear-gradient(90deg, transparent, #ffd000, transparent);
    box-shadow:0 0 15px #ffd000;
}

.cap-card{
    position:relative;
    overflow:hidden;
}

/* EFECTO LUZ */
.cap-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,208,0,0.25),
        transparent
    );
    transition:0.6s;
}

.cap-card:hover::before{
    left:100%;
}

/* GLOW */
.cap-card:hover{
    box-shadow:
        0 0 15px rgba(255,208,0,0.25),
        0 0 40px rgba(255,208,0,0.15);
}

.infra-box, .app-box{
    position:relative;
    overflow:hidden;
}

/* Pulso eléctrico */
.infra-box::after,
.app-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--x,50%) var(--y,50%),
        rgba(255,208,0,0.15),
        transparent 40%);
    opacity:0;
    transition:.3s;
}

.infra-box:hover::after,
.app-box:hover::after{
    opacity:1;
}

.cap-card, .paso, .infra-box, .app-box, .emergencias-img img{
    opacity:0;
    transform:translateY(35px) scale(0.97);
    transition:0.9s cubic-bezier(.2,.8,.2,1);
}

.cap-card.visible,
.paso.visible,
.infra-box.visible,
.app-box.visible,
.emergencias-img img.visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

.emergencias-page{
    position:relative;
}

.emergencias-page::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg,
        transparent,
        rgba(255,208,0,0.03),
        transparent);
    animation:energia 6s linear infinite;
    pointer-events:none;
}

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

/* ===============================
   IMAGEN VERTICAL DESTACADA
================================= */

.emergencias-banner-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 80px 0; /* espacio arriba y abajo */
}

.emergencias-banner-img img {
    width: 100%;
    max-width: 500px; /* controla el tamaño en desktop */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}