/*   ?name=FAMILIA%20RESENDIZ%20GALLARDO&pl=3&ado=0&ni=0&di=68ed14f49a74b&hjs=6d3f7y2zuhsd
    Tipografias:
       - juliusFont
       - newYorkFont
       - shellineFont
       - garamondFont
       - cinzelFont
       - brittanyFont
    
    */
    @font-face{
        font-family: "adeliaFont";
        src:url('../Fuentes/adelia.ttf') format('truetype');
    } 
    @font-face{
        font-family: "AmaticBoldFont";
        src:url('../Fuentes/AmaticBold.ttf') format('truetype');
    } 
    @font-face{
        font-family: "AmsterdamFont";
        src:url('../Fuentes/Amsterdam.ttf') format('truetype');
    }
    @font-face{
        font-family: "ancientGreeceFont";
        src:url('../Fuentes/ancientGreece.otf') format('truetype');
    }
    @font-face{
        font-family: "BigillaFont";
        src:url('../Fuentes/Bigilla.otf') format('truetype');
    }
    @font-face{
        font-family: "BORCHAFont";
        src:url('../Fuentes/BORCHA.otf') format('truetype');
    }
    @font-face{
        font-family: "BrittanySignatureFont";
        src:url('../Fuentes/BrittanySignature.ttf') format('truetype');
    }
    @font-face{
        font-family: "ChickenPieFont";
        src:url('../Fuentes/ChickenPie.otf') format('truetype');
    }
    @font-face{
        font-family: "cinzelRegularFont";
        src:url('../Fuentes/cinzelRegular.ttf') format('truetype');
    }
    @font-face{
        font-family: "FernstadFont";
        src:url('../Fuentes/Fernstad.otf') format('truetype');
    }
    @font-face{
        font-family: "JelloChlourFont";
        src:url('../Fuentes/JelloChlour.otf') format('truetype');
    }
    @font-face{
        font-family: "MilkyWalkyFont";
        src:url('../Fuentes/MilkyWalky.otf') format('truetype');
    }
    @font-face{
        font-family: "MinionCyrillicFont";
        src:url('../Fuentes/MinionCyrillic.otf') format('truetype');
    }
    @font-face{
        font-family: "NorthCarosselaFont";
        src:url('../Fuentes/NorthCarossela.otf') format('truetype');
    }
    @font-face{
        font-family: "PinyonScriptFont";
        src:url('../Fuentes/PinyonScript.ttf') format('truetype');
    }
    @font-face{
        font-family: "PoppinsRegularFont";
        src:url('../Fuentes/PoppinsRegular.ttf') format('truetype');
    }
    @font-face{
        font-family: "RanteMarioFont";
        src:url('../Fuentes/RanteMario.ttf') format('truetype');
    }
    @font-face{
        font-family: "SacramentoFont";
        src:url('../Fuentes/Sacramento.ttf') format('truetype');
    }
    @font-face{
        font-family: "StarsightFont";
        src:url('../Fuentes/Starsight.otf') format('truetype');
    }
    @font-face{
        font-family: "SwilyBrightFont";
        src:url('../Fuentes/SwilyBright.otf') format('truetype');
    }
    @font-face{
        font-family: "ElegantFont";
        src:url('../Fuentes/Elegant.ttf') format('truetype');
    }

:root {


    --colorbackground: #f9f1ec;
    --color-titulos: #000000;
    --visibilidad-musica: block;
    --border-radius-section: 12px;

    /* Section 1 [Introducción] */
        /*celular*/
        --introLogoPossCelFomTOP: 13%; /*Posición desde la parte superior*/
        --introLogoSizeCel: 60%;
        --introLogoLeftCel: 15%; /*= (100-introLogoSizeCel)/2 */
        --introLogoShadowCel: 0.1; 
        /*Computadora*/
        --introLogoPossPcFomTOP: 50%;
        --introLogoSizePc: 10%;
        --introLogoLeftPc: 45%; /*= (100-introLogoSizeCel)/2 */
        --introLogoShadowPc: 0.4; 
        /*Boton*/
        --introBotonColor: white;
        --introBotonTxtColor: #2e2117;


    /* ---- Color del "Gran Día" ---- */
    --tmlColor: #5f4a39; /*Define Color of Line, circle and text*/
    --tmlCircColor: #5f4a39;/*Define Color of circles*/
    --color-bg-btn: #66021e; /*Define el Color de los Botones*/
    --colorTMLtxt: rgb(106, 77, 55); /*Color del texto en el TimeLine*/
    
    /* Generales  textNormal*/            
    --fuente1: "josefineFont";
    --fuente2: 'cinzelFont';
    --fuente3: 'newYorkFont';
    --fuente4: 'britanyFont';
    --fontColor: #5f4a39;

    /*Color Botones*/
    --colorBotones: #66021e;
    --botonFontThinckness: 300;
    /*Color Boton intro*/
    --colorBotonIntro: hsla(0, 0%, 100%, 0.95);
    
    
    --color-bg-btn-hover: rgb(255, 253, 231);

    

    /* Section 2 [Introducción] */
        /*celular*/
        --sec2LogoPossCelFomTOP: 15%; /*Posición desde la parte superior*/
        --sec2LogoSizeCel: 60%;
        --sec2LogoShadowCel: 0.1; 
        /*Computadora*/
        --sec2LogoPossPcFomTOP: 50%;
        --sec2LogoSizePc: 75%;
        --sec2LogoLeftPc: 45%; /*= (100-introLogoSizeCel)/2 */
        --sec2LogoShadowPc: 0.0; 
    
    /*Section 4*/
        /*Celular*/
        --fontAyC: 'cinzelRegularFont';
        --fontB: 'ElegantFont';
        --fontsizeSTD1-2: 80px;
        --fontsizeSTD2-3: 105px;
        --colorDate: #a0735d;
        --duistSTDDist1-2: -15px;
        --duistSTDDist2-3: -15px;
        --spaceFromPhrase: +35px;
        --colorCountDown: #2e2117;

        /*Section Ubicaciones*/
        --fontSize-namePlaces: 20px;
        --circulo-titleFontSizeDatosPlaces: 12px;

        /*Flip Cards*/
        --colorRegalos: #a0735d;
        --colorHospedaje: #aa987b;        
        --colorVestimenta: #66021e;
        --colorAlbumFOtos: #9E0148;




  }
    
    
   
    

    * {
        box-sizing: border-box;
    }
 
    body {
        margin: 0;
    }
    body,html {
        height: 100%
    }   

    /* Animations FadeIN UP [6]*/
    .fadeInUP{
        background-image: url('/Icons/IconsMo/Brindis.png');
        -webkit-animation: fadeInUP 1.2s both; -webkit-animation-delay: 0.5s; 
        -moz-animation: fadeInUP 1.2s both;    -moz-animation-delay: 0.5s;
        -o-animation: fadeInUP 1.2s both;      -o-animation-delay: 0.5s;
        animation: fadeInUP 1.2s both;         animation-delay: 0.5s;
    }
    @-webkit-keyframes fadeInUP{
        0%  {opacity: 0;-webkit-transform: translateY(-50px);}
        100%{opacity: 1;-webkit-transform: translateY(0px);}
    }
    @-moz-keyframes fadeInUP{
        0%  {opacity: 0;-moz-transform: translateY(-50px);}
        100%{opacity: 1;-moz-transform: translateY(0px);}
    }
    @-o-keyframes fadeInUP{
        0%  {opacity: 0;-o-transform: translateY(-50px);}
        100%{opacity: 1;-o-transform: translateY(0px);}
    }
    @keyframes fadeInUP{
        0%  {opacity: 0;transform: translateY(-50px);}
        100%{opacity: 1;transform: translateY(0px);}
    }

    .fadeInUPBtn{
        background-image: url('/Icons/IconsMo/Brindis.png');
        -webkit-animation: fadeInUPBtn 1.2s both; -webkit-animation-delay: 1.0s; 
        -moz-animation: fadeInUPBtn 1.2s both;    -moz-animation-delay: 1.0s;
        -o-animation: fadeInUPBtn 1.2s both;      -o-animation-delay: 1.0s;
        animation: fadeInUPBtn 1.2s both;         animation-delay: 1.0s;
    }
    @-webkit-keyframes fadeInUPBtn{
        0%  {opacity: 0;-webkit-transform: translateY(50px);}
        100%{opacity: 1;-webkit-transform: translateY(0px);}
    }
    @-moz-keyframes fadeInUPBtn{
        0%  {opacity: 0;-moz-transform: translateY(50px);}
        100%{opacity: 1;-moz-transform: translateY(0px);}
    }
    @-o-keyframes fadeInUPBtn{
        0%  {opacity: 0;-o-transform: translateY(50px);}
        100%{opacity: 1;-o-transform: translateY(0px);}
    }
    @keyframes fadeInUPBtn{
        0%  {opacity: 0;transform: translateY(50px);}
        100%{opacity: 1;transform: translateY(0px);}
    }



    /* ---------- BOTÓN MÚSICA ---------- */
    .btn-musica div {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBkPSdNMyA5djZoNGw1IDVWNEw3IDlIM3ptMTMuNSAzYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2OC4wNWMxLjQ4LS43MyAyLjUtMi4yNSAyLjUtNC4wMnpNMTQgMy4yM3YyLjA2YzIuODkuODYgNSAzLjU0IDUgNi43MXMtMi4xMSA1Ljg1LTUgNi43MXYyLjA2YzQuMDEtLjkxIDctNC40OSA3LTguNzdzLTIuOTktNy44Ni03LTguNzd6Jy8+PHBhdGggZD0nTTAgMGgyNHYyNEgweicgZmlsbD0nbm9uZScvPjwvc3ZnPg==)
    }

    button.pausa div {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBkPSdNMTYuNSAxMmMwLTEuNzctMS4wMi0zLjI5LTIuNS00LjAzdjIuMjFsMi40NSAyLjQ1Yy4wMy0uMi4wNS0uNDEuMDUtLjYzem0yLjUgMGMwIC45NC0uMiAxLjgyLS41NCAyLjY0bDEuNTEgMS41MUMyMC42MyAxNC45MSAyMSAxMy41IDIxIDEyYzAtNC4yOC0yLjk5LTcuODYtNy04Ljc3djIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxek00LjI3IDNMMyA0LjI3IDcuNzMgOUgzdjZoNGw1IDV2LTYuNzNsNC4yNSA0LjI1Yy0uNjcuNTItMS40Mi45My0yLjI1IDEuMTh2Mi4wNmMxLjM4LS4zMSAyLjYzLS45NSAzLjY5LTEuODFMMTkuNzMgMjEgMjEgMTkuNzNsLTktOUw0LjI3IDN6TTEyIDRMOS45MSA2LjA5IDEyIDguMThWNHonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+)
    }

    .btn-musica {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        display: var(--visibilidad-musica);
        background: #fff;
        border: 1px solid #f2f2f2;
        border-radius: 32px;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
        z-index: 10000;
        overflow: hidden;
        cursor: pointer;
        transition: width .6s ease-in-out;
    }
    /* Icon Wrapper */
    .btn-musica i {
        position: absolute;
        right: 0;
        top: 0;
        width: 48px;
        height: 100%;
    }

    /* SVG Icon inside */
    .btn-musica i div {
        opacity: .65;
        position: absolute;
        left: 11px;
        top: 12px;
        width: 26px;
        height: 26px;
    }

    .titlesGrl{
        font-family: 'newYorkFont';
        font-size: var(--fontSize-SaveTheDate);
        text-align: center;
    } 

    /* ---------- FIN BOTÓN MÚSICA ---------- */


    /*Footer*/
    footer {
        text-align: center;
        width: 100%;
        padding: 20px 0;
        border-top: 1px solid #f7f7f7;
        background: #fbfbfb
    }

    footer img {
        width: 164px;
        margin-right: 10px;
        vertical-align: middle;
        max-width: 90%
    }

    footer a {
        font-size: 28px;
        text-decoration: none
    }
    /*Fin Footer*/






.owl-carousel .owl-item img {
    position: relative;
    z-index: 2
}

.owl-stage-outer {
    padding: 5px 0
}

.owl-item {
    transition: .6s ease-out 100ms
}

.owl-dots {
    text-align: center;
    margin-top: 24px;
    opacity: .8
}

.owl-dot {
    background: #ccc;
    display: inline-block;
    width: 38px;
    height: 6px;
    border-radius: 3px;
    margin: 0 5px;
    position: relative
}

.owl-dot.active {
    background: #666;
    width: 38px
}



@media(max-width: 640px) {

    /*GENERAL*/

    .event-hra {
        border: 1px solid var(--colorBotones);
        color: var(--colorBotones);
        border-radius: 10px;
        width: 114px;
        font-size: 20px;
        padding: 10px;
        display: inline-block;
        font-weight: 600;
        vertical-align: middle;
        font-family: var(--fuente-titulos);
    }

    .event-btn {
        margin-top: 26px
    }

    /* Botón General */
    .btn-grl {
        font-family: var(--fuente1);
        font-style: normal;
        font-size: 20px;
        background: var(--colorBotones);
        padding: 10px 10px;
        border-radius: 10px;
        text-decoration: none;
        margin: 0 4px;
        font-weight: 200;
        text-align: center;
        color: white;
        border: none;
    }

    h1,h2,h3 {
    text-align: center
    }

    h2 {
        font-size: 30px;
        margin-bottom: 20px
    }

    .right{
        position: absolute;
        right: 0; /* Position at the left of the container */
    }

    .left{
        position: absolute;
        left: 0;
    }
    .top{
        position: absolute;
        top: 0;
    }
    .bottom{
        position: absolute;
        bottom: 0;
    }

    .floralDecorSmall{
        width: 180px;
        height: auto;
    }

    .floralDecorMed{
        width: 260px;
        height: auto;
    }

    .floralDecorBig{
        width: 350px;
        height: auto;
    }

     /*scroll*/
    .scroll-down {
        
        z-index: 10; /* Ensure it stays on top */
        
        animation: fadeIn 2s forwards, bounce 1.5s infinite 2s; /* Combine fade-in and bounce */
    }
    
    /* Style the image */
    .scroll-icon {
        
        height: 100%;
    }
    
    /* Fade-in effect */
    @keyframes fadeIn {
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1;
        }
    }
    
    /* Bounce effect */
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        }
        40% {
        transform: translateY(-10px);
        }
        60% {
        transform: translateY(-5px);
        }
    }

    /*Seccion 1 Modal Bienvenida Logo y Boton Inicio*/
    .modal-bienvenida {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10000000;
        background-position: left center;
    } 
    .btnIntro
    {
        position: absolute;
        bottom: 15%; 
        margin-left: -40px; 
        background-color: var(--introBotonColor); 
        color: var(--introBotonTxtColor);
        font-family: var(--fuente1);
        letter-spacing: 3px;
    }
    /*Fin Modal Bienvenida*/
    .main-container {
        position: relative;
        overflow: hidden
    } 
    .introA {
        text-align: center;
        background-image: url(../Media/Ims/FOTOSRECORTADAS/FOTO_UNO.webp);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;        
        min-height: 100vh;
        width: 102%;
        padding: 100px 0;
        position: relative;
        height: auto;        
        background-position: center top;
    }
    /*Sección 1 Intro*/
   
    .intro { /*Fondo*/
        background-position: var(--portada-pos-small);
        background-image: url(../Media/Ims/FOTOSRECORTADAS/FOTO_DOS.webp);
        text-align: center;
        background-size: cover;
        position: relative;
        min-height: 100vh;
    }
    .introLogo {
        position: absolute;
        width: var(--introLogoSizeCel);
        left: var(--introLogoLeftCel); 
        top: var(--introLogoPossCelFomTOP);      
        filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, var(--introLogoShadowCel))) 
          drop-shadow(-2px -2px 5px rgba(0, 0, 0, var(--introLogoShadowCel)));
    }
    .introLogo1 { /*Logotipo*/
        width: var(--sec2LogoSizeCel);
        margin-top: var(--sec2LogoPossCelFomTOP);
        margin-left:-0px;
        filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, var(--sec2LogoShadowCel))) 
          drop-shadow(-2px -2px 5px rgba(0, 0, 0, var(--sec2LogoShadowCel)));
    }

    .intro 
    {
        position: relative;
        width: 102%;
        height: 100vh;
        margin: 0 auto; /* centra horizontalmente */
        background-image: url("../Media/Ims/FOTOSRECORTADAS/FOTO_DOS.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        border-radius: 12px; /* opcional, solo si quieres bordes suaves */
        overflow: hidden;    /* asegura que nada sobresalga */
    }



    /*Fin Sección 1 Intro*/
    /*-------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*Seccion 2 Papas-Padrinos*/
    .imBackgroundContainer{
        position: relative;
        width: 70%;        /* o 80% */
        margin: 0 auto;    /* centra el contenedor */
        display: block;    /* <-- en vez de inline-block */
        text-align: center;/* centra el texto interno */
        padding-bottom: 10px;
    }
    .content {
        background: transparent;
        padding: 15px;
        border-radius: 3px;
        text-align: center;
      }

    .fontTitle{
        font-family: 'cinzelRegularFont';
        font-style: normal;
        font-weight: 500;
        font-size:16px;
        color: var(--fontColor);
    }
    .fontNames{
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 17px;
        font-weight: 500;
        line-height: 22px;
        color: var(--fontColor);
    }
    .fontNuestraBoda{
        font-family: 'ElegantFont';
        font-style: normal;
        font-size: 60px;
        font-weight: 600;
        color: #a0735d;
        line-height: 45px;
    }
    /*Fin Seccion 2*/

    /*Secc 3*/
    .regularSection {
        position: relative;
        display: flex;
        flex-direction: column; /* Uno debajo del otro */
        align-items: center;    /* Centro horizontal */
        margin-top: 25px;
    }
    .save-the-date-section > div 
    {
        width: 70%;
        max-width: 500px;
        text-align: center;
        margin: 0 auto 0px auto; /* centrado + separación entre bloques */
    }

    .rect {
        width: 80%;
        max-width: 500px; /* Opcional para que no crezca demasiado en pantallas grandes */
        height: 660px;
        border-radius: 20px; /* Ajusta a tu gusto */
        overflow: hidden; /* Para que la imagen respete el borde redondeado */
        display: flex;
        
        justify-content: center;
        align-items: center;
    }

    .rect img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Mantiene proporción y llena el área */
        border-radius: 20px; /* Extra seguridad */
        margin-bottom: 10px;
    } 
    
    .saveTDtxt{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* Uno debajo del otro */
    }

    .large 
    {
        font-size: var(--fontsizeSTD1-2); /* Large font size for "SAVE" */
        display: block; /* Make it a block to take full width */
        font-family: var(--fontAyC);
        font-weight: 100;
        color: var(--colorDate);
    }
    .medium 
    {
        font-size: var(--fontsizeSTD2-3);/*95px; /* Smaller font size for "the" */
        display: inline-block; /* Inline block for smaller width */
        position: relative; /* Relative positioning for fine-tuning */
        top: var(--duistSTDDist1-2);/*-15px; /* Adjust vertical position to overlap slightly */
        font-family: var(--fontB);
        font-weight: 500;
        margin-bottom: var(--duistSTDDist2-3);/*-25px;*/
        color: var(--colorDate);
    }
    .small 
    {
        font-size: var(--fontsizeSTD1-2);/*80px; /* Smaller than "SAVE" but larger than "the" */
        display: block; /* Block to take full width and provide spacing */
        font-family: var(--fontAyC);
        font-weight: 100;
        margin-bottom: var(--spaceFromPhrase);
        color: var(--colorDate);
    }
    .saveTheDateFrase 
    {
        font-family: var(--fuente1);
        font-size: 18px;
        font-style: normal;
        line-height: 26px;
        width: 60%;
        color: var(--fontColor);
        text-align: center;
        margin-left: 0;
    }
    .decCentral {
        width: 90%;
        max-width: 500px; /* Ajustable */
        margin-bottom: 20px;
    }

    .saveTheDateH2 {
        font-family: var(--fuente-titulos);
        font-size: var(--fontSize-SaveTheDate);
    }
    .saveTheDateH3 {
        font-family: 'ElegantFont';
        font-style: normal;
        font-size: 70px;
        margin-bottom: 25px;
        margin-top: 15px;
        color: var(--colorDate);
    }
    .saveTheDateNamePlaces{
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-weight: 200;
        font-size: 20px;
        color: var(--colorDate);
    }
    .saveTheDateDatosPlaces{
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-weight: 100;
        line-height: 18px;
        font-size: 15px;
        color: var(--colorDate);
    }

    .event-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 10px; /* separación entre hora y botón */
        width: 100%;
    }

    /* Count Down */
    .countdown-header,
    .countdown, .centerDatos {
        position: relative;
        left: 0;
        transform: none;
        width: 70%;
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        z-index: 2;
        color: var(--fontColor);
    }

    /* Título */
    .countdown-header {
        font-size: 40px;
        font-family: 'adeliaFont';
        font-style: normal;
        margin-top: 60px;
        margin-bottom: 40px;
    }

    /* Contenedor de tiempos */
    .countdown {
        display: flex;
        justify-content: center;
        gap: 50px;
        margin: 0 auto 00px auto;
        width: 100%;
        max-width: 500px;
        color: var(--fontColor);
    }

    /* Cada bloque de tiempo */
    .time-section {
        text-align: center;
        font-family: var(--fuente1);
        font-size: 17px;
    }

    /* Número grande */
    .time-section div {
        font-size: 2em;
        font-weight: 600;
    }

    /* Etiqueta */
    .time-section span {
        font-size: 1.0em;
    }
    /*Fin Secc 3*/

    /*Secc 4 TimeLine*/
    :root {
        --tml-line-w: 3px;              /* grosor de la línea */
        --tml-line-x: -16px;             /* posición de la LÍNEA medida al CENTRO desde el borde izquierdo del timeline */
        --tml-dot-size: 18px;           /* diámetro total del punto (incluye border si lo usas) */
    }

    /* ---------- Título ---------- */
    .TMPtitle {
        margin: 40px 0 50px;
        font-family: 'ElegantFont';
        font-size: 70px;
        font-weight: 400;
        color: var(--colorDate);
        text-align: center;
    }

    /* ---------- Contenedor timeline ---------- */
    .TMLtimeline {
        position: relative;
        width: 80%;
        max-width: 600px;
        margin: 40px auto;
        padding: 50px 20px;
        background: transparent;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Línea vertical (centrada según --tml-line-x) */
    .TMLtimeline::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        /* Coloca el BORDE izquierdo de la línea restando la mitad del grosor */
        left: calc(var(--tml-line-x) - (var(--tml-line-w) / 2));
        width: var(--tml-line-w);
        background-color: var(--colorDate);
    }

    /* ---------- Ítems ---------- */
    .TMLcontainer {
        position: relative;
        width: 100%;
        padding: 20px 20px;
    }

    /* Punto sobre la línea (centrado exacto sobre --tml-line-x) */
    .TMLcontainer::after {
        content: '';
        position: absolute;
        top: 75px; /* ajusta si cambias alturas internas */
        width: var(--tml-dot-size);
        height: var(--tml-dot-size);
        border-radius: 50%;
        background-color: var(--colorDate);
        /* Si quieres aro: descomenta el borde y cambia el fill arriba a 'transparent' */
        /* border: 4px solid var(--tmlColor); background-color: transparent; */

        /* Centro del punto en el eje X de la línea */
        left: -45px;
        z-index: 1;
    }

    .TMLcontent {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px;
        border-radius: 6px;
    }

    /* ---------- Íconos con MASK (color por background-color) ---------- */
    .TMLicon {
        width: 80px;         
        height: 80px;
        display: inline-block;
        margin: 10px;
        background-color: var(--tmlColor);
        -webkit-mask-image: var(--icon-mask);
        mask-image: var(--icon-mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
    }
    /* ---------- Tipografías del bloque ---------- */
    .TimelineTitle {
        margin-top: 10px;
        font-family: var(--fuente1);
        font-weight: 600;
        font-size: 20px;
        color: var(--colorTMLtxt);
    }

    .TimelineTxt {
        margin-top: -15px;
        font-family: var(--fuente1);
        font-size: 15px;
        font-weight: 300;
        color: var(--colorTMLtxt);
    }
    /*Fin Secc4*/

    /*Secc 5 (Im + Frase)*/
    .propuestaText h3 {
        padding: 30px 10px 40px;
        font-size: 15px;
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        line-height: 21px;
        color: var(--fontColor);
    }
    /*Fin Secc5*/

    /*Secc 6 Galeria*/
    .galeria2 {
        background-size: cover;
        min-height: 450px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 650px;
        overflow: hidden;
        margin-bottom: 50px;
    }
    .galeria2 .animated{
        animation-duration: 100ms;
    }

    .galeria2 .owl-item:nth-child(odd) {
        margin-top: 30px;
        transform: rotate(12deg)
    }

    .galeria2 .owl-item:nth-child(even) {
        transform: rotate(-12deg)
    }

    .galeria2 .owl-item:nth-child(3n+4) {
        margin-top: 6px;
        transform: rotate(-6deg)
    }

    .galeria2 .owl-stage {
        padding: 70px
    }

    .galeria2 .owl-item:hover {
        z-index: 10000;
        transform: scale(1.4) rotate(0)
    }

    .galeria2 .owl-item:hover .item {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.603)
    }

    .galeria2 .item {
        position: relative;
        max-width: 582px;
        max-height: auto;
        z-index: 1000;
        overflow: hidden;
        border: 3px solid #ffffff;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.3)
    }

    /*Fin Secc6*/
    .imBackgroundAdditionalImage { /*Logo Hand Click*/
        position: absolute;
        bottom: 7px; /* Position at the bottom of the container */
        right: 7px; /* Position at the right of the container */
        width: 30px; /* Adjust size as needed */
        height: auto;
    }

    /*Main Image*/
    
   

    .event-container {
        display: block
    }

    .event-wrap {
        width: 70%;
        margin-left: 15%;
        padding: 24px 0;
        margin-top: -50px;
    }

    .event-btn .btn-grl,.event-btn .event-hra {
        display: inline-block;
        margin: 0 4px;
        width: 124px;
        margin-top: 13px;
        font-size: 15px;
    }

    .ceremonia-wrap-names {
        border: 5px solid;
        position: relative;
        vertical-align: top;
        
        transform: translate(0, -50%);
        padding: 10px;
    }

    .ceremonia-wrap {
        border-right: none;
        
    }

    div.mdl-2 {
        width: 100%;
        margin-bottom: 10px
    }

    


    .reservacion-section {
        background: transparent;
        margin-top: 68px;
    }

    .form-reservacion {
        position: relative;
        padding: 34px 40px;
        width: 90%;
        max-width: 880px;
        border: #e2e2e2 1px solid;
        background: #fff;
        margin: 0 auto;
        box-shadow: 0 0 50px 5px rgba(0,0,0,.05);
        border-radius: var(--border-radius-section);
        overflow: hidden
    }

    .form-reservacion .btn-grl {
        width: 100%;
        z-index: 10000;
    }

    .form-reservacion .row {
        margin: 15px 0
    }

    .form-reservacion input,.form-reservacion select {
        border: 1px solid #e2e2e2;
        width: 100%;
        height: 42px;
        padding: 0 24px;
        font-size: 20px;
        margin-top: 8px;
        transition: .18s ease-in all;
        box-shadow: 0 0 12px rgba(156,156,156,.14);
        background: #fff;
        border-radius: 2px;
        font-size: 16px;
        font-family: 'garamondFont';
        font-size: 16px;
        
    }

    .form-reservacion select,.form-reservacion input,.form-reservacion textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -ms-appearance: none
    }

    .form-reservacion select {
        font-family: 'garamondFont';
        font-size: 13px;
    }

    .titlesGrl_ConfAsistencia{
        font-family: 'cinzelRegularFont';
        font-size: 20px;
        text-align: center;
        color: var(--fontColor);
    }
    
    /* Flip card container */
    .flp-Card-container {
        width: 80%; /* 80% width */
        height: 350px; /* 60vh height */
        perspective: 1000px; /* Create 3D space */
        margin: 0 auto;
        cursor: pointer;
        border-radius: 20px; /* Ajusta a tu gusto */
    }

    /* Flip card front and back */
    .flp-Card-front{
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden; /* Hide the back when facing front */
        border-radius: 10px;
        overflow: hidden; /* Ensures consistent borders */
        padding: 0; /* Remove any default padding */
        box-sizing: border-box; /* Include padding in width and height */
    }

    /* Front side styling */
    .flp-Card-front {
        height: 350px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; /* Ensures no repeat */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Flip effect */
    .flp-Card-container.flipped .flp-Card-inner {
        transform: rotateY(180deg);
    }

       
    .noNiñosMsg{
        font-family: var(--fuente1);
        font-size: 17px;
        width: 100%;
        text-align: center;
        position: relative;
        padding: 34px 40px;

    }


    /*MODAL Containers*/
    .modal-container {
        background: white;
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 1000000;
        display: none;
        overflow: scroll;
        top: 0;
        left: 0
    }

    .modal-wrap {
        width: 90%;
        left: 5%;
        position: absolute;
        
        padding: 20px;
        height: 100vh;
        text-align: center;
    }

    .modal-container {
        z-index: 10;
        
        position: fixed
    }

    .cerrar-modal {
        width: 32px;
        height: 32px;
        position: fixed;
        right: 20px;
        border-radius: 32px;
        top: 30px;
        z-index: 1000;
        background-color: var(--modal-bg);
        background-size: cover;
        background-image: url(../Media/Ims/Iconos/cerrar-btn-modal.svg)
    }

    /* Hotels*/
    .htl-hotel-container {
        width: 100%;  /* Allows container to be flexible */
        padding-top: 50px;
        margin: auto;
        text-align: center;
    }
    .htl-hotel-container h1{
        font-family: 'cinzelRegularFont';
        font-style: normal;
        font-size: 30px;
        margin-bottom: 20px;
        margin-bottom: 45px;
        color: var(--fontColor);
    }
    .htl-hotel-item {
        background: #ffffff;
        
        padding: 15px;
        margin-bottom: 10px;
    }

    .htl-hotel-item img {
        max-width: 100%;  /* Responsive image sizing */
        height: auto;
        margin-bottom: 15px;
    }

    .htl-hotel-info{
        margin-bottom: 25px;
    }

    .htl-hotel-info h2 {
        margin-top: 15px;
        margin: 5px 0;
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 23px;
        font-weight: 600;
        margin-bottom: 15px;
        color: var(--fontColor);
    }

    .htl-hotel-info p {
        
        color: var(--fontColor);
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 17px;
        line-height: 17px;
        margin-bottom: 30px;
    }

    .htl-hotel-link {
        
        background-color: var(--colorBotones);
        color: white;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
    }

    .htl-hotel-link:hover {
        background-color: var(--colorBotones);
    }
    /*Hotels*/

    /*gifts */
    .gft-gifts-container {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .gft-gifts-container h1{
        font-family: 'cinzelRegularFont';
        font-style: normal;
        font-size: 30px;
        margin-bottom: 20px;
        margin-bottom: 45px;
        color: var(--fontColor);
    }
    .gft-gifts-container p{
        font-family: 'josefineFont';
        font-style: normal;
        font-size: 18px;
        margin-bottom: 20px;
        
        color: var(--fontColor);
    }
    .gft-gifts-containerH3{
        font-family: 'josefineFont';
        font-style: normal;
        font-size: 18px;
        margin-bottom: 20px;
        
        color: var(--fontColor);
    }
    .gft-gift {
        margin-bottom: 20px;
    }

    .gft-gift img {
        width: 100%;
        height: 80px;
        width: auto;
        margin-bottom: 10px;
    }

    .gft-description h2, .gft-description p {
        margin: 10px 0;
    }

    .gft-button:hover {
        background-color: #f0f0f0;
    }

    .gft-description{
        margin-bottom: 25px;
    }

    .gft-description h2 {
        margin: 5px 0;
        font-family: 'PoppinsRegularFont';
        font-style: normal;
        font-size: 23px;
        font-weight: 600;
        color: var(--fontColor);
    }

    .gft-description p {
        
        color: var(--fontColor);
        font-family: 'josefineFont';
        font-style: normal;
        font-size: 17px;
        line-height: 17px;
        margin-bottom: 25px;
    }

    hr {
        border: none;
        height: 1px;
        background-color: #ccc;
        margin: 20px 0;
    }
    .gft-gifts-container {
        width: 100%;
    }

    /*Fin Gifts*/
}

@media(max-width: 380px) {

    .imBackgroundContainer{
        position: relative;
        width: 70%;        /* o 80% */
        margin: 0 auto;    /* centra el contenedor */
        display: block;    /* <-- en vez de inline-block */
        text-align: center;/* centra el texto interno */
        padding-bottom: 10px;
    }
}


@media(max-width: 350px) {
    .imBackgroundContainer{
        position: relative;
        width: 70%;        /* o 80% */
        margin: 0 auto;    /* centra el contenedor */
        display: block;    /* <-- en vez de inline-block */
        text-align: center;/* centra el texto interno */
        padding-bottom: 10px;
    }
}

@media(max-width: 300px) {

   

   .imBackgroundContainer{
        position: relative;
        width: 70%;        /* o 80% */
        margin: 0 auto;    /* centra el contenedor */
        display: block;    /* <-- en vez de inline-block */
        text-align: center;/* centra el texto interno */
        padding-bottom: 10px;
    }
}

/* PTJ DEV08: campos de confirmación y platillos. Sin modificar fuentes ni layout del original. */

.ptj-guest-list { display: grid; gap: 16px; margin-top: 24px; }
.ptj-guest-card { text-align: left; padding: 12px 0; border-bottom: 1px solid #eee7e4; }
.ptj-guest-label { display: block; font-family: garamondFont, serif; font-size: 16px; color: #3e302e; line-height: 1.35; }
.form-reservacion .ptj-attendance { margin-top: 8px; }
.ptj-menu-wrap[hidden] { display: none !important; }
.ptj-menu-wrap { margin-top: 12px; padding-left: 10px; border-left: 2px solid #66021e; }
.ptj-menu-label { display: block; color: #775c58; font-family: garamondFont, serif; font-size: 15px; }
.form-reservacion .ptj-menu-select { margin-top: 7px; height: auto; min-height: 43px; white-space: normal; font-size: 14px; padding: 8px 25px 8px 12px; }
.ptj-form-status { font-family: garamondFont, serif; font-size: 14px; line-height: 1.45; padding-top: 14px; margin: 0; color: #625a58; }
.ptj-form-status[hidden] { display: none; }
.ptj-form-status--error { color: #9d2632; }
.ptj-form-status--success { color: #276841; }
.form-reservacion #btn_Confirmar:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 480px) { .ptj-guest-list { gap: 10px; } }

/* DEV02: menú siempre visible, se habilita tras confirmar asistencia. */
.ptj-menu-wrap--disabled { opacity: .74; }
.ptj-menu-wrap--disabled .ptj-menu-label { color: #877a76; }
.form-reservacion .ptj-menu-select:disabled { color: #777; background-color: #f8f6f5; cursor: not-allowed; opacity: 1; }
.form-reservacion .ptj-menu-select:not(:disabled) { border-color: #c8b5b3; }


/* Solo los dos botones de la portada: conservan tipografía y colores de .btnIntro original. */
.ptj-lang-welcome {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
    width: min(322px, calc(100% - 28px));
    align-items: stretch;
    justify-content: center;
}
.ptj-lang-welcome .btnIntro {
    position: relative;
    bottom: auto;
    margin-left: 0;
    flex: 1 1 0;
    width: 50%;
    min-width: 0;
    letter-spacing: 1px;
    white-space: nowrap;
    text-align: center;
}
.ptj-lang-welcome .btnIntro:focus-visible { outline: 2px solid var(--color-bg-btn); outline-offset: 3px; }


/* PTJ DEV11: popup de confirmación. Independiente del diseño, las fuentes y los modales originales. */
.ptj-confirm-modal[hidden], .ptj-confirm-modal [hidden] { display: none !important; }
.ptj-confirm-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; box-sizing: border-box; isolation: isolate; }
.ptj-confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 12, 16, .66); }
.ptj-confirm-modal__panel { position: relative; z-index: 1; box-sizing: border-box; width: min(390px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; border: 1px solid #e5d8ce; border-radius: 14px; background: #fffdfb; box-shadow: 0 20px 60px rgba(30, 7, 17, .25); padding: 38px 25px 32px; text-align: center; outline: none; }
.ptj-confirm-modal__spinner { width: 50px; height: 50px; margin: 0 auto 21px; border: 4px solid #eee1df; border-top-color: #66021e; border-radius: 50%; animation: ptj-modal-spin .9s linear infinite; }
@keyframes ptj-modal-spin { to { transform: rotate(360deg); } }
.ptj-confirm-modal__mark { box-sizing: border-box; width: 58px; height: 58px; line-height: 55px; margin: 0 auto 19px; border: 2px solid currentColor; border-radius: 50%; font: 35px/55px Georgia, serif; }
.ptj-confirm-modal__mark--success { color: #496d4e; }
.ptj-confirm-modal__mark--error { color: #8c2839; }
.ptj-confirm-modal__title { color: #66021e; font-family: garamondFont, Georgia, serif; font-size: clamp(27px, 7vw, 34px); font-weight: 400; line-height: 1.2; margin: 0 0 11px; }
.ptj-confirm-modal__description { color: #705e57; font-family: garamondFont, Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.ptj-confirm-modal__close { margin: 25px auto 0; min-width: 145px; min-height: 46px; padding: 10px 28px; border: 0; border-radius: 7px; color: #fff; background: #66021e; font-family: garamondFont, Georgia, serif; font-size: 19px; cursor: pointer; }
.ptj-confirm-modal__close:focus-visible { outline: 2px solid #ad8a47; outline-offset: 4px; }
body.ptj-confirm-modal-open { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .ptj-confirm-modal__spinner { animation-duration: 1.8s; } }

/* PTJ DEV13 — English suggestion cards: English lettering matches the scale
   and vertical hierarchy of the source Spanish graphics. No source graphics edited.
   Keep the illustration isolated in the upper part of the card so the caption
   occupies its own reserved space; this eliminates font ascender overlap. */
.ptj-en-card-title { display: none; }
html[lang="en"] .flp-Card-front:has(.ptj-en-card-title) { position: relative; }
html[lang="en"] .flp-Card-front .ptj-card-art {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto !important;
    height: 280px !important;
    max-width: 85%;
    object-fit: contain;
    object-position: top center;
}
/* The Spanish lettering is in the bottom portion of each original WebP. */
html[lang="en"] .flp-Card-front .ptj-card-art--gift { clip-path: inset(0 0 36% 0); }
html[lang="en"] .flp-Card-front .ptj-card-art--lodging { clip-path: inset(0 0 26% 0); }
html[lang="en"] .flp-Card-front .ptj-card-art--attire { clip-path: inset(0 0 29% 0); }
html[lang="en"] .flp-Card-front .ptj-en-card-title {
    position: absolute;
    display: grid;
    grid-template-rows: 49px 20px;
    gap: 12px;
    left: 10px;
    right: 10px;
    bottom: 26px;
    text-align: center;
    justify-items: center;
    align-items: center;
    pointer-events: none;
    color: #fff;
    text-shadow: none;
    z-index: 2;
}
.ptj-en-card-title__script {
    font-family: 'adeliaFont', cursive;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    display: block;
    transform: translateY(-5px);
}
.ptj-en-card-title__subtitle {
    font-family: 'cinzelRegularFont', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: .1px;
    white-space: nowrap;
    display: block;
}
@media(max-width: 350px) {
    .ptj-en-card-title__script { font-size: 24px; }
    .ptj-en-card-title__subtitle { font-size: 14px; }
}