/* === STYLE.CSS NO CRÍTICO - Se carga diferido === */
/* Todo lo que está below the fold: secciones, cards, footer, formularios */

.btn-primary:hover{
    background-color:var(--secondary-navy);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md)
}

.btn-secondary:hover{
    background-color:var(--primary-navy);
    color:var(--white);
    transform:translateY(-2px)
}

.btn-link{
    color:var(--primary-navy);
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:var(--transition)
}

.btn-link:hover{color:var(--accent-gold);gap:12px}

.section-title{
    text-align:center;
    margin-bottom:3rem;
    position:relative;
    padding-bottom:1rem
}

.section-title::after{
    content:'';
    position:absolute;
    bottom:0;left:50%;
    transform:translateX(-50%);
    width:80px;height:3px;
    background-color:var(--accent-gold)
}

/* LOGOS */
.client-logos-title{
    color:var(--dark-gray);
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:2rem
}

.logos-grid{align-items:center;padding:0%;margin:0%;width:100%}

.logo-item{font-size:1.5rem;font-weight:600;transition:var(--transition);width:100%;padding:0%}

.logo-item img{
    width:100%;height:auto;
    display:block;
    object-fit:cover;
    filter:none;
    display:flex;
    flex-wrap:wrap
}

.logo-img{
    height:60px;width:auto;
    display:block;
    transition:transform 0.3s ease
}

.logo-img:hover{transform:scale(1.15)}

/* LEMA */
.lema-section{padding:4rem 0;background-color:var(--white)}

.lema-box{
    max-width:900px;
    margin:0 auto;
    text-align:center;
    padding:3rem;
    background-color:#66ade5;
    border-radius:8px;
    box-shadow:var(--shadow-lg)
}

.lema-text{
    font-size:2rem;
    font-weight:600;
    color:var(--primary-navy);
    line-height:1.4;
    font-style:italic
}

/* ESPECIALIDADES */
.especialidades{padding:4rem 0;background-color:var(--white)}

.especialidades-content{
    max-width:800px;
    margin:0 auto;
    text-align:center;
    font-size:1.1rem;
    color:var(--dark-gray)
}

/* SERVICIOS */
.servicios-destacados{padding:5rem 0;background-color:#66ade5}

.servicios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem
}

.servicio-card{
    background-color:var(--white);
    border-radius:8px;
    padding:2rem;
    box-shadow:var(--shadow-md);
    transition:var(--transition)
}

.servicio-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-hover)}

.servicio-icon{
    width:70px;height:70px;
    background-color:var(--accent-gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1.5rem
}

.servicio-icon i{font-size:2rem;color:var(--white)}

.servicio-card h3{margin-bottom:1rem}

.servicio-card p{color:var(--dark-gray);margin-bottom:1.5rem}

.servicio-features{list-style:none;margin-bottom:1.5rem}

.servicio-features li{margin-bottom:.5rem;display:flex;align-items:center;gap:8px}

.servicio-features i{color:var(--accent-gold);font-size:.9rem}

/* METODOLOGÍA */
.metodologia{
    padding:5rem 0;
    background:linear-gradient(135deg,var(--primary-navy) 0%,var(--secondary-navy) 100%);
    color:var(--white)
}

.metodologia .section-title{color:var(--white)}

.metodologia .section-title::after{background-color:var(--accent-gold)}

.metodologia-wrapper{max-width:900px;margin:0 auto}

.metodologia-subtitle{
    text-align:center;
    font-size:1.5rem;
    margin-bottom:2rem;
    color:var(--accent-gold)
}

.metodologia-descripcion{
    text-align:center;
    font-size:1.1rem;
    margin-bottom:3rem;
    opacity:.9
}

.metodologia-pasos{
    display:flex;
    flex-direction:column;
    gap:1rem;
    max-width:600px;
    margin:0 auto
}

.paso-item{display:flex;align-items:center;gap:1rem;font-size:1.1rem}

.paso-item i{color:var(--accent-gold);font-size:.8rem}

/* CASOS ÉXITO */
.casos-exito{padding:5rem 0;background-color:var(--white)}

.casos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem
}

.caso-card{
    text-align:center;
    padding:2rem;
    background-color:#66ade5;
    border-radius:8px;
    transition:var(--transition)
}

.caso-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

.caso-card i{font-size:3rem;color:var(--accent-gold);margin-bottom:1rem}

.caso-card h3{margin-bottom:1rem}

.caso-resultado{margin-bottom:1rem}

.resultado-numero{display:block;font-size:2rem;font-weight:700;color:var(--primary-navy)}

.resultado-tiempo{color:var(--accent-gold);font-weight:500}

/* BLOG */
.blog-insights{padding:5rem 0;background-color:#66ade5}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:2rem
}

.blog-card{
    background-color:var(--white);
    border-radius:8px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:var(--transition)
}

.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}

.blog-image{height:200px;overflow:hidden}

.blog-image img{
    width:100%;height:100%;
    object-fit:cover;
    transition:var(--transition)
}

.blog-card:hover .blog-image img{transform:scale(1.05)}

.blog-content{padding:1.5rem}

.blog-meta{
    display:flex;
    gap:1rem;
    margin-bottom:.5rem;
    font-size:.9rem;
    color:var(--dark-gray)
}

.blog-date{color:var(--accent-gold);font-weight:500}

.blog-card h3{margin-bottom:1rem;font-size:1.25rem}

.blog-card p{color:var(--dark-gray);margin-bottom:1rem}

/* FOOTER */
.footer{
    background-color:var(--primary-navy);
    color:var(--white);
    padding:4rem 0 2rem
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:3rem;
    margin-bottom:3rem
}

.footer-col h4{color:var(--white);margin-bottom:1.5rem;font-size:1.1rem}

.footer-about{margin-bottom:1rem;opacity:.8}

.social-links{display:flex;gap:1rem}

.social-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    background-color:rgb(255 255 255/.1);
    border-radius:50%;
    color:var(--white);
    transition:var(--transition)
}

.social-links a:hover{background-color:var(--accent-gold);transform:translateY(-3px)}

.footer-col ul{list-style:none}

.footer-col ul li{margin-bottom:.75rem}

.footer-col ul a{
    color:rgb(255 255 255/.8);
    text-decoration:none;
    transition:var(--transition)
}

.footer-col ul a:hover{color:var(--accent-gold);padding-left:5px}

.contact-info li{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgb(255 255 255/.8)
}

.contact-info i{color:var(--accent-gold);width:20px}

.contact-info a{color:rgb(255 255 255/.8);text-decoration:none}

.contact-info a:hover{color:var(--accent-gold)}

.footer-lema{
    margin-top:2rem;
    padding-top:1rem;
    border-top:1px solid rgb(255 255 255/.1)
}

.lema{font-style:italic;color:var(--accent-gold);font-size:1rem}

.footer-bottom{
    text-align:center;
    padding-top:2rem;
    border-top:1px solid rgb(255 255 255/.1);
    font-size:.9rem;
    opacity:.7
}

/* SECCIÓN CONTACTO */
.contact-section{padding:80px 0;background-color:var(--white)}

.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px}

.contact-info{padding-right:30px}

.contact-info h2{color:var(--primary-navy);font-size:2rem;margin-bottom:20px}

.contact-description{color:var(--dark-gray);line-height:1.8;margin-bottom:40px;font-size:1.1rem}

.contact-details{margin-bottom:40px}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:25px;
    padding:20px;
    background-color:#66ade5;
    border-radius:8px;
    transition:var(--transition)
}

.contact-item:hover{transform:translateX(10px);box-shadow:var(--shadow-md)}

.contact-icon{
    width:50px;height:50px;
    background:var(--accent-gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0
}

.contact-icon i{font-size:1.3rem;color:var(--white)}

.contact-text h4{color:var(--primary-navy);margin-bottom:5px;font-size:1.1rem}

.contact-text a,.contact-text p{
    color:var(--dark-gray);
    text-decoration:none;
    font-size:1rem;
    line-height:1.5
}

.contact-text a:hover{color:var(--accent-gold)}

.contact-social{margin-top:40px}

.contact-social h4{color:var(--primary-navy);margin-bottom:20px;font-size:1.1rem}

.social-link{
    width:45px;height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    font-size:1.2rem;
    transition:var(--transition)
}

.social-link.linkedin{background:#0077b5}
.social-link.instagram{background:#e4405f}
.social-link.facebook{background:#3b5998}
.social-link.youtube{background:red}
.social-link.tiktok{background:#000}

.social-link:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}

/* FORMULARIO */
.contact-form-wrapper{
    background-color:var(--white);
    border-radius:8px;
    box-shadow:var(--shadow-lg);
    padding:40px
}

.contact-form{width:100%}

.form-group{margin-bottom:25px}

.form-group label{
    display:block;
    margin-bottom:8px;
    color:var(--primary-navy);
    font-weight:500;
    font-size:.95rem
}

.form-group .required{color:var(--accent-gold);margin-left:2px}

.form-group input,.form-group textarea{
    width:100%;
    padding:12px 15px;
    border:2px solid var(--medium-gray);
    border-radius:6px;
    font-family:var(--font-primary);
    font-size:1rem;
    transition:var(--transition);
    background-color:var(--white)
}

.form-group input:focus,.form-group textarea:focus{
    outline:none;
    border-color:var(--accent-gold);
    box-shadow:0 0 0 3px rgb(197 165 114/.1)
}

.form-group input::placeholder,.form-group textarea::placeholder{
    color:#aaa;
    font-size:.95rem
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.checkbox-group{margin:30px 0}

.checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    position:relative;
    padding-left:35px
}

.checkbox-label input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}

.checkmark{
    position:absolute;
    top:0;left:0;
    height:22px;width:22px;
    background-color:var(--white);
    border:2px solid var(--medium-gray);
    border-radius:4px;
    transition:var(--transition)
}

.checkbox-label:hover input~.checkmark{border-color:var(--accent-gold)}

.checkbox-label input:checked~.checkmark{
    background-color:var(--accent-gold);
    border-color:var(--accent-gold)
}

.checkmark:after{content:"";position:absolute;display:none}

.checkbox-label input:checked~.checkmark:after{display:block}

.checkbox-label .checkmark:after{
    left:7px;top:3px;
    width:5px;height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg)
}

.checkbox-label span:last-child{color:var(--dark-gray);font-size:.95rem}

.checkbox-label a{color:var(--accent-gold);text-decoration:none;font-weight:500}

.checkbox-label a:hover{text-decoration:underline}

.btn-submit{
    width:100%;
    padding:16px 30px;
    background:linear-gradient(135deg,var(--primary-navy) 0%,var(--secondary-navy) 100%);
    color:var(--white);
    border:none;
    border-radius:6px;
    font-size:1.1rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:var(--transition);
    position:relative;
    overflow:hidden
}

.btn-submit:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

.btn-submit:active{transform:translateY(0)}

.btn-submit .btn-icon{transition:var(--transition)}

.btn-submit:hover .btn-icon{transform:translateX(5px)}

/* ALERTAS */
.alert{
    position:relative;
    padding:20px 25px;
    border-radius:8px;
    margin:20px auto;
    max-width:1200px;
    display:flex;
    align-items:center;
    gap:15px;
    animation:slideDown 0.5s ease
}

.alert i{font-size:1.5rem}

.alert-success{background-color:#d4edda;color:#155724;border-left:5px solid #28a745}

.alert-danger{background-color:#f8d7da;color:#721c24;border-left:5px solid #dc3545}

@keyframes slideDown{
    from{transform:translateY(-20px);opacity:0}
    to{transform:translateY(0);opacity:1}
}

/* GRACIAS */
.gracias-section{min-height:60vh;display:flex;align-items:center}

.gracias-box{animation:fadeInUp 0.6s ease}

.gracias-buttons{display:flex;justify-content:center;gap:20px}

/* OTROS */
.expansion-card{transition:transform 0.3s ease}

.expansion-card:hover{transform:translateY(-10px)}

.ofertas-secundarias .section-title::after{background-color:var(--accent-gold)}

.perfil-sidebar .info-contacto ul li a:hover{color:var(--accent-gold)}

.seccion-referencias ul li p{margin-bottom:5px}

.map-section{padding:0 0 80px 0}

.map-container{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg)}

/* RESPONSIVE NO CRÍTICO */
@media(max-width:768px){
    .lema-text{font-size:1.5rem}
    .section-title{font-size:2rem}
    .servicios-grid,.casos-grid,.blog-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;text-align:center}
    .social-links{justify-content:center}
    .contact-info li{justify-content:center}
    .contact-section{padding:60px 0}
    .contact-info h2{font-size:1.8rem}
    .form-row{grid-template-columns:1fr;gap:0}
    .contact-form-wrapper{padding:25px}
    .gracias-buttons{flex-direction:column;gap:15px}
    .gracias-buttons .btn{margin-right:0!important}
    .contact-item{padding:15px}
    .contact-icon{width:40px;height:40px}
    .contact-icon i{font-size:1rem}
    .perfil-grid{grid-template-columns:1fr!important}
    .perfil-sidebar{max-width:400px;margin:0 auto}
    .seccion-referencias>div{grid-template-columns:1fr!important;gap:20px}
    table{font-size:.9rem}
    table td{padding:8px!important}
}

@media(max-width:1024px){
    .contact-grid{grid-template-columns:1fr;gap:40px}
    .contact-info{padding-right:0}
}

@media(max-width:480px){
    .logos-grid{grid-template-columns:repeat(2,1fr)}
    .servicio-detalle:nth-child(even){background-color:#66ade5}
    .servicio-detalle .servicio-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
    .contact-info h2{font-size:1.5rem}
    .contact-description{font-size:1rem}
    .btn-submit{padding:14px 20px;font-size:1rem}
}