/* ----- ESTRUCTURA DE LA PÁGINA (LAYOUT) ----- */

/* --- Encabezado --- */
#main-header {
    padding: 20px 0;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    min-height: 100px;
}

/* Estilo para el Logo en el Encabezado */
.logo {
    max-height: 120px;
    width: auto;
    padding-left: 20px;
}

/* --- Secciones Generales --- */
main section {
    padding: 80px 0;
    border-bottom: 1px solid #333;
}

/* --- Sección de Héroe --- */
#hero {
position: relative;
text-align: center;
padding: 100px 0;
overflow: hidden;
background: linear-gradient(-45deg, rgba(26, 0, 46, 0.15), rgba(58, 0, 93, 0.15), rgba(26, 0, 46, 0.15), rgba(0, 0, 0, 0.15)); /* Degradado con baja opacidad */
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
}

/* El contenido del Hero debe estar por encima de este fondo */
#hero .container {
    position: relative;
    z-index: 2; /* Asegura que el texto y botones estén por encima de la imagen de fondo */
}


#hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 20px auto 40px auto;
    color: #b0b0b0;
}

.cta-button {
    background-color: #C7007D;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
}

/* --- Sección Tienda de Tokens --- */
.token-card {
    background-color: #252525;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap; /* Para que se adapte en móviles */
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.token-info { flex-basis: 50%; }
.token-calculator { flex-basis: 40%; text-align: center; }
.token-calculator label { display: block; margin-bottom: 10px; font-weight: bold; }
.token-calculator input { width: 100%; padding: 10px; font-size: 1.2rem; text-align: center; background-color: #333; border: 1px solid #555; color: white; border-radius: 5px; }
.total-price { font-size: 1.5rem; font-weight: bold; margin-top: 20px; color: #FFFFFF; }

/* --- Sección Formulario de Compra --- */
#purchase-section { text-align: center; }
#purchase-section p { max-width: 600px; margin-left: auto; margin-right: auto; }
#whatsapp-form { max-width: 500px; margin: 40px auto 0 auto; }
#whatsapp-form label { display: block; font-weight: bold; margin-bottom: 10px; text-align: left; }
#whatsapp-form input { width: 100%; padding: 15px; margin-bottom: 20px; background-color: #333; border: 1px solid #555; color: white; border-radius: 5px; font-size: 1rem; }
.whatsapp-button { width: 100%; padding: 15px 30px; background-color: #25D366; color: white; border: none; border-radius: 5px; font-weight: bold; font-size: 1.2rem; cursor: pointer; }

/* --- Pie de Página --- */
#main-footer {
    text-align: center;
    padding: 40px 0;
    font-size: 0.9rem;
    color: #888;
}