/* ===== Variables y Reset ===== */
:root {
  --primary: #495338; /* Verde oscuro */
  --bg: #f4f4f4;      /* Fondo página */
  --card: #fff;       /* Fondo tarjetas */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}



header h1 {
  font-weight: 900;              /* más grueso que bold */
  letter-spacing: 1px;           /* separa un poco las letras */
  text-transform: uppercase;     /* asegura mayúsculas */
  text-align: center;            /* centra el texto */
  font-size: clamp(28px, 5vw, 50px); /* tamaño mínimo 24px, máximo 60px, escala según pantalla */
  margin: 0 auto;                /* centra con margen automático */
}

/* Cambia el color de los enlaces de la barra de navegación */
.navbar .nav-link {
  color: #000000 !important;  /* Negro */
  font-weight: bold;          /* Más negrita si quieres resaltar */
}

/* Cambia el color al pasar el mouse */
.navbar .nav-link:hover {
  color: #555555 !important;  /* Gris oscuro en hover */
}

/* ====== Menú responsive ====== */


@media (min-width: 250px) and (max-width: 600px) {



  header .navbar {
    margin-top: 0 !important;      /* sin separación adicional */
  }

  header .navbar .nav {
    display: flex !important;
    flex-wrap: wrap !important;         
    justify-content: center !important;
    
    border-radius: 6px !important;
    padding: 8px !important;
  }

  header .navbar .nav-item {
    flex: 1 1 15% !important;   /* mejor 30% para que quepan 3 arriba y 2 abajo */
    text-align: center !important;
    margin: 0px 8px !important;
  }

  header .navbar .nav-link {
    display: block !important;
    color: #000000 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    padding: 6px 4px !important;
    font-size: 14px !important;   /* aquí controlas el tamaño de letra */
  }

  header .navbar .nav-link:hover {
    color: #4a5430 !important;
  }
}

/* TABLETS (601–1024px): menú en línea centrado */
@media (min-width: 601px) and (max-width: 1024px) {
  header .navbar .nav {
   display: flex !important;
    flex-wrap: wrap !important;         
    justify-content: center !important;
    
    border-radius: 6px !important;
    padding: 8px !important;
  }

  

  header .navbar {
    margin-top: 0 !important;      /* sin separación adicional */
  }


  header .navbar .nav-link {
   
    
      display: block !important;
    color: #000000 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    padding: 1px 13px !important;
    font-size: 14px !important;  
  }

   header .navbar .nav-link:hover {
    color: #4a5430 !important;
  }
}


/* ESCRITORIO (≥1025px): se mantiene como lo tienes */
@media (min-width: 1025px) {
  header .navbar .nav {
    flex-direction: row !important;
    justify-content: center !important;
  }

   header .navbar .nav-link:hover {
    color: #4a5430 !important;
  }
}


.photo {
  width: 100%;
  height: 100vh; /* Ocupa toda la altura de la pantalla */
  position: relative;
  background: url('../imagenes/fondo.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Overlay de la sección principal */
.photo-overlay {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(77, 106, 113, 0.5);
}
/* Overlay de modales */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 30px;
  z-index: 1000;
}
.modal-overlay.open { display: flex; }
/* Texto dentro de .photo */


.photo .eff p {
  color: #F8F812;
  z-index: 2;
  position: relative;
  top: -5vh; /* Ajusta la posición según altura de pantalla */
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
  font-weight: 800;
  text-align: center;
  margin: 0 auto 1.5rem;
}

.photo .eff h4 {
  color: #FFFFFF;
  z-index: 2;
  position: relative;
  font-size: clamp(32px, 5vw, 80px); /* Escala entre 32px y 80px */
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 2rem;
  text-align: center;
  line-height: 1.2;
}

/* Media queries para ajustes finos */
@media only screen and (max-width: 600px) {
  .photo {
    height: 38vh; /* Menor altura en móviles */
    padding: 1rem;
  }

  .photo .eff h4 {
    margin-top: 1rem;
  }

  .photo .eff p {
    top: -2vh;
  }
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .photo {
    height: 90vh; /* Altura intermedia para tabletas */
  }
}




.content{
  width: 100%;
  position: relative;
  z-index: 1;
  background-color: #ffffff;
}