/* ==============================
   responsive4.css
   Mejora visual de imágenes y videos
   ============================== */

/* --- Ajustes generales --- */
img, iframe {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 10px auto;
}

/* --- Tablas con imágenes --- */
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

td {
  padding: 5px;
}

/* --- Imágenes de galería --- */
.img-acostadas,
.img-largas,
.img-largas2,
.img-largas3,
.img-largas4 {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Iframes de videos ---*/
iframe {
  width: 100%;
  max-width: 600px;
  height: 340px;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* --- Banner principal --- */
.imagen-inicio {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Texto dentro de secciones --- */
.texto-principal,
.texto-principal2 {
  text-align: center;
  font-size: 1.3em;
  color: #fff;
}
 
/* --- Ajustes para dispositivos pequeños --- */
@media screen and (max-width: 1024px) {
  iframe {
    height: 300px;
  }
}

@media screen and (max-width: 768px) {
  /* Las imágenes se apilan verticalmente */
  table tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  td {
    flex: 1 1 45%;
    max-width: 45%;
  }

  iframe {
    height: 260px;
  }

  /*.texto-principal,
  .texto-principal2 {
    font-size: 1.1em;
  }*/
}

@media screen and (max-width: 480px) {
  td {
    flex: 1 1 100%;
    max-width: 100%;
  }

  iframe {
    height: 220px;
  }

  .texto-principal,
  .texto-principal2 {
    font-size: 1em;
  }

  .imagen2 {
    width: 60px;
    height: auto;
  }

  .tamañodepie {
    font-size: 0.9em;
    text-align: center;
  }
}

/* --- Pie de página --- */
#info {
  text-align: center;
  background: #111;
  color: #fff;
  padding: 20px;
}

.tabla-de-iconos img {
  width: 80px;
  height: auto;
  transition: transform 0.3s;
}

.tabla-de-iconos img:hover {
  transform: scale(1.1);
}
/* =======================================
   Ajuste final: Texto sobre la imagen del banner
   ======================================= */

#banner {
  position: relative;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

#banner img.imagen-inicio {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* Mantiene el color original del texto */
#banner .titulo {
  position: absolute;
  top: 38%;               /* 🔹 Subido un poco más sobre la imagen */
  left: 50%;
  transform: translate(-50%, -50%);
  color: inherit;
  font-size: 2.6em;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  z-index: 2;
  text-align: center;
}

/* Texto principal debajo del título */
#banner .texto-principal,
#banner .texto-principal2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: inherit;
  text-align: center;
  z-index: 2;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* Ajuste fino para que los textos queden proporcionados */
#banner .texto-principal {
  top: 60%;
  font-size: 1.3em;
}

#banner .texto-principal2 {
  top: 68%;
  font-size: 1.2em;
}

/* Capa sutil para resaltar texto sobre la imagen */
#banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.15);
  z-index: 1;
}

/* Contenedor sin márgenes extra */
#banner .contenedor {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* ✅ No se tocan los iframes ni las tablas de imágenes */
iframe, table {
  position: static;
}

/* Responsivo */
@media screen and (max-width: 768px) {
  #banner .titulo {
    font-size: 2em;
    top: 35%;
  }
  #banner .texto-principal {
    top: 58%;
    font-size: 1.1em;
  }
  #banner .texto-principal2 {
    top: 66%;
    font-size: 1em;
  }
}

@media screen and (max-width: 480px) {
  #banner .titulo {
    font-size: 1.6em;
    top: 32%;
  }
  #banner .texto-principal,
  #banner .texto-principal2 {
    font-size: 0.95em;
  }
}