/* ======================================================================
          S  O  M  O  S
====================================================================== */

#contieneOverHero {
  position: relative;
  z-index: 1;
}
#contieneOverHero #contieneTextoHeader {
  position: absolute;
  right: 5%;
  top: 40%;
  transform: translateY(-50%);
  width: 90%;
  max-width: 500px;
  z-index: 2;
}
#contieneOverHero #contieneTextoHeader h4 {
  font-weight: bold;
  font-style: italic;
}
#contieneOverHero #contieneTextoHeader h2 {
  font-size: 3rem;
  font-weight: bolder;
  line-height: 3.2rem;
  font-style: italic;
}
#contieneOverHero #contieneTextoHeader p {
  margin-top: 5px;
  font-size: 0.9rem;
}

#cuadroOverHero {
  width: 85%;
  margin: auto;
  z-index: 10;
}

#cuadroOverHero .contieneMitades .mitad #contieneImagenCuadro #cuadroOverHero {
  width: 90%;
  margin: auto;
}
#cuadroOverHero .contieneMitades .mitad #contieneTextoCuadro {
  box-sizing: border-box;
  padding: 40px;
}
#cuadroOverHero .contieneMitades .mitad #contieneTextoCuadro #comillas {
  width: 90px;
}
#cuadroOverHero .contieneMitades .mitad #contieneTextoCuadro p {
  font-size: 1.2rem;
  line-height: 1.6rem;
  padding: 10px 0;
}
.fondoAzul {
  background-color: #2d4989;
}
.textoBlanco {
  color: white!important;
}

/* Hero Home */

#contieneOverHero .heroHome {
  position: relative;
  width: 100%;
  overflow: hidden; /* evita desbordamiento en los extremos */
}
#contieneOverHero #fondoHeroHome {
  width: 100%;
}
#contieneOverHero #joseHeroHome {
  position: absolute;
  bottom: -5%;
  left: 45%;
  width: 20%;
  will-change: transform;
  transition: transform 0.5s ease-out; /* suavizado del movimiento */
}
/* Float animations */
@keyframes floatHoja01 {
  0%   { transform: translateY(0px) rotate(0deg); }
  33%  { transform: translateY(-16px) rotate(1.5deg); }
  66%  { transform: translateY(-9px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes floatHoja02 {
  0%   { transform: translateY(0px) rotate(0deg); }
  33%  { transform: translateY(-9px) rotate(-2deg); }
  66%  { transform: translateY(-16px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes floatJose {
  0%   { transform: translateX(0px) translateY(0px); }
  30%  { transform: translateX(5px) translateY(-3px); }
  65%  { transform: translateX(-4px) translateY(-1px); }
  100% { transform: translateX(0px) translateY(0px); }
}

@keyframes floatH4 {
  0%   { transform: translateX(0px); }
  40%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0px); }
}

@keyframes floatH2 {
  0%   { transform: translateX(0px); }
  35%  { transform: translateX(-3px); }
  70%  { transform: translateX(2px); }
  100% { transform: translateX(0px); }
}

#contieneOverHero #hoja01 {
  position: absolute;
  bottom: 10%;
  left: 25%;
  width: 100px;
  will-change: transform;
  animation: floatHoja01 6s ease-in-out infinite;
}

#contieneOverHero #hoja02 {
  position: absolute;
  bottom: 8%;
  left: 15%;
  width: 70px;
  will-change: transform;
  animation: floatHoja02 8s ease-in-out infinite; 
}

#contieneOverHero #hoja03 {
  width: 100px;
  position: absolute;
  bottom:5%;
  left: 30%;
  will-change: transform;
  animation: floatHoja01 6s ease-in-out infinite;
  z-index: 3;
}

#contieneOverHero #hoja04 {
  width: 70px;
  position: absolute;
  bottom: 8%;
  left: 36%;
  will-change: transform;
  animation: floatHoja02 8s ease-in-out infinite; 
  z-index: 3;
}




/* =========================================================================================
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
========================================================================================= */

@media (max-width: 768px) and (orientation: portrait) {


/* ======================================================================
          S  O  M  O  S     M  Ó  V  I  L  E  S
====================================================================== */
      #contieneOverHero .heroHome {
        width: 180%;
        transform: translateX(-23%);
        padding-top: 66px;
      }
      #contieneOverHero #hoja01 {
        width: 90px;
        left: 30%;
      }
      #contieneOverHero #hoja02 {
        left: 20%;
      }

      #contieneOverHero #contieneTextoHeader {
        position: relative;
        right: auto;
        top: auto;
        transform: translateY(0);
        width: 100%;
        max-width: 100%;
        background-color: #1c242e;
        padding: 40px;
      }
      #contieneOverHero #contieneTextoHeader h4 {
        font-weight: bold;
        font-style: italic;
      }
      #contieneOverHero #contieneTextoHeader h2 {
        font-size: 3rem;
        font-weight: bolder;
        line-height: 3.2rem;
        font-style: italic;
      }
      #contieneOverHero #contieneTextoHeader p {
        font-size: 1rem;
        line-height: 1.4rem;
      }

      #contieneOverHero #hoja03 {
        width: 70px;
        bottom:auto;
        top: 36%;
        left: auto;
        right: 15%;
      }

      #contieneOverHero #hoja04 {
         width: 50px;
        bottom:auto;
        top: 33%;
        left: auto;
        right: 10%;
      }

      #cuadroOverHero .contieneMitades .mitad #contieneTextoCuadro p {
        font-size: 1rem;
        line-height: 1.4rem;
      }

}