:root {
    --verde: #00A651;
    --verde2: #36C76A;
    --azul: #005EAA;
    --azuloscuro: #0F2747;
    --gris: #F4F7FA;
    --texto: #2C3E50;
    --blanco: #FFFFFF;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--gris);
    color: var(--texto);
    line-height: 1.7;
    overflow-x: hidden;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 8%;
    background: transparent;
    transition: all .4s ease;
    z-index: 9999;
}

.navbar.scrolled {
    background: rgba(15, 39, 71, .97);
    backdrop-filter: blur(12px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, .20);
    padding: 15px 8%;
}

.navbar.scrolled .logo img {
    height: 60px;
    transition: .4s;
}

.logo img {
    height: 70px;
}

.navbar ul {
    display: flex;
    list-style: none;
    gap: 35px;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.navbar a:hover {
    color: var(--verde2);
}

.btn-nav {
    padding: 12px 25px;
    background: var(--verde);
    border-radius: 50px;
}

.btn-nav:hover {
    background: var(--verde2);
    color: white;
}

/* HERO */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(15, 39, 71, .90), rgba(0, 94, 170, .70));
}

.hero-content {
    position: relative;
    z-index: 5;
    max-width: 1000px;
    text-align: center;
    color: white;
    padding: 20px;
    animation: fadeUp 1.5s ease;
}

.hero h1 {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
}

.hero p {
    font-size: 1.3rem;
    max-width: 800px;
    margin: auto;
}

.hero-buttons {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--verde);
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-weight: 700;
}

.btn-secondary {
    background: transparent;
    border: 2px solid white;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-weight: 700;
}

/* GENERALES */
section {
    padding: 100px 8%;
}

.container {
    max-width: 1400px;
    margin: auto;
}

section h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 50px;
    color: var(--azuloscuro);
}

/* INDICADORES */
.indicadores {
    background: var(--azuloscuro);
    color: white;
}

.indicadores .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: center;
}

.count {
    font-size: 4rem;
    font-weight: 800;
    color: var(--verde2);
}

.counter p {
    font-size: 1.1rem;
}

/* EMPRESA */
.empresa .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.empresa-img img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
}

.empresa-info h3 {
    color: var(--verde);
    margin: 20px 0 10px;
}

/* SERVICIOS */
.servicios {
    background: white;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: .4s;
}

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

.card i {
    font-size: 60px;
    color: var(--verde);
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
}

/* ECONOMIA CIRCULAR */
.circular {
    background: linear-gradient(135deg, var(--azuloscuro), var(--azul));
    color: white;
}

.circular h2 {
    color: white;
}

.flujo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.flujo div {
    background: white;
    color: var(--azuloscuro);
    padding: 20px 30px;
    border-radius: 50px;
    font-weight: 700;
}

/* CERTIFICACIONES */
.certificaciones {
    background: white;
}

.logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    align-items: center;
}

.logos img {
    width: 100%;
    max-width: 180px;
    margin: auto;
    display: block;
    filter: grayscale(100%);
    transition: .3s;
}

.logos img:hover {
    filter: none;
    transform: scale(1.05);
}

/* GALERIA */
.galeria {
    background: #eef4f8;
}

.galeria .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.galeria img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 20px;
    transition: .4s;
}

.galeria img:hover {
    transform: scale(1.03);
}

/* MAPA */
.mapa iframe {
    width: 100%;
    height: 550px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

/* SUSTENTABILIDAD */
.sustentabilidad {
    background: linear-gradient(135deg, #0f2747, #005eaa);
    color: white;
}

.sustentabilidad h2 {
    color: white;
}

.grid-sus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.grid-sus div {
    text-align: center;
    padding: 40px;
    background: rgba(255, 255, 255, .08);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.grid-sus i {
    font-size: 60px;
    margin-bottom: 20px;
    color: var(--verde2);
}

/* CONTACTO */
.contacto {
    background: white;
}

.contacto form {
    max-width: 900px;
    margin: auto;
}

.contacto input,
.contacto textarea,
.contacto select {
    width: 100%;
    padding: 16px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 16px;
}

.contacto button {
    width: 100%;
    padding: 18px;
    background: var(--verde);
    color: white;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: .3s;
}

.contacto button:hover {
    background: var(--verde2);
}

/* FOOTER */
footer {
    background: #081523;
    color: white;
    padding: 70px 8%;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.footer-content h3,
.footer-content h4 {
    margin-bottom: 15px;
    color: var(--verde2);
}

/* RESPONSIVE */
@media(max-width: 991px) {
    .navbar {
        padding: 15px 5%;
    }
    .navbar ul {
        display: none;
    }
    .hero h1 {
        font-size: 3rem;
    }
    .empresa .container {
        grid-template-columns: 1fr;
    }
    section {
        padding: 80px 5%;
    }
}

@media(max-width: 576px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .count {
        font-size: 3rem;
    }
    section h2 {
        font-size: 2rem;
    }
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* WHATSAPP */
.whatsapp-float {
position: fixed;
    width: 65px;
    height: 65px;
    bottom: 30px;       /* Posición en la esquina inferior */
    right: 30px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 35px;
    color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    z-index: 999999;    /* <-- Aumentamos este número para que nada lo tape en móvil */
    transition: .3s;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

#topBtn {
position: fixed;
    bottom: 110px;      /* <-- Lo dejamos más arriba (a 110px) para que no tape a WhatsApp */
    right: 30px;
    width: 55px;
    height: 55px;
    border: none;
    background: #005EAA;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    z-index: 99999;     /* Menor prioridad que WhatsApp */
    box-shadow: 0 5px 20px rgba(0,0,0,.2);
}

/* --- DESTRUCCIÓN FISCAL SECTION --- */
.destruccion-fiscal {
    background: #eef4f8; /* Mismo fondo suave que usas en la galería */
}

.subtitle-seccion {
    text-align: center;
    max-width: 800px;
    margin: -30px auto 50px auto;
    font-size: 1.1rem;
    color: var(--texto);
}

/* Grid de Beneficios (Estilo Dark/Moderno según tus tarjetas) */
.grid-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.beneficio-card {
    background: var(--blanco);
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    transition: 0.3s ease;
    border-left: 5px solid var(--verde);
}

.beneficio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}

.beneficio-card i {
    font-size: 35px;
    color: var(--azul);
    margin-bottom: 15px;
}

.beneficio-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--azuloscuro);
}

/* Diagnóstico e Infraestructura */
.destruccion-detalles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 40px;
    background: var(--blanco);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    margin-bottom: 70px;
}

@media(max-width: 576px) {
    .destruccion-detalles { grid-template-columns: 1fr; padding: 20px; }
}

.detalle-col h3 {
    font-size: 1.6rem;
    color: var(--azuloscuro);
    margin-bottom: 20px;
    position: relative;
}

.lista-check, .lista-equipos {
    list-style: none;
}

.lista-check li, .lista-equipos li {
    margin-bottom: 15px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lista-check i { color: var(--verde); font-size: 1.2rem; }
.lista-equipos i { color: var(--azul); }

/* Timeline / Proceso paso a paso */
.timeline-container h3 {
    font-size: 1.8rem;
    color: var(--azuloscuro);
    text-align: center;
    margin-bottom: 40px;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 30px;
    border-left: 3px solid var(--azul);
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-number {
    position: absolute;
    left: -53px;
    top: 0;
    width: 42px;
    height: 42px;
    background: var(--verde);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    border: 3px solid #eef4f8;
}

.timeline-content {
    background: var(--blanco);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,.04);
}

.timeline-content h4 {
    color: var(--azuloscuro);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.alerta-fiscal {
    background: #fff3cd;
    border-left: 5px solid #ffc107;
    color: #856404;
    padding: 15px 20px;
    border-radius: 8px;
    margin: -20px auto 40px auto;
    max-width: 800px;
    font-size: 0.95rem;
}
.alerta-fiscal i {
    margin-right: 5px;
}

/* --- SECCIÓN VALORES OPTIMIZADA --- */
/*====================================================
                VALORES PREMIUM MASAFRA
====================================================*/
/*====================================================
                VALORES PREMIUM MASAFRA
====================================================*/

.valores{

position:relative;

padding:120px 8%;

background:
linear-gradient(
135deg,
#0f2747 0%,
#005eaa 45%,
#00A651 100%
);

overflow:hidden;

}

.valores::before{

content:'';

position:absolute;

width:500px;
height:500px;

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

border-radius:50%;

top:-150px;
right:-150px;

filter:blur(80px);

}

.valores::after{

content:'';

position:absolute;

width:450px;
height:450px;

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

border-radius:50%;

bottom:-180px;
left:-180px;

filter:blur(90px);

}

.valores h2{

color:#fff;

font-size:3rem;

margin-bottom:15px;

position:relative;

z-index:2;

}

.valores .container{

position:relative;

z-index:2;

}

.grid-valores{

display:grid;

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

gap:30px;

margin-top:60px;

}

.card-valor{

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

backdrop-filter:blur(18px);

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

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

border-radius:25px;

padding:35px;

position:relative;

overflow:hidden;

transition:.45s;

box-shadow:

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

}

.card-valor::before{

content:'';

position:absolute;

top:-50%;

left:-50%;

width:200%;

height:200%;

background:

linear-gradient(

45deg,

transparent,

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

transparent

);

transform:rotate(35deg);

transition:.8s;

}

.card-valor:hover::before{

left:120%;

}

.card-valor:hover{

transform:

translateY(-12px)

scale(1.03);

box-shadow:

0 25px 45px rgba(0,0,0,.30);

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

}

.valor-header{

display:flex;

align-items:center;

gap:18px;

margin-bottom:20px;

}

.valor-header i{

width:70px;

height:70px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:28px;

color:#fff;

background:

linear-gradient(
135deg,
#00A651,
#36C76A
);

box-shadow:

0 10px 25px rgba(0,166,81,.45);

}

.valor-header h3{

color:#fff;

font-size:1.35rem;

font-weight:700;

}

.card-valor p{

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

font-size:15px;

line-height:1.8;

}

.card-valor:hover .valor-header i{

transform:rotate(360deg);

transition:.8s;

}

@media(max-width:768px){

.valores{

padding:80px 5%;

}

.grid-valores{

grid-template-columns:1fr;

}

}