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

  /* 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;
}
ul {
  font-family: var(--ff-text);
  font-weight: var(--fw-400);
  font-size: var(--fs-400);
}
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-block: var(--_logo-padding);
}
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); /* -3 = ( 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);
}



/* MAIN */

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



/* NAV */

main > nav .wrapper {
  padding-bottom: 0;
  padding-top: calc(var(--logo-height) + var(--logo-padding)*2 + var(--fs-400));
}
main > nav ul {
  list-style-type: none;
  display: flex;
  gap: var(--fs-200);
  flex-wrap: wrap;
}
main > nav ul li {
  display: flex;
  align-items: center;
  gap: var(--fs-200);
  font-family: var(--ff-text);
  font-size: var(--fs-300);
  color: var(--clr-gray-2);
}
main > nav ul li:not(:first-child)::before {
  content: '>';
}

main > nav ul li a {
  font-size: var(--fs-300);
  color: var(--clr-gray-2);

  transition: color var(--speed-400) ease-in-out;
}
main > nav ul li a:is(:hover, :focus-visible) {
  color: var(--clr-purple-lighter);
}



/* PRODUCTO */
#producto {
  
}
#producto .wrapper {
  padding-top: var(--fs-400);
  padding-bottom: 0;
}
#producto .wrapper .card {
  width: 100%;
  padding: var(--fs-500);
  background: var(--clr-white);
  border-radius: var(--fs-400);
  box-shadow: var(--shadow-black);
}

#producto .wrapper .card .producto-ppal {
}

#producto .wrapper .card .producto-ppal .photo-selector {
  display: grid;
  align-items: flex-start;
  gap: var(--fs-400);
}
#producto .wrapper .card .producto-ppal .photo-selector .img-primary {

}
#producto .wrapper .card .producto-ppal .photo-selector .img-primary img {
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px solid var(--clr-gray-1);
  border-radius: calc(var(--fs-200)/2);
}
#producto .wrapper .card .producto-ppal .photo-selector .img-thumbnails {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--fs-200);
}
#producto .wrapper .card .producto-ppal .photo-selector .img-thumbnails label {
  cursor: pointer;
}
#producto .wrapper .card .producto-ppal .photo-selector .img-thumbnails label picture img {
  aspect-ratio: 1/1;
  object-fit: cover;
  max-width: var(--fs-900);
  padding: 2px;
  border: 1px solid var(--clr-gray-1);
  border-radius: calc(var(--fs-200)/2);

  transition: border var(--speed-200) ease-in-out;
}
#producto .wrapper .card .producto-ppal .photo-selector .img-thumbnails input[type="radio"] {
  display: none;
}
#producto .wrapper .card .producto-ppal .photo-selector .img-thumbnails input[type="radio"]:checked + label picture img {
  border: 2px solid var(--clr-purple-lighter);
}
#producto .wrapper .card .producto-ppal .photo-selector .img-thumbnails label:is(:hover, :focus-visible) picture img {
  border: 1px solid var(--clr-purple-lighter);
}

#producto .wrapper .card .producto-ppal .photo-selector-mobile {
  margin-top: var(--fs-500);
}
#producto .wrapper .card .producto-ppal .photo-selector-desktop {
  display: none;
}

#producto .wrapper .card .producto-ppal .producto-info {

}
#producto .wrapper .card .producto-ppal .producto-info > h2 {
  /* font-size: var(--fs-700); */
}
#producto .wrapper .card .producto-ppal .producto-info > ul.producto-tags {
  margin-top: calc(var(--fs-200)/2);
  list-style-type: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fs-200);
}
#producto .wrapper .card .producto-ppal .producto-info > ul.producto-tags li {
  display: flex;
}
#producto .wrapper .card .producto-ppal .producto-info > ul.producto-tags li a {
  font-size: var(--fs-200);
  color: var(--clr-gray-2);
  text-transform: uppercase;
  line-height: 1;

  background-color: var(--clr-gray-1);
  padding: 0.5em;
  border-radius: 0.3em;

  pointer-events: none;
}
#producto .wrapper .card .producto-ppal .producto-info > ul.producto-tags li.highlight a {
  color: var(--clr-white);
  background-color: var(--clr-yellow);
}
#producto .wrapper .card .producto-ppal .producto-info > .photo-selector-mobile {

}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio {
  margin-top: var(--fs-700);
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: var(--fs-400);
  width: fit-content;
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento {
  display: flex;
  align-items: center;
  gap: var(--fs-400);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento.no-aplica {
  display: none;
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento .precio-lista {
  position: relative;
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento .precio-lista::after {
  content: '';
  position: absolute;
  
  display: block;
  background: var(--clr-purple-lighter);
  height: 3px;

  left: -0.1em;
  right: -0.1em;
  top: 50%;

  transform: rotate(-7deg);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento .precio-descuento {
  display: flex;
  align-items: center;
  gap: calc(var(--fs-200)/2);

  font-weight: var(--fw-500);

  color: #6A0A0A;
  background: #FFCECE;

  padding-inline: calc(var(--fs-400)/3.6);
  padding-block: calc(var(--fs-400)/9);

  border-radius: calc(var(--fs-400)/3.6);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento .precio-descuento::before {
  content: '🔥';
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .producto-descuento.no-aplica .precio-descuento::before {
  content: '';
}
#producto .wrapper .card .producto-ppal .producto-info .producto-precio .precio-final {
  font-size: var(--fs-900);
  font-weight: var(--fw-600);
  line-height: 1;
  width: fit-content;
}

#producto .wrapper .card .producto-ppal .producto-info .producto-tamano {
  margin-top: var(--fs-500);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano p span {
  font-weight: var(--fw-600);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex {
  margin-top: var(--fs-400);
  display: flex;
  align-items: center;
  gap: var(--fs-400);
  flex-wrap: wrap;

  --_featured-color: var(--clr-purple-lighter);
}

#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"] {
  display: none;
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"]:checked + label {
  border: 1px solid var(--_featured-color);
  box-shadow: inset 0 0 0 2px var(--_featured-color);
}

#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-200);
  padding: var(--fs-400);
  border: 1px solid var(--clr-gray-2);
  border-radius: calc(var(--fs-400)/3);
  cursor: pointer;

  position: relative;

  transition:
    box-shadow var(--speed-200) ease-in-out,
    border var(--speed-200) ease-in-out;
}
/* #producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label.opcion-destacada {
  border: 1px solid #6A0A0A;
} */
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label.opcion-destacada::after {
  content: '🔥 Sale';
  font-family: var(--ff-text);
  font-size: var(--fs-300);
  font-weight: var(--fw-500);
  text-transform: uppercase;
  line-height: 1;

  display: flex;
  align-items: center;
  gap: calc(var(--fs-200)/2);

  color: #6A0A0A;
  background: #FFCECE;

  padding-inline: calc(var(--fs-400)/3.6);
  padding-block: calc(var(--fs-400)/3.6);

  border-radius: calc(var(--fs-400)/3.6);

  position: absolute;
  bottom: 0;
  transform: translateY(50%);
  /* top: 0.5em;
  left: -1em;
  transform: rotate(-45deg); */
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"]:disabled + label {
  border: 1px dashed var(--clr-gray-2);
  cursor: default;
}

#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"]:not(:disabled) + label:is(:hover, :focus-visible) {
  border: 1px solid var(--_featured-color);
}

#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label p {
  line-height: 1;
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label p.opciones-tamano {
  font-weight: var(--fw-500);

  transition: 
    font-weight var(--speed-900) ease-in-out,
    color var(--speed-200) ease-in-out;
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"]:checked + label p.opciones-tamano {
  font-weight: var(--fw-600);
  color: var(--_featured-color);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"]:not(:disabled) + label:is(:hover, :focus-visible) p.opciones-tamano {
  color: var(--_featured-color);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label p.opciones-precio-final {
}
/* #producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex input[type="radio"]:checked + label p.opciones-precio-final {
  font-weight: var(--fw-500);
} */
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label p.opciones-precio-kilo {
  font-size: var(--fs-300);
}
#producto .wrapper .card .producto-ppal .producto-info .producto-tamano .tamano-opciones-flex label .opciones-precio-descuento {
  display: none;
}

#producto .wrapper .card .producto-ppal .producto-info ul.woofy-dest {
  margin-top: var(--fs-700);
  list-style-type: none;

  /* display: flex;
  gap: var(--fs-700); */
}
#producto .wrapper .card .producto-ppal .producto-info ul.woofy-dest li {
  display: flex;
  align-items: center;
  gap: var(--fs-200);

  font-weight: var(--fw-300);
}
#producto .wrapper .card .producto-ppal .producto-info ul.woofy-dest li > * {
  flex-shrink: 0;
}

/* #producto .wrapper .card .producto-ppal .producto-info .comprar-flex {
  margin-top: var(--fs-700);
  display: flex;
  gap: var(--fs-400);
  flex-wrap: wrap;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex > * {
  flex-shrink: 0;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad {
  display: flex;
  --_border: 3px solid var(--clr-purple-darker);
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad button {
  height: 100%;
  width: var(--fs-900);
  min-height: var(--fs-900);

  font-family: var(--ff-text);
  font-size: var(--fs-500);
  color: var(--clr-gray-3);
  color: var(--clr-purple-darker);
  
  background: transparent;
  border: var(--_border);
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad button:first-of-type {
  border-right: none;
  border-radius: 100% 0 0 100%;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad button:last-of-type {
  border-left: none;
  border-radius: 0 100% 100% 0;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad input {
  height: 100%;
  width: var(--fs-700);
  font-size: var(--fs-400);
  text-align: center;

  font-family: var(--ff-text);
  font-size: var(--fs-400);
  font-weight: var(--fw-500);
  color: var(--clr-gray-3);

  border: var(--_border);
  border-inline: none;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad input::-webkit-outer-spin-button,
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad input[type=number] {
  -moz-appearance: textfield;
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex .comprar-cantidad input:is(:hover, :focus-visible, :active) {
  outline: none;
} */

#producto .wrapper .card .producto-ppal .producto-info .comprar-flex > button {
  margin-top: var(--fs-700);
  display: flex;
  align-items: center;

  background: linear-gradient(to right bottom, var(--clr-purple-lighter), var(--clr-purple-darker) 200%)
}
#producto .wrapper .card .producto-ppal .producto-info .comprar-flex > button svg {
  display: block;
  width: var(--fs-600);
  fill: var(--clr-white);
}

#producto .wrapper .card .producto-desc {
  margin-top: var(--fs-900);
}
#producto .wrapper .card .producto-desc > p {
  margin-top: 1em;
}

/* NOSOTROS */

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

  /* padding-top: var(--fs-900); */
  padding-bottom: 0;
}
#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 {

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

#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) {
  /* PRODUCTO */
  #producto .wrapper .card .producto-ppal .photo-selector-mobile {
    grid-template-columns: auto 1fr;
  }
  #producto .wrapper .card .producto-ppal .photo-selector-mobile .img-primary {
    order: 2;
  }
  #producto .wrapper .card .producto-ppal .photo-selector-mobile .img-thumbnails {
    order: 1;
    flex-direction: column;
    justify-content: flex-start;
  }



  /* ZONA DE COBERTURA */
  #zona-de-cobertura .wrapper .cobertura-textos > ul.cobertura-carrousel > li.card {
    width: calc(var(--fs-900)*6);
  }
}



@media (min-width: 1000px) {
  /* PRODUCTO */
  #producto .wrapper .card .producto-ppal {
    display: grid;
    gap: var(--fs-800);
    align-items: flex-start;
    grid-template-columns: 1fr 1fr;
  }
  #producto .wrapper .card .producto-ppal .photo-selector-desktop {
    display: grid;
  }
  #producto .wrapper .card .producto-ppal .producto-info > .photo-selector-mobile {
    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) {
  /* 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;
  }
}



@media (min-width: 1400px) {
  #producto .wrapper .card .producto-ppal .photo-selector-desktop {
    grid-template-columns: auto 1fr;
  }
  #producto .wrapper .card .producto-ppal .photo-selector-desktop .img-primary {
    order: 2;
  }
  #producto .wrapper .card .producto-ppal .photo-selector-desktop .img-thumbnails {
    order: 1;
    flex-direction: column;
    justify-content: flex-start;
  }
}