/* 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;
    }
  
  /* Body */
    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 */
      
    }

      /*SECCION DEL BODY*/    
    body {
        overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/contactenos.png'); /* Fondo con imagen */
        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;  
        background-repeat: no-repeat;  
        background-size: cover; 
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */                           /* Color del texto general: gris oscuro para buena legibilidad */
      }


  /* SECCION DEL HEADER */
    
    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 */
    }

  /* SECCION DEL LOGO */

    .logo img {
      height: 66px;   /* suficientemente grande para destacar */
      width: auto;
    
    }

        /*SECCION DE LA LISTA*/  

  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 al pasar el mouse */
    }

  /* SECCION DEL CONTENIDO PRINCIPAL */
  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: -95px; /* Desplaza el contenido hacia abajo para no quedar tapado por el header */
  margin-bottom: 0%; /* Espacio inferior para que no quede pegado al footer */
  padding-bottom: 0%; /* Espacio interno inferior */
   }


  h1 {
  color: #000000; /* verde oliva */
  font-size: 29px; /* Tamaño de letra grande para el título */
  font-family: 'BaseMoon', sans-serif; /* Usa la fuente personalizada */
  color: #000000; 
  text-align: center; /* Centra el texto */

    }

    /* SECCION DEL MAIN*/
.contacto {
  background-color: #ffffff; /* Fondo blanco para el formulario de contacto */
  padding: 40px; /* Espacio interno alrededor del formulario */ 
  border-radius: 10px; /* Bordes redondeados para un aspecto más suave */
  max-width: 600px; /* Ancho máximo del formulario */
  margin: 200px auto; /* Centrado horizontal */
  box-shadow: 0 0 10px rgba(0,0,0,0.1);  /* Sombra sutil para destacar el formulario */
}

.contacto form { 
  display: flex; /* Usa Flexbox para organizar los elementos del formulario */
  flex-direction: column; /* Organiza los elementos en una columna */
}

.contacto label {
  font-family: 'Lobster', cursive; /* Fuente cursiva para los labels */
  font-size: 20px; /* Tamaño de letra para los labels */
  margin-top: 31px; /* Espacio entre los labels y los inputs */
  font-weight: bold; /* Negrita para destacar los labels */
  color: #000000; /* Color del texto de los labels */
}

.contacto input,    
.contacto textarea {
  padding: 10px; /* Espacio interno para los campos de entrada */
  border: 1px solid #000000; 
  border-radius: 5px; /* Bordes redondeados para los campos de entrada */
  margin-top: 5px; /* Espacio entre el label y el campo de entrada */
  font-size: 16px; /* Tamaño de letra para los campos de entrada */
}


.boton button {
  margin-top: 5%; /* Espacio entre el último campo de entrada y el botón */
  background-color: #fd0000; /* Color de fondo del botón */
  color: #ffffff; /* Color del texto del botón */
  border: none; /* Sin borde para un aspecto limpio */
  padding: 10px 20px; /* Espacio interno del botón */   
  border-radius: 5px; /* Bordes redondeados para el botón */
  font-size: 18px; /* Tamaño de letra del botón */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  transition: background-color 0.3s ease; /* Efecto suave al pasar el mouse */
}

.boton button:hover {
  background-color: #000000; /* Cambia el color del botón al pasar el mouse */
}


.icono-red:hover {
  transform: scale(1.1); /* Efecto de agrandar al pasar el mouse */
}

.redes-sociales {
  text-align: center; /* Centra los iconos de redes sociales */
  margin-top: 30px; /* Espacio entre el formulario y las redes sociales */
}

.redes-sociales a {
  text-decoration: none; /* Quita el subrayado de los enlaces */
  display: inline-block; /* Permite aplicar estilos de bloque a los enlaces */
}

.icono-red {
  width: 50px; /* Ancho de los iconos de redes sociales */
  height: auto;   /* Mantiene la proporción del icono */
  margin: 0 10px; /* Espacio entre los iconos */
  transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
  cursor: pointer; /* Cambia el cursor al pasar sobre el icono */
}


footer {
      background-color: #8a2c74;
      color: #fff;   /* 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
    }