/*==================================================
DSP PREMIUM APP
STYLE.CSS RC2 FINAL

Proyecto:
DSP Desinfección • Sanitización • Control de Plagas

Desarrollado por:
ORIHUELA Gestión
==================================================*/


/*==================================================
VARIABLES GLOBALES
==================================================*/

:root{

    --negro:#050505;
    --negro2:#101010;
    --gris:#1a1a1a;
    --gris2:#252525;

    --blanco:#ffffff;
    --texto:#d8d8d8;
    --texto2:#bdbdbd;

    --naranja:#ff7a00;
    --naranja2:#ff9800;
    --naranja3:#ffb347;

    --radio:22px;

    --sombra:
    0 20px 45px rgba(0,0,0,.35);

    --sombra-hover:
    0 30px 70px rgba(255,122,0,.20);

    --transicion:.40s ease;

    --max-width:1200px;

}


/*==================================================
RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Montserrat',sans-serif;

    background:var(--negro);

    color:var(--blanco);

    overflow-x:hidden;

    line-height:1.7;

}


/*==================================================
SCROLL
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

        180deg,

        var(--naranja),

        #ff5400

    );

    border-radius:50px;

}


/*==================================================
TIPOGRAFÍA
==================================================*/

h1,h2,h3,h4{

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:1.5px;

    color:#fff;

}

h1{

    font-size:4.5rem;

}

h2{

    font-size:3rem;

}

h3{

    font-size:2rem;

}

p{

    color:var(--texto);

    font-size:1rem;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}


/*==================================================
CONTENEDORES
==================================================*/

section{

    position:relative;

    padding:100px 0;

}

.container{

    width:92%;

    max-width:var(--max-width);

    margin:auto;

    position:relative;

    z-index:2;

}


/*==================================================
FONDOS
==================================================*/

#nosotros,
#servicios,
#video,
#contacto{

    background:#101010;

}

#directivos,
#galeria,
#pagos,
#ubicacion{

    background:#181818;

}


/*==================================================
EFECTO METAL CEPILLADO
==================================================*/

#nosotros::before,
#directivos::before,
#servicios::before,
#galeria::before,
#video::before,
#pagos::before,
#contacto::before,
#ubicacion::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        90deg,

        rgba(255,255,255,.015) 0,

        rgba(255,255,255,.015) 1px,

        transparent 2px,

        transparent 7px

    );

    opacity:.30;

    pointer-events:none;

}


/*==================================================
TÍTULOS GENERALES
==================================================*/

section h2{

    text-align:center;

    margin-bottom:25px;

    position:relative;

}

section h2::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    margin:18px auto 0;

    border-radius:50px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--naranja),

        transparent

    );

}

.section-description{

    max-width:850px;

    margin:0 auto 55px;

    text-align:center;

    color:var(--texto);

    line-height:1.9;

}

/*==================================================
                    LOADER
==================================================*/

#loader{

    position:fixed;
    inset:0;

    background:#000;

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

    gap:30px;

    z-index:99999;

    transition:.6s;

}

#loader img{

    width:180px;

    animation:girarLogo 8s linear infinite;

    filter:
    drop-shadow(0 0 25px rgba(255,122,0,.35));

}

#loader h2{

    width:90%;

    text-align:center;

    color:#ffffff;

    font-size:1.15rem;

    font-family:'Montserrat',sans-serif;

    font-weight:500;

    line-height:1.8;

}



/*==================================================
                    HERO
==================================================*/

#hero{

    position:relative;

    min-height:100vh;

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

    overflow:hidden;

    background:

    linear-gradient(

        rgba(0,0,0,.82),

        rgba(0,0,0,.78)

    ),

    url("../img/fondo industrial.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}



/*==================================================
ILUMINACIÓN HERO
==================================================*/

#hero::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:-240px;
    top:-320px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,122,0,.18),

        transparent 72%

    );

    animation:luzHero 10s ease infinite;

}

#hero::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-180px;
    bottom:-220px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.05),

        transparent 70%

    );

}



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

.hero-overlay{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

}



/*==================================================
CONTENIDO HERO
==================================================*/

.hero-content{

    width:92%;

    max-width:900px;

    text-align:center;

    animation:subir 1s ease;

}

.hero-logo{

    width:220px;

    margin:auto auto 40px;

    transition:.45s;

    filter:

    drop-shadow(

        0 0 25px rgba(255,122,0,.35)

    );

}

.hero-logo:hover{

    transform:scale(1.05);

}

.hero-content h1{

    text-transform:uppercase;

    color:#ffffff;

    line-height:1.08;

    font-size:4.3rem;

    margin-bottom:30px;

    text-shadow:

    0 8px 25px rgba(0,0,0,.65);

}

.hero-content p{

    max-width:760px;

    margin:0 auto 45px;

    color:#d8d8d8;

    font-size:1.10rem;

    line-height:1.9;

}



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

.btn-principal{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:18px 42px;

    border-radius:60px;

    color:#ffffff;

    font-weight:700;

    background:

    linear-gradient(

        135deg,

        var(--naranja),

        var(--naranja2)

    );

    box-shadow:

    0 20px 45px rgba(255,122,0,.35);

    transition:var(--transicion);

}

.btn-principal:hover{

    transform:translateY(-6px);

    box-shadow:

    0 30px 65px rgba(255,122,0,.45);

}

.btn-principal i{

    font-size:1.45rem;

}



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

@media(max-width:992px){

.hero-content h1{

font-size:3.5rem;

}

.hero-logo{

width:190px;

}

}

@media(max-width:768px){

#hero{

background-attachment:scroll;

}

.hero-logo{

width:170px;

}

.hero-content h1{

font-size:2.7rem;

}

.hero-content p{

font-size:1rem;

}

.btn-principal{

padding:16px 30px;

}

}

@media(max-width:480px){

.hero-logo{

width:140px;

}

.hero-content h1{

font-size:2.15rem;

}

.hero-content p{

font-size:.95rem;

}

.btn-principal{

width:100%;

}

}

/*==================================================
                NOSOTROS
==================================================*/

#nosotros{

    background:linear-gradient(180deg,#111111,#181818);

}

#nosotros .container{

    text-align:center;

}

#nosotros p{

    max-width:900px;

    margin:0 auto;

    padding:45px;

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

    border-radius:22px;

    color:#d7d7d7;

    font-size:1.08rem;

    line-height:2;

    box-shadow:var(--sombra);

    backdrop-filter:blur(8px);

    transition:var(--transicion);

}

#nosotros p:hover{

    transform:translateY(-8px);

    border-color:rgba(255,122,0,.35);

    box-shadow:var(--sombra-hover);

}


/*==================================================
                DIRECTIVOS
==================================================*/

#directivos{

    background:linear-gradient(180deg,#181818,#101010);

}

.directivos{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:60px;

}

.director{

    position:relative;

    overflow:hidden;

    padding:55px 35px;

    border-radius:22px;

    text-align:center;

    background:linear-gradient(
        145deg,
        #262626,
        #111111
    );

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

    box-shadow:var(--sombra);

    transition:var(--transicion);

}

.director::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transition:1s;

}

.director:hover::before{

    left:150%;

}

.director:hover{

    transform:translateY(-10px);

    border-color:rgba(255,122,0,.40);

    box-shadow:var(--sombra-hover);

}

.director h3{

    color:#ffffff;

    font-size:2rem;

    line-height:1.3;

    margin-bottom:12px;

}

#directivos h4{

    margin-top:45px;

    text-align:center;

    color:var(--naranja);

    font-size:2rem;

    letter-spacing:3px;

}


/*==================================================
        ANIMACIONES
==================================================*/

#nosotros p,

.director{

    animation:fadeUp .8s ease both;

}

.director:nth-child(2){

    animation-delay:.20s;

}


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

@media(max-width:768px){

#nosotros{

padding:80px 0;

}

#nosotros p{

padding:30px;

font-size:1rem;

line-height:1.8;

}

.directivos{

grid-template-columns:1fr;

gap:25px;

}

.director{

padding:40px 25px;

}

.director h3{

font-size:1.7rem;

}

#directivos h4{

font-size:1.6rem;

}

}

@media(max-width:480px){

#nosotros p{

padding:25px;

}

.director{

padding:35px 20px;

}

}

/*==================================================
                SERVICIOS PREMIUM
==================================================*/

#servicios{

    background:linear-gradient(180deg,#101010,#181818);

}

#servicios .container{

    position:relative;
    z-index:2;

}

#servicios h2{

    text-align:center;

}

#servicios .section-description{

    max-width:820px;

    margin:0 auto 55px;

    text-align:center;

    color:var(--texto);

    line-height:1.9;

}


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

.servicios-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-top:60px;

}


/*==================================================
TARJETAS
==================================================*/

.service-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    background:

    linear-gradient(
        145deg,
        #232323,
        #111111
    );

    border-radius:22px;

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

    box-shadow:var(--sombra);

    transition:var(--transicion);

}


/* Brillo */

.service-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.10),

        transparent

    );

    transition:1s;

}

.service-card:hover::after{

    left:150%;

}


/* Hover */

.service-card:hover{

    transform:translateY(-12px);

    border-color:

    rgba(255,122,0,.45);

    box-shadow:var(--sombra-hover);

}


/*==================================================
IMAGEN
==================================================*/

.service-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

    transition:.70s;

}

.service-card:hover img{

    transform:scale(1.06);

}


/*==================================================
TÍTULO
==================================================*/

.service-card h3{

    margin:28px 20px 18px;

    color:#ffffff;

    font-size:1.55rem;

    text-align:center;

    line-height:1.3;

}


/*==================================================
DESCRIPCIÓN
==================================================*/

.service-card p{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0 25px 35px;

    text-align:center;

    color:#d7d7d7;

    line-height:1.9;

}


/*==================================================
ELIMINAR ICONOS
==================================================*/

.service-card::before{

    display:none !important;

    content:none !important;

}

.service-card h3::before,

.service-card h3::after{

    display:none !important;

    content:none !important;

}

.service-icon,

.service-card i,

.service-card span.icon{

    display:none !important;

}


/*==================================================
ANIMACIONES
==================================================*/

.service-card{

    animation:fadeUp .80s ease both;

}

.service-card:nth-child(2){

    animation-delay:.15s;

}

.service-card:nth-child(3){

    animation-delay:.30s;

}


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

@media(max-width:992px){

.servicios-grid{

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

}

}

@media(max-width:768px){

.servicios-grid{

grid-template-columns:1fr;

gap:25px;

}

.service-card img{

height:220px;

}

.service-card h3{

font-size:1.35rem;

}

.service-card p{

padding:0 20px 28px;

}

}

@media(max-width:480px){

.service-card{

border-radius:18px;

}

.service-card img{

height:210px;

}

.service-card h3{

font-size:1.25rem;

}

}

/*==================================================
                GALERÍA PREMIUM
==================================================*/

#galeria{

    background:linear-gradient(180deg,#181818,#101010);

}

#galeria .container{

    position:relative;
    z-index:2;

}

#galeria h2{

    text-align:center;

}

#galeria .section-description{

    max-width:820px;

    margin:0 auto 55px;

    text-align:center;

    color:var(--texto);

    line-height:1.9;

}


/*==================================================
GRID GALERÍA
==================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    justify-items:center;

    margin-top:60px;

}


/*==================================================
IMÁGENES
==================================================*/

.gallery-grid img{

    width:100%;

    max-width:340px;

    aspect-ratio:4/3;

    object-fit:cover;

    display:block;

    border-radius:22px;

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

    box-shadow:var(--sombra);

    cursor:pointer;

    transition:var(--transicion);

}

.gallery-grid img:hover{

    transform:translateY(-10px) scale(1.03);

    border-color:rgba(255,122,0,.45);

    box-shadow:var(--sombra-hover);

}


/*==================================================
ANIMACIONES
==================================================*/

.gallery-grid img{

    animation:fadeUp .8s ease both;

}

.gallery-grid img:nth-child(2){

    animation-delay:.15s;

}

.gallery-grid img:nth-child(3){

    animation-delay:.30s;

}


/*==================================================
                VIDEO PREMIUM
==================================================*/

#video{

    background:linear-gradient(180deg,#101010,#181818);

}

#video .container{

    position:relative;
    z-index:2;

}

.video-container{

    width:100%;

    max-width:760px;

    margin:60px auto 0;

    overflow:hidden;

    border-radius:24px;

    background:linear-gradient(
        145deg,
        #242424,
        #101010
    );

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

    box-shadow:var(--sombra);

    transition:var(--transicion);

}

.video-container:hover{

    transform:translateY(-8px);

    border-color:rgba(255,122,0,.40);

    box-shadow:var(--sombra-hover);

}

.video-container video{

    display:block;

    width:100%;

    height:auto;

    border-radius:24px;

}


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

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

gap:25px;

}

.gallery-grid img{

max-width:100%;

}

.video-container{

max-width:100%;

border-radius:18px;

}

.video-container video{

border-radius:18px;

}

}

/* =====================================================
        RC2.6 FORMAS DE PAGO - TARJETAS PREMIUM
===================================================== */


.rc26-payment {

    padding: 60px 20px;

}



.rc26-payment-grid {

    display: grid;

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

    gap: 25px;

    max-width: 1100px;

    margin: 40px auto 0;

}



.rc26-payment-card {

    background: #ffffff;

    border-radius: 18px;

    padding: 30px 25px;

    text-align: center;

    min-height: 280px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    box-shadow: 0 10px 25px rgba(0,0,0,0.10);

}



.rc26-icon {

    font-size: 42px;

    margin-bottom: 20px;

}



.rc26-payment-card h3 {

    color: #7a1f3d;

    margin-bottom: 15px;

}



.rc26-payment-card p {

    color: #444;

    line-height: 1.6;

    margin: 8px 0;

}



.rc26-payment-card strong {

    color: #7a1f3d;

}



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


@media(max-width:768px){


    .rc26-payment-grid {

        grid-template-columns: 1fr;

    }


    .rc26-payment-card {

        min-height: auto;

    }


}

/* =====================================================
        RC2.6 AJUSTE PREMIUM TARJETAS
===================================================== */


.rc26-payment-card {

    align-items: center;

}


.rc26-payment-card h3 {

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.rc26-payment-card p {

    width: 100%;

    text-align: center;

}



.rc26-payment-card strong {

    display: inline-block;

    word-break: break-word;

}



.rc26-payment-card:first-child {

    justify-content: flex-start;

}



@media(max-width:768px){


    .rc26-payment-card h3 {

        min-height: auto;

    }


    .rc26-payment-card {

        padding: 25px 18px;

    }


}

/* =====================================================
        RC2.6 AJUSTE CENTRADO COMPLETO
===================================================== */


.rc26-payment .section-header {

    text-align: center;

}



.rc26-payment-card {

    justify-content: center;

    align-items: center;

    text-align: center;

}



.rc26-payment-card h3 {

    text-align: center;

}



.rc26-payment-card p {

    text-align: center;

}



.rc26-icon {

    margin-left: auto;

    margin-right: auto;

}

/*==================================================
RC3 - WHATSAPP PREMIUM
==================================================*/

.floating-whatsapp{
    position:fixed;
    right:28px;
    bottom:28px;
    width:68px;
    height:68px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(145deg,#25D366,#128C7E);
    color:#fff;
    font-size:2rem;
    z-index:9999;
    text-decoration:none;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),
        0 0 25px rgba(37,211,102,.35);

    transition:.35s ease;
}

.floating-whatsapp:hover{
    transform:translateY(-6px) scale(1.08);
    box-shadow:
        0 25px 50px rgba(0,0,0,.45),
        0 0 35px rgba(37,211,102,.55);
}

.floating-whatsapp i{
    font-size:2rem;
    line-height:1;
}

@keyframes whatsappPulse{

    0%{
        box-shadow:
        0 0 0 0 rgba(37,211,102,.45);
    }

    70%{
        box-shadow:
        0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(37,211,102,0);
    }

}

.floating-whatsapp{
    animation:whatsappPulse 2.8s infinite;
}

@media(max-width:768px){

.floating-whatsapp{

    width:60px;
    height:60px;

    right:18px;
    bottom:18px;

}

.floating-whatsapp i{

    font-size:1.8rem;

}

}

/*==================================================
RC3 - FOOTER PREMIUM
==================================================*/

footer{
    background: linear-gradient(180deg,#090909,#050505);
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 70px 0 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

footer::before{
    content:"";
    position:absolute;
    inset:0;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.012) 0,
        rgba(255,255,255,.012) 1px,
        transparent 2px,
        transparent 8px
    );
    pointer-events:none;
}

.footer-logo{
    width: 140px;
    margin: 0 auto 25px;
    filter: drop-shadow(0 0 18px rgba(255,122,0,.30));
    transition: .35s ease;
}

.footer-logo:hover{
    transform: scale(1.05);
}

footer h3{
    margin-bottom: 10px;
    font-size: 2.2rem;
    color: #ffffff;
    letter-spacing: 2px;
}

footer > .container > p{
    max-width: 650px;
    margin: 0 auto 35px;
    color: var(--texto);
    line-height: 1.8;
}

footer hr{
    width: 180px;
    height: 2px;
    margin: 35px auto;
    border: none;
    border-radius: 50px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--naranja),
        transparent
    );
}

.developer{
    max-width: 700px;
    margin: auto;
}

.developer span{
    display: block;
    color: #9d9d9d;
    font-size: .90rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.developer h4{
    color: var(--naranja);
    font-size: 1.6rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.developer p{
    color: var(--texto2);
    line-height: 1.8;
    margin-bottom: 20px;
}

.developer small{
    display: block;
    color: #777;
    font-size: .85rem;
    letter-spacing: .5px;
}

@media(max-width:768px){

    footer{
        padding: 55px 0 30px;
    }

    .footer-logo{
        width: 110px;
    }

    footer h3{
        font-size: 1.8rem;
    }

    .developer h4{
        font-size: 1.35rem;
    }

}

/*==================================================
RC3 - UBICACIÓN PREMIUM
==================================================*/

#ubicacion{
    text-align:center;
}

#ubicacion .container{
    max-width:900px;
}

#ubicacion p{
    max-width:650px;
    margin:25px auto 45px;
    color:var(--texto);
    line-height:1.9;
}

.map-button{
    display:flex;
    justify-content:center;
    align-items:center;
}

.btn-maps{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    padding:18px 38px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        #232323,
        #101010
    );

    color:#ffffff;

    font-weight:600;

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

    box-shadow:var(--sombra);

    transition:var(--transicion);
}

.btn-maps i{
    color:var(--naranja);
    font-size:1.25rem;
}

.btn-maps:hover{

    transform:translateY(-6px);

    border-color:rgba(255,122,0,.45);

    box-shadow:var(--sombra-hover);

    background:linear-gradient(
        135deg,
        #2b2b2b,
        #151515
    );

}

@media(max-width:768px){

.btn-maps{

    width:100%;

    max-width:340px;

    padding:16px 20px;

}

}

/*==================================================
RC3 - FORMAS DE PAGO PREMIUM
==================================================*/

#pagos{
    text-align:center;
}

#pagos .section-header{
    max-width:760px;
    margin:0 auto 55px;
}

#pagos .section-header h2{
    margin-bottom:18px;
}

#pagos .section-header p{
    color:var(--texto);
    line-height:1.8;
}

.rc26-payment-grid{

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

    gap:30px;

    align-items:stretch;

    max-width:1150px;

    margin:60px auto 0;

}

.rc26-payment-card{

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    min-height:340px;

    padding:35px 28px;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        #ffffff,
        #f6f6f6
    );

    transition:.35s ease;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

}

.rc26-payment-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.18);

}

.rc26-icon{

    width:80px;
    height:80px;

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

    border-radius:50%;

    background:#fff4ea;

    font-size:2.3rem;

    margin-bottom:25px;

}

.rc26-payment-card h3{

    min-height:60px;

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

    margin-bottom:20px;

    color:#7a1f3d;

    text-align:center;

}

.rc26-payment-card p{

    width:100%;

    margin:8px 0;

    text-align:center;

    color:#444;

    line-height:1.7;

}

.rc26-payment-card strong{

    color:#7a1f3d;

    font-weight:700;

}

@media(max-width:992px){

.rc26-payment-grid{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.rc26-payment-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.rc26-payment-card{

    min-height:auto;

    padding:28px 22px;

}

.rc26-icon{

    width:70px;
    height:70px;
    font-size:2rem;

}

}

/*==================================================
RC3 - VIDEO PREMIUM
==================================================*/

#video{
    text-align:center;
}

#video .container{
    max-width:1100px;
}

.video-container{

    width:100%;
    max-width:900px;

    margin:60px auto 0;

    overflow:hidden;

    border-radius:28px;

    background:linear-gradient(
        145deg,
        #242424,
        #101010
    );

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

    transition:.35s ease;

}

.video-container:hover{

    transform:translateY(-8px);

    border-color:rgba(255,122,0,.35);

    box-shadow:
        0 30px 70px rgba(255,122,0,.15);

}

.video-container video{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:28px;

}

@media(max-width:768px){

.video-container{

    margin-top:40px;

    border-radius:18px;

}

.video-container video{

    border-radius:18px;

}

}

/*==================================================
RC3 - GALERÍA PREMIUM
==================================================*/

#galeria{
    text-align:center;
}

#galeria .container{
    max-width:1200px;
}

.gallery-grid{

    display:grid;

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

    gap:32px;

    margin-top:60px;

    align-items:stretch;

}

.gallery-grid img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:22px;

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

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

    transition:.45s ease;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:
        translateY(-10px)
        scale(1.03);

    border-color:rgba(255,122,0,.45);

    box-shadow:
        0 28px 60px rgba(255,122,0,.18);

}

.gallery-grid img:nth-child(1){
    animation:fadeUp .7s ease both;
}

.gallery-grid img:nth-child(2){
    animation:fadeUp .7s ease .15s both;
}

.gallery-grid img:nth-child(3){
    animation:fadeUp .7s ease .30s both;
}

@media(max-width:992px){

.gallery-grid{

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

}

}

@media(max-width:768px){

.gallery-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.gallery-grid img{

    border-radius:18px;

}

}

/*==================================================
RC3 - SERVICIOS PREMIUM FINAL
==================================================*/

#servicios{
    text-align:center;
}

#servicios .container{
    max-width:1200px;
}

.servicios-grid{

    display:grid;

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

    gap:32px;

    align-items:stretch;

    margin-top:60px;

}

.service-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        #232323,
        #101010
    );

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

    box-shadow:0 18px 40px rgba(0,0,0,.35);

    transition:.35s ease;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,122,0,.40);

    box-shadow:0 28px 60px rgba(255,122,0,.18);

}

.service-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s ease;

}

.service-card:hover img{

    transform:scale(1.05);

}

.service-card h3{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:80px;

    margin:25px 20px 15px;

    text-align:center;

    font-size:1.55rem;

    line-height:1.25;

    color:#fff;

}

.service-card p{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:0 28px 32px;

    text-align:center;

    color:var(--texto);

    line-height:1.85;

}

/* Eliminar cualquier icono heredado */

.service-card::before,
.service-card h3::before,
.service-card h3::after,
.service-card i,
.service-card svg,
.service-icon{
    display:none !important;
    content:none !important;
}

@media(max-width:992px){

.servicios-grid{

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

}

}

@media(max-width:768px){

.servicios-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.service-card img{

    height:220px;

}

.service-card h3{

    min-height:auto;

    font-size:1.35rem;

}

.service-card p{

    padding:0 22px 28px;

}

}

/*==================================================
RC3.1 SERVICIOS SIN IMÁGENES
==================================================*/

.servicios-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    margin-top:60px;

}

.service-card{

    min-height:320px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:45px 35px;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        #232323,
        #101010
    );

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

    box-shadow:var(--sombra);

    transition:.35s ease;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,122,0,.40);

    box-shadow:var(--sombra-hover);

}

.service-card h3{

    margin-bottom:22px;

    color:#fff;

    font-size:1.7rem;

    text-align:center;

}

.service-card p{

    color:var(--texto);

    text-align:center;

    line-height:1.9;

}

@media(max-width:992px){

.servicios-grid{

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

}

}

@media(max-width:768px){

.servicios-grid{

grid-template-columns:1fr;

}

.service-card{

min-height:auto;

padding:35px 28px;

}

}

/*==================================================
RC3-08 DIRECTIVOS FINAL
==================================================*/

#directivos{
    text-align:center;
}

.directivos{

    display:grid;

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

    gap:35px;

    margin:60px auto;

    max-width:900px;

}

.director{

    min-height:230px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    padding:40px 30px;

    border-radius:22px;

    background:linear-gradient(145deg,#232323,#101010);

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

    box-shadow:var(--sombra);

    transition:.35s;

}

.director:hover{

    transform:translateY(-10px);

    border-color:rgba(255,122,0,.40);

    box-shadow:var(--sombra-hover);

}

.director h3{

    color:#fff;

    font-size:2rem;

    line-height:1.35;

    margin:0;

}

#directivos h4{

    margin-top:20px;

    color:var(--naranja);

    font-size:1.7rem;

    letter-spacing:2px;

}

@media(max-width:768px){

.directivos{

grid-template-columns:1fr;

gap:25px;

}

.director{

min-height:190px;

}

.director h3{

font-size:1.6rem;

}

}

/*==================================================
RC3-09 NOSOTROS FINAL
==================================================*/

#nosotros{
    text-align:center;
}

#nosotros .container{
    max-width:1000px;
}

#nosotros p{

    max-width:900px;

    margin:50px auto 0;

    padding:45px;

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

    border-radius:22px;

    color:var(--texto);

    font-size:1.08rem;

    line-height:2;

    box-shadow:var(--sombra);

    transition:.35s;

}

#nosotros p:hover{

    transform:translateY(-8px);

    border-color:rgba(255,122,0,.35);

    box-shadow:var(--sombra-hover);

}

@media(max-width:768px){

#nosotros p{

    padding:30px 24px;

    font-size:1rem;

    line-height:1.85;

}

}

/*==================================================
RC4 - HERO LOGO PREMIUM
==================================================*/

.hero-logo{
    width:260px;
    max-width:80%;
    margin:0 auto 35px;
    background:rgba(255,255,255,.92);
    padding:10px 18px;
    border-radius:6px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.20),
        0 18px 45px rgba(0,0,0,.45),
        0 0 35px rgba(255,122,0,.28);
}

.hero-logo:hover{
    transform:scale(1.04);
}

@media(max-width:768px){
    .hero-logo{
        width:210px;
        padding:8px 14px;
        margin-bottom:28px;
    }
}

@media(max-width:480px){
    .hero-logo{
        width:175px;
    }
}

/*==================================================
RC4 - HERO TEXTO FINAL
==================================================*/

.hero-content{
    max-width:980px;
}

.hero-content h1{
    font-size:clamp(2.8rem,6vw,4.8rem);
    line-height:1.08;
    margin-bottom:28px;
}

.hero-content p{
    max-width:760px;
    font-size:1.08rem;
}

/*==================================================
RC4 - CONTACTO DIRECTO
==================================================*/

#contacto{
    text-align:center;
    background:linear-gradient(180deg,#101010,#181818);
}

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

.contact-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

/*=========================
TARJETAS
=========================*/

.contact-card{

    grid-column:span 2;

    min-height:210px;

    padding:35px 25px;

    border-radius:22px;

    background:linear-gradient(
        145deg,
        #232323,
        #101010
    );

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

    box-shadow:var(--sombra);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s ease;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,122,0,.45);

    box-shadow:var(--sombra-hover);

}

.contact-card i{

    font-size:2.4rem;

    color:var(--naranja);

    margin-bottom:20px;

}

.contact-card h3{

    font-size:1.45rem;

    margin-bottom:10px;

    color:#ffffff;

}

.contact-card p{

    color:var(--texto);

    margin-bottom:10px;

}

.contact-card strong{

    color:#ffffff;

    font-weight:600;

}

/*=========================
CENTRAR SEGUNDA FILA
=========================*/

.contact-card:nth-child(4){

    grid-column:2 / span 2;

}

.contact-card:nth-child(5){

    grid-column:4 / span 2;

}

/*=========================
TABLET
=========================*/

@media(max-width:992px){

.contact-grid{

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

}

.contact-card,
.contact-card:nth-child(4),
.contact-card:nth-child(5){

    grid-column:auto;

}

}

/*=========================
MÓVIL
=========================*/

@media(max-width:768px){

.contact-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.contact-card{

    min-height:180px;

    padding:30px 20px;

}

}