/* --- Paleta de Colores y Variables Globales --- */
:root {
   --dark-bg: #121212;
   --card-bg: #1E1E1E;
   --primary-text: #EAEAEA;
   --secondary-text: #A9A9A9;
   --accent-green: #00FF7F;
   --accent-gold: #FFD700;
   --border-color: #333333;
   --font-family: 'Poppins', sans-serif;
}


/* --- Reset y Estilos Base --- */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}


html {
   scroll-behavior: smooth;
}


body {
   font-family: var(--font-family);
   background-color: var(--dark-bg);
   color: var(--primary-text);
   line-height: 1.8;
   background-image: radial-gradient(var(--border-color) 0.5px, transparent 0.5px);
   background-size: 15px 15px;
}


/* --- Contenedor Principal --- */
.container {
   max-width: 900px;
   margin: 0 auto;
   padding: 20px;
}

/* --- Tipografía --- */
h1, h2, h3, h4 {
   line-height: 1.3;
   font-weight: 700;
}
h1 { font-size: 3em; text-align: center; }
h1 span {
   background: -webkit-linear-gradient(45deg, var(--accent-green), var(--accent-gold));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
h2 {
   font-size: 2.2em;
   color: var(--primary-text);
   border-left: 4px solid var(--accent-green);
   padding-left: 0.5em;
   margin-top: 3em;
   margin-bottom: 1em;
}
h3 { font-size: 1.6em; color: var(--accent-gold); margin-top: 1.5em; margin-bottom: 0.5em; }


p { color: var(--secondary-text); margin-bottom: 1em; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 0.5em; color: var(--secondary-text);}
li strong { color: var(--primary-text); }
a { color: var(--accent-green); text-decoration: none; font-weight: 600; transition: color 0.3s; }
a:hover { color: var(--accent-gold); }
strong { color: var(--accent-gold); font-weight: 600; }


/* --- Encabezado y Navegación --- */
header {
   background-color: rgba(18, 18, 18, 0.8);
   backdrop-filter: blur(10px);
   padding: 15px 0;
   position: sticky;
   top: 0;
   z-index: 1000;
   border-bottom: 1px solid var(--border-color);
}
.nav-container { max-width: 1460px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8em; font-weight: 800; color: var(--primary-text); text-decoration: none; }
.logo span { color: var(--accent-green); }
.main-nav { list-style: none; display: flex; }
.nav-item { position: relative; }
.nav-link { color: var(--primary-text); text-decoration: none; padding: 15px; display: block; font-weight: 500; transition: color 0.3s; }
.nav-link:hover { color: var(--accent-green); }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background-color: var(--card-bg); list-style: none; min-width: 240px; border-top: 2px solid var(--accent-green); box-shadow: 0 8px 16px rgba(0,0,0,0.3); border-radius: 0 0 8px 8px;}
.nav-item:hover .dropdown { display: block; }
.dropdown .nav-link { padding: 12px 15px; }
.hamburger { display: none; cursor: pointer; border: none; background: none; }
.hamburger .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--primary-text); transition: all 0.3s ease-in-out; }


/* --- Sección Hero (Primer Pantallazo) --- */
.hero {
   padding: 4em 20px;
   text-align: center;
}
.hero p {
   font-size: 1.2em;
   color: var(--secondary-text);
   max-width: 600px;
   margin: 1em auto 1.5em;
}
.cta-button {
   background: linear-gradient(45deg, var(--accent-green), #00b359);
   color: #000;
   padding: 15px 35px;
   font-size: 1.1em;
   font-weight: 700;
   border: none;
   border-radius: 50px;
   cursor: pointer;
   text-transform: uppercase;
   box-shadow: 0 4px 15px rgba(0, 255, 127, 0.2);
   transition: transform 0.3s, box-shadow 0.3s;
}
.cta-button:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 255, 127, 0.3);
}


/* --- Bloques Visuales y Tarjetas --- */
.visual-block {
   background-color: var(--card-bg);
   border: 1px solid var(--border-color);
   padding: 2em;
   margin: 2em 0;
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}


/* --- Tabla de Contenidos Colapsable --- */
#toc-title {
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0;
}
.toggle-icon {
   font-size: 1.5em;
   color: var(--accent-green);
   font-weight: 700;
}
#toc-list {
   list-style: none;
   padding: 0;
   margin-top: 1em;
   overflow: hidden;
   max-height: 1000px; /* Altura suficientemente grande para contener todo */
   transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}
#toc.collapsed #toc-list {
   max-height: 0;
   margin-top: 0;
}
#toc-list li a { display: block; padding: 5px 0; font-weight: 500; }


.features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5em;
   margin-bottom: 1.5em;
}
.feature-card {
   background: #2a2a2a;
   padding: 1.5em;
   border-radius: 10px;
   border: 1px solid var(--border-color);
   text-align: center;
   transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
.feature-icon { font-size: 2.5em; margin-bottom: 0.5em; color: var(--accent-green); }
.feature-card h4 { font-size: 1.2em; color: var(--primary-text); margin-bottom: 0.5em; }
.feature-card p { font-size: 0.9em; color: var(--secondary-text); margin: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5em; }


/* Timeline para el Proceso de Verificación */
.timeline { list-style: none; padding: 0; position: relative; margin-top: 2em;}
.timeline::before { content: ''; position: absolute; top: 0; left: 15px; height: 100%; width: 3px; background: linear-gradient(to bottom, var(--accent-green), var(--accent-gold)); }
.timeline-item { position: relative; padding-left: 50px; margin-bottom: 2em; }
.timeline-item::before { content: attr(data-step); position: absolute; left: 0; top: 0; width: 33px; height: 33px; border-radius: 50%; background-color: var(--dark-bg); border: 2px solid var(--accent-green); color: var(--accent-green); font-weight: 700; display: flex; justify-content: center; align-items: center; }
.timeline-item h4 { color: var(--primary-text); font-size: 1.2em; }
.timeline-item p { color: var(--secondary-text); margin: 0; }


/* Marcador de Imagen Mejorado */
.image-placeholder {
   background-color: var(--card-bg);
   border: 2px dashed var(--border-color);
   padding: 3em 1.5em;
   margin: 2em 0;
   text-align: center;
   color: var(--secondary-text);
   font-style: italic;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 250px;
}



/* Tabla Comparativa */
.table-container { overflow-x: auto; margin: 2em 0; }
table { width: 100%; border-collapse: collapse; background-color: var(--card-bg); }
th, td { padding: 15px; text-align: left; border: 1px solid var(--border-color); }
th { background-color: #2a2a2a; color: var(--accent-green); font-weight: 600; }
tbody tr:nth-child(even) { background-color: #242424; }

/* Acordeón de FAQ */
.faq-item { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 1em; overflow: hidden; }
.faq-item summary { padding: 1em 1.5em; cursor: pointer; font-size: 1.1em; font-weight: 600; position: relative; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); font-size: 1.5em; color: var(--accent-green); transition: transform 0.3s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-content { padding: 0 1.5em 1.5em; border-top: 1px solid var(--border-color); }


/* --- Pie de Página --- */
footer { background-color: #111; padding: 3em 0; margin-top: 3em; border-top: 2px solid var(--border-color); }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2em; }
.footer-column { flex: 1; min-width: 200px; }
.footer-column h4 { color: var(--accent-gold); margin-bottom: 1em;}
.footer-column ul { list-style: none; padding: 0; }
.footer-column ul li a { color: var(--secondary-text); font-weight: 400;}
.footer-bottom { text-align: center; margin-top: 2em; padding-top: 2em; border-top: 1px solid var(--border-color); color: var(--secondary-text); }


/* --- Estilos para Móvil (Responsive) --- */
@media (max-width: 768px) {
   h1 { font-size: 2.2em; }
   h2 { font-size: 1.8em; }
   .main-nav { display: none; flex-direction: column; width: 100%; position: absolute; top: 65px; left: 0; background-color: var(--dark-bg); border-bottom: 1px solid var(--border-color);}
   .main-nav.active { display: flex; }
   .nav-link { text-align: left; padding: 15px 20px; width: 100%;}
   .nav-item { border-bottom: 1px solid var(--border-color); }
   .nav-item:last-child { border-bottom: none; }
   .dropdown { position: static; display: block; background-color: transparent; box-shadow: none; border: none; width: 100%; }
   .dropdown .nav-link { padding-left: 40px; background-color: #222; font-weight: 400; font-size: 0.9em; }
   .hamburger { display: block; }
   .hamburger.active .bar:nth-child(2) { opacity: 0; }
   .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
   .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}

.register-btn {
    font-size: 18px;
    padding: 10px 24px;
    border: 2px solid #76ff7a;
    border-radius: 8px;
    color: #76ff7a;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s ease;
}

.register-btn:hover {
    background-color: #76ff7a;
    color: #000;
}

.payment-methods {
    padding: 25px 15px; 
     margin-top: 40px;
}

.payment-methods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.payment-methods-item {
    line-height: 0;
}

.payment-methods-logo {
    height: 75px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}