/* Header base ya existente */
.header {
  width: 100%;
  position: relative;
}




/* -------------------- Media Queries -------------------- */



/* Tablets más pequeñas y móviles grandes (≤768px) */
@media screen and (max-width: 768px) {
  .header {
    height: 80vh; /* menos altura para tablet */
    background-attachment: scroll; /* evita efecto fijo que puede cortar imagen */
  }
}

/* Móviles pequeños (≤480px) */
@media screen and (max-width: 480px) {
  .header {
    height: 70vh;
  }

}

/* Móviles pequeños (≤480px) */
@media screen and (max-width: 340px) {

  .header-content{
    width: 300px;
  }
}