/* 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 — FRANJA ROSA
--------------------------------------------------------*/
.row:has(> .dynamicform > .gradient-sunset) {
    border-bottom: 30px solid;
    border-image-source: linear-gradient(
        90deg,
        #c2185b 0%,
        #c2185b 10%,
        #f8d4e3 45%,
        #f8d4e3 55%,
        #c2185b 90%,
        #c2185b 100%
    );
    border-image-slice: 1;
}

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

/* Contenedor exacto de los dos bloques */
.save-date > div > .row > .col.s12 > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;

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

/* Los dos bloques */
.save-date > div > .row > .col.s12 > div > p {
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;

    flex: 0 1 220px !important;
    width: 220px !important;
    min-width: 0 !important;
    max-width: 220px !important;
    height: 220px !important;

    margin: 0 !important;
    padding: 20px !important;

    background: #333;
    color: #fff;
    border-radius: 24px;

    text-align: center !important;
    font-weight: 800;
    line-height: 1 !important;
}

/* Quitar los saltos que crean el espacio extra */
.save-date > div > .row > .col.s12 > div > p > br {
    display: none !important;
}

/* Resetear espacios y tamaños de los textos */
.save-date > div > .row > .col.s12 > div > p > span {
    display: block;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 24px !important;
    font-weight: 800;
    line-height: 1.1 !important;
}

/* Anular la regla anterior de primera línea */
.save-date > div > .row > .col.s12 > div > p::first-line {
    font-size: inherit;
    line-height: inherit;
}

/* Número del día */
.save-date > div > .row > .col.s12 > div > p:first-child > span:last-of-type {
    font-size: 48px !important;
}

/* Hora */
.save-date > div > .row > .col.s12 > div > p:nth-of-type(2) > span {
    font-size: 42px !important;
    white-space: nowrap;
}

/* Reloj SVG encima de la hora */
.save-date > div > .row > .col.s12 > div > p:nth-of-type(2)::before {
    content: "";
    display: block;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin-bottom: 4px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Móvil */
@media (max-width: 600px) {
    .save-date > div > .row > .col.s12 > div {
        gap: 12px;
        margin-top: 32px !important;
    }

    .save-date > div > .row > .col.s12 > div > p {
        height: 180px !important;
        padding: 12px !important;
        gap: 6px !important;
        border-radius: 20px;
    }

    .save-date > div > .row > .col.s12 > div > p > span {
        font-size: clamp(16px, 4.5vw, 22px) !important;
    }

    .save-date > div > .row > .col.s12 > div > p:first-child > span:last-of-type {
        font-size: 42px !important;
    }

    .save-date > div > .row > .col.s12 > div > p:nth-of-type(2) > span {
        font-size: clamp(26px, 7vw, 36px) !important;
    }

    .save-date > div > .row > .col.s12 > div > p:nth-of-type(2)::before {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/*==============
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;
}