@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Temporal */
.brand {
  display: flex;
  align-items: center;
  gap: 4px;
}

.brand img {
  max-height: 70px;
}

.brand span {
  color: var(--titles-color);
}


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

:root {
  --primary-color: #ce0022;
  --primary-color-dark: #b2001d;
  --secondary-color: #545c52;
  --light-bg: #f8f8f8;
  --white-color: #fff;
  --titles-color: #1e000e;
  --black-color: #120309;
  --text-color: #646568;
  --light-text-color: #bbbbba;
  --border-color: #dcdddf;
  --color-light-variant: #E9EAF5;

  --bg-green-100: #f0fff4;
  --bg-red-100: #fff5f5;

  --text-green-800: #2f855a;
  --text-red-800: #9b2c2c;

  --danger-color: #d80000;

  --swiper-theme-color: var(--primary-color) !important;

  --h1-font-size: 3.25rem;
  --h1-line-height: 1.2em;

  --h2-font-size: 2.625rem;
  --h2-line-height: 1.2em;

  --h3-font-size: 2.375rem;
  --h3-line-height: 1.2em;
  --h4-font-size: 1.375rem;
  --h5-font-size: 1.25rem;
  --xl-font-size: 1.125rem;
  --body-font-size: 1rem;
  --small-font-size: 0.875rem;

  --primary-font-family: "Poppins", sans-serif;

  --xl-gap: 50px;
  --lg-gap: 32px;
  --md-gap: 32px;
  --normal-gap: 16px;
  --sm-gap: 8px;
  --xs-gap: 6px;

  --xl-border-radius: ;
  --default-border-radius: 999px;

  --deafult-transition: 0.4s all ease-in-out;

  --container-max-width: 1270px;
  --container-width: 1270px;

  --swiper-theme-color: var(--white-color);
  --swiper-navigation-size: 50px;
  --swiper-pagination-bottom: 32px;
}

@media (max-width: 1024px) {
  :root {
    --h1-font-size: 3.125rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 2rem;
  }
}

@media (max-width: 743px) {
  :root {
    --h1-font-size: 2rem;
    --h2-font-size: 1.8rem;
    --h3-font-size: 1.625rem;
    --h4-font-size: 1.25rem;

    --swiper-navigation-size: 40px;
  }
}

/*==== Layout ====*/
html {
  scroll-behavior: smooth;
}

@view-transition{
  navigation:auto; 
}

img {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--primary-font-family);
  font-weight: 400;
  overflow-x: hidden;
  scroll-behavior: smooth;
  color: var(--text-color);
  position: relative !important;
}

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

@media (max-width: 3840px) {
  .container {
    width: 65%;
  }

  :root {
    --container-width: 65%;
  }
}

/* Desktop */
@media (max-width: 1920px) {
  .container {
    width: 75%;
  }

  :root {
    --container-width: 75%;
  }
}

/* Laptop big */
@media (max-width: 1600px) {
  .container {
    width: 84%;
  }

  :root {
    --container-width: 84%;
  }
}

/* Laptop small */
@media (max-width: 1366px) {
  .container {
    width: 87%;
  }

  :root {
    --container-width: 87%;
  }
}

/* Tablet portrait */
@media (max-width: 1200px) {
  .container {
    width: 90%;
  }

  :root {
    --container-width: 90%;
  }
}

/* Mobile */
@media (max-width: 743px) {
  .container {
    width: 90%;
  }

  :root {
    --container-width: 90%;
  }
}

/*==== Flexbox ====*/
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.xs-gap {
  gap: var(--xs-gap);
}

.gap {
  gap: var(--normal-gap);
}

.lg-gap {
  gap: var(--lg-gap);
}

.wrap {
  flex-wrap: wrap;
}

.half {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: flex-start;
}

.w-full {
  width: 100%;
}

@media (max-width: 743px) {
  .half {
    width: 100%;
  }
}

/*==== Typography ====*/
h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: 700;
  color: var(--white-color);
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  font-weight: 700;
  color: var(--titles-color);
}

b {
  color: var(--titles-color);
  font-weight: 600;
}

.heading {
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap);
  flex-wrap: wrap;
}

.heading p {
  max-width: 800px;
  margin: 0 auto;
  display: block;
}

a {
  text-decoration: none;
  color: var(--primary-color-dark);
  transition: var(--deafult-transition);
}

a:hover {
  color: var(--primary-color);
  transition: var(--deafult-transition);
}

.chip {
  padding: 6px 12px;
  background-color: rgba(232, 232, 232, 0.5);
  display: inline-block;
  /*Add border left and gradient*/
  border-left: 4px solid var(--primary-color);
  font-size: var(--small-font-size);
  color: var(--titles-color);
  font-weight: 500;
  line-height: 1em;
}

.breadcrumbs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
}

.msg-container {
  display: flex;
  gap: var(--sm-gap);
  align-items: center;
  justify-content: stretch;
  flex-direction: column;
  margin-bottom: var(--normal-gap);
}

.hidden {
  display: none !important;
}

.no-scroll {
  overflow: hidden;
}

.pointer-events-none {
  pointer-events: none;
}

.error-msg {
  background-color: var(--danger-color);
  color: var(--white-color);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: var(--small-font-size);
  font-weight: 500;
  width: 100%;
  text-align: center;
}

.no-results {
  text-align: center;
  display: block;
  flex-grow: 1;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: var(--small-font-size);
  font-weight: 500;
  border: 1px solid var(--border-color);
  background-color: var(--light-bg);

}

.secondary-color {
  color: var(--secondary-color);
}

.bg-green-100 {
  background-color: var(--bg-green-100);
}

.text-green-800 {
  color: var(--text-green-800);
}

.bg-red-100 {
  background-color: var(--bg-red-100);
}

.text-red-800 {
  color: var(--text-red-800);
}

.semi-bold {
  font-weight: 600;
}

.text-xs {
  font-size: var(--small-font-size);
}

/*===== Forms  =====*/
.form form {
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
}

.form .form-group {
  display: flex;
  justify-content: space-between;
  gap: var(--lg-gap);
  flex-wrap: wrap;
}

.form .input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.form .input label {
  color: var(--titles-color);
  font-size: var(--small-font-size);
  font-weight: 500;
}

.form .input input,
.form .input textarea,
.form .input select, div.editorjs {
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-family: var(--primary-font-family);
}

.form .input textarea {
  min-height: 160px;
  resize: vertical;
}

.form .utilities {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--xs-gap);
}

.form .utilities a {
  font-size: var(--small-font-size);
  color: var(--text-color);
  font-weight: 500;
  text-wrap: nowrap;
}

.form input[type="submit"] {
  background-color: var(--primary-color);
  color: var(--white-color);
  width: 100%;
  border: none;
  padding: 16px 0;
  text-align: center;
  box-shadow: 0px 4px 26px 0px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-weight: 600;
  margin-top: 32px;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .form form {
    /* flex-wrap: wrap; */
  }

  .form .form-group {
    flex-wrap: wrap;
    gap: var(--normal-gap);
  }
}

@media (max-width: 743px) {
  .form .form-group {
    flex-direction: column;
    gap: var(--normal-gap);
  }

  .form input[type="submit"] {
    margin-top: 16px;
  }
}

/*==== Buttons ====*/
.buttons {
  display: flex;
  gap: var(--normal-gap);
  margin-top: 32px;
  align-items: center;
}

@media (max-width: 743px) {
  .buttons {
    gap: var(--normal-gap);
  }
}

.button {
  padding: 16px 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--xs-gap);
  border-radius: 6px;
  background-color: var(--primary-color-dark);
  box-shadow: 0px 3px 6px 0px rgba(178, 0, 29, 0.2);
  line-height: 1.1em;
  font-size: var(--body-font-size);
  text-decoration: none;
  color: var(--white-color);
  transition: var(--deafult-transition);
}

.button:hover {
  color: var(--white-color);
  background-color: var(--primary-color);
  transition: var(--deafult-transition);
}

/*====  Header ====*/
.header {
  width: 100%;
}

.header .top-bar {
  background-color: var(--secondary-color);
  color: var(--white-color);
  padding: 14px 0;
}

.header .top-bar a {
  line-height: 0;
}

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

.header .top-bar .contact-info {
  display: flex;
  gap: var(--normal-gap);
  align-items: center;
}

.header .top-bar .contact-info .contact-info__item {
  display: flex;
  gap: var(--xs-gap);
  align-items: center;
  color: var(--white-color);
}

.header .top-bar .contact-info .contact-info__item span {
  color: var(--white-color);
  text-decoration: none;
  font-size: var(--small-font-size);
  font-weight: 400;
  line-height: 1em;
}

.header .top-bar .social-media {
  display: flex;
  align-items: center;
  gap: var(--normal-gap);
}

.header .top-bar .social-media img {
  transition: var(--deafult-transition);
}

.header .top-bar .social-media img:hover {
  transform: translateY(-3px);
  animation-timing-function: ease-out;
  animation-duration: 500ms;
}

.header .header-content .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  gap: 22px;
}

.header .logo {
  display: flex;
  gap: var(--normal-gap);
}

.header .logo img {
  max-height: 45px;
}

.header .main-nav ul {
  display: flex;
  list-style: none;
  gap: var(--lg-gap);
}

.header .main-nav > ul {
  gap: var(--normal-gap);
}

.header .main-nav ul a {
  text-decoration: none;
  color: var(--titles-color);
  transition: var(--deafult-transition);
}

.header .main-nav ul a:hover {
  color: var(--primary-color);
  transition: var(--deafult-transition);
}

.header .dropdown {
  position: relative;
}

.header .dropdown a {
  display: flex;
  gap: 4px;
  align-items: center;
}

.header .dropdown > a {
  justify-content: center;
}

.header .dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5rem);
  background-color: var(--white-color);
  padding: 16px 0;
  border-radius: 6px;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: var(--deafult-transition) opacity,
    transform var(--deafult-transition);
  transform: translateY(-10px);
  pointer-events: none;
  z-index: 999;
}

.header .dropdown.active .dropdown-menu {
  opacity: 1;
  transition: var(--deafult-transition);
  transform: translateY(0px);
  pointer-events: auto;
}

.header .mobile-menu .dropdown-menu {
  left: -20%
}

.header .dropdown svg[data-dropdown-button] {
  transition: var(--deafult-transition);
}

.header .dropdown.active svg[data-dropdown-button] {
  transform: rotate(180deg);
  transition: var(--deafult-transition);
}

.header .dropdown-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.header .header-submenu .dropdown-menu ul {
  gap: 0;
}

.header .dropdown-menu ul li {
  width: 100%;
  border-bottom: 1px solid var(--border-color);
  padding: 16px 22px;
}

.header .dropdown-menu ul li:first-of-type {
  padding: 0 22px 16px;
}

.header .dropdown-menu ul li:last-of-type {
  padding: 16px 22px 0px;
}

.header .dropdown-menu ul li:last-of-type {
  border-bottom: none;
}

.header .dropdown-menu ul li a {
  color: var(--text-color);
}

.header .header-content .utilities {
  display: flex;
  gap: var(--lg-gap);
}

#search_button, #search_button_submenu{
  cursor: pointer;
}

.header .header-submenu {
  background-color: var(--secondary-color);
  padding: 12px 0;
}

.header .header-submenu .container {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.header .header-submenu ul {
  display: flex;
  gap: var(--lg-gap);
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.header .header-submenu ul:first-of-type {
  flex-grow: 1;
}

.header .header-submenu ul:last-of-type {
  flex-shrink: 0;
}

.header .header-submenu ul li {
  text-decoration: none;
  color: var(--white-color);
  font-size: var(--small-font-size);
}

.header .header-submenu ul a {
  text-decoration: none;
  color: var(--white-color);
  font-size: var(--small-font-size);
  line-height: 1em;
  white-space: nowrap;
  transition: var(--deafult-transition);
}

.header .header-submenu ul a:hover {
  color: var(--primary-color);
  transition: var(--deafult-transition);
}

.header .header-submenu ul img {
  order: 1;
}

#mobileMenu_button {
  display: none;
}

@media (max-width: 1024px) {
  .header .top-bar .container {
    flex-wrap: wrap;
  }

  .header .top-bar .contact-info {
    flex-wrap: wrap;
  }

  .header .top-bar .contact-info .contact-info__item span {
    display: none;
  }

  .header .header-content {
    border-bottom: 1px solid var(--border-color);
  }

  .header .header-content .container {
    flex-wrap: wrap;
  }

  .header .logo img {
    max-height: 35px;
  }

  .header .main-nav ul {
    display: none;
  }

  .header .button {
    display: none;
  }

  .header .header-content .utilities {
    gap: var(--normal-gap);
  }

  .header .header-submenu {
    display: none;
  }

  .header .header-submenu ul li:has(a) {
    flex-wrap: wrap;
    display: none;
  }

  #mobileMenu_button {
    display: block;
    cursor: pointer;
  }
}

/*==== PAGINATION ====*/
.pagination {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.products .pagination {
  margin: 0 0 0 auto;
  width: calc(70% - 16px);
}

.pagination .info {
  font-size: var(--small-font-size);
}

.pagination nav {
  display: flex;
  gap: var(--sm-gap);
  flex-wrap: wrap;
}

.pagination nav a {
  padding: 0px;
  font-size: 12.5px;
  aspect-ratio: 1/1;
  width: 32px;
  height: 32px;
  text-align: center;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.pagination nav a.active {
  color: var(--white-color);
  background-color: var(--primary-color);
}

@media (max-width: 743px) {
  .products .pagination {
    margin:  32px auto 0 auto;
    width: 100%;
  }

  .pagination {
    justify-content: center;
  }

  .pagination .info {
    display: none;
  }
}

/*==== SEARCH MODAL =====*/
.search-modal {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--black-color);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Smooth transition and animation */
  transition: var(--deafult-transition);
  animation: FadeOutDown 500ms all;
  bottom: -130%;
}

.search-modal .search_bar input[type="text"] {
  /* background-color: rgba(255, 255, 255, .5); */
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--white-color);
  color: white;
  background-color: transparent;
}

.search-modal.active {
  transition: var(--deafult-transition);
  animation: fadeInUp 1s all;
  bottom: 0;
}

#search-results ul {
  color: white;
  max-height: 300px;
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  overflow-y: auto;
}

#search-results ul a {
  color: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#search-results ul a img {
  max-height: 80px;
  object-fit: cover;
  margin-right: 16px;
  border-radius: 8px;
}

#search-results ul a h4 {
  font-size: var(--h4-font-size);
  font-weight: 600;
  max-width: 70%;
}

@keyframes fadeInUp {
  from {
    bottom: -100%;
  }
  to {
    bottom: 0;
  }
}

@keyframes fadeOutDown {
  from {
    bottom: 0;
  }
  to {
    bottom: -100%;
  }
}

#closeSearch {
  position: absolute;
  right: 32px;
  top: 32px;
  cursor: pointer;
  color: var(--white-color);
}

/*====  Mobile Menu ====*/
.mobile-menu {
  /* display: none; */
  position: fixed;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--white-color);
  z-index: 9999;
  transition: var(--deafult-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--deafult-transition);
  animation: FadeOutDown 500ms all;
  bottom: -130%;
}

.mobile-menu.active {
  transition: var(--deafult-transition);
  animation: fadeInUp 1s all;
  bottom: 0;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: var(--lg-gap);
  list-style: none;
  text-align: center;
  font-weight: 500;
}

.mobile-menu .container {
  position: relative;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

#closeMenu {
  position: absolute;
  right: 0;
  top: 32px;
  cursor: pointer;
}

/*==== Search Bar ====*/
.search_bar {
  width: 100%;
  display: flex;
  gap: 16px;
}

.search_bar input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #dcdddf;
  border-radius: 200px;
  font-size: var(--p-font-size);
}

.search_bar button {
  border-radius: 200px;
  background-color: var(--primary-color);
  border-radius: 200px;
  border: none;
  line-height: 1em;
  color: var(--white-color);
  width: 50px;
}

/*====  Chat ====*/
#chat {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color-dark);
  color: var(--white-color);
  filter: drop-shadow(0px 3px 6px rgba(178, 0, 29, 0.2));
  transition: var(--deafult-transition);
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 50%;
  z-index: 9999;
}

#chat:hover {
  background-color: var(--primary-color);
  transition: var(--deafult-transition);
}

/*====  Generic Section ====*/
.generic-section {
  padding: 50px 0;
}

.generic-section.lg {
  padding: 80px 0;
}

@media (max-width: 743px) {
  .generic-section.lg {
    padding: 50px 0;
  }
}

.light-bg {
  background-color: var(--light-bg);
}

.generic-section h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: 700;
  color: var(--titles-color);
}

.generic-section .container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lg-gap);
}

.generic-section.nosotros .container {
  flex-wrap: nowrap;
  gap: 120px;
}

.generic-section .text,
.generic-section .image {
  width: calc(50% - 16px);
  position: relative;
}

.generic-section .text {
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: flex-start;
}

.generic-section.nosotros .text {
  padding-top: 90px;
}

.generic-section.nosotros .text .flex {
  color: var(--titles-color);
  font-weight: 500;
}

.generic-section.nosotros .clientes {
  position: absolute;
  bottom: 20%;
  right: -50px;
}

.generic-section.nosotros .instalaciones {
  position: absolute;
  bottom: 0%;
  left: -50px;
}

@media (max-width: 1024px) {
  .generic-section.nosotros .text {
    padding-top: 0;
  }
  .generic-section.nosotros .clientes {
    right: -50px;
    max-width: 50%;
  }

  .generic-section.nosotros .instalaciones {
    left: -50px;
    max-width: 60%;
  }
}

@media (max-width: 743px) {
  .generic-section.nosotros .container {
    flex-wrap: wrap;
    gap: 32px;
  }

  .generic-section .text,
  .generic-section .image {
    width: 100%;
  }

  .generic-section.nosotros .text {
    padding-top: 0;
  }

  .generic-section.nosotros .instalaciones {
    left: -30px;
    max-width: 45%;
  }

  .generic-section.nosotros .clientes {
    right: -10px;
    max-width: 35%;
  }
}

/*==== Hero ====*/
.hero {
  view-transition-name: logo;
}

.hero.swiper {
  height: 600px;
  color: var(--white-color);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.hero.swiper h2 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: 700;
  color: var(--white-color);
}

/* .hero .swiper-slide {
  background: linear-gradient(
      270deg,
      rgba(0, 0, 0, 0) -76.98%,
      rgba(0, 0, 0, 1) 119.03%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) -39.17%,
      rgba(0, 0, 0, 0.8) 169.83%
    ),
    url(../img/home/banner.jpg) lightgray 50% / cover no-repeat;
} */

.hero.swiper .container {
  padding-top: 80px;
  gap: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding-right: 30%;
}

.hero .brands {
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: var(--lg-gap); */
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero .brands img {
  max-height: 100px;
  object-fit: contain;
  transition: var(--deafult-transition);
}

.hero .brands img:hover {
  transform: translateY(-6px);
  transition: var(--deafult-transition);
}

@media (max-width: 743px) {
  .hero .brands {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--xs-gap);
  }

  .hero .brands img {
    max-height: 60px;
  }

  .hero .brands img:hover {
    transform: translateY(-3px);
    transition: var(--deafult-transition);
  }
}

.hero .controls .swiper-button-next,
.hero .controls .swiper-button-prev {
  color: var(--white-color) !important;
}

.swiper-button-prev {
  left: 32px !important;
}

.swiper-button-next {
  right: 32px !important;
}

@media (max-width: 1024px) {
  .hero.swiper .container {
    padding-top: 60px;
  }
}

@media (max-width: 743px) {
  .hero.swiper .container {
    padding: 0 22px;
    padding-top: 50px;
    justify-content: center;
    align-items: center;
  }

  .hero .controls .swiper-button-next,
  .hero .controls .swiper-button-prev {
    width: 26px;
  }

  .swiper-button-prev {
    left: 6px !important;
  }

  .swiper-button-next {
    right: 6px !important;
  }
}

/*==== Hero No Slider ====*/
.hero {
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero.nosotros {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 48.89%, #000 90.45%),
    linear-gradient(270deg, #000 9.44%, rgba(0, 0, 0, 0) 48.89%),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) -39.17%,
      rgba(0, 0, 0, 0.3) 169.83%
    ),
    url("../img/nosotros/hero.jpg") lightgray 50% / cover no-repeat;
}

.hero .container {
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
}

/*====  Company Feautures ====*/
.company-feautures {
  margin: -100px auto 80px;
  border-radius: 8px;
  padding: 50px 0;
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  box-shadow: 0px 3px 25px 2px rgba(0, 0, 0, 0.1);
  z-index: 999;
  position: relative;
  view-transition-name: company-features;
}

.company-feautures .feautures_container {
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  gap: var(--lg-gap);
}

.company-feautures__item:nth-child(2) {
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0 22px;
}

.company-feautures__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--normal-gap);
  text-align: center;
  width: 33.3%;
}

.company-feautures__item h3 {
  font-size: var(--h4-font-size);
  color: var(--titles-color);
  font-weight: 600;
  line-height: 1em;
}

@media (max-width: 743px) {
  .company-feautures {
    margin-bottom: 50px;
  }

  .company-feautures .feautures_container {
    flex-wrap: wrap;
  }

  .company-feautures__item {
    width: 100%;
    gap: 8px;
  }

  .company-feautures__item:nth-child(2) {
    border: none;
  }
}

/* Appplications */
.applications {
  padding: 50px 0;
  text-align: center;
}

.applications .applications_container {
  display: flex;
  justify-content: space-between;
  margin: 50px 0;
  gap: var(--lg-gap);
}

.applications__item {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  align-items: flex-start;
  width: 25%;
}

.applications__item > img:first-of-type {
  width: 100%;
}

.applications__item img {
  max-width: 100%;
}

.applications__item-info {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: flex-start;
  text-align: left;
  height: 100%;
}

.applications__item-info img {
  margin-top: -32px;
  margin-bottom: 0px;
  filter: drop-shadow(0px 3px 6px rgba(84, 92, 82, 0.2));
}

.applications__item-info h3 {
  font-size: var(--h4-font-size);
  color: var(--titles-color);
  font-weight: 600;
  line-height: 1em;
}

.applications__item-info p {
  margin-bottom: 16px;
  flex-grow: 1;
}

@media (max-width: 1024px) {
  .applications .applications_container {
    flex-wrap: wrap;
  }

  .applications__item {
    width: calc(50% - 16px);
  }
}

@media (max-width: 743px) {
  .applications .applications_container {
    margin-top: 32px;
    flex-wrap: wrap;
  }

  .applications__item {
    width: 100%;
  }
}

/*====  Feautured Products ====*/
.feautured-products {
  padding: 50px 0;
  text-align: center;
  background-color: var(--light-bg);
  position: relative;
}

.feautured-products .heading {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.feautured-products .filters {
  display: flex;
  gap: var(--normal-gap);
}

.feautured-products .filters a {
  text-decoration: none;
  color: var(--text-color);
  transition: var(--deafult-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--xs-gap);
  padding: 12px 16px;
  border: 1px solid var(--text-color);
  border-radius: 6px;
  line-height: 1em;
}

.feautured-products .filters a:hover {
  color: var(--white-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color-dark);
  transition: var(--deafult-transition);
}

.feautured-products .filters a.active {
  color: var(--white-color);
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
}

.feautured-products_container {
  /* display: flex; */
  /* justify-content: space-between; */
  /* gap: var(--lg-gap); */
  margin-top: 50px;
  margin-bottom: 32px;
}

.feautured-products-swiper {
  margin-top: var(--md-gap);
}

.feautured-products .swiper-wrapper {
  /* display: flex; */
  /* align-items: stretch; */
}

.feautured-products .swiper-slide {
  flex-grow: 1;
  height: auto;
}

.feautured-products__item {
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--white-color);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  width: 100%;
  text-align: left;
  overflow: hidden;
  height: 100%;
}

.feautured-products__item .product-image{
  height: 50%;
  object-fit: cover;
  width: 100%;
}

.feautured-products__item .feautured-products__item-info {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--xs-gap);
  align-items: flex-start;
  text-align: left;
  height: auto;
}

.feautured-products__item .feautured-products__item-info h3 {
  font-size: var(--h4-font-size);
  color: var(--titles-color);
  font-weight: 600;
  line-height: 1em;
  margin-bottom: 5px;
}

.feautured-products__item .feautured-products__item-info .category {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-color);
  transition: var(--deafult-transition);
  margin-bottom: 6px;
  font-size: var(--small-font-size);
}

.feautured-products__item .feautured-products__item-info .category img {
  max-height: 22px;
}

.feautured-products__item .feautured-products__item-info .category:hover {
  color: var(--primary-color-dark);
  transition: var(--deafult-transition);
}

.feautured-products__item .feautured-products__item-info .button {
  width: 100%;
  text-align: center;
  background: none;
  color: var(--primary-color-dark);
  border: 1px solid var(--primary-color-dark);
  box-shadow: none;
  flex-grow: 1;
}

.feautured-products__item .feautured-products__item-info .button:hover {
  background-color: var(--primary-color-dark);
  color: var(--white-color);
  transition: var(--deafult-transition);
}

.feautured-products .swiper-pagination {
  display: block;
  position: relative;
  margin-top: 50px;
}

@media (max-width: 743px) {
  .feautured-products .heading {
    text-align: left;
    gap: 16px;
  }

  .feautured-products .filters {
    flex-wrap: wrap;
  }

  .feautured-products_container {
    /* flex-wrap: wrap; */
  }

  .feautured-products__item {
    height: auto;
  }
}

/*==== About Us ====*/
.about-us {
  padding: 80px 0;
}

.about-us .container {
  display: flex;
  gap: var(--lg-gap);
}

.about-us .about__image {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-us .about__info {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: flex-start;
}

.about-us .about__info .logos {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.about-us .about__info .logos img {
  max-height: 45px;
}

@media (max-width: 743px) {
  .about-us {
    padding: 50px 0;
  }

  .about-us .container {
    flex-wrap: wrap;
  }
  .about-us .about__image {
    width: 100%;
  }
  .about-us .about__info {
    width: 100%;
  }
}

/*====  Numbers ====*/
.numbers {
  padding: 80px 0;
  min-height: 400px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) -76.86%, #000 115.86%),
    url("../img/home/company-numbers.jpg"),
    lightgray 0px -149.756px / 100% 274.319% no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}

.numbers .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.numbers .container div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  padding: 32px 0;
  text-align: center;
}

.numbers .container div:nth-child(even) {
  border-left: 1px solid var(--white-color);
  border-right: 1px solid var(--white-color);
}

.numbers .container div h3 {
  font-size: var(--h2-font-size);
  color: var(--white-color);
  font-weight: 600;
  line-height: 1em;
  margin-bottom: 16px;
}

@media (max-width: 743px) {
  .numbers {
    padding: 32px 0;
  }

  .numbers .container {
    flex-wrap: wrap;
  }

  .numbers .container div:nth-child(even) {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--white-color);
    border-bottom: 1px solid var(--white-color);
  }

  .numbers .container {
    justify-content: center;
    align-items: center;
  }

  .numbers .container div:nth-child(1) {
    align-items: center;
  }

  .numbers .container div:nth-child(3) {
    align-items: center;
  }
}

/*====  Presence ====*/
.presence {
  padding: 80px 0;
}

.presence .container {
  display: flex;
  gap: var(--lg-gap);
  align-items: center;
}

.presence .feautures {
  color: var(--titles-color);
  margin-bottom: 16px;
}

.presence .feautures div:hover {
  color: var(--primary-color-dark);
  transition: var(--deafult-transition);
  cursor: pointer;
}

@media (max-width: 743px) {
  .presence {
    padding: 50px 0;
  }

  .presence .container {
    flex-wrap: wrap;
    gap: 50px;
  }
}

/*==== Proyectos ====*/
.projects {
  padding: 80px 0;
  background-color: var(--light-bg);
  text-align: center;
}

.projects_container {
  margin-top: 50px;
  margin-bottom: 50px;
  display: grid;
  gap: var(--lg-gap);
  grid-template-areas:
    "a b d"
    "c c d";
}

.projects__item {
  width: 100%;
  min-height: 350px;
  border-radius: 25px;
  padding: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  color: var(--white-color);
  font-size: var(--h4-font-size);
  background-color: var(--primary-color-dark);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.projects__item .shadow {
  width: 100%;
  height: 50%;
  border-radius: 25px 25px 0px 0px;
  background: linear-gradient(360deg, #000 0%, rgba(34, 34, 34, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 100%;
  z-index: 0;
}

.projects__item h4 {
  z-index: 2;
  /* position: absolute; */
}

.projects__item.item-1 {
  grid-area: a;
  background-image: url("../img/home/item-1.jpg");
}

.projects__item.item-2 {
  grid-area: b;
  background-image: url("../img/home/item-2.jpg");
}

.projects__item.item-3 {
  grid-area: c;
  background-image: url("../img/home/item-3.jpg");
}

.projects__item.item-4 {
  grid-area: d;
  background-image: url("../img/home/item-4.jpg");
}

@media (max-width: 743px) {
  .projects {
    padding: 50px 0;
  }

  .projects_container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: unset;
  }

  .projects__item.item-1 {
    grid-area: unset;
  }
  .projects__item.item-2 {
    grid-area: unset;
  }
  .projects__item.item-3 {
    grid-area: unset;
  }
  .projects__item.item-4 {
    grid-area: unset;
  }
}

/*====  Certifications ====*/
.certifications {
  padding: 80px 0;
}

.certifications .container {
  display: flex;
  gap: var(--lg-gap);
  align-items: center;
}

.certifications .certifications_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--lg-gap);
}

.certifications .certifications__item {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 16px;
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  box-shadow: 0px 1px 20px 1px rgba(41, 41, 41, 0.1);
  border-radius: 8px;
}

.certifications .certifications__item img {
  max-height: 80px;
  max-width: 90%;
  width: auto;
}

@media (max-width: 1024px) {
  .certifications .certifications_container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 743px) {
  .certifications {
    padding: 50px 0;
  }

  .certifications .container {
    flex-wrap: wrap;
  }

  .certifications .certifications_container {
    grid-template-columns: repeat(2, 1fr);
    order: 2;
  }

  .certifications .certifications__item {
    padding: 32px 16px;
  }

  .certifications .half:has(.certifications_container) {
    order: 2;
  }
}

/*====  CTA ====*/
.cta {
  padding: 80px 50px;
  background-color: var(--secondary-color);
  color: var(--white-color);
  text-align: center;
  border-radius: 8px;
  position: relative;
  margin-bottom: 80px;
}

.cta h2 {
  color: var(--white-color);
}

.cta .text {
  width: 50%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: flex-start;
  color: var(--white-color);
}

.cta .button {
  color: var(--primary-color-dark);
  background-color: var(--white-color);
  box-shadow: 0px 3px 6px 0px rgba(255, 255, 255, 0.2);
}

.cta img {
  position: absolute;
  right: -2%;
  width: 40%;
  height: 80%;
  top: 10%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 743px) {
  .cta {
    padding: 32px 22px;
    margin-bottom: 150px;
  }

  .cta img {
    position: relative;
    width: 100%;
    height: unset;
    top: unset;
    right: unset;
    margin-top: 22px;
    margin-bottom: -130px;
  }

  .cta .text {
    width: 100%;
  }
}

/*==== Scroller ====*/
.clients-scroller {
  border-top: 1px solid var(--border-color);
  /* margin-top: 80px; */
}

.scroller {
  max-width: 100%;
  padding: 0px 0;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 40s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 1.5rem));
  }
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem;
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.scroller img {
  /* max-width: 65%; */
  width: auto;
  object-fit: cover;
  /* filter: grayscale(100); */
  transition: var(--deafult-transition);
}

.scroller img {
  max-height: 90px !important;
}

@media (max-width: 743px) {
  .scroller img {
    max-height: 65px !important;
  }

  .clients-scroller {
    /* margin-top: 160px; */
  }
}

/*====  Nosotros ====*/
.about__feautures {
  width: 100%;
  color: var(--titles-color);
}

.about__feautures {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.about__feautures_item {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: var(--normal-gap);
}

.about__feautures_item .img {
  position: relative;
}

.about__feautures_item img {
  border-radius: 8px;
  width: 100%;
}

.about__feautures_item .icon {
  width: 74px;
  margin-top: -37px;
}

.about__feautures_item h4 {
  text-align: center;
  width: 100%;
  color: var(--titles-color);
  font-size: var(--h4-font-size);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .about__feautures {
    flex-wrap: wrap;
    gap: 32px;
  }

  .about__feautures_item {
    width: calc(50% - 16px);
  }

  .about__feautures_item .icon {
    width: 50px;
    margin-top: -25px;
  }
}

@media (max-width: 743px) {
  .about__feautures {
    margin-top: 0;
  }

  .about__feautures_item {
    width: 100%;
  }
}

/*====  Filosofia ====*/
.filosofia {
  color: var(--white-color);
  background-color: #000;
  display: flex;
  gap: 0;
}

.filosofia h2 {
  color: var(--white-color);
  font-size: var(--h4-font-size);
}

.mision .container,
.vision .container {
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: center;
  text-align: center;
  padding: 80px 0;
}

.mision {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) -125.71%, #000 84.83%),
    url(../img/nosotros/mision.jpg) lightgray 0px -20.3px / 100% 137.16% no-repeat;
  background-size: cover;
  background-position: center;
}

.vision {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) -125.71%, #000 84.83%),
    url(../img/nosotros/vision.jpg) lightgray 0px -20.3px / 100% 137.16% no-repeat;
  background-size: cover;
  background-position: center;
}

@media (max-width: 743px) {
  .filosofia {
    flex-wrap: wrap;
  }

  .mision .container,
  .vision .container {
    padding: 50px 0;
  }
}

/*====  Valores ====*/
.valores__container {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
}

.valores__item {
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
  align-items: flex-start;
  text-align: left;
}

.valores__item h4 {
  font-size: var(--h4-font-size);
  color: var(--titles-color);
  font-weight: 600;
  line-height: 1em;
}

@media (max-width: 1024px) {
  .valores__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 743px) {
  .valores__container {
    margin-top: 0;
    grid-template-columns: repeat(1, 1fr);
  }
}

/*==== Presencia  ====*/
.generic-section.presencia {
  text-align: center;
  padding-bottom: 0;
}

.map {
  margin-top: 32px;
  height: 350px;
}

@media (max-width: 1024px) {
  .generic-section.presencia {
    padding-top: 0;
  }

  .map {
    height: 350px;
    object-fit: cover;
  }
}

@media (max-width: 743px) {
  .generic-section.presencia {
    padding-top: 0;
  }

  .map {
    margin-top: 32px;
    height: 350px;
    object-fit: cover;
  }
}

/*====  Clientes ====*/
.clientes {
  padding: 80px 0;
}

.clientes .heading {
  align-items: flex-start;
}

.clientes__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
  gap: 32px;
  flex-wrap: nowrap;
}

.clientes__container div {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 1;
  flex-grow: 0;
  width: 20%;
}

.clientes__container .clientes__item {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid#DCDDDF;
  padding: 32px;
  flex-grow: 1;
  width: 100%;
}

.clientes__container .clientes__item img {
  max-height: 32px;
}

@media (max-width: 1024px) {
  .clientes__container {
    gap: 32px;
  }
}

@media (max-width: 743px) {
  .clientes {
    padding: 50px 0;
  }

  .clientes__container {
    margin-top: 32px;
    gap: 16px;
  }
  .clientes__container .clientes__item {
    padding: 16px 10px;
  }
}

/*====  Servicios ====*/
.services {
  background: linear-gradient(
    95deg,
    #b2001d -1.19%,
    #e50025 57.78%,
    #ff8094 115.08%
  );
  width: 100%;
  margin-top: 100px;
  padding-bottom: 50px;
}

.services__container {
  display: flex;
  gap: 32px;
}

.services__item {
  margin-top: -100px;
  color: var(--white-color);
  position: relative;
  height: 350px;
  width: 100%;
  background-blend-mode: multiply, normal;
  background-size: cover;
  border-radius: 8px;
  transition: var(--deafult-transition);
}

.services__item.especificacion {
  background: linear-gradient(0deg, #030616 14.34%, rgba(60, 60, 60, 0) 43.86%),
    url("../img/nosotros/especificacion.jpg") lightgray 50% / cover no-repeat;
}
.services__item.instalacion {
  background: linear-gradient(0deg, #030616 14.34%, rgba(60, 60, 60, 0) 43.86%),
    url("../img/nosotros/instalacion.jpg") lightgray 50% / cover no-repeat;
}
.services__item.distribucion {
  background: linear-gradient(0deg, #030616 14.34%, rgba(60, 60, 60, 0) 43.86%),
    url("../img/nosotros/red-distribucion.jpg") lightgray 50% / cover no-repeat;
}
.services__item.recursos {
  background: linear-gradient(0deg, #030616 14.34%, rgba(60, 60, 60, 0) 43.86%),
    url("../img/nosotros/recursos.jpg") lightgray 50% / cover no-repeat;
}

.services__item:hover {
  color: var(--white-color);
}

.services__item p {
  color: var(--primary-color);
}

.services__item img {
  width: 100%;
  border-radius: 4px;
  position: relative;
}

.services__item img::after {
  content: ""; /* Puedes cambiar esto a lo que quieras que se muestre */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  border-radius: 4px;
}

.services__item .text {
  position: absolute;
  bottom: 16px;
  left: 16px;
}

@media (max-width: 1024px) {
  .services__container {
    flex-wrap: wrap;
  }

  .services__item {
    width: calc(50% - 16px);
    margin-top: 0;
  }

  .services__item:nth-child(1),
  .services__item:nth-child(2) {
    margin-top: -100px;
  }
}

@media (max-width: 743px) {
  .services__container {
    flex-wrap: wrap;
    gap: 32px;
  }

  .services__item {
    width: 100%;
    margin-top: 0;
  }

  .services__item:nth-child(1) {
    margin-top: -100px;
  }

  .services__item:nth-child(2) {
    margin-top: 0;
  }
}

/*==== Footer ====*/
.footer {
  background-color: var(--black-color);
  color: var(--light-text-color);
  padding: 50px 0;
}

.footer .footer-content {
  border-top: 1px solid var(--border-color);
  padding-top: 32px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
}

.footer .footer-content .footer-logo {
  display: flex;
  gap: var(--normal-gap);
  margin-bottom: 16px;
  align-items: center;
}

.footer .footer-content .footer-logo img {
  max-height: 45px;
}

.footer .footer-content .company-info ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
}

.footer .footer-content .company-info ul li a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--xs-gap);
}

.footer .footer-content .footer-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 22px;
}

.footer .footer-content .footer-menu h4 {
  font-size: var(--h4-font-size);
  color: var(--white-color);
  font-weight: 500;
}

.footer .footer-content .footer-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
}

.footer .copyright {
  color: var(--light-text-color);
}

.footer .copyright .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--small-font-size);
}

.footer a {
  color: var(--light-text-color);
  text-decoration: none;
  transition: var(--deafult-transition);
}

.footer a:hover {
  color: var(--primary-color);
  transition: var(--deafult-transition);
}

@media (max-width: 1024px) {
  .footer .footer-content {
    flex-wrap: wrap;
    gap: 32px;
  }

  .footer .footer-content .company-info {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .footer .footer-content .company-info ul {
    justify-content: center;
    align-items: center;
  }

  .footer .footer-content .footer-menu {
    width: calc(50% - 16px);
  }

  .footer .copyright .container {
    flex-wrap: wrap;
    gap: 16px;
    text-align: center;
    justify-content: center;
  }

  .footer .copyright .container p {
    width: 100%;
  }
}

@media (max-width: 743px) {
  .footer .footer-content .footer-logo {
    justify-content: center;
  }

  .footer .footer-content .footer-menu {
    width: 100%;
  }

  .footer .footer-content .company-info ul li a {
    justify-content: center;
  }

  .footer .copyright .container p:first-of-type {
    order: 1;
  }
}

/*====  Accordeon ====*/
details {
  width: 100%;
  transition: var(--deafult-transition);
}

details:hover {
  cursor: pointer;
  transition: var(--deafult-transition);
}

details:hover > summary,
details:hover > summary svg {
  color: var(--primary-color);
  transition: var(--deafult-transition);
}

details p {
  text-align: left;
}

details > summary {
  list-style: none;
  /* font-size: var(--xl-font-size); */
  font-weight: 700;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-color);
  transition: var(--deafult-transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--titles-color);
  text-align: left;
  font-size: var(--body-font-size);
}

details summary::-webkit-details-marker {
  display: none;
}

details > summary svg {
  max-width: 18px;
  transition: var(--deafult-transition);
}

details .info {
  display: flex;
  flex-direction: column;
  gap: var(--normal-gap);
}

details .info ul, details .info ol {
  display: flex;
  flex-direction: column;
  gap: 8px
}

details .info ol {
  list-style: upper-alpha;
}

@media (max-width: 1024px) {
  details > summary {
    padding: 26px 0;
  }
}

@media (max-width: 743px) {
  details > summary {
    padding: 22px 0;
  }
}

details[open] {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 32px;
  transition: var(--deafult-transition);
}

details[open] > summary {
  color: var(--primary-color);
  border-bottom: none;
  transition: var(--deafult-transition);
}

details[open] > summary svg {
  transform: rotate(90deg);
  transition: var(--deafult-transition);
}

/*====  Sucursales ====*/
.sucursales {
  padding: 80px 0 0;
  text-align: center;
}

.sucursales__container {
  display: flex;
  gap: var(--lg-gap);
  margin-top: 50px;
  justify-content: flex-start;
}

.sucursales__container .map {
  width: 50%;
  height: 450px;
}

.sucursales__container .map .firstHeading {
  color: var(--titles-color);
}

.sucursales__container .info {
  width: calc((var(--container-width) * 0.45));
  padding: 0px 0;
  max-height: 450px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.sucursales__container .phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  align-items: flex-start;
}

.sucursales__container .social-icons {
  margin-top: 22px;
}

.sucursales__container .social-icons a {
  color: var(--titles-color);
  transition: var(--deafult-transition);
}

.sucursales__container .social-icons a:hover {
  transform: translateY(-5px);
  transition: var(--deafult-transition);
  color: var(--primary-color);
}

.sucursales__container .info::-webkit-scrollbar {
  width: 6px;
}

.sucursales__container .info::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 4px;
  opacity: 0.6 !important;
}

@media (max-width: 1024px) {
  .sucursales__container .map {
    height: 420px;
  }
}

@media (max-width: 743px) {
  .sucursales {
    padding: 50px 0 0;
  }

  .sucursales__container {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 0;
  }

  .sucursales__container .map {
    width: 100%;
  }

  .sucursales__container .info {
    width: var(--container-width);
    margin: 0 auto;
  }
}

/*====  Politicas de Privacidad ====*/
.faq {
  padding: 150px 0 80px 0;
}

.faq h1 {
  text-align: center;
}

.faq .container {
  display: flex;
  flex-direction: column;
  gap: var(--lg-gap);
  align-items: center;
}

.faq__container {
  width: 100%;
  display: flex;
  gap: var(--lg-gap);
  margin-top: 32px;
}

.faq .container .col {
  width: 50%;
}

.faq__container .col {
  width: 100%;
}

@media (max-width: 1024px) {
  .faq__container {
    flex-wrap: wrap;
    gap: 0;
  }

  .faq .container .col {
    width: 100%;
  }
}

@media (max-width: 743px) {
  .faq {
    padding: 110px 0 50px 0;
  }

  .faq .container {
    gap: var(--md-gap);
  }

  .faq__container {
    flex-wrap: wrap;
    gap: 0;
  }

  .faq .container .col {
    width: 100%;
  }
}