/* =========================================================
   BAUTIZO DE DAVID
   /invitaciones/bautizoverde/style.css
========================================================= */

@import url(
    "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Italiana&family=Montserrat:wght@300;400;500&display=swap"
);


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --green: #a9c18f;
    --green-dark: #718461;
    --green-soft: #e3eadb;

    --beige: #f3ede3;
    --beige-light: #fbf8f2;

    --pearl: #fffdf8;
    --gold: #a9854e;

    --text: #55564f;
    --muted: #77796f;

    --shadow:
        0 20px 55px rgba(74, 78, 64, 0.10);

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    margin: 0;

    background: var(--beige-light);

    color: var(--text);

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 300;

}

body.preload * {

    animation: none !important;

    transition: none !important;

}

img {

    display: block;

    max-width: 100%;

}

button {

    font: inherit;

}

a {

    color: inherit;

}

.container {

    width:
        min(
            1080px,
            calc(100% - 34px)
        );

    margin: 0 auto;

}

.section {

    padding: 95px 0;

}


/* =========================================================
   TEXTOS GENERALES
========================================================= */

.eyebrow {

    margin: 0 0 17px;

    color: var(--green-dark);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.27em;

    text-transform: uppercase;

}

.ornament {

    display: block;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 22px;

}

.section-title {

    margin: 0;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            42px,
            7vw,
            66px
        );

    font-weight: 400;

    line-height: 1;

}


/* =========================================================
   BOTONES
========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 49px;

    padding: 12px 25px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.14em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;

}

.button:hover {

    transform: translateY(-2px);

}


/* =========================================================
   PORTADA
========================================================= */

.hero {

    position: relative;

    min-height: 100svh;

    overflow: hidden;

    background: var(--beige);

}

.hero__media {

    position: absolute;

    z-index: 1;

    inset: 0;

}

.hero__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}

.hero__overlay {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    min-height: 100svh;

    padding:
        50px
        7vw
        110px;

}

/*
   Este degradado sirve para que los textos
   puedan leerse sobre la portada.
*/

.hero__overlay::before {

    position: absolute;

    z-index: -1;

    content: "";

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(251, 248, 242, 0.86) 0%,
            rgba(251, 248, 242, 0.58) 37%,
            rgba(251, 248, 242, 0.12) 67%,
            rgba(251, 248, 242, 0) 100%
        );

}

.hero__content {

    width: min(560px, 48%);

    text-align: center;

    animation:
        heroAppear
        1s
        ease
        both;

}

.hero__cross {

    display: block;

    margin-bottom: 5px;

    color: var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 42px;

    line-height: 1;

}

.hero__eyebrow {

    display: block;

    color: var(--gold);

    font-family:
        "Italiana",
        serif;

    font-size: 16px;

    letter-spacing: 0.23em;

    text-transform: uppercase;

}

.hero__title {

    margin:
        19px
        0
        0;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            88px,
            13vw,
            155px
        );

    font-style: italic;

    font-weight: 400;

    letter-spacing: -0.055em;

    line-height: 0.68;

}

.hero__lastname {

    margin:
        29px
        0
        23px;

    color: #7e6a4d;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            13px,
            2vw,
            18px
        );

    font-weight: 500;

    letter-spacing: 0.28em;

    text-transform: uppercase;

}

.hero__date {

    margin: 0;

    color: var(--text);

    font-size: 13px;

    letter-spacing: 0.10em;

    line-height: 1.5;

    text-transform: uppercase;

}


/* =========================================================
   CONTADOR
========================================================= */

.countdown {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-top: 28px;

}

.countdown__box {

    width: 78px;

    padding: 14px 7px;

    border:
        1px solid
        rgba(113, 132, 97, 0.25);

    border-radius: 18px;

    background:
        rgba(255, 253, 248, 0.74);

    box-shadow:
        0 10px 30px
        rgba(91, 104, 78, 0.09);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}

.countdown__box > span {

    display: block;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 27px;

    font-weight: 500;

    line-height: 1;

}

.countdown__box small {

    display: block;

    margin-top: 5px;

    color: var(--muted);

    font-size: 8px;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}


/* =========================================================
   FLECHA
========================================================= */

.hero__arrow {

    position: absolute;

    z-index: 10;

    bottom: 35px;

    left: 50%;

    display: grid;

    place-items: center;

    width: 56px;

    height: 56px;

    padding: 0;

    border:
        2px solid
        rgba(255, 255, 255, 0.92);

    border-radius: 50%;

    outline: none;

    background: var(--green-dark);

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 10px 30px
        rgba(61, 78, 48, 0.28);

    transform:
        translateX(-50%);

    animation:
        arrowFloat
        2s
        ease-in-out
        infinite;

}

.hero__arrow svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.hero__arrow:hover {

    background: #5f7352;

}

.hero__arrow:focus-visible {

    outline:
        3px solid
        rgba(169, 193, 143, 0.55);

    outline-offset: 4px;

}


/* =========================================================
   VERSÍCULO
========================================================= */

.verse {

    background: var(--pearl);

    text-align: center;

}

.verse blockquote {

    max-width: 760px;

    margin:
        0
        auto
        17px;

    color: #66725b;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            28px,
            5vw,
            43px
        );

    font-style: italic;

    font-weight: 400;

    line-height: 1.3;

}

.verse p {

    margin: 0;

    font-size: 10px;

    letter-spacing: 0.20em;

    text-transform: uppercase;

}


/* =========================================================
   PAPÁS Y PADRINOS
========================================================= */

.family {

    background: var(--beige);

}

.family__grid {

    display: grid;

    grid-template-columns:
        1fr
        110px
        1fr;

    align-items: center;

    gap: 35px;

}

.family__block {

    text-align: center;

}

.family__block h2 {

    margin: 5px 0;

    color: #5e6257;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            24px,
            3.3vw,
            36px
        );

    font-weight: 500;

    line-height: 1.08;

}

.ampersand {

    display: block;

    color: var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 25px;

    font-style: italic;

}

.family__text {

    max-width: 340px;

    margin:
        23px
        auto
        0;

    color: var(--muted);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.55;

}


/* CRUZ CENTRAL */

.family__cross {

    position: relative;

    height: 165px;

}

.family__cross span,
.family__cross i {

    position: absolute;

    display: block;

    background: var(--gold);

}

.family__cross span {

    top: 0;

    left: 54px;

    width: 2px;

    height: 165px;

}

.family__cross i {

    top: 48px;

    left: 17px;

    width: 75px;

    height: 2px;

}


/* =========================================================
   FECHA
========================================================= */

.date-section {

    padding: 58px 0;

    background: var(--green-soft);

    text-align: center;

}

.date-section p,
.date-section span {

    margin: 0;

    color: var(--green-dark);

    font-size: 10px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

}

.date-section h2 {

    margin: 11px 0;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            35px,
            6vw,
            56px
        );

    font-weight: 400;

}


/* =========================================================
   LUGARES
========================================================= */

.places {

    background: var(--beige-light);

}

.place {

    display: grid;

    grid-template-columns:
        minmax(250px, 430px)
        minmax(280px, 470px);

    align-items: center;

    justify-content: center;

    gap: 58px;

    margin-bottom: 80px;

}

.place:last-child {

    margin-bottom: 0;

}

.place--reverse .place__image {

    order: 2;

}

.place__image img {

    width: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    border-radius:
        210px
        210px
        24px
        24px;

    background: var(--beige);

    box-shadow: var(--shadow);

}

.place__info h2 {

    margin:
        0
        0
        14px;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            34px,
            5vw,
            54px
        );

    font-weight: 500;

    line-height: 0.98;

}

.place__time {

    margin:
        0
        0
        13px;

    color: var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 22px;

    font-weight: 500;

    letter-spacing: 0.08em;

}

.place address {

    margin:
        0
        0
        25px;

    color: var(--muted);

    font-size: 14px;

    font-style: normal;

    line-height: 1.75;

}

.button--outline {

    border:
        1px solid
        rgba(113, 132, 97, 0.50);

    background:
        rgba(227, 234, 219, 0.45);

    color: var(--green-dark);

}

.button--outline:hover {

    border-color: var(--green-dark);

    background: var(--green-dark);

    color: #ffffff;

}


/* =========================================================
   CLIMA
========================================================= */

.weather {

    background: var(--green-soft);

    text-align: center;

}

.weather__description {

    max-width: 560px;

    margin:
        16px
        auto
        34px;

    color: var(--muted);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.5;

}

.weather__panel {

    width: min(900px, 100%);

    margin: 0 auto;

    padding: 30px;

    border:
        1px solid
        rgba(113, 132, 97, 0.20);

    border-radius: 28px;

    background:
        rgba(255, 253, 248, 0.80);

    box-shadow: var(--shadow);

}

.weather__current {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        rgba(113, 132, 97, 0.18);

}

.weather__main-icon {

    font-size: 52px;

    line-height: 1;

}

.weather__current strong {

    display: block;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 50px;

    font-weight: 500;

    line-height: 1;

}

.weather__current small {

    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}

.weather__days {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 10px;

    margin-top: 25px;

}

.weather__days > p {

    grid-column:
        1 / -1;

}

.weather__day {

    padding: 12px 5px;

}

.weather__day strong {

    display: block;

    color: var(--green-dark);

    font-size: 13px;

    font-weight: 500;

}

.weather__day span {

    display: block;

    margin: 7px 0;

    font-size: 25px;

}

.weather__day small {

    color: var(--muted);

    font-size: 11px;

    line-height: 1.45;

}


/* =========================================================
   LLUVIA DE SOBRES
========================================================= */

.gifts {

    background: var(--beige-light);

    text-align: center;

}

.gifts__card {

    width: min(680px, 100%);

    margin: 0 auto;

    padding: 58px 42px;

    border:
        1px solid
        #e3dccf;

    border-radius:
        220px
        220px
        26px
        26px;

    background: var(--pearl);

    box-shadow: var(--shadow);

}

.gifts__icon {

    display: grid;

    place-items: center;

    width: 72px;

    height: 60px;

    margin:
        0
        auto
        22px;

    color: var(--gold);

}

.gifts__icon svg {

    width: 64px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.gifts__card h2 {

    margin:
        0
        0
        15px;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            43px,
            7vw,
            64px
        );

    font-weight: 400;

}

.gifts__card > p:last-child {

    max-width: 480px;

    margin: 0 auto;

    color: var(--muted);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 19px;

    font-weight: 400;

    line-height: 1.55;

}


/* =========================================================
   ITINERARIO
========================================================= */

.agenda {

    background: var(--pearl);

    text-align: center;

}

.timeline {

    width: min(720px, 100%);

    margin:
        48px
        auto
        0;

}

.timeline__item {

    display: grid;

    grid-template-columns:
        95px
        56px
        1fr;

    min-height: 135px;

    text-align: left;

}

.timeline__item time {

    padding-top: 8px;

    color: var(--gold);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 19px;

    font-weight: 500;

}

.timeline__icon {

    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 43px;

    height: 43px;

    border-radius: 50%;

    background: var(--green-dark);

    color: #ffffff;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 22px;

}

.timeline__item:not(:last-child)
.timeline__icon::after {

    position: absolute;

    z-index: -1;

    top: 42px;

    left: 21px;

    width: 1px;

    height: 94px;

    content: "";

    background: #c7d2be;

}

.timeline__item h3 {

    margin:
        3px
        0
        6px;

    color: #5f6657;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 28px;

    font-weight: 500;

}

.timeline__item p {

    margin: 0;

    color: var(--muted);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.45;

}


/* =========================================================
   CONFIRMACIÓN
========================================================= */

.rsvp {

    background: var(--beige);

    text-align: center;

}

.rsvp h2 {

    margin:
        5px
        0
        15px;

    color: var(--green-dark);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            45px,
            8vw,
            70px
        );

    font-weight: 400;

}

.rsvp > .container > p:not(.eyebrow) {

    color: var(--muted);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 20px;

    font-weight: 400;

}

.button--solid {

    margin-top: 18px;

    background: var(--green-dark);

    color: #ffffff;

    box-shadow:
        0 12px 32px
        rgba(84, 104, 69, 0.20);

}

.button--solid:hover {

    background: #5f7352;

}

.rsvp__phone {

    display: block;

    margin-top: 18px;

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 0.17em;

    text-decoration: none;

}


/* =========================================================
   PIE DE PÁGINA
========================================================= */

.footer {

    padding: 30px 18px;

    background: #6f7c65;

    color: #ffffff;

    text-align: center;

}

.footer p {

    margin: 0;

    font-size: 10px;

    letter-spacing: 0.07em;

}

.footer a {

    color: #ffffff;

    font-weight: 500;

}


/* =========================================================
   ANIMACIONES
========================================================= */

.reveal > * {

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity 0.85s ease,
        transform 0.85s ease;

}

.reveal.is-visible > * {

    opacity: 1;

    transform:
        translateY(0);

}

@keyframes heroAppear {

    from {

        opacity: 0;

        transform:
            translateY(22px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

@keyframes arrowFloat {

    0%,
    100% {

        transform:
            translateX(-50%)
            translateY(0);

    }

    50% {

        transform:
            translateX(-50%)
            translateY(7px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .place {

        grid-template-columns:
            minmax(220px, 320px)
            1fr;

        gap: 35px;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    .section {

        padding: 72px 0;

    }


    /* PORTADA */

    .hero__overlay {

        align-items: flex-start;

        justify-content: center;

        padding:
            60px
            16px
            130px;

    }

    .hero__overlay::before {

        background:
            linear-gradient(
                180deg,
                rgba(251, 248, 242, 0.88) 0%,
                rgba(251, 248, 242, 0.72) 42%,
                rgba(251, 248, 242, 0.16) 72%,
                rgba(251, 248, 242, 0) 100%
            );

    }

    .hero__content {

        width: 100%;

        max-width: 450px;

    }

    .hero__title {

        font-size:
            clamp(
                78px,
                24vw,
                112px
            );

    }

    .hero__date {

        font-size: 11px;

    }

    .countdown {

        gap: 7px;

    }

    .countdown__box {

        width: 68px;

        padding:
            12px
            4px;

    }

    .countdown__box > span {

        font-size: 23px;

    }

    .hero__arrow {

        bottom: 27px;

        width: 54px;

        height: 54px;

    }


    /* FAMILIA */

    .family__grid {

        grid-template-columns: 1fr;

        gap: 48px;

    }

    .family__cross {

        height: 110px;

    }

    .family__cross span {

        left: 50%;

        height: 110px;

    }

    .family__cross i {

        top: 35px;

        left:
            calc(50% - 30px);

        width: 62px;

    }


    /* LUGARES */

    .place,
    .place--reverse {

        grid-template-columns: 1fr;

        gap: 28px;

        margin-bottom: 65px;

    }

    .place--reverse .place__image {

        order: 0;

    }

    .place__image {

        width:
            min(
                330px,
                92%
            );

        margin: 0 auto;

    }

    .place__info {

        text-align: center;

    }


    /* CLIMA */

    .weather__panel {

        padding:
            24px
            12px;

    }

    .weather__days {

        grid-template-columns:
            repeat(5, 1fr);

        gap: 2px;

    }

    .weather__day {

        padding:
            12px
            2px;

    }

    .weather__day strong {

        font-size: 10px;

    }

    .weather__day span {

        font-size: 22px;

    }

    .weather__day small {

        font-size: 9px;

    }


    /* REGALOS */

    .gifts__card {

        padding:
            50px
            25px;

        border-radius:
            150px
            150px
            24px
            24px;

    }


    /* ITINERARIO */

    .timeline__item {

        grid-template-columns:
            75px
            50px
            1fr;

    }

    .timeline__item h3 {

        font-size: 24px;

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 430px) {

    .countdown__box {

        width: 62px;

    }

    .weather__current strong {

        font-size: 43px;

    }

    .weather__main-icon {

        font-size: 44px;

    }

    .timeline__item {

        grid-template-columns:
            65px
            44px
            1fr;

    }

    .timeline__item time {

        font-size: 16px;

    }

    .timeline__icon {

        width: 38px;

        height: 38px;

    }

    .timeline__item:not(:last-child)
    .timeline__icon::after {

        top: 37px;

        left: 18px;

    }

    .timeline__item p {

        font-size: 15px;

    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    * {

        scroll-behavior: auto !important;

        animation: none !important;

        transition: none !important;

    }

}



/* =========================================================
   CENTRAR TODO EL CONTENIDO DE LA PORTADA
========================================================= */

.hero__overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px 130px;
}

.hero__content {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.hero__title,
.hero__lastname,
.hero__date,
.hero__eyebrow,
.hero__cross {
    text-align: center;
}

.countdown {
    width: 100%;
    justify-content: center;
}