/* --- VARIABLES & RESET --- */
:root {
    /* Paleta de Marca */
    --beluga-purple: #28036a; 
    --beluga-orange: #f0440d;
    --beluga-lightblue: #5EA2FA;
    --beluga-gold: #ffd700;
    
    /* Tonos derivados para la UI */
    --bg-dark: #0f011a;       /* Fondo principal (casi negro, con tinte violeta) */
    --bg-card: #18032e;       /* Fondo de tarjetas (un poco más claro) */
    --text-main: #e0e0e0;     /* Blanco roto (menos agresivo a la vista) */
    --text-muted: #a0a0a0;
    
    /* Espaciado */
    --container-width: 1100px;

    /* SISTEMA TIPOGRÁFICO */
    /* Base para párrafos (1rem = 16px por defecto) */
    --font-base: 1rem;       /* 16px - Texto normal */
    --font-lg: 1.25rem;      /* 20px - Bajadas y textos destacados */
    
    /* Títulos */
    --font-h1: 3.5rem;       /* 56px - Título Hero */
    --font-h2: 2.5rem;       /* 40px - Títulos de Sección */
    --font-h3: 1.5rem;       /* 24px - Subtítulos */
    
    /* Móvil (Opcional, para ajustes futuros) */
    --font-h1-mobile: 2.5rem;
}
/* =========================================
   SCROLLBARS PERSONALIZADOS (Webkit - Chrome, Edge, Safari)
   ========================================= */

/* Ancho de la barra */
::-webkit-scrollbar {
    width: 10px; /* Vertical */
    height: 10px; /* Horizontal */
}

/* El carril (Fondo) */
::-webkit-scrollbar-track {
    background: #05000a;
    border-left: 1px solid rgba(255,255,255,0.05);
}

/* El pulgar (La parte que se mueve) */
::-webkit-scrollbar-thumb {
    background: #333; /* Gris discreto por defecto */
    border-radius: 5px; /* Redondeado */
    border: 2px solid #05000a; /* Borde del mismo color del fondo para dar efecto "flotante" */
}

/* Hover (Cuando interactúas) */
::-webkit-scrollbar-thumb:hover {
    background: var(--beluga-orange); /* ¡BOOM! Feedback visual */
}

html {
    scroll-behavior: smooth;
}

/* --- CUSTOM ALERT MODAL --- */
.beluga-alert-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    backdrop-filter: blur(5px); /* Efecto vidrio borroso */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Por encima de todo */
    animation: fadeIn 0.3s ease;
}

.beluga-alert-box {
    background: #1a022e; /* Violeta oscuro Beluga */
    border: 1px solid var(--beluga-orange);
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 30px rgba(240, 68, 13, 0.2);
    transform: scale(0.9);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.beluga-alert-title {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.beluga-alert-msg {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-alert {
    background: var(--beluga-orange);
    color: white;
    border: none;
    padding: 10px 30px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-alert:hover {
    background: white;
    color: var(--beluga-orange);
}

@keyframes popIn {
    to { transform: scale(1); }
}

section, 
.founder-section, 
footer {
    scroll-margin-top: 100px; /* Ajusta esto según la altura de tu navbar (aprox 80px + aire) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: var(--font-base);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
}

/* Títulos */
h1 { font-size: var(--font-h1); }
h2 { font-size: var(--font-h2); }
h3 { font-size: var(--font-h3); }

h1, h2, h3, .logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* --- COMPONENTES --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.cta-group {
    display: flex;             /* Activa Flexbox */
    justify-content: center;   /* Centra los botones horizontalmente */
    align-items: center;       /* Alinea verticalmente */
    gap: 20px;                 /* LA CLAVE: Espacio automático entre botones */
    margin-top: 30px;          /* Espacio respecto al texto de arriba */
}

/* --- BOTONES BASE (Limpios) --- */
.btn-primary, .btn-secondary {
    margin: 0 !important; /* Quitamos márgenes individuales, el gap se encarga */
    /* El resto de tus estilos de color/borde se mantienen igual... */
}

.btn-primary {
    display: inline-block;
    background-color: var(--beluga-orange);
    color: white;
    padding: 12px 30px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid var(--beluga-orange);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--beluga-orange);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    border: 1px solid white; /* Borde blanco base */
    color: white;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* CORRECCIÓN: Quitamos el margin-left fijo que lo descentraba */
    margin-left: 0; 
}

.btn-secondary:hover {
    background-color: white;
    color: #0f011a; /* Texto oscuro al pasar el mouse */
    border-color: white;
}

/* --- LÓGICA DE ESPACIADO INTELIGENTE --- */

/* CASO 1: HORIZONTAL (Index/Hero) 
   Si hay un botón secundario justo después de uno primario, le damos espacio lateral */
.btn-primary + .btn-secondary {
    margin-left: 20px; /* Más aire que antes (era 10px) */
}

/* CASO 2: VERTICAL / FULL WIDTH (Login/Formularios) */
.full-width {
    width: 100%;
    display: block; /* Se comporta como bloque */
    margin-left: 0 !important; /* Forzamos alineación izquierda/centro */
    margin-right: 0 !important;
}

/* Si un botón full-width está debajo de otro, le damos espacio arriba AUTOMÁTICAMENTE */
.full-width + .full-width {
    margin-top: 25px; /* Espacio vertical para que no se peguen */
    margin-left: 0;   /* Anulamos el margen lateral del Caso 1 */
}

/* --- NAVEGACIÓN --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: rgba(15, 1, 26, 0.95); /* Semi-transparente */
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-logo {
    height: 45px; /* Ajusta esto para que no deforme la barra */
    width: auto;
    display: block;
}

/* Sello BETA en el Logo */
/*.logo-link {
    position: relative;
}

.logo-link::after {
    content: "BETA";
    position: absolute;
    bottom: -5px;
    right: -50px;
    background: var(--beluga-orange);
    color: white;
    font-size: 0.5rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 1px;
    pointer-events: none;
}*/

.logo { font-size: 1.5rem; letter-spacing: 2px; }
.accent-text { color: var(--beluga-orange); }

.nav-links { display: flex; gap: 30px; align-items: center;}
.nav-links a:hover { color: var(--beluga-orange); }
.btn-nav { border: 1px solid var(--beluga-orange); padding: 5px 15px; border-radius: 4px; }

/* Estilo para el botón de Login en el menú */
/* Checkbox personalizado sutil */
.checkbox-label input[type="checkbox"] {
    accent-color: var(--beluga-orange); /* Pone el tick en naranja */
    transform: scale(1.1);
}

.checkbox-label a:hover {
    color: white !important;
}

.login-item {
    margin-left: 20px; /* Separarlo del resto de links */
    border-left: 1px solid rgba(255,255,255,0.1); /* Línea divisoria sutil */
    padding-left: 20px;
}

.btn-login {
    color: var(--beluga-gold); /* Dorado */
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 8px 15px;
    border-radius: 20px; /* Redondeado tipo "Pill" */
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-login:hover {
    background-color: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    color: var(--beluga-gold);
}

/* Icono simple (puedes usar un emoji o un SVG luego) */
.icon-user { font-size: 1rem; }

/* Estilos base del botón hamburguesa (Oculto en PC) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--beluga-orange); /* O blanco */
    border-radius: 5px;
    transition: 0.3s;
}

/* --- HERO SECTION --- */
/* --- HERO SECTION --- */
.hero {
    /* --- LO QUE YA TENÍAS (Estructura) --- */
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Fondo: Mantenemos tu degradado original, es perfecto para el efecto */
    background: radial-gradient(circle at center, var(--beluga-purple) 0%, var(--bg-dark) 70%);

    /* --- LO NUEVO (Necesario para el efecto submarino) --- */
    position: relative; /* Para que los rayos no se salgan */
    overflow: hidden;   /* Corta lo que sobre de la animación */
}

/* IMPORTANTE: Esto asegura que el texto quede ENCIMA de los rayos de luz */
.hero-content, .hero h1, .hero p {
    position: relative;
    z-index: 2;
}

/* --- ESTILOS DEL TEXTO (Tus estilos originales) --- */
.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    margin-bottom: 40px; 
    font-size: var(--font-lg);
    margin-left: auto;
    margin-right: auto;
    color: var(--text-main);
    line-height: 1.6;
}

.text-gradient {
    background: linear-gradient(to right, #fff, var(--beluga-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- EFECTOS VISUALES (AGREGAR ESTO AL FINAL DE LA SECCIÓN HERO) --- */

.ocean-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Deja hacer clic a través del efecto */
    z-index: 1; /* Queda detrás del texto */
}

/* 1. RAYOS DE LUZ (God Rays) */
.light-rays {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        70deg,
        transparent,
        transparent 40px,
        rgba(255, 255, 255, 0.05) 40px, 
        rgba(255, 255, 255, 0.05) 80px
    );
    filter: blur(25px);
    animation: ocean-shimmer 12s infinite ease-in-out;
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 90%);
}

@keyframes ocean-shimmer {
    0% {
        opacity: 0.5;
        transform: rotate(0deg) translateX(0) scale(1);
    }
    25% {
        opacity: 0.8; /* Pico de luz (la ola pasa) */
        transform: rotate(2deg) translateX(-20px) scale(1.05);
    }
    50% {
        opacity: 0.4; /* Se oscurece un poco */
        transform: rotate(-1deg) translateX(15px) scale(0.95);
    }
    75% {
        opacity: 0.7;
        transform: rotate(1deg) translateX(-10px) scale(1.02);
    }
    100% {
        opacity: 0.5;
        transform: rotate(0deg) translateX(0) scale(1);
    }
}

/*@keyframes sway {
    0% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-20px); }
    100% { transform: rotate(0deg) translateY(0); }
}*/

/* 2. PARTÍCULAS */
.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    bottom: -10px;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
}

.text-gradient {
    background: linear-gradient(to right, #fff, var(--beluga-orange));
    /*background: var(--beluga-orange);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- SECCIONES --- */
.philosophy {
    padding: 80px 0;
    text-align: center;
    background-color: var(--bg-dark);
}

.parallax-bg {
    background-image: url('imagenes/Render_1.png'); 
    
    /* Esto hace el efecto de "ventana" */
    background-attachment: fixed; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    position: relative;
    color: white;
    text-align: center;
    padding: 0; /* El padding lo maneja el overlay */
}

.overlay {
    background-color: rgba(15, 1, 26, 0.85); /* 85% de opacidad sobre la foto */
    padding: 100px 0;
    width: 100%;
    height: 100%;
}

.method-steps {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
    flex-wrap: wrap;
}

/* Momentaneamente deshabilitado para la pagina inicial */
/*.step-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 2px var(--beluga-orange); 
    opacity: 0.9;
    display: block;
    margin-bottom: 10px;
}*/

/* CTA ALERT PARA EL LAB */
.lab-alert-box {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(240, 68, 13, 0.1); /* Fondo naranja muy suave */
    border: 1px solid var(--beluga-orange);
    padding: 12px 25px;
    border-radius: 4px;
    margin-top: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    max-width: 500px;
}

.lab-alert-box:hover {
    background: var(--beluga-orange);
    box-shadow: 0 0 20px rgba(240, 68, 13, 0.4);
    transform: translateY(-2px);
}

/* Texto del CTA */
.lab-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-family: 'Roboto', sans-serif;
}

.lab-text strong {
    color: white;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.lab-text span {
    color: #ffd700; /* Dorado para llamar la atención */
    font-size: 0.8rem;
    margin-top: 2px;
}

.lab-alert-box:hover .lab-text span {
    color: #000; /* Texto oscuro al pasar el mouse */
}

/* Icono con pulso */
.lab-icon {
    position: relative; 
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Dimensiones fijas */
    width: 30px; 
    height: 30px;
    
    flex-shrink: 0; /* Esto prohíbe que el texto lo aplaste horizontalmente */
    min-width: 30px; /* Refuerzo de seguridad */
}

.lab-icon span:last-child {
    z-index: 1; /* El rayo va encima del anillo */
    position: relative;
}

.pulse-ring {
    position: absolute;
    top: 50%; 
    left: 50%;
    /* No ponemos transform aquí, lo maneja la animación completa */
    width: 100%; 
    height: 100%;
    border: 1px solid var(--beluga-orange);
    border-radius: 50%;
    z-index: 0; /* Detrás del rayo */
    
    /* Nueva animación corregida */
    animation: pulse-centered 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse-centered {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }
    75%, 100% {
        transform: translate(-50%, -50%) scale(2.2); /* Crece manteniendo el centro */
        opacity: 0;
    }
}

.step h4 {
    color: white;
    margin-bottom: 5px;
}
.step p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.services-preview {
    padding: 100px 0;
    background-color: #120220; /* Un tono apenas distinto para separar secciones */
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 2rem;
    color: var(--beluga-purple); /* Título oscuro pero legible o usar blanco */
    color: white;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive automático */
    gap: 30px;
}

/* Tarjetas de Servicio */
.card {
    background-color: var(--bg-card);
    padding: 40px;
    border: 1px solid rgba(40, 3, 106, 0.3);
    border-radius: 6px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea texto a la izquierda */
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
}

/* El precio empuja un poco hacia abajo */
.card .price {
    margin-top: 20px;
    margin-bottom: 25px; /* Espacio antes del botón */
}

/* El botón ocupa el ancho disponible o se ajusta */
.btn-card {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--beluga-orange);
}

.card h3 { color: var(--beluga-orange); margin-bottom: 10px; }
.subtitle { font-weight: bold; margin-bottom: 15px; color: white; }
.price { 
    display: block; 
    margin-top: 20px; 
    font-size: 1.2rem; 
    font-weight: bold; 
    color: var(--text-muted); 
}

/* --- SECCIÓN FUNDADOR REFINADA --- */
.founder-section {
    padding: 100px 0 0 0; /* Quitamos padding abajo para que la foto toque el borde si quieres */
    background-color: #08000a;
    border-top: 1px solid rgba(255,255,255,0.05);
    overflow: hidden; /* Evita scrollbars si la sombra se sale */
}

.founder-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 80px;
    align-items: center;
}

/* --- TRUCO DEL FADE (DESVANECIDO) --- */
.founder-photo-wrapper {
    position: relative;
    /* Esto crea un degradado de opacidad: visible arriba, transparente abajo */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.founder-img {
    width: 100%;
    display: block;
    /* Filtros para look B&N dramático */
    filter: grayscale(100%) contrast(1.1) drop-shadow(0px 0px 0px transparent); 
    transition: 0.5s ease;
}

/* Efecto Hover: Sutil color y sombra */
.founder-photo-wrapper:hover .founder-img {
    filter: grayscale(20%) contrast(1) drop-shadow(0 10px 20px rgba(240, 68, 13, 0.15));
    transform: scale(1.02); /* Pequeño zoom */
}

/* --- TIPOGRAFÍA --- */

/* Eyebrow (Etiqueta pequeña) */
.section-label {
    display: block;
    font-size: 0.75rem;
    color: var(--beluga-orange);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 20px;
}

.founder-quote {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem; /* Más grande e impactante */
    font-style: italic;
    color: white;
    margin-bottom: 30px;
    line-height: 1.2;
}

.founder-text p {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 650px;
    margin-bottom: 20px;
    line-height: 1.8; /* Más aire para leer mejor */
}

/* Estilo para la marca Beluga™ */
.brand-highlight {
    color: white;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

/* Firma */
.founder-sign {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1); /* Línea separadora fina */
    display: inline-block;
}

.name {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 2px !important;
}

.role {
    color: var(--beluga-orange);
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
}

/* Footer */
/*footer {
    background-color: #05000a; 
    padding: 60px 0 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.footer-link-highlight {
    display: block;
    color: #ffd700; 
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.footer-link-highlight:hover { text-decoration: underline; }

.footer-link {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 5px;
}
*/
/* --- FOOTER PROFESIONAL --- */
footer {
    background-color: #05000a; /* Negro casi puro */
    padding: 80px 0 30px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
    margin-top: auto; /* Empuja el footer al fondo si hay poco contenido */
}

.footer-grid {
    display: grid;
    /* Crea columnas automáticas, mínimo 250px de ancho cada una */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 60px;
}

/* Títulos de columnas */
.footer-col h4 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Columna 1: Marca */
.footer-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 15px;
}

.footer-desc {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 300px;
}

/* --- FOOTER DE 4 COLUMNAS --- */

/* Configuración de la Grilla */
.footer-grid.four-cols {
    display: grid;
    grid-template-columns: auto 2fr 1fr 1fr; 
    gap: 20px; /* Reduje el gap de 60px a 40px para compensar el logo más grande */
    align-items: start; 
}

/* Estilos Columna 1: Logo */
.logo-col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 5px; /* Empuja el logo un poquito hacia abajo para alinearse con la altura de la letra mayúscula "BELUGA" */
}

.footer-logo-img {
    width: 300px; /* Tamaño controlado del logo SVG */
    height: auto;
    display: block;
}

/* Estilos Columna 2: Texto de Marca */
.footer-brand-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 15px;
    letter-spacing: 1px;
    line-height: 1.2;
}


@media (max-width: 900px) {
    .footer-grid.four-cols {
        /* En pantallas medianas pasamos a 2 columnas */
        grid-template-columns: 1fr 1fr; 
        gap: 40px;
    }
    
    /* El logo y el texto quedan arriba */
    .logo-col { order: 1; justify-content: center; margin-bottom: 20px; }
    .brand-col { order: 2; text-align: center; }
    .links-col { order: 3; text-align: center; }
    .social-col { order: 4; text-align: center; }
    
    .footer-brand-text { margin-top: 0; }
}

@media (max-width: 600px) {
    .footer-grid.four-cols {
        /* En celular, todo en 1 sola columna vertical */
        grid-template-columns: 1fr; 
        gap: 40px;
    }
    
    .logo-col { margin-bottom: 0; }
}

.location-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Columna 2: Enlaces */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-muted);
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--beluga-orange);
    padding-left: 5px; /* Efecto de movimiento sutil */
}

/* Columna 3: Social & Partners */
.partner-link-footer {
    display: inline-block;
    color: var(--beluga-gold);
    font-weight: bold;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 8px 15px;
    border-radius: 4px;
    transition: 0.3s;
}

.partner-link-footer:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.dot-gold { font-size: 0.8rem; margin-right: 5px; }

.social-label { margin-bottom: 10px; color: var(--text-muted); font-size: 0.8rem; }

.social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-btn {
    font-size: 0.8rem;
    color: white;
    background: rgba(255,255,255,0.05);
    padding: 5px 12px;
    border-radius: 4px;
}

.social-btn:hover {
    background: var(--beluga-purple);
}


/* Barra Final (Copyright) */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: 0.8rem;
}

.legal-links a { color: #555; }
.legal-links a:hover { color: var(--text-muted); }
.separator { margin: 0 10px; }
/* --- ENLACE BROCHURE EN FOOTER --- */
.brochure-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px; /* Separación del texto de arriba */
    
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-muted); /* Gris base */
    text-transform: uppercase;
    letter-spacing: 1px;
    
    border: 1px solid rgba(255,255,255,0.1); /* Borde sutil */
    padding: 8px 15px;
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    transition: all 0.3s ease;
}

.brochure-link:hover {
    color: white;
    border-color: var(--beluga-orange); /* Se pone naranja */
    background: rgba(240, 68, 13, 0.1); /* Fondo naranja muy sutil */
    transform: translateY(-2px); /* Pequeña elevación */
}

.icon-down {
    font-size: 1.1rem;
    color: var(--beluga-orange); /* La flecha siempre naranja */
}

/* Responsive para Footer */
@media (max-width: 768px) {
    .detail-grid { grid-template-columns: 1fr; }
    
}


/* --- ESTILOS DE PÁGINA SERVICIOS --- */

/* Cabecera más pequeña para páginas internas */
.page-header {
    background-color: var(--bg-dark);
    padding: 120px 0 60px 0; /* Más padding arriba por la navbar fija */
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.page-header h1 {
    font-size: var(--font-h2);
    margin-bottom: 20px;
}

/* Filas de Servicio (Zig-Zag) */
.service-row {
    padding: 100px 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}

.alt-bg {
    background-color: #150225; /* Un violeta apenas más claro para diferenciar bloques */
}

/* Grid de 2 columnas */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Para invertir el orden en el Nivel B */
.reversed .service-img { order: 1; } /* En escritorio la imagen va primero */
.reversed .service-text { order: 2; }

/* Textos de Servicio */
.service-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--beluga-orange);
    border: 1px solid var(--beluga-orange);
    padding: 5px 10px;
    font-size: 0.8rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.premium-tag {
    background-color: var(--beluga-orange);
    color: white;
}

.service-desc {
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

/* Lista de características */
.feature-list {
    margin-bottom: 30px;
    border-left: 2px solid var(--beluga-purple);
    padding-left: 20px;
}

.feature-list li {
    margin-bottom: 10px;
    color: var(--text-main);
}

/* Precio */
.price-block {
    margin-bottom: 30px;
}

.price-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.price-value {
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
}

/* Pack de Cashback (Beneficio) */
.cashback-box {
    background: linear-gradient(45deg, var(--beluga-purple), #3a0ca3);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 30px;
}

.cashback-box h4 {
    color: var(--beluga-gold);
    margin-bottom: 5px;
}

.cashback-box p {
    font-size: 0.9rem;
    color: white;
}

/* Contenedor para dar sombra y forma */
.service-img-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden; /* Corta la imagen si se sale de las curvas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra elegante */
    border: 1px solid rgba(255,255,255,0.1);
}

/* La imagen en sí */
.service-img-real {
    width: 100%;
    height: 400px; /* Forzamos altura para uniformidad */
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformarla */
    display: block;
    transition: transform 0.5s ease;
}

/* Efecto Zoom sutil al pasar el mouse (Toque Premium) */
.service-img-wrapper:hover .service-img-real {
    transform: scale(1.05);
}
/* =========================================
   NUEVOS ESTILOS PARA FILTROS DE PRODUCTOS
   ========================================= */

/* --- CONTENEDOR DE FILTROS --- */
.filter-section {
    padding: 20px 0;
    position: relative;
    z-index: 10;
}

.filter-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Vital para móviles */
    margin-bottom: 30px;
}

/* --- BOTONES DE FILTRO (Estilo Píldora) --- */
.filter-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    padding: 8px 24px;
    border-radius: 50px; 
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: var(--beluga-orange);
    color: white;
    transform: translateY(-2px);
}

/* Estado Activo (Botón seleccionado) */
.filter-btn.active {
    background-color: var(--beluga-orange);
    border-color: var(--beluga-orange);
    color: white;
    box-shadow: 0 0 15px rgba(240, 68, 13, 0.4);
}

/* --- ANIMACIONES DE FILTRADO --- */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(20px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Clase utilitaria para ocultar elementos (usada por JS) */
.hidden {
    display: none !important;
}

/* Clase que dispara la animación (usada por JS) */
.animate-in {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* SEPARADOR DE FILTROS */
.filter-separator {
    color: rgba(255,255,255,0.2);
    margin: 0 10px;
    font-size: 1.2rem;
    align-self: center;
}

/* BOTONES DE MARCA (Línea Abismo, Marea...) */
.btn-brand {
    border-color: rgba(138, 100, 214, 0.5); /* Un violeta sutil */
    color: #e0e0e0;
}

.btn-brand:hover, .btn-brand.active {
    background-color: var(--beluga-purple);
    border-color: var(--beluga-purple);
    color: white;
    box-shadow: 0 0 15px rgba(40, 3, 106, 0.6); /* Glow violeta */
}

/* ENCABEZADO DINÁMICO (El que aparece y desaparece) */
.hidden-header {
    display: none; /* Oculto por defecto (en Ver Todo) */
}

.line-header {
    text-align: left; /* O center, como prefieras */
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 4px solid var(--beluga-orange);
    animation: fadeInHeader 0.5s ease-out;
}

@keyframes fadeInHeader {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Ajuste móvil para los filtros */
@media (max-width: 768px) {
    .filter-separator { display: none; } /* Ocultamos la barra en celular */
    .filter-container { gap: 8px; }
    .btn-brand { width: 100%; margin-top: 5px; } /* Destacamos las líneas en cel */
}

/* --- ESTILOS DE PRODUCTOS --- */

.product-line-section {
    padding: 80px 0;
}

/* Encabezados de Línea */
.line-header {
    margin-bottom: 50px;
    border-left: 4px solid var(--beluga-orange); /* Línea vertical decorativa */
    padding-left: 20px;
}

.line-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Colores específicos para cada línea */
.text-abismo { color: #8a64d6; /* Un violeta más claro */ }
.text-marea { color: #5EA2FA; /* Un celeste cian para evocar "marea/agua" */ }
.text-arrecife { color: #FF8559};

.line-desc {
    color: var(--text-muted);
    max-width: 600px;
}

.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    margin: 0;
}

/* GRILLA DE PRODUCTOS */
.product-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que bajen a la siguiente línea */
    justify-content: center; /* <--- LA CLAVE: Centra los elementos huérfanos */
    gap: 30px;
}

/* --- MINI GALERÍA EN TARJETA --- */

.thumb-gallery {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background-color: #120121; /* Un tono oscuro para separar */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.thumb {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent; /* Borde invisible base */
    transition: all 0.2s;
    opacity: 0.6; /* Un poco apagadas si no están seleccionadas */
}

.thumb:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Estado Activo (La foto que se está viendo) */
.thumb.active {
    opacity: 1;
    border-color: var(--beluga-orange); /* Borde naranja de ingeniería */
    box-shadow: 0 0 8px rgba(240, 68, 13, 0.3);
}


/* --- ESTILOS DE PÁGINA DETALLE (Galería) --- */

.detail-container { 
    padding: 120px 20px 80px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.detail-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
}

/* Galería Grande */
.main-gallery-img { 
    width: 100%; 
    /* height: 500px;  <-- ELIMINAMOS ESTA ALTURA FIJA */
    max-width: 600px; 
    aspect-ratio: 1 / 1; /* <--- ESTA ES LA CLAVE: Forza un cuadrado perfecto */
    object-fit: contain; 
    background: transparent; 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 8px;
    margin: 0 auto; 
    display: block;
}

/* Miniaturas */
.gallery-thumbs { 
    display: flex; 
    gap: 15px; 
    margin-top: 20px; 
    justify-content: center; 
}

.g-thumb { 
    width: 80px; 
    height: 80px; 
    object-fit: cover; 
    border-radius: 4px; 
    cursor: pointer; 
    opacity: 0.6; 
    transition: 0.3s; 
    border: 2px solid transparent;
}

.g-thumb:hover, .g-thumb.active { 
    opacity: 1; 
    border-color: var(--beluga-orange); 
}

/* Textos de Info */
.detail-title { font-size: 2.5rem; margin-bottom: 10px; color: white; }
.detail-specs { color: var(--beluga-orange); font-family: 'Montserrat', sans-serif; margin-bottom: 30px; font-weight: bold; letter-spacing: 1px;}
.detail-desc { color: #a0a0a0; line-height: 1.8; margin-bottom: 40px; font-size: 1.1rem; }

/* TARJETA DE PRODUCTO */
.product-card {
    /* ANTES: flex: 1 1 300px; */
    
    /* AHORA: El primer '0' significa "No crezcas más de la cuenta" */
    /* Aumentamos un poquito la base a 320px para que se vean robustas */
    flex: 0 1 320px; 
    
    /* El resto queda igual */
    max-width: 380px; 
    min-width: 280px;
    background-color: #1a022e; 
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    border-color: rgba(255,255,255,0.2);
}

/* Imagen del producto */
.product-img-box {
    position: relative;
    height: 280px; /* Cuadrado o casi cuadrado funciona bien */
    background-color: #252525; /* Fondo gris por si la imagen tarda en cargar */
    overflow: hidden;
}

.prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.product-card:hover .prod-img {
    transform: scale(1.05);
}

/* Badge (Etiqueta "Nuevo", "Oferta", etc) */
.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--beluga-orange);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Info del producto */
.product-info {
    padding: 25px; /* Aumenté un poco el padding general (antes 20px) */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Esto hace que ocupe todo el espacio disponible */
}

.product-info h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: white;
}

.specs {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

/* Fila de Precio y Botón */
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 15px;
}

.prod-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
}

.btn-shop {
    text-align: center;
    padding: 10px 0; /* Un poco más de altura para que sea fácil de cliquear */
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid var(--text-muted);
    color: var(--text-main);
    transition: 0.3s;
    background-color: rgba(255,255,255,0.02); /* Fondo muy sutil */
}

.btn-shop:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: white;
}
/* --- PRECIOS DOBLES --- */

/* El contenedor que agrupa precio y botones */
.product-actions {
    margin-top: auto; /* MÁGIA: Esto empuja todo este bloque hacia el fondo de la tarjeta */
    padding-top: 20px; /* Aire arriba de los precios */
    border-top: 1px solid rgba(255,255,255,0.05); /* Línea separadora sutil */
}

.dual-price {
    margin-bottom: 15px; /* Espacio entre el precio y los botones */
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center; /* Centrar precios visualmente */
}

/* El Botón de Canje (Dorado) */
.btn-redeem {
    border-color: var(--beluga-gold);
    color: var(--beluga-gold);
    background-color: transparent;
}

.btn-redeem:hover {
    background-color: var(--beluga-gold);
    color: #000;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide en dos columnas iguales */
    gap: 15px; /* Espacio entre el botón Comprar y Canjear */
}

.price-divider {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.blg-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--beluga-gold); /* EL MISMO DORADO QUE PARTNERS */
    cursor: help; /* Cambia el cursor para indicar que hay info */
    border-bottom: 1px dotted rgba(255, 215, 0, 0.5); /* Sutil subrayado */
}

/* Tooltip simple al pasar el mouse por BLG */
.blg-price:hover::after {
    content: "Conseguí BLG recomendando";
    position: absolute;
    background: #333;
    color: white;
    font-size: 0.7rem;
    padding: 5px;
    border-radius: 4px;
    margin-top: -30px; /* Que flote arriba */
    white-space: nowrap;
}

/* --- NUEVOS ESTILOS PARA GRUPOS DE PRODUCTOS --- */

.line-group {
    margin-bottom: 60px; /* Espacio entre una línea y otra */
    transition: all 0.5s ease;
}

/* El encabezado estático que va encima de cada grilla */
.line-header-static {
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 4px solid var(--beluga-orange);
}

.line-title {
    font-size: 2rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.line-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 600px;
}

/* Línea divisoria sutil entre grupos */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    margin-bottom: 50px;
}

/* Enlace pequeño "Ver especificaciones" */
.specs-link {
    display: block; 
    text-align: center; 
    margin-top: 15px; 
    font-size: 0.75rem; 
    color: #a0a0a0; 
    text-decoration: none; 
    opacity: 0.7;
    transition: 0.3s;
}
.specs-link:hover { opacity: 1; color: var(--beluga-orange); }


/* --- ESTILOS BELUGA PARTNERS --- */

.partners-promo {
    background: linear-gradient(135deg, #1a022e 0%, #000 100%);
    padding: 80px 0;
    margin: 50px 0;
    border-top: 1px solid rgba(255, 215, 0, 0.2); /* Borde dorado sutil */
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo de fondo */
.partners-promo::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.promo-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap; /* Para que baje en celular */
}

.promo-text { flex: 1; }

.text-gold {
    color: #ffd700; /* Oro */
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.promo-benefits {
    margin-top: 20px;
    list-style: none;
}

.promo-benefits li {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #e0e0e0;
}

/* Simulación de Tarjeta de Crédito (Visual minimalista) */
.credit-card-visual {
    width: 300px;
    height: 180px;
    background: linear-gradient(45deg, #333, #111);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    position: absolute;
    left: 0;
    bottom: 20px; /* Levantada un poco */
    z-index: 1; /* Detrás de las monedas */
    transform: rotate(-5deg); /* Un toque de rotación para dinamismo */
    width: 260px; /* Un poco más chica para que entre en la composición */
}

.card-chip {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 40px;
    height: 30px;
    background: linear-gradient(to bottom right, #d4af37, #f9df8a);
    border-radius: 5px;
}

.card-number {
    font-family: 'Montserrat', sans-serif;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    font-size: 0.8rem;
}

.promo-action {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Botón Dorado */
.btn-gold {
    background-color: transparent;
    color: var(--beluga-gold);
    border: 1px solid var(--beluga-gold);
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-gold:hover {
    background-color: var(--beluga-gold);
    color: black;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- COMPOSICIÓN TARJETA + MONEDAS --- */

/* 1. Definimos una altura real para el contenedor en todas las vistas */
.rewards-visual-group {
    position: relative;
    /* Esto reserva el espacio para que nadie se le suba encima */
    min-height: 200px; 
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* Las Monedas */
.coin-pile {
    position: absolute;
    right: -50px; 
    bottom: -10px; /* Ajuste fino para que pisen bien el suelo */
    width: 180px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

/* --- PÁGINA DE CONTACTO --- */

.contact-section {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* El formulario es más ancho */
    gap: 60px;
}

/* Columna Izquierda */
.contact-info h3 { margin-bottom: 20px; color: white; }
.info-intro { color: var(--text-muted); margin-bottom: 40px; }

.info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.icon-contact {
    font-size: 1.5rem;
    color: var(--beluga-orange);
    margin-top: 5px;
}

.info-item h4 { font-size: 1.1rem; margin-bottom: 5px; }
.info-item p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 5px; }
.tiny-text { font-size: 0.8rem; font-style: italic; opacity: 0.7; }

.link-gold {
    color: var(--beluga-lightblue);
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px dotted var(--beluga-lightblue);
}

/* Columna Derecha (Formulario) */
.contact-form-wrapper {
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.contact-form-wrapper h3 { margin-bottom: 30px; color: white; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Estilos de Inputs para que parezcan "Instrumentos" */
.engineering-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: bold;
    letter-spacing: 0.5px;
}

.engineering-form input, 
.engineering-form select, 
.engineering-form textarea {
    width: 100%;
    background-color: #0a0112; /* Más oscuro que la tarjeta */
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    padding: 12px 15px;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    transition: 0.3s;
}

.engineering-form input:focus, 
.engineering-form select:focus, 
.engineering-form textarea:focus {
    outline: none;
    border-color: var(--beluga-orange);
    box-shadow: 0 0 10px rgba(240, 68, 13, 0.2);
}

/* Select arrow fix (opcional para que se vea bien en todos lados) */
.engineering-form select {
    cursor: pointer;
}

.referral-hint {
    font-size: 0.75rem;
    color: var(--beluga-gold); /* Dorado */
    margin-top: 5px;
    display: block;
    font-style: italic;
}

.input-referral {
    border-color: rgba(255, 215, 0, 0.3) !important; /* Borde dorado sutil */
}

/* --- ESTILOS PÁGINA PARTNERS --- */

.partner-hero {
    background: radial-gradient(circle at center, #28036a 0%, #000 80%);
    padding: 150px 0 80px 0;
}

.subtitle-gold {
    color: #ffd700;
    font-size: 0.9rem;
    letter-spacing: 3px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

/* PASOS (Grid de 3) */
.steps-section {
    padding: 80px 0;
    background-color: #0f011a;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.step-card {
    background: rgba(255,255,255,0.02);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    transition: 0.3s;
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: var(--beluga-orange);
}

.step-icon {
    width: 60px;
    height: 60px;
    background-color: var(--beluga-orange);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 0 20px rgba(240, 68, 13, 0.3);
}

.step-card h3 { color: white; margin-bottom: 15px; font-size: 1.2rem; }
.step-card p { color: var(--text-muted); font-size: 0.9rem; }

/* SECCIÓN BENEFICIOS */
.benefits-section {
    padding: 100px 0;
    background-color: #05000a;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* FAQ */
.faq-section {
    padding: 80px 0;
    background-color: #0f011a;
}

.faq-item {
    background: rgba(255,255,255,0.02);
    padding: 20px;
    margin-bottom: 15px;
    border-left: 3px solid var(--beluga-orange);
    border-radius: 0 4px 4px 0;
}

.faq-item h4 {
    color: white;
    margin-bottom: 5px;
    font-size: 1rem;
}

.faq-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* --- ESTILOS LOGIN & DASHBOARD --- */
/* BOTÓN SALIR DEL LOGIN */
.btn-exit {
    position: absolute;
    top: 20px;
    right: 20px; /* Lo dejamos a la izquierda */
    
    
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
}

.btn-exit:hover {
    color: white;
    transform: translateX(-5px); /* Pequeño movimiento a la izquierda */
}

/* Login: Centrado perfecto en pantalla */
.login-body {
    min-height: 100vh; /* OCUPA AL MENOS LA PANTALLA, PERO PUEDE CRECER */
    height: auto;      /* Eliminamos height: 100vh fijo */
    display: flex;
    flex-direction: column; /* Ayuda a ordenar verticalmente */
    align-items: center;
    justify-content: center;
    
    
    padding: 80px 20px 40px 20px; 
    
    background: radial-gradient(circle at center, #1a022e 0%, #000 100%);
}

.login-box {
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    text-align: center;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    background: #0f011a;
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    border-radius: 4px;
}

.full-width { width: 100%; }

/* --- DASHBOARD WALLET --- */
.dashboard-container {
    max-width: 800px; /* Más angosto para parecer app */
    margin: 0 auto;
    padding: 40px 20px;
}

.dash-header { margin-bottom: 30px; }

/* La Tarjeta Dorada */
.wallet-card {
    position: relative; 
    overflow: hidden;
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    color: #000;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.wallet-logo-bg {
    position: absolute;
    right: 5px;
    top: -20px;
    opacity: 0.1;
    width: 100px;
}

.wallet-label { font-size: 0.8rem; font-weight: bold; letter-spacing: 1px; }

.wallet-balance {
    font-size: 4rem;
    font-weight: 700;
    margin: 10px 0;
    font-family: 'Montserrat', sans-serif;
}

.wallet-top, 
.wallet-balance, 
.wallet-bottom {
    position: relative;
    z-index: 2; /* Nivel 2: Arriba de la imagen */
}

/* ESTILO PARA EL RENDER DE MONEDAS */
.wallet-coin-render {
    position: absolute;
    right: 0px;   /* La movemos un poco a la derecha para que se corte artísticamente */
    bottom: -5px;  /* La bajamos para que parezca asentada en el fondo */
    width: 220px;   /* Ajusta este tamaño según tu render */
    height: auto;
    opacity: 0.9;   /* Sutil transparencia para que se fusione mejor */
    /*transform: rotate(-10deg); /* Un poquito de rotación para dinamismo */
    filter: drop-shadow(-10px 10px 20px rgba(0,0,0,0.3)); /* Sombra para dar profundidad 3D */
    z-index: 1;     /* Nivel 1: Al fondo */
    pointer-events: none; /* Para que no moleste si alguien quiere seleccionar texto */
}

.currency { font-size: 1.5rem; vertical-align: middle; }

/* Grid de Acciones */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.dash-card {
    background-color: var(--bg-card);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
}

.code-box {
    background: black;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px dashed var(--text-muted);
}

.btn-copy {
    background: none;
    border: none;
    color: var(--beluga-orange);
    cursor: pointer;
    font-weight: bold;
}

/* ESTILOS PARA EL CARRUSEL DE METAS */

/* Clase base para la transición de opacidad */
.fade-transition {
    opacity: 1; /* Visible por defecto */
    transition: opacity 0.3s ease-in-out; 
}

/* CAMBIO: Uso un nombre nuevo (.fade-out) para que no choque con la otra .hidden */
.fade-transition.fade-out {
    opacity: 0; /* Invisible (pero sigue ocupando espacio para que el fade ocurra) */
}

/* El enlace envoltorio (para que no se vea azul ni subrayado) */
.goal-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block; /* Para que ocupe todo el ancho */
    cursor: pointer;
}

/* Clase base para la transición de opacidad */
.fade-transition {
    opacity: 1; /* Visible por defecto */
    transition: opacity 0.3s ease-in-out; /* Duración del fade: 0.3 segundos */
}

/* Clase que usaremos con JS para ocultarlo momentáneamente */
.fade-transition.hidden {
    opacity: 0; /* Invisible */
}

/* Efecto Hover: para indicar que es clickeable */
.goal-link-wrapper:hover .goal-preview {
    background: rgba(255, 255, 255, 0.1); /* Se ilumina un poquito */
    transform: translateY(-2px); /* Se levanta sutilmente */
    transition: 0.3s;
}

/* Historial */
.history-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hist-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
}

.income { color: #4cd964; background: rgba(76, 217, 100, 0.1); }
.expense { color: #ff3b30; background: rgba(255, 59, 48, 0.1); }

.hist-info h4 { font-size: 0.9rem; margin-bottom: 2px; }
.hist-info .date { font-size: 0.7rem; color: var(--text-muted); }
.hist-amount { margin-left: auto; font-weight: bold; }

/* HERRAMIENTAS DE DIFUSIÓN */
.marketing-tools {
    margin-bottom: 40px;
}
.marketing-tools h3 {
    color: white; 
    margin-bottom: 20px;
    font-size: 1.1rem;
}
.tool-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    transition: 0.3s;
}
.tool-card:hover {
    border-color: var(--beluga-orange);
    transform: translateX(5px);
}
.tool-icon {
    font-size: 1.5rem;
    color: var(--beluga-orange);
    background: rgba(255,255,255,0.05);
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.tool-content { flex: 1; }
.tool-content h4 { color: white; font-size: 1rem; margin-bottom: 2px; }
.tool-content p { color: var(--text-muted); font-size: 0.8rem; margin: 0; }

.btn-secondary-small {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
.btn-secondary-small:hover {
    background: white; color: black;
}

/* INSIGNIA DE ESTATUS */
.status-badge {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.dot-status { margin-right: 5px; animation: pulse 2s infinite; }

@keyframes pulse {
    0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
}

/* BARRA DE PROGRESO META */
.goal-preview {
    background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}
.goal-img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.goal-info { flex: 1; }
.goal-info span { font-size: 0.8rem; color: white; display: block; margin-bottom: 5px; }
.progress-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--beluga-orange); }
.goal-text { font-size: 0.7rem; color: #aaa; margin-top: 3px; }

/* --- PÁGINA DE LEGALES --- */

.legal-container {
    max-width: 800px; /* Ancho de lectura cómodo, tipo libro */
    margin: 0 auto;
    padding: 80px 20px;
}

.legal-header {
    text-align: center;
    margin-bottom: 60px;
}

.legal-header h1 { margin-bottom: 10px; }
.legal-header p { color: var(--text-muted); font-size: 0.9rem; }

.legal-section { margin-bottom: 50px; }

.legal-section h2 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--beluga-orange);
    display: inline-block;
    padding-bottom: 5px;
}

.legal-section h3 {
    color: var(--text-main); /* Blanco roto */
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

.legal-section p, 
.legal-section li {
    color: var(--text-muted); /* Gris claro para no cansar la vista */
    font-family: 'Roboto', sans-serif;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify; /* Opcional: para que se vea como documento legal */
}

.legal-section ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.legal-divider {
    border: 0;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 60px 0;
}

/* LABORATORIO (DIAGNOSTICO) */
/* =========================================
   SECCIÓN BELUGA LAB (DIAGNÓSTICO)
   ========================================= */

/* Cabecera específica del Lab */
.lab-header {
    padding: 140px 0 60px;
    text-align: center;
    background: linear-gradient(180deg, #05000a 0%, #0f011a 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.lab-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    letter-spacing: -1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.lab-subtitle {
    color: #a0a0a0;
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.sys-status {
    font-size: 0.85rem;
    opacity: 0.6;
    font-family: 'Roboto Mono', monospace;
    display: block;
    margin-top: 5px;
}

/* Sección contenedora oscura */
.lab-section {
    padding: 60px 0 100px;
    background-color: #0f011a;
}

/* La Pack de la Consola */
.console-box {
    max-width: 900px;
    margin: 0 auto;
    background-color: #080808;
    border: 1px solid #333;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    border-radius: 4px; /* Sutil redondeo */
    overflow: hidden;
}

.console-header {
    background-color: #111;
    padding: 10px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    color: #555;
}

.console-body {
    padding: 40px;
}

.console-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Inputs de la consola */
.console-input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.console-label {
    color: var(--beluga-orange);
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
}

.console-input {
    width: 80px;
    background: transparent;
    border: none;
    color: white;
    text-align: right;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1rem;
}

.console-input:focus {
    outline: none;
    border-bottom: 1px solid var(--beluga-orange);
}

.console-select {
    width: 100%;
    background: #111;
    color: white;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 0;
    margin-bottom: 25px;
}

/* Botón de ejecución */
.btn-console {
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    width: 100%;
    padding: 15px;
    background: var(--beluga-orange);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(240, 68, 13, 0.2);
    transition: all 0.3s ease;
}

.btn-console:hover {
    background: white;
    color: var(--beluga-orange);
}

/* Mapa de Bolt */
.bolt-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border: 1px solid #333;
    background: #080808;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.bolt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.bolt-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, 50%); /* Centrado exacto */
    bottom: 0%; 
    left: 0%;
    box-shadow: 0 0 10px #fff, 0 0 20px var(--beluga-orange);
    display: none;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

/* Animación del Radar (Ping) */
.radar-ping {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 0.5;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* Resultados y Leyendas */
.result-display {
    margin-top: 15px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    text-align: right;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    color: #555;
}

.legend-box {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #888;
    line-height: 1.5;
}

/* Mensaje de Error (Sala Compleja) */
.warning-box {
    padding: 20px;
    border: 1px solid var(--beluga-orange);
    background: rgba(240, 68, 13, 0.05);
    margin-top: 20px;
    display: none; /* Oculto por defecto */
}

/* Calculador de longitud de onda */
/* --- ESTILOS VISUALIZADOR DE ONDA --- */

.wave-tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Slider Tech */
.tech-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    outline: none;
    margin: 15px 0;
}

.tech-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--beluga-orange);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(240, 68, 13, 0.5);
    border: 2px solid white;
}

.wave-result-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    margin-top: 30px;
    border-radius: 4px;
}

.wave-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 10px;
}
.wave-metric:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.metric-label { font-family:'Roboto Mono'; font-size:0.75rem; color:#777; }
.metric-value { font-family:'Roboto Mono'; font-size:1.2rem; color:white; font-weight:bold; }

.wave-insight {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #a0a0a0;
    line-height: 1.5;
    font-style: italic;
    border-left: 3px solid var(--beluga-orange);
    padding-left: 15px;
}

/* Contenedor del Canvas */
.wave-visualizer-container {
    position: relative;
    height: 400px;
    background: #0d0d0d;
    border: 1px solid #333;
    border-radius: 4px;
    overflow: hidden;
}

#waveCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.measure-ruler {
    position: absolute;
    right: 10px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 0; /* Margen para alinear con el suelo */
    color: #555;
    font-family: 'Roboto Mono';
    font-size: 0.7rem;
    pointer-events: none;
}

@media (max-width: 768px) {
    .wave-tool-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* BELUGA ACADEMY */
/* --- ESTILOS BELUGA ACADEMY --- */
.acustica-degrade {
    background: linear-gradient(to right, #fff, var(--beluga-lightblue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Botón Específico de Academia */
.btn-academy {
    background-color: var(--beluga-lightblue);
    color: #000; /* Texto negro para contraste con el celeste */
    border: 1px solid var(--beluga-lightblue);
    /* Hereda el resto de .btn-primary */
}

.btn-academy:hover {
    background-color: transparent;
    color: var(--beluga-lightblue); /* Al pasar el mouse, texto celeste y fondo transparente */
    box-shadow: 0 0 15px rgba(94, 162, 250, 0.4); /* Un brillo extra */
}

/* Tarjeta de Curso */
.course-card {
    background-color: #121212;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    position: relative; /* Para el badge */
    display: flex;
    flex-direction: column;
}

.course-card .price-row {
    flex-direction: column; /* Uno abajo del otro */
    align-items: flex-start; /* Alineados a la izquierda */
    gap: 15px; /* Espacio entre el precio y el botón */
}

.course-card .prod-price {
    font-size: 1.4rem; /* Un poco más grande */
    margin-left: 5px; /* Pequeño ajuste visual */
}

.course-card .btn-shop {
    width: 100%; /* Ocupa todo el ancho de la tarjeta */
    padding: 12px 20px; /* Más gordito y con aire a los costados */
    font-size: 0.85rem; /* Un pelín más chico para que entre en una línea si es muy largo */
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block; /* Asegura comportamiento de bloque */
    box-sizing: border-box; /* Para que el padding no rompa el ancho */
}

.course-card:hover {
    transform: translateY(-5px);
    border-color: var(--beluga-lightblue); /* Azul Beluga para educación */
    box-shadow: 0 10px 30px rgba(94, 162, 250, 0.15);
}

.course-img-box {
    height: 200px;
    background: #000;
    overflow: hidden;
}

/* Estilo de la imagen dentro de la tarjeta */
.course-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE: Recorta la imagen para llenar el cuadro sin deformarla */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(0.9); /* Un toque oscurecida para que el texto resalte si hubiera */
}

/* Efecto Zoom al pasar el mouse por la tarjeta */
.course-card:hover .course-img {
    transform: scale(1.1); /* Zoom suave */
    filter: brightness(1); /* Se ilumina al hacer hover */
}

.course-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.course-cat {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}

.course-card h3 {
    font-size: 1.3rem;
    color: white;
    margin-bottom: 10px;
    line-height: 1.3;
}

.course-card p {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 20px;
}

/* Badges de Estado */
.course-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 4px;
    z-index: 2;
    text-transform: uppercase;
}

.course-badge.online { background: rgba(94, 162, 250, 0.2); color: var(--beluga-lightblue); border: 1px solid var(--beluga-lightblue); }
.course-badge.presencial { background: rgba(240, 68, 13, 0.2); color: var(--beluga-orange); border: 1px solid var(--beluga-orange); }
.course-badge.free { background: rgba(76, 217, 100, 0.2); color: #4cd964; border: 1px solid #4cd964; }

/* Meta datos (Duración, Fecha) */
.course-meta {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: #ddd;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Roboto Mono', monospace;
}

/* --- ESTILO ESPECIAL PARA BOTÓN WEBINAR --- */
.btn-webinar {
    /* Verde más sobrio y elegante (Emerald) */
    background-color: #2ea043 !important; 
    border: 1px solid #2ea043 !important;
    color: white !important; /* Texto blanco para mejor contraste */
    font-weight: 800 !important;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
    border-radius: 5px;
}

.btn-webinar:hover {
    background-color: transparent !important;
    color: #4cd964 !important; /* Al pasar el mouse, texto verde brillante */
    border-color: #4cd964 !important;
    box-shadow: 0 0 20px rgba(76, 217, 100, 0.3); /* Resplandor */
}

/* --- BOTONES ESPECÍFICOS PARA ACADEMIA --- */

/* 1. Botón Bootcamp (Arquitectos - Celeste) */
.btn-bootcamp {
    background-color: var(--beluga-lightblue) !important;
    border: 1px solid var(--beluga-lightblue) !important;
    color: #000 !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important; /* Más aire entre letras */
    transition: all 0.3s ease !important;
    border-radius: 5px;
    
    /* CAMBIOS DE TAMAÑO: */
    padding: 18px 20px !important; /* Más alto (antes era 12px) */
    font-size: 1.1rem !important;  /* Texto más grande */
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(94, 162, 250, 0.2); /* Sombra suave permanente */
}

.btn-bootcamp:hover {
    background-color: transparent !important;
    color: var(--beluga-lightblue) !important;
    box-shadow: 0 0 20px rgba(94, 162, 250, 0.6);
    transform: translateY(-2px); /* Se levanta un poco */
}

/* 2. Botón Obra (Construcción - Naranja) */
.btn-obra {
    background-color: var(--beluga-orange) !important;
    border: 1px solid var(--beluga-orange) !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    transition: all 0.3s ease !important;
    border-radius: 5px;

    /* CAMBIOS DE TAMAÑO: */
    padding: 18px 20px !important; /* Más alto */
    font-size: 1.1rem !important;  /* Texto más grande */
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(240, 68, 13, 0.2);
}

.btn-obra:hover {
    background-color: transparent !important;
    color: var(--beluga-orange) !important;
    box-shadow: 0 0 20px rgba(240, 68, 13, 0.6);
    transform: translateY(-2px);
}

/* 3. Botón Webinar (Verde) - Por si acaso */
.btn-webinar {
    background-color: #2ea043 !important; 
    border: 1px solid #2ea043 !important;
    color: white !important; 
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    transition: all 0.3s ease !important;
    border-radius: 5px;

    /* CAMBIOS DE TAMAÑO: */
    padding: 18px 20px !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(46, 160, 67, 0.2);
}


/* --- UI GLOBAL: BOTÓN VOLVER ARRIBA --- */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--beluga-orange);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 1000;
    
    /* Estado inicial: Oculto y abajo */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none; /* Para que no moleste cuando es invisible */
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.back-to-top:hover {
    background-color: white;
    color: var(--beluga-orange);
    transform: translateY(-5px);
}

/* --- UI GLOBAL: TOAST PARTNERS (Flotante) --- */
.partner-toast {
    position: fixed;
    bottom: 30px;
    left: 30px; /* A la izquierda para no chocar con el botón de subir */
    width: 320px;
    background: linear-gradient(135deg, #1a022e 0%, #000 100%);
    border: 1px solid var(--beluga-gold); /* Borde dorado */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    z-index: 1000;
    font-family: 'Roboto', sans-serif;
    
    /* Animación de entrada */
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Rebote suave */
    pointer-events: none;
}

.partner-toast.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.toast-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 1.2rem;
}
.toast-close:hover { color: white; }

.toast-title {
    color: var(--beluga-gold);
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.toast-desc {
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 15px;
}

.toast-btn {
    display: block;
    text-align: center;
    background: rgba(255, 215, 0, 0.1);
    color: var(--beluga-gold);
    border: 1px solid var(--beluga-gold);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.toast-btn:hover {
    background: var(--beluga-gold);
    color: black;
}

/* Ajuste Móvil: El Toast ocupa el ancho abajo */
@media (max-width: 768px) {
    .partner-toast {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: 10px;
    }
    /* En móvil, el botón de subir puede tapar contenido, lo hacemos más chico */
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        bottom: 20px;
        right: 20px;
    }
}

/* AJUSTE RESPONSIVO */
@media (max-width: 600px) {
    .dash-grid { grid-template-columns: 1fr; }
    .wallet-balance { font-size: 3rem; }
    .wallet-coin-render {
        width: 160px; /* Más chica en celular */
        right: 0px;
        bottom: 50px;
        opacity: 0.6; /* Más transparente para que no compita con el texto en pantalla chica */
    }
    .wallet-logo-bg {
        width: 50px;
    }

    /* Boton de regresar a catalogo de "detalle.html" */
    /* 1. Ajustamos el botón para que entre al lado del logo */
    
    /* 2. OPCIONAL: Si aún así queda grande, ocultamos la parte de "al Catálogo" 
       y dejamos solo "← Volver" usando un truco de CSS es más complejo, 
       mejor simplemente achicamos la fuente como hice arriba. */
       
    /* 3. Aseguramos que la navbar no desborde */
    .navbar {
        flex-wrap: nowrap; /* Que no se caiga el botón abajo */
        overflow: hidden;  /* Corta cualquier exceso */
        gap: 10px;         /* Controla el espacio entre elementos */
    }
    
    .nav-logo {
        height: 30px; /* Achicamos un pelín el logo en móvil para dar espacio */
    }
    
}

@media (max-width: 768px) {
    :root {
        --font-h1: 2.2rem; /* Reduzco el h1 en celulares */
        --font-h2: 1.8rem;
    }

    /* Mostrar el botón hamburguesa */
    .menu-toggle {
        display: flex; 
    }

    /* Transformar la lista de links en un panel desplegable */
    .nav-links {
        position: fixed; /* Fijo sobre la pantalla */
        top: 80px; /* Debajo de la navbar */
        right: -100%; /* Oculto a la derecha */
        width: 100%;
        height: calc(100vh - 80px); /* Altura completa menos la navbar */
        background-color: rgba(15, 1, 26, 0.98); /* Fondo casi negro sólido */
        backdrop-filter: blur(10px); /* Efecto vidrio (iOS style) */
        flex-direction: column; /* Links uno abajo del otro */
        align-items: center;
        justify-content: flex-start;
        padding-top: 60px;
        transition: 0.4s ease-in-out; /* Animación suave */
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    /* Clase activa para cuando se abre */
    .nav-links.active {
        right: 0; /* Entra en pantalla */
    }

    /* Ajustes visuales de los links en móvil */
    .nav-links li {
        margin: 15px 0; /* Un poco menos de espacio vertical para que no sea eterno */
        width: 100%;    /* Asegura centrado */
        text-align: center;
        opacity: 0;     /* Para la animación de entrada */
    }

    /* Animación de entrada de los links */
    .nav-links.active li {
        opacity: 1;
        transition: 0.5s ease 0.2s;
    }

    .nav-links a {
        font-size: 1.1rem; /* MÁS CHICO Y ELEGANTE (Antes 1.5rem) */
        font-family: 'Montserrat', sans-serif;
        letter-spacing: 3px; /* Esto le da el toque "Tech" sofisticado */
        font-weight: 400;
        display: block;      /* Ocupa todo el ancho para facilitar el clic con el dedo */
    }

    .btn-nav {
        border: none !important;    /* Sin borde */
        padding: 0 !important;      /* Sin relleno extra */
        color: var(--beluga-orange) !important; /* Color Naranja Beluga */
        font-weight: 700 !important; /* Más grueso para destacar */
    }

    .cta-group {
        flex-direction: column; /* Pone uno abajo del otro */
        gap: 15px;              /* Un poco menos de espacio en celular */
    }

    /* Esto asegura que NO se estiren al 100% */
    .hero .btn-primary, 
    .hero .btn-secondary {
        width: auto !important;    /* Respetan su tamaño natural */
        min-width: 200px;          /* Opcional: Para que tengan un ancho mínimo uniforme */
        display: inline-block;
    }
    
    /* Botones de la academia */
    .course-card .price-row {
        align-items: center; 
    }

    .login-item {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid rgba(255,255,255,0.1); /* Línea separadora sutil */
        width: 80%; /* Que la línea no toque los bordes */
    }
    .btn-login {
        font-size: 1.2rem;
        padding: 10px 30px;
    }

    .btn-exit {
        top: 20px;
        left: 20px;
    }

    /* Efecto de la hamburguesa transformándose en X */
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    
    .hero p {
        font-size: 1rem; /* Texto normal en celular */
        padding: 0 15px; /* Un poco de margen lateral para que no toque bordes */
    }

    /* Fuerzo un tamaño controlado en celular */
    /* El !important es necesario para vencer al estilo inline que se puso en productos.html */
    .rewards-visual-group {
        transform: scale(0.9) !important; 
        margin: 40px auto !important; /* Aire arriba y abajo para que no toque el texto */
        left: auto !important;
        display: block; /* Asegura que se comporte como bloque */
    }

    /* Centro la tarjeta perfectamente en el medio del contenedor */
    .credit-card-visual {
        left: 50%;
        transform: translateX(-50%) rotate(-5deg); /* Centrado matemático */
        bottom: 15px; /* Un poco más arriba del borde inferior */
    }

    /* Controlo las monedas para que no se salgan de la pantalla */
    .coin-pile {
        right: -20px !important; /* Fuerzo posición segura */
        width: 150px; /* Tamaño controlado */
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-col {
        text-align: center; /* En celular centramos todo */
    }
    
    .footer-desc { margin: 0 auto 20px auto; }
    
    .social-icons { justify-content: center; }

    /* Configuracion detalle.html"
    /* 1. Reducimos el aire superior */
    /* En PC es 120px, en celular con 90px o 100px alcanza para librar la navbar */
    .detail-container {
        padding-top: 100px; 
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 40px;
    }

    /* 2. FORZAMOS LA COLUMNA ÚNICA (Foto arriba, Texto abajo) */
    .detail-grid {
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 30px; /* Menos espacio entre la foto y el título */
        display: flex; /* Flexbox nos deja controlar el orden mejor si hiciera falta */
        flex-direction: column;
    }

    /* 3. Ajuste de la Imagen Principal */
    .main-gallery-img {
        max-width: 100%; /* Que ocupe todo el ancho disponible */
        /* height: auto; <--- Opcional si sientes que el cuadrado ocupa mucha pantalla */
    }

    /* 4. Títulos y Textos más amigables */
    .detail-title {
        font-size: 2rem; /* Achicamos el título (antes era 2.5rem o más) */
        text-align: center; /* Centrado queda más elegante en ficha de producto */
        line-height: 1.2;
    }

    .detail-specs {
        text-align: center;
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    /* 5. Precios y Botones Centrados */
    .info-section .dual-price {
        justify-content: center !important; /* Forzamos el centrado de precios */
    }

    .info-section .action-buttons {
        margin: 0 auto; /* Centramos los botones */
        width: 100%; /* Que ocupen el ancho cómodo */
    }

    /* 6. Descripción legible */
    .detail-desc {
        font-size: 1rem; /* Tamaño estándar de lectura */
        text-align: left; /* La descripción larga se lee mejor alineada a la izquierda */
        padding: 0 5px; /* Un mini respiro */
    }

    .console-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .lab-title {
        font-size: 2.5rem;
    }

    .login-body {
        /* En celular, alineamos al inicio si es muy alto, o al centro si cabe */
        justify-content: center; 
        padding-top: 90px; /* Más aire arriba para asegurar que el botón no toque el logo */
    }

    .btn-exit {
        top: 25px;
        left: 20px;
        background: rgba(0,0,0,0.5); /* Fondo semitransparente por si acaso toca algo */
        padding: 5px 10px;
        border-radius: 20px;
        backdrop-filter: blur(4px); /* Efecto vidrio para legibilidad */
    }
    
    .login-logo img {
        max-width: 120px; /* Achicamos un poco el logo en celular */
    }
}

@media (max-width: 900px) {
    .founder-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .founder-photo-wrapper {
        max-width: 280px;
        margin: 0 auto;
        /* En celular, quizás quieras menos fade o ajustarlo */
        -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    }

    .founder-sign {
        border-top: none; /* En celular queda mejor sin la línea si está centrado */
        margin-top: 20px;
    }

    .grid-2 {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 40px;
    }
    
    /* En celular, quiero que el texto vaya primero siempre, luego la foto */
    .reversed .service-img { order: 2; }
    .reversed .service-text { order: 1; }
    
    .service-row { padding: 60px 0; }

    .login-item {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        margin-top: 10px; /* Que baje un poco */
    }
    .btn-login {
        justify-content: center; /* Centrado en celular */
        width: 100%;
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Una columna en celular */
        gap: 50px;
    }
    
    .form-row {
        grid-template-columns: 1fr; /* Inputs uno debajo del otro */
    }
}