@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&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&display=swap");
/*
$font-size-xs:14px;
$font-size-s:16px;
$font-size-m:20px;
$font-size-l:32px;
$font-size-xl:40px;
$font-size-xxl:48px;
$font-size-xxxl:54px;
*/
.ccolor-white {
  color: #fdfdfd;
}

.ccolor-black {
  color: #1f1f29;
}

.ccolor-primary {
  color: #FBC02D;
}

.ccolor-secondary {
  color: #38B14C;
}

.cfont-size-xs {
  font-size: 0.875rem !important;
}

.cfont-size-m {
  font-size: 1.25rem !important;
}

.cfont-size-l {
  font-size: 2rem !important;
}

.cfont-size-xl {
  font-size: 2.5rem !important;
}

.cfont-size-xxl {
  font-size: 3rem !important;
}

.cfont-size-xxxl {
  font-size: 3.375rem !important;
}

/* VARIABLES */
/* GLOBAL STYLES */
body {
  font-family: "Nunito", serif;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background-color: #ffffff;
}

h1 {
  font-family: "Poppins", serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}

h2 {
  font-family: "Poppins", serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}

h3 {
  font-family: "Poppins", serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}

.h3--subtitle {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  display: block;
  text-transform: none;
}

h4 {
  font-family: "Poppins", serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
  -webkit-margin-end: 0px;
          margin-inline-end: 0px;
}

h5 {
  font-family: "Poppins", serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
}

.custom-btn-primary {
  background-color: #FBC02D;
  border-color: #FBC02D;
  border-radius: 24px;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Poppins", serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.custom-btn-primary:hover {
  background-color: #b1881d;
  border-color: #b1881d;
}
.custom-btn-primary:active {
  background-color: #f0ad05 !important; /* Ajusta el color al hacer clic */
  border-color: #f0ad05 !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.custom-btn-primary:focus {
  background-color: #b1881d;
  border-color: #b1881d;
  box-shadow: 0 0 0 0.1rem rgba(251, 192, 45, 0.25) !important; /* Añadir foco con sombra */
}

.custom-btn-secondary {
  background-color: #38B14C;
  border-color: #38B14C;
  border-radius: 24px;
  padding-left: 34px;
  padding-right: 34px;
  font-family: "Poppins", serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.custom-btn-secondary:hover {
  background-color: #267f35;
  border-color: #267f35;
}
.custom-btn-secondary:active {
  background-color: #2c8a3b !important; /* Ajusta el color al hacer clic */
  border-color: #2c8a3b !important;
  box-shadow: none; /* Elimina la sombra cuando se hace clic */
}
.custom-btn-secondary:focus {
  background-color: #267f35;
  border-color: #267f35;
  box-shadow: 0 0 0 0.1rem rgba(56, 177, 76, 0.25) !important; /* Añadir foco con sombra */
}

.custom-btn-terciary {
  text-decoration: none;
}
.custom-btn-terciary:hover {
  text-decoration: underline;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
}

.custom-navbar {
  padding: 0px 0 20px 0;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.custom-navbar .navbar-toggler {
  border-color: transparent;
}
.custom-navbar .navbar-toggler:active, .custom-navbar .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar__logo {
  height: 130px;
}
.navbar__item {
  padding: 0px 10px 0 10px;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}
.navbar__liga {
  font-family: "Nunito", serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0.9;
  transition: 0.3s all ease;
  position: relative;
}
@media (min-width: 768px) {
  .navbar__liga:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    background: #38B14C;
    height: 3px;
    opacity: 1;
    visibility: visible;
    width: 0;
    transition: 0.15s all ease-out;
  }
}
.navbar__liga:hover {
  opacity: 1;
}
.navbar__liga:hover:before {
  width: calc(100% - 20px);
}

.logo-header {
  background-color: #38B14C;
  border-radius: 0 0 24px 24px;
}

.homeHero {
  background-image: url("../img/home_hero_fondo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
  background-color: #074996;
  height: 800px;
}
@media (max-width: 768px) {
  .homeHero { /* Puedes ajustar el ancho según lo que consideres "móvil" */
    background-position: bottom right; /* En móviles, la imagen estará en la parte superior centrada */
    background-size: auto;
  }
}

.heroAhorraPaga {
  background-image: url("../img/ahorrapaga_hero_fondo.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom right;
}
@media (max-width: 768px) {
  .heroAhorraPaga { /* Puedes ajustar el ancho según lo que consideres "móvil" */
    background-position: bottom right; /* En móviles, la imagen estará en la parte superior centrada */
    background-size: 100%;
  }
}

.complicaciones {
  background-image: url("../img/kw-marcaagua.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right -100px bottom -100px;
  background-color: #f5f5f5;
}
.complicaciones__tituloCard {
  font-family: "Poppins", serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
  color: #fdfdfd;
}

.siempre {
  background-image: url("../img/KW-siempreluz-fondo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
}

.calculadora {
  background-color: #fdfdfd;
  background-image: url("../img/kw-marcaagua.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right -100px bottom -100px;
}

.testimoniales {
  background-color: #38B14C;
}
.testimoniales__titulo {
  font-family: "Nunito", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.testimoniales__texto {
  font-family: "Nunito", serif;
  font-size: 0.875rem;
  font-weight: 300;
}
.testimoniales__ahorro {
  font-family: "Nunito", serif;
  font-size: 0.875rem;
  font-weight: 300;
}

.footer {
  background-color: #fdfdfd;
}
.footer__lista {
  list-style: none;
  padding: 5px 0 5px 0;
}
.footer__link {
  font-family: "Nunito", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #1f1f29;
  letter-spacing: 0.08em;
  text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}
.footer__link--simple {
  font-family: "Nunito", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1f1f29;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.hogar-hero {
  background-image: url("../img/hogar_hero_fondo.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}
@media (max-width: 768px) {
  .hogar-hero { /* Puedes ajustar el ancho según lo que consideres "móvil" */
    background-position: bottom right; /* En móviles, la imagen estará en la parte superior centrada */
    background-size: auto;
  }
}

.hogar-ahorra {
  background-image: url("../img/kw-marcaagua.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right -100px bottom -100px;
  background-color: #fdfdfd;
}
.hogar-ahorra__detalle {
  font-size: 16px;
  font-weight: 300;
}
.hogar-ahorra__cta {
  font-size: 1.25rem;
  font-weight: 500;
}

.hogar-alcance {
  background-color: #38B14C;
  color: #fdfdfd;
}
.hogar-alcance__detalle {
  font-size: 1.25rem;
  font-weight: 400;
}

.hogar-preocupaciones {
  background-color: #f5f5f5;
}

.empresas-hero {
  background-image: url("../img/empresas_hero_fondo.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}
@media (max-width: 768px) {
  .empresas-hero { /* Puedes ajustar el ancho según lo que consideres "móvil" */
    background-position: bottom right; /* En móviles, la imagen estará en la parte superior centrada */
    background-size: auto;
  }
}

.empresas-deducible {
  background-image: url("../img/kw-marcaagua.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right -100px bottom -100px;
  background-color: #fdfdfd;
}
.empresas-deducible__detalle {
  font-size: 16px;
  font-weight: 300;
}
.empresas-deducible__cta {
  font-size: 1.25rem;
  font-weight: 500;
}

.empresas-financiamiento {
  background-color: #f5f5f5;
}
.empresas-financiamiento__detalle {
  font-size: 16px;
  font-weight: 300;
}
.empresas-financiamiento__financiamiento {
  border-color: #FBC02D;
}

.financiamientos-hero {
  background-image: url("../img/ahorrapaga_hero_fondo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}
@media (max-width: 768px) {
  .financiamientos-hero { /* Puedes ajustar el ancho según lo que consideres "móvil" */
    background-position: bottom left; /* En móviles, la imagen estará en la parte superior centrada */
    background-size: 600px;
  }
}

.financiamientos-detalle {
  background-image: url("../img/kw-marcaagua.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right -100px bottom -100px;
  background-color: #fdfdfd;
}

@-webkit-keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@-webkit-keyframes appear_moveLeft {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes appear_moveLeft {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
@-webkit-keyframes appear_moveRight {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes appear_moveRight {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}
.block__animated--1 {
  -webkit-animation: appear_moveLeft 0.5s linear;
          animation: appear_moveLeft 0.5s linear;
}

.block__animated--2 {
  -webkit-animation: appear_moveRight 0.5s linear;
          animation: appear_moveRight 0.5s linear;
}

.block__animated--3 {
  -webkit-animation: appear 5s linear;
          animation: appear 5s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.block__animated--4 {
  -webkit-animation: appear_moveLeft 1s linear;
          animation: appear_moveLeft 1s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.block__animated--5 {
  -webkit-animation: appear_moveRight 1s linear;
          animation: appear_moveRight 1s linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

.block__animated--6 {
  -webkit-animation: appear 1s linear;
          animation: appear 1s linear;
}

.animated__atras--1 {
  -webkit-animation-delay: 0.2;
          animation-delay: 0.2;
}

.animated__atras--2 {
  -webkit-animation-delay: 0.4;
          animation-delay: 0.4;
}

.animated__atras--3 {
  -webkit-animation-delay: 0.6;
          animation-delay: 0.6;
}/*# sourceMappingURL=estilos.css.map */