/* Fonts */

@font-face {
  font-family: "happy-school";
  src: url("./fonts/happy-school.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-thin.woff2") format("woff2");
  font-display: swap;
  font-weight: 100;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-extralight.woff2") format("woff2");
  font-display: swap;
  font-weight: 200;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-light.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-semibold.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-extrabold.woff2") format("woff2");
  font-display: swap;
  font-weight: 800;
}
@font-face {
  font-family: "poppins";
  src: url("./fonts/poppins-black.woff2") format("woff2");
  font-display: swap;
  font-weight: 900;
}


:root {
  
  /* COLORS */

  --clr-blue: #332266;
  --clr-yellow: #FFD213;
  --clr-teal: #06BCB2;
  --clr-purple-darker: #521b93;
  --clr-purple-lighter: #9B57DF;
  --clr-white: #FFFFFF;
  --clr-gray-1: #EAEAEA;
  --clr-gray-2: #707070;
  --clr-gray-3: #333333;
  
  /* FONTS */
  
  --ff-logo: "happy-school", sans-serif;
  --ff-text: "poppins", sans-serif;

  --fs-200: clamp(0.6944rem, 0.6858rem + 0.0285vw, 0.72rem);
  --fs-300: clamp(0.8331rem, 0.8108rem + 0.0743vw, 0.9rem);
  --fs-400: clamp(1rem, 0.9583rem + 0.1389vw, 1.125rem);
  --fs-500: clamp(1.2rem, 1.1313rem + 0.2292vw, 1.4063rem);
  --fs-600: clamp(1.44rem, 1.334rem + 0.3535vw, 1.7581rem);
  --fs-700: clamp(1.7281rem, 1.5717rem + 0.5215vw, 2.1975rem);
  --fs-800: clamp(2.0738rem, 1.8494rem + 0.7479vw, 2.7469rem);
  --fs-900: clamp(2.4881rem, 2.1731rem + 1.05vw, 3.4331rem);

  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* LAYOUTS */

  --ctr-width: calc(100% - clamp(2rem, -1.333rem + 11.111vw, 12rem));
  --ctr-padding: calc(var(--fs-900)*2);

  /* SHADOWS */

  --shadow-black: 0px 0.5rem 1rem rgba(0,0,0,0.15);
  --shadow-black-2: 0px 0.25rem 0.5rem rgba(0,0,0,0.15);
  --shadow-white: 0px 0.5rem 1rem rgba(255, 255, 255, 0.15);
  --shadow-white-2: 0px 0.25rem 0.5rem rgba(255, 255, 255, 0.15);

  /* NAVBAR LAYOUT */

  --logo-height: var(--fs-900);
  --logo-padding: var(--fs-200);

  /* BACKGROUNDS */

  --bg-dots1-webp: url("./imgs/bg-dots-1920-1.webp");
  --bg-dots1-png: url("./imgs/bg-dots-1920-1.png");

  --bg-dots2-webp: url("./imgs/bg-dots-1920-2.webp");
  --bg-dots2-png: url("./imgs/bg-dots-1920-2.png");

  --bg-dots3-webp: url("./imgs/bg-dots-1920-3.webp");
  --bg-dots3-png: url("./imgs/bg-dots-1920-3.png");

  --bg-dots4-webp: url("./imgs/bg-dots-1920-4.webp");
  --bg-dots4-png: url("./imgs/bg-dots-1920-4.png");

  /* TRANSITION SPEEDS */

  --speed-200: 0.05s;
  --speed-300: 0.1s;
  --speed-400: 0.15s;
  --speed-500: 0.2s;
  --speed-600: 0.25s;
  --speed-700: 0.3s;
  --speed-800: 0.35s;
  --speed-900: 0.4s;
  
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  background: var(--clr-purple-darker);
}
h1 {
  font-family: var(--ff-logo), sans-serif;
}
h2, h3, h4, h5, h6 {
  font-family: var(--ff-text);
  font-weight: var(--fw-700);
  text-wrap: balance;
  color: var(--clr-purple-darker);
}
h2 {
  font-size: var(--fs-600);
}
h3 {
  font-size: var(--fs-500);
}
p {
  font-family: var(--ff-text);
  font-weight: var(--fw-400);
  font-size: var(--fs-400);
  color: var(--clr-gray-3);
}
a {
  font-family: var(--ff-text);
  font-weight: var(--fw-400);
  font-size: var(--fs-400);
  text-decoration: none;
}
button {
  cursor: pointer;
}

.wrapper {
  width: var(--ctr-width);
  margin-inline: auto;
  padding-block: var(--ctr-padding);
}

.button {
  font-family: var(--ff-text);
  font-size: var(--fs-400);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  color: var(--clr-white);
  padding: 1em 2em;
  border: none;
  background: var(--clr-purple-lighter);
  border-radius: var(--fs-900);

  cursor: pointer;

  display: flex;
  flex-wrap: nowrap;
  gap: var(--fs-400);
  align-items: center;

  transition: 
    box-shadow var(--speed-400) ease-in-out,
    transform var(--speed-400) ease-in-out;
}
.button > * {
  flex-shrink: 0;
}

.button:is(:hover,:focus-visible) {
  box-shadow:
    var(--shadow-black),
    inset var(--shadow-white-2);
  transform: translateY(-0.1em);
}
.button:active {
  box-shadow: inset var(--shadow-black-2);
  transform: translateY(0);
}

img {
  display: block;
  width: 100%;
}



/* NAVBAR */

header {
  --_logo-height: var(--logo-height);
  --_logo-padding: var(--logo-padding);
  /* --_menu-icon-height: var(--logo-height); */
  --_menu-icon-height: var(--fs-600);

  position: fixed;
  width: 100%;
  margin-top: calc((var(--_logo-height) + (var(--_logo-padding)*2))*-1);
  transition:
    margin-top var(--speed-700) ease-in-out,
    visibility var(--speed-700) ease-in-out;
  visibility: hidden;
  z-index: 100;
}
header.visible {
  margin-top: 0;
  visibility: visible;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-inline: calc( (100% - var(--ctr-width)) / 2);

  position: relative;
  z-index: 100;
}

header .container,
header nav.nav-mobile {
  box-shadow: var(--shadow-black-2);
  background-color: rgba(82, 27, 147, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(1em);
  backdrop-filter: saturate(180%) blur(1em);
}

/* NAVBAR LOGO */

header .container a.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--fs-400);
  padding: var(--_logo-padding) 0;
}
header .container a.navbar-logo h1 {
  font-size: var(--fs-700);
  color: var(--clr-white);
}
header .container a.navbar-logo svg {
  width: var(--_logo-height);
}
header .container a.navbar-logo svg .logo-clr-1 {
  fill: var(--clr-blue);
}
header .container a.navbar-logo svg .logo-clr-2 {
  fill: var(--clr-white);
}
header .container a.navbar-logo svg .logo-clr-3 {
  fill: var(--clr-yellow);
}

/* NAVBAR MENU BUTTON */

header .container button#navbar-links-button {

  background: transparent;
  border: none;
  display: block;
  padding: calc(var(--_logo-padding) - ((var(--_menu-icon-height) - var(--_logo-height)) / 2)) ;
  /* position: absolute;
  left: 50%;
  top: calc(var(--_logo-padding) + (var(--_logo-height)/2));
  transform: translate(-50%, -50%); */
}
header .container button#navbar-links-button div {
  width: calc(var(--_menu-icon-height)*1.3);
  height: calc(var(--_menu-icon-height));
  position: relative;
  transform: rotate(0deg);
  transition: all var(--speed-700) ease-in-out;
}
header .container button#navbar-links-button div span {
  display: block;
  position: absolute;
  height: calc(var(--_menu-icon-height)*0.2);
  width: 100%;
  background: var(--clr-white);
  border-radius: calc(var(--_menu-icon-height)*0.2);
  left: 0;
  transform: rotate(0deg);
  transition: all var(--speed-700) ease-in-out;
}
header .container button#navbar-links-button div span:nth-child(1) {
  top: 0px;
}
header .container button#navbar-links-button div span:nth-child(2) {
  top: calc(var(--_menu-icon-height)*0.4);
}
header .container button#navbar-links-button div span:nth-child(3) {
  top: calc(var(--_menu-icon-height)*0.4);
}
header .container button#navbar-links-button div span:nth-child(4) {
  top: calc(var(--_menu-icon-height)*0.8);
}
header.navbar-links-visible .container button#navbar-links-button div {
  transform: scale(0.8);
}
header.navbar-links-visible .container button#navbar-links-button div span:nth-child(1) {
  top: calc(var(--_menu-icon-height)*0.4);
  width: 0%;
  left: 50%;
}
header.navbar-links-visible .container button#navbar-links-button div span:nth-child(2) {
  transform: rotate(45deg);
}
header.navbar-links-visible .container button#navbar-links-button div span:nth-child(3) {
  transform: rotate(-45deg);
}
header.navbar-links-visible .container button#navbar-links-button div span:nth-child(4) {
  top: calc(var(--_menu-icon-height)*0.4);
  width: 0%;
  left: 50%;
}

/* NAVBAR ULS */

header nav ul.navbar-links {
  list-style-type: none;
}
header nav ul.navbar-links li a {
  font-size: var(--fs-500);
  color: var(--clr-white);
  padding: calc((var(--_logo-height) + var(--_logo-padding)) / 2.5) var(--fs-400); /* Magic numbers */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-300);
  line-height: 1;
  text-align: center;
  transition: color var(--speed-400) ease-in-out;
}
header nav ul.navbar-links li a:hover,
header nav ul.navbar-links li a:focus-visible {
  color: var(--clr-yellow);
}

/* NAVBAR UL DESKTOP */

header .container nav.nav-desktop {
  display: none;
}

header .container nav.nav-desktop ul.navbar-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

header nav.nav-desktop ul.navbar-links li a {
  position: relative;
}
/* header nav.nav-desktop ul.navbar-links li a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(((var(--_logo-height) + var(--_logo-padding)) / 2) + 1.2em);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--clr-yellow);
  width: 0;
  height: 0.1em;
  transition: all var(--speed-400) ease-in-out;
}
header nav.nav-desktop ul.navbar-links li a:hover::before,
header nav.nav-desktop ul.navbar-links li a:focus-visible::before {
  width: calc(100% - var(--fs-400)*2);
} */

/* NAVBAR UL MOBILE */

header nav.nav-mobile {
  margin-top: calc((var(--_logo-height) + var(--_logo-padding) + var(--fs-400)) * -3); /* -8 = ( Cantidad de links + 1 ) * -1 */

  z-index: 99;
  transition: 
    margin-top var(--speed-700) ease-in-out,
    visibility var(--speed-700) ease-in-out;
  visibility: hidden;
}
header.navbar-links-visible nav.nav-mobile {
  margin-top: 0;
  visibility: visible;
}

/* NAVBAR CTA */

header .container button.navbar-cta {
  font-size: var(--fs-400);
  padding: var(--fs-200);
  width: fit-content;
}
header .container button.navbar-cta span {
  display: none;
}
header .container button.navbar-cta svg {
  display: block;
  width: var(--fs-700);
  fill: var(--clr-white);
}



/* HERO */

#hero {
  position: relative;
  background: var(--clr-gray-1);
  padding-bottom: var(--fs-900);

}

#hero picture.bg-perro {
  display: none;

  animation: parallax linear;
  animation-timeline: scroll();
  --parallax-speed: -2;

  position: absolute;
  bottom: 0;
  left: calc(var(--fs-900)*-2);
  width: calc(var(--fs-900)*10);

  filter: drop-shadow(var(--shadow-black));

  z-index: 10;
}
#hero picture.bg-gato {
  display: none;

  animation: parallax linear;
  animation-timeline: scroll();
  --parallax-speed: -2;

  position: absolute;
  bottom: 0;
  right: calc(var(--fs-900)*-2);
  width: calc(var(--fs-900)*8);

  filter: drop-shadow(var(--shadow-black));

  z-index: 10;
}

#hero .hero-content {
  background: radial-gradient(circle at 50% 20%, var(--clr-purple-lighter), var(--clr-purple-darker));
  display: grid;
  place-items: center;
  grid-template-areas: "stack";
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  /* contain: paint; */
  box-shadow: var(--shadow-black);
}
#hero .hero-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(51,34,102,0.3);
}
#hero .hero-content > * {
  grid-area: stack;
  animation: parallax linear;
  animation-timeline: scroll();
}
#hero .hero-content .bg-dots {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
#hero .hero-content .bg-dots:nth-of-type(1) {
  --parallax-speed: -4;

  background-image: var(--bg-dots1-webp);
  background-image: var(--bg-dots1-png);
}
#hero .hero-content .bg-dots:nth-of-type(2) {
  --parallax-speed: -3;

  background-image: var(--bg-dots2-webp);
  background-image: var(--bg-dots2-png);
}
#hero .hero-content .bg-dots:nth-of-type(3) {
  --parallax-speed: -2;

  background-image: var(--bg-dots3-webp);
  background-image: var(--bg-dots3-png);
}
#hero .hero-content .bg-dots:nth-of-type(4) {
  --parallax-speed: 2;

  background-image: var(--bg-dots4-webp);
  background-image: var(--bg-dots4-png);
}

#hero .hero-content .wrapper {
  --parallax-speed: 5;

  margin-bottom: calc(var(--fs-900)*-1);
  padding-bottom: 0;

  display: grid;
  place-content: center;
}
#hero .hero-content .wrapper h2 {
  margin-top: 1em;

  font-size: var(--fs-900);
  font-size: calc(var(--fs-900) * 1.2);
  font-weight: 700;
  line-height: 1.3;

  margin-inline: auto;

  color: var(--clr-white);

  text-align: center;
  text-shadow: 0px 0.03em 0.06em rgba(0,0,0,0.15);
}
#hero .hero-content .wrapper p {
  margin-top: 1em;
  
  font-size: var(--fs-800);
  font-weight: var(--fw-500);

  margin-inline: auto;

  color: var(--clr-white);

  text-align: center;
  text-shadow: 0px 0.03em 0.06em rgba(0,0,0,0.15);
  text-wrap: balance;
}
#hero .hero-content .wrapper a {
  margin-inline: auto;
  margin-top: var(--fs-900);
}
#hero .hero-content .wrapper a svg {
  width: var(--fs-500);
  fill: var(--clr-white);
}

#hero .hero-content .wrapper a:is(:hover, :focus-visible) svg {
  animation-name: arrowMoving;
  animation-duration: var(--speed-900);
  animation-timing-function: ease-in;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#hero .hero-content .wrapper picture.bg-perro-gato {
  animation: parallax linear;
  animation-timeline: scroll();
  --parallax-speed: -2;

  margin-top: var(--fs-900);

  filter: drop-shadow(var(--shadow-black));
  z-index: 10;
}



/* CONTENT */

main #content {
  background: linear-gradient(var(--clr-gray-1), var(--clr-white));
}



/* NOSOTROS */

#nosotros .wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fs-400);

  padding-bottom: 0; /* ! hardcodeado */
}
#nosotros .wrapper .card {
  flex: 1;
  width: 100%;

  display: flex;
  align-items: flex-start;
  gap: var(--fs-500);

  flex-direction: column;

  padding: var(--fs-600);
  background: var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);
}
#nosotros .wrapper .card .card-icon {
  font-size: calc(var(--fs-900)*1.5);
  line-height: 1;
}
/* #nosotros .wrapper .card .card-text {
} */
#nosotros .wrapper .card .card-text h2 {
  text-wrap: pretty;
}
#nosotros .wrapper .card .card-text p {
  margin-top: var(--fs-200);
}
#nosotros .wrapper .card .card-text p a {
  color: var(--clr-purple-darker);
}



/* CLIENTES */

#clientes .wrapper {
  padding-top: var(--fs-900); /* ! hardcodeado */
}
#clientes .wrapper .card {
  width: 100%;
  padding: var(--fs-900);
  background: var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);
}
#clientes .wrapper .card h2 {
  text-align: center;
}
#clientes .wrapper .card p {
  margin-top: var(--fs-700);

  text-align: center;
  text-wrap: pretty;

  line-height: 2;
}
#clientes .wrapper .card ul {
  margin-top: var(--fs-900);
  list-style-type: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-900);
  flex-wrap: wrap;
}
/* #clientes .wrapper .card ul li {
} */
/* #clientes .wrapper .card ul li picture {
} */
#clientes .wrapper .card ul li picture img {
  max-width: calc(var(--fs-900)*4);
  max-height: calc(var(--fs-900)*1.2);
}



/* COMO COMPRAR */

#como-comprar .wrapper ol.como-comprar-pasos {
  margin-top: var(--fs-900);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fs-700);

  /* list-style-position: inside; */
  list-style: none;
  counter-reset: item;
}
#como-comprar .wrapper ol.como-comprar-pasos li.card {
  flex: 1;
  padding: var(--fs-600);
  background: var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);

  counter-increment: item;
}
#como-comprar .wrapper ol.como-comprar-pasos li.card:before {
  content: counter(item);

  font-family: var(--ff-text);
  font-size: var(--fs-600);
  font-weight: var(--fw-700);
  color: white;
  
  background: var(--clr-purple-lighter);
  border-radius: 100%;

  width: var(--fs-800);
  text-align: center;
  display: block;
}
#como-comprar .wrapper ol.como-comprar-pasos > svg {
  margin-inline: auto;
  width: var(--fs-900);
  fill: var(--clr-purple-lighter);
  rotate: 90deg;
}
#como-comprar .wrapper ol.como-comprar-pasos li.card h3 {
  margin-top: var(--fs-400);
  text-wrap: pretty;
}
#como-comprar .wrapper ol.como-comprar-pasos li.card p {
  margin-top: var(--fs-300);
}
#como-comprar .wrapper ol.como-comprar-pasos li.card a.button {
  margin-top: var(--fs-500);
  width: fit-content;
}
#como-comprar .wrapper ol.como-comprar-pasos li.card a.button svg {
  display: block;
  width: var(--fs-400);
  fill: var(--clr-white);
}
#como-comprar .wrapper ol.como-comprar-pasos li.card a.button:is(:hover, :focus-visible) svg {
  animation-name: arrowMoving;
  animation-duration: var(--speed-900);
  animation-timing-function: ease-in;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}



/* TESTIMONIOS */

#testimonios .wrapper > p {
  margin-top: var(--fs-700);
  line-height: 2;
  text-wrap: pretty;
}
#testimonios .wrapper ul.testimonios-carrousel {
  --_spacer-carrousel-block: var(--fs-600);
  margin-top: calc(var(--fs-900) - var(--_spacer-carrousel-block));
  margin-bottom: calc(var(--_spacer-carrousel-block) * -1);

  list-style-type: none;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(90%, calc(var(--fs-400)*26));
  align-items: flex-start;

  width: calc(100% + ((100% - var(--ctr-width))));
  /* width: 100%; */
  margin-left: calc((100% - var(--ctr-width)) / -2);


  gap: var(--fs-400);
  padding-block: var(--_spacer-carrousel-block);
  padding-inline: calc( (100% - var(--ctr-width)) / 2);

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  -ms-overflow-style: none; /* Hide Scrollbar from IE and Edge */
  scrollbar-width: none; /* Hide Scrollbar from Firefox*/

  cursor: grab;
}
#testimonios .wrapper > ul.testimonios-carrousel::-webkit-scrollbar {
  display: none; /* Hide Scrollbar from Chrome, Safari and Opera */
}
#testimonios .wrapper > ul.testimonios-carrousel:active {
  cursor: grabbing;
}
#testimonios .wrapper ul.testimonios-carrousel li.card {
  padding: var(--fs-500);
  background: var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);

  display: grid;
  gap: var(--fs-500);

  user-select: none; /* Standard Syntax */  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
}
#testimonios .wrapper ul.testimonios-carrousel li.card > p {
  display: block;
  padding: var(--fs-400);
  background: var(--clr-gray-1);
  border-radius: calc(var(--fs-400)/2);
  text-align: center;
  text-wrap: pretty;
}
#testimonios .wrapper ul.testimonios-carrousel li.card .testimonio-persona {
  display: flex;
  align-items: center;
  gap: var(--fs-500);
}
#testimonios .wrapper ul.testimonios-carrousel li.card .testimonio-persona > picture img {
  width: calc(var(--fs-900)*3);
  border-radius: calc(var(--fs-900)*3);
  border: calc(var(--fs-400)/3) solid var(--clr-white);
  box-shadow: var(--shadow-black-2);
}
#testimonios .wrapper ul.testimonios-carrousel li.card .testimonio-persona .testimonio-datos picture img.rating {
  width: calc(var(--fs-900)*2.5);
}
#testimonios .wrapper ul.testimonios-carrousel li.card .testimonio-persona .testimonio-datos p {
  margin-top: 1em;
  font-size: var(--fs-400);
}
#testimonios .wrapper ul.testimonios-carrousel li.card .testimonio-persona .testimonio-datos p.testimonio-nombre {
  font-size: var(--fs-400);
  font-weight: var(--fw-700);
  color: var(--clr-purple-darker);
}


/* ASESORAMIENTO PERSONALIZADO */

#asesoramiento-personalizado .wrapper > picture {
  display: none;
  height: 100%;
}
#asesoramiento-personalizado .wrapper > picture img.card {
  object-fit: cover;
  object-position: center;
  height: 100%;
}
#asesoramiento-personalizado img.card {
  border: var(--fs-400) solid var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);
}
#asesoramiento-personalizado .wrapper > .asesoramiento-textos picture img.card {
  margin-top: var(--fs-700);
}
#asesoramiento-personalizado .wrapper .asesoramiento-textos > p {
  margin-top: var(--fs-700);
  line-height: 2;
  text-wrap: pretty;
}
#asesoramiento-personalizado .wrapper .asesoramiento-textos > button.button {
  margin-top: var(--fs-700);
  width: fit-content;
}
#asesoramiento-personalizado .wrapper .asesoramiento-textos > button.button svg {
  display: block;
  width: var(--fs-600);
  fill: var(--clr-white);
}



/* ZONA DE COBERTURA */

#zona-de-cobertura .wrapper > picture {
  display: none;
}
#zona-de-cobertura img.card {
  border: var(--fs-400) solid var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);
}
#zona-de-cobertura .wrapper > .cobertura-textos picture img.card {
  margin-top: var(--fs-700);
}
#zona-de-cobertura .wrapper .cobertura-textos > p {
  margin-top: var(--fs-900);
  line-height: 2;
  text-wrap: pretty;
}
#zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel {
  margin-top: var(--fs-900);
  list-style-type: none;

  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-400);
  align-items: flex-start;
}
#zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel > li.card {
  width: 100%;
  
  display: grid;
  gap: var(--fs-300);
  
  padding: var(--fs-600);
  background: var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);
}
#zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel > li.card ul {
  display: grid;
  gap: var(--fs-300);
}
#zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel > li.card ul li {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: calc(var(--fs-400)/2);

  font-family: var(--ff-text);
  font-weight: var(--fw-400);
  font-size: var(--fs-400);
  color: var(--clr-gray-3);
}
#zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel > li.card ul li::before {
  content: "";
  display: block;
  flex-shrink: 0;
  --_bullet-size: calc(var(--fs-400)/2);
  width: var(--_bullet-size);
  height: var(--_bullet-size);
  border-radius: var(--_bullet-size);
  background: var(--clr-purple-lighter);
}


/* FOOTER */

footer {
  background: radial-gradient(circle at 0 0, var(--clr-purple-lighter), var(--clr-purple-darker));
  border-bottom: calc(var(--fs-400)/3) solid var(--clr-yellow);
}
footer header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fs-400)/2);
}
footer header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-400);
}
footer header .logo svg {
  display: block;
  width: calc(var(--fs-900)*1.5);
}
footer header .logo svg .cls-1 {
  stroke-width: 0px;
  fill: var(--clr-blue);
}
footer header .logo svg .cls-2 {
  stroke-width: 0px;
  fill: var(--clr-white);
}
footer header .logo svg .cls-3 {
  stroke-width: 0px;
  fill: var(--clr-yellow);
}
footer header .logo p.logo-text {
  font-family: var(--ff-logo);
  font-size: calc(var(--fs-900)*1);
  color: var(--clr-white);
}
footer header p.logo-desc {
  font-size: var(--fs-400);
  font-weight: var(--fw-500);
  color: var(--clr-white);
}

footer .footer-links {
  margin-top: var(--fs-900);
  display: flex;
  gap: var(--fs-900);
  flex-wrap: wrap;
}
footer .footer-links .footer-links-item {
  flex: 1; 
}
footer .footer-links .footer-links-item h3 {
  font-size: var(--fs-500);
  font-weight: var(--fw-500);
  color: var(--clr-white);

  display: flex;
  gap: var(--fs-400);
  align-items: center;
  justify-content: center;

  /* border: 3px solid yellow; */
}
footer .footer-links .footer-links-item h3::before {
  content: "";
  display: block;
  width: calc(var(--fs-300)/3);
  height: var(--fs-600);
  background-color: var(--clr-purple-lighter);
}
footer .footer-links .footer-links-item ul {
  margin-top: var(--fs-400);
  list-style-type: none;
  display: grid;
  gap: var(--fs-200);
  /* border: 3px solid white; */
}
footer .footer-links .footer-links-item ul li {
  display: flex;
  justify-content: center;
}
footer .footer-links .footer-links-item ul li a {
  display: flex;
  align-items: center;
  gap: var(--fs-200);
  color: var(--clr-white);

  white-space: nowrap;

  transition: color var(--speed-400) ease-in-out;
}
footer .footer-links .footer-links-item ul li a:is(:hover, :focus-visible) {
  color: var(--clr-yellow);
}
footer .footer-links .footer-links-item ul li a svg {
  display: block;
  width: var(--fs-300);
  fill: var(--clr-white);
  flex-shrink: 0;
  transition: fill var(--speed-400) ease-in-out;
}
footer .footer-links .footer-links-item ul li a:is(:hover, :focus-visible) svg {
  fill: var(--clr-yellow);
  animation-name: arrowMoving;
  animation-duration: var(--speed-900);
  animation-timing-function: ease-in;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
footer .footer-links .footer-links-item ul li button {
  font-size: var(--fs-400);
  font-weight: var(--fw-500);
  text-transform: none;
}
footer .footer-links .footer-links-item ul li button svg {
  display: block;
  fill: var(--clr-white);
  width: var(--fs-600);
}

footer .footer-links .footer-links-item ul.rrss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-400);
}
footer .footer-links .footer-links-item ul.rrss li a {
  display: grid;
  place-content: center;
  width: var(--fs-900);
  height: var(--fs-900);
  border-radius: var(--fs-900);
  background: var(--clr-purple-lighter);

  padding: var(--fs-200);

  transition: 
    box-shadow var(--speed-400) ease-in-out,
    transform var(--speed-400) ease-in-out;
}
footer .footer-links .footer-links-item ul.rrss li a:is(:hover, :focus-visible) {
  box-shadow:
    var(--shadow-black),
    inset var(--shadow-white-2);
  transform: translateY(-0.1em);
}
footer .footer-links .footer-links-item ul.rrss li a:active {
  box-shadow: inset var(--shadow-black-2);
  transform: translateY(0);
}

footer .footer-links .footer-links-item ul.rrss li a svg {
  height: 100%;
  width: 100%;
  fill: var(--clr-white);
}
footer .footer-links .footer-links-item ul.rrss li a:is(:hover, :focus-visible) svg {
  animation: none;
}


footer p.footer-copy {
  margin-top: var(--fs-900);
  color: var(--clr-white);
  text-align: center;
}
footer p.footer-copy a {
  color: var(--clr-white);
  text-decoration: underline;
  text-decoration-color: var(--clr-purple-lighter);
  text-underline-offset: 4px;
  text-decoration-thickness: calc(var(--fs-400)/6);
  transition:
    color var(--speed-400) ease-in-out,
    text-decoration-color var(--speed-400) ease-in-out;
}
footer p.footer-copy a:is(:hover, :focus-visible) {
  color: var(--clr-yellow);
  text-decoration-color: var(--clr-yellow);
}



/* TRANSICIONES */

.hidden {
  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transition: all var(--speed-900) ease-in-out;
}
.hidden.show {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
}

#hero picture.bg-perro.hidden {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
}
#hero picture.bg-gato.hidden {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
}
#hero picture.bg-perro.hidden img {
  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
  transition-delay: calc(var(--speed-900)*3);
}
#hero picture.bg-perro.hidden.show img {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateX(0);
}
#hero picture.bg-gato.hidden img {
  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transform: translateX(100%);
  transition: all 1s ease-in-out;
  transition-delay: calc(var(--speed-900)*3);
}
#hero picture.bg-gato.hidden.show img {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateX(0);
}
#hero .hero-content .wrapper h2.hidden {
  transform: translateY(100%);
}
#hero .hero-content .wrapper h2.hidden.show {
  transform: translateY(0);
}
#hero .hero-content .wrapper p.hidden {
  transform: translateY(100%);
  transition-delay: calc(var(--speed-900)*1);
}
#hero .hero-content .wrapper p.hidden.show {
  transform: translateY(0);
}
#hero .hero-content .wrapper a.hidden {
  translate: 0 100%;
  transition:
    opacity var(--speed-900) ease-in-out calc(var(--speed-900)*2),
    visibility var(--speed-900) ease-in-out calc(var(--speed-900)*2),
    filter var(--speed-900) ease-in-out calc(var(--speed-900)*2),
    translate var(--speed-900) ease-in-out calc(var(--speed-900)*2),
    box-shadow var(--speed-400) ease-in-out,
    transform var(--speed-400) ease-in-out;
}
#hero .hero-content .wrapper a.hidden.show {
  translate: 0 0;
}
#hero .hero-content .wrapper picture.bg-perro-gato.hidden {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
}
#hero .hero-content .wrapper picture.bg-perro-gato.hidden img {
  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transform: translateY(100%);
  transition: all 1s ease-in-out;
  transition-delay: calc(var(--speed-900)*3);
}
#hero .hero-content .wrapper picture.bg-perro-gato.hidden.show img {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(0);
}

#nosotros .wrapper .card.hidden {
  transform: translateY(100%);
}
#nosotros .wrapper .card.hidden.show {
  transform: translateY(0);
}

#clientes .wrapper .card.hidden {
  transform: translateY(100%);
}
#clientes .wrapper .card.hidden.show {
  transform: translateY(0);
}

#como-comprar .wrapper ol.como-comprar-pasos li.card.hidden {
  transform: translateY(100%);
}
#como-comprar .wrapper ol.como-comprar-pasos li.card.hidden.show {
  transform: translateY(0);
}
#como-comprar .wrapper ol.como-comprar-pasos > svg {
  transform: translateX(100%);
}
#como-comprar .wrapper ol.como-comprar-pasos svg.hidden.show {
  transform: translateX(0);
}
@media (min-width: 1200px) {
  #como-comprar .wrapper ol.como-comprar-pasos li.card.hidden {
    transform: translateY(0);
  }
  #como-comprar .wrapper ol.como-comprar-pasos > svg {
    transform: translateX(0);
  }
  #como-comprar .wrapper ol.como-comprar-pasos li.card.hidden:nth-of-type(2) {
    transition-delay: calc(var(--speed-900)*2);
  }
  #como-comprar .wrapper ol.como-comprar-pasos li.card.hidden:nth-of-type(3) {
    transition-delay: calc(var(--speed-900)*4);
  }
  #como-comprar .wrapper ol.como-comprar-pasos svg.hidden:nth-of-type(1) {
    transition-delay: calc(var(--speed-900)*1);
  }
  #como-comprar .wrapper ol.como-comprar-pasos svg.hidden:nth-of-type(2) {
    transition-delay: calc(var(--speed-900)*3);
  }
}

#testimonios .wrapper .testimonios-carrousel.hidden {
  transition-delay: var(--speed-900);
}

#asesoramiento-personalizado .wrapper > picture.hidden {
  transition-delay: var(--speed-900);
}
#zona-de-cobertura .wrapper > picture.hidden {
  transition-delay: var(--speed-900);
}



/* ANIMACIONES */

@keyframes parallax {
  to {
    transform: translateY(calc(var(--parallax-speed) * 100px));
  }
}
@keyframes arrowMoving {
  from {
    transform: translate(-1px);
  }
  to {
    transform: translate(1px);
  }
}



@media (min-width: 110ch) {
  
  /* NAVBAR */
  /* header {
    margin-top: 0;
    visibility: visible;
  } */
  header .container button#navbar-links-button {
    display: none;
  }
  header .container nav.nav-desktop {
    display: block;
  }
  header nav.nav-mobile {
    display: none;
  }

  /* NAVBAR CTA */
  header .container button.navbar-cta {
    padding: var(--fs-200) calc(var(--fs-200)*2);
  }
  header .container button.navbar-cta span {
    display: block;
  }
  header .container button.navbar-cta svg {
    width: var(--fs-600);
  }
}



@media (min-width: 500px) {
  /* NOSOTROS */
  #nosotros .wrapper .card {
    flex-direction: row;
  }
}



@media (min-width: 600px) {
  #zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel > li.card {
    width: calc(var(--fs-900)*6);
  }
}



@media (min-width: 1000px) {
  /* HERO */
  #hero .hero-content {
    contain: paint;
  }
  #hero picture.bg-perro {
    display: block;
  }
  #hero picture.bg-gato {
    display: block;
  }
  #hero .hero-content .wrapper {
    margin-bottom: 0;
    padding-bottom: var(--ctr-padding);
  }
  #hero .hero-content .wrapper h2 {
    margin-top: 0;
    font-size: calc(var(--fs-900)*2);
    line-height: 1;
  }
  #hero .hero-content .wrapper p {
    width: calc(100% - var(--fs-900)*9);
  }
  #hero .hero-content .wrapper picture.bg-perro-gato {
    display: none;
  }



  /* NOSOTROS */

  #nosotros .wrapper {
    flex-direction: row;
  }
  #nosotros .wrapper .card {
    flex-direction: column;
  }


  /* CLIENTES */
  #clientes .wrapper p {
    width: 80%;
    margin-inline: auto;
  }



  /* ASESORAMIENTO PERSONALIZADO */
  #asesoramiento-personalizado .wrapper {
    --_gap: var(--fs-900);
    display: grid;
    gap: var(--_gap);
    grid-auto-flow: column;
    grid-template-columns: repeat(2, calc(50% - (var(--_gap)/2)));
  }
  #asesoramiento-personalizado .wrapper > picture {
    display: block;
  }
  #asesoramiento-personalizado .wrapper > .asesoramiento-textos picture img.card {
    display: none;
  }



  /* ZONA DE COBERTURA */
  #zona-de-cobertura .wrapper {
    --_gap: var(--fs-900);
    display: grid;
    gap: var(--_gap);
    grid-auto-flow: column;
    grid-template-columns: repeat(2, calc(50% - (var(--_gap)/2)));
  }
  #zona-de-cobertura .wrapper > picture {
    display: block;
  }
  #zona-de-cobertura .wrapper > .cobertura-textos picture img.card {
    display: none;
  }
  #zona-de-cobertura .wrapper > .cobertura-textos p:first-of-type {
    margin-top: var(--fs-600);
  }
}



@media (min-width: 1200px) {
  /* HERO */
  #hero .hero-content .wrapper h2 {
    width: calc(100% - var(--fs-900)*8);
  }



  /* COMO COMPRAR */
  #como-comprar .wrapper ol.como-comprar-pasos {
    align-items: flex-start;
  }
  #como-comprar .wrapper ol.como-comprar-pasos {
    flex-direction: row;
  }
  #como-comprar .wrapper ol.como-comprar-pasos > svg {
    margin-top: calc(var(--fs-600) + var(--fs-800) + var(--fs-400));
    rotate: 0deg;
  }



  /* TESTIMONIOS */
  #testimonios .wrapper > p {
    width: 70%;
  }



  /* FOOTER */
  footer .footer-links .footer-links-item ul.rrss li a {
    padding: var(--fs-300);
  }
}



@media (min-width: 1300px) {
  /* NOSOTROS */
  #nosotros .wrapper .card {
    flex-direction: row;
  }
}