/* ==== BASE ==== */
body {
    background-image: url('../images/fondos/Fondo_optimizado.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    margin: 0;
    font-family: 'Font Family Brich';
    font-size: 1em;
}

/* ==== ESTRUCTURA GENERAL ==== */
.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    justify-content: flex-start;
    padding-bottom: 2.5em; /* 40px ≈ 2.5em */
}

.title {
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.625em; /* 10px ≈ 0.625em */
}

.subtitle {
    text-align: center;
    margin-bottom: 1.875em; /* 30px ≈ 1.875em */
    font-size: 1.2em;
    font-weight: bold;
}

.logo {
    text-align: center;
    margin-top: 1.875em; /* 30px ≈ 1.875em */
    margin-bottom: 1.25em; /* 20px ≈ 1.25em */
}

.logo img {
    max-width: 50vw;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.25em;
}

/* Curiosidad texto: tamaño fijo y estilo */
.curiosidad-texto {
    font-size: 0.9em !important;
    color: #FFC394 !important;
    margin-top: 8px !important;
    font-style: italic !important;
    line-height: 1.2 !important;
}


/* ==== BOTÓN ==== */
.link-button {
    border-radius: 3.125em; /* 50px ≈ 3.125em */
    background-color: #222;
    color: #fff !important;
    padding: 1.25em 0;
    text-align: center;
    margin: 1.125em 0;
    font-size: 2em;
    text-decoration: none !important;
    display: block;
    font-weight: bold;
    border: none;
    box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.2); /* 2px 8px */
    transition: background 0.2s;
    cursor: pointer;
    width: 70vw;
    min-width: 20em;
    max-width: 95vw;
}

.link-button:hover {
    background-color: #444;
}

/* ==== BOTÓN VOLVER ==== */
.link-button-volver {
    border-radius: 3.125em; /* 50px ≈ 3.125em */
    background-color: #222;
    color: #fff !important;
    padding: 1.25em 0;
    text-align: center;
    margin: 1.125em 0;
    font-size: 2em;
    text-decoration: none !important;
    display: block;
    font-weight: bold;
    border: none;
    box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.2); /* 2px 8px */
    transition: background 0.2s;
    cursor: pointer;
    width: 85vw;
    min-width: 15em;
    max-width: 15em;
}

.link-button-volver:hover {
    background-color: #444;
}

/* ==== INICIO ==== */
#password {
    background: #CCCACA;
    color: #222;
    border-radius: 0.5em;
    border: 0.0625em solid #bbb;
    padding: 0.5em 0.75em;
    margin-bottom: 1.125em;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

/* ==== EXPANDER (CARTA) ==== */
.expander details > summary {
    list-style: none;
    position: relative;
    cursor: pointer;
    padding-left: 2.5em !important;
}

.expander details > summary::-webkit-details-marker {
    display: none;
}

.expander details > summary::before {
    content: "";
    position: absolute;
    left: 0.75em;
    top: 50%;
    transform: translateY(-50%);
    width: 1.375em;
    height: 1.375em;
    background-image: url('../images/logos/arrow_derecha.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.2s;
    margin-right: 0.75em;
}

.expander details[open] > summary::before {
    background-image: url('../images/logos/arrow_abajo.png');
    
}

/* ==== HISTORIA BOX ==== */
.historia-text {
    text-align: left;
    margin: 1.875em 0;
    font-size: 1.75em;
    font-weight: bold;
    background: rgba(30,30,30,0.7);
    border-radius: 1em;
    padding: 2em 1.5em;
    max-width: 43.75em; /* 700px ≈ 43.75em */
    box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.2);
}

/* ==== EVENTOS Y PRIVACIDAD ==== */
.clandestino-box,
.privacidad-box {
    background: rgba(60,60,60,0.7);
    border-radius: 1.125em;
    box-shadow: 0 0.25em 1.5em rgba(0,0,0,0.2);
    padding: 2em 1.75em;
    margin: 2em auto 0 auto;
}

.clandestino-box {
    width: 100%;
    max-width: 33.75em; /* 540px ≈ 33.75em */
    box-sizing: border-box;
    font-size: 1.75em;
}

.privacidad-box {
    max-width: 43.75em;
}

.privacidad-box h2,
.privacidad-box p,
.privacidad-box ul,
.privacidad-box li,
.clandestino-box h3,
.clandestino-box p {
    color: #fff;
}

.privacidad-box h2 {
    margin-top: 2em;
    margin-bottom: 0.75em;
    font-size: 1.3em;
}

.privacidad-box ul {
    margin-left: 1.5em;
    margin-bottom: 1.125em;
}

.privacidad-box li {
    margin-bottom: 0.375em;
}

/* ==== FORMULARIO DE EVENTOS ==== */
.event-form {
    background: #111;
    border-radius: 1em;
    padding: 2em;
    box-shadow: none;
    width: 100vw;
    max-width: 100vw;
    margin: 2em auto 0 auto;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.5em;
}

.event-form label {
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
}

.event-form input,
.event-form textarea,
.event-form select {
    background: #CCCACA;
    color: #222;
    border-radius: 0.5em;
    border: 0.0625em solid #bbb;
    padding: 0.5em 0.75em;
    margin-bottom: 0.75em;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
}

.event-form input[type="checkbox"] {
    width: auto;
    margin-right: 0.5em;
    margin-bottom: 0px;
}

.event-form .form-row {
    display: flex;
    gap: 1em;
    margin-bottom: 0.75em;
}

.event-form .form-row > div {
    flex: 1;
}

.event-form .checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1.125em;
}

.event-form .submit-row {
    text-align: center;
    margin-top: 1.125em;
}

.event-form button[type="submit"] {
    background: #CCCACA;
    color: #222;
    border-radius: 0.5em;
    border: 0.0625em solid #bbb;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0.625em 2.25em;
    margin: 0 auto;
    box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.08);
    min-width: 7.5em;
    max-width: 13.75em;
    display: inline-block;
    transition: background 0.2s;
}

.event-form button[type="submit"]:hover {
    background: #bdbdbd;
    color: #111;
}

/* Centrar el header del formulario de eventos */
.event-form .form-header {
    text-align: center;
    margin-bottom: 1.5em;
}

/* ==== ICONOS & LINKS ==== */
a {
    color: #7ecfff;
}

a:hover {
    color: #fff;
}

.whatsapp {
    color: #25D366;
    text-decoration: none;
    font-weight: bold;
}

.instagram {
    color: #E4405F;
    text-decoration: none;
    font-weight: bold;
}

.instagram:hover {
    color: #fff;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 900px) {
    .privacidad-box,
    .event-form,
    .clandestino-box {
        max-width: 98vw;
        width: 100%;
        padding: 1.5em 2vw;
        box-sizing: border-box;
    }

    .event-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .legal-box {
        max-width: 98vw;
        padding: 0.75em 4vw !important;
        font-size: 0.95em !important;
        word-break: break-word;
    }
}

@media (max-width: 700px) {
    .expander [style*='display:flex'][style*='flex-wrap:wrap'] {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: center !important;
    }

    .expander [style*='display:flex'][style*='align-items:center'][style*='width:900px'] {
        width: 95vw !important;
        min-width: 0 !important;
        max-width: 99vw !important;
    }
}

.legal-box {
    background: rgba(60,60,60,0.7);
    border-radius: 1.125em;
    box-shadow: 0 0.25em 1.5em rgba(0,0,0,0.2);
    padding: 2em 1.75em;
    margin: 2em 0 0 0; /* margen superior, sin auto horizontal */
    max-width: 98vw;
    width: 100%;
    box-sizing: border-box;
    color: #eee;
    font-size: 1em;
    line-height: 1.6;
    word-break: break-word;
    text-align: left;
}

.legal-box p{
    font-size: 0.65em;
}

#form-message {
    margin-top: 1.125em;
}

.legal-link {
    color: #7ecfff;
}