/* 1. Importación de la fuente desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* 2. Aplicación global a todo el sitio */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Inter', sans-serif !important;
}

.material-icons {
    font-family: 'Material Icons' !important;
}

/* ==========================================================================
   1. ESTILOS BASE Y TIPOGRAFÍA
========================================================================== */
body {
    background-color: #fff;
}

h1 {
    display: block !important;
    width: 100% !important;
    font-size: clamp(1.5rem, 5vw + 2rem, 4.5rem);
    font-weight: 700 !important;
    line-height: 1 !important;
    word-wrap: normal !important;
}

h2 { 
    font-size: clamp(1.8rem, 6vw + 1rem, 2.5rem); 
    line-height: 1.1;
    margin-top: 120px;
}

h3 { 
    color: #1C1D1F; 
    font-size: clamp(1.4rem, 4vw + 1rem, 1.75rem); 
    line-height: 1.2;
}

p { 
    font-size: 17px; 
    color: #1C1D1F; 
}


/* -------------------------------------------------------
   HERO 
--------------------------------------------------------*/
.row:has(> .dynamicform > .gradient-sunset) {
    border-bottom: 30px solid;
    border-image-source: linear-gradient(
        90deg,
        #063f7b 0%,
        #063f7b 10%,
        #d3dcec 45%,
        #d3dcec 55%,
        #063f7b 90%,
        #063f7b 100%
    );
    border-image-slice: 1;
}

/* -------------------------------------------------------
   SAVE THE DATE
--------------------------------------------------------*/

/* Contenedor exacto de las 3 fechas */
.save-date div:has(> p):not(:has(> div)) 
.logos {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px;
    margin: 48px auto 0;
}

/* Cada bloque de fecha */
.save-date div:has(> p):not(:has(> div)) > p {
    background-color: #333;
    color: white;
    border-radius: 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex: 0 0 auto !important;

    width: 125px;
    min-width: 125px;
    max-width: 125px;

    margin: 0 !important;
    padding: 26px 36px;

    font-size: 26px;
    font-weight: 800;
    line-height: 0.8;
}

/* Día: JUE, VIE, SÁB */
.save-date p::first-line {
    font-size: 46px;
    font-weight: bold;
    line-height: 1;
}

/* Contenedor de las 3 fechas */
.save-date div:has(> p) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 10px;
    width: 100% !important;
    margin: 48px auto 0 !important;
}

/* Tarjetas */
.save-date div:has(> p) > p {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

@media (max-width: 600px) {

    /* Padre que contiene los elementos de save-date */
    .save-date .col.s12 > div {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

}



/*==============
LOGOS
==============*/
.logos {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px;
    margin-top: 45px;
}

.logos > div {
    flex: 0 0 auto !important;
    width: auto !important;
}

@media (max-width: 600px) {

    /* Padre que contiene todos los logos */
    .logos {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 40px;
        margin-top: 70px !important;
    }
}



.card {
 margin-top: 40px;
 margin-bottom: 40px;
}