@charset "utf-8";
/* CSS Document */

/* ========================================= */
/* --- 0. VARIABLES & FONTS --- */
/* ========================================= */
:root {
    --color-bg-exterior: #2c2c2c;
    --color-bg-interior: #f9f9f9;
    --color-text-main: #000000;
    --color-accent: #6a704c;
    --color-light: #f8f8f8;
    
    --max-invitation-width: 18.29cm;
    
    --font-sans: 'Montserrat', sans-serif;
    --font-serif: 'WeddingRegular', serif;
    --font-script: 'WeddingCursive', cursive;
}

@font-face {
    font-family: 'WeddingRegular';
    src: url('../fonts/MinionPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WeddingCursive';
    src: url('../fonts/Runethia.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ========================================= */
/* --- 1. GLOBAL RESET & BASE STYLES --- */
/* ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: var(--color-bg-exterior); 
}

body {
    width: 100%; 
    max-width: var(--max-invitation-width); 
    margin: 0 auto;
    background-color: var(--color-bg-interior); 
    background-image: url('../assets/bg-texture.jpg'); 
    background-position: top center; 
    background-repeat: no-repeat;
    background-size: 100% auto; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
    color: var(--color-text-main);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.tear-container {
    position: relative;
    width: 100%;
}

.tear-bg-img {
width: 100%;
height: auto;
display: block;
}

.tear-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

/* ========================================= */
/* ----- 2. STRUCTURAL LAYOUT SECTIONS ----- */
/* ========================================= */
/* ---------- SECTION 1: TOP IMAGE --------- */
    .top-img {
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .usfoto-img {
    width: 100%;
    position: relative; 
    z-index: 1;
    }
/* ----- END OF SECTION 1 ---- */
/* --------------------------- */
/* -- --- SECTION 2: INTRO --- */
    .intro-section {
        position: relative; 
        z-index: 2; 
        text-align: center;
        color: var(--color-accent);
    }
    .intro-pull-up { margin-top: -36%; }
    /* The boundaries of your red boxes */
    .intro-overlay {
        padding: 30% 5% 20% 5%; 
    }
    .main-text { position: relative; }
    .serif-subtitle { /* --- Nos casamos--- */
        font-family: var(--font-serif);
        font-size: clamp(1.8rem, 6vw, 3rem);
        white-space: nowrap;
        font-weight: 400;
        text-align: center;
        position: relative; 
        z-index: 10;
    }
    .script-title { /* --- Ricardo y Zafiro--- */
        font-family: var(--font-script);
        font-size: clamp(2.6rem, 8vw, 4.5rem);
        white-space: nowrap;
        font-weight: 400;
        text-align: center;
        position: relative;
        z-index: 10;
    }
    /* --- Music player --- */
    .music-player {
    color: var(--color-accent); 
    font-family: var(--font-serif);
    position: relative;
    z-index: 10;
    margin-top: 25%; 
    }

    .player-title { 
        font-size: clamp(.5rem, 5vw, 1.5rem);
        font-weight: 500;
        margin-bottom: 0px;
    }

    .progress-bar-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3%;
        max-width: 75%;
        padding: 0 30px;
        margin: 0 auto 2% auto;
        font-size: clamp(.6rem, 2vw, 0.85rem);
    }

    #seek-slider {
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
        height: 4px;
        border-radius: 5px;
        background: var(--color-accent);
        outline: none;
        cursor: pointer;
    }

    #seek-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        border-radius: 50%;
        background: var(--color-accent); 
        cursor: pointer;
        width: clamp(12px, 3vw, 18px);
        height: clamp(12px, 3vw, 18px);
    }

    .player-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1%;
    }

    .side-icon {
        display: flex;
        align-items: center;
        color: var(--color-accent);
    }

    .side-icon svg {
        width: clamp(28px, 6vw, 40px);
        height: clamp(28px, 6vw, 40px);
        fill: currentColor;
        cursor: pointer;
    }

    #play-pause-btn {
        background-color: var(--color-accent);
        color: white;
        border: none;
        border-radius: 50%;
        width: clamp(25px, 8vw, 50px);
        height: clamp(25px, 8vw, 50px);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    #play-pause-btn svg {
        width: clamp(22px, 5vw, 35px);
        height: clamp(22px, 5vw, 35px);
        fill: white;
    }
    /* --- Countdown Date Card --- */
    .date-text {
        position: relative; 
        width: 100%; 
        text-align: center;
        z-index: 10;
        margin-top: 5%;
    }

    .date-img {
        width: 90%;
        position: relative; 
        margin: 0 auto;
        z-index: 1;
    }

    .date-overlay-content {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 5% 15% 5% 15%; 
        z-index: 5;
        box-sizing: border-box;
    }    
    .top-invitation-text { /* --- Con la bendicion... --- */
        font-family: var(--font-serif);
        font-size: clamp(0.75rem, 2.4vw, 1.4rem);
        color: var(--color-light); 
        font-style: italic;
        margin-top: 6%;
        line-height: 1.4;
        white-space: nowrap;
    }
    .countdown-container {
        color: var(--color-light); 
        font-family: var(--font-serif);
        margin-top: 58%;
        
    }
    .faltan-title {
        font-size: clamp(2rem, 2.8vw, 2.1rem);
        margin-bottom: -8%;
    }
    .countdown-timer {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(2.3rem, 7vw, 4.5rem);
    }

    .time-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 1%;
    }

    .time-block .label {
        color: var(--color-light); 
        font-family: var(--font-serif);
        font-size: clamp(0.5rem, 1.2vw, 0.90rem);
        margin-top: -35%;
        letter-spacing: 0.1em;
    }
    .separator { padding-bottom: 5%; }
/* ----- END OF SECTION 2 ---- */
/* --------------------------- */
/* -- --- SECTION 3: MIDDLE PHOTO --- */
    .middle-section {
        position: sticky;
        top: -15%;
        margin-top: -23%;
        z-index: 1;
    }
    usfoto2-img {
        width: 100%;
        position: relative; 
        z-index: 1;
        margin-top: 4%; 
    }
/* ----- END OF SECTION 3 ---- */
/* --------------------------- */
/* -- --- SECTION 4: EVENTS & DETAILS --- */
    .last-section {
        position: relative; 
        z-index: 2; 
        text-align: center;
        color: var(--color-accent);
    }
    .events-pull-up { margin-top: -20%; }
    .events-overlay {
        padding: 20% 5% 14% 5%;
        justify-content: flex-start;
    }
    .events-container {
        position: relative; 
        width: 100%;
        z-index: 10;
        margin-top: 5%;
    }
    .event-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10%;
    }
    .event-icon3 { width: clamp(30px, 10vw, 60px); margin: 0 auto 2% auto; position: relative; z-index: 2; }
    .event-text-block {
        text-align: center;
        padding: 0 20px;
        margin-bottom: 10px;
    }
    .event-title {
        font-family: var(--font-script);
        font-size: clamp(1.8rem, 8vw, 4rem);
        font-weight: 400;
        line-height: 1.1;
    }
    .event-time {
        font-family: var(--font-serif);
        font-size: clamp(1.5rem, 2vw, 3.5rem);
        margin-top: -2.5%;
    }
    .event-location {
        font-family: var(--font-serif);
        font-size: clamp(1.2rem, 1.5vw, 3rem);
        margin-top: -2.5%;
        letter-spacing: -0.02em; 
    }
    .location-btn-link {
        display: inline-block;
        transition: transform 0.2s ease, opacity 0.2s ease;
        cursor: pointer;
    }
    .location-btn-link:hover { transform: scale(1.03); opacity: 0.9; }
    .location-btn-img {
        width: clamp(160px, 38vw, 250px);
        margin: -3% 5% 0 auto;
    }
    .details-text {
        position: relative; 
        width: 100%;
        margin-top: 20%;
        z-index: 10;
    }
    .program {
        max-width: 60%;
        position: relative; 
        margin-left: auto; 
        margin-right: -2%;  
        z-index: 1;
    }
    .dress {
        max-width: 60%;
        position: relative; 
        margin-left: -4%;  
        margin-top: -83%;   
        z-index: 2; 
    }
    .gifts {
        max-width: 60%;
        position: relative; 
        margin-left: auto; 
        margin-right: -3%;
        margin-top: -41%;  
        z-index: 1; 
    }

    .outfit-btn-link, .gifts-btn-link {
        position: absolute;
        left: 50%;
        transform: translateX(-45%); 
        width: 50%; 
        z-index: 10;
        transition: transform 0.2s ease, opacity 0.2s ease;
        bottom: 7%; 
    }
    .outfit-btn-link:hover, .gifts-btn-link:hover {
        transform: translateX(-45%) scale(1.05); 
        opacity: 0.9;
    }
/* ----- END OF SECTION 4 ---- */
/* --------------------------- */
/* -- --- SECTION 5: RSVP & PASESS --- */
    .rsvp-section {
        position: relative; 
        z-index: 1; 
        text-align: center;
        color: var(--color-accent);
    }
    .rsvp-overlay-pull-up{ margin-top: -20%; }
    .rsvp-overlay {
        padding: 20% 5% 15% 5%;
        justify-content: flex-start;
    }
    .pases-container {
        position: relative; 
        width: 100%;
        z-index: 10;
    }

    .tickets-icon {
        width: clamp(20px, 8vw, 55px);
        margin: 0 auto 4% auto;
    }

    .pases-title {
        font-family: var(--font-script);
        font-size: clamp(1rem, 7vw, 3.5rem);
        font-weight: 400;
        margin-bottom: -1%;
        line-height: 1;
    }

    .pases-subtitle {
        font-family: var(--font-serif);
        font-size: clamp(.8rem, 2.5vw, 1.5rem);
        margin-bottom: 3%;
    }

    .lugares-wrapper {
        position: relative;
        max-width: 60%;
        margin: -3% auto 0 auto;
    }
    .lugares-img { margin-left: 2.4%; }

    .tickets-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--font-serif);
        font-size: clamp(1.3rem, 5vw, 2.5rem);
        color: var(--color-accent);
        font-weight: 600;
    }

    .adults-text {
        font-family: var(--font-script);
        font-size: clamp(1rem, 2.8vw, 1.7rem);
        margin-top: 2%;
    }

    .envelope-container {
        position: relative;
        max-width: 60%;
        margin: 5% auto;
    }

    .envelope-content {
        position: absolute;
        top: 12%; 
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: var(--color-light); 
    }

    .confirm-btn-link {
        width: 45%;
        margin-top: 35%;
        margin-left: 4%;
        display: inline-block;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .confirm-btn-link:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }
/* ----- END OF SECTION 5 ---- */
/* --------------------------- */
/* -- --- SECTION 6: FINAL PHOTO --- */
    .final-section {
        position: relative; 
        z-index: 2; 
        text-align: center;
        color: var(--color-accent);
        line-height: 0; 
        font-size: 0;
    }
    .finalus-img {
        width: 100%;
        position: relative;
        margin-top: -20%; 
        z-index: 2;
    } 
/* ----- END OF SECTION 6 ---- */
/* --------------------------- */



/* ========================================= */
/* --- 6. MEDIA QUERIES (Mobile) --- */
/* ========================================= */
@media (max-width: 820px) {

    /* --- 1. OVERLAY SAFE ZONES --- */
    /* Mobile text stacks taller, so we need slightly larger top/bottom padding 
       to keep everything inside the paper and green backgrounds. */
    .intro-pull-up { margin-top: -38%; }
    .intro-overlay { padding: 36% 5% 20% 5%; }
    .events-overlay { padding: 20% 5% 10% 5%; }
    .rsvp-overlay { padding: 15% 5% 15% 5%; }
    .date-text {
        position: relative; 
        width: 100%; 
        text-align: center;
        z-index: 10;
        margin-top: 7%;
    }
    .main-text { 
        margin-top: -5%;
        position: relative; 
    }
    .serif-subtitle { /* --- Nos casamos--- */
        font-family: var(--font-serif);
        font-size: clamp(1.7rem, 6vw, 3rem);
        white-space: nowrap;
        font-weight: 400;
        text-align: center;
        position: relative; 
        z-index: 10;
    }
    .script-title { /* --- Ricardo y Zafiro--- */
        font-family: var(--font-script);
        font-size: clamp(2.6rem, 8.5vw, 5rem);
        white-space: nowrap;
        font-weight: 400;
        text-align: center;
        position: relative;
        z-index: 10;
        margin-top: -1%;
    }
    /* --- 2. MUSIC PLAYER --- */
    /* Widens the progress bar so it is easier to tap with a finger */
    .progress-bar-container {
        max-width: 75%;
        padding: 0 10px;
    }
    .player-title { 
        font-size: clamp(.5rem, 3.4vw, 1.5rem);
        font-weight: 500;
        margin-bottom: 0px;
    }
    .top-invitation-text { /* --- Con la bendicion... --- */
        font-family: var(--font-serif);
        font-size: clamp(0.8rem, 3vw, 2em);
        color: var(--color-light); 
        font-style: italic;
        margin-top: 8%;
        line-height: 1.4;
        white-space: nowrap;
    } /* --- 3. COUNTDOWN TIMER --- */
    /* Lowers the minimum font-size floor so the timer doesn't break onto two lines */
    .countdown-timer {
        font-size: clamp(2rem, 10vw, 4rem);
    }
    .countdown-container {
        margin-top: 55%; /* Pulls the timer up slightly */
    }
    .time-block .label {
        margin-top: -25%; /* Re-aligns the "Dias/Horas" labels to the smaller numbers */
    }
    .faltan-title {
        font-size: clamp(1rem, 4vw, 2rem);
        margin-bottom: -5%;
    }
    /* --- 4. EVENTS SECTION --- */
    .events-container {
        position: relative; 
        width: 100%;
        z-index: 10;
        margin-top: 0%;
    }
    .event-item {
        margin-bottom: 10%; /* Adds breathing room between locations */
    }
    .event-text-block {
        text-align: center;
        padding: 0 20px;
        margin-bottom: 10px;
    }
    .event-title {
        font-family: var(--font-script);
        font-size: clamp(1.5rem, 10vw, 4rem);
        font-weight: 400;
        line-height: 1.1;
    }
    .event-time {
        font-family: var(--font-serif);
        font-size: clamp(1.2rem, 7vw, 3.5rem);
        margin-top: -2.5%;
    }
    .event-location {
        font-family: var(--font-serif);
        font-size: clamp(1rem, 4.5vw, 3rem);
        margin-top: -2.5%;
        letter-spacing: -0.02em; 
    }
    .location-btn-img {
        width: clamp(100px, 33vw, 300px); /* Increases relative size for readability */
       margin: -1% -5% 0 auto; /* Pulls the button closer to the text */
    }
    /* --- 5. DETAILS COLLAGE --- */
    .details-text {
        margin-top: 25%;
    }
    .program { max-width: 60%; margin-right: -3%; margin-top: -5%; }
    .dress { max-width: 60%; margin-left: -5%; margin-top: -85%; }
    .gifts { max-width: 60%; margin-right: -5%; margin-top: -45%; }
    
    .outfit-btn-link, .gifts-btn-link {
        width: 50%; /* Larger tap targets for Amazon/Pinterest links */
        bottom: 7.5%; 
    }

    /* --- 6. RSVP & PASES --- */
    .pases-container {
        margin-top: 6%;
    }
    .lugares-wrapper {
        max-width: 50%; /* Makes the "Lugares" box larger */
    }
    .envelope-container {
        max-width: 60%; /* Expands the envelope */;
        margin: 6% auto;
    }
    .confirm-btn-link {
        width: 55%; /* Enlarges the RSVP button */
        margin-top: 33%; /* Centers the button inside the resized envelope */
    }
}