/* =========================================================
   FOTOGRAFÍAS HOME
   I.E. BOSQUES DE PINARES
   Complementa estilos-final-ajustado.css y servicios-ajustes.css
   ========================================================= */

/* =========================================================
   1. BANNERS / SLIDER PRINCIPAL
   Mantiene intactos los textos del index.
   ========================================================= */

.hero .diapositiva{
  background-repeat:no-repeat !important;
  background-size:cover !important;
}

/* Banner 1: Convivencia Armónica y Conocimiento */
.hero .diapositiva-1{
  background-image:
    linear-gradient(
      90deg,
      rgba(5,72,38,.94) 0%,
      rgba(5,72,38,.86) 36%,
      rgba(5,72,38,.58) 56%,
      rgba(5,72,38,.18) 78%,
      rgba(5,72,38,.08) 100%
    ),
    url("imagenes/home/banner-convivencia.jpg") !important;

  background-position:center 47% !important;
}

/* Banner 2: Inscripciones y cupos */
.hero .diapositiva-2{
  background-image:
    linear-gradient(
      90deg,
      rgba(4,67,35,.95) 0%,
      rgba(4,67,35,.86) 38%,
      rgba(4,67,35,.57) 58%,
      rgba(4,67,35,.16) 80%,
      rgba(4,67,35,.06) 100%
    ),
    url("imagenes/home/banner-matriculas.jpg") !important;

  background-position:center 42% !important;
}

/* Banner 3: Información pública */
.hero .diapositiva-3{
  background-image:
    linear-gradient(
      90deg,
      rgba(5,72,38,.95) 0%,
      rgba(5,72,38,.87) 38%,
      rgba(5,72,38,.60) 58%,
      rgba(5,72,38,.19) 80%,
      rgba(5,72,38,.08) 100%
    ),
    url("imagenes/home/banner-informacion.jpg") !important;

  background-position:center 43% !important;
}

.hero .diapositiva-contenido{
  position:relative;
  z-index:2;
  max-width:650px;
}

.hero .diapositiva-contenido h1,
.hero .diapositiva-contenido h2,
.hero .diapositiva-contenido p,
.hero .diapositiva-contenido .etiqueta{
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}


/* =========================================================
   2. TARJETAS DE TRAYECTORIA EDUCATIVA
   ========================================================= */

.oferta-card-home{
  overflow:hidden;
}

/* La fotografía se integra al borde superior de cada tarjeta */
.oferta-foto-home{
  height:170px;
  margin:-25px -22px 20px;
  overflow:hidden;

  border-radius:18px 18px 0 0;
  background:#eaf2ec;
}

.oferta-foto-home img{
  display:block;
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;

  transition:transform .35s ease;
}

.oferta-card-home:hover .oferta-foto-home img{
  transform:scale(1.035);
}

/* Ajuste del encuadre por nivel */
.oferta-card-home:nth-child(1) .oferta-foto-home img{
  object-position:center 38%;
}

.oferta-card-home:nth-child(2) .oferta-foto-home img{
  object-position:center 34%;
}

.oferta-card-home:nth-child(3) .oferta-foto-home img{
  object-position:center 28%;
}

.oferta-card-home:nth-child(4) .oferta-foto-home img{
  object-position:center 25%;
}


/* =========================================================
   3. RESPONSIVE
   ========================================================= */

@media (max-width:850px){

  .hero .diapositiva-1,
  .hero .diapositiva-2,
  .hero .diapositiva-3{
    background-position:center center !important;
  }

  .hero .diapositiva-1{
    background-image:
      linear-gradient(rgba(4,68,36,.84),rgba(4,68,36,.84)),
      url("imagenes/home/banner-convivencia.jpg") !important;
  }

  .hero .diapositiva-2{
    background-image:
      linear-gradient(rgba(4,68,36,.84),rgba(4,68,36,.84)),
      url("imagenes/home/banner-matriculas.jpg") !important;
  }

  .hero .diapositiva-3{
    background-image:
      linear-gradient(rgba(4,68,36,.84),rgba(4,68,36,.84)),
      url("imagenes/home/banner-informacion.jpg") !important;
  }

  .oferta-foto-home{
    height:185px;
  }
}


@media (max-width:520px){

  .oferta-foto-home{
    height:180px;
  }

  .hero .diapositiva-contenido{
    max-width:100%;
  }
}