/* ==========================================
   1. OCULTAR ENCABEZADO, TÍTULO Y FOOTER
   ========================================== */
   header#masthead,
   .site-header,
   .entry-header,
   .ast-single-post-title,
   h1.entry-title,
   footer#colophon,
   .site-footer,
   .ast-builder-footer-meta {
       display: none !important;
   }

   /* Eliminar por completo el botón volver arriba de Astra */
.ast-scroll-top, 
#ast-scroll-top {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* =================================================================================== */



/* ======================================= BODY ============================================ */

/* Preparamos tu contenedor principal */
#invitacion {
    position: relative;
    z-index: z-index 1 !important;
}

/* Forzamos la capa fija usando tu ID */
#invitacion::before {
    content: "";
    position: fixed; /* Esto congela la imagen en la pantalla del celular */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Ancla la capa a los 4 bordes exactos de la pantalla móvil */
    width: 100%;
    height: 100lvh;
    /* REEMPLAZA ESTE ENLACE POR EL DE TU .WEBP ANIMADO */
    background-image: url('https://dgstudio.pe/invitaciones/upload/images/fondo-animado-petalos.webp');    
    background-size: cover; 
    background-position: center 13%;
    background-repeat: no-repeat;    
    z-index: -100 !important;/* Lo envía detrás de todas tus tarjetas F- */
    pointer-events: none; /* Evita que interfiera con los clics del usuario */
    -webkit-transform: translateZ(0);/* Fuerza el procesamiento por GPU para evitar parpadeos/cortes al hacer scroll */
}

/*OCULTAR INVITACION*/
#portada{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    z-index:9999;
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition:
    opacity .8s ease,
    transform 3.8s ease;
}

#invitacion{
    opacity:0;
    visibility:hidden;
    transition:
    opacity 3.5s ease;
}

/* Estado visible */
#invitacion.mostrar{
    opacity:1;
    visibility:visible;
}
/* =================================================================================== */



/* ====================== DISEÑO ESCRITORIO Y MOVIL INVITACIONES 01 Y 02 ================================== */
/* --- DISEÑO PARA ESCRITORIO (Lado Derecho) --- */
@media (min-width: 1025px) {
    #flexbox-curva  {
        -webkit-clip-path: url(#wave-clip-desktop);
        clip-path: url(#wave-clip-desktop);
    }
}

/* --- DISEÑO PARA MÓVIL (Parte Inferior) --- */
@media (max-width: 767px) {
    #flexbox-curva {
        -webkit-clip-path: url(#wave-clip-mobile);
        clip-path: url(#wave-clip-mobile);
        /*height: 400px; /* Ajusta la altura de la foto en móvil */
    }
}

/* ---  DISEÑO PARA TABLET (768px a 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    #flexbox-curva {
        /* Mantiene la curva solo en la parte inferior */
        -webkit-clip-path: url(#wave-clip-mobile);
        clip-path: url(#wave-clip-mobile);  
    }
}
/* --------------- CODIGO PARA OCULTAR ELEMENTOS EN MOVIL, PC Y TABLET --------------- */
/* OCULTAR EN MOVIL */
@media (max-width: 767px) {
    .ocultar-movil {
        display: none !important;
    }
}

/* OCULTAR EN PC*/
@media (min-width: 1025px) {
    .ocultar-pc {
        display: none !important;
    }
}

/* OCULTAR EN TABLET*/
@media (min-width: 768px) and (max-width: 1024px) {
    .ocultar-tablet {
        display: none !important;
    }
}
/* =================================================================================== */



/* ============================== BOTON AUDIO =========================================== */
    #btn-audio{
    position:fixed;    
    bottom:32px;
    right:32px;    
    width:40px;
    height:40px;    
    display:flex;
    justify-content:center;
    align-items:center;  
    background-color: rgba(190, 190, 190, 0.2) !important;    
    border:0px solid #000000;    
    border-radius:50%;    
    z-index:999;    
    box-shadow:
    0 8px 18px rgba(0,0,0,.18);    
    animation: infinite;
    }
    
    /* primera onda */
    #btn-audio:before{
    content:"";
    position:absolute;    
    width:40px;
    height:40px;    
    border:1px solid rgba(180,180,180,.45);
    border-radius:50%;
    animation:wave1 1.5s infinite;
    }
    
    /* segunda onda */
    #btn-audio:after{
    content:"";
    position:absolute;
    width:43px;
    height:43px;
    border:2px solid rgba(180,180,180,.25);    
    border-radius:50%;    
    animation:wave2 1.5s infinite;
    }      

    @keyframes pulsebtn{
    0%,100%{
    transform:scale(1);
    }    
    50%{
    transform:scale(1.05);
    }    
    }  

    @keyframes wave1{    
    0%{
    transform:scale(1);
    opacity:.6;
    }    
    100%{
    transform:scale(1.7);
    opacity:0;
    }    
    }
    
    @keyframes wave2{    
    0%{
    transform:scale(1);
    opacity:.4;
    }
    
    100%{
    transform:scale(2);
    opacity:0;
    }
    
    }
/* =================================================================================== */



/* ============================== FUENTES ============================================= */
@font-face{
font-family:'Great';
src:url('https://dgstudio.pe/invitaciones/upload/fonts/GreatVibes-Regular.ttf') format('truetype');
}

h1{
font-family:'Great' !important;
}

@font-face{
    font-family:'Autography';
    src:url('https://dgstudio.pe/invitaciones/upload/fonts/Autography.otf') format('truetype');
    }
    
    h2{
    font-family:'Autography' !important;
    }

/* =================================================================================== */



/* =============================== FX VARIOS - BOTONES VARIOS =================================== */
/* ICONO FLECHAS ABAJO PORTADA */
.scroll-arrow .elementor-icon{
animation:arrowFlow 1.2s linear infinite;
display:inline-block;
}
@keyframes arrowFlow{
0%{
opacity:0;
transform:translateY(-15px);
}
50%{
opacity:1;
}
100%{
opacity:0;
transform:translateY(15px);
}
}

/* CODIGO ESTILO BOTON PORTADA  */
#btnIngresar{
position:relative;
display:inline-block;
background:#7f0021;
color:#e5daac !important;
border:4px solid #B53554;
padding:08px 18px;
/* superior izquierda e inferior derecha */
border-radius:55px 0 55px 0;

/* efecto latido */
animation:breathing 1.7s ease-in-out infinite;
}
@keyframes breathing{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.04);
}
}

/* BOTON-01  */
#boton-01{
position:relative;
display:inline-block;
background:#7f0021;
border:4px solid #B53554;
padding:8px 22px;
border-radius:55px 0 55px 0;
animation:breathing 1.7s ease-in-out infinite;
}

@keyframes breathing{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.04);
}
}

/*BOTON MUSICA CLIENTES FX*/
#btnMusica{
position:fixed;
bottom:31px;
right:31px;
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
background:#efefef;
border:1px solid #F0F0F0;
border-radius:50%;
z-index:999;
box-shadow:
0 8px 18px rgba(0,0,0,.18);
animation:pulsebtn 1.03s infinite;
}

/* primera onda */
#btnMusica:before{
content:"";
position:absolute;
width:40px;
height:40px;
border:1px solid rgba(197,138,154,.45);
border-radius:50%;
animation:wave1 1.5s infinite;
}

/* segunda onda */
#btnMusica:after{
content:"";
position:absolute;
width:43px;
height:43px;
border:2px solid rgba(197,138,154,.25);
border-radius:50%;
animation:wave2 1.5s infinite;
}

@keyframes pulsebtn{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.05);
}
}

@keyframes wave1{
0%{
transform:scale(1);
opacity:.6;
}
100%{
transform:scale(1.7);
opacity:0;
}
}

@keyframes wave2{
0%{
transform:scale(1);
opacity:.4;
}
100%{
transform:scale(2);
opacity:0;
}
}

/* INVERTIR PERFILES */
#img-invertido img {
    transform: scaleY(-1);
}
/* =================================================================================== */



/* ===================================================================================
    3.- COLORES DE CLIENTES PERSONALIZADOS
=================================================================================== */

/* -------------------------------- COLOR ROJO VINO ------------------------------------------ */
#lot-audio-vino svg path {    
    background-color: transparent !important;
    fill: #D4112C !important;  
    /*stroke: #000000 !important;           
    stroke-width: 1px !important;
    */
}

.lot-corazon-vino svg path {
    fill: #7f0021 !important;   /* Cambia este HEX por tu dorado */
    stroke: #7f0021 !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-vino svg path {
    fill: #ffffff !important;   /* Cambia este HEX por tu dorado */
    stroke: #7f0021 !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-blanco svg path {
    fill: #ffffff !important;   /* Cambia este HEX por tu dorado */
    stroke: #ffffff !important; /* Cambia este HEX por tu dorado */
		stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
}

/* -------------------------------- COLOR CAFECLARO ------------------------------------------ */
#lot-audio-cafeclaro svg path {    
    background-color: transparent !important;
    fill: #A58260 !important;  
}

.lot-cafeclaro-fondo svg path {
    fill: #8F735B !important;   /* Cambia este HEX por tu dorado */
    stroke: #8F735B !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-cafeclaro svg path {
    fill: #ffffff !important;   /* Cambia este HEX por tu dorado */
    stroke: #8F735B !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

/* -------------------------------- COLOR ROSADO ------------------------------------------ */
.lot-rosado-fondo svg path {
    fill: #B6907A !important;   /* Cambia este HEX por tu dorado */
    stroke: #B6907A !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-rosado svg path {
    fill: #ffffff !important;   /* Cambia este HEX por tu dorado */
    stroke: #AC8076 !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-rosado-fondo2 svg path {
    fill: #f1e9f0 !important;   
/*    stroke: #B6907A !important; */
	stroke-width: 2px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

/* -------------------------------- COLOR VERDE ------------------------------------------ */
.lot-corazon-verde svg path {
    fill: #55755E !important;   /* Cambia este HEX por tu dorado */
    stroke: #55755E !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-verde svg path {
    fill: #ffffff !important;   /* Cambia este HEX por tu dorado */
    stroke: #55755E !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

.lot-camara-verde svg path {
    fill: #b9dcc3 !important;   
    /*stroke: #55755E !important; */
	stroke-width: 3px !important;
	
}

.lot-dorado svg path {
    fill: #ffffff !important;   /* Cambia este HEX por tu dorado */
    stroke: #948062 !important; /* Cambia este HEX por tu dorado */
	stroke-width: 8px !important; /*   /* Agrega esta línea para controlar el grosor */
	
}

#lot-audio-verde svg path {    
    background-color: transparent !important;
    fill: #55755E !important;  
}

/* -------------------------------- COLOR NEGRO ------------------------------------------ */
.lot-negro svg path {
    fill: #000000 !important;   /* RELLENO */
    stroke: #8B7733 !important; /* BORDE */
	stroke-width: 8px !important; /*   /* GROSOR DE BORDE */
	
}

#lot-audio-negro svg path {    
    background-color: transparent !important;
    fill: #8B7733 !important;  
}

/* ===================================================================================
    IV-02.- COLORES Y PERSONALIZADOS - INVITACION CAFECLARO
=================================================================================== */
/* CODIGO ESTILO BOTON PORTADA  */
#btnIngresar-iv-02{
    position:relative;
    display:inline-block;
    background:#A58260;
    color:#ffffff !important;
    /*border:2px solid #ffffff; */
    padding:08px 18px;
    /* superior izquierda e inferior derecha */
    border-radius: 10px;
    
    /* efecto latido */
    animation:breathing 1.7s ease-in-out infinite;
    }
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }
    
/* BOTON-01  */
#boton-01-cafeclaro{
    position:relative;
    display:inline-block;
    background:#A58260;
    border:3px solid #E2C5A8;
    padding:17px 27px;
    border-radius:25px;
    animation:breathing 1.7s ease-in-out infinite;
    }
    
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }

    .png-color-personalizado {
        background-color: #8F735B; /* <--- Pon aquí tu código HEX */
        -webkit-mask: url('https:///dgstudio.pe/invitaciones/upload/images/punto-rojo.png') no-repeat center / contain;
        mask: url('https:///dgstudio.pe/invitaciones/upload/images/punto-rojo.png') no-repeat center / contain;
        display: inline-block;
      }
      
      /* Oculta la imagen roja original para mostrar solo la máscara teñida */
      .png-color-personalizado img {
        opacity: 0;
      }

      /* OCULTAR EN PC*/
      @media (min-width: 1025px) {
      .png-color-personalizado {
        display: none !important;
      }
      }




/* ===================================================================================
    IV-03.- COLORES Y PERSONALIZADOS - INVITACION ROSADO
=================================================================================== */
/* Preparamos tu contenedor principal */
#invitacion-rosado {
    position: relative;
    z-index: z-index 1 !important;
}

/* Forzamos la capa fija usando tu ID */
#invitacion-rosado::before {
    content: "";
    position: fixed; /* Esto congela la imagen en la pantalla del celular */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Ancla la capa a los 4 bordes exactos de la pantalla móvil */
    width: 100%;
    height: 100lvh;
    /* REEMPLAZA ESTE ENLACE POR EL DE TU .WEBP ANIMADO */
    background-image: url('https://dgstudio.pe/invitaciones/upload/images/iv-rosado/fondo-hojas-rosadas.webp');    
    background-size: cover; 
    background-position: center 13%;
    background-repeat: no-repeat;    
    z-index: -100 !important;/* Lo envía detrás de todas tus tarjetas F- */
    pointer-events: none; /* Evita que interfiera con los clics del usuario */
    -webkit-transform: translateZ(0);/* Fuerza el procesamiento por GPU para evitar parpadeos/cortes al hacer scroll */
}

#portada-rosado{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    z-index:9999;
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition:
    opacity 2.8s ease,
    transform 2.8s ease;
}

/* CODIGO ESTILO BOTON PORTADA  */
#btnIngresar-iv-03{
    position:relative;
    display:inline-block;
    background:#FDE6DA;
    color:#A97193 !important;
    /*border:2px solid #ffffff; */
    padding:08px 25px;
    /* superior izquierda e inferior derecha */
    border-radius: 0 50px 0 50px;
    
    /* efecto latido */
    animation:breathing 1.7s ease-in-out infinite;
    }
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }

    /* BOTON-01  */
#boton-01-rosado{
    position:relative;
    display:inline-block;
    background:#FDE6DA;
    /*border:3px solid #E2C5A8;*/
    padding:17px 27px;
    border-radius:0 50px 0 50px;
    animation:breathing 1.7s ease-in-out infinite;
    }
    
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }

/* ===================================================================================
    IV-04.- COLORES Y PERSONALIZADOS - INVITACION VERDE
=================================================================================== */
/* Preparamos tu contenedor principal */
#invitacion-verde {
    position: relative;
    z-index: z-index 1 !important;
}

/* Forzamos la capa fija usando tu ID */
#invitacion-verde::before {
    content: "";
    position: fixed; /* Esto congela la imagen en la pantalla del celular */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Ancla la capa a los 4 bordes exactos de la pantalla móvil */
    width: 100%;
    height: 100lvh;
    /* REEMPLAZA ESTE ENLACE POR EL DE TU .WEBP ANIMADO */
    background-image: url('https://dgstudio.pe/invitaciones/upload/images/fondo-animado-petalos.webp');    
    background-size: cover; 
    background-position: center 13%;
    background-repeat: no-repeat;    
    z-index: -100 !important;/* Lo envía detrás de todas tus tarjetas F- */
    pointer-events: none; /* Evita que interfiera con los clics del usuario */
    -webkit-transform: translateZ(0);/* Fuerza el procesamiento por GPU para evitar parpadeos/cortes al hacer scroll */
}

/* CODIGO ESTILO BOTON PORTADA  */

/*OCULTAR INVITACION*/
#portada-verde{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    z-index:9999;
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition:
    opacity 2.8s ease,
    transform 2.8s ease;
}

#btnIngresar-iv-04{
    position:relative;
    display:inline-block;
    background: linear-gradient(to right, #4D704B, #334A38);
    color:#ffffff !important;
    border:3px solid #849876;
    padding:18px 40px;
    /* superior izquierda e inferior derecha */
    border-radius:27px 27px 27px 27px;
    
    /* efecto latido */
    animation:breathing 1.7s ease-in-out infinite;
    }
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }

    /* BOTON-01  */
    #boton-01-verde{
        position:relative;
        display:inline-block;
        background: linear-gradient(to right, #4D704B, #334A38);
        color:#ffffff !important;
        border:3px solid #849876;
        padding:18px 40px;
        border-radius:55px 0 55px 0;
        animation:breathing 1.7s ease-in-out infinite;
        }
        
        @keyframes breathing{
        0%,100%{
        transform:scale(1);
        }
        50%{
        transform:scale(1.04);
        }
        }

/* --- DISEÑO PARA ESCRITORIO (Parte Inferior e inferior) --- */
@media (min-width: 768px) {
    #flexbox-curva-verde  {
        -webkit-clip-path: url(#wave-clip-desktop-verde);
        clip-path: url(#wave-clip-desktop-verde);
    }
}

/* --- DISEÑO PARA MÓVIL (Parte Inferior) --- */
@media (max-width: 767px) {
    #flexbox-curva-verde {
        -webkit-clip-path: url(#wave-clip-mobile);
        clip-path: url(#wave-clip-mobile);
        /*height: 400px;*/ /* Ajusta la altura de la foto en móvil */
    }
}

/* ---  DISEÑO PARA TABLET (768px a 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    #flexbox-curva-verde {
        /* Mantiene la curva solo en la parte inferior */
        -webkit-clip-path: url(#wave-clip-mobile);
        clip-path: url(#wave-clip-mobile);  
    }
}

/* NUMERO FECHA CON ANIMACION */
    #numero-animado{
            animation:breathing 1.7s ease-in-out infinite;
            }
            
            @keyframes breathing{
            0%,100%{
            transform:scale(1);
            }
            50%{
            transform:scale(1.10);
            }
            }

/*      COLOR DEL PUNTO ROJO SEPARACION - MODIFICACION DE COLOR*/
            .png-color-personalizado-verde {
                background-color: #55755E; /* <--- Pon aquí tu código HEX */
                -webkit-mask: url('https:///dgstudio.pe/invitaciones/upload/images/punto-rojo.png') no-repeat center / contain;
                mask: url('https:///dgstudio.pe/invitaciones/upload/images/punto-rojo.png') no-repeat center / contain;
                display: inline-block;
              }
              
              /* Oculta la imagen roja original para mostrar solo la máscara teñida */
              .png-color-personalizado-verde img {
                opacity: 0;
              }
        
              /* OCULTAR EN PC*/
              @media (min-width: 1025px) {
              .png-color-personalizado-verde {
                display: none !important;
              }
              }

/* ===================================================================================
    IV-05.- COLORES Y PERSONALIZADOS - INVITACION NEGRO
=================================================================================== */
/*OCULTAR INVITACION*/
#portada-negro{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    z-index:9999;
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition:
    opacity 2.8s ease,
    transform 2.8s ease;
}

/* Preparamos tu contenedor principal */
#invitacion-negro {
    position: relative;
    z-index: z-index 1 !important;
}

/* Forzamos la capa fija usando tu ID */
#invitacion-negro::before {
    content: "";
    position: fixed; /* Esto congela la imagen en la pantalla del celular */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Ancla la capa a los 4 bordes exactos de la pantalla móvil */
    width: 100%;
    height: 100lvh;
    /* REEMPLAZA ESTE ENLACE POR EL DE TU .WEBP ANIMADO */
    background-image: url('https://dgstudio.pe/invitaciones/upload/images/iv-negro/fondo-negro.webp');    
    background-size: cover; 
    background-position: center 13%;
    background-repeat: no-repeat;    
    z-index: -100 !important;/* Lo envía detrás de todas tus tarjetas F- */
    pointer-events: none; /* Evita que interfiera con los clics del usuario */
    -webkit-transform: translateZ(0);/* Fuerza el procesamiento por GPU para evitar parpadeos/cortes al hacer scroll */
}

#btnIngresar-iv-05{
    position:relative;
    display:inline-block;
    background:#34391E;
    color:#F6E0A9 !important;
    border:1px solid #F6E0A9;
    padding:18px 40px;
    /* superior izquierda e inferior derecha */
    border-radius:15px 15px 15px 15px;
    
    /* efecto latido */
    animation:breathing 1.7s ease-in-out infinite;
    }
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }

    /* BOTON-01  */
    #boton-01-negro{
        position:relative;
        display:inline-block;
        background:#34391E;
        color:#F6E0A9 !important;
        border:1px solid #F6E0A9;
        padding:18px 40px;
        border-radius:15px 15px 15px 15px;
        animation:breathing 1.7s ease-in-out infinite;
        }
        
        @keyframes breathing{
        0%,100%{
        transform:scale(1);
        }
        50%{
        transform:scale(1.04);
        }
        }

/* --- DISEÑO PARA MÓVIL (Parte Inferior) --- */
@media (max-width: 767px) {
    #flexbox-curva-negro {
        -webkit-clip-path: url(#wave-clip-mobile);
        clip-path: url(#wave-clip-mobile);
        /*height: 400px;*/ /* Ajusta la altura de la foto en móvil */
    }
}

/* ===================================================================================
    IV-06.- COLORES Y PERSONALIZADOS - INVITACION VERDECLARO
=================================================================================== */
/*OCULTAR INVITACION*/
#portada-verdeclaro{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    z-index:9999;
    opacity:1;
    visibility:visible;
    transform:scale(1);
    transition:
    opacity 2.8s ease,
    transform 2.8s ease;
}

/* Preparamos tu contenedor principal */
#invitacion-verdeclaro {
    position: relative;
    z-index: z-index 1 !important;
}

/* Forzamos la capa fija usando tu ID */
#invitacion-verdeclaro::before {
    content: "";
    position: fixed; /* Esto congela la imagen en la pantalla del celular */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Ancla la capa a los 4 bordes exactos de la pantalla móvil */
    width: 100%;
    height: 100lvh;
    /* REEMPLAZA ESTE ENLACE POR EL DE TU .WEBP ANIMADO */
    background-image: url('https://dgstudio.pe/invitaciones/upload/images/fondo-petalos.webp');    
    background-size: cover; 
    background-position: center 13%;
    background-repeat: no-repeat;    
    z-index: -100 !important;/* Lo envía detrás de todas tus tarjetas F- */
    pointer-events: none; /* Evita que interfiera con los clics del usuario */
    -webkit-transform: translateZ(0);/* Fuerza el procesamiento por GPU para evitar parpadeos/cortes al hacer scroll */
}
/* CODIGO ESTILO BOTON PORTADA  */
#btnIngresar-verdeclaro{
    /* efecto latido */
    animation:breathing 1.7s ease-in-out infinite;
    }
    @keyframes breathing{
    0%,100%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.04);
    }
    }

#btnIngresar-verdeclaro img {
    display: block;
    cursor: pointer !important;
}

/* --------------------- efecto "sobre" mover izquierda y derecha ---------------------*/
.animacion-fuga-izquierda {
    animation: moverIzquierda 1.8s ease-in forwards;
    pointer-events: none; /* Evita clics mientras se desplaza */
}

@keyframes moverIzquierda {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%); /* Sale completamente hacia la izquierda */
    }
}

.animacion-fuga-derecha {
    animation: moverDerecha 1.8s ease-in forwards;
    pointer-events: none; /* Evita clics mientras se desplaza */
}

@keyframes moverDerecha {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200%); /* Sale completamente hacia la derecha */
    }
}