/*
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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Riot&display=swap');

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

.ffPoppins {
  font-family: 'Poppins', 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 */
.fs22 {
  font-size: 22px;
}

.fs25 {
  font-size: 25px;
}

.fs30 {
  font-size: 30px;
}

.fs35 {
  font-size: 35px;
}


/* interlineado */
.l-s018 {
  letter-spacing: -0.18px;
}

.l-s024 {
  letter-spacing: -0.24px;
}

.ls0 {
  letter-spacing: 0px;
}

.ls05 {
  letter-spacing: 0.5px;
}

.ls07 {
  letter-spacing: 0.7px;
}

.ls044 {
  letter-spacing: 0.44px;
}


/* 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;
}

.lh52 {
  line-height: 52px;
}

.lh79 {
  line-height: 79px;
}


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

.verdeAgua {
  color: #1DB2AC;
}

.bordo {
  color: #8B1A1E;
}

.rojo {
  color: #C1272D;
}

.casiNegro {
  color: #090909;
}

.negro {
  color: #000000;
}


/* 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;
}

/* tipografia */
.mayuscula {
  text-transform: uppercase;
}

.minuscula {
  text-transform: lowercase;
}

.tipoNormal {
  text-transform: initial;
}

@media only screen and (max-width: 375px) {
  .lh26 {
    line-height: 25px;
  }

  .fs35 {
    font-size: 25px;
  }
}


/* --------------------------------------------------------------------------------
-------------------------------------SNIPETS-------------------------------------
-------------------------------------------------------------------------------- */

/* BOTONES */
.btn-o-arrow {
  margin-left: 15px;
}

.btn-o {
  width: 285px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #CC6223;
  border-radius: 12px;
  font: normal normal 600 18px/27px Poppins;
  letter-spacing: 0px;
  color: #FAFAFA;
}

.btn-o:hover {
  color: #FAFAFA;
}

.btn-t {
  width: 203px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff12;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  font: normal normal 600 18px/27px Poppins;
  letter-spacing: 0px;
  color: #FAFAFA;
}

.btn-t:hover {
  color: #FAFAFA;
}

.btn-orange {
  padding-block: 17px;
  padding-inline: 35px;
  background: #CC6223;
  border-radius: 12px;
  font: normal normal 600 18px/27px Poppins;
  letter-spacing: 0px;
  color: #FAFAFA;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.btn-orange:hover {
  color: #FAFAFA;
}

.btn-black {
  padding-block: 17px;
  padding-inline: 35px;
  background: #151B35;
  border-radius: 12px;
  font: normal normal 600 18px/27px Poppins;
  letter-spacing: 0px;
  color: #FAFAFA;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.btn-black:hover {
  color: #FAFAFA;
}

/* Hover suave (solo en dispositivos con hover: desktop/laptop) */
.btn-o,
.btn-t,
.btn-orange,
.btn-black {
  transition: transform 280ms ease, box-shadow 280ms ease;
  transform: translateZ(0);
  /* ayuda a que se vea más fluido */
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {

  .btn-o:hover,
  .btn-t:hover,
  .btn-orange:hover,
  .btn-black:hover {
    transform: scale(1.05);
  }
}

/* (Opcional) accesibilidad: si el usuario pide menos animaciones */
@media (prefers-reduced-motion: reduce) {

  .btn-o,
  .btn-t,
  .btn-orange,
  .btn-black {
    transition: none;
  }
}


@media only screen and (max-width: 900px) {

  .btn-o {
    /* padding-block: 14px;
    padding-inline: 28px; */
    font: normal normal 600 16px/27px Poppins;
  }

  .btn-t {
    /* padding-block: 15px;
    padding-inline: 30px; */
    font: normal normal 600 16px/27px Poppins;
  }

  .btn-orange {
    padding-block: 14px;
    padding-inline: 28px;
    font: normal normal 600 16px/27px Poppins;
  }

  .btn-black {
    padding-block: 14px;
    padding-inline: 28px;
    font: normal normal 600 16px/27px Poppins;
  }

}


/* TEXTOS */
.rockstone-heads {
  text-align: center;
  font: normal normal normal 24px/29px Protest Riot;
  letter-spacing: 0px;
  color: #CC6223;
}

.rockstone-titles {
  text-align: center;
  font: normal normal bold 45px/68px Poppins;
  letter-spacing: 0px;
  color: #FAFAFA;
}

.rockstone-subtitles {
  text-align: center;
  font: normal normal normal 20px/30px Poppins;
  letter-spacing: 0px;
  color: #FAFAFA;
}

@media only screen and (max-width: 900px) {

  .rockstone-heads {
    font: normal normal normal 20px/25px Protest Riot;
  }

  .rockstone-titles {
    font: normal normal bold 32px/36px Poppins;
    margin-block: 12px;
  }

  .rockstone-subtitles {
    font: normal normal normal 16px/25px Poppins;
  }


}