.portada { /*este es mi contenedor principal de la portada con fondo borroso*/
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgb(58, 54, 84);
}

.portada::before { /*imagen de fondo desenfocada*/
  content: "10";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/masaje bebe1.jpg'); 
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  z-index: 1;
}

.portada > * { /*asegurandome que el contenido este por encima de mi fondo borroso*/
  position: relative;
  z-index: 10;
}
/*Titulo principal*/
.portada-text h1 {
  font-family:'Playfair Display', serif;
}
h1{
  text-align: center;
  position: sticky;
  padding: 10px;
  font-family:'Playfair Display', serif;
  color: #6c5b7b;
  font-size: 200%;
}
/*texto centrado en portada*/
.portada-text h1 {
  font-size: 3em;
  text-transform: none;
  color: #6c5b7b;
}
/*centra el texto y limita el ancho para buena lectura*/
.texto-centrado {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
  padding: 20px;
  font-family: 'Segoe UI', sans-serif;
}

/*menu de navegacion*/
.menu ul {/*menu horizontal con iconos*/
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px;
  padding: 10px;
}
.menu a {
  /*estilo de los enlaces del menu*/
  display: inline-flex;
  align-items: center;
  text-decoration: none; 
  color: #6c5b7b; 
  font-family:'Segoe UI', sans-serif;
  padding: 10px;
  transition: color 0.3s ease;
}
.menu a:hover {/* efecto al pasar el cursor*/
  color: #815734;
  background-color: #f3e5f0;

}
.menu a i{ /*iconos del menu*/
  font-size: 1em;
  margin-right: 6px;
  vertical-align: middle;
}

/*iconos sociales redondos*/
.social a{ /*iconos sociales con fondo blanco y sombra suave*/
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: white;
  color: #b03a83;
  border-radius: 50%;
  font-size: 1.2em;
  margin: 0 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}
.social a:hover {
  background-color: #df4478;
  color: white;
}
.contenido-flex{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
}

main{
  margin: 0;
  padding-top: 80px;
}

main h2 {
  margin-top: 0;
  padding-top: 0;
}
.blog-page main {
  margin: 0;
  padding: 20px;
  position:unset;
  justify-content: center;
  box-sizing: border-box;
}

.bebe{ /*imagen del bebe alineada a la izquierda del texto*/
  width:100px;
  float:left;
  display:block;
  margin:10px;
  border-radius: 12px;
}
.parrafo{
  font-size: 1em;
  text-align: justify;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden; /*evita que el contenido se desborde*/
  font-family: 'Segoe UI', sans-serif;
}
.uno{
  margin-top:20px;
  background-color: beige;
  margin-bottom:20px;
  color: #534737;
}
.dos{
  background-color: white;
  margin-top:20px;
  color: #534737;
}
footer.social p{
  font-family:'Segoe UI', serif; 
  font-size: 1em;
  color: #534737; 
  text-align: center;
  margin-bottom: 10px;
}

.rounded{
  border-radius: 6%;
  width: 800px;
  text-align: center;
}

/*estilo general del cuerpo del sitio*/
body {
  background-color: #faeef2; /*fondo rosado suave*/
}
/*estilo para textos flotantes decorativos*/
.float-text {
 margin: 1px;
 padding: 1px;
 justify-content: center;
 width: 50%;
 margin-top: 20px;
}

.float-text p {
  font-family:'Playfair Display', serif;
  font-size: 1.8em;
  color:#6c5b7b;
  margin-top:20px;
  text-align:center;
  font-weight:bold;
}

/*seccion galeria nura*/

.galeria {
  display: flex; /*para mostrar imagenes en fila*/
  flex-wrap: wrap;
  justify-content: center; /*centra las imagenes horizontalmente*/
  gap: 10px; /*espacio entre imagenes*/
  margin: 20px auto;
  width: 100%;
  max-width: 560px;/*limita el ancho total de la galeria*/
  padding: 10px;

}
.galeria img{
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);

}
.galeria .redes a {
  background-color: #df4478;
  color: white;

}
/*autor en la esquina superior derecha de la galeria*/
#autor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
  color: #6c5b7b;
  font-family: 'Playfair Display', serif;
}

#autor img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#autor p {
  font-size: 0.85em;
  margin: 0;
}

/*iconos decorativos debajo de la galeria*/
.iconos {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.iconos ul {
  width: 10%;
  display: flex;
  text-align: center;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.iconos li{
  display: inline-block;
}

.iconos a {
  text-decoration: none;
  color: #6c5b7b; 
  font-family:'Times New Roman', serif;
  font-size: 1.2em;
  padding: 8px 16px;
  transition: color 0.3s ease;
}
.iconos a:hover {
  color: #df4478;
  background-color: whitesmoke;
  border-radius: 8px;
}

.hover-img:hover {
  filter: grayscale(100%);
}
.galeria img:hover {
  filter: grayscale(100%);
}

/*encabezado fijo para la pagina de la galeria*/
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 25%;
  background: hwb(334 72% 11%);
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0.1);
  text-decoration:solid;  
}
.blog-page main{
  padding-top: 90px;
}
.fixed-header {
  position: fixed;         /* fija la cabecera en la parte superior */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fdf6f9; /* fondo suave como el resto del sitio */
  z-index: 1000;           /* asegura que esté por encima del contenido */
  padding: 10px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* sombra ligera para profundidad */
}

.galeria{
  margin-top: 250px;
}

/*contenedor de videos */

.titulo-videos {
  font-family: 'Playfair Display', serif;
  font-size: 2em;
  color: #6c5b7b;
  text-align: center;
  margin-top: 10px; /* para que no se esconda debajo del header fijo */
  margin-bottom: 20px;
}
.video-container iframe {
  width: 100%;
  max-width: 560px;
  height: 315px;
  margin: 10px;
}
/*titulos dentro del contenido del blog nura*/
main h2{
  text-align: center;
  font-size: 3em;
  color: #6c5b7b;
  font-family:'Playfair Display', serif;
  margin: 20px auto;
}

/*fondo decorativo para seccion videos*/
.fondo-videos {
  background-image: url('img/masajes-relajantes-piernas-pies.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: opacity(100%);
}
/*estilo global para todos los elementos*/
*{
  padding: 10;
  margin: 10;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}
/*contenedor general de contenido*/
#contenedor{
  width: 60%;
  border: 10px solid rgb(211, 199, 211);
  margin: 180px auto 40px auto;
  padding: 10px;
  position:relative;
}
.videos-page h2 {
  text-align: center;
}
.videos-page p{
  color: #534737;
}

/*estructura organizada para la sección de videos*/
.video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px auto;
  max-width: 1000px;
  padding: 10px;
}

.video-item {
  flex: 1 1 300px;
  max-width: 480px;
  background-color: #fff0f5; /* fondo suave que armoniza con Nura */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* sombra ligera para profundidad */
  padding: 10px;
}

.video-item iframe {
  width: 100%;
  height: 270px;
  border: none;
  border-radius: 8px;
}