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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

:root{

    --color1:#1d4ed8;
    --color2:#39d406;
    --color3:#93ed3a;
    --color4:#f7e41b;

    --texto:#1e293b;
    --texto2:#ebeef0;

    --fondo:#f6f8fc;

    --glass:rgba(255,255,255,.72);
    --border:rgba(255,255,255,.65);

    --shadow:0 18px 45px rgba(15,23,42,.08);

    --radio:26px;

}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,"Segoe UI",sans-serif;
    background:var(--fondo);
    color:var(--texto);
    overflow-x:hidden;

}

/* ===========================
   SECCIÓN
=========================== */

.ventajas{

    position:relative;
    padding:90px 20px;
    overflow:hidden;

}

/* Luces de fondo */

.ventajas::before{

    content:"";
    position:absolute;

    width:520px;
    height:520px;

    left:-220px;
    top:-220px;

    background:#3b82f6;

    opacity:.15;

    filter:blur(140px);

    animation:mover1 12s ease-in-out infinite alternate;

}

.ventajas::after{
    content:"";
    position:absolute;

    width:480px;
    height:480px;

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

    background:#32039f;

    opacity:.12;

    filter:blur(140px);

    animation:mover2 14s ease-in-out infinite alternate;

}

@keyframes mover1{

from{

transform:translate(0,0);

}

to{

transform:translate(80px,50px);

}

}

@keyframes mover2{

from{

transform:translate(0,0);

}

to{

transform:translate(-80px,-60px);

}

}

/* ===========================
   CONTENEDOR
=========================== */

.container{

    position:relative;
    z-index:5;

    max-width:1300px;
    margin:auto;

}

/* ===========================
   CABECERA
=========================== */

.cabecera{

    max-width:850px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;

}

.subtitulo{

    display:inline-flex;

    padding:10px 18px;

    border-radius:999px;

    background:white;

    color:var(--color1);

    font-weight:600;

    margin-bottom:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.titulo{

    font-size:2.4rem;
    font-weight:800;
    line-height:1.15;

    margin-bottom:25px;

}

.texto-animado{
    background:linear-gradient(
        90deg,
        var(--color1),
        var(--color2),
        var(--color3),
        var(--color4),
        var(--color1)
    );

    background-size:300%;

    -webkit-background-clip:text;
    background-clip: text;
    -webkit-text-fill-color:transparent;

    animation:gradient 8s linear infinite;

}

@keyframes gradient{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

.descripcion{

    color:var(--texto2);

    font-size:1rem;

    line-height:1.9;

}

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

.grid-ventajas{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

}

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

.card{

    position:relative;

    overflow:hidden;

    padding:35px 30px;

    border-radius:var(--radio);

    background:var(--glass);

    backdrop-filter:blur(18px);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:.45s cubic-bezier(.22,1,.36,1);

}

/* borde animado */

.card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:linear-gradient(
        140deg,
        transparent,
        rgba(59,130,246,.35),
        transparent,
        rgba(124,58,237,.35),
        transparent
    );

    opacity:0;

    transition:.45s;

}

.card:hover::before{

    opacity:1;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 70px rgba(15,23,42,.14);

}

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

.icono{

    width:78px;
    height:78px;

    border-radius:22px;

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

    margin-bottom:25px;

    background:linear-gradient(
        135deg,
        var(--color1),
        var(--color2)
    );

    box-shadow:

    0 15px 30px rgba(29,78,216,.25);

    transition:.45s;

}

.card:hover .icono{

    transform:
    rotate(-8deg)
    scale(1.1);

}

.icono svg{

    width:36px;
    height:36px;

    stroke:#fff;
    stroke-width:2;
    fill:none;

}

.card h3{

    font-size:1.3rem;

    margin-bottom:15px;

}

.card p{

    color:var(--texto2);

    line-height:1.8;

}

/* ===========================
   EFECTO BRILLO
=========================== */

.card::after{

content:"";

position:absolute;

top:-120%;

left:-60%;

width:80%;

height:300%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:rotate(25deg);

transition:1s;

}

.card:hover::after{

left:160%;

}

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

@media (min-width:768px){

.titulo{

font-size:3.2rem;

}

.descripcion{

font-size:1.08rem;

}

.grid-ventajas{

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

}

}

/* ===========================
   DESKTOP
=========================== */

@media (min-width:1200px){

.grid-ventajas{

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

}

.titulo{

font-size:4rem;

}

}

/* ===========================
   ANIMACIÓN ENTRADA
=========================== */

.card{

opacity:0;

transform:translateY(60px);

}

.card.visible{

opacity:1;

transform:translateY(0);

transition:

opacity .8s ease,

transform .8s cubic-bezier(.19,1,.22,1);

}

/* Retraso escalonado */

.card:nth-child(1){transition-delay:.05s;}
.card:nth-child(2){transition-delay:.12s;}
.card:nth-child(3){transition-delay:.19s;}
.card:nth-child(4){transition-delay:.26s;}
.card:nth-child(5){transition-delay:.33s;}
.card:nth-child(6){transition-delay:.40s;}
.card:nth-child(7){transition-delay:.47s;}
.card:nth-child(8){transition-delay:.54s;}

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

@media (max-width:480px){

.ventajas{

padding:70px 18px;

}

.titulo{

font-size:2rem;

}

.card{

padding:28px 22px;

}

.icono{

width:68px;
height:68px;

}

.icono svg{

width:30px;
height:30px;

}

}

















/* ==========================================
   SOBRE NOSOTROS - CRYSTAL GLASS STYLE
========================================== */

.sobre-nosotros{

    position:relative;
    padding:110px 20px;
    overflow:hidden;
    background:#f6f8fc;

}


/* Luces ambientales */

.sobre-nosotros::before{

    content:"";
    position:absolute;

    width:600px;
    height:600px;

    left:-250px;
    top:-200px;

    background:#3b82f6;

    opacity:.16;

    filter:blur(150px);

    animation:luz1 12s infinite alternate;

}


.sobre-nosotros::after{

    content:"";
    position:absolute;

    width:550px;
    height:550px;

    right:-250px;
    bottom:-200px;

    background:#8b5cf6;

    opacity:.15;

    filter:blur(150px);

    animation:luz2 14s infinite alternate;

}



@keyframes luz1{

from{
transform:translate(0,0);
}

to{
transform:translate(90px,70px);
}

}


@keyframes luz2{

from{
transform:translate(0,0);
}

to{
transform:translate(-90px,-80px);
}

}



/* ==========================================
   CONTENEDOR
========================================== */


.sobre-nosotros .container{

    position:relative;
    z-index:2;

    max-width:1300px;
    margin:auto;

}



/* ==========================================
   CONTENIDO PRINCIPAL
========================================== */


.contenido{

    display:grid;

    grid-template-columns:1fr;

    gap:70px;

    align-items:center;

}



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


.imagen{

    display:flex;

    justify-content:center;

}



.imagen-marco{

    position:relative;

    width:100%;

    max-width:560px;

    padding:18px;

    border-radius:40px;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.85),
        rgba(255,255,255,.35)
    );


    backdrop-filter:blur(25px);

    border:

    1px solid rgba(255,255,255,.7);


    box-shadow:

    0 35px 90px rgba(15,23,42,.15);


    transform-style:preserve-3d;

    transition:.6s cubic-bezier(.22,1,.36,1);

}



.imagen-marco:hover{

    transform:

    translateY(-12px)
    rotateX(4deg)
    rotateY(-4deg);

    box-shadow:

    0 45px 100px rgba(15,23,42,.22);

}



.imagen-marco img{

    width:100%;

    height:520px;

    object-fit:cover;

    border-radius:30px;

    display:block;

}



/* reflejo cristal */


.imagen-marco::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;


    background:

    linear-gradient(

    110deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );


    transform:skewX(-25deg);

    transition:1s;

}



.imagen-marco:hover::after{

    left:150%;

}



/* ==========================================
   CIRCULOS DECORATIVOS
========================================== */


.circulo{

    position:absolute;

    border-radius:50%;

    z-index:-1;

}



.circulo1{

    width:150px;
    height:150px;

    background:

    linear-gradient(
    135deg,
    #06b6d4,
    #3b82f6
    );

    right:-50px;
    top:-50px;

    filter:blur(1px);

    opacity:.75;

    animation:flotar1 6s infinite alternate;

}



.circulo2{

    width:120px;
    height:120px;

    background:

    linear-gradient(
    135deg,
    #8b5cf6,
    #ec4899
    );

    left:-45px;
    bottom:-40px;

    opacity:.7;

    animation:flotar2 7s infinite alternate;

}



@keyframes flotar1{

from{
transform:translateY(0);
}

to{
transform:translateY(30px);
}

}



@keyframes flotar2{

from{
transform:translate(0);
}

to{
transform:translate(20px,-25px);
}

}




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


.texto{

    max-width:600px;

}



.subtitulo{

    display:inline-flex;

    padding:10px 20px;

    border-radius:999px;


    background:

    rgba(255,255,255,.75);


    backdrop-filter:blur(15px);


    color:#2563eb;

    font-weight:700;


    border:

    1px solid rgba(255,255,255,.8);


    box-shadow:

    0 10px 30px rgba(0,0,0,.06);


    margin-bottom:25px;

}



.titulo{

    font-size:clamp(2.2rem,4vw,4rem);

    line-height:1.12;

    font-weight:850;

    letter-spacing:-1px;

    margin-bottom:25px;

}



.texto-animado{

    background:

    linear-gradient(

    90deg,

    #2563eb,
    #06b6d4,
    #7c3aed,
    #14b8a6,
    #2563eb

    );


    background-size:300%;


    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:gradiente 8s linear infinite;

}



@keyframes gradiente{

from{

background-position:0%;

}

to{

background-position:300%;

}

}



.descripcion{

    color:#64748b;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:18px;

}



/* ==========================================
   ESTADISTICAS GLASS
========================================== */


.estadisticas{

    display:grid;

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

    gap:18px;

    margin:35px 0;

}



.dato{


    padding:22px 15px;


    text-align:center;


    border-radius:24px;


    background:

    rgba(255,255,255,.55);


    backdrop-filter:blur(18px);


    border:

    1px solid rgba(255,255,255,.7);


    box-shadow:

    0 15px 40px rgba(15,23,42,.08);


    transition:.4s;


}



.dato:hover{

    transform:translateY(-8px);

    background:

    rgba(255,255,255,.85);


}



.numero{

    display:block;

    font-size:2.3rem;

    font-weight:850;


    background:

    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );


    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

}



.texto-dato{

    display:block;

    color:#64748b;

    font-size:.9rem;

    margin-top:8px;

}



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


.boton{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:16px 34px;


    border-radius:999px;


    color:rgb(12, 12, 12);

    font-weight:700;

    text-decoration:none;


    background:

    linear-gradient(
    135deg,
    #f9d403,
    #06b6d4
    );


    box-shadow:

    0 20px 40px rgba(37,99,235,.3);


    position:relative;

    overflow:hidden;


    transition:.45s;

}



.boton:hover{

    transform:translateY(-5px);

    box-shadow:

    0 30px 60px rgba(37,99,235,.45);

}



.boton::before{

    content:"";

    position:absolute;

    inset:0;

    left:-120%;


    background:

    linear-gradient(
    110deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );


    transition:1s;

}



.boton:hover::before{

    left:120%;

}



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


@media(min-width:900px){


.contenido{

    grid-template-columns:1fr 1fr;

}


.imagen{

    order:0;

}


.texto{

    order:1;

}


}



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


@media(max-width:600px){


.sobre-nosotros{

padding:80px 18px;

}



.imagen-marco img{

height:380px;

}



.estadisticas{

grid-template-columns:1fr;

}



.titulo{

font-size:2.1rem;

}



.descripcion{

font-size:.98rem;

}


}


















/* ==========================================
   CONTACTO - CRYSTAL GLASS PREMIUM
========================================== */


.contacto{

    position:relative;

    padding:110px 20px;

    overflow:hidden;

    background:#f6f8fc;

}



/* Luces ambientales */


.contacto::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;


    top:-250px;

    left:-200px;


    background:#06b6d4;

    opacity:.14;

    filter:blur(150px);


    animation:contactoLuz1 12s infinite alternate;

}



.contacto::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;


    right:-250px;

    bottom:-250px;


    background:#2a039f;

    opacity:.13;

    filter:blur(150px);


    animation:contactoLuz2 14s infinite alternate;

}




@keyframes contactoLuz1{


from{

transform:translate(0);

}


to{

transform:translate(100px,80px);

}


}



@keyframes contactoLuz2{


from{

transform:translate(0);

}


to{

transform:translate(-100px,-70px);

}


}



/* ==========================================
   CONTENEDOR
========================================== */


.contacto .container{

    position:relative;

    z-index:2;

    max-width:1300px;

    margin:auto;

}



/* ==========================================
   CABECERA
========================================== */


.contacto-cabecera{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}



.contacto-cabecera .subtitulo{


    display:inline-flex;

    padding:10px 20px;

    border-radius:999px;


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

    backdrop-filter:blur(20px);


    color:#2563eb;

    font-weight:700;


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


    box-shadow:

    0 10px 30px rgba(0,0,0,.06);


    margin-bottom:20px;


}




.contacto-cabecera .titulo{

    font-size:clamp(2.2rem,4vw,4rem);

    font-weight:850;

    line-height:1.15;

    letter-spacing:-1px;

    margin-bottom:25px;

}



.contacto-cabecera .descripcion{

    color:#64748b;

    font-size:1.05rem;

    line-height:1.8;

}



/* ==========================================
   CONTENIDO PRINCIPAL
========================================== */


.contacto-contenido{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

    align-items:start;

}




/* ==========================================
   TARJETAS INFORMACIÓN
========================================== */


.contacto-info{

    display:grid;

    gap:20px;

}



.info-card{


    padding:30px;


    border-radius:30px;


    background:

    rgba(255,255,255,.55);


    backdrop-filter:blur(25px);


    border:

    1px solid rgba(255,255,255,.75);



    box-shadow:

    0 20px 50px rgba(15,23,42,.08);


    transition:.45s cubic-bezier(.22,1,.36,1);


    position:relative;

    overflow:hidden;


}




.info-card::before{


    content:"";


    position:absolute;

    inset:0;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );


    transform:translateX(-120%);


    transition:1s;


}




.info-card:hover::before{


    transform:translateX(120%);


}



.info-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 35px 70px rgba(15,23,42,.14);


}




.info-card .icono{


    width:70px;

    height:70px;


    border-radius:22px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(

    135deg,

    #2563eb,

    #06b6d4

    );


    margin-bottom:20px;


    box-shadow:

    0 15px 35px rgba(37,99,235,.3);


}




.info-card svg{


    width:34px;

    height:34px;


    fill:none;

    stroke:white;

    stroke-width:2;


}



.info-card h3{


    font-size:1.25rem;

    margin-bottom:10px;


}



.info-card p{


    color:#64748b;

    line-height:1.7;


}





/* ==========================================
   FORMULARIO GLASS
========================================== */


.formulario{


    padding:40px;


    border-radius:35px;


    background:


    rgba(255,255,255,.62);



    backdrop-filter:

    blur(30px);



    border:

    1px solid rgba(255,255,255,.8);



    box-shadow:


    0 30px 80px rgba(15,23,42,.12);


}




.campo{


    margin-bottom:22px;


}



.campo label{


    display:block;


    font-weight:650;


    margin-bottom:9px;


    color:#334155;


}



.campo input,
.campo select,
.campo textarea{


    width:100%;


    padding:16px 18px;


    border-radius:18px;


    border:

    1px solid rgba(148,163,184,.25);



    background:


    rgba(255,255,255,.65);



    backdrop-filter:blur(15px);



    color:#1e293b;


    font-size:1rem;


    outline:none;


    transition:.35s;


}



.campo textarea{


    resize:none;


}



.campo input:focus,
.campo select:focus,
.campo textarea:focus{


    border-color:#2563eb;


    background:white;


    box-shadow:


    0 0 0 5px rgba(37,99,235,.12);


}




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


.formulario .boton{


    width:100%;


    border:none;


    cursor:pointer;


    padding:18px 30px;


    border-radius:999px;


    color:white;


    font-size:1rem;

    font-weight:750;



    background:


    linear-gradient(

    135deg,

    #25D366,

    #16a34a

    );



    box-shadow:


    0 20px 45px rgba(22,163,74,.35);


    position:relative;

    overflow:hidden;


    transition:.45s;


}



.formulario .boton:hover{


    transform:translateY(-5px);


    box-shadow:


    0 35px 70px rgba(22,163,74,.45);


}



.formulario .boton::before{


    content:"";


    position:absolute;

    top:0;

    left:-120%;


    width:80%;

    height:100%;



    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );



    transition:1s;


}



.formulario .boton:hover::before{


    left:150%;


}



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


@media(min-width:900px){


.contacto-contenido{


    grid-template-columns:

    .85fr 1.15fr;


}


.contacto-info{


    position:sticky;

    top:30px;


}


}




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


@media(max-width:600px){


.contacto{


    padding:80px 18px;

}



.formulario{


    padding:25px;

}



.info-card{


    padding:25px;

}



.contacto-cabecera .titulo{


    font-size:2.1rem;


}


}



.whatsapp-icon{

    width:24px;
    height:24px;

    margin-right:12px;

    fill:white;

    flex-shrink:0;

}




















/* ==========================================
   FOOTER PREMIUM - CRYSTAL GLASS DARK
========================================== */


.footer{

    position:relative;

    padding:90px 20px 30px;

    overflow:hidden;

    background:

    linear-gradient(
        145deg,
        #020617,
        #0f172a,
        #111827
    );

    color:white;

}



/* ==========================================
   LUCES AMBIENTALES
========================================== */


.footer-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.35;

    pointer-events:none;

}



.footer-glow-1{


    width:500px;

    height:500px;


    background:#2563eb;


    top:-250px;

    left:-200px;


    animation:footerGlow1 12s infinite alternate;

}




.footer-glow-2{


    width:450px;

    height:450px;


    background:#000d9d;


    bottom:-200px;

    right:-150px;


    animation:footerGlow2 15s infinite alternate;

}




@keyframes footerGlow1{


from{

transform:translate(0);

}


to{

transform:translate(100px,80px);

}


}



@keyframes footerGlow2{


from{

transform:translate(0);

}


to{

transform:translate(-100px,-60px);

}


}







/* ==========================================
   CONTENEDOR
========================================== */


.footer .container{

    position:relative;

    z-index:2;

    max-width:1300px;

    margin:auto;

}






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


.footer-contenido{


    display:grid;


    grid-template-columns:

    1.5fr 1fr 1fr 1.2fr;


    gap:45px;


}






/* ==========================================
   COLUMNAS
========================================== */


.footer-col{


    position:relative;


}




.footer-col h3{


    font-size:1.15rem;


    margin-bottom:25px;


    color:white;


    font-weight:700;


    position:relative;


}



.footer-col h3::after{


    content:"";


    position:absolute;


    bottom:-10px;

    left:0;


    width:40px;

    height:3px;


    border-radius:20px;


    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );


}





/* ==========================================
   LOGO
========================================== */


.footer-logo{


    display:flex;

    align-items:center;

    gap:14px;


    text-decoration:none;

    color:white;


    font-size:1.5rem;


    font-weight:800;


    margin-bottom:25px;


}



.logo-icono{


    width:66px;

    height:66px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    box-shadow:

    0 15px 40px rgba(37,99,235,.45);


}



.logo-icono svg{


    width:30px;

    height:30px;


    fill:none;

    stroke:white;

    stroke-width:2;


}




.footer-descripcion{


    max-width:330px;


    color:#94a3b8;


    line-height:1.8;


    margin-bottom:30px;


}






/* ==========================================
   REDES SOCIALES
========================================== */


.footer-social{


    display:flex;


    gap:12px;


}



.footer-social a{


    width:45px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    rgba(255,255,255,.08);


    border:

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


    color:white;


    transition:.4s;


    backdrop-filter:blur(15px);


}



.footer-social svg{


    width:22px;

    height:22px;


    fill:none;

    stroke:white;

    stroke-width:2;


}



.footer-social a:hover{


    transform:

    translateY(-6px);


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    box-shadow:

    0 15px 35px rgba(37,99,235,.35);


}





/* ==========================================
   LISTAS
========================================== */


.footer-col ul{


    list-style:none;


}



.footer-col li{


    margin-bottom:14px;


}



.footer-col li a{


    text-decoration:none;


    color:#94a3b8;


    transition:.35s;


    display:inline-flex;


}



.footer-col li a::before{


    content:"";


    width:0;


    height:2px;


    background:#06b6d4;


    margin-right:0;


    transition:.35s;


    align-self:center;


}



.footer-col li a:hover{


    color:white;


    transform:translateX(8px);


}



.footer-col li a:hover::before{


    width:18px;

    margin-right:8px;


}






/* ==========================================
   INFORMACIÓN CONTACTO
========================================== */


.footer-info{


    display:flex;


    align-items:center;


    gap:12px;


    margin-bottom:18px;


    color:#cbd5e1;


}



.footer-info svg{


    width:22px;


    height:22px;


    fill:none;


    stroke:#06b6d4;


    stroke-width:2;


    flex-shrink:0;


}




.footer-horario{


    margin:25px 0;


    padding:20px;


    border-radius:22px;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid rgba(255,255,255,.1);


    backdrop-filter:blur(20px);


}



.footer-horario strong{


    display:block;


    margin-bottom:8px;


}



.footer-horario p{


    color:#94a3b8;


    line-height:1.7;


}







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


.footer-boton{


    display:flex;


    justify-content:center;


    align-items:center;


    padding:16px 25px;


    border-radius:999px;


    text-decoration:none;


    color:white;


    font-weight:700;


    background:


    linear-gradient(
        135deg,
        #25D366,
        #16a34a
    );


    box-shadow:


    0 20px 45px rgba(22,163,74,.35);


    transition:.45s;


}



.footer-boton:hover{


    transform:translateY(-5px);


    box-shadow:

    0 30px 70px rgba(22,163,74,.45);


}






/* ==========================================
   PARTE INFERIOR
========================================== */


.footer-bottom{


    margin-top:70px;


    padding-top:30px;


    border-top:

    1px solid rgba(255,255,255,.1);


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:20px;


}



.footer-bottom p{


    color:#64748b;


    font-size:.9rem;


}



.footer-legal{


    display:flex;


    gap:25px;


}



.footer-legal a{


    color:#94a3b8;


    text-decoration:none;


    font-size:.9rem;


    transition:.3s;


}



.footer-legal a:hover{


    color:white;


}







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


@media(max-width:1000px){


.footer-contenido{


    grid-template-columns:

    repeat(2,1fr);


}



}





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


@media(max-width:600px){


.footer{


    padding:70px 18px 25px;


}



.footer-contenido{


    grid-template-columns:1fr;


    gap:40px;


}



.footer-bottom{


    flex-direction:column;


    text-align:center;


}



.footer-legal{


    flex-direction:column;


    gap:12px;


}



}

.formulario-destacado:target{
    animation:
    destacarFormulario 1.2s ease;
}

@keyframes destacarFormulario{
0%{
    transform:scale(.96);

    box-shadow:

    0 0 0 rgba(37,99,235,0);

}
50%{

    box-shadow:

    0 0 50px rgba(37,99,235,.45);

}
100%{

    transform:scale(1);

}
}


.footer-logo-img {
    width: 190px;
    height: auto;
    border: 10px;
    display: block;
    object-fit: contain;
}