@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --fondo:#0e111b;
    --verdespan: #41eb4d;
    --blanco: #ffffff;
    --azul_oscuro: #151721;
    --verdelogo: #9deb0a;
    --verde_fuerte: #007808;
    --azul_claro: rgba(50, 56, 93, 0.4);
    --fuente-titulos: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --fuente-texto: "Inter", system-ui, -apple-system, sans-serif;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth; /* Hace que toda la navegación interna baje como una animación premium */
}

body {
    font-size: 16px;
    font-family: var(--fuente-texto);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title,
[class*="titulo"] {
    font-family: var(--fuente-titulos);
}
.inicio .nav-spacer {
    display: none;
}
.nav-spacer {
    height: 12rem;
}

.nav-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.nav-bg.scrolled {
    background-color: var(--fondo);
}

.nav-principal {
    color: var(--blanco);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 12rem;
}

.menu a {
    color: var(--blanco);
    text-decoration: none;
}

.logo-home-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-contenedor img {
    width: auto;
    height: 8rem;
}

/* ==========================================
   ESTILOS DE LOS SUBMENÚS DESPLEGABLES
   ========================================== */

.padre {
    position: relative;
}

.submenu-servicios,
.submenu-imple {
    display: block;
    position: absolute;
    background-color: var(--azul_oscuro);
    padding: 1.5rem;
    border-radius: 0.8rem;
    list-style: none;
    z-index: 10;
    min-width: 22rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.28s;
}

.submenu-servicios {
    top: 100%;
    left: 0;
    margin-top: 1rem;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top left;
}

.submenu-imple {
    top: 0;
    right: 100%;
    left: auto;
    margin-right: 1rem;
    transform: translateX(10px) scale(0.98);
    transform-origin: top right;
}

.submenu-servicios li,
.submenu-imple li {
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.submenu-servicios li:last-child,
.submenu-imple li:last-child {
    margin-bottom: 0;
}

.submenu-servicios a,
.submenu-imple a {
    display: block;
    transition: color 0.2s ease, transform 0.2s ease;
}

.submenu-servicios a:hover,
.submenu-imple a:hover {
    color: var(--verdelogo);
}

.menu li > a {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
}
.menu a:hover {
    color: var(--verdelogo);
}
/*
esto hace que el texto de Inicio y Nosotros haga un salto hacia arriba asi como Servicios y Cotiza tu proyecto
*/
.menu li > a:hover {
    transform: translateY(-1px);
}
.menu-opcion-desc {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    opacity: 0.85;
    line-height: 1.3;
}

.submenu-servicios,
.submenu-imple {
    min-width: 28rem;
    padding: 2rem;
}

.submenu-servicios a,
.submenu-imple a {
    display: block;
    padding: 1rem 1rem 1rem 0.4rem;
}

.submenu-servicios a .menu-opcion-desc,
.submenu-imple a .menu-opcion-desc {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.2rem;
    line-height: 1.45;
    margin-top: 0.45rem;
    transition: color 0.2s ease;
}

.submenu-servicios,
.submenu-imple {
    min-width: 30rem;
    max-width: 34rem;
    padding: 2rem;
}

.padre > a {
    cursor: pointer;
}

.padre:hover > a,
.padre a:focus-visible {
    transform: translateY(-1px);
    color: var(--verdelogo);
}

.submenu-servicios.mostrar,
.submenu-imple.mostrar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.submenu-imple.mostrar {
    transform: translateX(0) scale(1);
}

.submenu-servicios.mostrar li,
.submenu-imple.mostrar li {
    opacity: 1;
    transform: translateY(0);
}

.submenu-servicios.mostrar li:nth-child(1),
.submenu-imple.mostrar li:nth-child(1) { transition-delay: 0.04s; }
.submenu-servicios.mostrar li:nth-child(2),
.submenu-imple.mostrar li:nth-child(2) { transition-delay: 0.08s; }
.submenu-servicios.mostrar li:nth-child(3),
.submenu-imple.mostrar li:nth-child(3) { transition-delay: 0.12s; }
.submenu-servicios.mostrar li:nth-child(4),
.submenu-imple.mostrar li:nth-child(4) { transition-delay: 0.16s; }
.submenu-servicios.mostrar li:nth-child(5),
.submenu-imple.mostrar li:nth-child(5) { transition-delay: 0.2s; }

.nav-btn-cotiza {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.6rem;
    background-color: var(--verdelogo);
    width: max-content;
    border-radius: 20rem;
    padding: 0 2rem;
    color: var(--fondo) !important;
    font-size: 1.3rem;
    font-weight: bold;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

.nav-btn-cotiza:hover {
    opacity: 0.9;
}

.nav-btn-cotiza:active {
    transform: scale(0.98);
}

.nav-hamburguesa {
    display: none;
}


#parte-arriba {
    padding-top: 12rem;
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("img/indexphoto.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.title {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    text-align: left;
    margin-left: 100px;
    margin-right: 650px;
}

/* ——————— DEGRADADO ANIMADO EN LAS LETRAS ——————— */
@keyframes movimientoGradiente {
    0% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
    100% {
        background-position: 0% center;
    }
}

.conecta {
    /* Creamos el degradado horizontal con tus dos variables de verde - más amplio para la animación */
    background-image: linear-gradient(90deg, var(--verdelogo), var(--verde_fuerte), var(--verdelogo));
    background-size: 200% 100%;
    background-position: 0% center;
    
    /* Cortamos el fondo para que adopte la silueta exacta del texto */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Hacemos transparente el color plano para que se alcance a ver el degradado de atrás */
    -webkit-text-fill-color: transparent;
    color: transparent; 
    
    display: inline-block; /* Requerido para que el degradado calcule bien el ancho del texto */
    animation: movimientoGradiente 4s ease-in-out infinite;
}

.body {
    background-color: var(--fondo);
}

.texto {
    font-size: 2rem;
    color: var(--blanco);
    text-align: left;
    margin-left: 10rem;
    margin-right: 50rem;
    margin-top: 2rem;
}

.contenedor {
    width: 120rem;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#btn-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    height: 5rem; 
    background-color: var(--verdelogo);
    
    /* SOLUCIÓN AL ESTIRAMIENTO: Le dice al navegador que no use el 100%, 
       sino solo el ancho real de las letras internas */
    width: max-content; 
    
    margin-left: 9rem; 
    margin-bottom: 10rem;
    margin-top: 5rem;
    border-radius: 20rem;
    border: none;
    padding: 0 4rem; 
    color: var(--fondo);
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

#btn-index:hover {
    opacity: 0.9;
}

#btn-index:active {
    transform: scale(0.98);
}

.parte-medio {
    background-color: var(--azul_oscuro);
    padding: 6rem 0; /* Espacio arriba y abajo del bloque */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea sutil divisoria por si acaso */
}

/* Distribución horizontal de los 4 bloques usando Flexbox */
.datos-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Alineación interna de cada bloque (Número arriba, texto abajo) */
.dato-bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* Hace que todos los bloques midan exactamente lo mismo */
}

/* Estilo para los números grandes (Verde dinámico) */
.dato-numero {
    font-size: 5.5rem;
    font-weight: bold;
    color: var(--verdespan); /* Mismo color verde de la palabra conecta */
    line-height: 1;
    margin-bottom: 1.5rem; /* Separación con el texto inferior */
}

/* Estilo para los textos descriptivos inferiores */
.dato-texto {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--blanco);
    letter-spacing: 2px; /* Espaciado entre letras elegante como el prototipo */
    opacity: 0.6; /* Un toque grisáceo sutil para dar jerarquía visual */
}

.parte-abajo {
    background-color: var(--fondo);
    padding: 8rem 0; /* Espacio generoso para que respire la sección */
}

/* Alineación y centrado de los encabezados */
.proyectos-header {
    text-align: center;
    margin-bottom: 6rem; /* Distancia entre los textos y los cuadros grises */
}

.subtitulo-verde {
    color: var(--verdelogo);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 2rem;
}

.titulo-proyectos {
    font-size: 5rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.2;
    margin-bottom: 2rem;
}

.caso-exito {
    color: var(--verdespan); /* Color verde brillante para resaltar */
}

.descripcion-proyectos {
    font-size: 1.8rem;
    color: var(--blanco);
    opacity: 0.5; /* Texto sutil en gris claro */
    font-weight: normal;
}

/* ==========================================
   CONTENEDORES MULTIMEDIA (VIDEO Y SLIDER)
   ========================================== */

/* Contenedor vertical para apilar el video y la galería */
.proyectos-contenido {
    display: flex;
    flex-direction: column;
    gap: 5rem; /* Separación vertical entre el cuadro de video y el del slider */
    align-items: center;
}

/* Estilo base para las cajas grises de contenido */
.proyecto-media {
    width: 100%;
    max-width: 90rem; /* Limita el ancho de los cuadros para que se vean estilizados como en tu imagen */
    height: 50rem;     /* Altura proporcional ideal para video y fotografías panorámicas */
    background-color: #d9d9d9; /* Color gris claro de base como tu prototipo */
    border-radius: 0.4rem;
    margin-bottom: 5rem;
    
    /* Centrado de los textos de "Próximamente" */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo estético temporal para las letras dentro de los cuadros grises */
.placeholder-texto {
    color: #4a4a4a;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ==========================================
   ESTILOS DEL FOOTER (PIE DE PÁGINA)
   ========================================== */

   .footer-bg {
    background-color: var(--azul_oscuro);
    padding-top: 6rem;
    color: var(--blanco);
}

/* Distribución horizontal de las 4 columnas */
.footer-contenido {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    padding-bottom: 5rem;
}

/* Reglas generales de columna */
.footer-columna {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Ajustes específicos para la columna del logo */
.col-logo {
    flex: 1.5; /* Le damos un poco más de ancho a la primera columna */
}

.logo-contenedor-footer img {
    width: auto;
    height: 8rem;
}

.footer-eslogan {
    font-size: 1.5rem;
    line-height: 1.6;
    opacity: 0.7;
    margin: 0;
}

/* Títulos de las columnas (Legal, Horarios, Contacto) */
.footer-titulo-col {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--verdelogo); /* Color verde pistache del prototipo */
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-titulo-col svg {
    color: var(--verdelogo);
}

/* Listas de enlaces e información */
.footer-enlaces,
.footer-info-lista,
.footer-info-lista-iconos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-enlaces li,
.footer-info-lista li,
.footer-info-lista-iconos li {
    font-size: 1.5rem;
    margin-bottom: 1.8rem;
    line-height: 1.4;
}

.footer-enlaces a {
    color: var(--blanco);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.footer-enlaces a:hover {
    opacity: 1;
    color: var(--verdespan);
}

.footer-info-lista li {
    opacity: 0.8;
}

/* Lista de contacto con iconos integrados a la izquierda */
.footer-info-lista-iconos li {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    opacity: 0.8;
}

.footer-info-lista-iconos svg {
    color: var(--verdelogo); /* Iconos de contacto color verde */
    flex-shrink: 0;
}

/* ==========================================
   BARRA INFERIOR DE CRÉDITOS
   ========================================== */

.footer-barra-inferior {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem 0;
    margin-top: 2rem;
}

.barra-inferior-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
    opacity: 0.8;
}

.ift-lineamiento {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ift-lineamiento svg {
    color: var(--verdelogo);
}

.ift-lineamiento strong {
    color: var(--verdespan);
    font-weight: bold;
}

.ovalo-letras {
    display: inline-flex; /* Hace que el óvalo mida solo lo que mide su contenido */
    align-items: center;  /* Centra verticalmente el punto con el texto */
    gap: 1rem;            /* Espacio entre el punto verde y el texto */
    
    background-color: transparent; /* Fondo transparente como el prototipo */
    border: 1px solid var(--verdespan); /* Borde verde fino */
    border-radius: 5rem;
    
    padding: 0.8rem 2rem;  /* Espaciado interno para darle forma de cápsula */
    margin-left: 10rem;    /* Mantiene tu alineación desde la izquierda */
}

/* El texto de adentro en mayúsculas, pequeño y verde */
.texto-ovalo {
    color: var(--verdespan);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px; /* Separación elegante entre letras */
    margin: 0;           /* Quita márgenes por defecto del <p> */
}

/* El punto verde que va a flashear */
.punto {
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--verdespan);
    border-radius: 50%; /* Lo hace completamente redondo */
    
    /* ——————— MODIFICACIÓN AQUÍ: EFECTO FLASHEAR COMPLETO ——————— */
    /* Se cambió 'ease-in-out' por un 'steps' o curvas más marcadas para que el flasheo de luz se note más agresivo e institucional */
    animation: pulso 1.2s infinite cubic-bezier(0.4, 0, 0.6, 1); 
}

/* ——————— ANIMACIÓN DEL PUNTO (@keyframes) ——————— */
@keyframes pulso {
    0% {
        transform: scale(0.6);
        opacity: 0.2;
        box-shadow: 0 0 0 0 rgba(65, 235, 77, 0);
    }
    50% {
        transform: scale(1.2); /* Crece suavemente */
        opacity: 1;            /* Brilla completamente */
        box-shadow: 0 0 8px 3px rgba(65, 235, 77, 0.6); /* Añade un sutil destello de luz alrededor */
    }
    100% {
        transform: scale(0.6);
        opacity: 0.2;
        box-shadow: 0 0 0 0 rgba(65, 235, 77, 0);
    }
}

/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: NOSOTROS
   ========================================== */

/* Contenedor superior de Nosotros */
.nosotros-hero {
    background-color: var(--fondo);
    padding-bottom: 6rem;
}

/* Centrado general del bloque de presentación */
.nosotros-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Forzar sobreescritura del óvalo para alinearlo al centro en esta vista */
.nosotros-hero-contenido .ovalo-letras {
    margin-left: 0;
    margin-top: 5rem;
    margin-bottom: 3rem;
}

/* Tipografía de encabezado de Nosotros */
.nosotros-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin: 0 max(4rem, 20rem) 3rem max(4rem, 20rem);
}

/* Descripción del Hero superior */
.nosotros-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 22rem) 6rem max(4rem, 22rem);
}

/* Contenedor e imagen de cápsula ovalada del prototipo */
.nosotros-imagen-marco {
    width: 100%;
    max-width: 80rem;
    height: 45rem;
    overflow: hidden;
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
    border-top-left-radius: 10rem;
    border-bottom-left-radius: 10rem;
}

.nosotros-imagen-marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Seccion inferior de tarjetas pilares */
.nosotros-pilares {
    background-color: var(--fondo);
    padding: 8rem 0 max(6rem, 12rem) 0;
}

/* Distribución en rejilla de 2 columnas equidistantes */
.pilares-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

/* Estilo estético de las tarjetas de Misión, Visión, etc. */
.pilar-tarjeta {
    background-color: var(--azul_claro);
    border-radius: 4rem;
    padding: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Contenedor circular interno para el icono Tabler */
.pilar-icono-wrapper {
    background-color: transparent;
    color: var(--verdelogo);
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste específico para que los SVGs hereden el verde brillante */
.pilar-icono-wrapper svg {
    stroke: var(--verdelogo);
}

/* Cabeceras internas de cada tarjeta pilar */
.pilar-titulo {
    font-size: 2rem;
    font-weight: bold;
    color: var(--verdelogo);
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Párrafo descriptivo de la tarjeta */
.pilar-texto {
    font-size: 1.6rem;
    color: var(--blanco);
    opacity: 0.8;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: COTIZA
   ========================================== */

   .cotiza-hero {
    background-color: var(--fondo);
}

.cotiza-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cotiza-hero-contenido .ovalo-letras {
    margin-left: 0;
    margin-top: 5rem;
}

.cotiza-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-bottom: 3rem;
}

.cotiza-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin-bottom: 6rem;
}

/* Sección del Grid de Contacto */
.cotiza-seccion {
    background-color: var(--fondo);
    padding-bottom: 12rem;
}

.cotiza-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6rem;
}

/* Columna Izquierda: Bloques de Información */
.cotiza-info-bloques {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.info-tarjeta-mini {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 1.5rem;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.info-icon-wrapper {
    background-color: rgba(21, 23, 33, 0.9);
    color: var(--verdelogo);
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-icon-wrapper svg {
    stroke: var(--verdelogo);
}

.info-tarjeta-texto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-tag {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--blanco);
    opacity: 0.4;
    letter-spacing: 1px;
}

.info-valor {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--blanco);
}

/* Columna Derecha: Tarjeta del Formulario */
.cotiza-formulario-wrapper {
    flex: 1.2;
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 3rem;
    align-self: center; /* Alinea la tarjeta al inicio de la columna */
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 4rem;
    padding-bottom: 6rem;

}

.formulario-titulo {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 3.5rem;
}

.form-cotiza {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.input-grupo {
    width: 100%;
}

.input-grupo input,
.input-grupo textarea {
    width: 100%;
    max-width: 100%;
    background-color: rgba(14, 17, 27, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.8rem 2rem;
    box-sizing: border-box;
    display: block;
    color: var(--blanco);
    font-size: 1.5rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
}

.input-grupo input:focus,
.input-grupo textarea:focus {
    border-color: rgba(65, 235, 77, 0.3);
}

.input-grupo textarea {
    resize: none;
}

/* Botón de Enviar Mensaje Verde Brillante */
.btn-enviar-formulario {
    width: 100%;
    background-color: var(--verdelogo);
    color: var(--fondo);
    border: none;
    border-radius: 5rem;
    padding: 1.8rem 0;
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    margin-top: 1rem;
}

.btn-enviar-formulario svg {
    stroke: var(--fondo);
    fill: transparent;
}

.btn-enviar-formulario:active {
    transform: scale(0.99);
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: PLANES (PROV_INTER)
   ========================================== */

   .planes-hero {
    background-color: var(--fondo);
}

.planes-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.planes-hero-contenido .ovalo-letras {
    margin-left: 0;
    margin-top: 5rem;
}

.planes-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-bottom: 3rem;
}

.planes-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin-bottom: 6rem;
}

/* Sección de Rejillas */
.planes-seccion {
    background-color: var(--fondo);
    padding-bottom: 12rem;
}

/* Encabezados de Categoría (Icono + Texto H2) */
.categoria-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.categoria-header svg {
    stroke: var(--verdelogo);
    color: var(--verdelogo);
}

.categoria-header h2 {
    font-size: 3.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin: 0;
}

.espacio-bloque {
    margin-top: 8rem; /* Separación marcada entre residenciales y empresariales */
}

/* Grid base de 3 columnas proporcionales */
.planes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

/* Estilo Base de las Tarjetas (Usando tu variable --azul_claro) */
.plan-tarjeta {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2.5rem;
    padding: 4.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.plan-tipo {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--blanco);
    opacity: 0.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.plan-nombre {
    font-size: 2.6rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 3rem;
}

/* Bloque de números de velocidad */
.plan-velocidad {
    font-size: 6.5rem;
    font-weight: bold;
    color: var(--verdespan);
    line-height: 1;
    margin-bottom: 1rem;
}

.plan-velocidad span {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--blanco);
    opacity: 0.6;
    margin-left: 0.5rem;
}

/* Bloque de precios */
.plan-precio {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-bottom: 4rem;
}

.plan-precio span {
    font-size: 1.4rem;
    font-weight: normal;
    opacity: 0.4;
}

/* Listado de características internas */
.plan-beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.plan-beneficios li {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 1.2rem;
}

.plan-beneficios li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Enlaces / Botones de contratación estilo óvalo transparente */
.btn-plan {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5rem;
    padding: 1.5rem 0;
    color: var(--blanco);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: auto; /* Empuja el botón al fondo de la tarjeta de forma simétrica */
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-plan svg {
    stroke: var(--blanco);
    transition: transform 0.2s;
}

.btn-plan:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--verdespan);
}

.btn-plan:hover svg {
    transform: translateX(4px);
    stroke: var(--verdespan);
}

/* ==========================================
   VARIANTES EXCLUSIVAS: BLOQUE EMPRESARIAL
   ========================================== */

.pilar-empresarial {
    padding-top: 5.5rem;
}

.icono-rayo {
    color: var(--verdelogo);
    margin-bottom: 2rem;
}

.icono-rayo svg {
    stroke: var(--verdelogo);
}

.empresa-meta-vel {
    font-size: 3rem;
    font-weight: bold;
    color: var(--verdelogo); /* Color distintivo verde pistache para empresas */
    margin-bottom: 1.5rem;
}

.vel-personalizada {
    color: var(--verdespan); /* Resalta el texto 'Personalizado' */
}

.plan-descripcion-corta {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 5rem;
    min-height: 4.5rem; /* Asegura simetría en la altura de los textos descriptivos */
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: CONSULTAS
   ========================================== */

   .consultas-hero {
    background-color: var(--fondo);
}

.consultas-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.consultas-hero-contenido .ovalo-letras {
    margin-left: 0;
    margin-top: 5rem;
}

.consultas-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-bottom: 3rem;
}

.consultas-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 6rem max(4rem, 20rem);
}

/* Sección de Tarjetas */
.consultas-seccion {
    background-color: var(--fondo);
    padding-bottom: 12rem;
}

/* Grid organizado de 2 columnas para equilibrar la lectura de asesorías */
.consultas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

/* Tarjeta de servicio utilizando tu fondo traslúcido preferido */
.consulta-tarjeta {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 4rem;
    padding: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Wrapper del Icono Tabler */
.consulta-icono {
    color: var(--verdelogo);
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.consulta-icono svg {
    stroke: var(--verdelogo);
}

/* Título del servicio */
.consulta-nombre {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--verdelogo); /* Verde pistache para destacar los títulos */
    letter-spacing: 0.5px;
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Texto descriptivo largo */
.consulta-texto {
    font-size: 1.6rem;
    color: var(--blanco);
    opacity: 0.8;
    line-height: 1.6;
    margin: 0;
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: DATA CENTER
   ========================================== */

   .dc-hero {
    background-color: var(--fondo);
}

.dc-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dc-hero-contenido .ovalo-letras {
    margin-left: 0;
    margin-top: 5rem;
}

.dc-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-bottom: 3rem;
}

.dc-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 6rem max(4rem, 20rem);
}

/* Imagen panorámica de Data Center */
.dc-imagen-principal {
    width: 100%;
    max-width: 95rem;
    height: 48rem;
    overflow: hidden;
    border-radius: 1.5rem;
    margin-top: 2rem;
}

.dc-imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Sección de la Rejilla de 6 Servicios */
.dc-servicios-seccion {
    background-color: var(--fondo);
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.dc-badge-norma {
    margin-left: 0;
    margin-bottom: 5rem;
}

.dc-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.dc-tarjeta-servicio {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2.5rem;
    padding: 4.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dc-icono-wrapper {
    color: var(--verdelogo);
    margin-bottom: 2.5rem;
}

.dc-icono-wrapper svg {
    stroke: var(--verdelogo);
}

.dc-tarjeta-titulo {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.dc-tarjeta-texto {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}

/* Sección de Proceso e Indicadores (Abajo) */
.dc-proceso-seccion {
    background-color: var(--fondo);
    padding-top: 4rem;
    padding-bottom: 12rem;
}

.dc-proceso-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Columna Izquierda */
.dc-proceso-lista-bloque {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 8rem;
}

.dc-proceso-sub {
    color: var(--verdelogo);
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}

.dc-proceso-titulo {
    font-size: 5rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 4.5rem;
}

.dc-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 5rem 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.dc-checklist li {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    font-size: 1.8rem;
    color: var(--blanco);
}

.dc-checklist svg {
    stroke: var(--verdespan);
    flex-shrink: 0;
}

.dc-checklist span {
    opacity: 0.8;
}

/* Botón Ovalado Verde de Acción */
.btn-cotiza-dc {
    background-color: var(--verdelogo);
    color: var(--fondo);
    border: none;
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.1s;
}

.btn-cotiza-dc svg {
    stroke: var(--fondo);
}

.btn-cotiza-dc:active {
    transform: scale(0.99);
}

/* Columna Derecha: Bloque de 4 Cuadros Grid */
.dc-metricas-bloque {
    flex: 0.9;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    width: 100%;
}

.metrica-recuadro {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2rem;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.metrica-valor {
    font-size: 4rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1;
    margin-bottom: 1rem;
}

.metrica-valor-texto {
    font-size: 3rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.metrica-label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--blanco);
    opacity: 0.4;
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: FTTX
   ========================================== */

   .fttx-hero {
    background-color: var(--fondo);
}

.fttx-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Modificación explícita solicitada: Óvalo sin margin bottom */
.fttx-hero-contenido .fttx-no-mb {
    margin-left: 0;
    margin-top: 5rem;
    margin-bottom: 0; /* Removido el margen inferior como me lo pediste */
}

.fttx-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.fttx-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 6rem max(4rem, 20rem);
}

/* Contenedor de la imagen panorámica de fibra */
.fttx-imagen-principal {
    width: 100%;
    max-width: 95rem;
    height: 44rem;
    overflow: hidden;
    border-radius: 2rem;
    margin-top: 2rem;
}

.fttx-imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================
   SECCIÓN 2: GRID DE TOPOLOGÍAS
   ========================================== */

.fttx-topologias-seccion {
    background-color: var(--fondo);
    padding-top: 10rem;
    padding-bottom: 6rem;
}

.topologias-header {
    text-align: center;
    margin-bottom: 5rem;
}

.topologias-sub {
    color: var(--verdelogo);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 1.5rem;
}

.topologias-header h2 {
    font-size: 4rem;
    font-weight: bold;
    color: var(--blanco);
    margin: 0;
}

/* Distribución de las 3 topologías principales */
.topologias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.topologia-tarjeta {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2rem;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.topo-badge {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--verdelogo);
    opacity: 0.8;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.topologia-tarjeta h3 {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.topologia-tarjeta p {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================
   SECCIÓN 3: SERVICIOS INCLUIDOS Y GRID
   ========================================== */

.fttx-servicios-seccion {
    background-color: var(--fondo);
    padding-top: 4rem;
    padding-bottom: 12rem;
}

.fttx-servicios-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.servicios-incluidos-title {
    width: 100%;
    text-align: left;
    margin-bottom: 4rem;
}

.servicios-incluidos-title h2 {
    font-size: 3.6rem;
    font-weight: bold;
    color: var(--blanco);
    margin-left: 4rem;
}

/* Grid de los 6 servicios incluidos */
.fttx-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
    width: 100%;
    margin-bottom: 6rem;
}

.fttx-tarjeta-servicio {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fttx-icono-wrapper {
    color: var(--verdelogo);
    margin-bottom: 2rem;
}

.fttx-icono-wrapper svg {
    stroke: var(--verdelogo);
}

.fttx-tarjeta-titulo {
    font-size: 2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.fttx-tarjeta-texto {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}

/* Botón Óvalo de Acción Inferior */
.btn-cotiza-fttx {
    background-color: var(--verdelogo);
    color: var(--fondo);
    border: none;
    border-radius: 5rem;
    padding: 1.8rem 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.1s;
}

.btn-cotiza-fttx svg {
    stroke: var(--fondo);
}

.btn-cotiza-fttx:active {
    transform: scale(0.99);
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: SISTEMAS
   ========================================== */

   .sistemas-hero {
    background-color: var(--fondo);
}

.sistemas-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Regla explícita solicitada: Óvalo sin margin bottom */
.sistemas-hero-contenido .sistemas-no-mb {
    margin-left: 0;
    margin-top: 5rem;
    margin-bottom: 0; /* Removido por completo */
}

.sistemas-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.sistemas-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 6rem max(4rem, 20rem);
}

/* Área de contenido general */
.sistemas-seccion {
    background-color: var(--fondo);
    padding-bottom: 12rem;
}

.sistemas-contenido-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Bloque agrupador por cada subcategoría */
.sistemas-categoria-wrapper {
    width: 100%;
    margin-bottom: 6rem;
}

.sistemas-categoria-wrapper:nth-of-type(2) {
    margin-bottom: 5rem; /* Menor espacio antes del botón principal */
}

/* Encabezados de Sección (Icono + H2) */
.sistemas-categoria-wrapper .categoria-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.sistemas-categoria-wrapper .categoria-header svg {
    stroke: var(--verdelogo);
    color: var(--verdelogo);
    margin-left: 4rem;
}

.sistemas-categoria-wrapper .categoria-header h2 {
    font-size: 3.6rem;
    font-weight: bold;
    color: var(--blanco);
    margin:0;
}

/* Grid base de 3 columnas equidistantes */
.sistemas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
    width: 100%;
}

/* Tarjeta Técnica de Sistema */
.sistema-tarjeta {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2.5rem;
    padding: 4.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sistema-icono {
    color: var(--verdelogo);
    margin-bottom: 2.5rem;
}

.sistema-icono svg {
    stroke: var(--verdelogo);
}

.sistema-nombre {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.sistema-texto {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}

/* Botón de Acción Centrado Inferior */
.btn-sistemas-diagnostico {
    background-color: var(--verdelogo);
    color: var(--fondo);
    border: none;
    border-radius: 5rem;
    padding: 1.8rem 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.1s;
    margin-top: 2rem;
}

.btn-sistemas-diagnostico svg {
    stroke: var(--fondo);
}

.btn-sistemas-diagnostico:active {
    transform: scale(0.99);
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: IMPLE_INFRA
   ========================================== */

   .infra-hero {
    background-color: var(--fondo);
}

.infra-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Regla explícita solicitada: Óvalo sin margin bottom */
.infra-hero-contenido .infra-no-mb {
    margin-left: 0;
    margin-top: 5rem;
    margin-bottom: 0; /* Removido por completo */
}

.infra-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.infra-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 6rem max(4rem, 20rem);
}

/* Marco para la imagen panorámica */
.infra-imagen-principal {
    width: 100%;
    max-width: 95rem;
    height: 48rem;
    overflow: hidden;
    border-radius: 1.5rem;
    margin-top: 2rem;
}

.infra-imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Área de Rejilla de Servicios */
.infra-servicios-seccion {
    background-color: var(--fondo);
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.infra-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.infra-tarjeta-servicio {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2.5rem;
    padding: 4.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.infra-icono-wrapper {
    color: var(--verdelogo);
    margin-bottom: 2.5rem;
}

.infra-icono-wrapper svg {
    stroke: var(--verdelogo);
}

.infra-tarjeta-titulo {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
        margin-bottom: 1.5rem;
}

.infra-tarjeta-texto {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}

/* Sección de Métricas y Botón (Abajo) */
.infra-metricas-seccion {
    background-color: var(--fondo);
    padding-top: 4rem;
    padding-bottom: 12rem;
}

.infra-metricas-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Grid de las 4 métricas horizontales */
.infra-metricas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
    width: 100%;
    margin-bottom: 6rem;
}

.infra-recuadro-metrica {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2rem;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.infra-metrica-valor {
    font-size: 4rem;
    font-weight: bold;
    color: var(--verdelogo); /* Color verde pistache para las métricas fijas */
    line-height: 1;
    margin-bottom: 1rem;
}

.infra-metrica-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--blanco);
    opacity: 0.4;
    letter-spacing: 1px;
}

/* Botón Ovalado Verde Limón */
.btn-infra-accion {
    background-color: var(--verdelogo);
    color: var(--fondo);
    border: none;
    border-radius: 5rem;
    padding: 1.8rem 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.1s;
}

.btn-infra-accion svg {
    stroke: var(--fondo);
}

.btn-infra-accion:active {
    transform: scale(0.99);
}
/* ==========================================
   ESTILOS ESPECÍFICOS DE VISTA: SOFTWARE
   ========================================== */

   .soft-hero {
    background-color: var(--fondo);
}

.soft-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Regla explícita solicitada: Óvalo sin margin bottom */
.soft-hero-contenido .soft-no-mb {
    margin-left: 0;
    margin-top: 5rem;
    margin-bottom: 0; /* Removido por completo */
}

.soft-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.soft-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.6;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 6rem max(4rem, 20rem);
}

/* Ventana Simuladora de IDE/Editor de Código */
.soft-editor-ventana {
    width: 100%;
    max-width: 75rem;
    background-color: #111420; /* Tono muy oscuro tipo editor de código */
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 2rem;
    text-align: left;
    overflow: hidden;
    margin-top: 2rem;
}

.soft-editor-header {
    background-color: rgba(14, 17, 27, 0.5);
    padding: 1.8rem 2.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.soft-botones-mac {
    display: flex;
    gap: 0.8rem;
}

.mac-btn {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
}

.mac-rojo { background-color: #ff5f56; }
.mac-naranja { background-color: #ffbd2e; }
.mac-verde { background-color: #27c93f; }

.soft-editor-archivo {
    color: var(--blanco);
    opacity: 0.4;
    font-size: 1.3rem;
    font-family: monospace;
    margin-left: max(2rem, 18rem); /* Centrado visual relativo */
}

.soft-editor-cuerpo {
    padding: 3.5rem;
}

.soft-editor-cuerpo pre {
    margin: 0;
}

.soft-editor-cuerpo code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--blanco);
}

/* Colores de sintaxis de programación del prototipo */
.code-comment { color: #5c6370; font-style: italic; display: block; }
.code-keyword { color: #c678dd; }
.code-string { color: #98c379; }

/* Rejilla de Servicios de Software */
.soft-servicios-seccion {
    background-color: var(--fondo);
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.soft-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.soft-tarjeta-servicio {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 2.5rem;
    padding: 4.5rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.soft-icono-wrapper {
    color: var(--verdelogo);
    margin-bottom: 2.5rem;
}

.soft-icono-wrapper svg {
    stroke: var(--verdelogo);
}

.soft-tarjeta-titulo {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blanco);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.soft-tarjeta-texto {
    font-size: 1.5rem;
    color: var(--blanco);
    opacity: 0.5;
    line-height: 1.5;
    margin: 0;
}

/* Sección de Badges de Tecnologías */
.soft-tech-seccion {
    background-color: var(--fondo);
    padding-top: 4rem;
    padding-bottom: 12rem;
}

.soft-tech-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.soft-tech-sub {
    color: var(--verdelogo);
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 4rem;
}

/* Filas de alineación de las etiquetas */
.soft-tech-row {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    width: 100%;
    margin-bottom: 2.5rem;
}

.soft-row-inferior {
    margin-bottom: 6rem; /* Mayor espacio antes del botón final */
}

/* Badge de Tecnología individual traslúcido */
.tech-badge {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 5rem;
    padding: 1.2rem 3rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.tech-badge svg {
    stroke: var(--verdelogo); /* Los pequeños símbolos de código serán verdes */
}

.tech-badge span {
    color: var(--blanco);
    font-size: 1.5rem;
    font-weight: 500;
}

/* Botón de Acción Principal Verde Limón */
.btn-soft-accion {
    background-color: var(--verdelogo);
    color: var(--fondo);
    border: none;
    border-radius: 5rem;
    padding: 1.8rem 5rem;
    font-size: 1.6rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.1s;
}

.btn-soft-accion svg {
    stroke: var(--fondo);
}

.btn-soft-accion:active {
    transform: scale(0.99);
}
/* ==========================================
   ANIMACIÓN CONTROLADA POR SCROLL (FADE-IN UP)
   ========================================== */

/* Estado inicial: El contenido está oculto y un poco abajo esperando el scroll */
/* 1. Para lo que aparece solito NADA MÁS CARGAR la página (Fijo arriba) */
.animacion-entrada {
    animation: aparecerDesdeAbajo 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    will-change: transform, opacity;
}

/* 2. Para lo que espera a que el usuario baje (Controlado por tu script.js) */
.revelar-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}
.revelar-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Base de la animación reutilizada */
@keyframes aparecerDesdeAbajo {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   ANIMACIONES AVANZADAS PROFESIONALES
   ========================================== */

/* Animación de Brillo Suave en Tarjetas */
@keyframes brilloSuave {
    0% {
        box-shadow: 0 0 0 0 rgba(65, 235, 77, 0);
    }
    50% {
        box-shadow: 0 0 16px 4px rgba(65, 235, 77, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(65, 235, 77, 0);
    }
}

/* Animación de Movimiento Flotante */
@keyframes flotarSuave {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Animación de Expansión en Hover */
@keyframes expansionPulso {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 24px rgba(65, 235, 77, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* Animación de Deslizamiento Suave */
@keyframes deslizarDesdeIzq {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes deslizarDesdeDer {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de Rotación Sutil */
@keyframes rotacionSutil {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

/* Animación de Destello */
@keyframes destello {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Aplicar animaciones a elementos interactivos */
.dato-bloque {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s ease;
}

.dato-bloque:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(65, 235, 77, 0.15);
}

.plan-tarjeta,
.consulta-tarjeta,
.pilar-tarjeta,
.topologia-tarjeta,
.sistema-tarjeta,
.fttx-tarjeta-servicio,
.dc-tarjeta-servicio,
.infra-tarjeta-servicio,
.soft-tarjeta-servicio {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.plan-tarjeta:hover,
.consulta-tarjeta:hover,
.pilar-tarjeta:hover,
.topologia-tarjeta:hover,
.sistema-tarjeta:hover,
.fttx-tarjeta-servicio:hover,
.dc-tarjeta-servicio:hover,
.infra-tarjeta-servicio:hover,
.soft-tarjeta-servicio:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(65, 235, 77, 0.2);
    border-color: rgba(65, 235, 77, 0.3);
}

/* Animación en botones */
.btn-cotiza,
.btn-plan,
.btn-enviar-formulario,
.nav-btn-cotiza,
.btn-cotiza-dc,
.btn-cotiza-fttx,
.btn-sistemas-diagnostico,
.btn-infra-accion,
.btn-soft-accion {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-cotiza:hover,
.btn-plan:hover,
.btn-enviar-formulario:hover,
.nav-btn-cotiza:hover,
.btn-cotiza-dc:hover,
.btn-cotiza-fttx:hover,
.btn-sistemas-diagnostico:hover,
.btn-infra-accion:hover,
.btn-soft-accion:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(65, 235, 77, 0.25);
}

/* Efecto Ripple en Botones */
.btn-cotiza::before,
.btn-plan::before,
.btn-enviar-formulario::before,
.nav-btn-cotiza::before,
.btn-cotiza-dc::before,
.btn-cotiza-fttx::before,
.btn-sistemas-diagnostico::before,
.btn-infra-accion::before,
.btn-soft-accion::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn-cotiza:active::before,
.btn-plan:active::before,
.btn-enviar-formulario:active::before,
.nav-btn-cotiza:active::before,
.btn-cotiza-dc:active::before,
.btn-cotiza-fttx:active::before,
.btn-sistemas-diagnostico:active::before,
.btn-infra-accion:active::before,
.btn-soft-accion:active::before {
    animation: ondaRipple 0.6s ease-out;
}

@keyframes ondaRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Animación en enlaces */
.submenu-servicios a,
.submenu-imple a,
.footer-enlaces a {
    position: relative;
    transition: color 0.3s ease;
}

.submenu-servicios a::after,
.submenu-imple a::after,
.footer-enlaces a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--verdespan);
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.submenu-servicios a:hover::after,
.submenu-imple a:hover::after,
.footer-enlaces a:hover::after {
    width: 100%;
}

/* ==========================================
   RESPONSIVE — TABLET Y MÓVIL (VERTICAL)
   ========================================== */

@media (max-width: 1200px) {
    .contenedor {
        width: 100%;
        max-width: 120rem;
        padding-left: 3rem;
        padding-right: 3rem;
        box-sizing: border-box;
    }
}

@media (max-width: 1024px) {
    .nav-hamburguesa {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        width: 4.4rem;
        height: 4.4rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1002;
        flex-shrink: 0;
    }

    .nav-hamburguesa span {
        display: block;
        width: 2.4rem;
        height: 0.2rem;
        background-color: var(--blanco);
        border-radius: 0.2rem;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .nav-hamburguesa.activo span:nth-child(1) {
        transform: translateY(0.7rem) rotate(45deg);
    }

    .nav-hamburguesa.activo span:nth-child(2) {
        opacity: 0;
    }

    .nav-hamburguesa.activo span:nth-child(3) {
        transform: translateY(-0.7rem) rotate(-45deg);
    }

    body.menu-abierto {
        overflow: hidden;
    }

    .menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(34rem, 88vw);
        height: 100vh;
        height: 100dvh;
        max-height: calc(100dvh - 1.2rem);
        background-color: var(--azul_oscuro);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 7rem 2.2rem 2rem;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        z-index: 1001;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s ease,
                    visibility 0.35s ease;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
    }

    .menu.abierto {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .menu > li {
        width: 100%;
        padding: 0.95rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .menu > li:last-child {
        border-bottom: none;
        padding-top: 1.2rem;
    }

    .padre {
        width: 100%;
    }

    .submenu-servicios,
    .submenu-imple {
        display: none;
        position: static;
        margin-top: 0.6rem;
        margin-left: 0;
        min-width: unset;
        width: 100%;
        box-shadow: none;
        transform: none !important;
        padding: 0.8rem 0.9rem;
    }

    .submenu-servicios.mostrar,
    .submenu-imple.mostrar {
        display: block;
    }

    .submenu-imple {
        margin-left: 1rem;
        width: calc(100% - 1rem);
    }

    .nav-spacer {
        height: 9rem;
    }

    .inicio #parte-arriba {
        padding-top: 9rem;
    }

    .logo-contenedor img {
        height: 6rem;
    }

    .title,
    .nosotros-titulo,
    .cotiza-titulo,
    .planes-titulo,
    .consultas-titulo,
    .dc-titulo,
    .fttx-titulo,
    .sistemas-titulo,
    .infra-titulo,
    .soft-titulo {
        font-size: 5rem;
    }

    .titulo-proyectos,
    .dc-proceso-titulo {
        font-size: 3.8rem;
    }

    .nosotros-titulo,
    .nosotros-descripcion {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .pilares-grid,
    .consultas-grid {
        grid-template-columns: 1fr;
    }

    .planes-grid,
    .dc-services-grid,
    .topologias-grid,
    .fttx-services-grid,
    .sistemas-grid,
    .infra-services-grid,
    .soft-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cotiza-grid,
    .dc-proceso-grid {
        flex-direction: column;
        gap: 4rem;
    }

    .dc-proceso-lista-bloque {
        margin-left: 0;
    }

    .footer-contenido {
        flex-wrap: wrap;
        gap: 4rem 3rem;
    }

    .footer-columna {
        flex: 1 1 calc(50% - 2rem);
        min-width: 22rem;
    }

    .col-logo {
        flex: 1 1 100%;
    }

    .barra-inferior-contenido {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .contenedor {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .btn-cotiza,
    .btn-plan,
    .btn-enviar-formulario,
    .nav-btn-cotiza,
    .btn-cotiza-dc,
    .btn-cotiza-fttx,
    .btn-sistemas-diagnostico,
    .btn-infra-accion,
    .btn-soft-accion,
    .btn-secundario-fttx,
    .btn-secundario-dc,
    .btn-secundario-consultas,
    .btn-secundario-nosotros,
    .btn-secundario-sistemas,
    .btn-secundario-solar {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
        height: auto;
        padding: 1.3rem 1.8rem;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    .title {
        font-size: 3.6rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .texto {
        font-size: 1.7rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .ovalo-letras {
        margin-left: 2rem;
    }

    #btn-index {
        margin-left: 2rem;
        margin-top: 3rem;
        margin-bottom: 6rem;
        height: 4.6rem;
        font-size: 1.5rem;
        padding: 0 3rem;
    }

    .nav-spacer {
        height: 8rem;
    }

    .inicio #parte-arriba {
        padding-top: 8rem;
    }

    .logo-contenedor img {
        height: 5.5rem;
    }

    .title,
    .nosotros-titulo,
    .cotiza-titulo,
    .planes-titulo,
    .consultas-titulo,
    .dc-titulo,
    .fttx-titulo,
    .sistemas-titulo,
    .infra-titulo,
    .soft-titulo {
        font-size: 3.6rem;
    }

    .titulo-proyectos,
    .dc-proceso-titulo {
        font-size: 3rem;
    }

    .descripcion-proyectos,
    .nosotros-descripcion,
    .cotiza-descripcion {
        font-size: 1.6rem;
    }

    .datos-grid {
        flex-direction: column;
        gap: 4rem;
    }

    .dato-numero {
        font-size: 4.5rem;
    }

    .proyecto-media {
        height: 28rem;
        margin-bottom: 2rem;
    }

    .proyectos-contenido {
        gap: 3rem;
    }

    .parte-medio,
    .parte-abajo {
        padding: 5rem 0;
    }

    .nosotros-imagen-marco {
        height: 28rem;
        border-radius: 4rem;
    }

    .pilar-tarjeta {
        padding: 3rem;
        border-radius: 3rem;
    }

    .pilares-grid,
    .planes-grid,
    .consultas-grid,
    .dc-services-grid,
    .topologias-grid,
    .fttx-services-grid,
    .sistemas-grid,
    .infra-services-grid,
    .infra-metricas-grid,
    .soft-services-grid,
    .dc-metricas-bloque {
        grid-template-columns: 1fr;
    }

    .footer-contenido {
        flex-direction: column;
        gap: 3.5rem;
    }

    .footer-columna {
        flex: 1 1 100%;
        min-width: unset;
    }

    .nav-btn-cotiza {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        height: 4.2rem;
        font-size: 1.4rem;
        padding: 0 2rem;
    }

    .info-tarjeta-mini {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .cotiza-formulario-wrapper {
        padding: 3rem 2rem;
    }

    .soft-hero-contenido {
        width: 100%;
    }

    .soft-editor-ventana {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .soft-editor-header {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.4rem 1.6rem;
    }

    .soft-editor-archivo {
        margin-left: 0;
        font-size: 1.2rem;
        width: 100%;
    }

    .soft-editor-cuerpo {
        padding: 2rem 1.4rem;
    }

    .soft-services-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .soft-tech-row,
    .soft-row-inferior {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        width: 100%;
    }

    .tech-badge {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .btn-soft-accion {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
        padding: 1.3rem 1.8rem;
    }
}

@media (max-width: 480px) {
    .title,
    .nosotros-titulo,
    .cotiza-titulo,
    .planes-titulo,
    .consultas-titulo,
    .dc-titulo,
    .fttx-titulo,
    .sistemas-titulo,
    .infra-titulo,
    .soft-titulo {
        font-size: 3rem;
    }

    .titulo-proyectos {
        font-size: 2.6rem;
    }

    .texto-ovalo {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .ovalo-letras {
        padding: 0.6rem 1.4rem;
    }
}
/* ==========================================
   MEJORAS LANDING FTTX IMPLEMEX
   ========================================== */

.fttx-hero-premium {
    padding-top: 4rem;
    padding-bottom: 5rem;
    background:
        radial-gradient(circle at top center, rgba(65, 235, 77, 0.08), transparent 35%),
        var(--fondo);
}

.fttx-hero-botones {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.btn-secundario-fttx {
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secundario-fttx:hover {
    border-color: var(--verdelogo);
    color: var(--verdelogo);
    transform: translateY(-2px);
}

.fttx-imagen-premium {
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(65, 235, 77, 0.12);
}

.fttx-metricas-grid {
    width: 100%;
    max-width: 95rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.fttx-metrica {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
        border-radius: 2rem;
    padding: 2.5rem 2rem;
    text-align: center;
}

.fttx-metrica strong {
    display: block;
    color: var(--verdelogo);
    font-size: 2.6rem;
    font-family: var(--fuente-titulos);
    margin-bottom: 0.8rem;
}

.fttx-metrica span {
    color: var(--blanco);
    opacity: 0.6;
    font-size: 1.3rem;
}

.topologias-grid-mejorado {
    grid-template-columns: repeat(4, 1fr);
}

.fttx-tech-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.fttx-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.fttx-tech-card {
    background-color: rgba(50, 56, 93, 0.32);
    border: 1px solid rgba(65, 235, 77, 0.08);
    border-radius: 2.5rem;
    padding: 3.5rem 3rem;
    min-height: 24rem;
    transition: all 0.3s ease;
}

.fttx-tech-card:hover {
    transform: translateY(-8px);
    border-color: rgba(65, 235, 77, 0.3);
    box-shadow: 0 16px 40px rgba(65, 235, 77, 0.15);
}

.fttx-tech-card h3 {
    color: var(--verdelogo);
    font-size: 2.6rem;
    margin: 0 0 1.5rem 0;
}

.fttx-tech-card p {
    color: var(--blanco);
    opacity: 0.65;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.fttx-tech-card span {
    display: inline-flex;
    color: var(--fondo);
    background-color: var(--verdelogo);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.8rem 1.5rem;
    border-radius: 5rem;
}

.servicios-title-mejorado {
    text-align: center;
}

.servicios-title-mejorado h2 {
    margin-left: 0;
    font-size: 4rem;
}

.fttx-icono-wrapper {
    font-size: 2.8rem;
}

.fttx-proceso-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.fttx-proceso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.fttx-proceso-item {
    background-color: var(--azul_claro);
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    border: 1px solid rgba(255,255,255,0.03);
}

.fttx-proceso-item span {
    color: var(--verdelogo);
    font-size: 2.8rem;
    font-weight: bold;
    font-family: var(--fuente-titulos);
}

.fttx-proceso-item p {
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.fttx-paquetes-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.fttx-paquetes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.fttx-paquete-card {
    background-color: var(--azul_claro);
    border-radius: 2.8rem;
    padding: 4rem;
    border: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
}

.paquete-destacado {
    border-color: rgba(65, 235, 77, 0.35);
    box-shadow: 0 20px 60px rgba(65, 235, 77, 0.12);
    transform: translateY(-1rem);
}

.paquete-etiqueta {
    color: var(--verdelogo);
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.fttx-paquete-card h3 {
    color: var(--blanco);
    font-size: 2.6rem;
    margin: 0 0 2rem 0;
}

.paquete-precio {
    color: var(--verdelogo);
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0 0 3rem 0;
    font-family: var(--fuente-titulos);
}

.paquete-precio span {
    color: var(--blanco);
    opacity: 0.5;
    font-size: 1.5rem;
}

.fttx-paquete-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 4rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.fttx-paquete-card li {
    color: var(--blanco);
    opacity: 0.65;
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    padding-bottom: 1rem;
}

.fttx-paquete-card li::before {
    content: "✓";
    color: var(--verdelogo);
    font-weight: bold;
    margin-right: 1rem;
}

.fttx-cta-final {
    background-color: var(--fondo);
    padding: 6rem 0 10rem 0;
}

.fttx-cta-box {
    background:
        linear-gradient(135deg, rgba(65,235,77,0.14), rgba(50,56,93,0.35)),
        var(--azul_claro);
    border: 1px solid rgba(65,235,77,0.18);
    border-radius: 3rem;
    padding: 6rem;
    text-align: center;
}

.fttx-cta-box h2 {
    color: var(--blanco);
    font-size: 4.5rem;
    margin: 0 0 2rem 0;
}

.fttx-cta-box p {
    color: var(--blanco);
    opacity: 0.65;
    font-size: 1.8rem;
    line-height: 1.6;
    max-width: 75rem;
    margin: 0 auto 4rem auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .contenedor {
        width: min(92%, 110rem);
    }

    .topologias-grid-mejorado,
    .fttx-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fttx-metricas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fttx-titulo {
        font-size: 4.2rem;
    }

    .fttx-descripcion {
        font-size: 1.6rem;
        margin: 0 1rem 4rem 1rem;
    }

    .fttx-imagen-principal {
        height: 28rem;
    }

    .topologias-grid,
    .topologias-grid-mejorado,
    .fttx-services-grid,
    .fttx-tech-grid,
    .fttx-proceso-grid,
    .fttx-paquetes-grid,
    .fttx-metricas-grid {
        grid-template-columns: 1fr;
    }

    .topologias-header h2,
    .servicios-title-mejorado h2,
    .fttx-cta-box h2 {
        font-size: 3.2rem;
    }

    .fttx-cta-box {
        padding: 4rem 2.5rem;
    }

    .paquete-destacado {
        transform: none;
    }

    .fttx-hero-botones {
        flex-direction: column;
    }

    .btn-cotiza-fttx,
    .btn-secundario-fttx {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================
   MEJORAS DATA CENTER / ISP / EMPRESAS
   ========================================== */

.dc-hero-premium {
    padding-top: 4rem;
    padding-bottom: 6rem;
    background:
        radial-gradient(circle at top center, rgba(65, 235, 77, 0.08), transparent 38%),
        var(--fondo);
}

.dc-badges-clientes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.5rem;
}

.dc-badges-clientes span {
    color: var(--verdelogo);
    border: 1px solid rgba(65, 235, 77, 0.28);
    background-color: rgba(65, 235, 77, 0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.dc-hero-botones {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

.btn-secundario-dc {
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secundario-dc:hover {
    color: var(--verdelogo);
    border-color: var(--verdelogo);
    transform: translateY(-2px);
}

.dc-imagen-premium {
    box-shadow: 0 25px 80px rgba(0,0,0,0.45);
    border: 1px solid rgba(65,235,77,0.12);
}

.dc-metricas-hero {
    width: 100%;
    max-width: 95rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.dc-metricas-hero div {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 2.5rem 2rem;
    text-align: center;
}

.dc-metricas-hero strong {
    display: block;
    color: var(--verdelogo);
    font-size: 2.6rem;
    font-family: var(--fuente-titulos);
    margin-bottom: 0.8rem;
}

.dc-metricas-hero span {
    color: var(--blanco);
    opacity: 0.6;
    font-size: 1.3rem;
}

.dc-header-centro {
    text-align: center;
    margin-bottom: 5rem;
}

.dc-header-centro h2 {
    color: var(--blanco);
    font-size: 4.5rem;
    line-height: 1.2;
    margin: 0;
}

.dc-soluciones-seccion,
.dc-casos-seccion,
.dc-fabricantes-seccion,
.dc-paquetes-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.dc-services-grid-mejorado {
    grid-template-columns: repeat(4, 1fr);
}

.dc-icono-wrapper {
    color: var(--verdelogo);
    margin-bottom: 2.5rem;
}

.dc-casos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.dc-caso-card,
.dc-paquete-card {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2.5rem;
    padding: 3.5rem;
    transition: all 0.3s ease;
}

.dc-caso-card:hover,
.dc-paquete-card:hover {
    transform: translateY(-8px);
    border-color: rgba(65,235,77,0.28);
    box-shadow: 0 16px 40px rgba(65,235,77,0.16);
}

.dc-caso-card h3,
.dc-paquete-card h3 {
    color: var(--blanco);
    font-size: 2.3rem;
    margin: 0 0 2rem 0;
}

.dc-caso-card ul,
.dc-paquete-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.dc-caso-card li,
.dc-paquete-card li {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.5;
}

.dc-caso-card li::before,
.dc-paquete-card li::before {
    content: "✓";
    color: var(--verdelogo);
    font-weight: bold;
    margin-right: 0.8rem;
}

.dc-marcas-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.dc-marcas-grid span {
    background-color: var(--azul_claro);
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 1.8rem;
    padding: 2rem;
    text-align: center;
    font-weight: 700;
    opacity: 0.78;
}

.dc-checklist li {
    color: var(--blanco);
    font-size: 1.8rem;
    opacity: 0.82;
}

.dc-checklist li span {
    color: var(--verdespan);
    font-weight: 900;
    margin-right: 1rem;
}

.dc-paquetes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.dc-paquete-card {
    display: flex;
    flex-direction: column;
}

.dc-paquete-card > span {
    color: var(--verdelogo);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.dc-paquete-destacado {
    border-color: rgba(65,235,77,0.38);
    box-shadow: 0 22px 65px rgba(65,235,77,0.13);
    transform: translateY(-1rem);
}

.dc-cta-final {
    background-color: var(--fondo);
    padding: 6rem 0 10rem 0;
}

.dc-cta-box {
    background:
        linear-gradient(135deg, rgba(65,235,77,0.14), rgba(50,56,93,0.35)),
        var(--azul_claro);
    border: 1px solid rgba(65,235,77,0.2);
    border-radius: 3rem;
    padding: 6rem;
    text-align: center;
}

.dc-cta-box h2 {
    color: var(--blanco);
    font-size: 4.5rem;
    margin: 0 0 2rem 0;
}

.dc-cta-box p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.8rem;
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto 4rem auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .dc-services-grid-mejorado,
    .dc-casos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dc-metricas-hero,
    .dc-marcas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dc-titulo {
        font-size: 4.2rem;
    }

    .dc-descripcion {
        font-size: 1.6rem;
        margin: 0 1rem 4rem 1rem;
    }

    .dc-imagen-principal {
        height: 28rem;
    }

    .dc-services-grid-mejorado,
    .dc-casos-grid,
    .dc-metricas-hero,
    .dc-marcas-grid,
    .dc-paquetes-grid,
    .dc-metricas-bloque {
        grid-template-columns: 1fr;
    }

    .dc-proceso-grid {
        flex-direction: column;
        gap: 4rem;
    }

    .dc-proceso-lista-bloque {
        margin-left: 0;
    }

    .dc-header-centro h2,
    .dc-cta-box h2,
    .dc-proceso-titulo {
        font-size: 3.2rem;
    }

    .dc-cta-box {
        padding: 4rem 2.5rem;
    }

    .dc-paquete-destacado {
        transform: none;
    }

    .dc-hero-botones {
        flex-direction: column;
    }

    .btn-cotiza-dc,
    .btn-secundario-dc {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================
   MEJORAS CONSULTORÍA / ISP / EMPRESAS
   ========================================== */

.consultas-hero-premium {
    padding-top: 4rem;
    padding-bottom: 7rem;
    background:
        radial-gradient(circle at top center, rgba(65,235,77,0.08), transparent 38%),
        var(--fondo);
}

.consultas-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.5rem;
}

.consultas-badges span {
    color: var(--verdelogo);
    border: 1px solid rgba(65,235,77,0.28);
    background-color: rgba(65,235,77,0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.consultas-hero-botones {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secundario-consultas {
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secundario-consultas:hover {
    color: var(--verdelogo);
    border-color: var(--verdelogo);
    transform: translateY(-2px);
}

.consultas-seccion-premium,
.consultas-proceso-seccion,
.consultas-clientes-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.consultas-header-centro {
    text-align: center;
    margin-bottom: 5rem;
}

.consultas-header-centro h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    line-height: 1.2;
    margin: 0;
}

.consultas-grid-mejorado {
    grid-template-columns: repeat(3, 1fr);
}

.consulta-icono {
    font-size: 3rem;
    color: var(--verdelogo);
}

.consultas-proceso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.consultas-proceso-item {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.consultas-proceso-item span {
    color: var(--verdelogo);
    font-size: 2.8rem;
    font-weight: 800;
    font-family: var(--fuente-titulos);
}

.consultas-proceso-item p {
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.consultas-clientes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.consultas-cliente-card {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2.5rem;
    padding: 3.5rem;
    transition: all 0.3s ease;
}

.consultas-cliente-card:hover {
    transform: translateY(-8px);
    border-color: rgba(65,235,77,0.28);
    box-shadow: 0 16px 40px rgba(65,235,77,0.16);
}

.consultas-cliente-card h3 {
    color: var(--verdelogo);
    font-size: 2.3rem;
    margin: 0 0 1.5rem 0;
}

.consultas-cliente-card p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}

.consultas-cta-final {
    background-color: var(--fondo);
    padding: 6rem 0 10rem 0;
}

.consultas-cta-box {
    background:
        linear-gradient(135deg, rgba(65,235,77,0.14), rgba(50,56,93,0.35)),
        var(--azul_claro);
    border: 1px solid rgba(65,235,77,0.2);
    border-radius: 3rem;
    padding: 6rem;
    text-align: center;
}

.consultas-cta-box h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    margin: 0 0 2rem 0;
}

.consultas-cta-box p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.8rem;
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto 4rem auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .consultas-grid-mejorado,
    .consultas-proceso-grid,
    .consultas-clientes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .consultas-titulo {
        font-size: 4.2rem;
    }

    .consultas-descripcion {
        font-size: 1.6rem;
        margin: 0 1rem 4rem 1rem;
    }

    .consultas-grid-mejorado,
    .consultas-proceso-grid,
    .consultas-clientes-grid {
        grid-template-columns: 1fr;
    }

    .consultas-header-centro h2,
    .consultas-cta-box h2 {
        font-size: 3.2rem;
    }

    .consultas-cta-box {
        padding: 4rem 2.5rem;
    }

    .consultas-hero-botones {
        flex-direction: column;
    }

    .btn-cotiza-fttx,
    .btn-secundario-consultas {
        width: 100%;
        justify-content: center;
    }
}
.fttx-badges-clientes,
.fttx-hero-botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.5rem;
}

.fttx-badges-clientes span {
    color: var(--verdelogo);
    border: 1px solid rgba(65,235,77,0.28);
    background-color: rgba(65,235,77,0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.fttx-fabricantes-seccion,
.fttx-clientes-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.fttx-clientes-grid,
.fttx-marcas-grid {
    display: grid;
    gap: 2.5rem;
}

.fttx-clientes-grid {
    grid-template-columns: repeat(4, 1fr);
}

.fttx-marcas-grid {
    grid-template-columns: repeat(4, 1fr);
}

.fttx-cliente-card,
.fttx-marcas-grid span {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2.2rem;
    padding: 3rem;
}

.fttx-cliente-card h3 {
    color: var(--verdelogo);
    font-size: 2.2rem;
    margin: 0 0 1.5rem 0;
}

.fttx-cliente-card p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}

.fttx-marcas-grid span {
    color: var(--blanco);
    text-align: center;
    font-weight: 700;
    opacity: 0.78;
}

.fttx-icono-wrapper svg {
    stroke: var(--verdelogo);
}

@media (max-width: 1200px) {
    .fttx-clientes-grid,
    .fttx-marcas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fttx-clientes-grid,
    .fttx-marcas-grid {
        grid-template-columns: 1fr;
    }
}
.dc-icono-wrapper svg {
    stroke: var(--verdelogo);
}
/* ==========================================
   MEJORAS NOSOTROS IMPLEMEX
   ========================================== */

.nosotros-hero-premium {
    padding-top: 4rem;
    padding-bottom: 6rem;
    background:
        radial-gradient(circle at top center, rgba(65,235,77,0.08), transparent 38%),
        var(--fondo);
}

.nosotros-badges,
.nosotros-botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.5rem;
}

.nosotros-badges span {
    color: var(--verdelogo);
    border: 1px solid rgba(65,235,77,0.28);
    background-color: rgba(65,235,77,0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.btn-secundario-nosotros {
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secundario-nosotros:hover {
    color: var(--verdelogo);
    border-color: var(--verdelogo);
    transform: translateY(-2px);
}

.nosotros-imagen-premium {
    box-shadow: 0 25px 80px rgba(0,0,0,0.45);
    border: 1px solid rgba(65,235,77,0.12);
}

.nosotros-metricas-grid {
    width: 100%;
    max-width: 95rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.nosotros-metrica {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 2.5rem 2rem;
        text-align: center;
}

.nosotros-metrica strong {
    display: block;
    color: var(--verdelogo);
    font-size: 2.6rem;
    font-family: var(--fuente-titulos);
    margin-bottom: 0.8rem;
}

.nosotros-metrica span {
    color: var(--blanco);
    opacity: 0.6;
    font-size: 1.3rem;
}

.nosotros-header-centro {
    text-align: center;
    margin-bottom: 5rem;
}

.nosotros-header-centro h2 {
    color: var(--blanco);
    font-size: 4.3rem;
    line-height: 1.2;
    margin: 0 0 2rem 0;
}

.nosotros-header-centro p {
    color: var(--blanco);
    opacity: 0.65;
    font-size: 1.7rem;
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto;
}

.nosotros-pilares-premium,
.nosotros-servicios-seccion,
.nosotros-clientes-seccion,
.nosotros-proceso-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.pilares-grid-mejorado {
    grid-template-columns: repeat(4, 1fr);
}

.nosotros-servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
}

.nosotros-servicio-card,
.nosotros-cliente-card {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2.5rem;
    padding: 3.5rem;
    transition: all 0.3s ease;
}

.nosotros-servicio-card:hover,
.nosotros-cliente-card:hover {
    transform: translateY(-8px);
    border-color: rgba(65,235,77,0.28);
    box-shadow: 0 16px 40px rgba(65,235,77,0.16);
}

.nosotros-servicio-card h3,
.nosotros-cliente-card h3 {
    color: var(--verdelogo);
    font-size: 2.3rem;
    margin: 0 0 1.5rem 0;
}

.nosotros-servicio-card p,
.nosotros-cliente-card p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}

.nosotros-clientes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.nosotros-proceso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.nosotros-proceso-item {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nosotros-proceso-item span {
    color: var(--verdelogo);
    font-size: 2.8rem;
    font-weight: 800;
    font-family: var(--fuente-titulos);
}

.nosotros-proceso-item p {
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.nosotros-cta-final {
    background-color: var(--fondo);
    padding: 6rem 0 10rem 0;
}

.nosotros-cta-box {
    background:
        linear-gradient(135deg, rgba(65,235,77,0.14), rgba(50,56,93,0.35)),
        var(--azul_claro);
    border: 1px solid rgba(65,235,77,0.2);
    border-radius: 3rem;
    padding: 6rem;
    text-align: center;
}

.nosotros-cta-box h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    margin: 0 0 2rem 0;
}

.nosotros-cta-box p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.8rem;
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto 4rem auto;
}

/* Responsive */
@media (max-width: 1200px) {
    .pilares-grid-mejorado,
    .nosotros-servicios-grid,
    .nosotros-clientes-grid,
    .nosotros-proceso-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nosotros-metricas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .nosotros-titulo {
        font-size: 4.2rem;
    }

    .nosotros-descripcion {
        font-size: 1.6rem;
        margin: 0 1rem 4rem 1rem;
    }

    .pilares-grid-mejorado,
    .nosotros-servicios-grid,
    .nosotros-clientes-grid,
    .nosotros-proceso-grid,
    .nosotros-metricas-grid {
        grid-template-columns: 1fr;
    }

    .nosotros-header-centro h2,
    .nosotros-cta-box h2 {
        font-size: 3.2rem;
    }

    .nosotros-cta-box {
        padding: 4rem 2.5rem;
    }

    .nosotros-botones {
        flex-direction: column;
    }

    .btn-cotiza-fttx,
    .btn-secundario-nosotros {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================
   MEJORAS SISTEMAS ELÉCTRICOS Y CLIMA
   ========================================== */

.sistemas-hero-premium {
    padding-top: 4rem;
    padding-bottom: 7rem;
    background:
        radial-gradient(circle at top center, rgba(65,235,77,0.08), transparent 38%),
        var(--fondo);
}

.sistemas-badges,
.sistemas-hero-botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.5rem;
}

.sistemas-badges span {
    color: var(--verdelogo);
    border: 1px solid rgba(65,235,77,0.28);
    background-color: rgba(65,235,77,0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.btn-secundario-sistemas {
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secundario-sistemas:hover {
    color: var(--verdelogo);
    border-color: var(--verdelogo);
    transform: translateY(-2px);
}

.sistemas-metricas-grid {
    width: 100%;
    max-width: 95rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 1rem;
}

.sistemas-metrica {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 2.5rem 2rem;
    text-align: center;
}

.sistemas-metrica strong {
    display: block;
    color: var(--verdelogo);
    font-size: 2.6rem;
    font-family: var(--fuente-titulos);
    margin-bottom: 0.8rem;
}

.sistemas-metrica span {
    color: var(--blanco);
    opacity: 0.6;
    font-size: 1.3rem;
}

.sistemas-seccion-premium,
.sistemas-clientes-seccion,
.sistemas-proceso-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.categoria-header-premium {
    justify-content: center;
    margin-bottom: 5rem;
}

.categoria-icono-premium {
    color: var(--verdelogo);
    display: flex;
    align-items: center;
}

.categoria-icono-premium svg {
    stroke: var(--verdelogo);
}

.sistemas-grid-mejorado {
    grid-template-columns: repeat(3, 1fr);
}

.sistemas-header-centro {
    text-align: center;
    margin-bottom: 5rem;
}

.sistemas-header-centro h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    line-height: 1.2;
    margin: 0;
}

.sistemas-clientes-grid,
.sistemas-proceso-grid {
    display: grid;
    gap: 3rem;
}

.sistemas-clientes-grid {
    grid-template-columns: repeat(4, 1fr);
}

.sistemas-proceso-grid {
    grid-template-columns: repeat(3, 1fr);
}

.sistemas-cliente-card,
.sistemas-proceso-item {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2.5rem;
    padding: 3.5rem;
    transition: all 0.3s ease;
}

.sistemas-cliente-card:hover,
.sistemas-proceso-item:hover {
    transform: translateY(-8px);
    border-color: rgba(65,235,77,0.28);
    box-shadow: 0 16px 40px rgba(65,235,77,0.16);
}

.sistemas-cliente-card h3 {
    color: var(--verdelogo);
    font-size: 2.3rem;
    margin: 0 0 1.5rem 0;
}

.sistemas-cliente-card p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}

.sistemas-proceso-item {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sistemas-proceso-item span {
    color: var(--verdelogo);
    font-size: 2.8rem;
    font-weight: 800;
    font-family: var(--fuente-titulos);
}

.sistemas-proceso-item p {
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.sistemas-cta-final {
    background-color: var(--fondo);
    padding: 6rem 0 10rem 0;
}

.sistemas-cta-box {
    background:
        linear-gradient(135deg, rgba(65,235,77,0.14), rgba(50,56,93,0.35)),
        var(--azul_claro);
    border: 1px solid rgba(65,235,77,0.2);
    border-radius: 3rem;
    padding: 6rem;
    text-align: center;
}

.sistemas-cta-box h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    margin: 0 0 2rem 0;
}

.sistemas-cta-box p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.8rem;
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto 4rem auto;
}

.sistema-icono svg {
    stroke: var(--verdelogo);
}

/* Responsive */
@media (max-width: 1200px) {
    .sistemas-grid-mejorado,
    .sistemas-clientes-grid,
    .sistemas-proceso-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sistemas-metricas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sistemas-titulo {
        font-size: 4.2rem;
    }

    .sistemas-descripcion {
        font-size: 1.6rem;
        margin: 0 1rem 4rem 1rem;
    }

    .sistemas-grid-mejorado,
    .sistemas-clientes-grid,
    .sistemas-proceso-grid,
    .sistemas-metricas-grid {
        grid-template-columns: 1fr;
    }

    .sistemas-header-centro h2,
    .sistemas-cta-box h2 {
        font-size: 3.2rem;
    }

    .sistemas-cta-box {
        padding: 4rem 2.5rem;
    }

    .sistemas-hero-botones {
        flex-direction: column;
    }

    .btn-sistemas-diagnostico,
    .btn-secundario-sistemas {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================
   PÁGINA SOLAR / INTERCONEXIÓN CFE
   ========================================== */

.solar-hero {
    background:
        radial-gradient(circle at top center, rgba(65,235,77,0.10), transparent 38%),
        var(--fondo);
    padding-top: 4rem;
    padding-bottom: 7rem;
}

.solar-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.solar-no-mb {
    margin-left: 0;
    margin-top: 5rem;
    margin-bottom: 0;
}

.solar-titulo {
    font-size: 7rem;
    font-weight: bold;
    color: var(--blanco);
    line-height: 1.1;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.solar-descripcion {
    font-size: 2rem;
    color: var(--blanco);
    opacity: 0.65;
    line-height: 1.5;
    margin: 0 max(4rem, 20rem) 4rem max(4rem, 20rem);
}

.solar-badges,
.solar-hero-botones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 3.5rem;
}

.solar-badges span {
    color: var(--verdelogo);
    border: 1px solid rgba(65,235,77,0.28);
    background-color: rgba(65,235,77,0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.btn-solar-principal,
.btn-solar-secundario {
    border-radius: 5rem;
    padding: 1.8rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-solar-principal {
    background-color: var(--verdelogo);
    color: var(--fondo);
}

.btn-solar-secundario {
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.15);
}

.btn-solar-principal:hover,
.btn-solar-secundario:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(65,235,77,0.22);
}

.btn-solar-secundario:hover {
    color: var(--verdelogo);
    border-color: var(--verdelogo);
}

.solar-imagen-principal {
    width: 100%;
    max-width: 95rem;
    height: 42rem;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid rgba(65,235,77,0.12);
    box-shadow: 0 25px 80px rgba(0,0,0,0.45);
}

.solar-imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solar-metricas-grid {
    width: 100%;
    max-width: 95rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.solar-metrica {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 2.5rem 2rem;
    text-align: center;
}

.solar-metrica strong {
    display: block;
    color: var(--verdelogo);
    font-size: 2.6rem;
    font-family: var(--fuente-titulos);
    margin-bottom: 0.8rem;
}

.solar-metrica span {
    color: var(--blanco);
    opacity: 0.6;
    font-size: 1.3rem;
}

.solar-beneficios-seccion,
.solar-servicios-seccion,
.solar-requisitos-seccion,
.solar-proceso-seccion,
.solar-instalacion-seccion,
.solar-tiempo-seccion,
.solar-faq-seccion,
.solar-normativa-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.solar-header-centro {
    text-align: center;
    margin-bottom: 5rem;
}

.solar-header-centro h2 {
    color: var(--blanco);
    font-size: 4.3rem;
    line-height: 1.2;
    margin: 0;
}

.solar-beneficios-grid,
.solar-servicios-grid,
.solar-requisitos-grid,
.solar-faq-grid,
.solar-normativa-grid {
    display: grid;
    gap: 3rem;
}

.solar-beneficios-grid {
    grid-template-columns: repeat(4, 1fr);
}

.solar-servicios-grid {
    grid-template-columns: repeat(3, 1fr);
}

.solar-requisitos-grid {
    grid-template-columns: repeat(3, 1fr);
}

.solar-faq-grid {
    grid-template-columns: repeat(2, 1fr);
}

.solar-card,
.solar-requisito-card,
.solar-faq-card,
.solar-tiempo-card,
.solar-instalacion-item,
.solar-proceso-item {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2.5rem;
    padding: 3.5rem;
    transition: all 0.3s ease;
}

.solar-card:hover,
.solar-requisito-card:hover,
.solar-faq-card:hover,
.solar-tiempo-card:hover,
.solar-instalacion-item:hover,
.solar-proceso-item:hover {
    transform: translateY(-8px);
    border-color: rgba(65,235,77,0.28);
    box-shadow: 0 16px 40px rgba(65,235,77,0.16);
}

.solar-icono {
    color: var(--verdelogo);
    margin-bottom: 2rem;
}

.solar-icono svg {
    stroke: var(--verdelogo);
}

.solar-card h3,
.solar-requisito-card h3,
.solar-faq-card h3,
.solar-instalacion-item h3,
.solar-tiempo-card h3 {
    color: var(--verdelogo);
    font-size: 2.3rem;
    margin: 0 0 1.5rem 0;
}

.solar-card p,
.solar-faq-card p,
.solar-instalacion-item p,
.solar-tiempo-card p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}

.solar-requisito-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solar-requisito-card li {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1.3rem;
}

.solar-requisito-card li::before {
    content: "✓";
    color: var(--verdelogo);
    font-weight: bold;
    margin-right: 0.8rem;
}

.solar-proceso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.solar-proceso-item {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.solar-proceso-item span,
.solar-instalacion-item span {
    color: var(--verdelogo);
    font-size: 2.8rem;
    font-weight: 800;
    font-family: var(--fuente-titulos);
}

.solar-proceso-item p {
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.solar-instalacion-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.solar-instalacion-item {
    text-align: center;
}

.solar-tiempo-grid {
    display: grid;
    grid-template-columns: 2fr repeat(2, 1fr);
    gap: 2rem;
}

.solar-tiempo-principal {
    grid-row: span 2;
}

.solar-tiempo-principal h2 {
    color: var(--blanco);
    font-size: 4rem;
    margin: 1.5rem 0;
}

.solar-normativa-grid {
    grid-template-columns: repeat(3, 1fr);
}

.solar-normativa-grid span {
    background-color: var(--azul_claro);
    color: var(--blanco);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 2.5rem;
    text-align: center;
    font-weight: 700;
    opacity: 0.78;
}

.solar-cta-final {
    background-color: var(--fondo);
    padding: 6rem 0 10rem 0;
}

.solar-cta-box {
    background:
        linear-gradient(135deg, rgba(65,235,77,0.14), rgba(50,56,93,0.35)),
        var(--azul_claro);
    border: 1px solid rgba(65,235,77,0.2);
    border-radius: 3rem;
    padding: 6rem;
    text-align: center;
}

.solar-cta-box h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    margin: 0 0 2rem 0;
}

.solar-cta-box p {
    color: var(--blanco);
    opacity: 0.68;
    font-size: 1.8rem;
    line-height: 1.6;
    max-width: 78rem;
    margin: 0 auto 4rem auto;
}

@media (max-width: 1200px) {
    .solar-beneficios-grid,
    .solar-servicios-grid,
    .solar-requisitos-grid,
    .solar-proceso-grid,
    .solar-instalacion-grid,
    .solar-normativa-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solar-metricas-grid,
    .solar-tiempo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .solar-tiempo-principal {
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .solar-titulo {
        font-size: 4.2rem;
    }

    .solar-descripcion {
        font-size: 1.6rem;
        margin: 0 1rem 4rem 1rem;
    }

    .solar-imagen-principal {
        height: 24rem;
        width: 100%;
        max-width: 100%;
    }

    .solar-imagen-principal img {
        object-position: center;
    }

    .solar-beneficios-grid,
    .solar-servicios-grid,
    .solar-requisitos-grid,
    .solar-proceso-grid,
    .solar-instalacion-grid,
    .solar-faq-grid,
    .solar-normativa-grid,
    .solar-metricas-grid,
    .solar-tiempo-grid {
        grid-template-columns: 1fr;
    }

    .solar-header-centro h2,
    .solar-cta-box h2,
    .solar-tiempo-principal h2 {
        font-size: 3.2rem;
    }

    .solar-cta-box {
        padding: 4rem 2.5rem;
    }

    .solar-hero-botones {
        flex-direction: column;
        width: 100%;
    }

    .btn-solar-principal,
    .btn-solar-secundario {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 1.3rem 1.8rem;
    }
}
/* ==========================================
   MEJORAS COTIZA IMPLEMEX
   ========================================== */

.cotiza-hero-premium {
    padding-top: 4rem;
    padding-bottom: 5rem;
    background:
        radial-gradient(circle at top center, rgba(65,235,77,0.08), transparent 38%),
        var(--fondo);
}

.cotiza-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.cotiza-badges span {
    color: var(--verdelogo);
    border: 1px solid rgba(65,235,77,0.28);
    background-color: rgba(65,235,77,0.06);
    border-radius: 5rem;
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.cotiza-seccion-premium,
.cotiza-proceso-seccion {
    background-color: var(--fondo);
    padding: 7rem 0;
}

.cotiza-grid-premium {
    gap: 5rem;
    align-items: stretch;
}

.cotiza-info-header {
    margin-bottom: 1rem;
}

.cotiza-info-header h2 {
    color: var(--blanco);
    font-size: 3.8rem;
    line-height: 1.15;
    margin: 1.2rem 0 1.5rem 0;
}

.cotiza-info-header p {
    color: var(--blanco);
    opacity: 0.65;
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.info-tarjeta-link {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.info-tarjeta-link:hover {
    transform: translateY(-4px);
    border-color: rgba(65,235,77,0.28);
    box-shadow: 0 12px 30px rgba(65,235,77,0.12);
}

.cotiza-mini-resumen {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 3rem;
}

.cotiza-mini-resumen h3 {
    color: var(--verdelogo);
    font-size: 2rem;
    margin: 0 0 2rem 0;
}

.cotiza-mini-resumen ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cotiza-mini-resumen li {
    color: var(--blanco);
    opacity: 0.7;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.cotiza-mini-resumen li::before {
    content: "✓";
    color: var(--verdelogo);
    font-weight: bold;
    margin-right: 0.8rem;
}

.cotiza-formulario-premium {
    position: relative;
    overflow: hidden;
}

.cotiza-formulario-premium::before {
    content: "";
    position: absolute;
    top: -12rem;
    right: -12rem;
    width: 24rem;
    height: 24rem;
    background: rgba(65,235,77,0.08);
    border-radius: 50%;
}

.input-grupo select {
    width: 100%;
    background-color: rgba(14,17,27,0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 1rem;
    padding: 1.8rem 2rem;
    color: var(--blanco);
    font-size: 1.5rem;
    outline: none;
    font-family: inherit;
}

.input-grupo select:focus {
    border-color: rgba(65,235,77,0.3);
}

.input-grupo select option {
    background-color: var(--azul_oscuro);
    color: var(--blanco);
}

.cotiza-form-nota {
    color: var(--blanco);
    opacity: 0.45;
    font-size: 1.3rem;
    text-align: center;
    margin: 1rem 0 0 0;
}

.cotiza-header-centro {
    text-align: center;
    margin-bottom: 5rem;
}

.cotiza-header-centro h2 {
    color: var(--blanco);
    font-size: 4.2rem;
    line-height: 1.2;
    margin: 0;
}

.cotiza-proceso-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}

.cotiza-proceso-item {
    background-color: var(--azul_claro);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cotiza-proceso-item span {
    color: var(--verdelogo);
    font-size: 2.8rem;
    font-weight: 800;
    font-family: var(--fuente-titulos);
}

.cotiza-proceso-item p {
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

@media (max-width: 1200px) {
    .cotiza-proceso-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cotiza-titulo {
        font-size: 4.2rem;
    }

    .cotiza-descripcion {
        font-size: 1.6rem;
    }

    .cotiza-grid-premium {
        flex-direction: column;
    }

    .cotiza-info-header h2,
    .cotiza-header-centro h2 {
        font-size: 3.2rem;
    }

    .cotiza-proceso-grid {
        grid-template-columns: 1fr;
    }
}
/* ==================================================
   LOGOS DE FABRICANTES
   DATA CENTER Y FTTX
   ================================================== */

.logos-fabricantes-grid {
    width: 100%;
    margin-top: 5rem;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: center;

    column-gap: 5rem;
    row-gap: 5rem;
}

/*
Cada espacio conserva la misma altura para que
todos los logos queden alineados, pero no tiene
fondo, borde, sombra ni efecto.
*/
.logo-fabricante {
    width: 100%;
    height: 6rem;

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

.logo-fabricante img {
    display: block;

    width: auto;
    height: auto;

    max-width: 15rem;
    max-height: 5rem;

    object-fit: contain;

    filter: none;
    opacity: 1;
}

/* Data Center solamente tiene cuatro logos */
.logos-datacenter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
}

/* Pantallas medianas */
@media (max-width: 1200px) {

    .logos-fabricantes-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 4rem;
        row-gap: 4.5rem;
    }

    .logos-datacenter {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .logo-fabricante img {
        max-width: 13rem;
        max-height: 4.5rem;
    }
}

/* Tablets */
@media (max-width: 900px) {

    .logos-fabricantes-grid,
    .logos-datacenter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 3rem;
        row-gap: 4rem;
    }

    .logo-fabricante {
        height: 5.5rem;
    }

    .logo-fabricante img {
        max-width: 12rem;
        max-height: 4.2rem;
    }
}

/* Celulares */
@media (max-width: 600px) {

    .logos-fabricantes-grid,
    .logos-datacenter {
        margin-top: 4rem;

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

        column-gap: 2.5rem;
        row-gap: 3.5rem;
    }

    .logo-fabricante {
        height: 5rem;
    }

    .logo-fabricante img {
        max-width: 11rem;
        max-height: 3.8rem;
    }
}

/* Celulares pequeños */
@media (max-width: 380px) {

    .logos-fabricantes-grid,
    .logos-datacenter {
        column-gap: 1.5rem;
        row-gap: 3rem;
    }

    .logo-fabricante img {
        max-width: 9rem;
        max-height: 3.4rem;
    }
}

/* ==========================================
   PÁGINA: TÉRMINOS Y CONDICIONES
   ========================================== */

.tyc-pagina {
    background-color: var(--fondo);
    color: var(--blanco);
}

/* Evita que los enlaces internos queden detrás del menú */
.tyc-pagina article {
    scroll-margin-top: 13rem;
}

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

.tyc-hero {
    position: relative;
    padding: 5rem 0 7rem;
    background:
        radial-gradient(
            circle at top center,
            rgba(65, 235, 77, 0.09),
            transparent 42%
        ),
        var(--fondo);
    overflow: hidden;
}

.tyc-hero-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90rem;
    margin: 0 auto;
    text-align: center;
}

.tyc-etiqueta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: 0.9rem 2rem;
    border: 1px solid rgba(65, 235, 77, 0.3);
    border-radius: 5rem;
    color: var(--verdespan);
    background-color: rgba(65, 235, 77, 0.06);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tyc-etiqueta::before {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--verdespan);
    box-shadow: 0 0 1.2rem rgba(65, 235, 77, 0.7);
}

.tyc-titulo {
    margin: 0 0 2.5rem;
    color: var(--blanco);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
}

.tyc-titulo span {
    background-image: linear-gradient(
        90deg,
        var(--verdelogo),
        var(--verdespan),
        var(--verdelogo)
    );
    background-size: 200% 100%;
    background-position: 0 center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: movimientoGradiente 4s ease-in-out infinite;
}

.tyc-descripcion {
    max-width: 78rem;
    margin: 0;
    color: var(--blanco);
    font-size: 1.9rem;
    line-height: 1.7;
    opacity: 0.65;
}

.tyc-actualizacion {
    display: inline-block;
    margin-top: 2.5rem;
    color: var(--blanco);
    font-size: 1.4rem;
    opacity: 0.5;
}

/* ==========================================
   DISTRIBUCIÓN PRINCIPAL
   ========================================== */

.tyc-layout {
    display: grid;
    grid-template-columns: 28rem minmax(0, 1fr);
    align-items: flex-start;
    gap: 4rem;
    padding-top: 2rem;
    padding-bottom: 12rem;
}

/* ==========================================
   ÍNDICE LATERAL
   ========================================== */

.tyc-indice {
    position: sticky;
    top: 13rem;
    padding: 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2rem;
    background-color: var(--azul_claro);
}

.tyc-indice h2 {
    margin: 0 0 2rem;
    color: var(--blanco);
    font-size: 2rem;
    font-weight: 800;
}

.tyc-indice nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tyc-indice a {
    display: block;
    padding: 1rem 1.2rem;
    border-radius: 0.8rem;
    color: var(--blanco);
    font-size: 1.35rem;
    line-height: 1.4;
    text-decoration: none;
    opacity: 0.6;
    transition:
        color 0.2s ease,
        opacity 0.2s ease,
        background-color 0.2s ease;
}

.tyc-indice a:hover {
    color: var(--verdelogo);
    background-color: rgba(65, 235, 77, 0.06);
    opacity: 1;
}

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

.tyc-contenido {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.tyc-aviso {
    padding: 2.5rem 3rem;
    border: 1px solid rgba(65, 235, 77, 0.2);
    border-radius: 1.8rem;
    background-color: rgba(65, 235, 77, 0.06);
}

.tyc-aviso strong {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--verdelogo);
    font-size: 1.6rem;
}

.tyc-aviso p {
    margin: 0;
    color: var(--blanco);
    font-size: 1.5rem;
    line-height: 1.7;
    opacity: 0.75;
}

/* ==========================================
   BLOQUES DE LOS TÉRMINOS
   ========================================== */

.tyc-seccion {
    padding: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2.5rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 60%
        ),
        var(--azul_claro);
}

.tyc-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 2rem;
    border-radius: 1.2rem;
    color: var(--fondo);
    background-color: var(--verdelogo);
    font-size: 1.4rem;
    font-weight: 800;
}

.tyc-seccion h2 {
    margin: 0 0 2rem;
    color: var(--blanco);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.25;
}

.tyc-seccion h3 {
    margin: 3rem 0 1.5rem;
    color: var(--verdelogo);
    font-size: 1.9rem;
}

.tyc-seccion p {
    margin: 0 0 1.7rem;
    color: var(--blanco);
    font-size: 1.6rem;
    line-height: 1.8;
    opacity: 0.72;
}

.tyc-seccion p:last-child {
    margin-bottom: 0;
}

.tyc-seccion strong {
    color: var(--blanco);
    opacity: 1;
}

.tyc-seccion ul {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.tyc-seccion li {
    position: relative;
    padding-left: 2.8rem;
    color: var(--blanco);
    font-size: 1.55rem;
    line-height: 1.7;
    opacity: 0.72;
}

.tyc-seccion li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--verdespan);
    font-weight: 800;
}

.tyc-seccion a {
    color: var(--verdelogo);
    font-weight: 700;
    text-decoration: none;
}

.tyc-seccion a:hover {
    color: var(--verdespan);
    text-decoration: underline;
}

/* ==========================================
   DATOS DE CONTACTO
   ========================================== */

.tyc-datos-contacto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.tyc-dato {
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    background-color: rgba(14, 17, 27, 0.5);
}

.tyc-dato span {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--verdelogo);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tyc-dato strong,
.tyc-dato a {
    color: var(--blanco);
    font-size: 1.5rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ==========================================
   LLAMADO A LA ACCIÓN
   ========================================== */

.tyc-cta {
    padding: 5rem;
    border: 1px solid rgba(65, 235, 77, 0.2);
    border-radius: 3rem;
    background:
        linear-gradient(
            135deg,
            rgba(65, 235, 77, 0.14),
            rgba(50, 56, 93, 0.35)
        ),
        var(--azul_claro);
    text-align: center;
}

.tyc-cta h2 {
    margin: 0 0 1.5rem;
    color: var(--blanco);
    font-size: 4rem;
    font-weight: 800;
}

.tyc-cta p {
    max-width: 70rem;
    margin: 0 auto 3rem;
    color: var(--blanco);
    font-size: 1.7rem;
    line-height: 1.7;
    opacity: 0.65;
}

.tyc-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 1.4rem 3.5rem;
    border-radius: 5rem;
    color: var(--fondo);
    background-color: var(--verdelogo);
    font-size: 1.5rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        opacity 0.2s ease,
        transform 0.1s ease;
}

.tyc-boton:hover {
    opacity: 0.9;
}

.tyc-boton:active {
    transform: scale(0.98);
}

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

@media (max-width: 1024px) {

    .tyc-layout {
        grid-template-columns: 1fr;
    }

    .tyc-indice {
        position: static;
    }

    .tyc-indice nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .tyc-titulo {
        font-size: 5.5rem;
    }
}

@media (max-width: 768px) {

    .tyc-hero {
        padding: 4rem 0 5rem;
    }

    .tyc-titulo {
        font-size: 4rem;
        letter-spacing: -1px;
    }

    .tyc-descripcion {
        font-size: 1.6rem;
    }

    .tyc-layout {
        gap: 2.5rem;
        padding-bottom: 8rem;
    }

    .tyc-indice nav {
        grid-template-columns: 1fr;
    }

    .tyc-seccion {
        padding: 3rem 2.5rem;
        border-radius: 2rem;
    }

    .tyc-seccion h2 {
        font-size: 2.4rem;
    }

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

    .tyc-cta {
        padding: 4rem 2.5rem;
    }

    .tyc-cta h2 {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {

    .tyc-titulo {
        font-size: 3.5rem;
    }

    .tyc-etiqueta {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        letter-spacing: 1.4px;
    }

    .tyc-seccion {
        padding: 2.5rem 2rem;
    }

    .tyc-seccion p,
    .tyc-seccion li {
        font-size: 1.5rem;
    }

    .tyc-aviso {
        padding: 2.2rem 2rem;
    }

    .tyc-cta h2 {
        font-size: 2.7rem;
    }

    .tyc-boton {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ==========================================
   SCROLL PARA EL ÍNDICE DE CONTENIDO LEGAL
   ========================================== */

.tyc-indice {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 15rem);
    overflow: hidden;
}

.tyc-indice h2 {
    flex-shrink: 0;
}

.tyc-indice nav {
    padding-right: 0.8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--verdelogo) rgba(255, 255, 255, 0.06);
}

/* Barra de desplazamiento para Chrome, Edge y Safari */
.tyc-indice nav::-webkit-scrollbar {
    width: 0.6rem;
}

.tyc-indice nav::-webkit-scrollbar-track {
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
}

.tyc-indice nav::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background-color: var(--verdelogo);
}

.tyc-indice nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--verdespan);
}

/* En tablet y celular el índice tendrá una altura controlada */
@media (max-width: 1024px) {
    .tyc-indice {
        max-height: 38rem;
    }
}

@media (max-width: 768px) {
    .tyc-indice {
        max-height: 32rem;
    }
}

/* ==========================================
   DOBLE SCROLL INTERNO PARA PÁGINAS LEGALES
   1. Scroll del índice
   2. Scroll de la información
   3. Scroll normal de la página
   ========================================== */

.tyc-layout {
    align-items: flex-start;
}

/* Altura disponible debajo del menú principal */
.tyc-indice,
.tyc-contenido {
    max-height: calc(100vh - 15rem);
    box-sizing: border-box;
}

/* ==========================================
   SCROLL DEL MENÚ DE CONTENIDO
   ========================================== */

.tyc-indice {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tyc-indice h2 {
    flex-shrink: 0;
}

.tyc-indice nav {
    min-height: 0;
    padding-right: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color:
        var(--verdelogo)
        rgba(255, 255, 255, 0.05);
}

/* ==========================================
   CARD CON SCROLL DE INFORMACIÓN PRINCIPAL
   ========================================== */

.tyc-contenido {
    position: relative;
    padding: 3rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 2.5rem;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 55%
        ),
        rgba(21, 23, 33, 0.72);

    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.18);

    scrollbar-width: thin;
    scrollbar-color:
        var(--verdelogo)
        rgba(255, 255, 255, 0.05);
}

/* Evita que las tarjetas se compriman dentro del scroll */
.tyc-contenido > * {
    flex-shrink: 0;
}

/* ==========================================
   BARRAS DE SCROLL:
   CHROME, EDGE Y SAFARI
   ========================================== */

.tyc-indice nav::-webkit-scrollbar,
.tyc-contenido::-webkit-scrollbar {
    width: 0.7rem;
}

.tyc-indice nav::-webkit-scrollbar-track,
.tyc-contenido::-webkit-scrollbar-track {
    border-radius: 2rem;
    background-color: rgba(255, 255, 255, 0.04);
}

.tyc-indice nav::-webkit-scrollbar-thumb,
.tyc-contenido::-webkit-scrollbar-thumb {
    border-radius: 2rem;
    background-color: var(--verdelogo);
}

.tyc-indice nav::-webkit-scrollbar-thumb:hover,
.tyc-contenido::-webkit-scrollbar-thumb:hover {
    background-color: var(--verdespan);
}

/* Mantiene espacio entre el contenido y la barra */
.tyc-contenido {
    scrollbar-gutter: stable;
}

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

@media (max-width: 1024px) {

    .tyc-indice {
        max-height: 34rem;
    }

    .tyc-contenido {
        max-height: 65rem;
    }
}

/* ==========================================
   CELULAR
   En móvil se mantiene el scroll interno,
   pero con una altura más cómoda.
   ========================================== */

@media (max-width: 768px) {

    .tyc-indice {
        max-height: 28rem;
    }

    .tyc-contenido {
        max-height: 58rem;
        padding: 2rem;
        border-radius: 2rem;
    }
}

@media (max-width: 480px) {

    .tyc-indice {
        max-height: 25rem;
    }

    .tyc-contenido {
        max-height: 52rem;
        padding: 1.5rem;
    }
}
.campo-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-estado {
    display: none;
    padding: 1.4rem 1.6rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

.form-estado:not(:empty) {
    display: block;
}

.form-estado-exito {
    border: 1px solid rgba(157, 235, 10, 0.3);
    background-color: rgba(157, 235, 10, 0.08);
    color: var(--verdelogo);
}

.form-estado-error {
    border: 1px solid rgba(255, 100, 100, 0.3);
    background-color: rgba(255, 100, 100, 0.08);
    color: #ff9a9a;
}

.btn-enviar-formulario:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}