/*   ?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: "elegantFont";
        src:url('../Fuentes/Elegant.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');
    }

:root {


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

    /* Section 1 [Introducción] */
        /*celular*/
        --introLogoPossCelFomTOP: 10%; /*Posición desde la parte superior*/
        --introLogoSizeCel: 50%;
        --introLogoLeftCel: 25%; /*= (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: #bb6f77; /*Define Color of Line, circle and text*/
    --tmlCircColor: #2e2117;/*Define Color of circles*/
    --color-bg-btn: #2e2117; /*Define el Color de los Botones*/
    --colorTMLtxt: #765941; /*Color del texto en el TimeLine*/
    
    /* Generales  textNormal*/            
    --fuente1: "josefineFont";
    --fuente2: 'cinzelFont';
    --fuente3: 'newYorkFont';
    --fuente4: 'britanyFont';
    --fontColor: #765941;

    /*Color Botones*/
    --colorBotones: #bb6f77;
    --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: 10%; /*Posición desde la parte superior*/
        --sec2LogoSizeCel: 50%;
        --sec2LogoShadowCel: 0.0; 
        /*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: 115px;
        --colorDate: #dba1ac;
        --duistSTDDist1-2: -15px;
        --duistSTDDist2-3: -15px;
        --spaceFromPhrase: +35px;
        --colorCountDown: #2e2117;

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

        /*Flip Cards*/
        --colorRegalos: #ce949a;
        --colorHospedaje: #98A6B3;        
        --colorVestimenta: #a3585f;
        --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 #fff6f1;
        background: #fff6f1
    }

    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: -73px; 
        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.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;        
        min-height: 100vh;
        width: 100%;
        padding: 100px 0;
        position: relative;
        height: auto;        
    }
    /*Sección 1 Intro*/
   
    .intro { /*Fondo*/
        background-position: var(--portada-pos-small);
        background-image: url(../Media/Ims/FOTOSRECORTADAS/FOTO_DOS.png);
        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*/
        position: absolute;
        width: var(--sec2LogoSizeCel);
        margin-top: var(--sec2LogoPossCelFomTOP);
        left:calc( (100% - var(--sec2LogoSizeCel)) / 2 );
        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: 100%;
        height: 100vh;
        margin: 0 auto; /* centra horizontalmente */
        background-image: url("../Media/Ims/FOTOSRECORTADAS/FOTO_DOS.jpg");
        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: 50px;
        font-weight: 600;
        color: var(--fontColor);
        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: 'adeliaFont';
        font-style: normal;
        font-size: 40px;
        margin-bottom: 25px;
        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: 'adeliaFont';
        font-size: 40px;
        font-weight: 400;
        color: var(--fontColor);
        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(--tmlColor);
    }

    /* ---------- Í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(--tmlColor);
        /* 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;
    }
}