/* VARIABLES AND CUSTOM PROPS */

:root{

/* VARIABLES */

  /* Responsive sizes */

  --size-01: 0.0625rem;
  --size-02: 0.125rem;
  --size-03: 0.1875rem;
  --size-04: 0.25rem;
  --size-05: 0.3125rem;
  --size-10: 0.625rem;
  --size-12: 0.75rem;
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-22: 1.375rem;
  --size-24: 1.5rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;
  --size-44: 2.75rem;
  --size-48: 3rem;
  --size-64: 4rem;
  
  /* Font weights */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Font families */

  --ff-base: "Poppins", system-ui, sans-serif;

  /* Colors */

  --clr-white-010: hsla(0, 0%, 100%, 0.1);
  --clr-white-020: hsla(0, 0%, 100%, 0.2);
  --clr-white-030: hsla(0, 0%, 100%, 0.3);
  --clr-white-040: hsla(0, 0%, 100%, 0.4);
  --clr-white-050: hsla(0, 0%, 100%, 0.5);
  --clr-white-060: hsla(0, 0%, 100%, 0.6);
  --clr-white-070: hsla(0, 0%, 100%, 0.7);
  --clr-white-080: hsla(0, 0%, 100%, 0.8);
  --clr-white-090: hsla(0, 0%, 100%, 0.9);
  --clr-white-100: hsla(0, 0%, 100%);
  
  --clr-black-010: hsla(0, 0%, 0%, 0.1);
  --clr-black-020: hsla(0, 0%, 0%, 0.2);
  --clr-black-030: hsla(0, 0%, 0%, 0.3);
  --clr-black-040: hsla(0, 0%, 0%, 0.4);
  --clr-black-050: hsla(0, 0%, 0%, 0.5);
  --clr-black-060: hsla(0, 0%, 0%, 0.6);
  --clr-black-070: hsla(0, 0%, 0%, 0.7);
  --clr-black-080: hsla(0, 0%, 0%, 0.8);
  --clr-black-090: hsla(0, 0%, 0%, 0.9);
  --clr-black-100: hsl(0, 0%, 0%);

  --clr-cream-200: hsl(22, 80%, 85%);
  --clr-cream-300: hsl(25, 59%, 76%);
  --clr-cream-400: hsl(20, 57%, 69%);

  --clr-pastel-blue-50: hsl(200, 100%, 93%);
  --clr-pastel-blue-100: hsl(201, 100%, 87%);
  --clr-pastel-blue-200: hsl(201, 100%, 80%);
  --clr-pastel-blue-300: hsl(201, 100%, 70%);
  --clr-pastel-blue-400: hsl(201, 100%, 63%);

  --clr-pastel-yellow-25: hsl(49, 100%, 95%);
  --clr-pastel-yellow-50: hsl(49, 100%, 90%);
  --clr-pastel-yellow-100: hsl(49, 100%, 87%);
  --clr-pastel-yellow-200: hsl(49, 100%, 80%);
  --clr-pastel-yellow-300: hsl(49, 100%, 70%);
  --clr-pastel-yellow-400: hsl(49, 100%, 63%);
  --clr-pastel-yellow-500: hsl(45, 100%, 53%);
  --clr-pastel-yellow-600: hsl(41, 100%, 43%);
  --clr-pastel-yellow-700: hsl(35, 100%, 33%);
  --clr-pastel-yellow-800: hsl(30, 100%, 23%);


  --clr-pastel-red-25: hsl(6, 100%, 95%);
  --clr-pastel-red-50: hsl(6, 100%, 90%);
  --clr-pastel-red-100: hsl(6, 100%, 87%);
  --clr-pastel-red-190: hsl(6, 100%, 81%);
  --clr-pastel-red-200: hsl(6, 100%, 80%);
  --clr-pastel-red-300: hsl(6, 100%, 70%);
  --clr-pastel-red-400: hsl(6, 87%, 63%);
  --clr-pastel-red-500: hsl(6, 87%, 53%);
  --clr-pastel-red-600: hsl(6, 87%, 40%);
  --clr-pastel-red-700: hsl(6, 100%, 30%);
  --clr-pastel-red-800: hsl(6, 100%, 20%);
  --clr-pastel-red-900: hsl(6, 90%, 10%);

  /* Yellow tones */

  --clr-yellow-400: hsl(43, 100%, 67%);
  --clr-yellow-600: hsl(40, 100%, 59%);
  
  /* Purple tones */

  --clr-purple-50: hsl(275, 100%, 95%);
  --clr-purple-100: hsl(275, 100%, 90%);
  --clr-purple-200: hsl(275, 70%, 82%);
  --clr-purple-300: hsl(281, 46%, 75%);
  --clr-purple-400: hsl(281, 60%, 69%);
  --clr-purple-500: hsl(276, 46%, 57%);
  --clr-purple-600: hsl(275, 57%, 39%);
  --clr-purple-700: hsl(268, 62%, 31%);
  --clr-purple-800: hsl(266, 65%, 22%);


  /* Transition times */

  --time-transition-fast: .1s;
  --time-transition-medium: .2s;
  --time-transition-slow: .3s;


  /* CUSTOM PROPS */

  --nav-size: var(--size-48);
  --default-layout-size: 85%;
  --max-layout-size: 70rem;

  --shadow-1: .2em .5em .5em var(--clr-black-030);
  --shadow-2: .2em .5em .5em var(--clr-black-010);

  --clr-btn-1: var(--clr-pastel-red-300);


  /* 
  ------------------
    SIZE VARIABLES 
  ------------------
  */

  --navbar-height: 3.5rem;
  --navbar-icon: calc(var(--navbar-height) - 1rem);
  --layout-max-width: min(85vw, 90ch);


  /*
  ------------------- 
    COLOR VARIABLES 
  -------------------
  */

  --clr-bg-lighter: var(--clr-purple-100);
  --clr-bg-light: var(--clr-purple-300);
  --clr-bg-middle: var(--clr-purple-400);
  --clr-bg-dark: var(--clr-purple-500);
  --clr-bg-darker: var(--clr-purple-600);

  --clr-navbar: var(--clr-white-100);

}

/* Reset */

*{
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

img{
  max-width: 100%;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

body{
  font-family: "Poppins", sans-serif;
  font-size: 400;
}


/* Utility classes */

/* .container{
  width: var(--layout-max-width);
  margin: 0 auto;
} */

.heading{
  font-weight: var(--fw-bold);
  margin-bottom: 1em;
}

.primary-heading{
  font-size: 1.7rem;
}

.secondary-heading{
  font-size: 1.3rem;
}

.fw-bold{
  font-weight: var(--fw-bold);
}



/* ----------------- */

.container{
  width: min(var(--default-layout-size), var(--max-layout-size));
  margin: 0 auto;
}

.title{
  font-weight: var(--fw-bold);
  font-size: clamp(var(--size-28), 3vw, var(--size-44));
}

.title--2{
  font-weight: var(--fw-bold);
  font-size: clamp(var(--size-24), 2.8vw, var(--size-32));
  margin-bottom: 1em;
}

.title--3{
  font-weight: var(--fw-bold);
  font-size: clamp(var(--size-20), 2.5vw, var(--size-22));
  margin-bottom: 1em;
}

.r-text{
  font-size: clamp(var(--size-16), 2vw, var(--size-20));
}

.r-text--2{
  font-size: clamp(var(--size-16), 2vw, var(--size-18));
}

.button{
  display: inline-block;
  padding: 1em 2em;
  font-weight: var(--fw-semi-bold);
  border-radius: 100vmax;
  background: var(--clr-btn-1);
  box-shadow: var(--shadow-1);
  box-shadow: var(--shadow-1);
  transition: background-color var(--time-transition-medium) ease;

  &:hover, &:focus{
    background-color: var(--clr-pastel-red-400);
  }

  &:active{
    background-color: var(--clr-pastel-red-300);
  }
}

.button--yellow{
  /* background: rgb(248, 202, 73); */
  background-color: rgb(255, 209, 81);
  transition: filter var(--time-transition-medium) ease;


  &:hover, &:focus{
    /* background-color: var(--clr-pastel-red-400); */
    background-color: rgb(255, 209, 81);
    filter: brightness(1.1);
  }

  &:active{
    /* background-color: var(--clr-pastel-red-300); */
    filter: brightness(.95);
  }
}

.section{
  text-align: center;
  padding-block: 10rem 20rem;
}

.three-col{
  display: grid;
  grid-auto-columns: 1fr;
  gap: var(--size-32);
}

/* Layout */

html{
  scroll-behavior: smooth;
}

body{
  font-family: var(--ff-base);
  font-size: var(--fs-400);
  color: var(--clr-black-080);
}



/* Header section */

/* LAYOUT */

/* 
>>>>>>>>>>
  HEADER
>>>>>>>>>>
*/

/* ----- Navbar ----- */

.primary-header{
  background: var(--clr-navbar);
  position: fixed;
  min-height: var(--navbar-height);
  width: 100%;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  z-index: 10000;
  padding-block: .5rem;
}

.primary-header__container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding-block: .5rem; */
}

.primary-header__logo{
  width: var(--navbar-icon);
  /* display: flex; */
  /* border: 1px solid green; */
}

.primary-header__logo-link{
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
}

.primary-header__logo-img{
  /* width: 100%; */
  margin-right: .5rem;
}

.primary-header__logo-text{
  display: block;
  /* border: 1px solid blue; */
  font-family: "Dongle", sans-serif;
  font-size: 2.3rem;
  font-weight: 400;
  padding-top: .2em;
}

.logo-text-1{
  color: var(--clr-yellow-600);
}
.logo-text-2{
  color: var(--clr-purple-600);
}


.primary-nav__list{
  display: flex;
  font-weight: 500;
  /* overflow: hidden; */
}

.primary-nav__item{
  background: var(--clr-navbar);
  border-radius: .4em;
  /* transition: filter .5s ease; */
  transition: background-color .5s ease;
  
  &:hover{
    /* filter: brightness(.9); */
    background-color: var(--clr-purple-100);
  }
}

.primary-nav__link{
  padding: .3em 1em;
  display: block;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
}

.primary-header .cta{
  margin-top: .25em;
  margin-left: 1em;
}


/* ----- Hamburger button ----- */

.nav-button{
  --size: var(--navbar-icon);
  --speed: .25s;
  --color: var(--clr-purple-600);

  display: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  width: var(--size);
  height: var(--size);

  /* display: flex; */
  justify-content: center;
  align-items: center;
}

.hamburger__line{
  position: absolute;
  display: block;
  width: 80%;
  height: 10%;
  border-radius: 100vmax;
  background: var(--color);

  transition: 
    translate var(--speed) ease var(--speed),
    rotate var(--speed) ease,
    opacity 0s ease var(--speed);
}

.nav-button[aria-expanded="true"] .hamburger__line{
  transition: 
    translate var(--speed) ease,
    rotate var(--speed) ease var(--speed),
    opacity 0s ease var(--speed);
}

.hamburger__line--top{
  translate: 0 calc(-.23 * var(--size));
}
.hamburger__line--bot{
  translate: 0 calc(.23 * var(--size));
}

.nav-button[aria-expanded="true"] .hamburger__line--top{
  rotate: 45deg;
  translate: 0;
}
.nav-button[aria-expanded="true"] .hamburger__line--mid{
  opacity: 0;
}
.nav-button[aria-expanded="true"] .hamburger__line--bot{
  rotate: -45deg;
  translate: 0;
}



/* CTA Button */

.cta{
  --text: "Contáctame";
  --elevation-distance: .5em;
  --clr-font: var(--clr-purple-800);
  --clr-bg: var(--clr-purple-300);
  --clr-shading: var(--clr-purple-500);
  --clr-line: var(--clr-purple-600);

  /* display: block; */
  /* width: min(6em, 100%); */
  /* height: 2.5em; */
  padding: .2em .5em;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 100vmax;
  background-color: var(--clr-shading);
  border: 2px solid var(--clr-line);
  position: relative;
  cursor: pointer;

  transition: filter .2s ease;
  z-index: 50;
}

.cta:hover{
  background-color: var(--clr-shading);
  filter: brightness(1.1);
}

.cta::before{
  content: var(--text);
  position: absolute;
  background-color: red;
  width: 100%;
  height: 100%;
  top: calc(var(--elevation-distance) * -1);
  left: -2px;
  text-align: center;
  color: var(--clr-font);

  border-radius: 100vmax;
  background-color: var(--clr-bg);
  border: 2px solid var(--clr-line);
  display: flex;
  align-items: center;
  justify-content: center;

  transition: top .1s ease-out;
}

.cta:active::before{
  top: -2px;
}

.cta--red{
  --clr-bg: var(--clr-pastel-red-300);
  --clr-shading: var(--clr-pastel-red-400);
  --clr-line: var(--clr-pastel-red-500);
  --clr-font: var(--clr-pastel-red-900);
}

.cta--yellow{
  --clr-bg: var(--clr-pastel-yellow-200);
  --clr-shading: var(--clr-pastel-yellow-400);
  --clr-line: var(--clr-pastel-yellow-500);
  --clr-font: var(--clr-pastel-yellow-800);
}


@media screen and (min-width: 900px) {
  .cta-container:hover{
    background-color: transparent;
  }
}

/* mobile navbar */

@media screen and (max-width: 900px) {
  .nav-button{
    display: flex;
  }

  .primary-nav{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--clr-navbar);
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform .3s ease;
  }

  .primary-nav__list{
    width: var(--layout-max-width);
    margin: 0 auto;
    display: grid;
    padding-block: 1rem 1.5rem;
  }

  .primary-nav__item{
    transform: translateX(-10rem);
    opacity: 0;
    transition: 
      opacity .2s ease, 
      background-color .5s ease;
  }
  
  .primary-nav__item .cta{
    background: var(--clr-navbar);
    border-radius: .4em;
    position: relative;
    transform: translateX(-10rem);
    opacity: 1;

    /* padding: 0; */
    font: inherit;
    text-transform: capitalize;
    border: 0px;
    margin-left: 0;
    position: static;
    
    /* border: 1px solid red; */
    display: block;
    padding: 1rem 1rem;

    transition:
      transform .2s ease calc(var(--delay) * 60ms + 50ms),
      opacity .3s ease calc(var(--delay) * 60ms + 50ms),
      background-color .5s ease;
  }

  .primary-nav__item .cta:hover{
    filter: brightness(1);
    background-color: var(--clr-purple-100);
  }

  .primary-nav__item .cta::before{
    display: none;
  }

  .primary-nav__link{
    padding-block: 1.5rem;
  }

  .nav-button[aria-expanded="true"] ~ .primary-nav{
    transform: scale(1);
  }
  .nav-button[aria-expanded="true"] ~ .primary-nav .primary-nav__item{
    transform: translateX(0);
    opacity: 1;
    transition: 
      transform .2s ease calc(var(--delay) * 60ms + 50ms),
      opacity .3s ease calc(var(--delay) * 60ms + 50ms),
      background-color .5s ease;
  }

  .nav-button[aria-expanded="true"] ~ .primary-nav .primary-nav__item{
    transform: translateX(0);
    opacity: 1;
    transition: 
      transform .2s ease calc(var(--delay) * 60ms + 50ms),
      opacity .3s ease calc(var(--delay) * 60ms + 50ms),
      background-color .5s ease;
  }

  .nav-button[aria-expanded="true"] ~ .primary-nav .primary-nav__item .cta {
    transform: translateX(0);
    opacity: 1;
  }

}







/* Hero section */

.hero{
  position: relative;
  /* background: var(--clr-cream-200); */
  background: var(--clr-bg-lighter);
  padding-bottom: 5rem;
}

.hero .container{
  position: relative;
}

.hero__img-section{
  display: block;
}

.hero__img-section img{
  width: 100%;
}

.hero__text-section{
  padding: 3rem 0;
  text-align: center;
  z-index: 1000;
}

.hero__title{
  margin-bottom: 1em;
}

.highlitgh{
  /* color: var(--clr-pastel-red-400); */
  color: var(--clr-purple-500);
  /* border-bottom: 3px do rgb(116, 43, 226); */
}

.hero__text{
  margin: 0 auto 2em;
  /* margin-bottom: 1rem; */
  width: 70%;
  font-weight: var(--fw-medium);
  /* border: 1px solid red; */
  padding-bottom: 1rem;
}

.hero__text strong{
  font-weight: var(--fw-bold);
}

.wave-section{
  display: block;
  position: absolute;
  width: 100%;
  bottom: -1%;

  /* border: 1px solid red; */
}

.wave-section image{
  margin: 0;
  padding: 0;
}

.decoration{
  --shape-size: 2rem;
  width: var(--shape-size);
  height: var(--shape-size);

  position: absolute;
  z-index: 500;
}

.hero__star-1{
  --shape-size: 4rem;
  top: -2rem;
  left: -2rem;
  rotate: -30deg;
}
.hero__star-2{
  --shape-size: 24vw;
  bottom: -3rem;
  left: 3rem;
  rotate: -45deg;
}
.hero__star-3{
  --shape-size: 18vw;
  bottom: 2rem;
  right: 1rem;
  rotate: 10deg;
  opacity: .4;
}

.hero__spiral{
  --shape-size: 20vw;
  top: -7rem;
  left: 4rem;
  opacity: .7;
  /* border: 1px solid red; */
  filter: 
    brightness(0)
    saturate(100%)
    invert(43%) 
    sepia(49%) 
    saturate(692%) 
    hue-rotate(232deg) 
    brightness(94%) 
    contrast(84%);
}

.hero__sparkles{
  --shape-size: 10vw;
  top: -2rem;
  right: -1rem;
  opacity: .7;

  filter: 
    brightness(0)
    saturate(100%)
    invert(99%) 
    sepia(49%) 
    saturate(3941%) 
    hue-rotate(318deg) 
    brightness(101%) 
    contrast(101%);

  /* filter: 
    brightness(0)
    saturate(100%)
    invert(43%) 
    sepia(49%) 
    saturate(692%) 
    hue-rotate(232deg) 
    brightness(94%) 
    contrast(84%); */
}

.hero__circle{
  /* --shape-size: 6vw;
  bottom: 2rem;
  opacity: .6; */
  --shape-size: 20vw;
  opacity: .2;
  left: -20vw;
  bottom: 0rem;
}

.hero .cta{
  --text: "¡Agenda tu asesoría!";
  --elevation-distance: .7em;
  padding: .7rem 2rem;
  margin-top: 1rem;
  /* border: 1px solid red; */
}




/* Services Section */

.services{
  position: relative;
}

.services__text{
  width: 70%;
  margin: 0 auto;
  margin-bottom: 4em;
}

.service__list{
  display: flex;
  justify-content: center;
  gap: var(--size-16);
  flex-wrap: wrap;
}

.service__item{
  font-weight: var(--fw-semi-bold);
  width: 100%;
  min-height: 8rem;
  display: grid;
  gap: var(--size-16);
  padding: var(--size-32) var(--size-16);
  /* max-width: 10rem; */
  max-width: 10rem;
  /* background: var(--clr-pastel-yellow-25); */
  background: var(--clr-purple-50);
  box-sizing: var(--shadow-1);
  border-radius: var(--size-16);
  box-shadow: var(--shadow-2);
}

.service__item img{
  /* --icon-size: clamp(48px, 1vw, 64px); */
  margin: 0 auto;
  /* width: var(--icon-size); */
  /* height: var(--icon-size); */
  width: 64px;
  height: 64px;
}

.services__spiral{
  --shape-size: clamp(8rem,20vw, 14rem);
  left: 5vw;
  bottom: 7rem;
  rotate: 120deg;
}

@media screen and (max-width: 470px){
  .service__item{
    min-height: 8rem;
    gap: var(--size-16);
    padding: var(--size-20) var(--size-16);
    max-width: 7rem;
  }

  .service__item img{
    width: 48px;
    height: 48px;
  }
}

@media screen and (max-width: 360px){
  .service__item{
    min-height: 7rem;
    padding: var(--size-20) var(--size-16);
    max-width: 6rem;
    gap: 1px;
  }

  .service__item img{
    width: 40px;
    height: 40px;
  }

  .service__name{
    font-size: 14px;
  }

  .service__text{
    margin-bottom: 0;
  }

}


/* Benefits section */

.benefits{
  position: relative;
  background: var(--clr-pastel-blue-200);
}

.benefits__item{
  position: relative;
  background: var(--clr-pastel-blue-50);
  padding: var(--size-40) var(--size-32);
  border-radius: var(--size-64) var(--size-16)  var(--size-64) var(--size-16);
  /* border-radius:  var(--size-16) var(--size-64) var(--size-16) var(--size-64); */
  box-shadow: var(--shadow-2);
  max-width: 60ch;
  /* margin-right: var(--size-16); */
  margin: 0 auto;
  text-align: left;
}

.benefit-icon{
  background: var(--clr-white-100);
  position: absolute;
  top: -1rem;
  right: -1.5rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  /* box-shadow: var(--shadow-2); */

  display: flex;
  justify-content: center;
  align-items: center;
}

.benefit-icon img{
  width: 60%;
  height: 60%;
}

.benefit__title{
  width: 80%;
  /* margin-left: auto; */
  /* padding-left: 1em; */
}

.benefits__text{
  width: 70%;
  margin: 0 auto;
  margin-bottom: 4em;
}


.benefits__star{
  --shape-size: min(20vw, 15rem);
  top: 2rem;
  rotate: 20deg;
  right: 7vw;
}

.benefits__sparkles{
  --shape-size: clamp(10rem, 15vw, 20rem);
  bottom: 0;
  right: calc(8vw + 4vw);
}




/* About me section */

.about-me{
  position: relative;
}

.about-me__title{
  /* color: var(--clr-pastel-red-300); */
  margin-bottom: 2em;
}

.about-me__card{
  box-shadow: var(--shadow-1);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--clr-pastel-yellow-200);
  /* padding: .5rem; */
  margin-bottom: 5rem;

  display: grid;
}

.about-me__intro{
  padding: 2rem;
}

/* .about-me__intro-text{
  font-weight: var(--fw-semi-bold);
} */

.about-me__mission{
  background: var(--clr-white-100);
  border-radius: 1rem;
  padding: 3rem 2rem;
  /* padding: 8rem; */
  /* border: 1px solid red; */
}

.about-me__circle{
  --shape-size: 30vw;
  bottom: 25%;
  opacity: .4;
  z-index: -1;
  left: -15vw;
}

.about-me .cta{
  padding: .7rem 2rem;
}



/* FAQ section */

/* .faq{
  background: var(--clr-pastel-red-200);
} */


/* FAQ SECTION */

.faq{
  background: var(--clr-pastel-red-190);
}

.faq__list{
  display: grid;
  gap: 1.5rem;
}

.faq__item{
  /* background: var(--clr-white-100); */
  background-color: var(--clr-pastel-red-25);
  border-radius: 1rem;
  padding: 2rem;
  transition: box-shadow var(--time-transition-fast) ease;
}

.faq__item:hover .faq__question{
  color: var(--clr-pastel-red-400);
}

.faq__item:hover{
  box-shadow: var(--shadow-2);
}

.faq__question{
  transition: color var(--time-transition-fast) ease;
  margin: 0;
}

.faq__main{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.faq__dropdown{
  /* border: 1px solid red; */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--time-transition-fast);
}

.faq__dropdown-answer{
  overflow: hidden;
}

.button-dropdown{
  /* background: var(--clr-white-100); */
  background: var(--clr-pastel-red-25);
  width: 2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .2rem;
  border-radius: 50%;
}

.button-dropdown__img{
  transition: rotate var(--time-transition-fast) ease;
}

.faq__dropdown-answer{
  text-align: left;
  max-width: 70ch;
}

.faq__item--active{
  & .faq__main{
    /* border-bottom: var(--size-02) solid var(--clr-black-010);   */
    padding-bottom: 1rem;
  }

  & .faq__dropdown{
    grid-template-rows: 1fr;
  }

  & .button-dropdown__img{
    rotate: 180deg;
  }
}

.faq__whatsapp-link{
  font-weight: var(--fw-bold);
}

.faq__whatsapp-link:hover{
  color: var(--clr-pastel-red-500);
}


/* ENDING SECTION */

.ending{
  /* background: var(--clr-pastel-red-200); */
  background-color: var(--clr-pastel-red-190);
  position: relative;
  overflow: hidden;
}

.ending__title{
  max-width: 30ch;
  margin-inline: auto;
  margin-bottom: 1em;
}

.ending__text{
  margin-bottom: 5rem;
  font-size: var(--size-20);
  /* border: 1px solid black; */
  /* width: 40ch; */
  max-width: 50ch;
  margin-inline: auto;
  z-index: 10;
}

.ending .cta{
  --text: "¡Agenda tu asesoría!";
  --elevation-distance: .7em;
  padding: .7rem 2rem;
}

.ending__star-1{
  --size: clamp(8rem,25vw, 18rem);

  bottom: 15rem;
  left: -2rem;
  width: var(--size);
  height: var(--size);
  rotate: 20deg;
  z-index: 1;

}

.ending__star-2{
  right: 5rem;
  bottom: -3rem;

  width: 20rem;
  height: 20rem;
  rotate: 30deg;
  z-index: 1;
}

.ending__spiral{
  filter: 
    brightness(0)
    saturate(100%)
    invert(43%) 
    sepia(49%) 
    saturate(692%) 
    hue-rotate(232deg) 
    brightness(94%) 
    contrast(84%);

  width: 7rem;
  height: 7rem;

  opacity: .5;
  top: 0;
  z-index: 1;
  right: -2rem;
}





/* SCROLLBAR SETTINGS */

::-webkit-scrollbar{
  width: .8em;
}

::-webkit-scrollbar-track{
  background-color: var(--clr-white-100);
  /* background-color: var(--clr-purple-200); */
  /* margin-block: .5em; */
}

::-webkit-scrollbar-thumb{
  /* background-color: var(--clr-pastel-red-300); */
  background-color: var(--clr-purple-500);
  border-radius: 100vmax;
  /* border: var(--size-02) solid var(--clr-white-100); */
}


/* MEDIA QUERIES */

@media screen and (min-width: 800px){
  
  .hero{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0;

    margin-top: var(--nav-size);
  }

  .hero .container{
    position: absolute;
  }
  
  .hero__text-section{
    text-align: left;
    margin: 0;
    width: 50%;
  }

  .hero__title{
    width: 90%;
  }

  .hero__text{
    width: 100%;
    margin: 0 0 2em;
  }

  .hero__img-section{
    width: 80%;
    margin-left: auto;
  }

  .hero__star-2{
    --shape-size: 15vw;
    bottom: -2rem;
    left: 30%;
  }

  .hero__star-3{
    --shape-size: 14vw;
    opacity: .5;
    rotate: 45deg;
    right: 3vw;
    bottom: -8rem;
  }
  
  .hero__spiral{
    --shape-size: 16vw;
    left: 30%;

  }
  
  .hero__sparkles{
    right: -5vw;
  }
  
  .hero__circle{
    --shape-size: 20vw;
    opacity: .2;
    left: -20vw;
    bottom: -7rem;
  }

  .wave-section{
    bottom: -8px;
  }

  .about-me__card{
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  .about-me__mission{
    padding: 2rem;
  }
}

@media screen and (min-width: 1000px){

  .three-col{
    grid-auto-flow: column;
  }

  .benefits__item{
    max-width: none;
  }

  .benefit__title{
    --line-size: calc(clamp(var(--size-20), 2.5vw, var(--size-22)) * 1.5);
    line-height: var(--line-size);
    min-height: calc(var(--line-size) * 2);
  }

}

@media screen and (min-width: 1400px){

  .hero__star-1{
    --shape-size: 10rem;
    top: -5vw;
    left: -8vw;
  }

  .hero__spiral{
    top: -10vw;
  }

  .hero__sparkles{
    /* right: -10vw; */
    right: calc(-10vw);
  }
}