:root {
  --clr-bg: #151515;
  --clr-contact: linear-gradient(45deg, #050505, #220042);
  --clr-footer: #110524;
  --clr-black: #050505;
  --clr-fnt: #e3e3e3;
  --clr-fnt-w: white;
  --clr-mo: #4726a8;
  --clr-mod: #3b41c5;
  --clr-bgd: #110524;
  --clr-accent: #6a11cb;
  --clr-accent-h: #2575fc;
  --clr-accent-b: #5329c8;
  --clr-gradtxt: linear-gradient(to right, #5242ff, #ba65f6);
  --pad-sec: 8rem 12% 4rem 12%;
  --wp-ico: 3.2rem;
  --fnt-p: 16px;
  --fnt-h1: clamp(3.2rem, 6vw, 4.8rem);
  --fnt-h2: 3.2rem;
  --fnt-h3: 2.4rem;
  --fnt-h4: 1.6rem;
  --fnt-h5: 1.6rem;
}

title {
  display: none;
}

html {
  background: var(--clr-bg);
  font-family: "Kumbh Sans", Roboto, sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  font-size: var(--fnt-p);
  color: var(--clr-fnt);
  scroll-behavior: smooth;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  color: inherit;
  box-sizing: inherit;
}

section {
  padding: var(--pad-sec);
}

ul, li, a {
  text-decoration: none;
  list-style-type: none;
}

a, button {
  cursor: pointer;
}

h1, h2, h3, h4, h5, p {
  margin-bottom: 1rem;
  text-align: center;
}

h1 {
  font-size: var(--fnt-h1);
}

h2 {
  font-size: var(--fnt-h2);
}

h3 {
  font-size: var(--fnt-h3);
}

h4 {
  font-size: var(--fnt-h4);
}

h5 {
  font-size: var(--fnt-h5);
}

p, a, li, button {
  font-size: clamp(1.2rem, 1.4vw, 1.4rem);
}

.resp {
  width: 100%;
  height: auto;
}

.button {
  padding: 1rem 2rem;
  border-radius: 28px;
  text-decoration: none;
  font-weight: 500;
  background: var(--clr-accent-b);
  outline: none;
  border: none;
  color: white;
  box-shadow: 0 8px 20px var(--clr-accent-b);
  transition: box-shadow 150ms, background 200ms;
}

.button:hover, .button:focus {
  background: var(--clr-accent-h);
  box-shadow: 0 0 38px var(--clr-accent-h);
}

.fastIn {
  animation: fastIn 2s;
}

.midIn {
  animation: midIn 4s;
}

.sloIn {
  animation: sloIn 6s;
}

@keyframes fastIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes midIn {
  0% { opacity: 0; }
  33% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sloIn {
  0% { opacity: 0; }
  33% { opacity: 0; }
  100% { opacity: 1; }
}

.whatsapp {
  width: var(--wp-ico);
  height: var(--wp-ico);
  background: #25D366;
  border-radius: 50px;
  padding: 10px;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  box-shadow: 0 0 12px rgba(0,0,0,24%);
  transition: all ease-out 200ms;
  z-index: 999;
}

.whatsapp ion-icon {
  width: 100%;
  height: 100%;
}

.whatsapp:hover, .whatsapp:focus {
  background: #10b133;
  transform: scale(110%);
}


/* NAVBAR */

.navbar {
  width: 100vw;
  height: 80px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-weight: bold;
  padding: 0 12%;
  transition: background 200ms, height 150ms;
  z-index: 999;
}

.navbar.nav-active {
  background: var(--clr-mo);
  height: 60px;
  box-shadow: 0 0 22px var(--clr-accent-b);
}

.logo {
  width: 2.6rem;
}

.logo a:nth-of-type(2) {
  display: none;
}

.logo a:hover, .logo a:focus {
  opacity: .8;
}

.navbar ul {
  display: flex;
  gap: 1rem;
}

.contactoBtn {
  background: var(--clr-accent-b);
  padding: .5rem .75rem;
  border-radius: 28px;
  transition: all 150ms;
}

.contactoBtn:hover, .contactoBtn:focus {
  box-shadow: 0 0 28px var(--clr-accent-h);
}

.navbar.nav-active .contactoBtn {
  background: white;
  color: var(--clr-mo);
}

.navbar.nav-active .contactoBtn:hover, .navbar.nav-active .contactoBtn:focus {
  box-shadow: 0 0 20px var(--clr-accent-h);
}

.menu a {
  font-size: 1rem;
  position: relative;
}

.sub::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 0;
  background: white;
  left: 0;
  bottom: 0;
  transform: translateY(.15rem);
  transition: width ease-out 150ms;
}

.sub:hover::after, .sub:focus::after {
  width: 100%;
}

.spacer {
  height: 4rem;
}

/* HEADER */

.hero {
  height: 100vh;
  min-height: 640px;
  background: radial-gradient(circle at top, var(--clr-accent-h) 0%, var(--clr-mo) 33%, var(--clr-black) 83%);
  color: var(--clr-fnt);
  padding: var(--pad-sec);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

.gradTxt {
  background: var(--clr-gradtxt);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero ion-icon {
  font-size: clamp(3rem, 4vw, 4rem);
  margin-bottom: 2rem;
}

.triButton {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.triButton a {
  color: var(--clr-accent-b);
  font-size: clamp(3rem, 4vw, 4rem);
  transition: color 100ms;
  
  &:focus, &:hover {
    color: var(--clr-accent-h);
  }
}



/* CARDS */

.cards {
  padding: var(--pad-sec);
  text-align: center;
  background: linear-gradient(var(--clr-black), var(--clr-bgd), var(--clr-mod));
  color: var(--clr-fnt-w);
  position: relative;
}

.card-img {
  margin-left: auto;
  margin-right: auto;
}

.card-img ion-icon {
  font-size: 5rem;
  color: var(--clr-fnt);
  background: linear-gradient(45deg, var(--clr-accent), var(--clr-accent-h));
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.card-title {
  margin: .4rem;
}

.cards p {
  margin-bottom: 3rem;
  font-weight: 400;
  color: #dddddd;
}

@media (min-width: 720px) {
  .cardCont {
    display: flex;
    gap: 2rem;
  }
}


.fade-in {
  transition: opacity ease-in .6s, transform ease-out .6s, filter ease-out .6s;
}

.fopa {
  opacity: 0;
}

.fadeUp {
  transform: translate(0, 80px);
}

.left {
  transform: translate(80px, 0);
}

.right {
  transform: translate(-80px, 0);
}

.fblur {
  filter: blur(18px);
}

.inView {
  opacity: 1;
  transform: translate(0, 0);
  filter: blur(0px);
}


/* NOSOTROS */

#nosotros {
  padding-top: 4rem;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top, var(--clr-mod) 30%, var(--clr-black));
}

.nosotrosTxt p {
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 500;
  margin-bottom: 4rem;
}

.blur {
  transform: translateY(0);
  filter: blur(28px);
}

.blur.inView {
  filter: blur(0);
}

.formula {
  padding: 2rem;
  background: linear-gradient(45deg,var(--clr-bgd), var(--clr-mo));
  border-radius: 8px;
  outline: solid 1px #454545;
  box-shadow: 0 0 28px var(--clr-accent);
  font-weight: 400;
  letter-spacing: 1px;
}

@media (min-width: 1024px) {
  .nosotros {
    flex-direction: row;
    display: flex;
    gap: 4rem;
    justify-content: center;
    align-items: center;
  }
  .nosotros div:first-child {
    width: 50%;
    margin-bottom: 0;
  }
  .nosotros div:last-child {
    width: 50%;
  }
  .nosotros h2, .nosotros p {
    text-align: left;
  }
}

@media (min-width: 1500px) {
  .nosotros div:nth-of-type(1) {
    width: 30%;
  }
  .nosotros div:nth-of-type(2) {
    width: 70%;
  }
}

/* QUE ES */

#que-es {
  background: radial-gradient(var(--clr-mod) 5%, var(--clr-bg), var(--clr-black) 80%);
}

#que-es > p {
  margin-bottom: 4rem;
}

.benCol {
  display: flex;
  gap: 2rem;
}

.benCard {
  background: linear-gradient(to right, var(--clr-accent), var(--clr-mod));
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .benCol {
    flex-direction: column;
    gap: 0;
  }
}



/* SERVICIOS */

#servicios {
  background: radial-gradient(var(--clr-mod) 15%, var(--clr-bgd) 50%, var(--clr-black) 90%);
}

.servicios {
  margin-bottom: 2rem;
}

.servS {
  background: linear-gradient(45deg, #101010, #282828);
  box-shadow: 0 0 28px #555555;
  outline: 1px solid #aaaaaa;
}

.servP {
  background: linear-gradient(45deg, #101010, #1e1429);
  box-shadow: 0 0 28px var(--clr-mo);
  outline: 1px solid #6a48f2;
}

.servD {
  background: linear-gradient(45deg, #101010, #211910);
  box-shadow: 0 0 28px #b76d34;
  outline: 1px solid #b76d34;
}

.servicio {
  overflow: hidden;
  margin: 2rem 0;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.servCont {
  padding: 2rem 2rem 2rem 2.6rem;
  height: 100%;
}

.servicio ul {
  align-self: flex-start;
  list-style-type: circle;
}

.servicio ul li {position: relative; margin-bottom: .5rem;}

.servicio ul li::before {
  content: '';
  position: absolute;
  width: .5rem;
  height: .5rem;
  background: var(--clr-fnt);
  left: 0;
  top: .5rem;
  transform: translateX(-1rem);
  border-radius: 50px;
}

.starter {
  background: linear-gradient(to right, #afafaf, #fafafa);
  text-shadow: 0 4px 12px #afafaf;
}

.premium {
  background: linear-gradient(to right, var(--clr-accent), var(--clr-accent-h));
  text-shadow: 0 4px 12px var(--clr-accent);
}

.deluxe {
  background: linear-gradient(to right, #b76d34, #e3c7a0);
  text-shadow: 0 4px 12px #b76d34;
}

.premium, .deluxe, .starter {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.personalizados {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(230deg, var(--clr-accent), var(--clr-black));
  padding: 2rem;
  border-radius: 28px;
  box-shadow: 0 0 28px var(--clr-mo);
}

.personalizados p {
  font-size: 1.4rem;
}

@media (min-width: 920px) {
  .servicios {
    display: flex;
    gap: 2rem;
  }
  .servicio {
    flex: 0 1 33%;
  }
}

@media (min-width: 1280px) {
  .servCont {
    padding: 2rem 3rem;
  }
}

/* CONTACTO */

#contacto {
  background: linear-gradient(45deg, var(--clr-bg), var(--clr-mo));
}

.icos {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.icos a ion-icon {
  width: 3rem;
  height: 3rem;
  transition: all ease-out 250ms;
}

.contactoCont .icos {
  margin: 2rem;
}

.icos a ion-icon:hover {
  transform: translateY(-0.4rem);
  color: var(--clr-accent);
}


input, textarea {
  margin-top: 1rem;
}

.form input:not(.submit), .form textarea {
  width: 100%;
  margin-bottom: 2rem;
  background: #00000055;
  color: white;
  border: 0;
  outline: 1px solid #aaaaaa;
  padding: 1rem;
  border-radius: 12px;
}

.form input, .form label, .form textarea {
  font-size: 1.2rem;
  font-family: var(--fnt-p);

}

textarea {
  height: 180px;
  width: 100%;
  resize: none;
}

::placeholder {
  font-style: italic;
}

#submit {
  cursor: pointer;
  font-family: var(--fnt-p);
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 1rem 3rem;
  background: transparent;
  outline: solid 3px #fafafa;
  outline-offset: -3px;
  transition: all ease-out 100ms;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  align-self: center;
}


#submit:hover {
  background: var(--clr-fnt);
  color: var(--clr-mo);
}

.submitCont {
  display: flex;
  justify-content: center;
}

/* FOOTER */

footer {
  background: var(--clr-footer);
}

.footerCont {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fLogo {
  width: 12rem;
}

.footerCont .icos a ion-icon {
  width: 2.4rem;
}

.cpr {
  /* background: linear-gradient(var(--clr-mo), var(--clr-bg)); */
  background: #090412;
  padding: 1rem 0;
}

.cpr p {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}