/* Importar la fuente personalizada */
@font-face {
  font-family: 'BaseMoon';
  src: url('../FUENTES/transfonter/BaseMoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ===== Responsivo básico ===== */
@media (max-width: 768px) {
  header { height: 64px; }
  main { margin-top: 64px; }
  /* Evita saltos raros en móvil si el fondo está en fixed */
  body { background-attachment: scroll; }
}

/* Reset general */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
 
  html, body {
    height: 100%; /* Hace que el HTML y el body ocupen el 100% de la altura del navegador */
    margin: 0;/* Elimina los márgenes por defecto del navegador */
    padding: 0;/* Elimina el espacio interno por defecto */
   
  }
  
  
  body {
    overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/fondo.webp'); /* Fondo con imagen */
        background-repeat: no-repeat;        /* Evita que la imagen se repita */
        background-size: cover;              /* Hace que la imagen cubra toda la pantalla */
        background-position: center;         /* Centra la imagen */
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */
        font-family: 'Georgia', serif;  /* Usa la fuente Arial para todo el texto. Si no está disponible, usa cualquier otra fuente sin serifas (sin patitas) */
        background-color: #FAF3E0; /* Tono beige claro */
        color: #4B3B2A;                                /* Color del texto general: gris oscuro para buena legibilidad */
      }

  
  header {
   position: fixed;         /* Fija el encabezado en la parte superior de la ventana, permanece visible al hacer scroll */
      top: 0;                  /* Lo ancla exactamente en la parte superior (0 píxeles desde arriba) */
      width: 100%;             /* Hace que el header ocupe todo el ancho de la pantalla */
      z-index: 1000;           /* Asegura que esté por encima de otros elementos en la página */
      background-color: #ffffff; /* Color de fondo blanco para el header */
      height: 80px;            /* Altura fija del header, útil para empujar el contenido con margen */
      display: flex;           /* Usa Flexbox para organizar el contenido horizontalmente (logo a la izquierda, menú a la derecha) */
      align-items: center;     /* Centra verticalmente los elementos dentro del header */
      justify-content: space-between; /* Separa los elementos al máximo: uno a la izquierda y otro a la derecha */
      padding: 0px 30px;       /* Espacio interno: 0 arriba/abajo y 30px izquierda/derecha */
      background-image: url('../IMAGENES/header.png'); /* Fondo con imagen */
    }

  

 

  nav ul {
    list-style: none; /* Quita los punticos de la lista (<ul>) */
    display: flex; /* Pone los elementos del menú en línea horizontal */
    gap: 30px; /* Espacio entre cada enlace */
  }

nav ul li a {
  font-family: "Lobster", sans-serif;
  color: rgb(0, 0, 0); /* Color del texto de los enlaces */
  text-decoration: none;/* Quita el subrayado de los enlaces */
  font-weight: bold;    /* Texto en negrita */
  font-size: 20px;      /* Tamaño del texto */
  transition: color 0.3s ease; /* Efecto suave al pasar el mouse */
}

nav ul li a:hover {
  color: #ff69b4; /* Cambia el color del texto del enlace cuando el usuario pasa el mouse por encima (efecto hover) */
}
  
/*es donde va todo el contenido de la pagina*/
main {
  flex: 1; /* Le indica al contenedor (el body con flexbox) que el main debe ocupar todo el espacio restante entre el header y el footer */
  overflow: visible; /* 👈 asegúrate que el main no limite el scroll */
  margin-top: 108px; /* Desplaza el contenido hacia abajo para no quedar tapado por el header */
}

  .bienvenida { /*CONTENEDOR PRINCIPAL DONDE VA TODA LA PARTE DEL TEXTO*/
    background-color: #ffffff; /* Fondo blanco para destacar esta sección sobre el fondo general */
    padding: 40px; /* Espacio interno en todos los lados de la caja */
    border-radius: 12px; /* Bordes redondeados: le da un toque suave y moderno */
    text-align: center; /* Centra horizontalmente el texto dentro de esta sección */
    margin: 30px auto; /* 30px de margen arriba/abajo y centrado horizontalmente */
    max-width: 900px; /* Limita el ancho máximo a 900px para que no se vea muy ancho en pantallas grandes */
    box-shadow: 0 0 15px rgba(138, 44, 116, 0.1); /* Sombra suave alrededor para dar efecto de tarjeta o elevación */
  }

  .bienvenida h1 {
    font-family: "Diplomata", serif;
    font-size: 27px;      /* Tamaño del título */
    color: #020202;       /* Color personalizado para el título */
    margin-bottom: 20px;  /* Espacio debajo del título */
  }
  
  .bienvenida p {
    font-size: 18px;      /* Tamaño del párrafo */
  }
 
  .nacimiento {
    background-color: #ffffff; /* Fondo blanco para que el texto resalte y se vea claro */
    padding: 30px; /* Espacio interno (dentro de la caja) en todos los lados */
    max-width: 900px; /* Ancho máximo de la sección para que no se extienda demasiado en pantallas grandes */
    margin: 0 auto 40px; /* Centrado horizontal (auto) y 40px de espacio abajo */
    border-radius: 12px;/* Bordes redondeados para un aspecto suave y moderno */
    box-shadow: 0 0 10px rgba(138, 44, 116, 0.08); /* Sombra sutil alrededor para dar efecto de tarjeta flotante */
  }

  .nacimiento h2 {
    font-family: "Diplomata", serif;
    text-align: center;
    color: #080808;       /* Color del título (coherente con el estilo del sitio y del logo) */
    margin-bottom: 10px;  /* Espacio entre el título y el texto que sigue */
  }
  
  .nacimiento p {
    text-align: justify;
    margin-bottom: 20px;  /* Espacio entre párrafos (entre misión y visión) */
    line-height: 1.6;     /* Espaciado entre líneas del texto para que se lea más cómodo */
  }
  
 
  .mision-vision {
    background-color: #ffffff; /* Fondo blanco para que el texto resalte y se vea claro */
    padding: 30px; /* Espacio interno (dentro de la caja) en todos los lados */
    max-width: 900px; /* Ancho máximo de la sección para que no se extienda demasiado en pantallas grandes */
    margin: 0 auto 40px; /* Centrado horizontal (auto) y 40px de espacio abajo */
    border-radius: 12px;/* Bordes redondeados para un aspecto suave y moderno */
    box-shadow: 0 0 10px rgba(138, 44, 116, 0.08); /* Sombra sutil alrededor para dar efecto de tarjeta flotante */
  }
  
  .mision-vision h2 {
    font-family: "Diplomata", serif;
    text-align: center;
    color: #080808;       /* Color del título (coherente con el estilo del sitio y del logo) */
    margin-bottom: 10px;  /* Espacio entre el título y el texto que sigue */
  }

  .mision-vision p {
    text-align: justify;
    margin-bottom: 20px;  /* Espacio entre párrafos (entre misión y visión) */
    line-height: 1.6;     /* Espaciado entre líneas del texto para que se lea más cómodo */
  }

  footer {
    background-color: #8a2c74;  /* Color de fondo del pie de página (mismo tono morado del logo para coherencia visual) */
    color: white;   /* Color del texto en blanco para contraste y legibilidad */
    text-align: center; /* Centra horizontalmente el texto dentro del footer */
    padding: 20px; /* Espacio interno en todos los lados del footer */
    font-size: 14px;  /* Tamaño de letra más pequeño que el cuerpo para marcar que es información secundaria */
    font-family: cursive
  }