/* ==========================================================================
   CÍRCULO+ — HOJA DE ESTILOS GLOBAL
   styles.css | Compartido entre todas las páginas del proyecto
   ==========================================================================

   ÍNDICE DE SECCIONES (busca el ID para saltar directo)
   -------------------------------------------------------
   [ID: variables-colores]      — Variables CSS de la paleta completa
   [ID: variables-tipografia]   — Variables CSS de tipografía
   [ID: variables-espaciado]    — Variables CSS de espaciado y bordes
   [ID: base]                   — Estilos base del body
   [ID: glass-header]           — Efecto cristal del header
   [ID: hero-bg]                — Imagen de fondo del Hero
   [ID: workflow-lines]         — Líneas conectoras de metodología
   [ID: glow]                   — Sombra resplandeciente suave
   [ID: scrollbar]              — Utilidades de scrollbar
   [ID: mobile-menu]            — Overlay, Drawer y Hamburguesa para móvil
   [ID: animaciones]            — Keyframes y clases de animación
   [ID: tabla]                  — Contenedor responsive de tablas
   [ID: formulario]             — Estados de inputs del formulario
   [ID: cards]                  — Tarjetas uniformes (card-base)
   ========================================================================== */


/* ==========================================================================
   [ID: variables-colores]
   PALETA DE COLORES — Sistema Material Design 3 (M3) de Círculo+
   Uso: var(--color-primary), var(--color-secondary), etc.
   ========================================================================== */
:root {

    /* ── SUPERFICIE (Backgrounds y contenedores) ─────────────────────────── */
    --color-surface:                  #f7f9ff;   /* Fondo general de la app */
    --color-surface-dim:              #d3dbe6;   /* Superficie atenuada */
    --color-surface-bright:           #f7f9ff;   /* Superficie brillante */
    --color-surface-container-lowest: #ffffff;   /* Contenedor más claro (blanco puro) */
    --color-surface-container-low:    #edf4ff;   /* Contenedor claro (azul muy pálido) */
    --color-surface-container:        #e7eefa;   /* Contenedor estándar */
    --color-surface-container-high:   #e1e9f4;   /* Contenedor alto */
    --color-surface-container-highest:#dbe3ef;   /* Contenedor más oscuro */

    /* ── ON-SURFACE (Textos sobre superficies) ───────────────────────────── */
    --color-on-surface:               #141c24;   /* Texto principal sobre superficie */
    --color-on-surface-variant:       #42474e;   /* Texto secundario / subtítulos */

    /* ── BORDES Y SEPARADORES ────────────────────────────────────────────── */
    --color-outline:                  #72787e;   /* Borde visible (inputs, separadores) */
    --color-outline-variant:          #c2c7ce;   /* Borde sutil (cards, líneas) */

    /* ── PRIMARIO — Azul marino corporativo ──────────────────────────────── */
    --color-primary:                  #00253b;   /* Azul marino oscuro (botones, textos clave) */
    --color-on-primary:               #ffffff;   /* Texto blanco sobre primario */
    --color-primary-container:        #003b5c;   /* Variante de primario para contenedores */
    --color-on-primary-container:     #7aa5cc;   /* Texto azul claro sobre primario-container */

    /* ── SECUNDARIO — Turquesa corporativo ───────────────────────────────── */
    --color-secondary:                #006970;   /* Turquesa (CTAs, íconos activos, bordes focus) */
    --color-on-secondary:             #ffffff;   /* Texto blanco sobre secundario */
    --color-secondary-container:      #7af1fc;   /* Turquesa claro (badges, fondos) */
    --color-on-secondary-container:   #006e75;   /* Texto turquesa oscuro sobre container */

    /* ── TERCIARIO — Dorado corporativo premium ──────────────────────────── */
    --color-tertiary:                 #ffba2c;   /* Dorado (acentos, estrellas, iconos especiales) */
    --color-on-tertiary:              #271900;   /* Texto oscuro sobre dorado */
    --color-tertiary-container:       #4b3300;   /* Fondo oscuro para badges dorados */
    --color-on-tertiary-container:    #ffba2c;   /* Dorado sobre container oscuro */

    /* ── ERROR — Rojo para validaciones y alertas ────────────────────────── */
    --color-error:                    #ba1a1a;   /* Rojo de error */
    --color-on-error:                 #ffffff;   /* Texto blanco sobre error */
    --color-error-container:          #ffdad6;   /* Fondo rosado para mensajes de error */
    --color-on-error-container:       #93000a;   /* Texto rojo oscuro sobre error-container */

    /* ── BACKGROUND ──────────────────────────────────────────────────────── */
    --color-background:               #f7f9ff;   /* Mismo que surface, fondo de página */
    --color-on-background:            #141c24;   /* Texto sobre background */
}


/* ==========================================================================
   [ID: variables-tipografia]
   TIPOGRAFÍA — Escala de fuentes Manrope
   Uso: var(--font-size-display-lg), var(--font-body-md), etc.
   ========================================================================== */
:root {

    --font-family-base: 'Manrope', sans-serif;  /* Fuente única del sistema */

    /* Tamaños de fuente con line-height y peso */
    --font-display-lg:    800 48px/56px 'Manrope', sans-serif;  /* Título hero gigante */
    --font-headline-xl:   700 32px/40px 'Manrope', sans-serif;  /* Encabezados de sección */
    --font-headline-md:   600 24px/32px 'Manrope', sans-serif;  /* Sub-encabezados */
    --font-body-lg:       400 18px/28px 'Manrope', sans-serif;  /* Párrafo grande */
    --font-body-md:       400 16px/24px 'Manrope', sans-serif;  /* Párrafo estándar */
    --font-body-sm:       400 14px/20px 'Manrope', sans-serif;  /* Párrafo pequeño */
    --font-label-md:      600 14px/20px 'Manrope', sans-serif;  /* Etiquetas y botones */
    --font-label-sm:      700 12px/16px 'Manrope', sans-serif;  /* Micro-etiquetas (badges) */
}


/* ==========================================================================
   [ID: variables-espaciado]
   ESPACIADO, BORDES Y SOMBRAS
   Uso: var(--spacing-md), var(--radius-xl), var(--shadow-card), etc.
   ========================================================================== */
:root {

    /* Espaciado (tokens de Tailwind custom del proyecto) */
    --spacing-xs:             4px;    /* Muy pequeño: gap entre icono y texto */
    --spacing-sm:             12px;   /* Pequeño: padding interno de badges */
    --spacing-md:             24px;   /* Mediano: padding de secciones internas */
    --spacing-lg:             40px;   /* Grande: padding de cards y secciones */
    --spacing-xl:             64px;   /* Extra: padding de secciones hero */
    --spacing-gutter:         24px;   /* Gap entre columnas del grid */
    --spacing-margin-mobile:  16px;   /* Margen lateral en móvil */
    --spacing-margin-desktop: 48px;   /* Margen lateral en desktop */

    /* Border Radius */
    --radius-sm:   8px;      /* Botones y badges pequeños */
    --radius-md:   12px;     /* Inputs y cards intermedias */
    --radius-lg:   16px;     /* Cards principales */
    --radius-xl:   24px;     /* Modales y paneles grandes */
    --radius-full: 9999px;   /* Círculos y pills */

    /* Sombras */
    --shadow-card:    0px 4px 20px rgba(0, 0, 0, 0.02);     /* Tarjeta en reposo */
    --shadow-card-hover: 0px 8px 30px rgba(0, 0, 0, 0.04); /* Tarjeta con hover */
    --shadow-btn:     0px 4px 12px rgba(0, 37, 59, 0.15);   /* Botón primario */
    --shadow-modal:   0px 20px 60px rgba(0, 0, 0, 0.12);    /* Modal / Drawer */
    --shadow-glow:    0 0 50px -10px rgba(0, 105, 112, 0.15); /* Glow turquesa */

    /* Transiciones estándar */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.35s ease;
    --transition-drawer: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   [ID: base]
   ESTILOS BASE — Body y reset global
   ========================================================================== */
body {
    font-family: var(--font-family-base);
    background-color: var(--color-background);  /* #f7f9ff */
    color: var(--color-on-surface);             /* #141c24 */
    scroll-behavior: smooth;
    overflow-x: hidden; /* Previene scroll horizontal accidental en móvil */
}


/* ==========================================================================
   [ID: glass-header]
   GLASS HEADER — Efecto cristal translúcido para navbars
   Uso: class="glass-header" en <nav>
   ========================================================================== */
.glass-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* ==========================================================================
   [ID: hero-bg]
   HERO BG IMAGE — Imagen de fondo de la sección principal (Landing)
   Uso: class="hero-bg-image" en <section>
   ========================================================================== */
.hero-bg-image {
    background-image: url('conecta_contigo.jpeg');
    background-size: cover;
    background-position: center;
}


/* ==========================================================================
   [ID: workflow-lines]
   WORKFLOW LINES — Líneas conectoras entre pasos de metodología (Landing)
   Uso: class="workflow-line" en cada tarjeta de paso
   ========================================================================== */
.workflow-line::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -24px;
    width: 24px;
    height: 2px;
    background: var(--color-outline-variant); /* #c2c7ce */
    z-index: 1;
}
/* En móvil las tarjetas se apilan: se oculta la línea horizontal */
@media (max-width: 768px) {
    .workflow-line::after { display: none; }
}


/* ==========================================================================
   [ID: glow]
   GLOW SOFT — Resplandor suave en color turquesa para cards y paneles
   Uso: class="glow-soft" en .card o <div>
   ========================================================================== */
.glow-soft {
    box-shadow: var(--shadow-glow); /* 0 0 50px -10px rgba(0,105,112,0.15) */
}


/* ==========================================================================
   [ID: scrollbar]
   SCROLLBAR UTILITIES — Control de apariencia del scrollbar
   ========================================================================== */

/* .scrollbar-none — Oculta visualmente el scrollbar (scroll táctil activo) */
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar { display: none; }

/* Hero principal — imagen local de alta resolución */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant) var(--color-surface);
    /* thumb: #c2c7ce  track: #f7f9ff */
}
.scrollbar-thin::-webkit-scrollbar { height: 4px; width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: var(--radius-full);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: var(--radius-full);
}


/* ==========================================================================
   [ID: mobile-menu]
   MENÚ MÓVIL — Overlay oscuro + Drawer lateral + Botón Hamburguesa
   Componentes: .mobile-overlay / .mobile-drawer / .drawer-link / .hamburger-btn
   ========================================================================== */

/* --- Overlay --- */
/* Fondo semitransparente que aparece detrás del drawer */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 37, 59, 0.45);   /* --color-primary al 45% */
    backdrop-filter: blur(4px);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}
.mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Drawer --- */
/* Panel lateral que desliza desde la derecha */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;                        /* Oculto fuera de pantalla */
    width: min(320px, 85vw);
    height: 100dvh;
    background: var(--color-surface-container-lowest); /* #ffffff */
    z-index: 45;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
    transition: right var(--transition-drawer);
    overflow-y: auto;
}
.mobile-drawer.open {
    right: 0;                            /* Visible en pantalla */
}

/* --- Links dentro del Drawer --- */
.drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);    /* 12px */
    font-size: 14px;
    font-weight: 600;
    color: var(--color-on-surface-variant); /* #42474e */
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-link:hover,
.drawer-link.active {
    background: var(--color-surface-container-low); /* #edf4ff */
    color: var(--color-secondary);                  /* #006970 */
}
.drawer-link.active {
    font-weight: 700;
}

/* --- Botón Hamburguesa (3 barras → X al abrir) --- */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    transition: background var(--transition-fast);
}
.hamburger-btn:hover {
    background: var(--color-surface-container-low); /* #edf4ff al hacer hover */
}
/* Las 3 barras del ícono */
.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-primary);   /* #00253b */
    border-radius: 2px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
/* Estado abierto: se convierte en X */
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   [ID: animaciones]
   ANIMACIONES — Keyframes y clases de entrada reutilizables
   ========================================================================== */

/* fadeInUp — Para cards, modales y elementos que entran desde abajo */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation: fadeInUp var(--transition-slow) ease forwards;
}

/* slideInRight — Para elementos que entran desde la derecha */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.slide-in-right {
    animation: slideInRight var(--transition-slow) ease forwards;
}

/* shake — Para errores de formulario (usado en acceso.html) */
@keyframes shake {
    0%,  100% { transform: translateX(0); }
    20%        { transform: translateX(-8px); }
    40%        { transform: translateX(8px); }
    60%        { transform: translateX(-5px); }
    80%        { transform: translateX(5px); }
}
.shake {
    animation: shake 0.4s ease forwards;
}


/* ==========================================================================
   [ID: tabla]
   TABLA RESPONSIVE — Contenedor con scroll horizontal y gradiente indicador
   Uso: class="table-scroll-container scrollbar-thin" en el <div> envolvente
   ========================================================================== */
.table-scroll-container {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Gradiente derecho que indica visualmente que hay más contenido al scrollear */
.table-scroll-container::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
    pointer-events: none;
    border-radius: 0 16px 16px 0;
}


/* ==========================================================================
   [ID: formulario]
   FORMULARIO — Estados de inputs y campos de cotización
   Uso: class="campo-input" en <input>, <select>, <textarea>
   ========================================================================== */

/* Hover sutil en campo no enfocado (turquesa al 50%) */
.campo-input:hover:not(:focus) {
    border-color: var(--color-secondary); /* #006970 */
    opacity: 0.6;
}


/* ==========================================================================
   [ID: cards]
   TARJETAS UNIFORMES — Card base con elevación al hover
   Uso: class="card-base" en cualquier <div> que sea una tarjeta
   ========================================================================== */
.card-base {
    background: var(--color-surface-container-lowest); /* #ffffff */
    border-radius: var(--radius-lg);                   /* 16px */
    border: 1px solid rgba(194, 199, 206, 0.5);        /* --color-outline-variant al 50% */
    box-shadow: var(--shadow-card);                    /* 0px 4px 20px rgba(0,0,0,0.02) */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.card-base:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);              /* 0px 8px 30px rgba(0,0,0,0.04) */
}

/* ==========================================================================
   BANNERS CORPORATIVOS
   ========================================================================== */
.banner-bg-1 {
    background-image: url('proximamente.jpeg'), url('proximamente.jpg'), url('proximamente_bg.png'), url('file:///C:/Users/simio/.gemini/antigravity-ide/brain/02cbdc6d-cb19-4252-a1fa-4929cd80f595/proximamente_bg_1780074112855.png');
    background-size: cover;
    background-position: center;
}
.banner-bg-2 {
    background-image: url('conexta_contigo.jpeg'), url('conecta_contigo.jpeg'), url('conecta_contigo.jpg'), url('conecta_bg.png'), url('file:///C:/Users/simio/.gemini/antigravity-ide/brain/02cbdc6d-cb19-4252-a1fa-4929cd80f595/conecta_bg_1780074141750.png');
    background-size: cover;
    background-position: center;
}