/* Importación de la fuente "Symphony Script - personal use" desde un proveedor externo */
@import url(https://db.onlinewebfonts.com/c/0ee67558ce9f1e5900b0579062ed114a?family=Symphony+Script+-+personal+use); 

/* Importación de la fuente "Montserrat" desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Importación de la fuente "Lovelyn" desde un CDN externo */
@import url('https://fonts.cdnfonts.com/css/lovelyn');

/*Imagenes*/

.img-monica-logo {
    display: flex;              /* Usamos flexbox */
    justify-content: center;    /* Centrar horizontalmente */
    align-items: center;        /* Centrar verticalmente */
    margin: -50px auto;          /* Espaciado automático para centrar en el contenedor */
    margin-bottom: 10px;
    
}

.img-monica-logo img {
    width: 370px;               /* Ajusta el tamaño de la imagen de footer*/
    height: auto;               /* Mantiene las proporciones */
    display: block;             /* Asegura que no haya espacios extra alrededor de la imagen */    
}

/*----------imagen cabecera--------------------*/
.img-monica-cabecera {
    position: relative;
    height: 500px; /* Altura fija para la sección */
    overflow: hidden; /* Oculta cualquier desbordamiento */
    background-color: #000;
    /*background-image: url('https://res.cloudinary.com/dr7jtpddn/image/upload/v1733423053/m3_epip8d.jpg');  Imagen de fondo */
    background-image: url('imagenes/monica/m3a.jpg'); /* Imagen de fondo local */
    background-attachment: fixed; /* Imagen fija para el efecto parallax */
    background-position: center -10%; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* Sombra externa */
    z-index: 1; /* Menor z-index que las tarjetas */
    transition: box-shadow 0.3s ease; /* Suaviza la animación de la sombra */
}

.img-monica-cabecera:hover {
    box-shadow: 0 12px 25px rgba(255, 182, 193, 0.6); /* Sombra más intensa al hover */
}

/*-----------cabeceras secundarias ---------*/
.img-monica-cabecera-2 {
  position: relative;
  height: 200px; /* Altura fija para la sección */
  overflow: hidden; /* Oculta cualquier desbordamiento */
  background-color: #000;
/*  background-image: url('https://res.cloudinary.com/dr7jtpddn/image/upload/v1733512209/m4_trjcpw.jpg');  Imagen de fondo */
  background-image: url('imagenes/monica/m4a.jpg'); /* Imagen de fondo local */
  background-attachment: fixed; /* Imagen fija para el efecto parallax */
  background-position: center -10%; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* Sombra externa */
  z-index: 1; /* Menor z-index que las tarjetas */
  transition: box-shadow 0.3s ease; /* Suaviza la animación de la sombra */
}

.img-monica-cabecera-2:hover {
  box-shadow: 0 12px 25px rgba(255, 182, 193, 0.6); /* Sombra más intensa al hover */
}

/*-----------cabeceras terciaria ---------*/
.img-monica-cabecera-3 {
  position: relative;
  height: 200px; /* Altura fija para la sección */
  overflow: hidden; /* Oculta cualquier desbordamiento */
  background-color: #000;
  /*background-image: url('https://res.cloudinary.com/dr7jtpddn/image/upload/v1733512248/m8_m8eehf.jpg');  Imagen de fondo */
  background-image: url('imagenes/monica/m8a.JPG'); /* Imagen de fondo local */
  background-attachment: fixed; /* Imagen fija para el efecto parallax */
  background-position: center -10%; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* Sombra externa */
  z-index: 1; /* Menor z-index que las tarjetas */
  transition: box-shadow 0.3s ease; /* Suaviza la animación de la sombra */
}

.img-monica-cabecera-3:hover {
  box-shadow: 0 12px 25px rgba(255, 182, 193, 0.6); /* Sombra más intensa al hover */
}

/*-----------cabeceras cuartus ---------*/
.img-monica-cabecera-4 {
  position: relative;
  height: 200px; /* Altura fija para la sección */
  overflow: hidden; /* Oculta cualquier desbordamiento */
  background-color: #000;
 /* background-image: url('https://res.cloudinary.com/dr7jtpddn/image/upload/v1733512972/m15_kabuqo.jpg');  Imagen de fondo */
  background-image: url('imagenes/monica/m15a.jpg'); /* Imagen de fondo local */
  background-attachment: fixed; /* Imagen fija para el efecto parallax */
  background-position: center -10%; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* Sombra externa */
  z-index: 1; /* Menor z-index que las tarjetas */
  transition: box-shadow 0.3s ease; /* Suaviza la animación de la sombra */
}

.img-monica-cabecera-4:hover {
  box-shadow: 0 12px 25px rgba(255, 182, 193, 0.6); /* Sombra más intensa al hover */
}

/*-----------cabeceras quinta ---------*/
.img-monica-cabecera-5 {
  position: relative;
  height: 200px; /* Altura fija para la sección */
  overflow: hidden; /* Oculta cualquier desbordamiento */
  background-color: #000;
  /*background-image: url('https://res.cloudinary.com/dr7jtpddn/image/upload/v1733422744/m2_lxqwy3.jpg'); Imagen de fondo */
  background-image: url('imagenes/monica/m2c.jpg'); /* Imagen de fondo local */
  background-attachment: fixed; /* Imagen fija para el efecto parallax */
  background-position: center -10%; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
  border-radius: 1px; /* Bordes redondeados */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); /* Sombra externa */
  z-index: 1; /* Menor z-index que las tarjetas */
  transition: box-shadow 0.3s ease; /* Suaviza la animación de la sombra */
}

/*------------ start seccion 3 tarjetas ---------------*/

/* General container styling */
.section {
    position: relative; /* Necesario para que z-index funcione */
    z-index: 2; /* Aparece delante de la imagen de fondo */
    padding: 20px;
    margin-top: -80px; /* Ajusta superposición según sea necesario */
}

/* Card container to separate image and text */
.card-container {
  text-align: center;
  max-width: 350px;
  flex: 1;
}

/* Flexbox layout for horizontal alignment */
.row {
  display: flex;
  justify-content: center;
  gap: 100px; /* Espacio entre imágenes*/
}

/* Card styling */
.card {
  height: 300px; /* Establece una altura fija para todas las tarjetas */
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; /* Garantiza que nada salga del recuadro */
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Image styling */
.card img {
  width: 100%; /* Asegura que la imagen cubra todo el ancho del contenedor */
  height: 100%; /* Asegura que la imagen llene el alto del contenedor */
  object-fit: cover; /* Recorta proporcionalmente para llenar el espacio */
  display: block; /* Elimina cualquier espacio blanco adicional debajo de la imagen */
}

/* Title styling outside of the card */
/* Title styling outside of the card */
.card-title {
  margin-top: 10px;
  font-family: 'Lovelyn', sans-serif; 
  letter-spacing: 3px; /* Ajusta el espacio entre letras */
  color: #553159;
  font-size: 18px;
  
}


#transparente {
  background: transparent; /* Fondo transparente */
}

#transparente-contenido {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.transparente-columna {
  flex: 1; /* Espaciado flexible */
  background: transparent; /* Fondo de cada columna transparente */
  height: 30px; /* Puedes ajustar la altura */
  border: none; /* Sin bordes */
}

/*-------------------end section 3 tarjetas --------------------*/

/*------------------start section horizon 1---------------------*/



#inicio {
  
  border-radius: 25px;  /* Bordes suaves */
  padding: 20px 10%;
  margin-bottom: 0px; /*separación entre cuadros centrales */
  position: relative;
  
}

#inicio::before {
  content: '';
  position: absolute;
  top: 4%; left: 10%; bottom: 1.5%; right: 9.9%;
  background-image: linear-gradient(rgba(217, 181, 252, 0.5), rgba(207, 197, 217, 0.5)), url('imagenes/notas/n1.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.5); /* Más oscuro */
filter: brightness(1.5); /* Más brillante */
filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5)); /*esto veo si lo quito       */
  opacity: 0.1;
  border-radius: 25px;
  z-index: -1;
}

#inicio-contenido {
  display: flex;
  justify-content: space-between;
}

#inicio-contenido h2 {
  font-size: 60px;
  line-height: 1.4;
  margin-top: 50px;
  margin-bottom: 10px;
  font-family: "Symphony Script - personal use"; /* Fuente decorativa para los títulos */
  color: #573c73; /* Morado personalizado */
  letter-spacing: 6px; /* Aumenta la separación entre las letras */
}

#inicio-contenido p {
font-size: 32px;
  line-height: 1.4;
  margin-top: px;
  margin-bottom: 20px;
  padding-left: 200px;
  padding-right: 200px;
  font-family: 'Montserrat', sans-serif; /* Cambia la fuente */
  color: #6b4b92; /* Morado personalizado */
  text-align: justify; /* Justifica el texto */
}
#inicio-fondo {
  width: 300px;
  height: auto; /* Mantiene la proporción */
  border-radius: 25px; /* Ajusta este valor para el redondeo */
  
}

.boton {
  text-decoration: none;
  font-family: 'Lovelyn', sans-serif; 
  color: white;
  font-size: 38px;
  background-color: #BDB0D9;
  padding: 16px 36px;
  border-radius: 5px;
  font-weight: bold;
  margin-right: 18px;
  letter-spacing: 5px; /* Aumenta la separación entre las letras */
  position: relative; /* Asegura que z-index funcione */
  z-index: 10; /* Lo posiciona frente a otros elementos */
}

#aprende-mas {
  background-color: transparent;
  border: 2px solid #8e76a6;
  color: #4e2973;
}

#inicio-botones {
  margin-bottom: -30px;
}


#mi-estilo{
  font-size: 48px;
}
/*-------dato centrado en medio ------------------------*/
#inicio-contenido p {
  font-size: 18px; /* Tamaño más manejable */
  line-height: 1.4; /* Mejora la separación entre líneas */
  margin: 20px 0; /* Espacio vertical */
  
  padding: 0 40px; /* Reduce el espacio interno lateral */
  font-family: 'Montserrat', sans-serif;
  color: #4b247b;
  text-align: justify; /* Justificación más estética */
}
#inicio-contenido {
  display: flex;
  justify-content: space-around; /* Mantén distribución equitativa */
  align-items: center;
  gap: 20px; /* Más espacio entre columnas */
}

.inicio-columna {
    flex: 1; /* Las columnas toman el mismo espacio */
    text-align: center; /* Alineación centrada */
}

#inicio-fondo {
    width: 100%; /* Imagen escala dentro de su columna */
    max-width: 300px; /* Limita el tamaño máximo */
    height: auto; /* Mantiene la proporción */
    border-radius: 25px; /* Bordes redondeados */
}