/* --- Variables de Color y Fuentes --- */
:root {
    --color-background: #0d0d1a; /* Azul noche muy oscuro */
    --color-primary-glow: #00f0ff; /* Cian neón */
    --color-secondary-glow: #ff33a8; /* Rosa neón */
    --color-tertiary-glow: #7dff33; /* Verde neón */
    --color-text: #e0e0e0; /* Texto principal claro */
    --color-text-muted: #a0a0c0; /* Texto secundario */
    --color-border: rgba(0, 240, 255, 0.3); /* Borde cian semitransparente */
    --color-input-bg: rgba(26, 26, 46, 0.8); /* Fondo input oscuro translúcido */
    --color-fieldset-bg: rgba(20, 20, 40, 0.6); /* Fondo fieldset más oscuro */

    --font-primary: 'Orbitron', sans-serif; /* Fuente galáctica/tecnológica */
    --font-secondary: 'Poppins', sans-serif; /* Fuente legible para cuerpo */

    --glow-effect-primary: 0 0 5px var(--color-primary-glow), 0 0 10px var(--color-primary-glow), 0 0 15px var(--color-primary-glow);
    --glow-effect-secondary: 0 0 5px var(--color-secondary-glow), 0 0 10px var(--color-secondary-glow), 0 0 15px var(--color-secondary-glow);
    --glow-effect-tertiary: 0 0 5px var(--color-tertiary-glow), 0 0 10px var(--color-tertiary-glow), 0 0 15px var(--color-tertiary-glow);
}

/* --- Reset Básico y Estilos Globales --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-secondary);
    line-height: 1.6;
    overflow-x: hidden; /* Evitar scroll horizontal */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%231a1a3a" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0h1v5h9V0h1v5h9V0h1v5h9V0h1v5h9V0h1v5h9V0h1v5h9V0h1v5h9V0h1v5h9V0h1v5h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H6v-1h9V6H6v-1h9V6H6v-1h9V6H6v-1h9V6H6v-1h9V6H6v-1h9V6H6v-1h9V6H6v-1h9V6H6v-1zm10 1h9v9h-9V6zm10 0h9v9h-9V6zm10 0h9v9h-9V6zm10 0h9v9h-9V6zm10 0h9v9h-9V6zm10 0h9v9h-9V6zm10 0h9v9h-9V6zm10 0h9v9h-9V6zm10-1v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10-1h9v9h-9V5zm10 0h9v9h-9V5zm10 0h9v9h-9V5zm10 0h9v9h-9V5zm10 0h9v9h-9V5zm10 0h9v9h-9V5zm10 0h9v9h-9V5zm10 0h9v9h-9V5zm10-1v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10-1h9v9h-9V4zm10 0h9v9h-9V4zm10 0h9v9h-9V4zm10 0h9v9h-9V4zm10 0h9v9h-9V4zm10 0h9v9h-9V4zm10 0h9v9h-9V4zm10 0h9v9h-9V4zm10-1v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10-1h9v9h-9V3zm10 0h9v9h-9V3zm10 0h9v9h-9V3zm10 0h9v9h-9V3zm10 0h9v9h-9V3zm10 0h9v9h-9V3zm10 0h9v9h-9V3zm10 0h9v9h-9V3zm10-1v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10-1h9v9h-9V2zm10 0h9v9h-9V2zm10 0h9v9h-9V2zm10 0h9v9h-9V2zm10 0h9v9h-9V2zm10 0h9v9h-9V2zm10 0h9v9h-9V2zm10 0h9v9h-9V2zm10-1v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10-1h9v9h-9V1zm10 0h9v9h-9V1zm10 0h9v9h-9V1zm10 0h9v9h-9V1zm10 0h9v9h-9V1zm10 0h9v9h-9V1zm10 0h9v9h-9V1zm10 0h9v9h-9V1z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    /* Subtle background pattern */
}

/* --- Navegación --- */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: rgba(13, 13, 26, 0.8); /* Fondo nav oscuro translúcido */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-logo .logo-text {
    font-family: var(--font-primary);
    font-size: 1.8em;
    font-weight: bold;
    color: var(--color-primary-glow);
    text-shadow: var(--glow-effect-primary);
}

.nav-links {
    display: flex;
    gap: 15px;
}

.nav-button {
    font-family: var(--font-secondary);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-muted);
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 25px;
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.5), rgba(46, 46, 84, 0.5));
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.nav-button:hover, .nav-button.active {
    color: var(--color-tertiary-glow);
    border-color: var(--color-tertiary-glow);
    background: linear-gradient(145deg, rgba(125, 255, 51, 0.1), rgba(125, 255, 51, 0.2));
    text-shadow: 0 0 5px var(--color-tertiary-glow), 0 0 10px var(--color-tertiary-glow);
    box-shadow: 0 0 10px var(--color-tertiary-glow), inset 0 0 5px rgba(125, 255, 51, 0.3);
    transform: translateY(-2px) scale(1.03);
}

/* --- Hero Section --- */
.hero-section {
    text-align: center;
    padding: 80px 20px;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* For potential video background */
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.hero-section h1 {
    font-family: var(--font-primary);
    font-size: 3.5em;
    margin-bottom: 20px;
    color: #fff;
    text-shadow: 0 0 10px var(--color-primary-glow), 0 0 20px var(--color-primary-glow), 0 0 5px #fff;
    animation: pulse 2s infinite alternate;
}

.hero-section p {
    font-size: 1.2em;
    max-width: 700px;
    margin-bottom: 30px;
    color: var(--color-text-muted);
}

.cta-button {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 1.1em;
    text-decoration: none;
    color: var(--color-background);
    background: linear-gradient(145deg, var(--color-primary-glow), #00b8d4);
    padding: 15px 35px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--glow-effect-primary), 0 5px 15px rgba(0, 240, 255, 0.4);
}

.cta-button:hover {
    transform: scale(1.05) translateY(-3px);
    box-shadow: var(--glow-effect-primary), 0 0 25px var(--color-primary-glow), 0 8px 20px rgba(0, 240, 255, 0.6);
}

@keyframes pulse {
    from { text-shadow: 0 0 8px var(--color-primary-glow), 0 0 15px var(--color-primary-glow), 0 0 3px #fff;}
    to { text-shadow: 0 0 12px var(--color-primary-glow), 0 0 25px var(--color-primary-glow), 0 0 6px #fff;}
}


/* --- Form Section --- */
.form-section {
    padding: 60px 5%;
    max-width: 1200px;
    margin: 40px auto;
    background-color: rgba(13, 13, 26, 0.5);
    border-radius: 15px;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.form-section h2 {
    font-family: var(--font-primary);
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 15px;
    color: var(--color-secondary-glow);
    text-shadow: var(--glow-effect-secondary);
}

.form-section .section-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    font-size: 1.1em;
}

/* --- Fieldset y Leyendas --- */
.category-fieldset {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
    background-color: var(--color-fieldset-bg);
    box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.1);
}

.category-legend {
    font-family: var(--font-primary);
    font-size: 1.6em;
    font-weight: bold;
    color: var(--color-primary-glow);
    text-shadow: var(--glow-effect-primary);
    padding: 0 15px;
    margin-left: 20px; /* Ajustar posición */
    background-color: var(--color-background); /* Para cortar el borde del fieldset */
}

.category-description {
    color: var(--color-text-muted);
    margin-bottom: 30px;
    margin-left: 5px;
    font-size: 0.95em;
}

/* --- Bloque de Conocimiento --- */
.knowledge-block {
    background-color: rgba(26, 26, 46, 0.4);
    border: 1px dashed rgba(255, 51, 168, 0.3); /* Borde rosa dashed */
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.knowledge-block:hover {
     border-color: rgba(255, 51, 168, 0.6);
     box-shadow: 0 0 15px rgba(255, 51, 168, 0.2);
}


/* --- Estructura Corregida: 3 columnas arriba, 1 abajo --- */
.block-top-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
    gap: 25px;
    margin-bottom: 25px;
}

.block-bottom-row {
    margin-top: 15px; /* Espacio entre filas */
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Etiquetas Brillantes --- */
.glow-label {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--color-primary-glow);
    text-shadow: 0 0 5px var(--color-primary-glow);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre icono y texto */
}
.glow-label i {
     opacity: 0.8;
}

/* --- Inputs y Textareas --- */
textarea,
input[type="text"],
input[type="url"],
input[type="email"], /* Añadir si usas email en otro sitio */
input[type="tel"],  /* Añadir si usas tel en otro sitio */
select {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-secondary);
    font-size: 0.95em;
    transition: all 0.3s ease;
    outline: none;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus {
    border-color: var(--color-secondary-glow);
    box-shadow: 0 0 10px rgba(255, 51, 168, 0.3), inset 0 0 5px rgba(255, 51, 168, 0.1);
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300f0ff' d='M6 8L0 2l1.4-1.4L6 5.2l4.6-4.6L12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px; /* Espacio para la flecha */
}

/* --- Botones Pequeños (Añadir más, etc.) --- */
.add-more-questions-btn,
.add-media-btn {
    font-size: 0.85em;
    padding: 6px 12px;
    background-color: transparent;
    color: var(--color-tertiary-glow);
    border: 1px solid var(--color-tertiary-glow);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start; /* Alinea el botón a la izquierda */
    margin-top: 5px;
}
.add-more-questions-btn:hover,
.add-media-btn:hover {
    background-color: rgba(125, 255, 51, 0.2);
    box-shadow: var(--glow-effect-tertiary);
}
.add-more-questions-btn {
    color: var(--color-text-muted); /* Color diferente para este botón */
    border-color: var(--color-text-muted);
    cursor: not-allowed; /* Indicar que es futuro */
    opacity: 0.6;
}

/* --- Columna Medios Específica --- */
.media-input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.media-input-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.media-url-input {
    margin-top: 5px; /* Espacio cuando aparece */
}

/* --- Botón de Envío --- */
.submit-container {
    text-align: center;
    margin-top: 50px;
}

.submit-button, .whatsapp-button {
    font-family: var(--font-primary);
    font-size: 1.2em;
    font-weight: bold;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.submit-button {
    background: linear-gradient(145deg, var(--color-secondary-glow), #b3006b);
    color: #fff;
    text-shadow: 0 0 5px #000;
    box-shadow: var(--glow-effect-secondary), 0 5px 20px rgba(255, 51, 168, 0.5);
}

.submit-button:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: var(--glow-effect-secondary), 0 0 30px var(--color-secondary-glow), 0 8px 25px rgba(255, 51, 168, 0.7);
}

/* --- Mensaje de Confirmación --- */
.confirmation-container {
    text-align: center;
    padding: 50px 20px;
    border: 1px solid var(--color-tertiary-glow);
    border-radius: 10px;
    background-color: rgba(125, 255, 51, 0.05); /* Fondo verde muy sutil */
    margin-top: 40px;
}
.confirmation-icon {
    font-size: 4em;
    color: var(--color-tertiary-glow);
    text-shadow: var(--glow-effect-tertiary);
    margin-bottom: 20px;
}
.confirmation-container h2 {
    font-family: var(--font-primary);
    color: var(--color-tertiary-glow);
    text-shadow: var(--glow-effect-tertiary);
    margin-bottom: 15px;
}
.confirmation-container p {
    color: var(--color-text);
    margin-bottom: 30px;
}

.whatsapp-button {
     background: linear-gradient(145deg, #25D366, #128C7E); /* Verde WhatsApp */
     color: #fff;
     box-shadow: 0 0 10px #25D366, 0 0 15px #25D366, 0 4px 15px rgba(37, 211, 102, 0.4);
}
.whatsapp-button:hover {
     transform: scale(1.05) translateY(-4px);
     box-shadow: 0 0 15px #25D366, 0 0 25px #25D366, 0 6px 20px rgba(37, 211, 102, 0.6);
}
.whatsapp-button i {
    font-size: 1.3em;
}

/* --- Pie de Página --- */
.footer-section {
    text-align: center;
    padding: 30px 20px;
    margin-top: 60px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.9em;
}

/* --- Efectos Interactivos Sutiles --- */
.knowledge-block, .input-group label, input, textarea, select, .nav-button {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Podrías añadir un ligero brillo al contenedor del bloque al pasar el ratón cerca,
   pero requiere JS o CSS más avanzado (hover en el padre).
   Una alternativa simple es en el propio bloque: */
.category-fieldset:hover .knowledge-block {
     /* border-color: var(--color-primary-glow); */ /* Opcional: Cambiar borde al pasar por el fieldset */
}


/* --- Responsividad --- */
@media (max-width: 992px) {
    .block-top-row {
        grid-template-columns: 1fr; /* Apilar columnas en pantallas medianas/pequeñas */
    }
    .main-nav {
        flex-direction: column;
        align-items: center;
        padding: 15px 3%;
    }
    .nav-links {
        margin-top: 15px;
        flex-wrap: wrap; /* Permitir que los botones pasen a la siguiente línea */
        justify-content: center;
    }
     .hero-section h1 {
        font-size: 2.8em;
    }
     .form-section h2 {
         font-size: 2em;
     }
     .category-legend {
         font-size: 1.4em;
     }
}

@media (max-width: 576px) {
    .nav-links {
        gap: 10px;
    }
    .nav-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
     .hero-section h1 {
        font-size: 2.2em;
    }
     .hero-section p {
         font-size: 1em;
     }
     .cta-button, .submit-button, .whatsapp-button {
         font-size: 1em;
         padding: 12px 30px;
     }
     .form-section {
         padding: 40px 3%;
     }
     .category-fieldset {
         padding: 20px;
     }
     .knowledge-block {
         padding: 15px;
     }
     textarea, input, select {
         padding: 10px 12px;
     }
}