/* Fonts */

@font-face {
  font-family: "CircularStd-Book";
  src: url("../fonts/CircularStd-Book.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "CircularStd-Medium";
  src: url("../fonts/CircularStd-Medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "CircularStd-Black";
  src: url("../fonts/CircularStd-Black.woff2") format("woff2");
  font-display: swap;
}

:root {
  
  /* COLORS */
  
  --clr-blue: #252c6d;
  --clr-light-blue: #006EB7;
  --clr-white: #FFFFFF;
  --clr-grey-1: #FBFBFD;
  --clr-grey-2: #EFECEA;
  --clr-grey-3: #8D888D;
  --clr-grey-tagline: #413F3E;
  --clr-light-blue-tagline: #6DACDE;

  /* SHADOWS */

  --shadow-white: 0px 0px 0.5em 0px rgba(255,255,255,0.5);
  --shadow-white-2: 0px 0px 0.5em 0px rgba(255,255,255,0.15);
  --shadow-black: 0px 0px 0.3em 0px rgba(0,0,0,0.15);
  --shadow-black-2: 0px 0px 0.3em 0px rgba(0,0,0,0.5);
  
  /* FONTS */
  
  --ff-text: "CircularStd-Book", sans-serif;
  --ff-title: "CircularStd-Medium", sans-serif;
  --ff-highlights: "CircularStd-Black", 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);

  /* LAYOUTS */

  --ctr-width: calc(100% - clamp(2rem, -1.333rem + 11.111vw, 12rem));
  --ctr-padding: 3em 0;

  /* NAVBAR LAYOUT */

  --logo-height: var(--fs-600);
  --logo-padding: var(--fs-400);

  /* BACKGROUNDS */

  --bg-clr-hero-white: rgba(255,255,255,1);
  --bg-clr-hero-blue: rgba(37,44,109,0.25);
  --bg-img-hero-jpg: url("../notebooks/imgs/bg-hero-1200.jpg");
  --bg-img-hero-flipped: url("../notebooks/imgs/bg-hero-1200-flipped.jpg");
  /* --bg-img-hero-jpg: url("imgs/bg-hero.jpg"); */
  
  --bg-clr-trust-badges-blue: rgba(37, 44, 109, 0.5);
  --bg-clr-trust-badges-light-blue: rgba(0, 110, 183, 0.5);
  --bg-img-trust-badges-jpg: url("../imgs/trust-badges-medium-1280.jpg");

  /* TRANSITION SPEEDS */

  --speed-200: 0.5s;
  --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 {
  font-family: var(--ff-text);
  font-size: var(--fs-400);
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-grey-tagline);
  position: relative;
  background-color: var(--clr-grey-1);
}

body main {
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-title);
  font-weight: 400;
  line-height: 1.4;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-900);
  color: var(--clr-blue);
  line-height: 1;
}
h2 {
  font-size: var(--fs-400);
  text-transform: uppercase;
  color: var(--clr-blue);
}
h3 {
  font-size: var(--fs-700);
}
h4 {
  font-size: var(--fs-500);
  color: var(--clr-blue);
}

a {
  text-decoration: none;
  font-family: var(--ff-text);
  font-size: var(--fs-400);
  font-weight: 400;
  color: var(--clr-light-blue-tagline);
}

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

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

.flow > * + * {
  margin-top: 1em;
}

.button {
  display: block;
  width: min-content;
  padding: 1em 2em;
  border-radius: 0.5em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--clr-white);
  background: var(--clr-light-blue);
  background: radial-gradient(circle at right bottom, var(--clr-light-blue-tagline) -20%, var(--clr-light-blue));
  transition: 
    box-shadow var(--speed-400) ease-in-out,
    transform var(--speed-400) ease-in-out;
}
.button:hover,
.button:focus-visible {
  box-shadow: 0 0.2em 0.2em var(--bg-clr-hero-blue);
  transform: translateY(-0.1em);
}
.button:active {
  box-shadow: inset 0 0.2em 0.2em var(--bg-clr-hero-blue);
  transform: translateY(0em);
}

button {
  font-family: var(--ff-text);
  font-size: var(--fs-400);
  font-weight: 400;
  cursor: pointer;
}

section {
  scroll-margin-top: calc(var(--logo-height) + var(--logo-padding)*2);
}
main.scroll-margin-0 section {
  scroll-margin-top: 0;
}

/* NAVBAR */

header {
  --_logo-height: var(--logo-height);
  --_logo-padding: var(--logo-padding);
  --_menu-icon-height: var(--logo-height);

  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: 0px 0.1em 0.3em 0px rgba(0,0,0,0.15);
  background-color: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: saturate(180%) blur(1em);
  backdrop-filter: saturate(180%) blur(1em);
}

  /* NAVBAR LOGO */

header .container a.navbar-logo {
  display: grid;
  padding: var(--_logo-padding) 0;
}
header .container a.navbar-logo svg {
  height: 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-light-blue);
}

  /* 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)) ;
  margin-right: calc((var(--_logo-padding) - ((var(--_menu-icon-height) - var(--_logo-height)) / 2)) * -1);
}
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-blue);
  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 {
  padding: calc((var(--_logo-height) + var(--_logo-padding)) / 2) var(--fs-400);
  display: block;
  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-blue);
}

  /* 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-blue);
  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)) * -8); /* -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 {
  padding: calc(var(--fs-400)/2) var(--fs-400);
  font-size: var(--fs-300);
  border: none;
}

/* ! HERO */

#hero {
  background-color: var(--clr-grey-1);
  background-image: var(--bg-img-hero-jpg);
  background-size: cover;
  background-position: center;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#hero > .wrapper {
  padding-top: calc(var(--logo-height) + var(--logo-padding)*2);
}
#hero > .wrapper .flow > * + * {
  margin-top: var(--fs-700);
}
#hero > .wrapper .hero-info ul {
  margin-top: 1em;
  list-style-position: inside;
}
#hero > .wrapper .hero-info ul li::marker {
  color: var(--clr-blue);
}
#hero > .wrapper .hero-info ul li a {
  color: var(--clr-grey-tagline);
}
#hero > .wrapper .cta-picture-desktop {
  display: none;
}
#hero > .wrapper .hero-info .cta-picture-mobile {
  display: block;
}
#hero > .wrapper .hero-info .button-flex {
  display: flex;
  gap: var(--fs-400);
  flex-wrap: wrap;
}
#hero > .wrapper .hero-info .button-flex button {
  border: none;
  width: auto;
}
#hero > .wrapper .hero-info .button-flex .button.inverted {
  width: auto;
  line-height: 1;
  background: transparent;
  color: var(--clr-light-blue);
  border: 2px solid var(--clr-light-blue);
}

/* CTA HERO */

.cta-hero {
  background-color: var(--clr-blue);
  background-image: radial-gradient(circle at top left, var(--bg-clr-trust-badges-light-blue), var(--bg-clr-trust-badges-blue)), var(--bg-img-trust-badges-jpg);
  background-size: cover;
  background-position: center;

  box-shadow: var(--shadow-black-2);

  /* width: 100%; */

  /* margin-top: auto; */
}
.cta-hero .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-400);
  padding-block: var(--fs-200);
}
.cta-hero .wrapper .cta-info {
  display: flex;
  align-items: center;
  gap: var(--fs-400);
}
.cta-hero .wrapper .cta-buttons {
  display: flex;
  align-items: center;
  gap: var(--fs-400);
}
.cta-hero .wrapper .cta-info picture {
  flex-shrink: 0;
}
.cta-hero .wrapper .cta-info picture img {
  width: var(--fs-900);
  border-radius: 50%;
  box-shadow: var(--shadow-white-2);
}
.cta-hero .wrapper .cta-info .cta-text p {
  color: var(--clr-grey-1);
  font-size: var(--fs-300);
  line-height: 1.2;
}
.cta-hero .wrapper .cta-buttons button {
  display: flex;
  align-items: center;
  gap: var(--fs-200);

  padding: 0.5em 1em;
  border: none;
  box-shadow: var(--shadow-white-2);

  color: var(--clr-grey-1);
  white-space: nowrap;
}
.cta-hero .wrapper .cta-buttons button span {
  display: none;
}
.cta-hero .wrapper .cta-buttons button svg {
  flex-shrink: 0;
  display: block;
  height: var(--fs-600);
  /* fill: var(--clr-light-blue-tagline); */
  fill: var(--clr-grey-1);
}

/* PRODUCTOS */

#productos .producto {
  background-color: var(--clr-grey-1);
  background-size: cover;
  background-position: center;
}
#productos .producto.producto-izq {
  background-image: var(--bg-img-hero-flipped);
}
#productos .producto.producto-der {
  background-image: var(--bg-img-hero-jpg);
}
#productos .producto .wrapper .producto-picture-desktop {
  display: none;
}
#productos .producto .wrapper > .flow > * + * {
  margin-top: var(--fs-700);
}
#productos .producto .wrapper .producto-info h2 {
  font-size: var(--fs-600);
  text-transform: none;
  color: var(--clr-grey-tagline);
}
#productos .producto .wrapper .producto-info picture {
  display: block;
}
#productos .producto .wrapper picture img {
  width: 100%;
}
#productos .producto .wrapper .producto-info ul {
  list-style-type: none;
}
#productos .producto .wrapper .producto-info ul li {
  margin-top: var(--fs-300);
}
#productos .producto .wrapper .producto-info ul li .producto-title {
  display: flex;
  align-items: center;
  gap: var(--fs-400);
  width: fit-content;
  cursor: pointer;
  user-select: none; /* Standard Syntax */  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
}
#productos .producto .wrapper .producto-info ul li .producto-title h3 {
  font-size: var(--fs-400);
}
#productos .producto .wrapper .producto-info ul li .producto-title svg {
  display: block;
  width: var(--fs-400);
  fill: var(--clr-grey-tagline);
  flex-shrink: 0;
  transition: all var(--speed-400) ease-in-out;
}
#productos .producto .wrapper .producto-info ul li.desc-visible .producto-title svg {
  transform: scaleY(-1);
}
#productos .producto .wrapper .producto-info ul li p {
  margin-top: 0.25em;
  line-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: line-height var(--speed-400) ease-in-out;
}
#productos .producto .wrapper .producto-info ul li.desc-visible p {
  line-height: 1.6;
  visibility: visible;
}
#productos .producto .wrapper .producto-info button {
  border: none;
  width: auto;
}

#productos .producto-items {
  background-color: var(--clr-blue);
  /* background-image: linear-gradient(to bottom, var(--clr-bg-black), var(--clr-bg-blue)), var(--bg-img-hero-webp); */
  background-image: linear-gradient(to bottom, var(--bg-clr-trust-badges-light-blue), var(--bg-clr-trust-badges-blue)), var(--bg-img-trust-badges-jpg);
  background-size: cover;
  background-position: center;

  padding: var(--ctr-padding);
  padding-bottom: 0;
}
#productos .producto-items {
  border-top: calc(var(--fs-200)/2) solid var(--clr-grey-1);
  border-bottom: calc(var(--fs-200)/2) solid var(--clr-grey-1);
}
#productos .producto-items h3 {
  width: var(--ctr-width);
  margin-inline: auto;
  font-size: var(--fs-500);
  color: var(--clr-white);
}
#productos .carrousel-nav button {
  display: none;
}
#productos .carrousel-nav .carrousel {
  /* margin-top: var(--fs-400); */

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(100%, calc(var(--fs-400)*18.75));

  align-items: baseline;
  gap: var(--fs-400);

  padding: var(--ctr-padding);
  padding-inline: var(--fs-400);
  padding-top: var(--fs-400);

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

  user-select: none; /* Standard Syntax */  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */

  -ms-overflow-style: none; /* Hide Scrollbar from IE and Edge */
  scrollbar-width: none; /* Hide Scrollbar from Firefox*/
}
#productos .carrousel-nav .carrousel::-webkit-scrollbar {
  display: none; /* Hide Scrollbar from Chrome, Safari and Opera */
}
#productos .carrousel-nav .carrousel a.carrousel-item {
  display: grid;
  gap: var(--fs-400);

  text-align: center;
  color: var(--clr-grey-tagline);

  background-color: var(--clr-white);
  padding: var(--fs-400);
  border-radius: calc(var(--fs-400)/2);
  box-shadow: 0px 0.3em 0.5em 0.1em rgba(0,0,0,0.1);

  transition: transform var(--speed-400) ease-in-out;
}
#productos .carrousel-nav .carrousel a.carrousel-item:is(:hover,:focus-visible) {
  transform: scale(1.01);
}
#productos .carrousel-nav .carrousel a.carrousel-item img {
  border-bottom: 1px solid var(--clr-grey-2);
  padding: 1em;
  width: 100%;
}


/* TRUST BADGES */

#trust-badges {
  background-color: var(--clr-white);
}
#trust-badges .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fs-900);
}
#trust-badges .wrapper .badge {
  display: flex;
  gap: var(--fs-700);
}
#trust-badges .wrapper .badge:nth-child(even) svg {
  order: 1;
}
#trust-badges .wrapper .badge svg {
  fill: var(--clr-blue);
  height: calc(var(--fs-900)*2);
  flex-shrink: 0;
}
#trust-badges .wrapper .badge svg .clr-1{
  fill: var(--clr-blue);
}
#trust-badges .wrapper .badge svg .clr-2{
  fill: var(--clr-light-blue);
}
#trust-badges .wrapper .badge .badge-text {
  display: flex;
  flex-direction: column;
}
#trust-badges .wrapper .badge:nth-child(odd) .badge-text {
  text-align: left;
}
#trust-badges .wrapper .badge:nth-child(even) .badge-text {
  text-align: right;
}
#trust-badges .wrapper .badge .badge-text h3 {
  font-size: var(--fs-500);
  color: var(--clr-blue);
}

/* CLIENTS */

#clientes {
  background-color: var(--clr-grey-1);
}
#clientes .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#clientes .wrapper .clients-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fs-900);
  margin-top: var(--fs-900);
}
#clientes .wrapper .clients-flex > * {
  /* max-width: calc(var(--fs-400)*12.5); */
  max-width: calc(var(--fs-400)*9);
  max-height: var(--fs-900);
  flex-shrink: 0;
  flex-grow: 0;
}

/* TESTIMONIALS */

#testimonios {
  /* background-color: var(--clr-grey-2); */

  background: var(--clr-grey-2);
  background: radial-gradient(circle at top, var(--clr-white) 40%, var(--clr-grey-2));
  padding-bottom: 1px;
}
#testimonios .wrapper {
  padding-bottom: 0;
}

#testimonios .testimonial-carrousel {
  --_carrousel-spacer: calc(var(--fs-400));
  --_cards-width: 80%;

  margin: calc(var(--fs-900) - var(--fs-400)) 0 calc(3em - var(--fs-400));
  padding-inline: calc((100% - var(--ctr-width))/2);
  padding-block: var(--fs-400);
  
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--_cards-width);
  gap: var(--_carrousel-spacer);
  align-items: baseline;
  cursor: grab;

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

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

  user-select: none; /* Standard Syntax */  
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
}
#testimonios .testimonial-carrousel::-webkit-scrollbar {
  display: none; /* Hide Scrollbar from Chrome, Safari and Opera */
}
#testimonios .testimonial-carrousel:active {
  cursor: grabbing;
}

#testimonios .testimonial-carrousel .card {
  --_card-background: #fff;
  --_card-padding: calc(var(--fs-400)*2);
  --_card-img-width: calc(var(--fs-400)*10);

  background-color: var(--_card-background);
  box-shadow: var(--shadow-black);
  width: 100%;
  padding: var(--_card-padding);
  margin-top: calc(var(--_card-img-width)/2);
  border-radius: calc(var(--fs-400)/2);

  /* border-bottom: calc(var(--fs-400)*0.5) solid var(--clr-blue); */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fs-400)*1.5);
}
#testimonios .testimonial-carrousel .card img {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
  width: var(--_card-img-width);
  border: calc(var(--fs-400)/3) solid var(--_card-background);
  box-shadow: var(--shadow-black);

  /* box-shadow: 0 calc(var(--fs-400)/4) calc(var(--fs-400)/4) rgba(0,0,0,0.25); */
  margin-top: calc((var(--_card-padding) + (var(--_card-img-width)/2)) * -1);
}
#testimonios .testimonial-carrousel .card .card-text {
  text-align: center;
  display: grid;
}
/* #testimonios .testimonial-carrousel .card .card-text-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--fs-400)/2);
} */
#testimonios .testimonial-carrousel .card .card-text-title h4 {
  text-transform: uppercase;
  color: var(--clr-blue);
}
#testimonios .testimonial-carrousel .card .card-text-title p {
  color: var(--clr-blue);
  /* display: flex;
  align-items: center;
  gap: calc(var(--fs-400)/2); */
}
/* #testimonios .testimonial-carrousel .card .card-text-title p::before {
  content: "|";
  margin-right: -2px;
  font-size: calc(var(--fs-400)*1.3);
} */
#testimonios .testimonial-carrousel .card .card-text > p {
  margin-top: 1em;
}

/* CONTACT US */

#contactanos {
  background-color: var(--clr-blue);
  /* background-image: linear-gradient(to bottom, var(--clr-bg-black), var(--clr-bg-blue)), var(--bg-img-hero-webp); */
  background-image: radial-gradient(circle at top left, var(--bg-clr-trust-badges-light-blue), var(--bg-clr-trust-badges-blue)), var(--bg-img-trust-badges-jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
#contactanos .wrapper {
  display: grid;
  /* place-content: center; */
  gap: var(--fs-600);
}
#contactanos .wrapper .contact-text h2 {
  color: var(--clr-light-blue-tagline);
}
#contactanos .wrapper .contact-text h3 {
  color: var(--clr-grey-2);
}
#contactanos .wrapper .contact-text p {
  color: var(--clr-grey-2);
}
#contactanos .wrapper .contact-buttons button {
  /* width: min(100%, 330px); */
  margin-inline: auto;
  border: none;
  padding-block: 0;
  height: 4rem;
  display: flex;
  align-items: center;
  gap: var(--fs-400);
  white-space: nowrap;
}
#contactanos .wrapper .contact-buttons button:not(:last-of-type) {
  margin-bottom: var(--fs-400);
}
#contactanos .wrapper .contact-buttons button:first-of-type {
  font-size: var(--fs-300);
}
#contactanos .wrapper .contact-buttons button svg {
  width: var(--fs-600);
  fill: var(--clr-light-blue-tagline);
  flex-shrink: 0;
}

/* FOOTER */

footer {
  background-color: var(--clr-grey-1);
  border-bottom: calc(var(--fs-400)*0.3) solid var(--clr-light-blue);
  --_footer-logo-height: var(--fs-700);
}

/* FOOTER MAP */
footer iframe {
  display: block;
  width: 100%;
  height: 50vh;
  height: 50svh;
}

/* FOOTER LOGO */
footer a.navbar-logo {
  display: none;
}
footer a.navbar-logo svg {
  height: var(--_footer-logo-height);
}
footer a.navbar-logo svg .logo-clr-1 {
  fill: var(--clr-blue);
}
footer a.navbar-logo svg .logo-clr-2 {
  fill: var(--clr-light-blue);
}

/* FOOTER CARD */
footer .footer-wrapper {
  background-color: var(--clr-blue);
  background-image: radial-gradient(circle at bottom right, var(--clr-light-blue), var(--clr-blue));
  padding-inline: calc((100% - var(--ctr-width)) / 2);
  padding-block: var(--fs-900);
}
footer .footer-wrapper .footer-wrapper-links {
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,280px), 1fr)); */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fs-900);
}
footer .footer-wrapper .footer-wrapper-links .footer-wrapper-links-group {
  display: grid;
  gap: var(--fs-400);
}
footer .footer-wrapper .footer-wrapper-links .footer-wrapper-links-group h4::before {
  content: '|';
  color: var(--clr-light-blue-tagline);
  font-size: var(--fs-600);
}
footer .footer-wrapper .footer-wrapper-links .footer-wrapper-links-group h4 {
  display: flex;
  align-items: center;
  gap: calc(var(--fs-400)*0.5);
  color: var(--clr-grey-1);
}
footer .footer-wrapper .footer-wrapper-links .footer-wrapper-links-group a {
  color: var(--clr-grey-1);
}

footer .footer-wrapper .footer-wrapper-links .footer-wrapper-links-group button {
  font-size: var(--fs-300);
  color: var(--clr-grey-1);
  width: 100%;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--fs-400);
  white-space: nowrap;
}
footer .footer-wrapper .footer-wrapper-links .footer-wrapper-links-group button svg {
  width: var(--fs-500);
  fill: var(--clr-light-blue-tagline);
  flex-shrink: 0;
}

footer .footer-wrapper p {
  margin-top: var(--fs-700);
  /* text-align: center; */
  color: var(--clr-grey-1);
}

/* ANIMACION DE ENTRADA Y SALIDA */

.hidden,
.hidden-x {
  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transition: all var(--speed-900) ease-in-out;
}
#hero > .wrapper .cta-picture-mobile.hidden {
  transform: scale(0.1);
}
#hero > .wrapper .cta-picture-mobile.show {
  transform: scale(1);
}
#hero > .wrapper .cta-picture-desktop.hidden-x {
  transform: translate(100%, 0);
}

#productos .producto-picture-mobile.hidden {
  transform: scale(0.1);
}
#productos .producto-picture-mobile.show {
  transform: scale(1);
}

#productos .producto-izq .producto-picture-desktop.hidden-x {
  transform: translate(-100%, 0);
}
#productos .producto-der .producto-picture-desktop.hidden-x {
  transform: translate(100%, 0);
}

#trust-badges .wrapper .badge:nth-child(odd).hidden-x {
  transform: translate(-100%, 0);
}
#trust-badges .wrapper .badge:nth-child(even).hidden-x {
  transform: translate(100%, 0);
}
#clientes .wrapper .clients-flex img.hidden {
  transform: translate(0, 300%);
}
#testimonios .testimonial-carrousel.hidden-x {
  transform: translate(100%, 0);
}
.show {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translate(0, 0) !important;
}

@media (min-width: 160ch) {
  
  /* 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;
  }
}

@media screen and (max-width: 400px) {

  /* CTA HERO */

  .cta-hero .wrapper .cta-buttons button:last-of-type {
    display: none;
  }

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

  /* CTA HERO */

  .cta-hero .wrapper .cta-info .cta-text p {
    font-size: var(--fs-400);
  }

  /* TESTIMONIALS */

  #testimonios .testimonial-carrousel {
    --_cards-width: 60%;
  }
}

@media (min-width: 700px) {

  /* PRODUCTOS */

  #productos .producto-items .carrousel-nav {
    position: relative;
    width: var(--ctr-width);
    margin-inline: auto;
  }
  #productos .producto-items .carrousel-nav button {
    display: block;
    position: absolute;
    top: 35%;
    padding: 0.8em;
    background-color: var(--clr-grey-1);
    border-radius: 50%;
    border: 1px solid var(--clr-grey-3);
    z-index: 1;
    transition: all var(--speed-400) ease-in-out;
  }
  #productos .producto-items .carrousel-nav button:is(:hover,:focus-visible) {
    box-shadow: 0 0.1em 0.1em 0 rgba(0,0,0,0.1);
    transform: translateY(-0.1em);
  }
  #productos .producto-items .carrousel-nav button:is(:active) {
    box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.1);
    transform: translateY(0);
  }

  #productos .producto-items .carrousel-nav button:first-of-type {
    left: -1.5em;
  }
  #productos .producto-items .carrousel-nav button:last-of-type {
    right: -1.5em;
  }
  #productos .producto-items .carrousel-nav button svg {
    fill: none;
    stroke: var(--clr-grey-tagline);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5px;
    display: block;
    height: var(--fs-400);
    aspect-ratio: 1/1;
  }
  #productos .producto-items .carrousel-nav .carrousel {
    gap: 18px;
    padding-inline: 9px;
    scroll-behavior: smooth;
  }

  /* TESTIMONIALS */

  #testimonios .wrapper .testimonial-flex .testimonial-card {
    gap: var(--fs-700);
    padding-inline: var(--fs-700);
  }

}

@media (min-width: 800px) {

  /* CTA HERO */

  .cta-hero .wrapper .cta-buttons button:first-of-type span {
    display: block;
  }

  /* CONTACT US */

  #contactanos .wrapper {
    grid-template-columns: auto auto;
  }
  #contactanos .wrapper .contact-buttons button {
    margin-inline: 0;
  }

  /* TESTIMONIALS */

  #testimonios .testimonial-carrousel {
    --_cards-width: 45%;
  }

}

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

  /* cta-nav */

  .cta-hero .wrapper .cta-buttons button span {
    display: block;
  }

  /* HERO */

  #hero > .wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fs-900);
  }
  #hero > .wrapper .cta-picture-desktop {
    display: block;
  }
  #hero > .wrapper .hero-info .cta-picture-mobile {
    display: none;
  }

  /* PRODUCTOS */

  #productos .producto .wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--fs-900);
  }
  #productos .producto .wrapper .producto-info .producto-picture-mobile {
    display: none;
  }
  #productos .producto .wrapper .producto-picture-desktop {
    display: block;
  }
  #productos .producto.producto-izq .wrapper picture {
    order: 0;
  }
  #productos .producto.producto-izq .wrapper .producto-info {
    order: 1;
  }
  #productos .producto.producto-der .wrapper picture {
    order: 1;
  }
  #productos .producto.producto-der .wrapper .producto-info {
    order: 0;
  }

  /* TRUST BADGES */

  #trust-badges .wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
  #trust-badges .wrapper .badge {
    flex: 1;
  }
  #trust-badges .wrapper .badge:nth-child(even) svg {
    order: 0;
  }
  #trust-badges .wrapper .badge:nth-child(even) .badge-text {
    text-align: left;
  }
  #trust-badges .wrapper .badge:nth-child(odd).hidden-x {
    transform: translate(0, 30%);
  }
  #trust-badges .wrapper .badge:nth-child(even).hidden-x {
    transform: translate(0, 30%);
  }

  #contactanos .wrapper {
    width: 70%;
  }

  #testimonios .testimonial-carrousel {
    --_cards-width: 40%;
  }
}

@media (min-width: 1200px) {

  /* ROOT */
  :root {
    --bg-img-hero-jpg: url("../notebooks/imgs/bg-hero-1920.jpg");
    --bg-img-trust-badges-jpg: url("../imgs/trust-badges-medium-1920.jpg");
    --bg-img-hero-flipped: url("../notebooks/imgs/bg-hero-1920-flipped.jpg");
  }

  /* TESTIMONIALS */

  #testimonios .testimonial-carrousel {
    --_cards-width: 30%;
  }

  /* FOOTER */

  footer {
    --_footer-map-width: 25%;
    --_footer-padding-block: 3em;
    padding-inline: calc((100% - var(--ctr-width)) / 2);
    padding-block: var(--_footer-padding-block);
    position: relative;
  }
  footer iframe {
    position: absolute;
    width: var(--_footer-map-width);
    height: calc(100% - (var(--_footer-padding-block)*2) - var(--fs-900) - var(--fs-700) - var(--fs-700));
    box-shadow: var(--shadow-black);
  }
  footer a.navbar-logo {
    display: grid;
    position: absolute;
    top: 3em;
    right: calc((100% - var(--ctr-width)) / 2);
  }
  footer .footer-wrapper {
    border-radius: var(--fs-400);
    margin: calc(var(--_footer-logo-height) + var(--fs-400)) 0 0 calc(var(--_footer-logo-height) + var(--fs-400));
  }
  footer .footer-wrapper .footer-wrapper-links {
    margin-left: var(--_footer-map-width);
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
  footer .footer-wrapper p {
    text-align: center;
    margin-top: var(--fs-700);
  }
}