/*=============================
   ARENA LIBRE — EVENTOS ENTRE SEMANA
   Estilo: tropical elegante
   (arena · mar profundo · turquesa · dorado)
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Outfit:wght@400;500;600;700&display=swap');

:root{

    --arena-50:#FDFAF4;
    --arena-100:#FBF5E9;
    --arena-200:#F1E3C6;
    --arena-300:#E4CDA0;

    --mar-900:#0D3B4A;
    --mar-700:#125067;
    --mar-600:#166B84;

    --turquesa-500:#1FA6A0;
    --turquesa-400:#3FBFB4;
    --turquesa-100:#DEF3EF;

    --dorado-500:#C9A24B;
    --dorado-300:#E3C783;

    --coral-500:#D97757;
    --coral-100:#FBEAE3;

    --texto-900:#17282C;
    --texto-600:#4C6066;

}

.eventos{

    width:90%;
    max-width:1100px;
    margin:0 auto 100px;
    padding:20px 0;
    font-family:'Outfit',sans-serif;

}

.eventos-caja{

    background:rgba(253,250,244,.96);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--arena-200);
    border-radius:26px;
    box-shadow:0 30px 65px -18px rgba(13,59,74,.35);
    display:grid;
    grid-template-columns:1fr 1.3fr;
    overflow:hidden;

}

/* ---------- COLUMNA INFO ---------- */

.eventos-info{

    position:relative;
    background:
        radial-gradient(130% 160% at 0% 100%, rgba(63,191,180,.5) 0%, transparent 55%),
        linear-gradient(160deg,var(--mar-900) 0%,var(--mar-700) 55%,var(--turquesa-500) 140%);
    color:var(--arena-50);
    padding:50px 42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;

}

.eventos-info::after{

    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-70px;
    bottom:-70px;
    border:1.5px solid rgba(255,255,255,.15);
    border-radius:50%;

}

.eventos-info i{

    font-size:36px;
    color:var(--dorado-300);
    margin-bottom:20px;

}

.eventos-info h3{

    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:28px;
    letter-spacing:.2px;
    margin-bottom:16px;

}

.eventos-info p{

    color:var(--arena-100);
    opacity:.9;
    line-height:1.75;
    font-size:15px;

}

/* ---------- COLUMNA FORMULARIO ---------- */

.eventos-form{

    padding:48px 42px;
    background:var(--arena-50);

}

.eventos-form .form-label{

    color:var(--mar-900);
    font-weight:600;
    font-size:13.5px;
    text-transform:uppercase;
    letter-spacing:.2px;
    margin-bottom:8px;

}

.eventos-form .form-control,
.eventos-form .form-select{

    border:1.5px solid var(--arena-200);
    background:#fff;
    border-radius:13px;
    padding:12px 16px;
    font-size:15px;
    font-family:'Outfit',sans-serif;
    color:var(--texto-900);
    transition:.25s;

}

.eventos-form .form-control::placeholder{

    color:#a9a094;

}

.eventos-form .form-control:focus,
.eventos-form .form-select:focus{

    border-color:var(--turquesa-500);
    box-shadow:0 0 0 4px var(--turquesa-100);

}

.btn-enviar-evento{

    width:100%;
    background:linear-gradient(100deg,var(--turquesa-500),var(--mar-700) 130%);
    color:#fff;
    border:none;
    padding:14px;
    border-radius:13px;
    font-weight:600;
    font-size:16px;
    letter-spacing:.2px;
    margin-top:10px;
    transition:.3s;
    box-shadow:0 12px 26px -6px rgba(18,80,103,.5);

}

.btn-enviar-evento:hover{

    background:linear-gradient(100deg,var(--turquesa-400),var(--mar-900) 130%);
    transform:translateY(-2px);
    box-shadow:0 16px 30px -6px rgba(18,80,103,.6);

}

.btn-enviar-evento:disabled{

    opacity:.7;
    transform:none;

}

@media(max-width:850px){

    .eventos-caja{

        grid-template-columns:1fr;

    }

    .eventos-info{

        padding:40px 35px;

    }

    .eventos-form{

        padding:35px 30px;

    }

}

/*=============================
   CALENDARIO (flatpickr)
==============================*/

.flatpickr-day.dia-ocupado{

    background:var(--coral-100) !important;
    color:var(--coral-500) !important;
    text-decoration:line-through;
    border-color:transparent !important;

}

.flatpickr-day.dia-ocupado:hover{

    background:#f5d9cb !important;

}

.flatpickr-day.selected{

    background:var(--turquesa-500) !important;
    border-color:var(--turquesa-500) !important;

}

.flatpickr-day.today{

    border-color:var(--turquesa-500) !important;

}