/*=========================================================
    FAGOSO FTPE | TODO PARA EVENTOS S.A. DE C.V.
    Archivo : style.css
    Version : 1.0
    Desarrollado para el sitio corporativo oficial.
=========================================================*/

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

:root{

    --primary:#00386B;

    --secondary:#A7A8AA;

    --light:#F5F7FA;

    --gray:#6B7280;

    --dark:#1F2937;

    --white:#FFFFFF;

    --border:#E5E7EB;

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

    --radius:18px;

    --transition:.35s ease;

    --container:1280px;

}



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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Open Sans',sans-serif;

    background:#fff;

    color:var(--dark);

    line-height:1.7;

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}



/*=========================================================
TIPOGRAFÍAS
=========================================================*/

h1,h2,h3,h4,h5{

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

    color:var(--primary);

    line-height:1.15;

}

h1{

    font-size:64px;

    font-weight:800;

}

h2{

    font-size:46px;

    font-weight:700;

}

h3{

    font-size:28px;

    font-weight:700;

}

h4{

    font-size:20px;

    font-weight:700;

}

p{

    color:#5B6470;

    font-size:17px;

}



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

.container{

    width:min(92%,var(--container));

    margin:auto;

}



/*=========================================================
SECCIONES
=========================================================*/

.section{

    padding:120px 0;

}

.section-header{

    margin-bottom:70px;

}

.section-header.center{

    text-align:center;

}

.subtitle{

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.line{

    width:90px;

    height:5px;

    margin-top:18px;

    border-radius:50px;

    background:var(--primary);

}

.line.center{

    margin:18px auto 0;

}



/*=========================================================
BOTONES
=========================================================*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:60px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    font-size:15px;

    letter-spacing:.5px;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}



.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border:2px solid #fff;

    border-radius:60px;

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

}



/*=========================================================
UTILIDADES
=========================================================*/

.center{

    text-align:center;

}

.mt-50{

    margin-top:50px;

}

.mb-50{

    margin-bottom:50px;

}

.shadow{

    box-shadow:var(--shadow);

}

.radius{

    border-radius:var(--radius);

}

/*=========================================================
HEADER
BLOQUE 2 / 8
=========================================================*/

.header{

    position:fixed;

    top:25px;

    left:0;

    width:100%;

    z-index:9999;

    transition:.40s ease;

}

.header.scrolled{

    top:0;

}

.header-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:70px;

    padding:14px 35px;

    box-shadow:0 12px 40px rgba(0,0,0,.08);

}



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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:220px;

    transition:.35s ease;

}

.logo:hover img{

    transform:scale(1.03);

}



/*=========================================
MENU
=========================================*/

.menu{

    display:flex;

    align-items:center;

}

.menu ul{

    display:flex;

    align-items:center;

    gap:38px;

}

.menu ul li{

    position:relative;

}

.menu ul li a{

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

    color:var(--dark);

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    transition:.30s ease;

}



/*=========================================
LINEA INFERIOR
=========================================*/

.menu ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:3px;

    background:var(--primary);

    border-radius:20px;

    transition:.35s ease;

}

.menu ul li a:hover{

    color:var(--primary);

}

.menu ul li a:hover::after{

    width:100%;

}

.menu ul li a.active{

    color:var(--primary);

}

.menu ul li a.active::after{

    width:100%;

}



/*=========================================
MENU HAMBURGUESA
=========================================*/

.menu-toggle{

    display:none;

    font-size:34px;

    color:var(--primary);

}



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

.header.scrolled .header-container{

    border-radius:0;

    width:100%;

    padding:12px 55px;

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

}



/*=========================================
EFECTOS
=========================================*/

.menu ul li a:hover{

    transform:translateY(-2px);

}



/*=========================================
ANIMACION HEADER
=========================================*/

.header{

    animation:headerShow .8s ease;

}

@keyframes headerShow{

    from{

        transform:translateY(-80px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:220px;

    transition:.35s ease;

}

.logo:hover img{

    transform:scale(1.03);

}



/*=========================================
MENU
=========================================*/

.menu{

    display:flex;

    align-items:center;

}

.menu ul{

    display:flex;

    align-items:center;

    gap:38px;

}

.menu ul li{

    position:relative;

}

.menu ul li a{

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

    color:var(--dark);

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    transition:.30s ease;

}



/*=========================================
LINEA INFERIOR
=========================================*/

.menu ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:3px;

    background:var(--primary);

    border-radius:20px;

    transition:.35s ease;

}

.menu ul li a:hover{

    color:var(--primary);

}

.menu ul li a:hover::after{

    width:100%;

}

.menu ul li a.active{

    color:var(--primary);

}

.menu ul li a.active::after{

    width:100%;

}



/*=========================================
MENU HAMBURGUESA
=========================================*/

.menu-toggle{

    display:none;

    font-size:34px;

    color:var(--primary);

}



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

.header.scrolled .header-container{

    border-radius:0;

    width:100%;

    padding:12px 55px;

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

}



/*=========================================
EFECTOS
=========================================*/

.menu ul li a:hover{

    transform:translateY(-2px);

}


/*=========================================
ANIMACION HEADER
=========================================*/

.header{

    animation:headerShow .8s ease;

}

@keyframes headerShow{

    from{

        transform:translateY(-80px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

/*=========================================================
HERO
BLOQUE 3 / 8
=========================================================*/

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:url("../img/portada.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}



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

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(0,56,107,.92) 0%,

        rgba(0,56,107,.82) 35%,

        rgba(0,56,107,.45) 65%,

        rgba(0,56,107,.18) 100%

    );

}



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

.hero-grid{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:650px 1fr;

    align-items:center;

    min-height:100vh;

}



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

.hero-left{

    color:#fff;

    padding-top:90px;

}

.hero-left h1{

    color:#fff;

    font-size:72px;

    font-weight:800;

    line-height:1.08;

    margin-bottom:28px;

    text-transform:uppercase;

    animation:fadeUp 1s ease;

}

.hero-left p{

    color:rgba(255,255,255,.92);

    font-size:21px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:45px;

    animation:fadeUp 1.2s ease;

}



/*=========================================
BOTONES
=========================================*/

.hero-buttons{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

    animation:fadeUp 1.4s ease;

}

.hero .btn-primary{

    background:#ffffff;

    color:var(--primary);

}

.hero .btn-primary:hover{

    background:#0d4d87;

    color:#fff;

}

.hero .btn-outline{

    border:2px solid rgba(255,255,255,.95);

    color:#fff;

}

.hero .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}



/*=========================================
EFECTO DE LUZ
=========================================*/

.hero::after{

    content:"";

    position:absolute;

    width:850px;

    height:850px;

    right:-250px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(

        rgba(255,255,255,.18),

        transparent 70%

    );

}



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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.hero-scroll{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    color:#fff;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    animation:scrollMove 2s infinite;

}



.hero-scroll::after{

    content:"";

    display:block;

    width:2px;

    height:38px;

    background:#fff;

    margin:15px auto 0;

}



@keyframes scrollMove{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(-50%,20px);

    }

}

/*=========================================================
TRUST BAR
BLOQUE 4 / 8
=========================================================*/

.trust{

    position:relative;

    margin-top:-85px;

    z-index:100;

}



.trust-grid{

    display:grid;

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

    gap:28px;

}



.trust-card{

    background:#ffffff;

    border-radius:22px;

    padding:38px 30px;

    display:flex;

    align-items:flex-start;

    gap:22px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s ease;

    border:1px solid rgba(0,0,0,.04);

    overflow:hidden;

    position:relative;

}



.trust-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:var(--primary);

}



.trust-card:hover{

    transform:translateY(-12px);

    box-shadow:0 28px 55px rgba(0,56,107,.18);

}



.trust-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:18px;

    background:rgba(0,56,107,.08);

    display:flex;

    align-items:center;

    justify-content:center;

}



.trust-icon img{

    width:38px;

    transition:.35s ease;

}



.trust-card:hover .trust-icon img{

    transform:scale(1.15);

}



.trust-card h3{

    color:var(--primary);

    font-size:38px;

    font-weight:800;

    margin-bottom:8px;

}



.trust-card h4{

    font-size:18px;

    font-weight:700;

    color:var(--dark);

    margin-bottom:10px;

    line-height:1.35;

    text-transform:uppercase;

}



.trust-card p{

    color:#6B7280;

    font-size:15px;

    line-height:1.75;

}



.trust-card:hover h4{

    color:var(--primary);

}



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

.trust-card{

    animation:cardFade .9s ease both;

}



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

    animation-delay:.15s;

}



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

    animation-delay:.30s;

}



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

    animation-delay:.45s;

}



@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
QUIÉNES SOMOS
BLOQUE 5 / 8
=========================================================*/

.about-home{

    background:#ffffff;

    padding:140px 0;

}



.about-wrapper{

    display:grid;

    grid-template-columns:1.05fr 1.1fr .70fr;

    gap:55px;

    align-items:center;

}



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

.about-image{

    position:relative;

}



.about-image img{

    width:100%;

    border-radius:28px;

    overflow:hidden;

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

    transition:.45s ease;

}



.about-image:hover img{

    transform:scale(1.02);

}



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

.about-content h3{

    font-size:42px;

    line-height:1.25;

    margin-bottom:28px;

}



.about-content p{

    font-size:17px;

    margin-bottom:22px;

    color:#667085;

    text-align:justify;

}



.about-content .btn-primary{

    margin-top:20px;

}



/*=========================================
ESTADÍSTICAS
=========================================*/

.about-stats{

    display:flex;

    flex-direction:column;

    gap:25px;

}



.stat-card{

    background:#ffffff;

    border-radius:24px;

    padding:35px 30px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.35s ease;

    border-top:6px solid var(--primary);

}



.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,56,107,.16);

}



.stat-card span{

    display:block;

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

    font-size:54px;

    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;

}



.stat-card h4{

    font-size:18px;

    margin-bottom:12px;

    text-transform:uppercase;

}



.stat-card p{

    font-size:15px;

    color:#6B7280;

    line-height:1.7;

}



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

.about-image{

    animation:leftFade 1s ease;

}



.about-content{

    animation:fadeUp 1.1s ease;

}



.about-stats{

    animation:rightFade 1.2s ease;

}



@keyframes leftFade{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes rightFade{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/*=========================================
DETALLE DECORATIVO
=========================================*/

.about-image::before{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    background:rgba(0,56,107,.08);

    border-radius:50%;

    top:-35px;

    left:-35px;

    z-index:-1;

}



.about-image::after{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    border-radius:20px;

    background:rgba(0,56,107,.12);

    right:-20px;

    bottom:-20px;

    z-index:-1;

}

/*=========================================================
SERVICIOS
BLOQUE 6 / 8
=========================================================*/

.services-home{

    background:#F7F9FC;

    position:relative;

}



.services-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}



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

.service-card{

    background:#ffffff;

    border-radius:25px;

    padding:45px 30px;

    text-align:center;

    box-shadow:0 18px 45px rgba(0,0,0,.07);

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}



.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:var(--primary);

    transform:scaleX(0);

    transition:.35s ease;

}



.service-card:hover::before{

    transform:scaleX(1);

}



.service-card:hover{

    transform:translateY(-14px);

    box-shadow:0 28px 60px rgba(0,56,107,.18);

}



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

.service-card img{

    width:75px;

    height:75px;

    object-fit:contain;

    margin:0 auto 28px;

    transition:.35s ease;

}



.service-card:hover img{

    transform:scale(1.12) rotate(4deg);

}



/*=========================================
TEXTOS
=========================================*/

.service-card h3{

    font-size:22px;

    margin-bottom:18px;

    color:var(--primary);

}



.service-card p{

    font-size:15px;

    line-height:1.8;

    color:#6B7280;

}



/*=========================================
EFECTO FONDO
=========================================*/

.service-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:rgba(0,56,107,.05);

    top:-70px;

    right:-70px;

    transition:.40s ease;

}



.service-card:hover::after{

    transform:scale(1.5);

}



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

.service-card{

    animation:serviceFade .8s ease both;

}



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

    animation-delay:.10s;

}



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

    animation-delay:.20s;

}



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

    animation-delay:.30s;

}



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

    animation-delay:.40s;

}



@keyframes serviceFade{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.services-home .section-header h2{

    max-width:760px;

    margin:auto;

}



.services-home .section-header p{

    max-width:760px;

    margin:25px auto 0;

}



/*=========================================
RESPUESTA VISUAL
=========================================*/

.service-card:hover h3{

    color:#0056A4;

}

/*=========================================================
PORTAFLOOR T-03
BLOQUE 7 / 8
=========================================================*/

.portafloor-home{

    padding:140px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}



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

.portafloor-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}



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

.portafloor-image{

    position:relative;

}



.portafloor-image img{

    width:100%;

    border-radius:28px;

    box-shadow:0 30px 70px rgba(0,0,0,.12);

    transition:.45s ease;

}



.portafloor-image:hover img{

    transform:scale(1.03);

}



/*=========================================
DECORACIÓN
=========================================*/

.portafloor-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(0,56,107,.08);

    border-radius:50%;

    top:-45px;

    left:-45px;

    z-index:-1;

}



.portafloor-image::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:rgba(0,56,107,.10);

    border-radius:24px;

    right:-35px;

    bottom:-35px;

    z-index:-1;

}



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

.portafloor-content span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:15px;

}



.portafloor-content h2{

    margin-bottom:28px;

    font-size:46px;

    line-height:1.2;

}



.portafloor-content p{

    margin-bottom:35px;

    color:#667085;

    font-size:17px;

}



/*=========================================
LISTA
=========================================*/

.portafloor-content ul{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:45px;

}



.portafloor-content li{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:17px;

    color:#4B5563;

}



.portafloor-content li::before{

    content:"✓";

    width:32px;

    height:32px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}



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

.portafloor-content .btn-primary{

    padding:18px 42px;

}



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

.portafloor-image{

    animation:leftFade 1s ease;

}



.portafloor-content{

    animation:rightFade 1.1s ease;

}



/*=========================================
EFECTO HOVER
=========================================*/

.portafloor-content .btn-primary:hover{

    background:#0056A4;

}



/*=========================================
FONDO DECORATIVO
=========================================*/

.portafloor-home::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(

        rgba(0,56,107,.05),

        transparent 70%

    );

    top:-250px;

    right:-250px;

}



.portafloor-home::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(

        rgba(0,56,107,.04),

        transparent 70%

    );

    left:-200px;

    bottom:-200px;

}

/*=========================================================
GALERÍA
BLOQUE 8 / 8
=========================================================*/

.gallery-home{

    background:#F7F9FC;

    padding:140px 0;

}

.gallery-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

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

}

.gallery-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.60s ease;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,0),

        rgba(0,56,107,.88)

    );

    display:flex;

    align-items:flex-end;

    padding:35px;

    opacity:0;

    transition:.40s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay h3{

    color:#fff;

    font-size:28px;

}



/*=========================================================
CLIENTES
=========================================================*/

.clients{

    padding:120px 0;

    background:#fff;

}

.clients-slider{

    margin-top:60px;

    display:grid;

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

    gap:40px;

    align-items:center;

}

.clients-slider img{

    width:100%;

    max-width:140px;

    margin:auto;

    opacity:.60;

    filter:grayscale(100%);

    transition:.35s;

}

.clients-slider img:hover{

    opacity:1;

    filter:none;

    transform:scale(1.08);

}



/*=========================================================
CTA
=========================================================*/

.cta{

    padding:120px 0;

    background:linear-gradient(

        135deg,

        #00386B,

        #0056A4

    );

    text-align:center;

    color:#fff;

}

.cta h2{

    color:#fff;

    font-size:52px;

    margin-bottom:25px;

}

.cta p{

    color:rgba(255,255,255,.92);

    max-width:760px;

    margin:auto;

    margin-bottom:45px;

    font-size:20px;

}

.cta .btn-primary{

    background:#fff;

    color:var(--primary);

}

.cta .btn-primary:hover{

    background:#00386B;

    color:#fff;

    border:2px solid #fff;

}



/*=========================================================
FOOTER
=========================================================*/

.footer{

    background:#061A2F;

    color:#fff;

    padding-top:80px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    padding-bottom:60px;

}

.footer-col img{

    width:220px;

    margin-bottom:30px;

}

.footer-col h3{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;

}

.footer-col p{

    color:#D6DCE3;

    margin-bottom:15px;

}

.footer-col ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-col a{

    color:#D6DCE3;

    transition:.30s;

}

.footer-col a:hover{

    color:#fff;

    padding-left:8px;

}



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

.social{

    display:flex;

    gap:15px;

}

.social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.social a:hover{

    background:#ffffff;

    color:#00386B;

    transform:translateY(-6px);

}



/*=========================================================
COPYRIGHT
=========================================================*/

.footer-copy{

    border-top:1px solid rgba(255,255,255,.10);

    padding:30px;

    text-align:center;

    color:#C6D0D8;

    font-size:15px;

}



/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

}

::-webkit-scrollbar-thumb{

    background:#00386B;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0056A4;

}



/*=========================================================
SELECCIÓN
=========================================================*/

::selection{

    background:#00386B;

    color:#fff;

}

/*=========================================================
=                FIN DEL ARCHIVO                          =
=========================================================*/