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

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,latin-ext,cyrillic);
@import url('https://fonts.googleapis.com/css?family=Bangers');
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css?family=Bubblegum+Sans');

/* CORONAVIRUS */

.coronavirus {
	width: 100%;
	height: auto;
	background-color:#D64B00;
	padding:20px;
	overflow: hidden;
	box-sizing: border-box;
}

.coronavirust1 {
	display:block;
	width: auto;
	font-family:"Raleway", Arial, Helvetica, sans-serif;
	font-size:1em;
	font-style:normal;
	line-height: 1.4;
	color:#fff;	
}

.coronavirust2 {
	display:block;
	width: auto;
	font-family:"Raleway", Arial, Helvetica, sans-serif;
	font-size:1.2em;
	font-style:normal;
	line-height: 1.2;
	color:gold;	
}

.coronavirust3 {
	display:block;
	width: auto;
	font-family:"Raleway", Arial, Helvetica, sans-serif;
	font-size:1em;
	font-style:normal;
	line-height: 1.2;
	color:cornsilk;	
}

.img-barbijo{
	float: left;
	width: 40%;
	height: auto;
	padding: 0px 10px 10px 0px;
}




*{
    margin:0;
    padding:0;
}

body { /* para centrar toda la pantalla */
    margin: 0;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    min-height: 100vh;       /* Asegura que el cuerpo ocupe toda la altura de la pantalla */
    background-color: #f0f0f0; /* Opcional: solo para contraste */
}




.papanoel{
	width: 250px;
	height: auto;
	left: 30px;
	botton: 200px;
	z-index: 99999999;
	position: fixed;
	opacity: 0;
	
}


#siiglesia{
	display:block;
	
}

#noiglesia{
	display:none;
	
}



#sigalerianovios{
	display:block;
	
}

#nogaleriapersonal{
	display:none;
	
}



#sipersonalizo{
	display:none;
	
}

#nopersonalizo{
	display:block;
	
}

.siaceptaboton{
	display:block;
	}
	
	
	.noaceptaboton{
	display:none;
	}

.div_centrado {
    width: 450px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative; /* FUNDAMENTAL: permite posicionar hijos dentro */
    overflow: visible;  /* Cambiamos de 'hidden' a 'visible' para que el botón no se corte */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
}



		


.principal{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	
	
}



.fondo{
	width: 100%;
	height: 600px;
	margin: 0;
	padding: 0;
	

	

}







.DivTituloFoto-Animaciones
{
	top: 0;
  position:absolute;
	margin-top: 10px;
	margin-left: 20px;
	z-index: 2;
	
	
	width:450px;
	height: auto;
  display: block;
  -webkit-animation: bounce .8s ease alternate;
  /*font-family: 'Bangers', cursive; 
  font-size: 62px; */
	
	  font-family: 'Bubblegum Sans', cursive;
  font-size:3.2em;
  color: #FFF;
  
  line-height: 1;
  text-shadow: 0 3px 0 #424242, 0 4px 0 #212121, 0 3px 0 #212121, 0 3px 0 #212121, 0 3px 0 #212121, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 -2px 10px rgba(0, 0, 0, 0.6);
	
}




.barra_saludo {
    /* 1. Posicionamiento (MUCHO más cerca del logo) */
    position: absolute;
    top: 455px;          /* Aumentamos para bajarlo más. Prueba con 460px si quieres que pise el logo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;

    /* 2. Control de línea y forma */
    width: 70%;
    white-space: nowrap;
	padding:20px;


	background-color:#fe5a01;
    border-radius: 5px;
    



    /* 4. Tipografía (SIN MAYÚSCULAS FORZADAS) */
    font-family: 'Comfortaa', cursive;  
    font-size: 18px;
    color: #FFF;
    text-align: center;
    font-weight: 600;
    text-transform: none; /* Quitamos las mayúsculas automáticas */
    letter-spacing: 0px;  /* Texto más natural */
    
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.barra_saludo:hover {
    transform: translateX(-50%) scale(1.03);
    box-shadow: 0 6px 15px rgba(255, 109, 0, 0.4);
    cursor: pointer;
}



#MENU{
	opacity: 0;
	width: 100%;
	height: 20px;
	margin-top: -70px;
	position: absolute;
	
}



.div_blanco{
	width: 100%;
	height: auto;
	overflow:hidden;
	box-sizing: border-box;
	border-top: solid;
	border-top-color: #C2C2C2;
	border-top-width: 6px;
	padding:12px;


}


/* # LOGO FLOTANTE VIEJO
****************************************
.logo{
	text-align: center;
	margin-top: -80px;
	margin-left:70px;
	z-index:9999999;
	position:absolute;
}


.medida_logo{
		width:200px;
	height:200px;
	border-radius: 100%;
	border-color:#ff8000;
	border-width:5px;
	border-style:solid;
	-webkit-box-shadow: 0px 2px 48px -1px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 2px 48px -1px rgba(0,0,0,0.40);
box-shadow: 0px 2px 48px -1px rgba(0,0,0,0.40);
}

****************/


/* # LOGO FLOTANTE CENTRADO IA
*****************************************/

.logo {
    /* Eliminamos el margin-left: 70px que lo descentraba */
    margin-top: -130px;
    z-index: 9999999;
    
    /* Nueva técnica de centrado para posición absoluta */
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Esto lo mueve exactamente al centro */
    
    width: auto; /* Permite que el div se ajuste al contenido */
}

.medida_logo {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    border-color: #ff8000;
    border-width: 5px;
    border-style: solid;
    
    /* Sombras (He simplificado para que sea más limpio) */
    -webkit-box-shadow: 0px 2px 48px -1px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 2px 48px -1px rgba(0,0,0,0.40);
    box-shadow: 0px 2px 48px -1px rgba(0,0,0,0.40);
    
    display: block; /* Asegura que se comporte bien dentro del div */
}



.texto_datos {
  width: auto;
  font-family: 'Comfortaa', cursive;
  font-size:1.3em;
  font-style:normal;
  line-height: 1.5;
  color:#333;
}

.texto_datos_salon {
  width: auto;
  font-family: 'Comfortaa', cursive;
  font-size:1em;
  font-style:normal;
  line-height: 1.5;
  color:#333;
}

.texto_actualizala {
  width: auto;
  font-family: 'Comfortaa', cursive;
  font-size:1em;
  font-style:normal;
  line-height: 1.5;
  color:#333;

}

.saludo {
	width: auto;
	font-family: 'Bubblegum Sans', cursive;
	font-size:2.5em;
	font-style:normal;
	line-height: 1.1;
	color:#fe5a01;  
	text-shadow: -1px 2px 1px rgba(0,0,0,0.10);
}

.saludo-nombre {
	width: auto;
	font-family: 'Bubblegum Sans', cursive;
	font-size:2.7em;
	font-style:normal;
	line-height: 1.1;
	color:#fe5a01;
	  
  }

  .muestra-edad {
	width: auto;
	font-family: 'Bubblegum Sans', cursive;
	font-size:2.8em;
	font-style:normal;
	line-height: 1.1;
	color:#fe5a01;
	text-shadow: -1px 2px 1px rgba(0,0,0,0.10);
	  
  }

.boton_DETALLE{
	width:88%;
	padding:20px;
	margin: 20px 0px 0px 0px;
	color:#fff;
	background-color:#fe5a01;
	 font-family: 'Comfortaa', cursive;
	font-size:1.2em;
	font-weight: bold;
	text-transform: none;
	border-radius: 5px;
	
	text-align:center;
	text-decoration: none;

	
	
	
	
}



.boton_DETALLE_personalizado{
	font-family: 'Comfortaa', cursive;
	font-size: 1.1em;
	color:#757575;
	line-height: 1.2;
	text-align:center;
	text-decoration:none;
	padding:10px 10px 10px 10px;
	
	background-color: #EEEEEE;
	border-radius: 5px;
	margin-top: 15px;
	margin-left: 11px;
	
	width: 88%;
	
}



.TITULOS_SALON{
	font-family: 'Comfortaa', cursive;
	font-size: 2em;
	color:#F60;
	line-height: 1.2;
	text-align:center;
	text-decoration:none;
	

}


.TITULOS_SALON2{
	font-family: 'Comfortaa', cursive;
	font-size: 1.8em;
	color:#333;
	line-height: 1.2;
	text-align:center;
	text-decoration:none;
	padding: 0px 0px 20px 0px;
	

}

.nofaltes{
	font-family: 'Comfortaa', cursive;
	font-size: 1.3em;
	color:#333;
	line-height: 1.2;
	text-align:center;
	text-decoration:none;
	padding: 0px 0px 20px 0px;
	

}

.TITULOS_iglesia{
	font-family: 'Bubblegum Sans', cursive;
	font-size: 2.7em;
	color:#F60;
	line-height: 1.2;
	text-align:center;
	text-decoration:none;
	

}


.grupo_fotos{
	width: 100%;
	height: auto;
	overflow:hidden;
	box-sizing: border-box;
	margin-top: 30px;
	padding-left: 10px;

}


.foto{
	width: 47%;
	height: auto;
	overflow:hidden;
	box-sizing: border-box;
	float: none;
	margin-right:5px;
	margin-bottom: 5px;
	
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
	

}




/* FOOTER */

.Footer {
	width:100%;
	height:auto;
	background-color:#d86001;
	padding:10px;
	overflow:hidden;
	box-sizing: border-box;
	
}
	.TextoFooter {
	width: auto;
	font-family: "Trebuchet Ms", sans-serif;
	font-size:1em;
	font-style:normal;
	line-height: 1.4;
	color:#fff;	
	
	}

.foto_galeria{
	width: auto;
	height: auto;
	overflow:hidden;
	box-sizing: border-box;
	float: none;
	margin:10px 0px 0px 0px;
	padding-right:6px;
	

}



/* # PARA CELULARES 400
*****************************************/
@media screen and (max-width: 768px){
	
	
	body{
	
	
	
    /** background-image:url(../images/fondo_invitaciones2.jpg);
    background-color: #1E88E5;
	background-repeat:no-repeat;
    background-position:center top;
    background-attachment:fixed; */
	
	width: 100%;
	margin: 0;
	padding-left: 0px;	

}
	
	
	.papanoel{
	width: 260px;
	height: auto;
	left: 45px;
	bottom: -30px;
	z-index: 9999;
	position: fixed;
	opacity: 0;
	
}
	
	.decorado-invitacion{
	position:fixed;
	top: 0px;
	z-index:999999;
	
	}

.div_centrado{
	width: 100%;
}

/*	.DivTituloFoto-Animaciones
****** IMPORTANTE ******
Toda la configuración de este estilo, Se modifica desde un SPAN en el código
para poder modificar el MARGIN-TOP según el tipo de Saludo.
{
	top: 0;
  position:absolute;

	z-index: 2;
	margin-left: 0px;
	padding:5px;
	
	overflow:hidden;
	box-sizing: border-box;
	
	width:100%;
	height: auto;
  display: block;
  -webkit-animation: bounce .8s ease alternate;

	
	  font-family: 'Bubblegum Sans', cursive;
  font-size:3.8em;
  color: #FFF;
  text-align: left;
  line-height: 1;
  text-shadow: 0 3px 0 #424242, 0 4px 0 #212121, 0 3px 0 #212121, 0 3px 0 #212121, 0 3px 0 #212121, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 -2px 10px rgba(0, 0, 0, 0.6);
	
} */

}