/* ============================================================
   ESTILOS GENERALES - SCAPE
   ============================================================ */

/* Variables CSS globales: definen la paleta de colores del sitio */
:root {
    --primary-color: #0d6efd; /* color principal / primario */
    --dark-bg: #0f172a; /* fondo oscuro general */
    --card-bg: #1e293b; /* fondo de las tarjetas */
    --accent-color: #38bdf8; /* color de acento (azul claro) */
    --text-muted: #94a3b8; /* color de texto atenuado */
}

/* Estilos base del elemento raíz: ajusta el tamaño base de la fuente */
html {
    font-size: 19px; /* tamaño de fuente base para las rem */
}

/* Estilos generales del cuerpo de la página */
html {
    scroll-behavior: auto; /* saltos de ancla directos, sin animación */
}

body {
    font-family: 'Product Sans', sans-serif; /* fuente principal */
    background-color: var(--dark-bg); /* fondo oscuro global */
    color: #f8fafc; /* color de texto principal */
    overflow-x: hidden; /* evita scroll horizontal */
    display: flex; /* el cuerpo usa flex en columna */
    flex-direction: column; /* apila navbar, contenido y footer */
    min-height: 100vh; /* el alto mínimo ocupa toda la ventana */
}

/* Envuelve el contenido de cada página para que el footer quede en el fondo sin espacios vacíos */
main.app-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* el contenido crece y empuja el footer al fondo */
    min-width: 0; /* evita desbordes horizontales en móvil */
    width: 100%;
}

/* Tipografía compartida por títulos y la marca de la barra de navegación */
h1, h2, h3, .navbar-brand {
    font-family: 'Product Sans', sans-serif;
}

/* Navbar */
/* Estilos de la barra de navegación */
.navbar {
    background: rgba(15, 23, 42, 0.8); /* fondo semitransparente */
    backdrop-filter: blur(10px); /* efecto de desenfoque del fondo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* borde inferior sutil */
}

/* Transición de color en los enlaces de navegación */
.nav-link {
    transition: color 0.3s; /* anima el cambio de color al hacer hover */
}

/* Color de acento al pasar el cursor sobre los enlaces de navegación */
.nav-link:hover {
    color: var(--accent-color) !important; /* fuerza el color de acento */
}

/* Posición relativa en los enlaces para ubicar el indicador de sección activa */
.navbar .nav-link {
    position: relative; /* permite posicionar el indicador respecto al enlace */
}

/* Enlace de la sección visible: texto en azul de acento */
.navbar .nav-link.active {
    color: var(--accent-color) !important; /* fuerza el azul en la sección activa */
}

/* Luz azul que indica en el navbar la sección por la que el usuario se desplaza */
.navbar .nav-link.active::after {
    content: ""; /* genera el indicador visual */
    position: absolute; /* lo ubica respecto al enlace */
    left: 12px; /* separación lateral izquierda */
    right: 12px; /* separación lateral derecha */
    bottom: 2px; /* cerca del borde inferior del enlace */
    height: 2px; /* grosor de la línea */
    border-radius: 2px; /* puntas redondeadas */
    background: var(--accent-color); /* línea azul clara */
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.9); /* halo luminoso azul */
}

/* Hero Section */
/* Estilos de la sección principal (hero) */
.hero-section {
    padding: 100px 0; /* espaciado vertical generoso */
    background: radial-gradient(circle at top right, rgba(13, 110, 253, 0.15), transparent); /* resplandor decorativo superior derecho */
}

/* Estilos del título de gran impacto del hero */
.titulo-impacto {
    font-size: 3.5rem; /* texto grande */
    line-height: 1.2; /* interlineado compacto */
    margin-bottom: 1.5rem; /* separación inferior */
}

/* Colorea de acento el span (palabra destacada) dentro del título */
.titulo-impacto span {
    color: var(--accent-color);
}

/* Tarjetas */
/* Estilos base de las tarjetas personalizadas */
.card-custom {
    background: var(--card-bg); /* fondo de tarjeta */
    border: 1px solid rgba(255, 255, 255, 0.1); /* borde sutil claro */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* anima elevación y sombra */
    border-radius: 16px; /* esquinas redondeadas */
    height: 100%; /* iguala altura dentro de su fila */
}

/* Efecto de elevación al pasar el cursor sobre las tarjetas */
.card-custom:hover {
    transform: translateY(-10px); /* la tarjeta se levanta */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); /* sombra profunda */
    border-color: var(--accent-color); /* resalta el borde con el acento */
}

/* Estilos de las tarjetas de funcionalidades */
.card-func {
    background: rgba(30, 41, 59, 0.5); /* fondo translúcido */
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05); /* borde muy sutil */
    height: 100%; /* altura uniforme */
    transition: all 0.3s; /* transición general */
}

/* Efecto hover de las tarjetas de funcionalidades */
.card-func:hover {
    background: rgba(30, 41, 59, 0.8); /* fondo más opaco */
    border-color: rgba(56, 189, 248, 0.3); /* borde en tono acento */
}

/* Contenedor cuadrado del icono dentro de las tarjetas */
.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(56, 189, 248, 0.1); /* fondo traslúcido azul */
    color: var(--accent-color); /* icono en color acento */
    border-radius: 10px;
    display: flex;
    align-items: center; /* centra verticalmente el icono */
    justify-content: center; /* centra horizontalmente el icono */
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* Decoración */
/* Línea decorativa que separa contenido */
.linea-decorativa {
    width: 60px;
    height: 4px;
    background: var(--accent-color); /* color de acento */
    border-radius: 2px;
    margin: 1rem auto; /* centrada horizontalmente */
}

/* Variante para alinear la línea a la izquierda */
.linea-decorativa.ms-0 {
    margin-left: 0; /* elimina el auto-centrado */
}

/* Botones */
/* Estilos del botón principal personalizado */
.btn-primary-custom {
    background-color: var(--primary-color); /* fondo del botón */
    border: none;
    padding: 12px 30px; /* relleno interno */
    border-radius: 50px; /* botón tipo píldora */
    font-weight: 600;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s; /* transición de todas las propiedades */
}

/* Efecto hover del botón principal */
.btn-primary-custom:hover {
    background-color: #0b5ed7; /* variante más oscura del azul */
    transform: scale(1.05); /* se agranda ligeramente */
    color: white;
}

/* Secciones */
/* Compensación del scroll al navegar a cada sección por anclas */
section {
    scroll-margin-top: 80px; /* deja margen superior para la navbar fija */
}

/* Footer Antiguo (Mantenido por compatibilidad) */
/* Estilos del pie de página clásico */
.footer-custom {
    background: #020617; /* fondo casi negro */
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* borde superior sutil */
}

/* Formulario */
/* Estilos de los campos de formulario */
.form-control {
    background-color: rgba(15, 23, 42, 0.5) !important; /* fondo translúcido oscuro */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* borde sutil */
    color: white !important; /* texto claro */
    padding: 12px;
}

/* Resaltado del campo al recibir el foco */
.form-control:focus {
    border-color: var(--accent-color) !important; /* borde en color acento */
    box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.25) !important; /* halo azul suave */
}

/* ============================================================
   NUEVAS CORRECCIONES DE CONTRASTE Y MOCKUPS
   ============================================================ */

/* Corrección radical para forzar que text-muted y text-secondary usen tu color claro */
/* Asegura que los textos atenuados utilicen el color claro definido */
.text-muted, .text-secondary-custom {
    color: var(--text-muted) !important;
}

/* Corrección de inputs, placeholders e iconos en Contáctanos */
/* Texto resaltado en color de acento para secciones de contacto */
.text-accent-custom {
    color: var(--accent-color) !important;
}

/* Placeholder legible dentro de los campos de formulario */
.form-control::placeholder {
    color: rgba(248, 250, 252, 0.5) !important; /* Texto del placeholder claro y legible */
}

/* Texto en color cian */
.text-cyan {
    color: #00bacf;
}
/* Espaciado entre letras aumentado para titulares */
.tracking-wider {
    letter-spacing: 0.1em;
}
/* Corrige el color de los bordes oscuros */
.border-dark-custom {
    border-color: #1e293b !important;
}

/* Estilos del Nuevo Footer (image_502843.png) */
/* Contenedor principal del nuevo pie de página */
.footer-scape-custom {
    background-color: #090f1c; 
    border-top: 1px solid #1e293b;
}
/* Icono de escudo de la marca */
.brand-icon-shield {
    width: 40px;
    height: 40px;
    border: 1px solid #00bacf;
    border-radius: 8px;
    display: flex;
    align-items: center; /* centra verticalmente el icono */
    justify-content: center; /* centra horizontalmente el icono */
    color: #00bacf;
    font-size: 1.2rem;
}
/* Título de la marca en el footer */
.footer-brand-title {
    font-family: 'Product Sans', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1;
}
/* Subtítulo pequeño bajo la marca */
.footer-brand-subtitle {
    font-size: 0.65rem;
    color: #94a3b8;
    letter-spacing: 2px;
}
/* Títulos de cada columna/sección del footer */
.footer-section-title {
    font-size: 0.85rem;
    letter-spacing: 1px;
}
/* Enlaces normales del footer */
.footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s; /* anima el cambio de color */
}
/* Enlaces del footer al pasar el cursor */
.footer-link:hover {
    color: #00d2ff;
}

/* Cookie Banner - bloquea la página hasta aceptación */
/* Capa oscura que cubre toda la página detrás del banner */
.cookie-overlay {
    position: fixed;
    inset: 0; /* ocupa toda la pantalla */
    background: rgba(0,0,0,0.6); /* oscurece el fondo */
    z-index: 9998; /* por debajo del banner */
    transition: opacity 0.4s ease; /* desvanecimiento suave */
}
/* Estado oculto del overlay (invisible e intransitable) */
.cookie-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* no recibe clics */
}
/* Banner de cookies fijo en la parte inferior */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0; /* anclado al fondo */
    background: var(--dark-bg);
    border-top: 1px solid rgba(56,189,248,0.3); /* borde superior azulado */
    padding: 1rem 0;
    z-index: 9999; /* por encima del overlay */
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3); /* sombra hacia arriba */
    transition: transform 0.4s ease, opacity 0.4s ease; /* anima entrada/salida */
}
/* Estado oculto del banner (se desliza hacia abajo) */
.cookie-banner.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
/* Panel (modal) de configuración de cookies */
.cookie-panel {
    position: fixed;
    inset: 0; /* cubre toda la pantalla */
    z-index: 10000; /* por encima de todo */
    display: flex;
    align-items: center; /* centra verticalmente el modal */
    justify-content: center; /* centra horizontalmente el modal */
    padding: 1rem;
    opacity: 0; /* inicialmente invisible */
    pointer-events: none;
    transition: opacity 0.3s ease;
}
/* Estado visible del panel de cookies */
.cookie-panel.show {
    opacity: 1;
    pointer-events: auto; /* vuelve a aceptar clics */
}
/* Caja del modal de cookies */
.cookie-panel-box {
    background: var(--dark-bg);
    border: 1px solid rgba(56,189,248,0.3);
    border-radius: 16px;
    padding: 2rem;
    max-width: 460px; /* ancho máximo */
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); /* sombra profunda */
}
/* Título dentro de la caja de cookies */
.cookie-panel-box h4 {
    font-family: 'Product Sans', sans-serif;
}
/* Checkbox de cada opción de cookie */
.cookie-option .form-check-input {
    background-color: var(--card-bg);
    border-color: rgba(255,255,255,0.2);
}
/* Checkbox de cookie cuando está marcada */
.cookie-option .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================================
   F.A.Q.
   ============================================================ */
/* Tarjetas de las preguntas frecuentes con altura automática */
#faq .card-custom {
    height: auto;
}
/* Desactiva el efecto de elevación en las tarjetas de FAQ */
#faq .card-custom:hover {
    transform: none;
}