:root {
    --primary: #004183;
    --accent: #00d2ff;
    --dark: #020b18;
    --neutral-bg: #0a1424; /* Gris neutro para la fila de información */
    --text: #e2e8f0;
    --white: #ffffff;
}

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

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--dark);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}

.glow-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(0, 65, 131, 0.4) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 210, 255, 0.2) 0%, transparent 40%);
    z-index: -1;
}

/* Cabecera con Logotipo Centrado */
.top-nav {
    padding: 50px 0;
    background-color: transparent; /* Se integra con el fondo glow del body */
    text-align: center;
}

.logo-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: scale(1.05); /* Efecto sutil al pasar el ratón */
}

.main-logo {
    max-width: 700px; /* Tamaño máximo en escritorio */
    width: 90%;       /* Para que no se corte en pantallas pequeñas */
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2)); /* Le da un poco de profundidad */
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .top-nav {
        padding: 20px 0;
    }
    .main-logo {
        max-width: 280px;
    }
}

.main-wrapper { max-width: 1200px; margin: 0 auto; padding: 0px 20px 40px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-end; padding: 0px 0 100px;}
.badge { display: inline-block; padding: 6px 14px; background: var(--primary); color: white; border-radius: 50px; font-weight: bold; font-size: 0.8rem; margin-bottom: 20px; }
h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; color: var(--white); }
h1 span { color: var(--accent); }

.hero-frame { position: relative; }
.hero-frame img { width: 100%; border-radius: 30px; box-shadow: 0 50px 100px -20px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); aspect-ratio: 1 / 1;}
.frame-decor { position: absolute; top: -15px; right: -15px; width: 80px; height: 80px; border-right: 5px solid var(--accent); border-top: 5px solid var(--accent); border-radius: 15px; }

/* Destacar Section 01-04 */
.section-highlighted { margin-bottom: 80px; padding: 40px; border-radius: 40px; border: 2px solid rgba(0, 210, 255, 1); background: rgba(0, 65, 131, 0.3); }
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.bento-card { background: rgba(255,255,255,0.05); padding: 40px 30px 30px 30px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.2); transition: 0.3s; position: relative; text-align: center;}
.bento-card:hover { border-color: var(--accent); transform: translateY(-10px); background: rgba(0, 65, 131, 0.3); }
.step { position: absolute; top: -25px; left: calc(50% - 30px); background: var(--primary); color: var(--accent); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; border: 2px solid var(--accent); box-shadow: 0 0 15px var(--primary); }

/* Fila Neutra Separada */
.neutral-row { background: var(--neutral-bg); padding: 60px; border-radius: 30px; margin-bottom: 30px; border: 1px solid rgba(255,255,255,0.05); }
.warning-side h3 { color: #999999; font-size: 1.8rem; margin-bottom: 20px; }
.warning-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(800px, 1fr)); gap: 10px; margin: 0 60px 0 40px;}
.warning-list li { background: rgba(0,0,0,0.2); padding: 15px; border-radius: 12px; font-weight: 600; }

/* Fila Clara / Acordeón */
/* Contenedor de las pestañas */
.accordion-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.acc-item {
    flex: 1;
    min-width: 280px; /* Evita que se amontonen en móvil */
    display: flex;
    flex-direction: column;
}

/* El botón con estilo de píldora */
.acc-button {
    background-color: var(--primary);
    color: white;
    cursor: pointer;
    padding: 18px 25px;
    width: 100%;
    border: 2px solid var(--primary);
    border-radius: 20px;
    text-align: center;
    outline: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.acc-button:hover, .acc-button.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--dark);
    transform: translateY(-3px);
}
.acc-button.active {
    color: white;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transform: translateY(0px);
    background-color: var(--primary);
    border-color: var(--primary);
}

/* El contenido que se despliega */
.acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 0px;
}

.acc-content p {
    padding: 20px;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.solution-row { padding: 40px 0; margin-bottom: 80px; }
.solution-side h3 { font-size: 2.2rem; margin-bottom: 20px; color: var(--white); }
.summary { margin-top: 40px; padding: 20px; border-left: 4px solid var(--primary); background: rgba(255,255,255,0.1); font-size: 20px;}

/* Formulario */
.glass-container { background: linear-gradient(135deg, rgba(0, 65, 131, 0.9) 0%, rgba(2, 11, 24, 0.9) 100%); padding: 80px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(20px); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-layout {
    margin-top: 20px;
}
input, textarea { width: 100%; padding: 20px; border-radius: 15px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; }
input[type="checkbox"] { width: auto;}
input::placeholder, 
textarea::placeholder {
    color: #d1d1d1; /* Gris muy clarito */
    opacity: 1;      /* Necesario en Firefox para que se vea el color real */
}

/* Compatibilidad para navegadores antiguos (Internet Explorer / Edge antiguo) */
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder {
    color: #d1d1d1;
}

input::-ms-input-placeholder, 
textarea::-ms-input-placeholder {
    color: #d1d1d1;
}
/* Checkbox de privacidad */
.checkbox-group {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.checkbox-group a {
    color: var(--accent);
    text-decoration: none;
}

/* Captcha Wrapper */
.captcha-wrapper {
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.captcha-wrapper label {
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}

#captcha-respuesta {
    max-width: 120px;
    padding: 10px;
}
.submit-btn { width: 100%; padding: 20px; background: var(--accent); color: var(--dark); border-radius: 15px; font-weight: 800; cursor: pointer; transition: 0.3s; margin-top: 20px; }
.submit-btn:hover { background: var(--white); box-shadow: 0 0 30px var(--accent); }

@media (max-width: 900px) {
    .main-wrapper { padding: 40px 40px; }
    .hero, .bento-grid, .row, .warning-list { grid-template-columns: 1fr; }
    .bento-grid {grid-template-columns: repeat(2, 1fr);}
    .bento-grid {gap: 40px;}
    .hero-frame img { aspect-ratio: 4 / 3;}
    .accordion-pills { flex-direction: column; }
    .warning-list { margin: 0 10px 0 10px;}
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .accordion-container {
        flex-direction: column;
    }
    .acc-item {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .main-wrapper { padding: 40px 20px; }
    .hero, .bento-grid, .row, .warning-list { grid-template-columns: 1fr; }
    .glass-container { padding: 20px;}
}
.main-footer {
    background-color: var(--primary); /* El gris neutro de la fila anterior */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px; margin: 0 auto; padding: 20px;
}

.footer-nav {
    display: flex;
    gap: 20px;
}

.footer-nav a {
    color: var(--white);
    text-decoration: none;
    transition: 0.3s;
}

.footer-nav a:hover {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}