/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */
:root {
    /* --- Colores de fondo --- */
    --color-fondo-oscuro:       #ffffff;
    --color-fondo-medio:        #f3f7f3;
    --color-fondo-tarjeta:      #ffffff;
    --color-fondo-tarjeta-hover: #f0fdf4;

    /* --- Colores de marca (verdes) --- */
    --color-verde-claro:  rgb(94, 191, 65); /* verde principal */
    --color-verde-oscuro: rgb(30, 90, 76);  /* verde oscuro */

    /* --- Alias de acento IA (reasignados a verdes) --- */
    --color-azul-ia:    var(--color-verde-claro);
    --color-violeta-ia: var(--color-verde-oscuro);

    /* --- Gradiente principal IA (verde → verde oscuro) --- */
    --gradiente-ia: linear-gradient(135deg, var(--color-verde-claro), var(--color-verde-oscuro));

    /* --- Colores de texto --- */
    --color-texto-principal:  #111827;
    --color-texto-secundario: #4b5563;

    /* --- Bordes --- */
    --color-borde:        rgba(15, 23, 42, 0.08);
    --color-borde-activo: rgba(94, 191, 65, 0.35);

    /* --- Tipografía --- */
    --fuente-titulos: 'Space Grotesk', sans-serif;
    --fuente-cuerpo:  'Inter', sans-serif;

    /* --- Escala de tamaños de fuente --- */
    --tamano-xs:   0.75rem;    /* 12px */
    --tamano-sm:   0.875rem;   /* 14px */
    --tamano-base: 1rem;       /* 16px */
    --tamano-lg:   1.125rem;   /* 18px */
    --tamano-xl:   1.25rem;    /* 20px */
    --tamano-2xl:  1.5rem;     /* 24px */
    --tamano-3xl:  1.875rem;   /* 30px */
    --tamano-4xl:  2.25rem;    /* 36px */
    --tamano-5xl:  3rem;       /* 48px */
    --tamano-6xl:  3.75rem;    /* 60px */

    /* --- Espaciado --- */
    --espaciado-seccion:       6rem;
    --espaciado-seccion-movil: 4rem;
    --radio-tarjeta:           1rem;
    --radio-boton:             0.5rem;
    --ancho-maximo-contenido:  1200px;

    /* --- Sombras --- */
    --sombra-tarjeta-hover: 0 8px 40px rgba(94, 191, 65, 0.15);
    --sombra-boton-ia:      0 4px 20px rgba(94, 191, 65, 0.3);

    /* --- Transiciones --- */
    --transicion-rapida: 0.2s ease;
    --transicion-media:  0.3s ease;
}


/* ============================================================
   RESET Y ESTILOS BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--fuente-cuerpo);
    background-color: var(--color-fondo-oscuro);
    color: var(--color-texto-principal);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ============================================================
   COMPONENTES REUTILIZABLES
   ============================================================ */

/* Contenedor general de secciones */
.contenedor-seccion {
    max-width: var(--ancho-maximo-contenido);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Encabezado centrado de sección */
.encabezado-seccion {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 4rem auto;
}

/* Etiqueta pequeña sobre los títulos de sección */
.etiqueta-seccion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(94, 191, 65, 0.08);
    border: 1px solid var(--color-borde-activo);
    color: var(--color-azul-ia);
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: var(--tamano-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Título principal de cada sección */
.titulo-seccion {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-4xl);
    font-weight: 700;
    color: var(--color-texto-principal);
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Descripción bajo el título de sección */
.descripcion-seccion {
    font-size: var(--tamano-lg);
    color: var(--color-texto-secundario);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Variantes de alineación para la sección de estadísticas */
.titulo-alineado-izquierda {
    text-align: left;
    margin-bottom: 1.25rem;
}

.descripcion-alineada-izquierda {
    text-align: left;
    max-width: 100%;
    margin: 0 0 2rem;
}

/* Texto con degradado IA (azul → violeta) */
.texto-degradado-ia {
    background: var(--gradiente-ia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Botón primario (fondo degradado) --- */
.boton-primario {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gradiente-ia);
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radio-boton);
    font-size: var(--tamano-base);
    font-weight: 600;
    font-family: var(--fuente-cuerpo);
    border: none;
    cursor: pointer;
    transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
    box-shadow: var(--sombra-boton-ia);
}

.boton-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(94, 191, 65, 0.4);
}

/* --- Botón secundario (borde translúcido) --- */
.boton-secundario {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--color-texto-principal);
    padding: 0.75rem 1.75rem;
    border-radius: var(--radio-boton);
    font-size: var(--tamano-base);
    font-weight: 500;
    border: 1px solid var(--color-borde);
    cursor: pointer;
    transition: border-color var(--transicion-rapida), color var(--transicion-rapida);
}

.boton-secundario:hover {
    border-color: var(--color-azul-ia);
    color: var(--color-azul-ia);
}

/* --- Botón contorno (borde azul IA) --- */
.boton-contorno {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--color-azul-ia);
    padding: 0.75rem 1.75rem;
    border-radius: var(--radio-boton);
    font-size: var(--tamano-base);
    font-weight: 600;
    border: 1px solid var(--color-azul-ia);
    cursor: pointer;
    transition: background var(--transicion-rapida);
}

.boton-contorno:hover {
    background: rgba(94, 191, 65, 0.08);
}

/* Modificador de tamaño grande para botones */
.boton-grande {
    padding: 1rem 2.25rem;
    font-size: var(--tamano-lg);
}


/* ============================================================
   NAVEGACIÓN PRINCIPAL
   ============================================================ */
.navegacion-principal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-borde);
    transition: background var(--transicion-media);
}

.navegacion-contenedor {
    max-width: var(--ancho-maximo-contenido);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Logo */
.navegacion-logo {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-2xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navegacion-logo img {
    height: 60px;
    width: auto;
    max-height: 60px;
    object-fit: contain;
    margin-right: 0.6rem;
    display: block;
}

.logo-nombre {
    color: var(--color-texto-principal);
}

.logo-ia {
    background: var(--gradiente-ia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Lista de enlaces de navegación */
.navegacion-enlaces {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    justify-content: center;
}

.enlace-nav {
    color: var(--color-texto-secundario);
    font-size: var(--tamano-base);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transicion-rapida);
}

.enlace-nav:hover {
    color: var(--color-texto-principal);
}

/* Botones a la derecha del nav */
.navegacion-acciones {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Botón Login del nav */
.boton-login {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gradiente-ia);
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radio-boton);
    font-size: var(--tamano-sm);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--sombra-boton-ia);
    transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.boton-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0, 212, 255, 0.4);
}

/* Botón hamburguesa para móvil */
.boton-menu-movil {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
}

.linea-menu {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-texto-principal);
    border-radius: 2px;
    transition: transform var(--transicion-media), opacity var(--transicion-media);
}


/* ============================================================
   MENÚ MÓVIL (overlay que cae desde la nav)
   ============================================================ */
.menu-movil {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--color-fondo-medio);
    border-bottom: 1px solid var(--color-borde);
    padding: 1.5rem;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform var(--transicion-media), opacity var(--transicion-media);
}

.menu-movil.menu-abierto {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

.menu-movil-enlaces {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.enlace-nav-movil {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-texto-secundario);
    font-size: var(--tamano-base);
    font-weight: 500;
    border-radius: var(--radio-boton);
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}

.enlace-nav-movil:hover {
    background: var(--color-fondo-tarjeta);
    color: var(--color-texto-principal);
}

.boton-login-movil {
    margin-top: 0.75rem;
    justify-content: center;
    width: 100%;
}


/* ============================================================
   SECCIÓN HERO
   ============================================================ */
.seccion-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 110px 1.5rem 5rem;
    overflow: hidden;
    text-align: center;
}

/* Contenido central del hero */
.hero-contenedor {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Etiqueta "Impulsado por IA" */
.hero-etiqueta-ia {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(94, 191, 65, 0.08);
    border: 1px solid var(--color-borde-activo);
    color: var(--color-azul-ia);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: var(--tamano-sm);
    font-weight: 500;
    margin-bottom: 1.75rem;
    animation: pulso-brillo 3s infinite;
}

@keyframes pulso-brillo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(94, 191, 65, 0.2); }
    50%       { box-shadow: 0 0 0 10px rgba(94, 191, 65, 0); }
}

/* Título H1 del hero */
.hero-titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-6xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-texto-principal);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

/* Párrafo descriptivo del hero */
.hero-descripcion {
    font-size: var(--tamano-xl);
    color: var(--color-texto-secundario);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: 1.75;
}

.hero-descripcion strong {
    color: var(--color-texto-principal);
}

/* Grupo de botones CTA del hero */
.hero-botones {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

/* Vídeo demostración de VIG-IA */
/* Estado inicial del vídeo: invisible y sin altura, para no ocupar espacio */
.hero-video {
    border-radius: var(--radio-tarjeta);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0 auto 2.5rem;
    max-width: 720px;
    width: 100%;
    pointer-events: none; /* impide clics accidentales mientras está oculto */
    transition: max-height 500ms ease, opacity 350ms ease;
}

/* Estado visible: se "despliega" suavemente hacia abajo y aparece */
.hero-video.is-visible {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
}

.video-demo {
    width: 100%;
    border-radius: var(--radio-tarjeta);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    display: block;
}

/* Barra de métricas rápidas */
.hero-metricas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    backdrop-filter: blur(4px);
}

.metrica-rapida {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.metrica-rapida strong {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-2xl);
    font-weight: 700;
    background: var(--gradiente-ia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metrica-rapida span {
    font-size: var(--tamano-sm);
    color: var(--color-texto-secundario);
}

.separador-metrica {
    width: 1px;
    height: 36px;
    background: var(--color-borde);
}

/* Círculos de fondo difuminados (decoración) */
.hero-decoracion {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.circulo-difuminado {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
}

.circulo-superior-derecha {
    width: 600px;
    height: 600px;
    background: var(--color-azul-ia);
    top: -200px;
    right: -200px;
}

.circulo-inferior-izquierda {
    width: 500px;
    height: 500px;
    background: var(--color-violeta-ia);
    bottom: -200px;
    left: -200px;
}


/* ============================================================
   SECCIÓN CARACTERÍSTICAS
   ============================================================ */
.seccion-caracteristicas {
    padding: var(--espaciado-seccion) 0;
    background: var(--color-fondo-medio);
}

/* Cuadrícula de 3 columnas para las tarjetas */
.cuadricula-caracteristicas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Tarjeta base */
.tarjeta-caracteristica {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: 2rem;
    transition:
        transform var(--transicion-media),
        box-shadow var(--transicion-media),
        border-color var(--transicion-media);
}

.tarjeta-caracteristica:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-tarjeta-hover);
    border-color: var(--color-borde-activo);
}

/* Primera tarjeta: ocupa 2 columnas y tiene fondo especial */
.tarjeta-destacada {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--color-fondo-tarjeta) 0%, rgba(94, 191, 65, 0.06) 100%);
    border-color: var(--color-borde-activo);
}

/* Icono de cada característica */
.icono-caracteristica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--gradiente-ia);
    border-radius: 12px;
    font-size: var(--tamano-xl);
    color: #fff;
    margin-bottom: 1.25rem;
}

.titulo-caracteristica {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-xl);
    font-weight: 600;
    color: var(--color-texto-principal);
    margin-bottom: 0.75rem;
}

.descripcion-caracteristica {
    font-size: var(--tamano-base);
    color: var(--color-texto-secundario);
    line-height: 1.65;
}

/* Comparativa visual "Antes → Ahora" */
.comparativa-tiempo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1rem;
    background: rgba(94, 191, 65, 0.08);
    border-radius: 0.5rem;
    font-size: var(--tamano-sm);
    font-weight: 600;
}

.tiempo-antes {
    color: var(--color-texto-secundario);
    text-decoration: line-through;
}

.tiempo-despues {
    color: var(--color-azul-ia);
}

.comparativa-tiempo i {
    color: var(--color-azul-ia);
    font-size: var(--tamano-xs);
}


/* ============================================================
   SECCIÓN ESTADÍSTICAS / BENEFICIOS
   ============================================================ */
.seccion-estadisticas {
    padding: var(--espaciado-seccion) 0;
    background: var(--color-fondo-oscuro); /* blanco */
    position: relative;
    overflow: hidden;
}

/* Layout de dos columnas: texto + números */
.estadisticas-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* Columna izquierda: texto */
.estadisticas-texto .etiqueta-seccion {
    display: flex;
}

.descripcion-alineada-izquierda strong {
    color: var(--color-verde-oscuro);
    font-weight: 700;
}

/* Lista de ventajas con check */
.lista-ventajas {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ventaja-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--tamano-base);
    color: var(--color-texto-secundario);
}

.ventaja-item i {
    color: var(--color-verde-claro);
    font-size: var(--tamano-lg);
    flex-shrink: 0;
}

/* Columna derecha: cuadrícula 2×2 de números */
.estadisticas-numeros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.tarjeta-estadistica {
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: 1.75rem;
    text-align: center;
    transition: border-color var(--transicion-media), box-shadow var(--transicion-media);
}

.tarjeta-estadistica:hover {
    border-color: var(--color-borde-activo);
    box-shadow: 0 4px 24px rgba(94, 191, 65, 0.15);
}

.numero-estadistica {
    display: block;
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-4xl);
    font-weight: 700;
    background: var(--gradiente-ia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.descripcion-estadistica {
    font-size: var(--tamano-sm);
    color: var(--color-texto-secundario);
    line-height: 1.4;
}


/* ============================================================
   SECCIÓN CÓMO FUNCIONA
   ============================================================ */
.seccion-como-funciona {
    padding: var(--espaciado-seccion) 0;
    background: var(--color-fondo-medio);
}

/* Fila de pasos con conectores */
.pasos-contenedor {
    display: flex;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
}

.paso {
    flex: 1;
    text-align: center;
    padding: 0 1.5rem;
}

/* Círculo numerado del paso */
.paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--gradiente-ia);
    border-radius: 50%;
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-xl);
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}

.paso-titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-xl);
    font-weight: 600;
    color: var(--color-texto-principal);
    margin-bottom: 0.75rem;
}

.paso-descripcion {
    font-size: var(--tamano-base);
    color: var(--color-texto-secundario);
    line-height: 1.65;
}

/* Línea horizontal que conecta pasos */
.conector-entre-pasos {
    flex: 0 0 auto;
    width: 80px;
    height: 2px;
    background: var(--gradiente-ia);
    margin-top: 32px;
    opacity: 0.4;
}


/* ============================================================
   SECCIÓN CONTACTO
   ============================================================ */
.seccion-contacto {
    padding: var(--espaciado-seccion) 0;
    background: var(--color-fondo-tarjeta);
}

/* Layout dos columnas: info izquierda + formulario derecha */
.contacto-contenido {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: start;
}

/* Columna izquierda: alinear etiqueta como bloque */
.contacto-info .etiqueta-seccion {
    display: flex;
}

/* Lista de datos de contacto (email, teléfono, horario) */
.lista-datos-contacto {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.dato-contacto {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--tamano-base);
    color: var(--color-texto-secundario);
}

.icono-dato-contacto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(94, 191, 65, 0.08);
    border: 1px solid var(--color-borde-activo);
    border-radius: 8px;
    color: var(--color-verde-claro);
    flex-shrink: 0;
}

/* Formulario */
.formulario-contacto {
    background: var(--color-fondo-medio);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Fila de dos campos lado a lado */
.grupo-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

/* Contenedor de cada campo con su label */
.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.etiqueta-campo {
    font-size: var(--tamano-sm);
    font-weight: 600;
    color: var(--color-texto-principal);
}

/* Input y textarea comparten estilo base */
.input-campo {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-boton);
    font-size: var(--tamano-base);
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto-principal);
    outline: none;
    transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

.input-campo::placeholder {
    color: var(--color-texto-secundario);
    opacity: 0.7;
}

.input-campo:focus {
    border-color: var(--color-verde-claro);
    box-shadow: 0 0 0 3px rgba(94, 191, 65, 0.15);
}

/* Estado de error de validación */
.input-campo.campo-error {
    border-color: #dc2626;
}

.textarea-mensaje {
    resize: vertical;
    min-height: 130px;
}

/* Botón de envío: ocupa todo el ancho */
.boton-enviar {
    width: 100%;
    justify-content: center;
}

/* Modal de feedback del formulario (éxito / error) */
.modal-feedback {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.modal-feedback.is-open {
    display: block;
}

.modal-feedback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 18, 0.45);
    backdrop-filter: blur(3px);
}

.modal-feedback-dialog {
    position: relative;
    width: min(520px, calc(100% - 2rem));
    margin: 14vh auto 0;
    background: var(--color-fondo-tarjeta);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-tarjeta);
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
    animation: modalEntrada 220ms ease-out;
}

@keyframes modalEntrada {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-feedback-cerrar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo-medio);
    color: var(--color-texto-principal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal-feedback-icono-grande {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    margin: 0 auto 0.75rem;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo-medio);
    font-size: 28px;
}

.modal-feedback-titulo {
    font-family: var(--fuente-titulos);
    font-size: var(--tamano-xl);
    margin: 0 0 0.5rem;
    text-align: center;
}

.modal-feedback-texto {
    margin: 0;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    font-size: var(--tamano-base);
    text-align: center;
}

.modal-feedback-acciones {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.modal-feedback--exito .modal-feedback-icono-grande {
    border-color: var(--color-borde-activo);
    background: rgba(94, 191, 65, 0.10);
    color: var(--color-verde-oscuro);
}

.modal-feedback--error .modal-feedback-icono-grande {
    border-color: rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}

/* Acentos de color visibles (título e icono) */
.modal-feedback--exito .modal-feedback-titulo {
    color: var(--color-verde-oscuro);
}

.modal-feedback--error .modal-feedback-titulo {
    color: #b91c1c;
}

.modal-feedback--exito .modal-feedback-icono-grande i {
    color: var(--color-verde-claro);
}

.modal-feedback--error .modal-feedback-icono-grande i {
    color: #dc2626;
}

/* Mensaje de éxito tras enviar (legacy, ya no se usa) */
.mensaje-exito {
    display: none;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: rgba(94, 191, 65, 0.08);
    border: 1px solid var(--color-borde-activo);
    border-radius: var(--radio-boton);
    color: var(--color-verde-oscuro);
    font-size: var(--tamano-sm);
    font-weight: 500;
}

.mensaje-exito.visible {
    display: flex;
}

.mensaje-exito i {
    color: var(--color-verde-claro);
    font-size: var(--tamano-lg);
    flex-shrink: 0;
}


/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie-de-pagina {
    background: var(--color-fondo-medio);
    border-top: 1px solid var(--color-borde);
    padding: 4rem 0 2rem;
}

/* Fila superior del pie: logo a la izquierda, datos a la derecha */
.pie-superior {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 2rem 0;
}

.pie-descripcion {
    font-size: var(--tamano-sm);
    color: var(--color-texto-secundario);
    margin-top: 0.75rem;
    line-height: 1.65;
    max-width: 265px;
}


/* Bloque derecho del pie: textos apilados alineados a la derecha */
.pie-inferior {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    text-align: right;
}

.pie-derechos,
.pie-desarrollado {
    font-size: var(--tamano-sm);
    color: var(--color-texto-secundario);
}

.pie-desarrollado{
    font-size: var(--tamano-sm);
    font-weight: 600;
    color: rgb(30 90 76 / var(--tw-text-opacity, 1));
}

/* ============================================================
   ANIMACIONES DE APARICIÓN CON SCROLL
   ============================================================ */
.elemento-oculto {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.elemento-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --tamano-6xl: 3rem;
        --tamano-5xl: 2.5rem;
    }

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

    .tarjeta-destacada {
        grid-column: span 2;
    }

    .estadisticas-contenido {
        gap: 3rem;
    }

    /* Contacto: reducir gap */
    .contacto-contenido {
        gap: 3rem;
    }
}


/* ============================================================
   RESPONSIVE — MÓVIL GRANDE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --espaciado-seccion: var(--espaciado-seccion-movil);
        --tamano-6xl: 2.5rem;
        --tamano-5xl: 2.25rem;
        --tamano-4xl: 2rem;
        --tamano-3xl: 1.75rem;
    }

    /* Nav: ocultar enlaces, mostrar hamburguesa */
    .navegacion-enlaces {
        display: none;
    }

    .boton-menu-movil {
        display: flex;
    }

    /* Hero */
    .hero-titulo {
        font-size: var(--tamano-4xl);
    }

    .hero-descripcion {
        font-size: var(--tamano-base);
    }

    .hero-metricas {
        flex-direction: column;
        gap: 1.25rem;
    }

    .separador-metrica {
        width: 60px;
        height: 1px;
    }

    /* Características: 1 columna */
    .cuadricula-caracteristicas {
        grid-template-columns: 1fr;
    }

    .tarjeta-destacada {
        grid-column: span 1;
    }

    /* Estadísticas: apilar columnas */
    .estadisticas-contenido {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .titulo-alineado-izquierda,
    .descripcion-alineada-izquierda {
        text-align: center;
    }

    .estadisticas-texto .etiqueta-seccion {
        justify-content: center;
    }

    /* Pasos: apilar verticalmente */
    .pasos-contenedor {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .conector-entre-pasos {
        width: 2px;
        height: 40px;
        margin-top: 0;
    }

    /* Contacto: apilar columnas */
    .contacto-contenido {
        grid-template-columns: 1fr;
    }

    .grupo-campos {
        grid-template-columns: 1fr;
    }

    /* Pie: apilar logo y datos */
    .pie-superior {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .pie-inferior {
        align-items: flex-start;
        text-align: left;
    }
}


/* ============================================================
   RESPONSIVE — MÓVIL PEQUEÑO (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    :root {
        --tamano-6xl: 2rem;
        --tamano-5xl: 2rem;
        --tamano-4xl: 1.75rem;
    }

    .hero-botones {
        flex-direction: column;
        align-items: stretch;
    }

    /* Contacto: formulario a pantalla completa */
    .formulario-contacto {
        padding: 1.5rem;
    }

    .boton-primario,
    .boton-secundario,
    .boton-contorno {
        justify-content: center;
    }

    .estadisticas-numeros {
        grid-template-columns: 1fr 1fr;
    }
}