/* =====================================================
   1. CONFIGURACIÓN GENERAL
   ===================================================== */

/* 
   Quitamos márgenes y espacios por defecto del navegador.
   Esto ayuda a que el diseño se vea igual en todos los dispositivos.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 
   Activamos desplazamiento suave.
   Cuando se haga clic en el menú, bajará suavemente a cada sección.
*/
html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* 
   Estilos generales para toda la página.
   Aquí aplicamos Montserrat a todo el sitio.
*/
body {
    font-family: 'Montserrat', sans-serif;
    background: #070b18;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

/* 
   Todas las imágenes serán responsive.
   Nunca se saldrán del ancho de la pantalla.
*/
img {
    max-width: 100%;
    display: block;
}

/* 
   Quitamos el subrayado de los enlaces.
*/
a {
    text-decoration: none;
    color: inherit;
}

/* 
   Quitamos los puntos de las listas.
*/
ul {
    list-style: none;
}

/* =====================================================
   2. VARIABLES DE COLOR
   ===================================================== */

/* 
   Usamos variables para cambiar colores fácilmente después.
   Así no tendrás que buscar color por color en todo el archivo.
*/
:root {
    --color-fondo: #070b18;
    --color-fondo-secundario: #0d1326;
    --color-card: #111a33;
    --color-principal: #00d4ff;
    --color-secundario: #2f80ed;
    --color-texto: #ffffff;
    --color-texto-suave: #b8c2d6;
    --color-borde: rgba(255, 255, 255, 0.12);
    --sombra-card: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* =====================================================
   3. HEADER / MENÚ PRINCIPAL
   ===================================================== */

/* 
   El header queda fijo arriba.
   Así el menú siempre estará visible cuando el usuario baje.
*/
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(7, 11, 24, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-borde);
}

/* 
   Contenedor del menú.
   max-width centra el contenido en pantallas grandes.
*/
.navbar {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* 
   Logo de la empresa.
   Está preparado para imagen + texto.
*/
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* 
   Tamaño del logo.
   Si tu imagen es más grande, aquí se controla.
*/
.logo img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* 
   Texto del logo.
*/
.logo span {
    font-size: 15px;
    color: var(--color-texto);
}

/* 
   Menú en pantallas grandes.
*/
.menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* 
   Enlaces del menú.
*/
.menu a {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-texto-suave);
    transition: color 0.3s ease;
}

/* 
   Efecto al pasar el mouse.
*/
.menu a:hover {
    color: var(--color-principal);
}

/* 
   Botón hamburguesa.
   Por defecto está oculto en computadora.
*/
/* Botón hamburguesa oculto en computadora */
.menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 32px;
    cursor: pointer;
}

/* 
   Menú activo.
   Esta clase permite marcar visualmente la sección donde está el usuario.
*/
.menu a.activo {
    color: var(--color-principal);
    position: relative;
}

/* 
   Rayita decorativa debajo del menú activo.
*/
.menu a.activo::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 100%;
    height: 3px;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--color-principal), var(--color-secundario));
}

/* =====================================================
   4. SECCIÓN HERO / INICIO
   ===================================================== */

/* 
   Hero es la primera sección grande de la página.
   min-height: 100vh hace que ocupe casi toda la pantalla.
*/
.hero {
    min-height: 100vh;
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding-top: 130px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 50px;
}

/* 
   Etiqueta pequeña superior.
*/
.hero-etiqueta {
    display: inline-block;
    color: var(--color-principal);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    padding: 9px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 22px;
}

/* 
   Título principal.
*/
.hero h1 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 22px;
}

/* 
   Descripción debajo del título.
*/
.hero-descripcion {
    color: var(--color-texto-suave);
    font-size: 17px;
    max-width: 620px;
    margin-bottom: 34px;
}

/* 
   Contenedor de botones.
*/
.hero-botones {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

/* 
   Estilo general para todos los botones.
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* 
   Botón principal.
*/
.btn-principal {
    background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
    color: #06101f;
}

/* 
   Botón secundario.
*/
.btn-secundario {
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    background: rgba(255, 255, 255, 0.04);
}

/* 
   Efecto al pasar el mouse en botones.
*/
.btn:hover {
    transform: translateY(-3px);
}

/* 
   Datos de confianza: +80 empresas, +8 años, SUNAT.
*/
.hero-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* 
   Cada caja de dato.
*/
.hero-datos div {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-borde);
    padding: 18px;
    border-radius: 18px;
}

/* 
   Número o palabra destacada.
*/
.hero-datos strong {
    display: block;
    font-size: 26px;
    color: var(--color-principal);
    margin-bottom: 6px;
}

/* 
   Texto pequeño del dato.
*/
.hero-datos span {
    color: var(--color-texto-suave);
    font-size: 13px;
}

/* 
   Imagen principal del hero.
*/
.hero-imagen {
    background: radial-gradient(circle, rgba(0, 212, 255, 0.25), transparent 65%);
    padding: 20px;
}

/* 
   Imagen con efecto moderno.
*/
.hero-imagen img {
    border-radius: 28px;
    box-shadow: var(--sombra-card);
}

/* =====================================================
   5. ESTILO GENERAL PARA SECCIONES
   ===================================================== */

/* 
   Todas las secciones tendrán el mismo ancho máximo.
   Esto mantiene orden y alineación profesional.
*/
.seccion {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 100px 0;
}

/* 
   Encabezado de cada sección.
   Sirve para título, etiqueta y descripción.
*/
.seccion-encabezado {
    max-width: 760px;
    margin-bottom: 50px;
}

/* 
   Etiqueta pequeña superior de cada sección.
*/
.seccion-etiqueta {
    display: inline-block;
    color: var(--color-principal);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

/* 
   Título principal de cada sección.
*/
.seccion-encabezado h2 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.15;
    margin-bottom: 18px;
}

/* 
   Descripción de cada sección.
*/
.seccion-encabezado p {
    color: var(--color-texto-suave);
    font-size: 16px;
}

/* =====================================================
   6. SECCIÓN SISTEMAS
   ===================================================== */

/* 
   Fondo visual para diferenciar la sección Sistemas.
   Así cuando el usuario baja, se nota que cambió de bloque.
*/
.sistemas {
    position: relative;
}

/* 
   Efecto decorativo de fondo.
   No afecta al contenido, solo da estilo moderno.
*/
.sistemas::before {
    content: "";
    position: absolute;
    top: 80px;
    right: -120px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(47, 128, 237, 0.22), transparent 70%);
    z-index: -1;
}

/* 
   Grid de tarjetas.
   auto-fit permite que las tarjetas se acomoden solas según el ancho.
*/
.sistemas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 
   Tarjeta individual de cada sistema.
*/
.sistema-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    padding: 28px;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sombra-card);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* 
   Efecto cuando el mouse pasa por la tarjeta.
*/
.sistema-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.45);
}

/* 
   Tarjeta destacada.
   Sirve para resaltar tu sistema más fuerte.
*/
.sistema-card.destacado {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.16), rgba(255,255,255,0.04));
    border-color: rgba(0, 212, 255, 0.35);
}

/* 
   Tarjeta destacada cloud.
   Da variedad visual a los sistemas web.
*/
.sistema-card.destacado-cloud {
    background: linear-gradient(180deg, rgba(47, 128, 237, 0.18), rgba(255,255,255,0.04));
    border-color: rgba(47, 128, 237, 0.4);
}

/* 
   Icono superior de cada tarjeta.
*/
.sistema-icono {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 22px;
}

/* 
   Etiqueta Escritorio / Cloud.
*/
.sistema-tipo {
    width: fit-content;
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.09);
    margin-bottom: 16px;
}

/* 
   Nombre del sistema.
*/
.sistema-card h3 {
    font-size: 21px;
    margin-bottom: 14px;
}

/* 
   Descripción del sistema.
*/
.sistema-card p {
    color: var(--color-texto-suave);
    font-size: 14px;
    margin-bottom: 20px;
}

/* 
   Lista de funciones.
*/
.sistema-card ul {
    margin-bottom: 24px;
}

/* 
   Cada función del sistema.
*/
.sistema-card li {
    color: var(--color-texto-suave);
    font-size: 14px;
    margin-bottom: 9px;
}

/* 
   Agregamos un check decorativo antes de cada función.
*/
.sistema-card li::before {
    content: "✓";
    color: var(--color-principal);
    font-weight: 700;
    margin-right: 8px;
}

/* 
   Enlace inferior de la tarjeta.
   margin-top: auto lo manda al final para que todas las tarjetas queden ordenadas.
*/
.sistema-link {
    margin-top: auto;
    color: var(--color-principal);
    font-size: 14px;
    font-weight: 700;
}


/* =====================================================
   7. SECCIÓN SECTORES
   ===================================================== */

/* 
   La sección Sectores muestra los tipos de negocios que atendemos.
*/
.sectores {
    position: relative;
}

/* 
   Luz decorativa lateral para dar profundidad visual.
*/
.sectores::before {
    content: "";
    position: absolute;
    top: 120px;
    left: -140px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%);
    z-index: -1;
}

/* 
   Grid principal de sectores.
   En computadora se muestran 4 columnas para aprovechar mejor el espacio.
*/
.sectores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* 
   Tarjeta de cada sector.
*/
.sector-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-borde);
    border-radius: 22px;
    padding: 24px;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* 
   Efecto al pasar el mouse.
*/
.sector-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.42);
    background: rgba(0, 212, 255, 0.07);
}

/* 
   Icono superior.
*/
.sector-icono {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* 
   Imagen dentro del icono del sector.
   Esto permite usar iconos personalizados sin romper la tarjeta.
*/
.sector-icono img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* 
   Nombre del sector.
*/
.sector-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* 
   Descripción del sector.
*/
.sector-card p {
    color: var(--color-texto-suave);
    font-size: 13.5px;
    margin-bottom: 20px;
}

/* 
   Sistema recomendado.
*/
.sector-card span {
    margin-top: auto;
    display: block;
    color: var(--color-principal);
    font-size: 12.5px;
    font-weight: 700;
}

/* =====================================================
   8. SECCIÓN CLIENTES
   ===================================================== */
/* 
   Sección Clientes.
   La usamos para mostrar confianza sin necesidad de testimonios.
*/
.clientes {
    position: relative;
     padding-bottom: 60px;
}

/* 
   Luz decorativa de fondo.
   Da continuidad visual al diseño moderno.
*/
.clientes::before {
    content: "";
    position: absolute;
    top: 100px;
    right: -140px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(47, 128, 237, 0.2), transparent 70%);
    z-index: -1;
}

/* 
   Resumen de datos de clientes.
   En computadora se muestra en 3 columnas.
*/
.clientes-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 48px;
}

/* 
   Cada dato destacado.
*/
.cliente-dato {
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--sombra-card);
}

/* 
   Número o palabra principal.
*/
.cliente-dato strong {
    display: block;
    font-size: 38px;
    color: var(--color-principal);
    margin-bottom: 8px;
}

/* 
   Texto pequeño debajo del dato.
*/
.cliente-dato span {
    color: var(--color-texto-suave);
    font-size: 14px;
}

/* 
   Contenedor del carrusel.
   overflow hidden oculta lo que se sale para crear efecto de movimiento.
*/
.clientes-marquee {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.045);
    padding: 22px 0;
    position: relative;
}

/* 
   Efecto degradado izquierdo.
   Hace que los nombres aparezcan suavemente.
*/
.clientes-marquee::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    background: linear-gradient(90deg, var(--color-fondo), transparent);
    z-index: 2;
}

/* 
   Efecto degradado derecho.
   Hace que los nombres desaparezcan suavemente.
*/
.clientes-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 110px;
    height: 100%;
    background: linear-gradient(270deg, var(--color-fondo), transparent);
    z-index: 2;
}

/* 
   Fila que se mueve automáticamente.
*/
.clientes-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: moverClientes 28s linear infinite;
}

/* 
   Cada nombre dentro del carrusel.
*/
.clientes-track span {
    white-space: nowrap;
    padding: 13px 22px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.09);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--color-texto);
    font-size: 14px;
    font-weight: 700;
}

/* 
   Pausamos la animación cuando el usuario pasa el mouse.
   Esto permite leer mejor los nombres.
*/
.clientes-marquee:hover .clientes-track {
    animation-play-state: paused;
}

/* 
   Animación del carrusel.
   Mueve la fila hacia la izquierda.
*/
@keyframes moverClientes {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* 
   Nota inferior de clientes.
*/
.clientes-nota {
    max-width: 760px;
    margin-top: 34px;
}

/* 
   Texto de la nota.
*/
.clientes-nota p {
    color: var(--color-texto-suave);
    font-size: 15px;
}

/* =====================================================
   9. SECCIÓN NOSOTROS
   ===================================================== */

/* 
   Sección Nosotros.
   Aquí mostramos la historia, experiencia y valor de la empresa.
*/
.nosotros {
    position: relative;
}

/* 
   Fondo decorativo tipo luz.
   Hace que la sección se vea más tecnológica.
*/
.nosotros::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 50%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.16), transparent 70%);
    transform: translateX(-50%);
    z-index: -1;
}

/* 
   Contenedor principal en dos columnas.
*/
.nosotros-contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
}

/* 
   Título principal de Nosotros.
*/
.nosotros-texto h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    margin-bottom: 24px;
}

/* 
   Párrafos de la sección.
*/
.nosotros-texto p {
    color: var(--color-texto-suave);
    font-size: 15.5px;
    margin-bottom: 18px;
}

/* 
   Palabras destacadas dentro del texto.
*/
.nosotros-texto strong {
    color: var(--color-texto);
    font-weight: 700;
}

/* 
   Contenedor de botones.
*/
.nosotros-botones {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* 
   Panel derecho con tarjetas.
*/
.nosotros-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

/* 
   Tarjeta individual.
*/
.nosotros-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    padding: 26px;
    min-height: 215px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* 
   Efecto al pasar el mouse.
*/
.nosotros-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.42);
    background: rgba(0, 212, 255, 0.07);
}

/* 
   Tarjeta principal destacada.
*/
.nosotros-card.principal {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.17), rgba(255,255,255,0.04));
    border-color: rgba(0, 212, 255, 0.38);
}

/* 
   Número o palabra grande.
*/
.nosotros-card span {
    display: block;
    color: var(--color-principal);
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 14px;
}

/* 
   Título de cada tarjeta.
*/
.nosotros-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* 
   Descripción de cada tarjeta.
*/
.nosotros-card p {
    color: var(--color-texto-suave);
    font-size: 13.5px;
}

/* =====================================================
   SECCIÓN NOVEDADES
   ===================================================== */

/* 
   Contenedor de novedades.
*/
.novedades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* 
   Tarjeta individual.
*/
.novedad-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-borde);
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.3s ease,
                border-color 0.3s ease,
                background 0.3s ease;
}

/* 
   Tarjeta destacada.
*/
.novedad-card.destacado {
    border-color: rgba(0,212,255,0.32);
}

/* 
   Hover elegante.
*/
.novedad-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,212,255,0.45);
    background: rgba(0,212,255,0.05);
}

/* 
   Imagen superior.
*/
.novedad-imagen {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

/* 
   Imagen responsive.
*/
.novedad-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 
   Zoom suave.
*/
.novedad-card:hover img {
    transform: scale(1.06);
}

/* 
   Contenido interno.
*/
.novedad-contenido {
    padding: 24px;
}

/* 
   Categoría superior.
*/
.novedad-categoria {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 50px;
    background: rgba(0,212,255,0.12);
    border: 1px solid rgba(0,212,255,0.24);
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 16px;
}

/* 
   Título.
*/
.novedad-contenido h3 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 14px;
}

/* 
   Texto.
*/
.novedad-contenido p {
    color: var(--color-texto-suave);
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 22px;
}

/* 
   Footer inferior.
*/
.novedad-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* 
   Texto pequeño.
*/
.novedad-footer small {
    color: var(--color-texto-suave);
    font-size: 12px;
}

/* 
   Botón leer más.
*/
.novedad-footer a {
    color: var(--color-principal);
    font-size: 13px;
    font-weight: 800;
}


/* =====================================================
   11. SECCIÓN CONTACTO
   ===================================================== */

/* 
   Sección Contacto.
   Es la sección final de conversión.
*/
.contacto {
    position: relative;
    padding-bottom: 120px;
}

/* 
   Fondo decorativo final.
*/
.contacto::before {
    content: "";
    position: absolute;
    top: 80px;
    left: -150px;
    width: 390px;
    height: 390px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%);
    z-index: -1;
}

/* 
   Contenedor principal en dos columnas.
*/
.contacto-contenedor {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 45px;
    align-items: center;
}

/* 
   Título principal de contacto.
*/
.contacto-info h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    margin-bottom: 22px;
}

/* 
   Texto descriptivo.
*/
.contacto-info > p {
    color: var(--color-texto-suave);
    font-size: 16px;
    margin-bottom: 32px;
    max-width: 620px;
}

/* 
   Lista de datos de contacto.
*/
.contacto-lista {
    display: grid;
    gap: 15px;
}

/* 
   Cada dato de contacto.
   Puede ser enlace o div.
*/
.contacto-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-borde);
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

/* 
   Efecto hover en datos de contacto.
*/
.contacto-item:hover {
    transform: translateX(6px);
    border-color: rgba(0, 212, 255, 0.42);
    background: rgba(0, 212, 255, 0.07);
}

/* 
   Icono de contacto.
*/
.contacto-item span {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 15px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* 
   Título del dato.
*/
.contacto-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

/* 
   Valor del dato.
*/
.contacto-item p {
    color: var(--color-texto-suave);
    font-size: 13.5px;
}

/* 
   Tarjeta del formulario.
*/
.contacto-formulario {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.15), rgba(255,255,255,0.045));
    border: 1px solid rgba(0, 212, 255, 0.32);
    border-radius: 30px;
    padding: 32px;
    box-shadow: var(--sombra-card);
}

/* 
   Etiqueta superior del formulario.
*/
.form-badge {
    display: inline-block;
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.22);
    margin-bottom: 18px;
}

/* 
   Título del formulario.
*/
.contacto-formulario h3 {
    font-size: 28px;
    margin-bottom: 24px;
}

/* 
   Grupo de campo.
*/
.form-grupo {
    margin-bottom: 16px;
}

/* 
   Etiqueta del campo.
*/
.form-grupo label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* 
   Inputs, select y textarea.
*/
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    border: 1px solid var(--color-borde);
    outline: none;
    border-radius: 14px;
    padding: 14px 15px;
    background: rgba(7, 11, 24, 0.78);
    color: var(--color-texto);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

/* 
   Color del placeholder.
*/
.form-grupo input::placeholder,
.form-grupo textarea::placeholder {
    color: #7f8aa3;
}

/* 
   Efecto cuando el usuario escribe.
*/
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    border-color: rgba(0, 212, 255, 0.55);
}

/* 
   Altura del mensaje.
*/
.form-grupo textarea {
    min-height: 120px;
    resize: vertical;
}

/* 
   Botón del formulario.
*/
.form-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}

/* =====================================================
   12. WHATSAPP FLOTANTE
   ===================================================== */
/* 
   Contenedor general del chat flotante.
*/
.whatsapp-chat {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
}

/* 
   Ventana del chat.
   Inicia oculta.
*/
.whatsapp-box {
    width: 330px;
    background: #0d1326;
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    margin-bottom: 16px;
    display: none;
}

/* 
   Cuando tenga la clase activo se mostrará.
*/
.whatsapp-box.activo {
    display: block;
}

/* 
   Encabezado de la ventanita.
*/
.whatsapp-header {
    background: linear-gradient(135deg, #00d4ff, #2f80ed);
    color: #06101f;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 
   Avatar de soporte.
*/
.whatsapp-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* 
   Nombre de la empresa.
*/
.whatsapp-header h3 {
    font-size: 15px;
    margin-bottom: 2px;
}

/* 
   Subtítulo del chat.
*/
.whatsapp-header p {
    font-size: 12px;
    font-weight: 600;
}

/* 
   Botón cerrar.
*/
.whatsapp-header button {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #06101f;
    font-size: 26px;
    cursor: pointer;
}

/* 
   Cuerpo del chat.
*/
.whatsapp-body {
    padding: 18px;
}

/* 
   Mensaje inicial.
*/
.mensaje-soporte {
    color: var(--color-texto-suave);
    font-size: 14px;
    margin-bottom: 14px;
}

/* 
   Campo para escribir mensaje.
*/
.whatsapp-body textarea {
    width: 100%;
    min-height: 95px;
    resize: vertical;
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    outline: none;
    padding: 14px;
    background: rgba(7, 11, 24, 0.82);
    color: var(--color-texto);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    margin-bottom: 14px;
}

/* 
   Placeholder del mensaje.
*/
.whatsapp-body textarea::placeholder {
    color: #7f8aa3;
}

/* 
   Botón flotante circular.
*/
.whatsapp-flotante {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #00d4ff, #2f80ed);
    color: #06101f;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 212, 255, 0.35);
    animation: pulsoWhatsApp 2.5s infinite;
}

/* 
   Animación de pulso.
*/
@keyframes pulsoWhatsApp {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.6);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(0, 212, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
    }
}

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

.planes-subtitulo {
    margin-top: 60px;
    margin-bottom: 25px;
    font-size: 22px;
    color: var(--color-principal);
}

.planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.plan-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--color-borde);
    border-radius: 25px;
    padding: 25px;
    text-align: center;
    transition: 0.3s;
}

.plan-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-principal);
}

.plan-card.destacado {
    background: linear-gradient(180deg, rgba(0,212,255,0.2), rgba(255,255,255,0.05));
    border-color: var(--color-principal);
}

.precio {
    display: block;
    font-size: 30px;
    margin: 15px 0;
    font-weight: bold;
}

.plan-card ul {
    margin: 20px 0;
    text-align: left;
}

.plan-card li {
    margin-bottom: 10px;
}


/* =====================================================
   SECCIÓN SUNAT
   ===================================================== */

/* 
   Sección SUNAT.
   Aquí explicamos la facturación electrónica y damos acceso al validador oficial.
*/
.sunat {
    position: relative;
}

/* 
   Luz decorativa de fondo para mantener el estilo moderno.
*/
.sunat::before {
    content: "";
    position: absolute;
    top: 100px;
    right: -150px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.18), transparent 70%);
    z-index: -1;
}

/* 
   Contenedor principal en dos columnas.
*/
.sunat-contenedor {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 45px;
    align-items: center;
}

/* 
   Título principal.
*/
.sunat-info h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.12;
    margin-bottom: 22px;
}

/* 
   Texto principal.
*/
.sunat-info > p {
    color: var(--color-texto-suave);
    font-size: 16px;
    margin-bottom: 32px;
    max-width: 620px;
}

/* 
   Botones de acción.
*/
.sunat-botones {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 
   Tarjeta del validador visual.
*/
.sunat-validador {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.16), rgba(255,255,255,0.045));
    border: 1px solid rgba(0, 212, 255, 0.32);
    border-radius: 30px;
    padding: 32px;
    box-shadow: var(--sombra-card);
}

/* 
   Etiqueta pequeña del validador.
*/
.sunat-badge {
    display: inline-block;
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.22);
    margin-bottom: 18px;
}

/* 
   Título del validador.
*/
.sunat-validador h3 {
    font-size: 28px;
    margin-bottom: 14px;
}

/* 
   Descripción del validador.
*/
.sunat-validador p {
    color: var(--color-texto-suave);
    font-size: 14.5px;
    margin-bottom: 24px;
}

/* 
   Formulario visual del validador.
*/
.sunat-form-demo {
    display: grid;
    gap: 14px;
}

/* 
   Campos del formulario visual.
*/
.sunat-form-demo input,
.sunat-form-demo select {
    width: 100%;
    border: 1px solid var(--color-borde);
    outline: none;
    border-radius: 14px;
    padding: 14px 15px;
    background: rgba(7, 11, 24, 0.78);
    color: var(--color-texto);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

/* 
   Color del texto de ejemplo.
*/
.sunat-form-demo input::placeholder {
    color: #7f8aa3;
}

/* 
   Agrupa serie y número en dos columnas.
*/
.sunat-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* 
   Botón dentro del validador.
*/
.sunat-btn {
    width: 100%;
    margin-top: 6px;
}

/* 
   Conceptos SUNAT.
   Van debajo del bloque principal.
*/
.sunat-conceptos {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* 
   Tarjeta de concepto.
*/
.sunat-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    padding: 26px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* 
   Efecto hover.
*/
.sunat-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.42);
    background: rgba(0, 212, 255, 0.07);
}

/* 
   Icono de cada concepto.
*/
.sunat-icono {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* 
   Título de concepto.
*/
.sunat-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

/* 
   Texto de concepto.
*/
.sunat-card p {
    color: var(--color-texto-suave);
    font-size: 13.5px;
}

/* 
   Lista de pasos para guiar al usuario antes de ir a SUNAT.
*/
.sunat-pasos {
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}

/* 
   Cada paso de validación.
*/
.sunat-paso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--color-borde);
}

/* 
   Número del paso.
*/
.sunat-paso span {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.28);
    color: var(--color-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

/* 
   Texto del paso.
*/
.sunat-paso p {
    margin: 0;
    font-size: 13.8px;
    color: var(--color-texto-suave);
}

/* 
   Aviso pequeño inferior.
*/
.sunat-aviso {
    display: block;
    margin-top: 14px;
    color: var(--color-texto-suave);
    font-size: 12px;
    text-align: center;
}

/* =====================================================
   13. FOOTER PROFESIONAL
   ===================================================== */

/* 
   Footer principal.
   Cierra la página con información útil y diseño profesional.
*/
.footer {
    position: relative;
    border-top: 1px solid var(--color-borde);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
    padding: 70px 0 0;
    overflow: hidden;
}

/* 
   Luz decorativa del footer.
*/
.footer::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.16), transparent 70%);
    z-index: 0;
}

/* 
   Contenedor de columnas.
*/
.footer-contenedor {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: grid;

    /* 
       Ahora usamos solo 3 columnas.
       La marca ocupa más espacio.
    */
    grid-template-columns: 1.5fr 0.9fr 1.1fr;

    gap: 34px;
    padding-bottom: 45px;
}

/* 
   Cada columna del footer.
*/
.footer-col h3 {
    font-size: 16px;
    margin-bottom: 18px;
}

/* 
   Logo del footer.
*/
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-weight: 800;
}

/* 
   Imagen del logo.
*/
.footer-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* 
   Texto del logo.
*/
.footer-logo span {
    font-size: 15px;
}

/* 
   Descripción de la empresa.
*/
.footer-marca p {
    color: var(--color-texto-suave);
    font-size: 14px;
    max-width: 360px;
}

/* 
   Listas del footer.
*/
.footer-col ul {
    display: grid;
    gap: 11px;
}

/* 
   Enlaces y textos del footer.
*/
.footer-col a,
.footer-col li {
    color: var(--color-texto-suave);
    font-size: 13.5px;
}

/* 
   Efecto hover en enlaces.
*/
.footer-col a:hover {
    color: var(--color-principal);
}

/* 
   Lista de contacto.
*/
.footer-contacto li {
    line-height: 1.5;
}

/* 
   Botón de WhatsApp en footer.
*/
.footer-whatsapp {
    display: inline-flex;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.28);
    color: var(--color-principal) !important;
    font-weight: 800;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* 
   Hover del botón WhatsApp.
*/
.footer-whatsapp:hover {
    transform: translateY(-4px);
    background: rgba(0, 212, 255, 0.18);
}

/* 
   Línea inferior del footer.
*/
.footer-bottom {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 22px 0;
    border-top: 1px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* 
   Texto inferior.
*/
.footer-bottom p,
.footer-bottom span {
    color: var(--color-texto-suave);
    font-size: 13px;
}

/* =====================================================
   MODAL DE VIDEO DE SISTEMAS
   ===================================================== */

/* 
   Botón para abrir video dentro de cada tarjeta.
*/
.sistema-video-btn {
    width: 100%;
    border: 1px solid rgba(0, 212, 255, 0.28);
    background: rgba(0, 212, 255, 0.1);
    color: var(--color-principal);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 800;
    padding: 13px 16px;
    border-radius: 14px;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: 14px;
    transition: background 0.3s ease, transform 0.3s ease;
}

/* 
   Efecto al pasar el mouse.
*/
.sistema-video-btn:hover {
    background: rgba(0, 212, 255, 0.18);
    transform: translateY(-3px);
}

/* 
   Fondo oscuro del modal.
*/
.video-modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 24, 0.88);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 
   Cuando el modal esté activo se mostrará.
*/
.video-modal.activo {
    display: flex;
}

/* 
   Caja del video.
*/
.video-modal-contenido {
    width: 100%;
    max-width: 900px;
    position: relative;
    background: #0d1326;
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 24px;
    box-shadow: var(--sombra-card);
    overflow: hidden;
}

/* 
   Botón cerrar.
*/
.video-modal-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(7, 11, 24, 0.9);
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
    z-index: 2;
}

/* 
   Video responsive.
   Mantiene proporción 16:9.
*/
.video-modal iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}

/* =====================================================
   MODAL DE NOVEDADES
   ===================================================== */

/* 
   Fondo oscuro del modal.
*/
.novedad-modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 24, 0.9);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

/* 
   Cuando el modal está activo se muestra.
*/
.novedad-modal.activo {
    display: flex;
}

/* 
   Caja principal del artículo.
*/
.novedad-modal-contenido {
    width: 100%;
    max-width: 820px;
    max-height: 86vh;
    overflow-y: auto;
    background: #0d1326;
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 28px;
    padding: 34px;
    box-shadow: var(--sombra-card);
    position: relative;
}

/* 
   Botón cerrar.
*/
.novedad-modal-cerrar {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
}

/* 
   Título principal del artículo.
*/
.novedad-modal-contenido h2 {
    font-size: 34px;
    line-height: 1.2;
    margin: 18px 0 18px;
}

/* 
   Subtítulos internos.
*/
.novedad-modal-contenido h3 {
    font-size: 21px;
    margin: 28px 0 12px;
    color: var(--color-principal);
}

/* 
   Párrafos.
*/
.novedad-modal-contenido p {
    color: var(--color-texto-suave);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 14px;
}

/* 
   Lista del artículo.
*/
.novedad-modal-contenido ul {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

/* 
   Cada punto de la lista.
*/
.novedad-modal-contenido li {
    color: var(--color-texto-suave);
    font-size: 15px;
    line-height: 1.7;
}

/* 
   Check decorativo.
*/
.novedad-modal-contenido li::before {
    content: "✓";
    color: var(--color-principal);
    font-weight: 800;
    margin-right: 8px;
}

/* 
   Botón leer más en tarjetas.
*/
.novedad-leer-btn {
    background: transparent;
    border: none;
    color: var(--color-principal);
    font-size: 13px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}

/* =====================================================
   IMPLEMENTACIONES RECIENTES
   ===================================================== */

/* 
   Sección principal.
*/
.implementaciones {
    position: relative;
}

/* 
   Luz decorativa.
*/
.implementaciones::before {
    content: "";
    position: absolute;
    top: 120px;
    right: -140px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.16), transparent 70%);
    z-index: -1;
}

/* 
   Panel superior informativo.
*/
.implementaciones-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.13), rgba(255,255,255,0.04));
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 28px;
    padding: 30px;
    margin-bottom: 32px;
    box-shadow: var(--sombra-card);
}

/* 
   Etiqueta superior.
*/
.implementaciones-badge {
    display: inline-block;
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.22);
    margin-bottom: 16px;
}

/* 
   Título del panel.
*/
.implementaciones-panel h3 {
    font-size: 28px;
    margin-bottom: 10px;
}

/* 
   Texto del panel.
*/
.implementaciones-panel p {
    color: var(--color-texto-suave);
    font-size: 14.5px;
}

/* 
   Resumen numérico.
*/
.implementaciones-resumen {
    min-width: 170px;
    text-align: center;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--color-borde);
}

/* 
   Número del resumen.
*/
.implementaciones-resumen strong {
    display: block;
    color: var(--color-principal);
    font-size: 38px;
    margin-bottom: 5px;
}

/* 
   Texto del resumen.
*/
.implementaciones-resumen span {
    color: var(--color-texto-suave);
    font-size: 13px;
}

/* 
   Grid de tarjetas.
*/
.implementaciones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* 
   Tarjeta de implementación.
*/
.implementacion-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--color-borde);
    border-radius: 24px;
    padding: 26px;
    min-height: 260px;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

/* 
   Línea decorativa superior.
*/
.implementacion-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 26px;
    right: 26px;
    height: 3px;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--color-principal), var(--color-secundario));
}

/* 
   Hover.
*/
.implementacion-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.42);
    background: rgba(0, 212, 255, 0.07);
}

/* 
   Etiqueta nuevo cliente.
*/
.implementacion-estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 16px;
}

/* 
   Punto vivo.
*/
.implementacion-estado::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-principal);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.9);
}

/* 
   Nombre comercial.
*/
.implementacion-card h3 {
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 14px;
}

/* 
   Datos.
*/
.implementacion-card p {
    color: var(--color-texto-suave);
    font-size: 14px;
    margin-bottom: 10px;
}

/* 
   Sistema usado.
*/
.implementacion-sistema {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 13px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.22);
    color: var(--color-principal);
    font-size: 12.5px;
    font-weight: 800;
}

/* 
   Mensaje de carga o vacío.
*/
.implementaciones-cargando {
    color: var(--color-texto-suave);
    font-size: 15px;
}

/* =====================================================
   MODAL INTELIGENTE ASESOR
   ===================================================== */

.asesor-modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 24, 0.9);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.asesor-modal.activo {
    display: flex;
}

.asesor-modal-contenido {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.14), rgba(13, 19, 38, 0.98));
    border: 1px solid rgba(0, 212, 255, 0.32);
    border-radius: 30px;
    padding: 34px;
    box-shadow: var(--sombra-card);
    position: relative;
}

.asesor-cerrar {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 26px;
    cursor: pointer;
}

.asesor-badge {
    display: inline-block;
    color: var(--color-principal);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.22);
    margin-bottom: 18px;
}

.asesor-modal-contenido h2 {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 14px;
}

.asesor-modal-contenido > p {
    color: var(--color-texto-suave);
    font-size: 15px;
    margin-bottom: 26px;
}

.error-form {
    display: block;
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 7px;
}

.asesor-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

/* 
   Campos autocompletados por consulta RUC.
   Los diferenciamos visualmente para que se vean profesionales.
*/
.form-grupo input[readonly] {
    background: rgba(0, 212, 255, 0.07);
    border-color: rgba(0, 212, 255, 0.25);
    color: var(--color-texto);
    cursor: not-allowed;
}

/* 
   Mensaje informativo mientras consulta el RUC.
*/
.estado-info {
    color: #00d4ff;
}

/* 
   Mensaje correcto cuando el RUC fue consultado.
*/
.estado-ok {
    color: #35e88b;
}

/* 
   Mensaje de error cuando el RUC no existe o falla.
*/
.estado-error {
    color: #ff6b6b;
}

/* =====================================================
   5. RESPONSIVE PARA TABLETS
   ===================================================== */

/* 
   Estos estilos se aplican cuando la pantalla mide 900px o menos.
   Normalmente tablets y laptops pequeñas.
*/
@media (max-width: 900px) {

    /* 
       El hero pasa de 2 columnas a 1 columna.
       Así se adapta mejor a pantallas pequeñas.
    */
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 120px;
    }

    /* 
       Centramos la descripción.
    */
    .hero-descripcion {
        margin-left: auto;
        margin-right: auto;
    }

    /* 
       Centramos botones.
    */
    .hero-botones {
        justify-content: center;
    }

    /* 
       La imagen queda debajo del texto.
    */
    .hero-imagen {
        max-width: 520px;
        margin: auto;
    }
        /* 
       En tablet las tarjetas pasan a 2 columnas.
    */
    .sistemas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
        /* 

   En tablet los sectores pasan a 2 columnas.
*/
    .sectores-grid {
        grid-template-columns: repeat(2, 1fr);
        }

            /* 
       En tablet los datos de clientes pasan a una sola columna.
    */
    .clientes-resumen {
        grid-template-columns: 1fr;
    }
        /* 
       En tablet Nosotros pasa a una sola columna.
    */
    .nosotros-contenedor {
        grid-template-columns: 1fr;
    }

    /* 
       Centramos el texto en pantallas medianas.
    */
    .nosotros-texto {
        text-align: center;
    }

    /* 
       Centramos los botones.
    */
    .nosotros-botones {
        justify-content: center;
    }

        /* 
       En tablet la sección soporte pasa a una sola columna.
    */
    .soporte-contenedor {
        grid-template-columns: 1fr;
    }

        /* 
       En tablet contacto pasa a una sola columna.
    */
    .contacto-contenedor {
        grid-template-columns: 1fr;
    }

    /* 
       Centramos el texto principal de contacto.
    */
    .contacto-info {
        text-align: center;
    }

    /* 
       Centramos el párrafo principal.
    */
    .contacto-info > p {
        margin-left: auto;
        margin-right: auto;
    }

        /* 
       En tablet los planes se acomodan en 2 columnas cuando hay espacio.
       Si no entra, automáticamente bajan gracias al minmax.
    */
    .planes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 
       Centramos los subtítulos de cada grupo de planes.
    */
    .planes-subtitulo {
        text-align: center;
    }

        /* 
       En tablet SUNAT pasa a una sola columna.
    */
    .sunat-contenedor {
        grid-template-columns: 1fr;
    }

    /* 
       Centramos el texto principal de SUNAT.
    */
    .sunat-info {
        text-align: center;
    }

    /* 
       Centramos el párrafo.
    */
    .sunat-info > p {
        margin-left: auto;
        margin-right: auto;
    }

    /* 
       Centramos los botones.
    */
    .sunat-botones {
        justify-content: center;
    }

    /* 
       En tablet los conceptos pasan a 2 columnas.
    */
    .sunat-conceptos {
        grid-template-columns: repeat(2, 1fr);
    }

        /* 
       En tablet el footer pasa a 2 columnas.
    */
   /* 
   En tablet:
   marca arriba y las otras dos abajo.
*/
    .footer-contenedor {
        grid-template-columns: 1fr 1fr;
    }

    /* 
    La marca ocupa toda la fila superior.
    */
    .footer-marca {
        grid-column: span 2;
    }

    /* 
       La parte inferior se acomoda en columna.
    */
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
      /* 
       El modal de video se adapta mejor en tablets.
    */
    .video-modal-contenido {
        max-width: 760px;
    }   

        /* 
       En tablet mostramos 2 tarjetas.
    */
    .novedades-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        /* 
       Modal de novedades más compacto en tablet.
    */
    .novedad-modal-contenido {
        max-width: 720px;
    }

        /* 
       En tablet el mapa pasa a una sola columna.
    */
    .mapa-contenedor {
        grid-template-columns: 1fr;
    }

    /* 
       Reducimos altura del mapa para tablet.
    */
    .mapa-visual {
        min-height: 480px;
    }

    /* 
       Centramos el panel informativo.
    */
    .mapa-info {
        text-align: center;
    }

    /* 
       Centramos los departamentos.
    */
    .departamentos-grid {
        justify-content: center;
    }

    /* 
       Panel en una sola columna.
    */
    .implementaciones-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* 
       Centramos resumen.
    */
    .implementaciones-resumen {
        margin: auto;
    }

    /* 
       En tablet mostramos 2 columnas.
    */
    .implementaciones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Modal asesor en tablet */
    .asesor-modal-contenido {
        max-width: 650px;
    }
}

/* =====================================================
   6. RESPONSIVE PARA CELULARES
   ===================================================== */

/* 
   Estos estilos se aplican en celulares.
   Esta parte es MUY IMPORTANTE.
*/
@media (max-width: 768px) {

    /* 
       Reducimos la altura del navbar.
    */
    .navbar {
        height: 70px;
    }

    /* 
       Mostramos el botón hamburguesa en celular.
    */
    .menu-btn {
        display: block;
    }

    /* 
       Menú móvil oculto inicialmente.
       Bajará desde arriba cuando JavaScript active la clase .activo.
    */
    .menu {
        position: absolute;
        top: 78px;
        right: 0;
        width: 100%;
        max-width: 100%;
        background: rgba(7, 11, 24, 0.98);
        border: 1px solid var(--color-borde);
        border-radius: 0 0 18px 18px;
        flex-direction: column;
        gap: 0;
        padding: 12px 0;
        display: none;
        overflow: hidden;
    }

    /* 
       Cada opción del menú móvil ocupa todo el ancho.
    */
    .menu li {
        display: block;
        width: 100%;
        padding: 14px;
        font-size: 15px;
    }

    /* 
       Enlaces más cómodos para tocar con el dedo.
    */
    .menu a {
        display: block;
        padding: 14px;
        font-size: 15px;
    }

    /* 
       Esta clase la activaremos con JavaScript.
       Cuando el usuario toque ☰, el menú se mostrará.
    */
    .menu.activo {
        display: flex;
    }

    /* 
       Ajustamos el hero para celular.
    */
    .hero {
        width: 92%;
        padding-top: 115px;
        gap: 35px;
    }

    /* 
       El título será grande pero cómodo en móvil.
    */
    .hero h1 {
        font-size: 34px;
    }

    /* 
       La descripción baja un poco de tamaño.
    */
    .hero-descripcion {
        font-size: 15px;
    }

    /* 
       Botones en columna para que se vean bien en celular.
    */
    .hero-botones {
        flex-direction: column;
    }

    /* 
       Botones ocupan todo el ancho disponible.
    */
    .btn {
        width: 100%;
    }

    /* 
       Los datos pasan a una sola columna.
    */
    .hero-datos {
        grid-template-columns: 1fr;
    }

    /* 
       Ocultamos el texto largo del logo si falta espacio.
       Puedes quitar esto si quieres que siempre se vea.
    */
    .logo span {
        font-size: 13px;
    }

        /* 
       Secciones con menos espacio en celular.
    */
    .seccion {
        width: 92%;
        padding: 80px 0;
    }

    /* 
       Centramos el encabezado de sección en móvil.
    */
    .seccion-encabezado {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* 
       En celular las tarjetas van en una sola columna.
    */
    .sistemas-grid {
        grid-template-columns: 1fr;
    }

    /* 
       La rayita del menú activo no se usa en menú móvil.
       En móvil queda mejor con fondo.
    */
    .menu a.activo::after {
        display: none;
    }

    /* 
       Estilo del menú activo en celular.
    */
    .menu a.activo {
        background: rgba(0, 212, 255, 0.1);
    }
    /* 
   En celular los sectores se muestran en una sola columna.
*/
    .sectores-grid {
        grid-template-columns: 1fr;
    }

    /* 
    Quitamos altura fija para que cada tarjeta se adapte a su contenido.
    */
    .sector-card {
        min-height: auto;
    }

        /* 
       Ajustamos el carrusel para celular.
    */
    .clientes-marquee {
        border-radius: 20px;
        padding: 18px 0;
    }

    /* 
       Reducimos los degradados laterales en celular.
    */
    .clientes-marquee::before,
    .clientes-marquee::after {
        width: 55px;
    }

    /* 
       Los nombres se ven más compactos en móvil.
    */
    .clientes-track span {
        font-size: 13px;
        padding: 11px 18px;
    }

    /* 
       Centramos la nota inferior en celular.
    */
    .clientes-nota {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

        /* 
       En celular las tarjetas de Nosotros van una debajo de otra.
    */
    .nosotros-panel {
        grid-template-columns: 1fr;
    }

    /* 
       Quitamos altura fija para que se adapte al contenido.
    */
    .nosotros-card {
        min-height: auto;
    }
        /* 
       En celular mostramos una sola tarjeta.
    */
    .novedades-grid {
        grid-template-columns: 1fr;
    }

    /* 
       Imagen más pequeña en móvil.
    */
    .novedad-imagen {
        height: 220px;
    }

    /* 
       Ajustamos padding.
    */
    .novedad-contenido {
        padding: 22px;
    }

    /* 
       Título más compacto.
    */
    .novedad-contenido h3 {
        font-size: 20px;
    }

    /* 
       Footer en columna.
    */
    .novedad-footer {
        flex-direction: column;
        align-items: flex-start;
    }
        /* 
       Ajustamos la sección contacto para móvil.
    */
    .contacto {
        padding-bottom: 100px;
    }

    /* 
       El formulario ocupa menos espacio interno en celular.
    */
    .contacto-formulario {
        padding: 25px;
        border-radius: 24px;
    }

    /* 
       Título del formulario más pequeño en móvil.
    */
    .contacto-formulario h3 {
        font-size: 24px;
    }

    /* 
       Evitamos que los correos largos rompan el diseño.
    */
    .contacto-item p {
        word-break: break-word;
    }

    /* 
       En móvil quitamos el desplazamiento lateral del hover.
    */
    .contacto-item:hover {
        transform: translateY(-4px);
    }

    /* 
       Botón flotante más cómodo en celular.
    */
       /* 
       Ajustamos tamaño para celular.
    */
       /* 
       Ajustamos el chat flotante en celular.
    */
    .whatsapp-chat {
        right: 16px;
        bottom: 16px;
    }

    /* 
       La ventana no debe salirse de la pantalla.
    */
    .whatsapp-box {
        width: calc(100vw - 32px);
        max-width: 330px;
    }

    /* 
       Botón flotante más cómodo en móvil.
    */
    .whatsapp-flotante {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }
        /* 
       En celular los planes van uno debajo de otro.
       Esto evita scroll horizontal y mejora la lectura.
    */
    .planes-grid {
        grid-template-columns: 1fr;
    }

    /* 
       Reducimos espacio superior de cada grupo de planes.
    */
    .planes-subtitulo {
        margin-top: 45px;
        margin-bottom: 20px;
        font-size: 20px;
        text-align: center;
    }

    /* 
       Ajustamos la tarjeta para móvil.
    */
    .plan-card {
        padding: 24px;
        border-radius: 22px;
    }

    /* 
       Precio más controlado en celular.
    */
    .precio {
        font-size: 28px;
    }

    /* 
       Las listas se leen mejor con este tamaño en móvil.
    */
    .plan-card li {
        font-size: 14px;
    }

        /* 
       Ajustamos la tarjeta del validador para celular.
    */
    .sunat-validador {
        padding: 25px;
        border-radius: 24px;
    }

    /* 
       Título del validador más pequeño.
    */
    .sunat-validador h3 {
        font-size: 24px;
    }

    /* 
       En celular serie y número van uno debajo del otro.
    */
    .sunat-doble {
        grid-template-columns: 1fr;
    }

    /* 
       En celular los conceptos van en una sola columna.
    */
    .sunat-conceptos {
        grid-template-columns: 1fr;
    }

    /* 
       En celular quitamos altura o espacios innecesarios.
    */
    .sunat-card {
        min-height: auto;
    }

        /* 
       En celular el footer se muestra en una sola columna.
    */
    .footer-contenedor {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }

    /* 
       Centramos el logo del footer.
    */
    .footer-logo {
        justify-content: center;
    }

    /* 
       Centramos la descripción.
    */
    .footer-marca p {
        margin-left: auto;
        margin-right: auto;
    }

        /* 
       Modal de novedades adaptado a celular.
    */
    .novedad-modal {
        padding: 14px;
    }

    /* 
       Caja del artículo más cómoda en móvil.
    */
    .novedad-modal-contenido {
        max-height: 88vh;
        padding: 26px;
        border-radius: 22px;
    }

    /* 
       Título más pequeño en celular.
    */
    .novedad-modal-contenido h2 {
        font-size: 25px;
    }

    /* 
       Subtítulos más compactos.
    */
    .novedad-modal-contenido h3 {
        font-size: 18px;
    }

    /* 
       Texto más cómodo para móvil.
    */
    .novedad-modal-contenido p,
    .novedad-modal-contenido li {
        font-size: 14px;
    }

    /* 
       Centramos el botón de WhatsApp.
    */
    .footer-whatsapp {
        justify-content: center;
    }

        /* 
       Ajustamos el mapa para celular.
    */
    .mapa-visual {
        min-height: 430px;
        border-radius: 24px;
    }

    /* 
       Reducimos la silueta para que no se salga de pantalla.
    */
    .peru-mapa {
        width: 210px;
        height: 360px;
    }

    /* 
       Puntos un poco más pequeños en móvil.
    */
    .mapa-punto {
        width: 11px;
        height: 11px;
    }

    /* 
       En móvil ocultamos el tooltip para evitar desorden al tocar.
    */
    .mapa-punto::after {
        display: none;
    }

    /* 
       Panel más compacto en móvil.
    */
    .mapa-info {
        padding: 26px;
        border-radius: 24px;
    }

    /* 
       Título del panel más pequeño.
    */
    .mapa-info h3 {
        font-size: 24px;
    }

    /* 
       Departamentos más compactos.
    */
    .departamentos-grid span {
        font-size: 12.5px;
        padding: 9px 12px;
    }

      /* 
       Panel más compacto.
    */
    .implementaciones-panel {
        padding: 25px;
        border-radius: 24px;
    }

    /* 
       Título más pequeño.
    */
    .implementaciones-panel h3 {
        font-size: 24px;
    }

    /* 
       En celular una tarjeta por fila.
    */
    .implementaciones-grid {
        grid-template-columns: 1fr;
    }

    /* 
       Tarjeta más compacta.
    */
    .implementacion-card {
        min-height: auto;
        padding: 24px;
    }

    /* Modal asesor en celular */
    .asesor-modal {
        padding: 14px;
    }

    .asesor-modal-contenido {
        padding: 26px;
        border-radius: 24px;
    }

    .asesor-modal-contenido h2 {
        font-size: 26px;
    }

    @media (max-width: 768px) {

    /* 
       Ajustamos el modal de video para celulares.
       Así no se pega a los bordes y se ve cómodo.
    */
    .video-modal {
        padding: 14px;
    }

    /* 
       Caja del video más redondeada y adaptada a móvil.
    */
    .video-modal-contenido {
        border-radius: 18px;
    }

    /* 
       Botón cerrar más cómodo para tocar con el dedo.
    */
    .video-modal-cerrar {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    /* 
       Botón de video dentro de las tarjetas más cómodo en móvil.
    */
    .sistema-video-btn {
        font-size: 13.5px;
        padding: 13px 14px;
    }
  }


}

/* =====================================================
   7. RESPONSIVE PARA CELULARES MUY PEQUEÑOS
   ===================================================== */

/* 
   Para celulares muy pequeños, como pantallas de 360px.
*/
@media (max-width: 420px) {

    /* 
       Reducimos un poco el texto del logo.
    */
    .logo span {
        font-size: 11px;
    }

    /* 
       Reducimos el tamaño del logo.
    */
    .logo img {
        width: 40px;
        height: 40px;
    }

    /* 
       Título más controlado para pantallas pequeñas.
    */
    .hero h1 {
        font-size: 30px;
    }

    /* 
       Ajustamos la etiqueta superior.
    */
    .hero-etiqueta {
        font-size: 12px;
        padding: 8px 13px;
    }
}