/*
Theme Name: Mimex
Theme URI: 
Author: MIMEX · Mercados Mundiales Import Export S.A.U.
Author URI: 
Description: Tema a medida para MIMEX · Mercados Mundiales Import Export S.A.U., basado en la maqueta HTML de referencia.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: UNLICENSED
Text Domain: mimex
*/

/* =========================================================
   MIMEX — style.css
   ========================================================= */

/* ---------- Custom properties ---------- */
:root {
  /* Colores */
  --color-blue-light: #00A6D6;
  --color-blue-dark: #005285;
  --color-gray-dark: #A4AAB0;
  --color-gray-light: #F8F8F8;
  --color-white: #FFFFFF;
  --color-black: #1D1D1B;
  --color-text: #6B7076;
  --color-heading: var(--color-blue-dark);
  --color-charcoal: #4A4F54;

  /* Tipografía */
  --font-family-base: "Inter", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Layout */
  --wrapper-max-width: 1920px;
  --wrapper-padding: 4.858vw;
  --radius-xl: 32px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Transiciones */
  --transition-base: .25s ease;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-blue-dark);
  color: var(--color-white);
  padding: .75em 1.25em;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Layout: wrapper ---------- */
.wrapper {
  width: 100%;
  max-width: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding);
}

.wrapper--full {
  max-width: none;
}

.section {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}

/* ---------- Reusable: eyebrow ---------- */
.eyebrow {
  margin: 0 0 .75em;
  /*font-size: .8125rem;*/
  font-size: max(.8125rem,0.929vw);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-blue-light);
}

.eyebrow--on-dark {
  color: var(--color-blue-light);
}

/* ---------- Reusable: section heading ---------- */
.section-heading {
  /*max-width: 900px;*/
  max-width: 64.286vw;
}

.section-heading h2 {
  font-size: max(28px, 2.6vw);
  /*margin-bottom: 1.25rem;*/
  margin-bottom: 0.549827em;
}

.section-heading p {
  /*font-size: 1.0625rem;*/
  font-size: max(18px, 1.572vw);
  line-height: 1.7;
  color: var(--color-gray-dark);
  font-weight: 200;
}

.section-heading p strong {
  color: var(--color-gray-dark);
}

.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.section-actions--start {
  justify-content: flex-start;
}

/* ---------- Reusable: icon-arrow (used inside buttons/links) ---------- */
.icon-arrow {
  display: inline-block;
  width: 12px;
  height: 14px;
  margin-left: .625em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.405 13.639"><g transform="translate(-4.405 -3.586)"><line x2="10" transform="translate(5.405 10.405)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M12,5l5.405,5.405L12,15.811" transform="translate(-1.595)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>');
  vertical-align: middle;
}

.icon-arrow--down {
  margin-left: 0;
  transform: rotate(90deg);
}

/* ---------- Reusable: button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  /*padding: .95em 1.75em;*/
  background: var(--color-blue-light);
  color: var(--color-white);
  font-weight: var(--fw-medium);
  /*font-size: .9375rem;*/
  border: 0;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base);
  padding: 1.063em 1.063em 1.063em 1.625em;
  font-size: max(16px, 1.144vw);
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-blue-dark);
}

/* ---------- Reusable: icon-only button (pill) ---------- */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.75rem;
  height: 2.5rem;
  padding-inline: 1rem;
  background: var(--color-blue-light);
  border: 0;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base);
}

.btn-icon .icon-arrow {
  margin-left: 0;
}

.btn-icon:hover,
.btn-icon:focus-visible {
  background: var(--color-blue-dark);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: relative;
  z-index: 10;
  background: var(--color-white);
}

.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
}

.site-header__logo img {
  height: 48px;
  width: auto;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header-meta__item a {
  display: flex;
  align-items: center;
  gap: .625em;
}

.header-meta__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.header-meta__icon img {
  width: 18px;
  height: 18px;
}

.header-meta__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.header-meta__label {
  font-size: .75rem;
  color: var(--color-gray-dark);
}

.header-meta__value {
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--color-blue-light);
}

.site-header__bottom {
  padding-block: .9rem;
}

.main-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  margin-left: auto;
}

.main-nav__toggle span {
  display: block;
  height: 2px;
  background: var(--color-blue-dark);
  border-radius: 2px;
}

.main-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  font-size: max(1.072vw, 12px);
}

.main-nav__list a {
  font-size: inherit;
  font-weight: var(--fw-light);
  color: var(--color-gray-dark);
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: color var(--transition-base);
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-blue-light);
}

.main-nav__list a.is-active,
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a,
.main-nav__list .current-menu-ancestor > a,
.main-nav__list .current_page_ancestor > a {
  color: var(--color-blue-dark);
  font-weight: var(--fw-light);
}

/* =========================================================
   Hero (Swiper)
   ========================================================= */
.hero {
  /* padding-top: 1.5rem; */
}

.hero__frame {
  position: relative;
}

.hero__slider {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero__slide {
  position: relative;
  aspect-ratio: 16 / 7;
  min-height: 360px;
  background-color: var(--color-blue-dark);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,20,40,.55) 0%, rgba(0,20,40,.15) 55%, rgba(0,20,40,0) 80%);
}

.hero__slide-inner {
  position: relative;
  padding: 0 3.5rem;
  /* max-width: 900px; */
}

.hero__title {
  color: var(--color-white);
  font-size: max(28px, 4.5vw);
  line-height: 1.15;
  font-weight: var(--fw-extrabold);
}

.hero__pagination.swiper-pagination-bullets {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  top: auto;
  width: auto;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

.hero__pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0;
  background: rgba(255,255,255,.55);
  opacity: 1;
  border-radius: 50%;
  transition: background-color var(--transition-base);
}

.hero__pagination .swiper-pagination-bullet-active {
  background: var(--color-blue-light);
}

.hero__whatsapp {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: transform var(--transition-base);
}

.hero__whatsapp img {
  width: 100%;
  height: 100%;
}

.hero__whatsapp:hover {
  transform: scale(1.06);
}

/* =========================================================
   Page banner (static, reusable — inner pages)
   ========================================================= */
.page-banner {
  /* padding-top: 1.5rem; */
}

.page-banner__frame {
  position: relative;
  aspect-ratio: 1220 / 245;
  min-height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-blue-dark);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.page-banner__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,20,40,.6) 0%, rgba(0,20,40,.2) 55%, rgba(0,20,40,0) 85%);
}

.page-banner__inner {
  position: relative;
  padding-left: 3.5rem;
}

.page-banner__title {
  color: var(--color-white);
  font-size: max(24px, 3.4725vw);
  line-height: 1.15;
}

.breadcrumb {
  margin-top: .75rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  padding-left: 0;
  font-size: max(12px, 1vw);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: .4em;
}

.breadcrumb li:not(:first-child)::before {
  content: "\00b7";
  color: rgba(255,255,255,.6);
}

.breadcrumb a {
  color: rgba(255,255,255,.85);
  transition: color var(--transition-base);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-white);
}

.breadcrumb a[aria-current] {
  color: var(--color-blue-light);
}

/* =========================================================
   Card grid (reusable)
   ========================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.card {
  position: relative;
}

.card__link {
  display: grid;
  border-top-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  overflow: hidden;
}

.card__media {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}

.card__link:hover .card__media {
  transform: scale(1.04);
}

.card__body {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem 2rem 2.25rem;
  background: linear-gradient(0deg, rgba(0,20,40,.72) 0%, rgba(0,20,40,.1) 55%, rgba(0,20,40,0) 80%);
}

.card__title {
  color: var(--color-white);
  font-size: max(44px, 3.1429vw);
  margin-bottom: .4em;
}

.card__list {
  margin-bottom: 2.5rem;
}

.card__list li {
  color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1.7;
}

.card__cta {
  grid-area: 1 / 1;
  z-index: 2;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 1em 1.75em 1em 3em;
  background: var(--color-blue-light);
  color: var(--color-white);
  font-weight: var(--fw-medium);
  /*font-size: .9375rem;*/
  font-size: max(16px, 1.144vw);
  border-top-left-radius: var(--radius-lg);
  transition: background-color var(--transition-base);
}

.card__link:hover .card__cta {
  background: var(--color-blue-dark);
}

/* =========================================================
   Split block (image + content) — reusable
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.split--align-start {
  align-items: start;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

.split__title {
  /*font-size: clamp(1.75rem, 3vw, 2.5rem);*/
  font-size: max(2.5rem, 2.5vw);
  font-weight: var(--fw-light);
  color: var(--color-gray-dark);
  margin-bottom: 1.75rem;
  text-wrap: balance;
}

.split__title--right {
  text-align: right;
}

.split__title--accent {
  color: var(--color-blue-light);
}

/* ---------- Reusable: stacked paragraphs ---------- */
.text-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.text-stack p {
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1.2vw);
  line-height: 1.7;
  color: var(--color-gray-dark);
}

.text-stack strong {
  color: var(--color-gray-dark);
}

/* ---------- Reusable: legal/rich-text content (páginas tipo Aviso legal) ---------- */
.legal-content {
  max-width: 900px;
}

.legal-content h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
}

.legal-content p {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-gray-dark);
  margin-bottom: 1.25rem;
}

.legal-content ul,
.legal-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.legal-content ul {
  list-style: disc;
}

.legal-content ol {
  list-style: decimal;
}

.legal-content li {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--color-gray-dark);
  margin-bottom: .5rem;
}

.legal-content a {
  color: var(--color-blue-light);
  text-decoration: underline;
}

.legal-content strong {
  color: var(--color-gray-dark);
  font-weight: var(--fw-bold);
}

/* ---------- Reusable: checklist ---------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.checklist__item {
  position: relative;
  padding-left: 1.75rem;
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1.2vw);
  line-height: 1.7;
  color: var(--color-gray-dark);
}

.checklist__item::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-blue-light);
  font-weight: var(--fw-bold);
}

.checklist__item strong {
  color: var(--color-blue-light);
  font-weight: var(--fw-bold);
}

.checklist--standalone {
  max-width: 1000px;
  margin-inline: auto;
  margin-top: 2.5rem;
}

/* =========================================================
   Feature panel (reusable — image + checklist on tinted card)
   ========================================================= */
.feature-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-gray-light);
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.feature-panel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

.feature-panel__body {
  padding: 3rem;
}

.feature-panel__body .split__title {
  margin-bottom: 1.5rem;
}

/* =========================================================
   Info card grid (reusable — plain tinted cards, no media)
   ========================================================= */
.info-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

.info-card {
  background: var(--color-gray-light);
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
  padding: 3rem;
}

.info-card .split__title {
  margin-bottom: 1.5rem;
}

.info-card__subhead {
  color: var(--color-blue-light);
  font-weight: var(--fw-bold);
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1.2vw);
  margin-bottom: .5rem;
}

.info-card__text {
  color: var(--color-gray-dark);
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1.2vw);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.info-card__icon {
  display: block;
  /*width: 90px;
  height: 90px;*/
  width: max(130px, 12.93vw);
  height: max(130px, 12.93vw);
  color: var(--color-gray-dark);
  /*margin: 1.5rem auto 0;*/
  margin: max(2rem, 3vw) auto 0;
}

.info-card__icon--image {
  object-fit: contain;
}

/* ---------- Reusable: certificate thumbnail ---------- */
.cert-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cert-card {
  display: block;
  width: 220px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.cert-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   Product panels (reusable — category + grouped items)
   ========================================================= */
.product-category {
  margin-top: 3rem;
}

.product-category__title {
  /*font-size: clamp(1.5rem, 2.6vw, 2rem);*/
  font-size: max(2rem, 2.4vw);
  font-weight: var(--fw-regular);
  color: var(--color-gray-dark);
  /*margin-bottom: 1.5rem;*/
  margin-bottom: 0.713754em;
}

.product-panel {
  --panel-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--panel-cols), 1fr);
  background: var(--color-gray-light);
  border-radius: var(--radius-lg);
}

.product-panel + .product-panel {
  margin-top: 1.5rem;
}

.product-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.25rem 2.5rem;
}

.product-item::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  bottom: 2.25rem;
  left: 0;
  width: 1px;
  background: rgba(164, 170, 176, .3);
}

.product-item:nth-child(4n+1)::before {
  display: none;
}

.product-item > .btn-icon {
  margin-top: auto;
}

.product-item__title {
  /*font-size: 1.375rem;*/
  font-size: max(1.375rem, 1.572vw);
  font-weight: 400;
  /*margin-bottom: .75rem;*/
  margin-bottom: 0.545456em;
}

.product-item__text {
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1.2vw);
  line-height: 1.6;
  color: var(--color-gray-dark);
  margin-bottom: 1.75rem;
}

.product-item__title--tall {
  margin-bottom: 2.5rem;
}

/* ---------- Reusable: bold accent line (e.g. tag/sector list) ---------- */
.tag-line {
  color: var(--color-blue-light);
  font-weight: var(--fw-bold);
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1.2vw);
  line-height: 1.8;
  margin-top: 1rem;
}

/* =========================================================
   Product thumbnail grid (reusable — variant catalog)
   ========================================================= */
.product-thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 1.5rem;
  margin-top: 3rem;
}

.product-thumb {
  display: block;
  text-align: center;
}

.product-thumb__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: .5rem 1.5rem;
}

.product-thumb__icon {
  width: 100%;
  max-width: 130px;
  height: auto;
}

.product-thumb__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bag-body {
  fill: var(--thumb-fill, var(--color-white));
  stroke: var(--color-blue-dark);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.bag-line {
  fill: none;
  stroke: var(--color-blue-light);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-thumb__label {
  display: block;
  margin-top: 1.25rem;
  color: var(--color-blue-light);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
}

.product-thumb__note {
  display: block;
  margin-top: .15rem;
  font-size: .8125rem;
  color: var(--color-gray-dark);
}

/* =========================================================
   Product hero (reusable — product detail page)
   ========================================================= */
.product-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.product-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.product-hero__back {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .8125rem;
  color: var(--color-gray-dark);
  white-space: nowrap;
  transition: color var(--transition-base);
}

.product-hero__back:hover,
.product-hero__back:focus-visible {
  color: var(--color-blue-light);
}

.product-hero__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--fw-light);
  color: var(--color-gray-dark);
}

.product-hero__title .accent {
  color: var(--color-blue-light);
}

.product-hero__subtitle {
  font-size: 1.1875rem;
  font-weight: var(--fw-regular);
  color: var(--color-gray-dark);
  margin-top: 1rem;
}

.product-hero__body > .tabs {
  margin-top: 1.25rem;
}

/* ---------- Reusable: tabs ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .75rem;
  row-gap: .5rem;
}

.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.tabs__link {
  font-size: 1.375rem;
  color: var(--color-gray-dark);
  padding-bottom: .5rem;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.tabs__link:hover,
.tabs__link:focus-visible {
  color: var(--color-blue-light);
}

.tabs__link.is-active {
  color: var(--color-blue-dark);
  font-weight: var(--fw-bold);
  border-bottom-color: var(--color-blue-light);
}

.tabs__sep {
  color: var(--color-gray-dark);
  opacity: .5;
}

.product-hero__body > .text-stack {
  margin-top: 1.5rem;
}

.product-hero__media {
  text-align: center;
}

.product-hero__media .product-thumb__icon {
  max-width: 300px;
}

.product-hero__media .section-actions {
  margin-top: 2.5rem;
}

.product-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-top-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

/* ---------- Reusable: detail block (label + rule + list) ---------- */
.detail-block {
  margin-top: 2.5rem;
}

.detail-block__title {
  /*font-size: 1rem;*/
  font-size: max(1rem, 1vw);
  font-weight: var(--fw-bold);
  color: var(--color-charcoal);
  margin-bottom: .75rem;
}

.detail-block__rule {
  width: 32px;
  height: 3px;
  background: var(--color-blue-light);
  border: 0;
  margin: 0 0 1.25rem;
}

.detail-block__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.detail-block__list p,
.detail-block__text {
  /*font-size: .9375rem;*/
  font-size: max(1rem, 1vw);
  line-height: 1.6;
  color: var(--color-gray-dark);
}

.detail-block__list strong,
.detail-block__text strong {
  color: var(--color-blue-light);
  font-weight: var(--fw-bold);
}

.detail-block__list--neutral strong {
  color: var(--color-charcoal);
}

/* ---------- Reusable: two-column detail grid ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 4rem;
  margin-top: 3rem;
}

.detail-grid .detail-block:first-child {
  margin-top: 0;
}

/* =========================================================
   Accordion (reusable)
   ========================================================= */
.accordion-item {
  margin-top: 3rem;
}

/* ---------- Reusable: stacked accordion list ---------- */
.accordion-list {
  margin-top: 3rem;
}

.accordion-list .accordion-item:first-child {
  margin-top: 0;
}

.accordion-list .accordion-item + .accordion-item {
  margin-top: 1.5rem;
}

.accordion-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-gray-light);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--fw-regular);
  color: var(--color-blue-dark);
}

.accordion-item__summary::-webkit-details-marker {
  display: none;
}

.accordion-item__icon {
  flex-shrink: 0;
  width: 18px;
  height: 11px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 11"><path d="M2,2 L9,9 L16,2" fill="none" stroke="%2300A6D6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  transform: rotate(180deg);
  transition: transform var(--transition-base);
}

.accordion-item:not([open]) .accordion-item__icon {
  transform: rotate(0deg);
}

.accordion-item__body {
  padding-top: 1.5rem;
  max-width: 900px;
}

.accordion-item__body--wide {
  max-width: none;
}

/* =========================================================
   Related products carousel (reusable — Swiper)
   ========================================================= */
.related-products__frame {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}

.related-products__slider {
  flex: 1;
  overflow: hidden;
}

.related-products__nav {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  background: none;
  border: 0;
  border-top: 3px solid var(--color-blue-light);
  border-right: 3px solid var(--color-blue-light);
  transition: border-color var(--transition-base);
}

.related-products__nav--prev {
  transform: rotate(-135deg);
}

.related-products__nav--next {
  transform: rotate(45deg);
}

.related-products__nav:hover,
.related-products__nav:focus-visible {
  border-color: var(--color-blue-dark);
}

.related-products__nav.swiper-button-disabled {
  opacity: .3;
  cursor: default;
}

/* =========================================================
   CTA banner (full-bleed, reusable)
   ========================================================= */
.cta-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--color-blue-dark);
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,15,30,.72) 0%, rgba(0,15,30,.35) 45%, rgba(0,15,30,.05) 75%);
}

.cta-banner__inner {
  position: relative;
  padding-block: clamp(3rem, 10vw, 7rem);
  max-width: 54.286vw;
  margin: 0;
}

.cta-banner__title {
  color: var(--color-white);
  font-size: clamp(1.5rem, 3vw, 4rem);
  line-height: 1.3;
  /*margin-bottom: 2rem;*/
  margin-bottom: 0.761904em;
}

/* ---------- Modifier: contained panel (rounded on all corners) ---------- */
.cta-banner--panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cta-banner__inner--panel {
  padding: clamp(2.5rem, 6vw, 4rem);
  /*max-width: 700px;*/
  max-width: 50vw;
}

.cta-banner__inner--panel .btn {
  margin-top: 1rem;
}

.text-stack--on-dark p {
  color: rgba(255, 255, 255, .85);
}

.text-stack--on-dark strong {
  color: var(--color-white);
}

/* =========================================================
   Feature columns (reusable — icon + heading + text)
   ========================================================= */
.feature-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}

.feature-col__icon {
  /*width: 72px;
  height: 72px;*/
  width: max(90px, 8.8vw);
  height: max(90px, 8.8vw);
  color: var(--color-blue-light);
  /*margin-bottom: 1.5rem;*/
  margin-bottom: max(1.5rem, 4vw);
}

.feature-col__icon--image {
  display: block;
  object-fit: contain;
}

.feature-col__title {
  /*font-size: clamp(1.5rem, 2.4vw, 1.875rem);*/
  font-size: max(2rem, 3vw);
  /*font-weight: var(--fw-regular);*/
  font-weight: var(--fw-light);
  line-height: 1.1;
  color: var(--color-gray-dark);
  /*margin-bottom: 1.5rem;*/
  margin-bottom: max(1.5rem, 3vw);
  text-wrap: balance;
}

/* =========================================================
   Contact form (reusable)
   ========================================================= */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.contact-form__message {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: var(--color-gray-light);
  border: 0;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--color-text);
  resize: vertical;
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form__input,
.contact-form__select {
  display: block;
  width: 100%;
  background: var(--color-gray-light);
  border: 0;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.5rem;
  font-family: inherit;
  font-size: .9375rem;
  color: var(--color-text);
}

.contact-form__select {
  appearance: none;
  color: var(--color-gray-dark);
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 16px 10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10"><path d="M2,2 L8,8 L14,2" fill="none" stroke="%23A4AAB0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.contact-form__message::placeholder,
.contact-form__input::placeholder {
  color: var(--color-gray-dark);
}

.contact-form__submit {
  justify-content: center;
  width: 100%;
  border: 0;
  cursor: pointer;
}

.contact-form__consent {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--color-gray-dark);
}

.contact-form__consent input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue-light);
}

.contact-form__consent a {
  color: var(--color-blue-light);
  text-decoration: underline;
}

/* ---------- Reusable: full-bleed map embed ---------- */
.contact-map {
  width: 100%;
  height: clamp(320px, 40vw, 480px);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Reusable: contact info row ---------- */
.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}

.contact-info__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--color-blue-light);
  color: var(--color-white);
}

.contact-info__icon svg {
  width: 24px;
  height: 24px;
}

.contact-info__title {
  font-weight: var(--fw-bold);
  color: var(--color-charcoal);
  margin-bottom: .5rem;
}

.contact-info__text {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--color-gray-dark);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--color-blue-dark);
  border-top: 10px solid var(--color-blue-light);
  color: var(--color-white);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.site-footer__logo img {
  height: 44px;
  width: auto;
  margin-bottom: 1rem;
}

.site-footer__company {
  font-weight: var(--fw-bold);
  font-size: .9375rem;
  margin-bottom: 1.5rem;
}

.site-footer__address-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.site-footer__address {
  font-style: normal;
  font-size: .875rem;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
}

.site-footer__address-title {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  margin-bottom: .25em;
}

.site-footer__badge {
  flex-shrink: 0;
  width: 44px;
  height: auto;
  background: var(--color-white);
  border-radius: 4px;
  padding: 4px;
}

.site-footer__heading {
  font-size: 1.0625rem;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.site-footer__list a {
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  transition: color var(--transition-base);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-blue-light);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 1024px) {
  .main-nav__list {
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .main-nav__toggle {
    display: flex;
  }

  .main-nav__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding-top: 1rem;
  }

  .main-nav__list.is-open {
    display: flex;
  }

  .main-nav__list a {
    text-transform: none;
    letter-spacing: normal;
  }
}

@media (max-width: 992px) {
  .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split__media img {
    border-radius: var(--radius-lg);
  }

  .split__title--right {
    text-align: left;
  }

  .product-thumb-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-panel {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-item:nth-child(2n+1)::before {
    display: none;
  }

  .product-item:nth-child(n+3) {
    border-top: 1px solid rgba(164, 170, 176, .3);
  }

  .product-hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .product-hero__media {
    grid-row: 1;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .detail-grid .detail-block:first-child {
    margin-top: 2.5rem;
  }

  .feature-panel {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
  }

  .feature-panel__media img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: 16 / 10;
  }

  .feature-cols {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .info-card-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .info-card {
    padding: 2rem;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form__message {
    min-height: 200px;
  }

  .contact-info {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__col--company {
    grid-column: 1 / -1;
  }
}

@media (max-width: 782px) {
  :root {
    --wrapper-padding: 6vw;
  }

  .site-header__bottom {
    border-top: 1px solid var(--color-gray-light);
  }

  .header-meta {
    gap: 1.25rem;
  }

  .header-meta__icon {
    display: none;
  }

  .header-meta__label {
    display: none;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .product-thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .page-banner__frame {
    aspect-ratio: auto;
    min-height: 220px;
  }

  .page-banner__inner {
    padding-left: 1.5rem;
  }

  .product-panel {
    grid-template-columns: 1fr;
  }

  .product-item::before {
    display: none;
  }

  .product-item:nth-child(n+3) {
    border-top: 0;
  }

  .product-item + .product-item {
    border-top: 1px solid rgba(164, 170, 176, .3);
  }
}

@media (max-width: 560px) {
  .site-header__top {
    flex-wrap: wrap;
  }

  .header-meta {
    gap: 1rem;
  }

  .hero__slide-inner {
    padding: 0 1.5rem;
  }

  .hero__whatsapp {
    right: 1rem;
    bottom: 1rem;
    width: 46px;
    height: 46px;
  }

  .site-footer__address-row {
    flex-direction: column;
  }
}