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

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

:root{

    --verde:#22C55E;
    --verde-hover:#16A34A;

    --azul:#0B5ED7;
    --azul-oscuro:#081A45;

    --gris:#6B7280;
    --gris-claro:#F8FAFC;

    --blanco:#FFFFFF;

}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:var(--gris-claro);
    color:#1f2937;

}

h1,h2,h3,h4{

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

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

.container{

    width:90%;
    max-width:1320px;
    margin:auto;

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    background:#ffffff;

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

    transition:.3s;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:130px;

    max-width:1400px;

    margin:auto;

    padding:0 30px;

}

.logo img{

    width:185px;

    display:block;

}

nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    color:#0A2540;

    font-weight:600;

    font-size:17px;

    transition:.5s;

}

nav a:hover{

    color:var(--verde);

}

.btn-header{

    background:#22C55E;

    color:white;

    padding:16px 38px;

    border-radius:60px;

    font-weight:700;

    font-size:16px;

    transition:.35s;

    box-shadow:0 15px 30px rgba(34,197,94,.25);

}

.btn-header:hover{

    background:var(--verde-hover);

}

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

.hero{

    min-height:115vh;

    background:
linear-gradient(
    rgba(10,37,64,.78),
    rgba(10,37,64,.78)
),
url("../imagenes/fondos/hero-bg.png");

background-size: cover;
background-position: center;
background-repeat: no-repeat;

    display:flex;

    align-items:center;

    padding-top:170px;

    padding-bottom:60px;

}
.hero .container,
.hero-grid{

position:relative;

z-index:2;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

}

.etiqueta{

    display:inline-block;

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

    color:white;

    padding:12px 22px;

    border-radius:40px;

    margin-bottom:25px;

    font-weight:600;

}

.hero h1{

    color:white;

    font-size:clamp(42px, 6vw, 64px);

    line-height:1.1;

    margin-bottom:30px;

}

.hero p{

    color:#d9d9d9;

    font-size:22px;

    margin-bottom:40px;

}

.hero-botones{

    display:flex;

    gap:20px;

}

.btn-principal{

    background:var(--verde);

    color:white;

    padding:18px 40px;

    border-radius:50px;

    font-weight:700;

}

.btn-principal:hover{

    background:var(--verde-hover);

}

.btn-secundario{

    border:2px solid white;

    color:white;

    padding:18px 40px;

    border-radius:50px;

}

.btn-secundario:hover{

    background:white;

    color:var(--azul-oscuro);

}

.hero-imagen img{

    width:110%;
    max-width:1000px;

    transition:.5s ease;

    position:relative;
    z-index:5;

    animation:flotar 5s ease-in-out infinite;

}

.hero-imagen{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}
.hero-imagen::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:radial-gradient(
circle,
rgba(34,197,94,.25) 0%,
rgba(34,197,94,.12) 35%,
transparent 75%
);

filter:blur(50px);

z-index:-1;

}
.hero-imagen img:hover{

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

}

@keyframes flotar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0);

}

}

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

.estadisticas{

    display:flex;

    gap:60px;

    margin-top:80px;
margin-bottom:80px;

}

.estadisticas h3{

    color:var(--verde);

    font-size:42px;

}

.estadisticas p{

    color:white;

    margin-top:5px;

}/*======================================
BENEFICIOS
======================================*/

.beneficios{

    padding:120px 0;

    background:#F8FAFC;

}

.beneficios h2{

    text-align:center;

    font-size:48px;

    color:var(--azul-oscuro);

    margin-bottom:70px;

}

.cards{

    display:grid;

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

    gap:30px;

}

.card{

    background:white;

    padding:45px 35px;

    border-radius:25px;

    text-align:center;

    transition:.35s;

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

}

.card:hover{

    transform:translateY(-12px);

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

}

.card i{

    font-size:55px;

    color:var(--verde);

    margin-bottom:25px;

}

.card h3{

    color:var(--azul-oscuro);

    margin-bottom:15px;

    font-size:24px;

}

.card p{

    color:#6B7280;

    line-height:1.7;

}/*=========================================
PLANES
=========================================*/

.planes{

    padding:100px 0;

    background:#f8fafc;

}

.planes-titulo{

    text-align:center;

    margin-bottom:70px;

}

.planes-titulo span{

    color:#22C55E;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.planes-titulo h2{

    font-size:52px;

    color:#081A45;

    margin:15px 0;

}

.planes-titulo p{

    color:#6B7280;

    font-size:20px;

}

.planes-grid{

    display:grid;

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

    gap:35px;

}

.plan-card{

    background:#ffffff;

    border-radius:25px;

    padding:40px;

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

    transition:.35s;

    position:relative;

}

.plan-card:hover{

    transform:translateY(-12px);

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

}

.plan-header{

    text-align:center;

    margin-bottom:35px;

}

.plan-header h3{

    color:#081A45;

    font-size:28px;

    margin-bottom:15px;

}

.precio{

    font-size:58px;

    color:#22C55E;

    font-weight:800;

    line-height:1;

}

.precio span{

    font-size:28px;

    vertical-align:top;

}

.plan-header small{

    color:#6B7280;

}

.plan-card ul{

    list-style:none;

    margin:35px 0;

    padding:0;

}

.plan-card li{

    padding:15px 0;

    border-bottom:1px solid #ececec;

    color:#4B5563;

}

.plan-card li:last-child{

    border:none;

}

.btn-plan{

    display:block;

    text-align:center;

    background:#22C55E;

    color:white;

    padding:18px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.btn-plan:hover{

    background:#16A34A;

}

.recomendado{

    border:3px solid #22C55E;

    transform:scale(1.04);

}

.recomendado:hover{

    transform:scale(1.04) translateY(-12px);

}

.recomendado .plan-header{

    color:white;

}

.recomendado .precio{

    color:#22C55E;

}

.recomendado .btn-plan{

    background:#081A45;

}

.recomendado .btn-plan:hover{

    background:#0B5ED7;

}

.recomendado .recomendado{

    position:absolute;

    top:-15px;

    left:50%;

    transform:translateX(-50%);

    background:#22C55E;

    color:white;

    padding:8px 20px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

}

@media(max-width:992px){

    .planes-grid{

        grid-template-columns:1fr;

    }

    .recomendado{

        transform:none;

    }

}/*======================
COBERTURA
======================*/

.cobertura{
padding:100px 0;
background:#fff;
}

.cobertura-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.cobertura-texto span{
color:#22c55e;
font-weight:700;
letter-spacing:2px;
font-size:14px;
}

.cobertura-texto h2{
font-size:50px;
color:#0f2454;
margin:15px 0;
}

.cobertura-texto p{
font-size:18px;
color:#5f6675;
line-height:1.7;
margin-bottom:30px;
}

.buscar-cobertura{
display:flex;
gap:15px;
margin-bottom:25px;
}

.buscar-cobertura input{

flex:1;

height:60px;

padding:0 20px;

border:2px solid #E5E7EB;

border-radius:18px;

font-size:17px;

transition:.3s;

}.buscar-cobertura input:focus{

outline:none;

border-color:#22c55e;

box-shadow:0 0 18px rgba(34,197,94,.25);

}

.buscar-cobertura a{

min-width:260px;

display:flex;

align-items:center;

justify-content:center;

padding:16px 30px;

background:#22c55e;

color:#fff;

text-decoration:none;

border-radius:18px;

font-weight:600;

transition:.3s;

}.buscar-cobertura a:hover{

background:#16a34a;

transform:translateY(-3px);

}

.municipios{
display:flex;
flex-wrap:wrap;
gap:15px;
margin-top:20px;
}

.municipios span{
background:#eef8f1;
padding:10px 18px;
border-radius:30px;
color:#22c55e;
font-weight:600;
}

.cobertura-img img{
width:100%;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.15);
}
/*=========================
CONFIANZA
=========================*/

.confianza{

padding:100px 0;

background:#f8fafc;

}

.confianza .titulo-seccion{

text-align:center;

margin-bottom:60px;

}

.confianza .titulo-seccion span{

color:#22c55e;

font-weight:700;

letter-spacing:2px;

font-size:14px;

}

.confianza .titulo-seccion h2{

font-size:48px;

color:#0f2454;

margin:15px 0;

}

.confianza .titulo-seccion p{

max-width:750px;

margin:auto;

font-size:18px;

color:#6b7280;

line-height:1.8;

}

.confianza-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.confianza-card{

background:#fff;

padding:40px 30px;

border-radius:20px;

text-align:center;

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

transition:.35s;

}

.confianza-card:hover{

transform:translateY(-10px);

}

.confianza-card i{

font-size:42px;

color:#22c55e;

margin-bottom:20px;

}

.confianza-card h3{

color:#0f2454;

margin-bottom:15px;

}

.confianza-card p{

color:#6b7280;

line-height:1.7;

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

.footer{

background:#0f2454;

color:#fff;

padding:80px 0 0;

}

.footer-grid{

display:grid;

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

gap:50px;

}

.footer-logo{

width:180px;

margin-bottom:25px;

}

.footer p{

color:#cfd8e3;

line-height:1.8;

}

.footer h3{

margin-bottom:25px;

font-size:22px;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:14px;

}

.footer a{

color:#cfd8e3;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:#22c55e;

}

.redes{

display:flex;

gap:15px;

margin-top:30px;

}

.redes a{

width:45px;

height:45px;

border-radius:50%;

background:#1c356f;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

}

.redes a:hover{

background:#22c55e;

color:#fff;

}

.footer-copy{

margin-top:60px;

padding:25px;

text-align:center;

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

font-size:15px;

color:#cfd8e3;

}
/*======================================
RESPONSIVE - TABLET Y CELULAR
======================================*/

.menu-toggle{

display:none;

width:42px;

height:42px;

cursor:pointer;

flex-direction:column;

justify-content:center;

gap:7px;

}

.menu-toggle span{

width:100%;

height:5px;

background:#0A2540;

border-radius:10px;

transition:.35s;

}
.menu-toggle.active span:nth-child(1){

transform:translateY(10px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:translateY(-10px) rotate(-45deg);

}

@media(max-width:991px){

header .container{

height:105px;

padding:0 20px;

}

.hero{

    min-height:auto;

    padding:130px 0 70px;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.logo img{

width:160px;

}

.menu-toggle{

display:flex;

}

nav{

    position:fixed;

    top:105px;

    left:0;

    right:0;

    width:100%;

    background:#ffffff;

    z-index:999;

    display:none;

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

}

nav.active{

display:block;

}

nav ul{

flex-direction:column;

gap:0;

padding:20px 0;

}

nav ul li{

width:100%;

}

nav ul li a{

display:block;

padding:18px 30px;

border-bottom:1px solid #eee;

}

.btn-header{

display:none;

}
html,
body{
    overflow-x:hidden;
}

.hero,
.hero-grid,
.hero-imagen,
.hero-imagen img{
    max-width:100%;
}
.hero h1{
    font-size:50px;
    line-height:1.1;
}

.hero p{
    font-size:18px;
    line-height:1.5;
}

.hero-botones{
    flex-direction:column;
    align-items:center;
    gap:18px;
}

.hero-botones a{
    width:100%;
    max-width:320px;
    text-align:center;
}

.estadisticas{
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
}
}

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

.nosotros-hero {
    background: linear-gradient(
        rgba(8, 26, 69, 0.92),
        rgba(11, 94, 215, 0.82)
    );

    padding: 180px 0 100px;
    color: white;
    text-align: center;
}

.nosotros-hero .container {
    max-width: 900px;
    margin: auto;
}

.nosotros-hero h1 {
    color: white;
    font-size: 64px;
    line-height: 1.1;
    margin: 25px 0;
}

.nosotros-hero p {
    color: #e5e7eb;
    font-size: 21px;
    line-height: 1.6;
    max-width: 750px;
    margin: auto;
}


/* ========================================
   QUIENES SOMOS
======================================== */

.quienes-somos {
    padding: 100px 0;
    background: #ffffff;
}

.quienes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}
.quienes-grid img{
    width:100%;
    max-width:600px;
    display:block;
    border-radius:24px;

    box-shadow:
        0 25px 60px rgba(8,26,69,.20),
        0 8px 20px rgba(0,0,0,.08);

    transition:.4s ease;
}

.quienes-grid img:hover{
    transform:translateY(-15px);
    box-shadow:
        0 35px 75px rgba(8,26,69,.25),
        0 12px 25px rgba(0,0,0,.10);
}

.quienes-texto h2 {
    font-size: 46px;
    color: var(--azul-oscuro);
    margin: 20px 0;
}

.quienes-texto p {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 18px;
}

.seccion-etiqueta {
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 1px;
}


/* ========================================
   MISION Y VISION
======================================== */

.mision-vision {
    padding: 100px 0;
    background: #f5f8fb;
}

.mision-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

.info-card {
    background: white;
    padding: 45px;
    border-radius: 20px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.08);

    border-top: 4px solid var(--verde);
}

.numero-card {
    color: var(--verde);
    font-size: 18px;
    font-weight: 700;
}

.info-card h2 {
    color: var(--azul-oscuro);
    font-size: 32px;
    margin: 15px 0;
}

.info-card p {
    color: #555;
    font-size: 17px;
    line-height: 1.7;
}


/* ========================================
   DISEÑO PROFESIONAL - NUESTROS VALORES
======================================== */

.valores{
    padding:110px 0;
    background:#f5f8fb;
}

.valores .container{
    max-width:1200px;
    margin:0 auto;
}

.titulo-seccion{
    text-align:center;
    margin-bottom:55px;
}

.titulo-seccion .seccion-etiqueta{
    display:block;
    color:var(--verde);
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:10px;
}

.titulo-seccion h2{
    color:var(--azul-oscuro);
    font-size:44px;
    margin:0 0 15px;
}

.titulo-seccion p{
    color:#667085;
    font-size:17px;
    line-height:1.6;
    max-width:700px;
    margin:0 auto;
}


/* TARJETAS */

.valores-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.valor-card{
    position:relative;

    background:#ffffff;

    padding:38px 30px;

    min-height:190px;

    border-radius:20px;

    border:1px solid #e5eaf0;

    border-top:4px solid var(--verde);

    box-shadow:0 15px 40px rgba(8,26,69,.08);

    overflow:hidden;

    transition:all .35s ease;
}


/* CÍRCULO DECORATIVO */

.valor-card::before{
    content:"";

    position:absolute;

    width:100px;
    height:100px;

    right:-40px;
    bottom:-40px;

    background:rgba(29,207,91,.08);

    border-radius:50%;

    transition:.35s ease;
}


/* ICONO */

.valor-card::after{
    display:flex;

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

    width:48px;
    height:48px;

    margin-bottom:20px;

    background:#e9f9ef;

    border-radius:14px;

    color:var(--verde);

    font-size:24px;

    font-weight:bold;

    position:relative;

    z-index:2;
}


/* ICONOS */

.valor-card:nth-child(1)::after{
    content:"✓";
}

.valor-card:nth-child(2)::after{
    content:"◆";
}

.valor-card:nth-child(3)::after{
    content:"✦";
}

.valor-card:nth-child(4)::after{
    content:"♥";
}


/* TÍTULOS */

.valor-card h3{
    position:relative;
    z-index:2;

    color:var(--azul-oscuro);

    font-size:23px;

    margin:0 0 12px;
}


/* DESCRIPCIÓN */

.valor-card p{
    position:relative;
    z-index:2;

    color:#667085;

    font-size:16px;

    line-height:1.6;

    margin:0;
}


/* EFECTO AL PASAR EL MOUSE */

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

    border-color:rgba(29,207,91,.4);

    box-shadow:0 25px 55px rgba(8,26,69,.15);
}

.valor-card:hover::before{
    transform:scale(1.5);
}
/* ========================================
   TECNOLOGIA
======================================== */

.tecnologia {
    padding: 100px 0;

    background: linear-gradient(
        135deg,
        #081a45,
        #0b5ed7
    );

    color:  white;
}

.tecnologia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.tecnologia h2 {
    color: white;
    font-size: 44px;
    margin: 20px 0;
}

.tecnologia p {
    color: #e5e7eb;
    font-size: 18px;
    line-height: 1.7;
}

.tecnologia-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tecnologia-items div {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 25px;
    border-radius: 15px;
}

.tecnologia-items strong {
    display: block;
    color: var(--verde);
    font-size: 24px;
    margin-bottom: 5px;
}

.tecnologia-items span {
    color: white;
}


/* ========================================
   CIERRE - CONECTAMOS EL FUTURO
======================================== */

.nosotros-final{
    position:relative;

    padding:110px 20px;

    text-align:center;

    background:#ffffff;

    overflow:hidden;
}

/* BARRA SUPERIOR */

.nosotros-final{
    border-top:6px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            #081a45,
            #0b5ed7
        ) 1;
}


/* CONTENIDO */

.nosotros-final .container{
    position:relative;
    z-index:5;
}


/* ETIQUETA */

.nosotros-final .seccion-etiqueta{
    display:block;

    color:var(--verde);

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:12px;
}


/* TITULO */

.nosotros-final h2{
    color:var(--azul-oscuro);

    font-size:48px;

    margin:0 0 15px;
}


/* LINEA VERDE */

.nosotros-final h2::after{
    content:"";

    display:block;

    width:60px;

    height:4px;

    background:var(--verde);

    border-radius:10px;

    margin:20px auto;
}


/* TEXTO */

.nosotros-final p{
    color:#667085;

    font-size:20px;

    line-height:1.6;

    max-width:700px;

    margin:0 auto 30px;
}


/* BOTON */

.nosotros-final a{
    display:inline-block;

    padding:15px 32px;

    background:var(--verde);

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    border-radius:30px;

    transition:.3s ease;

    box-shadow:
        0 10px 30px rgba(29,207,91,.20);
}

.nosotros-final a:hover{
    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(29,207,91,.30);
}


/* ========================================
   RED TECNOLÓGICA
======================================== */

.nosotros-final::before{
    content:"";

    position:absolute;

    left:-20px;
    bottom:-20px;

    width:430px;
    height:300px;

    opacity:.65;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 300'%3E%3Cg fill='none' stroke='%23081a45' stroke-opacity='.10' stroke-width='1.5'%3E%3Cpath d='M20 210 L90 150 L160 210 L235 125 L315 175 L390 90'/%3E%3Cpath d='M90 150 L125 55 L235 125 L270 235 L315 175'/%3E%3Cpath d='M20 210 L65 275 L160 210 L270 235'/%3E%3Cpath d='M125 55 L235 125'/%3E%3C/g%3E%3Cg fill='%231dcf5b'%3E%3Ccircle cx='20' cy='210' r='5'/%3E%3Ccircle cx='90' cy='150' r='5'/%3E%3Ccircle cx='125' cy='55' r='4'/%3E%3Ccircle cx='160' cy='210' r='6'/%3E%3Ccircle cx='235' cy='125' r='5'/%3E%3Ccircle cx='270' cy='235' r='4'/%3E%3Ccircle cx='315' cy='175' r='5'/%3E%3Ccircle cx='390' cy='90' r='4'/%3E%3Ccircle cx='65' cy='275' r='3'/%3E%3C/g%3E%3Cg fill='%231dcf5b' fill-opacity='.10'%3E%3Ccircle cx='20' cy='210' r='13'/%3E%3Ccircle cx='160' cy='210' r='15'/%3E%3Ccircle cx='235' cy='125' r='13'/%3E%3Ccircle cx='315' cy='175' r='13'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-size:100% 100%;

    pointer-events:none;
}


.nosotros-final::after{
    content:"";

    position:absolute;

    right:-20px;
    top:-20px;

    width:430px;
    height:300px;

    opacity:.65;

    transform:scaleX(-1);

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 300'%3E%3Cg fill='none' stroke='%23081a45' stroke-opacity='.10' stroke-width='1.5'%3E%3Cpath d='M20 210 L90 150 L160 210 L235 125 L315 175 L390 90'/%3E%3Cpath d='M90 150 L125 55 L235 125 L270 235 L315 175'/%3E%3Cpath d='M20 210 L65 275 L160 210 L270 235'/%3E%3Cpath d='M125 55 L235 125'/%3E%3C/g%3E%3Cg fill='%231dcf5b'%3E%3Ccircle cx='20' cy='210' r='5'/%3E%3Ccircle cx='90' cy='150' r='5'/%3E%3Ccircle cx='125' cy='55' r='4'/%3E%3Ccircle cx='160' cy='210' r='6'/%3E%3Ccircle cx='235' cy='125' r='5'/%3E%3Ccircle cx='270' cy='235' r='4'/%3E%3Ccircle cx='315' cy='175' r='5'/%3E%3Ccircle cx='390' cy='90' r='4'/%3E%3Ccircle cx='65' cy='275' r='3'/%3E%3C/g%3E%3Cg fill='%231dcf5b' fill-opacity='.10'%3E%3Ccircle cx='20' cy='210' r='13'/%3E%3Ccircle cx='160' cy='210' r='15'/%3E%3Ccircle cx='235' cy='125' r='13'/%3E%3Ccircle cx='315' cy='175' r='13'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-size:100% 100%;

    pointer-events:none;
}


/* BARRA INFERIOR */

.nosotros-final{
    border-bottom:6px solid transparent;

    border-image:
        linear-gradient(
            90deg,
            #081a45,
            #0b5ed7
        ) 1;
}

/* ========================================
   PLANES - DISEÑO
======================================== */

.planes{
    padding:100px 0;
    background:#f5f8fb;
}

.planes .titulo-seccion{
    text-align:center;
    margin-bottom:55px;
}

.planes .titulo-seccion h2{
    color:var(--azul-oscuro);
    font-size:44px;
    margin:15px 0;
}

.planes .titulo-seccion p{
    color:#64748b;
    font-size:18px;
}


/* GRID */

.planes-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    align-items:stretch;
}


/* TARJETAS */

.plan-card{
    position:relative;

    background:#ffffff;

    padding:40px 38px;

    border-radius:22px;

    border:1px solid #e5eaf0;

    box-shadow:0 15px 40px rgba(8,26,69,.08);

    display:flex;
    flex-direction:column;

    transition:.3s ease;
}

.plan-card:hover{
    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(8,26,69,.14);
}


/* PLAN DESTACADO */

.plan-gold{
    border:2px solid var(--verde);

    box-shadow:
        0 20px 50px rgba(29,207,91,.15);
}

.plan-gold::before{
    content:"PLAN DESTACADO";

    position:absolute;

    top:-14px;
    left:50%;

    transform:translateX(-50%);

    background:var(--verde);

    color:white;

    padding:7px 20px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    white-space:nowrap;
}


/* ETIQUETA */

.plan-tipo{
    display:inline-block;

    color:var(--verde);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:15px;
}


/* TITULO */

.plan-card h3{
    color:var(--azul-oscuro);

    font-size:24px;

    margin:0 0 12px;
}


/* VELOCIDAD */

.plan-velocidad{
    color:var(--verde);

    font-size:42px;

    font-weight:800;

    line-height:1;

    margin:12px 0 20px;
}


/* DESCRIPCION */

.plan-card > p{
    color:#64748b;

    font-size:16px;

    line-height:1.6;

    min-height:78px;

    margin-bottom:20px;
}


/* LISTA */

.plan-card ul{
    list-style:none;

    padding:0;

    margin:0 0 25px;
}

.plan-card ul li{
    padding:12px 0;

    border-bottom:1px solid #edf0f3;

    color:#475569;

    font-size:15px;
}

.plan-card ul li i{
    color:var(--verde);

    margin-right:9px;
}


/* PRECIO */

.plan-precio{
    color:var(--azul-oscuro);

    font-size:28px;

    font-weight:800;

    margin-top:auto;

    margin-bottom:18px;
}

.plan-precio span{
    font-size:14px;

    font-weight:400;

    color:#64748b;
}


/* BOTON */

.btn-plan{
    display:block;

    width:100%;

    padding:15px 20px;

    background:var(--verde);

    color:white;

    text-align:center;

    text-decoration:none;

    border-radius:30px;

    font-weight:700;

    transition:.3s ease;
}

.btn-plan:hover{
    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(29,207,91,.25);
}
/* ========================================
   INCLUYE - BENEFICIOS
======================================== */

.incluye{
    padding:100px 0;
    background:#ffffff;
}

.incluye .titulo-seccion{
    text-align:center;
    margin-bottom:55px;
}

.incluye .titulo-seccion h2{
    color:var(--azul-oscuro);
    font-size:44px;
    margin:15px 0;
}

.incluye .titulo-seccion p{
    color:#64748b;
    font-size:18px;
    max-width:700px;
    margin:auto;
    line-height:1.6;
}


.incluye-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}


.incluye-card{
    position:relative;

    background:#f8fafc;

    padding:35px 28px;

    border-radius:20px;

    border:1px solid #e8edf2;

    transition:.3s ease;

    overflow:hidden;
}


.incluye-card::after{
    content:"";

    position:absolute;

    width:80px;
    height:80px;

    right:-30px;
    bottom:-30px;

    background:rgba(29,207,91,.08);

    border-radius:50%;
}


.incluye-card:hover{
    transform:translateY(-7px);

    background:#ffffff;

    box-shadow:0 18px 40px rgba(8,26,69,.10);

    border-color:rgba(29,207,91,.35);
}


.incluye-icono{
    width:52px;
    height:52px;

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

    background:rgba(29,207,91,.12);

    color:var(--verde);

    border-radius:14px;

    font-size:25px;
    font-weight:800;

    margin-bottom:22px;
}


.incluye-card h3{
    color:var(--azul-oscuro);

    font-size:20px;

    margin-bottom:12px;
}


.incluye-card p{
    color:#64748b;

    font-size:15px;

    line-height:1.6;

    margin:0;
}
/* ========================================
   CORRECCIÓN ANCHO TOTAL DE LA PÁGINA
======================================== */

html,
body {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow-x: hidden;
}

header,
main,
section,
footer {
    width: 100% !important;
    max-width: none !important;
}

.planes,
.incluye,
footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* ========================================
   PREGUNTAS FRECUENTES
======================================== */

.faq{
    padding:100px 0;
    background:#f5f8fb;
}

.faq .titulo-seccion{
    text-align:center;
    margin-bottom:50px;
}

.faq .titulo-seccion h2{
    color:var(--azul-oscuro);
    font-size:44px;
    margin:15px 0;
}

.faq .titulo-seccion p{
    color:#64748b;
    font-size:18px;
    max-width:700px;
    margin:auto;
    line-height:1.6;
}

.faq-list{
    max-width:900px;
    margin:auto;
}

.faq-item{
    background:#ffffff;
    border-radius:15px;
    margin-bottom:15px;
    border:1px solid #e5eaf0;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(8,26,69,.04);
}

.faq-pregunta{
    width:100%;
    border:0;
    background:#ffffff;
    padding:22px 25px;

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

    color:var(--azul-oscuro);

    font-size:17px;
    font-weight:700;

    text-align:left;
    cursor:pointer;
}

.faq-pregunta span{
    color:var(--verde);
    font-size:28px;
    font-weight:400;

    transition:.3s ease;
}

.faq-respuesta{
    display:none;
    padding:0 25px 22px;
}

.faq-respuesta p{
    color:#64748b;
    font-size:16px;
    line-height:1.6;
    margin:0;
}

.faq-item.active .faq-respuesta{
    display:block;
}

.faq-item.active .faq-pregunta span{
    transform:rotate(45deg);
}
/* ========================================
   CIERRE COMERCIAL
======================================== */

.cierre-comercial{
    position:relative;
    overflow:hidden;

    padding:100px 20px;

    background:#ffffff;

    text-align:center;
}


.cierre-contenido{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:auto;
}


.cierre-contenido .seccion-etiqueta{
    display:block;

    color:var(--verde);

    font-size:15px;
    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:15px;
}


.cierre-contenido h2{
    color:var(--azul-oscuro);

    font-size:48px;

    margin:0 0 18px;
}


.linea-verde{
    width:60px;
    height:4px;

    background:var(--verde);

    border-radius:10px;

    margin:0 auto 25px;
}


.cierre-contenido p{
    color:#64748b;

    font-size:18px;
    line-height:1.6;

    max-width:650px;

    margin:0 auto 35px;
}


/* BOTONES */

.cierre-botones{
    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
}


.cierre-botones a{
    display:flex;

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

    gap:10px;

    min-width:220px;

    padding:16px 28px;

    border-radius:30px;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:.3s ease;
}


.boton-whatsapp{
    background:var(--verde);
    color:white;

    box-shadow:0 10px 25px rgba(32,201,91,.20);
}


.boton-whatsapp:hover{
    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(32,201,91,.30);
}


.boton-cobertura{
    background:#ffffff;

    color:var(--azul-oscuro);

    border:2px solid #dce4ec;
}


.boton-cobertura:hover{
    transform:translateY(-3px);

    border-color:var(--verde);
}


/* ICONOS */

.icono-boton{
    font-size:20px;

    line-height:1;
}


/* ========================================
   RED DECORATIVA
======================================== */

.red-decorativa{
    position:absolute;

    width:260px;
    height:220px;

    opacity:.45;
}


.red-izquierda{
    left:-60px;
    bottom:-40px;
}


.red-derecha{
    right:-60px;
    top:-40px;
}


.red-decorativa span{
    position:absolute;

    width:9px;
    height:9px;

    background:#22c55e;

    border-radius:50%;

    box-shadow:0 0 0 7px rgba(34,197,94,.08);
}


/* líneas */

.red-decorativa::before,
.red-decorativa::after{
    content:"";

    position:absolute;

    height:1px;

    background:#d9e1e8;

    transform-origin:left center;
}


/* puntos */

.red-decorativa span:nth-child(1){
    left:35px;
    top:150px;
}

.red-decorativa span:nth-child(2){
    left:100px;
    top:90px;
}

.red-decorativa span:nth-child(3){
    left:175px;
    top:125px;
}

.red-decorativa span:nth-child(4){
    left:225px;
    top:45px;
}


/* conexiones */

.red-decorativa span:nth-child(1)::after{
    content:"";

    position:absolute;

    width:80px;
    height:1px;

    background:#d9e1e8;

    transform:rotate(-42deg);

    transform-origin:left;
    
    left:5px;
    top:3px;
}


.red-decorativa span:nth-child(2)::after{
    content:"";

    position:absolute;

    width:85px;
    height:1px;

    background:#d9e1e8;

    transform:rotate(25deg);

    transform-origin:left;

    left:5px;
    top:3px;
}


.red-decorativa span:nth-child(3)::after{
    content:"";

    position:absolute;

    width:70px;
    height:1px;

    background:#d9e1e8;

    transform:rotate(-45deg);

    transform-origin:left;

    left:5px;
    top:3px;
}
/* =====================================================
   PAGINA CONECTIVIDAD
   ===================================================== */

/* HERO CONECTIVIDAD */
.conectividad-hero {
    padding: 180px 20px 70px;
    background: linear-gradient(
        135deg,
        #081a45,
        #0b5ed7
    );
    color: white;
    text-align: center;
}

.conectividad-hero .container {
    max-width: 950px;
    margin: auto;
}

.conectividad-hero .seccion-etiqueta {
    color: #20c866;
    font-weight: 700;
    letter-spacing: 2px;
}

.conectividad-hero h1 {
    color: white;
    font-size: 58px;
    line-height: 1.1;
    margin: 20px 0;
}

.conectividad-hero p {
    color: #e5e7eb;
    font-size: 20px;
    line-height: 1.7;
    max-width: 750px;
    margin: auto;
}


/* =====================================================
   SOLUCIONES
   ===================================================== */

.soluciones {
    padding: 120px 20px 110px;
    background: #f5f8fb;
}

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

.soluciones .titulo-seccion {
    text-align: center;
    margin-bottom: 75px;
}

.soluciones .titulo-seccion h2 {
    color: var(--azul-oscuro);
    font-size: 44px;
    margin: 18px 0 20px;
}

.soluciones .titulo-seccion p {
    color: #60708a;
    font-size: 18px;
}


/* TARJETAS */

.soluciones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.solucion-card {
    position: relative;
    background: white;
    padding: 35px 28px;
    border-radius: 20px;
    border: 1px solid #e1e8f0;
    overflow: hidden;
    transition: 0.3s ease;
}

.solucion-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(8, 26, 69, 0.12);
}

.solucion-icono {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f9f0;
    border-radius: 16px;
    color: var(--verde);
    font-size: 27px;
    margin-bottom: 25px;
}

.solucion-card h3 {
    color: var(--azul-oscuro);
    font-size: 23px;
    margin-bottom: 12px;
}

.solucion-card p {
    color: #60708a;
    line-height: 1.6;
    font-size: 16px;
}


/* =====================================================
   COMO FUNCIONA
   ===================================================== */

.como-funciona {
    padding: 100px 20px;
    background: white;
}

.como-funciona .container {
    max-width: 1200px;
    margin: auto;
}

.como-funciona .titulo-seccion {
    text-align: center;
    margin-bottom: 60px;
}

.como-funciona .titulo-seccion h2 {
    color: var(--azul-oscuro);
    font-size: 44px;
    margin: 15px 0;
}

.como-funciona .titulo-seccion p {
    color: #60708a;
    font-size: 18px;
}


/* PASOS */

.conexion-pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.conexion-paso {
    position: relative;
    padding: 35px 28px;
    background: #f5f8fb;
    border-radius: 20px;
    border: 1px solid #e3eaf1;
}

.conexion-numero {
    color: var(--verde);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.conexion-paso h3 {
    color: var(--azul-oscuro);
    font-size: 23px;
    margin-bottom: 12px;
}

.conexion-paso p {
    color: #60708a;
    line-height: 1.6;
}


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

@media (max-width: 900px) {

    .soluciones-grid,
    .conexion-pasos {
        grid-template-columns: repeat(2, 1fr);
    }

    .conectividad-hero h1 {
        font-size: 46px;
    }

}

@media (max-width: 600px) {

    .soluciones-grid,
    .conexion-pasos {
        grid-template-columns: 1fr;
    }

    .conectividad-hero {
        padding: 90px 20px 75px;
    }

    .conectividad-hero h1 {
        font-size: 38px;
    }

    .soluciones,
    .como-funciona {
        padding: 70px 20px;
    }

}


/* =====================================================
   NUESTRA TECNOLOGÍA - CONECTIVIDAD
   ===================================================== */

.tecnologia-conectividad {
    padding: 100px 20px;
    background: #ffffff;
}

.tecnologia-conectividad .container {
    max-width: 1200px;
    margin: auto;
}

.conectividad-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}


/* TEXTO */

.conectividad-texto {
    max-width: 560px;
}

.conectividad-texto .seccion-etiqueta {
    display: inline-block;
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.conectividad-texto h2 {
    color: var(--azul-oscuro);
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 25px;
}

.conectividad-texto p {
    color: #60708a;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 18px;
}

/* RESPONSIVE */

@media (max-width: 800px) {

    .conectividad-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .conectividad-texto {
        max-width: 100%;
    }

    .conectividad-texto h2 {
        font-size: 36px;
    }

    .tecnologia-imagen img {
        height: 350px;
    }

}/* SEPARACIÓN ENTRE SECCIONES */

.separador-soluciones {
    height: 55px;
    background: #ffffff;
}
/* =====================================================
   COMO FUNCIONA NUESTRA CONEXIÓN
===================================================== */

.como-funciona {
    padding: 100px 20px 120px;
    background: #ffffff;
}

.como-funciona .container {
    max-width: 1200px;
    margin: 0 auto;
}

.como-funciona .titulo-seccion {
    text-align: center;
    margin-bottom: 70px;
}

.como-funciona .titulo-seccion .seccion-etiqueta {
    display: inline-block;
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.como-funciona .titulo-seccion h2 {
    color: var(--azul-oscuro);
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 20px;
}

.como-funciona .titulo-seccion p {
    color: #60708a;
    font-size: 18px;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}


/* =====================================================
   FLUJO DE CONEXIÓN
===================================================== */

.flujo-conexion {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.paso-conexion {
    position: relative;
    background: #f5f8fb;
    border: 1px solid #e1e8f0;
    border-radius: 20px;
    padding: 32px 26px;
    min-height: 210px;
    box-shadow: 0 12px 30px rgba(8, 26, 69, 0.07);
    transition: all 0.3s ease;
}

.paso-conexion:hover {
    transform: translateY(-7px);
    background: #ffffff;
    border-color: rgba(32, 200, 102, 0.45);
    box-shadow: 0 20px 40px rgba(8, 26, 69, 0.12);
}


/* NÚMERO */

.paso-numero {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: #e9f9f0;
    color: var(--verde);

    border-radius: 14px;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;

    margin-bottom: 22px;
}


/* TÍTULO */

.paso-conexion h3 {
    color: var(--azul-oscuro);
    font-size: 21px;
    margin: 0 0 12px;
}


/* TEXTO */

.paso-conexion p {
    color: #60708a;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}


/* =====================================================
   LÍNEAS ENTRE LOS PASOS
===================================================== */

.linea-conexion {
    width: 35px;
    height: 2px;
    background: #dce5ed;
    position: relative;
}

.linea-conexion::after {
    content: "";
    position: absolute;

    width: 7px;
    height: 7px;

    background: var(--verde);
    border-radius: 50%;

    right: -1px;
    top: 50%;

    transform: translateY(-50%);
}


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

@media (max-width: 1000px) {

    .flujo-conexion {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .linea-conexion {
        display: none;
    }

}

@media (max-width: 600px) {

    .como-funciona {
        padding: 70px 20px 90px;
    }

    .como-funciona .titulo-seccion h2 {
        font-size: 36px;
    }

    .flujo-conexion {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   NUESTRA COBERTURA
===================================================== */

.cobertura {
    padding: 100px 20px 110px;
    background: #f5f8fb;
}

.cobertura .container {
    max-width: 1200px;
    margin: 0 auto;
}


/* =====================================================
   BLOQUE PRINCIPAL
===================================================== */

.cobertura-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}


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

.cobertura-texto {
    max-width: 560px;
}

.cobertura-texto .seccion-etiqueta {
    display: inline-block;
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.cobertura-texto h2 {
    color: var(--azul-oscuro);
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 25px;
}

.cobertura-texto p {
    color: #60708a;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}


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

.boton-cobertura {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    background: var(--verde);
    color: white;

    border-radius: 30px;

    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(32, 200, 102, 0.22);

    transition: all 0.3s ease;
}

.boton-cobertura:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(32, 200, 102, 0.30);
}


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

.cobertura-imagen {
    position: relative;
}

.cobertura-imagen img {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 24px;

    box-shadow:
        0 20px 50px rgba(8, 26, 69, 0.14);
}


/* detalle verde */

.cobertura-imagen::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -20px;
    bottom: -20px;

    background: rgba(32, 200, 102, 0.12);

    border-radius: 50%;

    z-index: 0;
}

.cobertura-imagen img {
    position: relative;
    z-index: 1;
}


/* =====================================================
   ZONAS DE COBERTURA
===================================================== */

.zonas-cobertura {
    margin-top: 90px;

    padding: 55px 60px;

    background: white;

    border-radius: 24px;

    border: 1px solid #e1e8f0;

    box-shadow:
        0 15px 40px rgba(8, 26, 69, 0.06);

    text-align: center;
}

.zonas-cobertura .seccion-etiqueta {
    display: inline-block;

    color: var(--verde);

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.zonas-cobertura h3 {
    color: var(--azul-oscuro);

    font-size: 32px;

    margin: 0 0 15px;
}

.zonas-cobertura > p {
    max-width: 700px;

    margin: 0 auto 35px;

    color: #60708a;

    font-size: 17px;

    line-height: 1.6;
}


/* =====================================================
   LISTA DE SECTORES
===================================================== */

.zonas-lista {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px;
}

.zonas-lista span {
    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    background: #e9f9f0;

    color: #087a3b;

    border: 1px solid rgba(32, 200, 102, 0.20);

    border-radius: 30px;

    font-size: 15px;

    font-weight: 600;

    transition: all 0.25s ease;
}

.zonas-lista span::before {
    content: "●";

    color: var(--verde);

    font-size: 9px;

    margin-right: 8px;
}

.zonas-lista span:hover {
    background: var(--verde);

    color: white;

    transform: translateY(-3px);

    box-shadow:
        0 8px 18px rgba(32, 200, 102, 0.20);
}

.zonas-lista span:hover::before {
    color: white;
}


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

@media (max-width: 900px) {

    .cobertura-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .cobertura-texto {
        max-width: 100%;
    }

    .cobertura-texto h2 {
        font-size: 42px;
    }

    .cobertura-imagen img {
        height: 380px;
    }

}


@media (max-width: 600px) {

    .cobertura {
        padding: 70px 20px 80px;
    }

    .cobertura-texto h2 {
        font-size: 36px;
    }

    .cobertura-texto p {
        font-size: 16px;
    }

    .cobertura-imagen img {
        height: 300px;
    }

    .zonas-cobertura {
        margin-top: 60px;
        padding: 40px 22px;
    }

    .zonas-cobertura h3 {
        font-size: 27px;
    }

    .zonas-lista {
        gap: 9px;
    }

    .zonas-lista span {
        font-size: 14px;
        padding: 9px 14px;
    }

}

/* =====================================================
   MAPA DE COBERTURA
===================================================== */

.cobertura-mapa {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(8, 26, 69, 0.14);
    border: 1px solid #e1e8f0;
    background: #f5f8fb;
}

.cobertura-mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .cobertura-mapa {
        height: 400px;
        border-radius: 18px;
    }

}
/* =====================================================
   HERO PAGINA PLANES - CORRECCIÓN
===================================================== */

.planes-hero {
    width: 100%;
    min-height: 300px;
    box-sizing: border-box;

    margin-top: 120px;

    padding: 75px 20px 85px !important;

    background: linear-gradient(
        135deg,
        #081a45,
        #0b5ed7
    );

    color: #ffffff;
    text-align: center;

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

.planes-hero .container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}

.planes-hero .seccion-etiqueta {
    display: block !important;

    color: #20c866 !important;

    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;

    margin-bottom: 15px;
}

.planes-hero h1 {
    color: #ffffff !important;

    font-size: 58px;
    line-height: 1.1;

    margin: 0 0 20px !important;
}

.planes-hero p {
    color: #e5e7eb !important;

    font-size: 20px;
    line-height: 1.7;

    max-width: 750px;
    margin: 0 auto !important;
}


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

@media (max-width: 900px) {

    .planes-hero {
        min-height: 280px;
        padding: 65px 20px 70px !important;
    }

    .planes-hero h1 {
        font-size: 46px;
    }

}


@media (max-width: 600px) {

    .planes-hero {
        min-height: 250px;
        padding: 55px 20px 60px !important;
    }

    .planes-hero h1 {
        font-size: 38px;
    }

    .planes-hero p {
        font-size: 17px;
    }

}
/* =====================================================
   HERO MARCO LEGAL
===================================================== */

.legal-hero {
    padding: 170px 20px 100px;
    background: linear-gradient(
        135deg,
        #081a45,
        #0b5ed7
    );
    text-align: center;
    color: white;
}

.legal-hero-contenido {
    max-width: 900px;
    margin: 0 auto;
}

.legal-etiqueta {
    display: inline-block;
    color: #20c866;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.legal-hero h1 {
    margin: 0 0 22px;
    color: white;
    font-size: 56px;
    line-height: 1.1;
}

.legal-hero p {
    max-width: 760px;
    margin: 0 auto;
    color: #e8eef8;
    font-size: 19px;
    line-height: 1.7;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .legal-hero {
        padding: 80px 20px 70px;
    }

    .legal-hero h1 {
        font-size: 40px;
    }

    .legal-hero p {
        font-size: 17px;
    }

}
/* =====================================================
   ENTES DE CONTROL - MARCO LEGAL
===================================================== */

.entes-control {
    padding: 100px 20px;
    background: #f5f8fb;
}

.entes-control .container {
    max-width: 1200px;
    margin: 0 auto;
}

.entes-intro {
    max-width: 720px;
    margin-bottom: 55px;
}

.entes-intro .seccion-etiqueta {
    display: inline-block;
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.entes-intro h2 {
    color: var(--azul-oscuro);
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 18px;
}

.entes-intro p {
    color: #60708a;
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
}


/* LISTA */

.entes-lista {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


/* BLOQUE */

.ente-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    align-items: center;

    background: white;
    border: 1px solid #e1e8f0;
    border-radius: 22px;
    padding: 30px 35px;

    transition: 0.3s ease;
}

.ente-item:hover {
    transform: translateX(6px);
    box-shadow: 0 18px 40px rgba(8, 26, 69, 0.10);
}


/* ICONO */

.ente-icono {
    width: 75px;
    height: 75px;

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

    background: #e9f9f0;
    color: var(--verde);

    border-radius: 20px;

    font-size: 30px;
}


/* CONTENIDO */

.ente-numero {
    color: var(--verde);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ente-contenido h3 {
    color: var(--azul-oscuro);
    font-size: 23px;
    margin: 5px 0 10px;
}

.ente-contenido p {
    color: #60708a;
    font-size: 16px;
    line-height: 1.6;
    max-width: 850px;
    margin: 0 0 16px;
}


/* BOTÓN */

.ente-boton {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #24727c;
    border: 1px solid #b8d3d8;

    padding: 9px 16px;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}

.ente-boton:hover {
    background: var(--verde);
    border-color: var(--verde);
    color: white;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .entes-control {
        padding: 70px 20px;
    }

    .entes-intro h2 {
        font-size: 34px;
    }

    .ente-item {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px;
    }

}
/* =====================================================
   DOCUMENTOS LEGALES
===================================================== */

.documentos-legales {
    padding: 100px 20px;
    background: #ffffff;
}

.documentos-legales .container {
    max-width: 1200px;
    margin: 0 auto;
}


/* ENCABEZADO */

.documentos-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 55px;
}

.documentos-encabezado .seccion-etiqueta {
    display: inline-block;
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.documentos-encabezado h2 {
    color: var(--azul-oscuro);
    font-size: 44px;
    margin: 0;
}

.documentos-encabezado > p {
    max-width: 450px;
    margin: 0;
    color: #60708a;
    font-size: 17px;
    line-height: 1.6;
}


/* GRID */

.documentos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}


/* TARJETA */

.documento-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 25px;

    padding: 30px;

    background: #f5f8fb;
    border: 1px solid #e1e8f0;
    border-radius: 20px;

    transition: 0.3s ease;
}

.documento-card:hover {
    transform: translateY(-5px);
    background: white;
    box-shadow: 0 18px 40px rgba(8, 26, 69, 0.10);
}


/* ICONO */

.documento-icono {
    width: 62px;
    height: 62px;

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

    background: #e9f9f0;
    color: var(--verde);

    border-radius: 16px;

    font-size: 25px;
}


/* INFORMACIÓN */

.documento-info h3 {
    color: var(--azul-oscuro);
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 10px;
}

.documento-info p {
    color: #60708a;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 17px;
}


/* BOTÓN PDF */

.documento-boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #24727c;
    border: 1px solid #b8d3d8;

    padding: 7px 13px;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition: 0.3s ease;
}

.documento-boton:hover {
    background: var(--verde);
    border-color: var(--verde);
    color: white;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .documentos-encabezado {
        display: block;
    }

    .documentos-encabezado > p {
        margin-top: 20px;
    }

    .documentos-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .documentos-legales {
        padding: 70px 20px;
    }

    .documentos-encabezado h2 {
        font-size: 34px;
    }

    .documento-card {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   LEYES Y DECRETOS
===================================================== */

.normativas {
    padding: 100px 20px;
    background: #f5f8fb;
}

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

/* ENCABEZADO */

.normativas-encabezado {
    max-width: 700px;
    margin-bottom: 55px;
}

.normativas-encabezado .seccion-etiqueta {
    display: inline-block;
    color: #20c866;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.normativas-encabezado h2 {
    color: #081a45;
    font-size: 46px;
    line-height: 1.15;
    margin: 0 0 18px;
}

.normativas-encabezado p {
    color: #60708a;
    font-size: 18px;
    line-height: 1.7;
}

/* TARJETAS */

.normativas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.normativa-card {
    background: #ffffff;
    border: 1px solid #e2eaf1;
    border-radius: 22px;
    padding: 32px;
    transition: 0.3s ease;
}

.normativa-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(8, 26, 69, 0.10);
}

/* NÚMERO */

.normativa-numero {
    width: 100px;
    height: 100px;
    background: #eaf8f0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.normativa-numero span {
    color: #20a75a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.normativa-numero strong {
    color: #081a45;
    font-size: 28px;
    margin-top: 4px;
}

/* CONTENIDO */

.normativa-contenido h3 {
    color: #081a45;
    font-size: 22px;
    margin-bottom: 14px;
}

.normativa-contenido p {
    color: #60708a;
    font-size: 16px;
    line-height: 1.65;
    min-height: 105px;
}

/* BOTÓN */

.btn-normativa {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 12px 18px;

    color: #081a45;
    background: #ffffff;
    border: 1px solid #cbd8e5;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: 0.3s ease;
}

.btn-normativa:hover {
    background: #20c866;
    border-color: #20c866;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .normativas-grid {
        grid-template-columns: 1fr;
    }

    .normativa-contenido p {
        min-height: auto;
    }

}

@media (max-width: 600px) {

    .normativas {
        padding: 70px 20px;
    }

    .normativas-encabezado h2 {
        font-size: 36px;
    }

}
/* =====================================================
   VIDEO PROTECCIÓN DE LA NIÑEZ
===================================================== */

.video-proteccion {
    max-width: 1200px;
    margin: 70px auto;
    padding: 35px;
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 24px;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 45px;
    align-items: center;

    box-shadow: 0 15px 40px rgba(8, 26, 69, 0.07);
}

.video-contenido .seccion-etiqueta {
    display: inline-block;
    color: #20c866;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.video-contenido h3 {
    color: #081a45;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 18px;
}

.video-contenido p {
    color: #60708a;
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
}


/* CONTENEDOR DEL VIDEO */

.video-youtube {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #081a45;
}

.video-youtube iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .video-proteccion {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 30px;
    }

    .video-contenido h3 {
        font-size: 26px;
    }

}
/* =====================================================
   DENUNCIA DE CONTENIDO
===================================================== */

.denuncia-contenido {
    padding: 100px 20px;
    background: #f5f8fb;
}

.denuncia-contenido .container {
    max-width: 1200px;
    margin: auto;
}


/* ENCABEZADO */

.denuncia-encabezado {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.denuncia-encabezado .seccion-etiqueta {
    display: inline-block;
    color: #20c866;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.denuncia-encabezado h2 {
    color: #081a45;
    font-size: 44px;
    line-height: 1.2;
    margin: 0 0 20px;
}

.denuncia-encabezado p {
    color: #60708a;
    font-size: 18px;
    line-height: 1.7;
    margin: 0 auto;
}


/* TARJETAS */

.canales-denuncia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.canal-denuncia {
    display: flex;
    gap: 25px;
    align-items: flex-start;

    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 20px;
    padding: 30px;

    transition: 0.3s ease;
}

.canal-denuncia:hover {
    transform: translateY(-7px);

    background: linear-gradient(
        135deg,
        #159957 0%,
        #20c866 45%,
        #8ee8b5 100%
    );

    border-color: #20c866;

    box-shadow:
        0 18px 40px rgba(32, 200, 102, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);

    transition: all 0.35s ease;
}
.canal-denuncia:hover .canal-info h3 {
    color: #ffffff;
}

.canal-denuncia:hover .canal-info p {
    color: rgba(255, 255, 255, 0.92);
}

.canal-denuncia:hover .canal-contacto {
    color: #ffffff;
}

.canal-denuncia:hover .canal-icono {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.canal-denuncia:hover .btn-denuncia {
    background: #ffffff;
    border-color: #ffffff;
    color: #168f51;
}


/* ICONO */

.canal-icono {
    flex-shrink: 0;

    width: 62px;
    height: 62px;

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

    background: #e9f9f0;
    border-radius: 16px;

    color: #168f51;
    font-size: 25px;
}


/* INFORMACIÓN */

.canal-info {
    flex: 1;
}

.canal-info h3 {
    color: #081a45;
    font-size: 20px;
    margin: 0 0 10px;
}

.canal-info p {
    color: #60708a;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 12px;
}

.canal-contacto {
    font-weight: 600;
}


/* BOTÓN */

.btn-denuncia {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 8px;
    padding: 10px 16px;

    border: 1px solid #cbd8e5;
    border-radius: 10px;

    color: #081a45;
    background: #ffffff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;

    transition: 0.3s ease;
}

.btn-denuncia:hover {
    background: #20c866;
    border-color: #20c866;
    color: #ffffff;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .canales-denuncia {
        grid-template-columns: 1fr;
    }

    .denuncia-encabezado h2 {
        font-size: 36px;
    }

}

@media (max-width: 600px) {

    .denuncia-contenido {
        padding: 70px 20px;
    }

    .canal-denuncia {
        flex-direction: column;
    }

}
/* =====================================================
   HERO CONTACTO
===================================================== */

.contacto-hero {
    padding: 170px 20px 100px;
    background: linear-gradient(
        135deg,
        #081a45,
        #0b5ed7
    );
    color: white;
    text-align: center;
}

.contacto-hero-contenido {
    max-width: 900px;
    margin: 0 auto;
}

.contacto-hero .seccion-etiqueta {
    display: inline-block;
    color: #20c866;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.contacto-hero h1 {
    color: white;
    font-size: 58px;
    line-height: 1.1;
    margin: 0 0 22px;
}

.contacto-hero p {
    color: #e5e7eb;
    font-size: 20px;
    line-height: 1.7;
    max-width: 780px;
    margin: 0 auto;
}


/* =====================================================
   CONTACTO
===================================================== */

.contacto {
    padding: 85px 20px 100px;
    background: #f5f8fb;
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .contacto-hero {
        padding: 75px 20px 70px;
    }

    .contacto-hero h1 {
        font-size: 40px;
    }

    .contacto-hero p {
        font-size: 17px;
    }

}
/* =====================================================
   CONTACTO
===================================================== */

.contacto {
    padding: 90px 20px 110px;
    background: #f5f8fb;
}

.contacto-container {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 45px;

    align-items: stretch;
}


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

.contacto-info {
    background: white;
    padding: 45px;
    border-radius: 28px;

    border: 1px solid #e1e8f0;

    box-shadow:
        0 20px 50px rgba(8, 26, 69, 0.08);
}

.contacto-info .seccion-etiqueta {
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
}

.contacto-info h2 {
    color: var(--azul-oscuro);
    font-size: 38px;
    margin: 15px 0 15px;
}

.contacto-intro {
    color: #60708a;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 35px;
}


/* DATOS */

.contacto-dato {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 25px;
}

.contacto-icono {
    min-width: 50px;
    height: 50px;

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

    background: #e9f9f0;

    color: var(--verde);

    border-radius: 14px;

    font-size: 20px;
}

.contacto-dato strong {
    display: block;

    color: var(--azul-oscuro);

    font-size: 17px;

    margin-bottom: 5px;
}

.contacto-dato p {
    margin: 3px 0;

    color: #60708a;

    line-height: 1.5;
}

.contacto-dato a {
    color: #60708a;
    text-decoration: none;

    transition: 0.3s ease;
}

.contacto-dato a:hover {
    color: var(--verde);
}


/* =====================================================
   WHATSAPP
===================================================== */

.btn-whatsapp {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    margin-top: 10px;

    padding: 15px 24px;

    background: #20c866;

    color: white;

    text-decoration: none;

    border-radius: 12px;

    font-weight: 700;

    box-shadow:
        0 12px 25px rgba(32, 200, 102, 0.20);

    transition: 0.3s ease;
}

.btn-whatsapp:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 30px rgba(32, 200, 102, 0.30);
}


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

.redes-sociales {
    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid #e5eaf0;
}

.redes-sociales h3 {
    color: var(--azul-oscuro);

    font-size: 18px;

    margin-bottom: 15px;
}

.redes-botones {
    display: flex;
    gap: 12px;
}

.red-social {
    width: 45px;
    height: 45px;

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

    border-radius: 12px;

    background: #e9f9f0;

    color: var(--verde);

    text-decoration: none;

    font-size: 20px;

    transition: 0.3s ease;
}

.red-social:hover {
    background: #20c866;

    color: white;

    transform: translateY(-5px);

    box-shadow:
        0 10px 22px rgba(32, 200, 102, 0.25);
}


/* =====================================================
   MAPA
===================================================== */

.contacto-mapa {
    background: white;

    padding: 25px;

    border-radius: 28px;

    border: 1px solid #e1e8f0;

    box-shadow:
        0 20px 50px rgba(8, 26, 69, 0.08);

    display: flex;
    flex-direction: column;
}

.mapa-titulo {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}

.mapa-icono {
    width: 50px;
    height: 50px;

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

    background: #e9f9f0;

    color: var(--verde);

    border-radius: 14px;

    font-size: 21px;
}

.mapa-titulo span {
    color: var(--verde);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.mapa-titulo h3 {
    margin: 3px 0 0;

    color: var(--azul-oscuro);

    font-size: 22px;
}


/* MAPA GOOGLE */

.mapa-google {
    width: 100%;
    height: 400px;

    overflow: hidden;

    border-radius: 20px;

    border: 1px solid #e1e8f0;
}

.mapa-google iframe {
    width: 100%;
    height: 100%;

    display: block;
}


/* BOTÓN MAPA */

.btn-mapa {
    align-self: flex-start;

    margin-top: 18px;

    padding: 12px 20px;

    border: 1px solid #b9d5dc;

    border-radius: 10px;

    color: #287581;

    text-decoration: none;

    font-weight: 600;

    transition: 0.3s ease;
}

.btn-mapa:hover {
    background: #20c866;

    border-color: #20c866;

    color: white;

    transform: translateY(-3px);
}


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

@media (max-width: 900px) {

    .contacto-container {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .contacto {
        padding: 60px 15px 80px;
    }

    .contacto-info,
    .contacto-mapa {
        padding: 25px;
        border-radius: 20px;
    }

    .contacto-info h2 {
        font-size: 32px;
    }

    .mapa-google {
        height: 320px;
    }

}
/* =====================================================
   FORMULARIO DE CONTACTO
===================================================== */

.formulario-contacto {
    padding: 90px 20px 110px;
    background: #ffffff;
}

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


/* ENCABEZADO */

.formulario-encabezado {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
}

.formulario-encabezado .seccion-etiqueta {
    color: var(--verde);
    font-weight: 700;
    letter-spacing: 2px;
}

.formulario-encabezado h2 {
    color: var(--azul-oscuro);
    font-size: 40px;
    margin: 15px 0;
}

.formulario-encabezado p {
    color: #60708a;
    font-size: 17px;
    line-height: 1.7;
}


/* FORMULARIO */

.formulario {
    background: #f5f8fb;

    padding: 40px;

    border-radius: 25px;

    border: 1px solid #e1e8f0;

    box-shadow:
        0 20px 50px rgba(8, 26, 69, 0.08);
}


/* GRID */

.formulario-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


/* CAMPOS */

.campo {
    display: flex;

    flex-direction: column;

    margin-bottom: 25px;
}

.campo label {
    color: var(--azul-oscuro);

    font-weight: 700;

    font-size: 15px;

    margin-bottom: 9px;
}

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

    width: 100%;

    box-sizing: border-box;

    padding: 14px 16px;

    border: 1px solid #d9e2eb;

    border-radius: 12px;

    background: white;

    color: #30476a;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition: 0.3s ease;
}


/* FOCUS */

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

    border-color: var(--verde);

    box-shadow:
        0 0 0 3px rgba(32, 200, 102, 0.12);
}


/* PLACEHOLDER */

.campo input::placeholder,
.campo textarea::placeholder {
    color: #9aa8b8;
}


/* TEXTAREA */

.campo textarea {
    resize: vertical;

    min-height: 140px;
}


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

.btn-enviar {

    display: inline-flex;

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

    gap: 10px;

    padding: 15px 30px;

    background: #ffffff;

    color: #0b9b4d;

    border: 2px solid rgba(255,255,255,0.95);

    border-radius: 12px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 80, 40, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


/* SOLO AL PASAR EL MOUSE */

.btn-enviar:hover {

    transform: translateY(-4px);

    background: #0b9b4d;

    color: white;

    box-shadow:
        0 14px 28px rgba(0, 90, 40, 0.32);
}


/* AL HACER CLICK NO CAMBIA DE COLOR */

.btn-enviar:active {

    transform: translateY(-4px);

    background: #0b9b4d;

    color: white;

    box-shadow:
        0 14px 28px rgba(0, 90, 40, 0.32);
}

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

@media (max-width: 700px) {

    .formulario-contacto {
        padding: 65px 15px 80px;
    }

    .formulario {
        padding: 25px;
    }

    .formulario-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .formulario-encabezado h2 {
        font-size: 32px;
    }

    .formulario-footer {
        justify-content: stretch;
    }

    .btn-enviar {
        width: 100%;
    }

}
/* =====================================================
   FORMULARIO DE CONTACTO
   VERDE METÁLICO + MARCA DE AGUA DE RED
===================================================== */

.formulario {

    background: linear-gradient(
        135deg,
        #0fa958 0%,
        #20c866 35%,
        #42dc7d 50%,
        #20c866 68%,
        #0d9e50 100%
    );

    padding: 40px;

    border-radius: 25px;

    border: 1px solid #0b9349;

    box-shadow:
        0 20px 45px rgba(13, 158, 80, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Todo el contenido queda por encima de la marca */

.formulario-container {
    position: relative;
    z-index: 2;
}

/* Correcciones acordadas: conserva rutas, colores y estructura original. */
:root { --header-height:130px; }
html { scroll-padding-top:calc(var(--header-height) + 20px); }
body { font-size:16px; line-height:1.6; }
[hidden] { display:none!important; }
img,video,iframe { max-width:100%; }
img { height:auto; }
button,input,select,textarea { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #16a34a; outline-offset:5px; }
p,a,h1,h2,h3 { overflow-wrap:break-word; }
[class*="grid"] > *, .footer-col, .contacto-container > *, .canal-info, .documento-info { min-width:0; }
header { position:sticky; top:0; }
header .container { height:var(--header-height); width:92%; max-width:1400px; padding:16px 0; gap:24px; }
header .logo { display:flex; align-items:center; flex:0 0 185px; }
header .logo img { width:185px; max-height:98px; object-fit:contain; }
header nav { display:block; position:static; width:auto; background:#fff; box-shadow:none; }
header nav ul { display:flex; align-items:center; gap:clamp(16px,1.7vw,30px); padding:0; }
header nav a { display:block; font-size:16px; padding:12px 0; white-space:nowrap; }
header nav a[aria-current="page"] { color:#15803d; box-shadow:inset 0 -3px #22c55e; }
header .btn-header { padding:15px 22px; font-size:14px; white-space:nowrap; text-align:center; flex-shrink:0; }
header .menu-toggle { display:none; background:transparent; border:0; min-width:44px; min-height:44px; padding:8px; cursor:pointer; }
.planes-hero { margin-top:0; }
section[class$="-hero"] { margin-top:0; padding:80px 20px; }
.hero-video { position:relative; isolation:isolate; overflow:hidden; min-height:680px; padding:70px 0 85px; background:#081a45; }
.telecom-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-video::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,17,45,.91),rgba(4,17,45,.67) 55%,rgba(4,17,45,.35)); z-index:-1; }
.hero-video .hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:40px; }
.hero-video h1 { font-size:clamp(2.15rem,4.2vw,3.8rem); line-height:1.13; }
.hero-video .hero-texto { max-width:740px; }
.hero-video .hero-imagen { display:flex; min-width:0; width:100%; justify-content:center; }
.hero-video .hero-imagen img { display:block; width:100%; max-width:520px; max-height:540px; object-fit:contain; animation:flotar 5s ease-in-out infinite; filter:drop-shadow(0 20px 30px rgba(34,197,94,.18)); }
.hero-video .hero-imagen::before { width:100%; max-width:420px; height:320px; }
.hero-botones,.estadisticas,.municipios,.buscar-cobertura { flex-wrap:wrap; }
.hero-botones { display:flex; gap:16px; }
.hero-botones a { padding:16px 23px; }
.estadisticas { gap:30px; margin-top:40px; }
.video-toggle { position:absolute; right:24px; bottom:18px; z-index:3; padding:9px 14px; color:#fff; border:1px solid #ffffff80; border-radius:8px; background:#081a45cc; cursor:pointer; font-size:14px; }
.buscar-cobertura { display:flex; gap:12px; }
.buscar-cobertura input { min-width:0; flex:1 1 180px; }
.buscar-cobertura a { text-align:center; }
/* Tarjetas con elevación y destello verde suave. */
.beneficios .card,.confianza-card,.solucion-card,.paso-conexion { position:relative; isolation:isolate; overflow:hidden; border:1px solid #deebe5; transition:transform .3s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease; }
.beneficios .card::after,.confianza-card::after,.solucion-card::after,.paso-conexion::after { content:""; pointer-events:none; position:absolute; inset:-80% -100%; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.65) 49%,transparent 56%); transform:translateX(-65%); transition:transform .65s ease; z-index:-1; }
@media(hover:hover) {
 .beneficios .card:hover,.confianza-card:hover,.solucion-card:hover { transform:translateY(-8px); background:linear-gradient(135deg,#f4fff8 0%,#daf9e5 60%,#b5f0cf 100%); border-color:#22c55e; box-shadow:0 20px 40px #168f5126,inset 0 1px 0 white; }
 .beneficios .card:hover::after,.confianza-card:hover::after,.solucion-card:hover::after,.paso-conexion:hover::after { transform:translateX(65%); }
 .beneficios .card:hover h3,.confianza-card:hover h3,.solucion-card:hover h3 { color:#081a45; }
 .beneficios .card:hover p,.confianza-card:hover p,.solucion-card:hover p { color:#365a50; }
 .beneficios .card:hover i,.confianza-card:hover i { color:#159947; }
 .paso-conexion:hover { transform:translateY(-6px); border-color:#22c55e; background:#f3fff8; box-shadow:0 16px 34px #168f5126,0 0 22px #22c55e1f; }
}
.soluciones-grid,.cards,.confianza-grid { align-items:stretch; }
.solucion-card,.paso-conexion { height:100%; }
/* Pie de página: estructura original, columnas proporcionadas y redes restauradas. */
.footer { background:#0f2454; padding:70px 0 0; }
.footer-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,1.4fr) minmax(0,1fr); gap:clamp(20px,3vw,48px); align-items:start; }
.footer-logo { width:180px; height:120px; object-fit:contain; object-position:left center; margin:0 0 20px; }
.footer h3 { margin:0 0 24px; font-size:21px; line-height:1.4; }
.footer p,.footer a { font-size:16px; overflow-wrap:anywhere; }
.footer p { line-height:1.75; }
.footer-col > p { margin-bottom:8px; }
.footer ul li { margin-bottom:10px; }
.footer ul a { display:inline-block; padding:3px 0; }
.footer .redes { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.footer .redes a { width:44px; height:44px; flex:0 0 44px; }
.footer-copy { margin-top:48px; padding:22px; }
.youtube-ayuda { grid-column:1/-1; text-align:center; color:#60708a; font-size:14px; }
.youtube-ayuda a { color:#0b5ed7; text-decoration:underline; }
.video-youtube { min-height:200px; }
.campo input,.campo select,.campo textarea { font-size:16px; }
.form-notice { margin-top:18px; color:#081a45; font-size:14px; }
@media(max-width:1200px) {
 :root { --header-height:108px; }
 header .container { width:92%; gap:20px; }
 header .logo { flex-basis:160px; }
 header .logo img { width:160px; max-height:80px; }
 header .menu-toggle { display:flex; order:3; }
 header .btn-header { margin-left:auto; }
 header nav { display:none; position:absolute; top:100%; left:0; right:0; width:100%; max-height:calc(100dvh - var(--header-height)); overflow:auto; box-shadow:0 18px 30px #081a4520; }
 header nav.active { display:block; }
 header nav ul { flex-direction:column; align-items:stretch; padding:12px 5%; gap:0; }
 header nav ul li { width:100%; }
 header nav a { text-align:center; padding:13px; min-height:48px; }
 .cards,.confianza-grid,.valores-grid,.incluye-grid,.soluciones-grid,.conexion-pasos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .planes-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
 .plan-card.recomendado { transform:none; }
 .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px; text-align:center; }
 .footer-logo { margin:0 auto 20px; object-position:center; }
 .footer-col > p { max-width:420px; margin-left:auto; margin-right:auto; }
 .footer .redes { justify-content:center; }
}
@media(max-width:1000px) {
 .hero-video .hero-grid { grid-template-columns:minmax(0,1fr); gap:32px; text-align:center; }
 .hero-video .hero-texto { max-width:760px; margin:auto; }
 .hero-video .hero-imagen img { width:min(64%,340px); max-height:300px; }
 .hero-video .hero-imagen { display:flex; }
 .hero-botones,.estadisticas,.municipios { justify-content:center; }
 .hero-video h1 { font-size:clamp(2rem,5.3vw,3.5rem); }
 .hero-video p { max-width:720px; margin-left:auto; margin-right:auto; }
 .quienes-grid,.tecnologia-grid,.cobertura-grid,.conectividad-grid { grid-template-columns:minmax(0,1fr); gap:32px; text-align:center; }
 .quienes-grid img,.conectividad-grid img,.cobertura-imagen img { max-width:640px; margin:auto; }
 .tecnologia-grid ul { text-align:left; max-width:580px; margin:auto; }
 .flujo-conexion { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:24px; }
 .linea-conexion { display:none; }
 .paso-conexion,.solucion-card { text-align:center; }
 .paso-numero,.solucion-icono { margin-left:auto; margin-right:auto; }
 .contacto-container { grid-template-columns:minmax(0,1fr); }
 .normativas-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:800px) {
 .planes-grid { grid-template-columns:minmax(0,1fr); max-width:520px; margin-left:auto; margin-right:auto; gap:35px; }
 .mision-vision-grid,.documentos-grid,.canales-denuncia,.video-proteccion { grid-template-columns:minmax(0,1fr); }
 .video-proteccion { padding:24px; gap:24px; text-align:center; }
 .footer-grid { gap:32px; }
 .documento-card { text-align:left; }
}
@media(max-width:600px) {
 :root { --header-height:94px; }
 header .container { width:94%; gap:10px; padding:12px 0; }
 header .logo { flex:0 0 112px; }
 header .logo img { width:112px; max-height:70px; }
 header .btn-header { font-size:11px; padding:11px 12px; white-space:normal; max-width:122px; line-height:1.4; }
 header .menu-toggle { min-width:40px; padding:7px; }
 .container { width:90%; }
 .hero-video { padding:48px 0 78px; min-height:0; }
 .hero-video h1 { font-size:clamp(2rem,8vw,2.7rem); }
 .hero-video p { font-size:16px; }
 .hero-video .hero-imagen img { width:72%; max-height:240px; }
 .hero-botones { flex-direction:column; align-items:center; gap:12px; }
 .hero-botones a { width:100%; max-width:360px; text-align:center; }
 .estadisticas { gap:20px; }
 .estadisticas h3 { font-size:26px; }
 .estadisticas p { font-size:14px; }
 .video-toggle { right:50%; transform:translateX(50%); white-space:nowrap; }
 section[class$="-hero"] { padding:55px 18px; }
 section[class$="-hero"] h1 { font-size:clamp(2rem,8vw,2.6rem); line-height:1.2; }
 section h2 { font-size:clamp(1.75rem,7vw,2.15rem); line-height:1.25; }
 .cards,.confianza-grid,.valores-grid,.incluye-grid,.soluciones-grid,.conexion-pasos,.flujo-conexion { grid-template-columns:minmax(0,1fr); gap:22px; }
 .beneficios,.quienes-somos,.tecnologia,.confianza { padding:60px 0; }
 .buscar-cobertura { flex-direction:column; width:100%; max-width:460px; margin:auto; }
 .buscar-cobertura input { flex:auto; width:100%; }
 .buscar-cobertura a { width:100%; }
 .footer { padding-top:45px; }
 .footer-grid { grid-template-columns:minmax(0,1fr); gap:30px; text-align:center; }
 .footer h3 { margin-bottom:14px; }
 .footer ul li { margin-bottom:6px; }
 .footer-col { width:100%; }
 .footer-col + .footer-col { padding-top:24px; border-top:1px solid #ffffff18; }
 .footer p,.footer a { font-size:15px; }
 .footer-copy { font-size:13px; margin-top:32px; padding:20px; }
 .formulario,.contacto-info,.contacto-mapa { padding:22px; }
 .contacto-info > h2,.contacto-intro { text-align:center; }
 .contacto-dato { gap:12px; }
 .contacto-dato > div { min-width:0; }
 .contacto-dato a { overflow-wrap:anywhere; }
 .redes-sociales { text-align:center; }
 .redes-botones { justify-content:center; }
 .formulario-grid { grid-template-columns:minmax(0,1fr); }
 .documento-card { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; }
 .canal-denuncia { align-items:center; text-align:center; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }