/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/


/* importacion */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* fuentes */

/* .ffNunito {
  font-family: 'Nunito Sans', sans-serif!important;
}
.ffPoppins {
  font-family: 'Poppins', sans-serif!important;
} */

.ffLora {
  font-family: 'Lora', sans-serif !important;
}

.ffLato {
  font-family: 'Lato', sans-serif !important;
}

/* fuente grosor */
.fwNormal {
  font-weight: 400;
}

.fwBold {
  font-weight: 700;
}

.fwSemiBold {
  font-weight: 600;
}

.fwExtraBold {
  font-weight: 800;
}


/* tamaño de fuente */

.fs21 {
  font-size: 21px;
}

.fs22 {
  font-size: 22px;
}

.fs23 {
  font-size: 23px;
}

.fs25 {
  font-size: 25px;
}

.fs30 {
  font-size: 30px;
}

.fs35 {
  font-size: 35px;
}

.fs48 {
  font-size: 48px;
}


/* interlineado */

.ls0 {
  letter-spacing: 0px;
}


/* interlineado de oracion (espacio debajo de la oracion) */
.lh22 {
  line-height: 22px;
}

.lh26 {
  line-height: 26px;
}

.lh28 {
  line-height: 28px;
}

.lh29 {
  line-height: 29px;
}

.lh30 {
  line-height: 30px;
}

.lh40 {
  line-height: 40px;
}

.lh48 {
  line-height: 48px;
}

.lh52 {
  line-height: 52px;
}

.lh65 {
  line-height: 65px;
}

.lh79 {
  line-height: 79px;
}


/* colores */
.blanco {
  color: #FFFFFF;
}

.rojo {
  color: #C1272D;
}

.casiNegro {
  color: #090909;
}

.negro {
  color: #000000;
}

.negro-hostvet {
  color: #4A4947
}



/* padding de abajo */
.pb15 {
  padding-bottom: 35px;
}

/* margin de abajo */
.mb0 {
  margin-bottom: 0px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

/* .............. botones ............ */

.btn-white {
  background: #EFEDE7;
  box-shadow: 0px 3px 6px #000000BF;
  border-radius: 35px;
  padding-inline: 20px;
  padding-block: 20px;
  font: normal normal bold 21px/25px Lato;
  letter-spacing: 0px;
  color: #1D263D;
}

.btn-white:hover {
  /* Efecto de levantamiento: */
  /* 1. Aumentamos el sombreado (más abajo y difuso) */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  /* Opcional: ajusta la opacidad/color si es necesario */

  /* 2. Opcional: Mover el botón ligeramente hacia arriba (y hacia la derecha/izquierda si quieres) */
  transform: translateY(-2px);

  /* 3. Opcional: Haz que el cursor cambie a "pointer" para indicar que es interactivo */
  cursor: pointer;
}

.btn-blue {
  background: #1D263D;
  box-shadow: 0px 3px 6px #000000BF;
  border-radius: 35px;
  padding-inline: 20px;
  padding-block: 20px;
  font: normal normal bold 21px/25px Lato;
  letter-spacing: 0px;
  color: white;
}

.btn-blue:hover {
  color: white;
  /* Efecto de levantamiento: */
  /* 1. Aumentamos el sombreado (más abajo y difuso) */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  /* Opcional: ajusta la opacidad/color si es necesario */

  /* 2. Opcional: Mover el botón ligeramente hacia arriba (y hacia la derecha/izquierda si quieres) */
  transform: translateY(-2px);

  /* 3. Opcional: Haz que el cursor cambie a "pointer" para indicar que es interactivo */
  cursor: pointer;
}



.btn-blue-xl {
  background: #1D263D;
  box-shadow: 0px 3px 6px #000000BF;
  border-radius: 35px;
  padding-inline: 52px;
  padding-block: 20px;
  font: normal normal bold 21px/25px Lato;
  letter-spacing: 0px;
  color: white;
}

.btn-blue-xl:hover {
  color: white;
  /* Efecto de levantamiento: */
  /* 1. Aumentamos el sombreado (más abajo y difuso) */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  /* Opcional: ajusta la opacidad/color si es necesario */

  /* 2. Opcional: Mover el botón ligeramente hacia arriba (y hacia la derecha/izquierda si quieres) */
  transform: translateY(-2px);

  /* 3. Opcional: Haz que el cursor cambie a "pointer" para indicar que es interactivo */
  cursor: pointer;
}

.btn-redWhite {
  background: #EFEDE7;
  box-shadow: 0px 3px 6px #000000BF;
  border-radius: 35px;
  padding-inline: 52px;
  padding-block: 20px;
  font: normal normal bold 21px/25px Lato;
  letter-spacing: 0px;
  color: #842426;
}

.btn-redWhite:hover {
  color: #842426;
  /* Efecto de levantamiento: */
  /* 1. Aumentamos el sombreado (más abajo y difuso) */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  /* Opcional: ajusta la opacidad/color si es necesario */

  /* 2. Opcional: Mover el botón ligeramente hacia arriba (y hacia la derecha/izquierda si quieres) */
  transform: translateY(-2px);

  /* 3. Opcional: Haz que el cursor cambie a "pointer" para indicar que es interactivo */
  cursor: pointer;
}





.btn-white-xl {
  background: #EFEDE7;
  box-shadow: 0px 3px 6px #000000BF;
  border-radius: 35px;
  font: normal normal bold 21px/25px Lato;
  letter-spacing: 0px;
  color: #1D263D;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 252px;
  height: 70px;
}

.btn-white-xl {
  /* Efecto de levantamiento: */
  /* 1. Aumentamos el sombreado (más abajo y difuso) */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.4);
  /* Opcional: ajusta la opacidad/color si es necesario */

  /* 2. Opcional: Mover el botón ligeramente hacia arriba (y hacia la derecha/izquierda si quieres) */
  transform: translateY(-2px);

  /* 3. Opcional: Haz que el cursor cambie a "pointer" para indicar que es interactivo */
  cursor: pointer;
}

/* VISTA RESPONSIVE */
@media only screen and (max-width: 900px) {

  .btn-white {
    font: normal normal bold 18px/21px Lato;
  }


  .btn-blue {
    font: normal normal bold 18px/21px Lato;
  }

  .btn-blue-xl {
    padding-inline: 42px;
    font: normal normal bold 18px/25px Lato;
  }


  .btn-white-xl {
    font: normal normal bold 18px/21px Lato;
    width: 215px;
    height: 65px;
  }

  .btn-redWhite {
    padding-inline: 40px;
    font: normal normal bold 18px/25px Lato;
  }

}

/* VISTA TABLET (en caso que sea necesario adaptar elementos que no se ven bien del traspaso de mobile a tablet */
@media (min-width: 715px) and (max-width: 1000px) {}