/* ════════════════════════════════
   FRONT.CSS — Talleres Un Cuarto Verde
   Sistema de diseño: Cloud/Ink/Sky
   ════════════════════════════════ */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/public/assets/fonts/anton-latin-400.woff2') format('woff2');
}

/* ── Sección helpers ── */
.section--light { background: var(--color-bg); }

.section-head { margin-bottom: var(--token-size-3rem); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-label-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  margin-bottom: var(--token-size-0p75rem);
}

.section-head h2 {
  font-family: var(--font-title);
  font-weight: var(--font-weight-900);
  font-size: var(--text-heading-lg-desktop);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin: var(--token-number-0);
}

.section-lead {
  font-size: var(--text-body);
  color: var(--color-ink);
  max-width: var(--token-size-48rem);
  margin-top: var(--token-size-0p85rem);
  line-height: var(--leading-relaxed);
}

/* ── HERO ── */
.hero {
  padding: var(--token-space-10) var(--token-number-0) var(--token-space-8);
  background: var(--color-bg);
}

.hero__inner {
  display: grid;
  grid-template-columns: var(--token-track-1fr);
  gap: var(--token-space-6);
  align-items: center;
}

.hero__title {
  font-size: calc(var(--text-heading-lg-desktop) + var(--text-heading-lg-desktop) + var(--text-heading-lg-desktop));
  line-height: 0.96;
  color: var(--color-ink);
  margin-bottom: var(--token-size-1p25rem);
  font-family: 'Anton', sans-serif;
}

.hero__title-accent {
  color: var(--token-color-green);
}

.hero__subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-ink);
  max-width: var(--token-size-42rem);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--token-size-2rem);
}

.hero__eyebrow {
  margin-bottom: var(--token-space-2);
}

.hero__catalog-button {
  color: var(--token-color-white);
  background: #000;
  border: 1px solid #000;
  border-radius: var(--radius-btn);
  box-shadow: none;
}

.hero__benefits {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--token-space-1) var(--token-space-2);
  width: max-content;
  max-width: var(--token-ratio-100percent);
  margin: var(--token-space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--token-color-green-dark);
  font-size: var(--text-label);
  line-height: var(--leading-tight);
}

.hero__benefit {
  display: flex;
  align-items: center;
  gap: var(--token-space-1);
}

.hero__benefit .material-icons {
  flex: 0 0 auto;
  font-size: 27.6px;
  line-height: 1;
}

.hero__media {
  position: relative;
}

.hero__img {
  width: var(--token-ratio-100percent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  object-fit: cover;
  aspect-ratio: var(--token-number-4)/var(--token-number-3);
}

@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: var(--token-track-1fr) var(--token-track-1fr);
  }
  .hero {
    padding: var(--token-space-12) var(--token-number-0) var(--token-space-10);
  }
}

.page__main > .container:has(.hero--fullbleed) {
  width: var(--token-ratio-100percent);
  max-width: none;
  padding-inline: var(--token-number-0);
}

.hero--fullbleed {
  position: relative;
  width: var(--token-ratio-100percent);
  padding: var(--token-number-0);
}

.home-placeholder-card {
  width: 85vw;
  margin: var(--token-space-3) auto;
  padding-block: 0;
  padding-inline: clamp(var(--token-space-4), var(--token-size-4vw), var(--token-space-8));
  border-radius: 2px;
  background: var(--token-color-white);
}

.home-category-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(0.15rem, 0.7vw, var(--token-space-3));
}

.home-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.home-category-circle {
  display: grid;
  place-items: center;
  width: min(100%, 7.5rem);
  min-width: 0;
  aspect-ratio: 1;
  margin-bottom: var(--token-space-2);
  border: var(--border-width-hairline) solid rgb(var(--color-green-dark-rgb) / var(--alpha-10));
  border-radius: 50%;
  background: var(--token-color-white);
  color: var(--token-color-green-dark);
  overflow: hidden;
}

.home-category-circle__image {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  object-fit: cover;
}

.home-category-link {
  --home-category-label-size: clamp(0.5rem, 0.8vw, var(--text-label));
  color: var(--token-color-green-dark);
  font-size: var(--home-category-label-size);
  font-weight: var(--weight-700);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: font-size var(--duration-fast) ease;
}

.home-category-link:hover,
.home-category-link:focus-visible {
  color: var(--token-color-green-dark);
  font-size: calc(var(--home-category-label-size) + 0.1rem);
  text-decoration: none;
}

.home-category-card--all .home-category-circle {
  border: 1px solid var(--token-color-gray-light);
  background: var(--token-color-white);
}

.home-category-dots {
  display: flex;
  align-items: center;
  gap: 0.13em;
  font-size: clamp(1.7rem, 4vw, 4rem);
}

.home-category-dots span {
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: var(--token-color-green-dark);
}

.home-featured {
  width: 85vw;
  max-width: none;
  margin: var(--token-space-8) auto;
}

.home-featured__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-3);
  margin-bottom: var(--token-space-4);
}

.home-featured__title {
  margin: 0;
  color: var(--token-color-green-dark);
  font-family: var(--font-inter);
  font-size: calc(var(--text-label) + 3.5px);
  font-weight: var(--weight-700);
  line-height: var(--leading-tight);
}

.home-featured__all {
  display: inline-flex;
  align-items: center;
  gap: var(--token-space-1);
  color: var(--token-color-green-dark);
  font-size: var(--text-label);
  font-weight: var(--weight-700);
  white-space: nowrap;
  text-decoration: none;
}

.home-featured__all:hover {
  color: var(--token-color-green-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bn-shop__grid.home-featured__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-featured__grid .bn-card__media--gallery {
  position: relative;
  margin-top: var(--token-space-1);
  padding: 0;
}

.home-featured__grid .bn-card__gallery-image {
  display: block;
  width: 100%;
  height: 100%;
}

.home-featured__grid .bn-card__gallery-image .bn-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--duration-fast) ease;
}

.home-featured__grid .bn-card__gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--token-color-gray-light);
  font-family: var(--font-inter);
  font-size: 1.5rem;
  font-weight: var(--weight-400);
  line-height: 1;
  cursor: pointer;
  opacity: 0.9;
  transform: translateY(-50%);
  transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease;
}

.home-featured__grid .bn-card__gallery-arrow:hover,
.home-featured__grid .bn-card__gallery-arrow:focus-visible {
  background: transparent;
  color: var(--token-color-gray);
  opacity: 1;
}

.home-featured__grid .bn-card__gallery-arrow:focus-visible,
.home-featured__grid .bn-card__gallery-dot:focus-visible {
  outline: 2px solid var(--token-color-gray);
  outline-offset: 2px;
}

.home-featured__grid .bn-card__gallery-arrow--previous {
  left: var(--token-space-2);
}

.home-featured__grid .bn-card__gallery-arrow--next {
  right: var(--token-space-2);
}

.home-featured__grid .bn-card__gallery-dots {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: var(--token-space-2);
  left: 0;
  display: flex;
  justify-content: center;
  gap: var(--token-space-1);
  width: max-content;
  max-width: calc(100% - var(--token-space-4));
  margin-inline: auto;
  padding: 0;
  background: transparent;
}

.home-featured__grid .bn-card__gallery-dot {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--token-color-gray-light);
  cursor: pointer;
}

.home-featured__grid .bn-card__gallery-dot.is-active {
  background: var(--token-color-gray);
  transform: scale(1.15);
}

@media (max-width: 767px) {
  .home-featured__grid .bn-card__gallery-arrow {
    width: 1.75rem;
    height: 1.75rem;
  }
}

.home-featured__banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--token-space-3), 2vw, var(--token-space-6));
  margin-top: clamp(var(--token-space-6), 4vw, var(--token-space-8));
}

.home-featured__banners--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-featured__banner-wrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.home-featured__banner-wrap--textiles-gradient::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgb(var(--color-white-rgb) / var(--alpha-90)) 0%,
    rgb(var(--color-white-rgb) / var(--alpha-50)) 38%,
    transparent 78%
  );
  content: "";
  pointer-events: none;
}

.home-featured__banner {
  display: block;
  width: 100%;
  aspect-ratio: 2.18 / 1;
  border-radius: 2px;
  object-fit: cover;
}

.home-featured__banner-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding: clamp(var(--token-space-3), 3vw, var(--token-space-8));
  padding-left: clamp(var(--token-space-15), 1.5vw, var(--token-space-4));
  color: var(--token-color-white);
  text-shadow: 0 2px 8px rgb(0 0 0 / 55%);
  pointer-events: none;
}

.home-featured__banner-copy--muted {
  color: var(--token-color-black);
  text-shadow: none;
}

.home-featured__banner-copy--compact {
  justify-content: flex-end;
  padding: var(--token-space-1);
}

.home-featured__banner-title {
  margin: 0;
  color: var(--token-color-white);
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.4rem, 2.8vw, 3.15rem);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-featured__banner-copy--muted .home-featured__banner-title,
.home-featured__banner-copy--muted .home-featured__banner-description,
.home-featured__banner-copy--muted .home-featured__banner-cta {
  color: var(--token-color-black);
}

.home-featured__banner-title span {
  display: block;
}

.home-featured__banner-copy--compact .home-featured__banner-title {
  font-size: clamp(1rem, 1.6vw, 1.75rem);
  line-height: 1.05;
}

.home-featured__banner-description {
  width: clamp(6rem, 12vw, 14rem);
  max-width: 100%;
  margin: var(--token-space-2) 0 0;
  color: var(--token-color-white);
  font-family: var(--font-inter);
  font-size: clamp(0.7rem, 0.95vw, 0.875rem);
  font-weight: 400;
  line-height: 1.35;
}

.home-featured__banner-copy--compact .home-featured__banner-description {
  width: min(85%, 18rem);
  margin-top: var(--token-space-05);
  font-size: clamp(0.6rem, 0.72vw, 0.75rem);
}

.home-featured__banner-cta {
  display: flex;
  align-items: center;
  gap: var(--token-space-2);
  margin: var(--token-space-3) 0 0;
  color: var(--token-color-white);
  font-family: var(--font-inter);
  font-size: clamp(0.7rem, 0.95vw, 0.875rem);
  font-weight: 600;
}

.home-featured__banner-copy--compact .home-featured__banner-cta {
  gap: var(--token-space-1);
  margin-top: var(--token-space-05);
  font-size: clamp(0.6rem, 0.72vw, 0.75rem);
}

.home-featured__banner-cta span {
  font-size: 1.35em;
  line-height: 1;
}

.home-featured__banner--three {
  aspect-ratio: 1.4 / 1;
}

.home-blog {
  width: 85vw;
  margin: var(--token-space-8) auto;
}

.home-blog__intro {
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
  align-items: center;
  gap: var(--token-space-4);
  width: 100%;
  margin-bottom: var(--token-space-4);
}

.home-blog__intro-copy {
  width: 100%;
}

.home-blog__title {
  margin: 0;
  color: var(--token-color-green-dark);
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}

.home-blog__description {
  margin: var(--token-space-2) 0 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
}

.home-blog__more {
  --home-blog-link-size: var(--text-label);
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: var(--token-space-1);
  color: var(--token-color-green-dark);
  font-family: var(--font-inter);
  font-size: var(--home-blog-link-size);
  font-weight: var(--weight-700);
  text-decoration: none;
  transition: font-size var(--duration-fast) ease;
  white-space: nowrap;
}

.home-blog__more:hover,
.home-blog__link:hover {
  color: var(--token-color-green-dark);
  font-size: calc(var(--home-blog-link-size) + 0.1rem);
  text-decoration: none;
}

.home-blog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--token-space-2), 2vw, var(--token-space-4));
}

.home-blog__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--token-color-gray-light);
  border-radius: var(--radius-card);
  background: var(--token-color-white);
}

.home-blog__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  object-fit: cover;
}

.home-blog__card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(var(--token-space-2), 1.5vw, var(--token-space-4));
}

.home-blog__card-title {
  margin: 0;
  color: var(--token-color-green-dark);
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  font-weight: 400;
  line-height: 1.08;
}

.home-blog__card-description {
  margin: var(--token-space-1) 0 var(--token-space-2);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.25;
}

.home-blog__link {
  --home-blog-link-size: var(--text-label);
  display: inline-flex;
  align-items: center;
  gap: var(--token-space-1);
  margin-top: auto;
  color: var(--token-color-green-dark);
  font-family: var(--font-inter);
  font-size: var(--home-blog-link-size);
  font-weight: var(--weight-700);
  text-decoration: none;
  transition: font-size var(--duration-fast) ease;
}

@media (max-width: 1000px) {
  .home-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-blog__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-featured__header {
    align-items: flex-start;
  }

  .home-featured__all {
    white-space: normal;
    justify-content: flex-end;
    text-align: right;
  }

  .home-featured__banners {
    grid-template-columns: 1fr;
  }

  .home-blog__intro {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .home-blog__more {
    justify-self: start;
  }

}

.hero--fullbleed .hero__media {
  position: relative;
  width: var(--token-ratio-100percent);
  overflow: hidden;
}

.hero--fullbleed .hero__img {
  display: block;
  width: var(--token-ratio-100percent);
  height: auto;
  border-radius: var(--token-number-0);
  box-shadow: none;
  aspect-ratio: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 100%);
}

@media (max-width: 1099px) {
  .hero--fullbleed .hero__inner,
  .hero--fullbleed .hero__content {
    min-width: 0;
  }

  .hero--fullbleed .hero__title {
    font-size: clamp(3rem, 12vw, 6.25rem);
  }

  .hero--fullbleed .hero__benefits {
    width: 100%;
  }
}

@media (min-width: 1100px) {
  .hero--fullbleed .hero__media {
    display: flex;
    justify-content: flex-end;
  }

  .hero--fullbleed .hero__img {
    width: auto;
    max-width: var(--token-ratio-100percent);
    max-height: min(calc(105svh - 9.45rem), calc(100svh - 7rem));
    object-fit: contain;
    object-position: right center;
  }

  .hero--fullbleed .hero__inner {
    position: absolute;
    inset: var(--token-number-0);
    z-index: var(--token-number-1);
    display: flex;
    align-items: center;
    width: 85vw;
    max-width: none;
    margin-left: 5vw;
    margin-right: auto;
    padding: var(--token-number-0);
    grid-template-columns: none;
  }

  .hero--fullbleed .hero__content {
    width: var(--token-ratio-100percent);
    max-width: none;
  }

  .hero--fullbleed .hero__title {
    font-size: clamp(6.6rem, 9.6vw, 8.4rem);
  }
}

/* ── CÓMO FUNCIONA ── */
.how { padding: var(--token-space-10) var(--token-number-0); }

.steps {
  display: grid;
  grid-template-columns: var(--token-track-1fr);
  gap: var(--token-space-4);
  margin-top: var(--token-size-2p5rem);
}

.step {
  text-align: center;
  /* Liquid glass — usa el RGB exacto de --color-cloud (#FAFAFB)
     con baja opacidad para que el ground se filtre sin virar a blanco */
  background: rgb(var(--color-white-rgb) / var(--alpha-55));
  backdrop-filter: blur(var(--token-size-20px)) saturate(var(--token-ratio-160percent));
  -webkit-backdrop-filter: blur(var(--token-size-20px)) saturate(var(--token-ratio-160percent));
  border-radius: var(--radius-card);
  padding: var(--token-space-4) var(--token-space-3);
  border: var(--border-width-hairline) solid rgb(var(--color-white-rgb) / var(--alpha-90));
  border-bottom-color: rgb(var(--color-gray-light-rgb) / var(--alpha-50));  /* --color-stone al 50% */
  box-shadow:
    var(--token-number-0) var(--token-size-1px) var(--token-number-0) rgb(var(--color-white-rgb) / var(--alpha-70)) inset,
    var(--token-number-0) var(--token-size-2px) var(--token-size-4px) rgb(var(--color-black-rgb) / var(--alpha-03)),
    var(--token-number-0) var(--token-size-8px) var(--token-size-24px) rgb(var(--color-black-rgb) / var(--alpha-05)),
    var(--token-number-0) var(--token-size-20px) var(--token-size-48px) rgb(var(--color-black-rgb) / var(--alpha-03));
  transition: var(--transition);
}

.step:hover {
  background: rgb(var(--color-white-rgb) / var(--alpha-75));
  box-shadow:
    var(--token-number-0) var(--token-size-1px) var(--token-number-0) rgb(var(--color-white-rgb) / var(--alpha-80)) inset,
    var(--token-number-0) var(--token-size-4px) var(--token-size-8px) rgb(var(--color-black-rgb) / var(--alpha-04)),
    var(--token-number-0) var(--token-size-12px) var(--token-size-32px) rgb(var(--color-black-rgb) / var(--alpha-07)),
    var(--token-number-0) var(--token-size-28px) var(--token-size-56px) rgb(var(--color-black-rgb) / var(--alpha-04));
  transform: translateY(var(--token-size-neg-3px));
}

.step__icon {
  width: var(--token-size-4rem);
  height: var(--token-size-4rem);
  border-radius: var(--radius-circle);
  background: rgb(var(--color-green-rgb) / var(--alpha-10));
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--token-number-0) auto var(--token-space-25);
  font-size: var(--text-heading-lg-desktop);
}

.step__title {
  font-size: var(--text-body-lg);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  color: var(--color-ink);
  margin-bottom: var(--token-size-0p5rem);
}

.step__text {
  font-size: var(--text-body);
  color: var(--color-ink);
  max-width: var(--token-size-22rem);
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(var(--token-number-3), var(--token-track-1fr)); }
}

/* ── SPLIT (subhero) ── */
.split { padding: var(--token-space-10) var(--token-number-0); }

.split__inner {
  display: grid;
  grid-template-columns: var(--token-track-1fr);
  gap: var(--token-space-6);
  align-items: center;
}

.split__content h2 {
  font-family: var(--font-title);
  font-weight: var(--font-weight-900);
  font-size: var(--text-heading-lg-desktop);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--token-size-1p5rem);
}

.split__list {
  margin: var(--token-number-0) var(--token-number-0) var(--token-space-4) var(--token-space-25);
  display: flex;
  flex-direction: column;
  gap: var(--token-space-125);
}

.split__list li {
  font-size: var(--text-body);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

.split__img {
  width: var(--token-ratio-100percent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  object-fit: cover;
}

@media (min-width: 768px) {
  .split__inner { grid-template-columns: var(--token-track-1fr) var(--token-track-1fr); }
  .split__inner > *:last-child { order: var(--token-number-1); }
  .split__inner > *:first-child { order: var(--token-number-2); }
}

/* ── FORTALEZAS ── */
.features { padding: var(--token-space-10) var(--token-number-0); }

.features__grid {
  display: grid;
  grid-template-columns: var(--token-track-1fr);
  gap: var(--token-space-3);
  margin-top: var(--token-size-2p5rem);
}

.feature-card {
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--token-space-35);
  transition: var(--transition);
}

.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: rgb(var(--color-green-rgb) / var(--alpha-30));
}

.feature-card__icon {
  width: var(--token-size-3rem);
  height: var(--token-size-3rem);
  margin-bottom: var(--token-size-1rem);
}

.feature-card__icon img {
  width: var(--token-size-2p5rem);
  height: var(--token-size-2p5rem);
}

.feature-card__title {
  font-size: var(--text-body);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  color: var(--color-ink);
  margin-bottom: var(--token-size-0p5rem);
}

.feature-card__text {
  font-size: var(--text-label);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}

@media (min-width: 640px)  { .features__grid { grid-template-columns: repeat(var(--token-number-2), var(--token-track-1fr)); } }
@media (min-width: 1024px) { .features__grid { grid-template-columns: repeat(var(--token-number-3), var(--token-track-1fr)); } }

/* ── CTA BAND ── */
.cta-band {
  background: var(--color-stone);
  padding: var(--token-space-10) var(--token-number-0);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--token-size-2rem);
  border-radius: var(--radius-card);
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: var(--token-number-0);
  background:
    radial-gradient(var(--token-size-600px) circle at var(--token-ratio-80percent) var(--token-ratio-50percent), rgb(var(--color-white-rgb) / var(--alpha-08)), transparent var(--token-ratio-60percent)),
    radial-gradient(var(--token-size-400px) circle at var(--token-ratio-10percent) var(--token-ratio-80percent), rgb(var(--color-black-rgb) / var(--alpha-08)), transparent var(--token-ratio-50percent));
  pointer-events: none;
}

.cta-band__inner {
  position: relative;
  text-align: center;
  max-width: var(--token-size-42rem);
}

.cta-band__title {
  font-family: var(--font-title);
  font-weight: var(--font-weight-900);
  font-size: var(--text-heading-lg-desktop);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  margin-bottom: var(--token-size-1rem);
}

.cta-band__text {
  font-size: var(--text-body);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--token-size-2rem);
}

.btn--cta-band {
  background: var(--color-accent);
  color: var(--color-cloud);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  border-radius: var(--radius-btn);
  padding: var(--token-space-175) var(--token-space-5);
  font-size: var(--text-body);
  border: none;
  box-shadow: var(--shadow-card-hover);
  transition: var(--transition);
}

.btn--cta-band:hover {
  background: var(--color-ink);
  color: var(--color-cloud);
  transform: translateY(var(--token-size-neg-2px));
}

/* ════════════════════════
   SITE HEADER
   ════════════════════════ */
.site-preheader {
  background: var(--token-color-green-dark);
  color: var(--token-color-white);
}

.site-preheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  max-width: none;
  margin-inline: auto;
  gap: var(--token-space-2);
  min-height: var(--token-size-2rem);
  padding-block: var(--token-space-1);
  font-family: var(--token-font-body);
  font-size: var(--text-label-sm);
  line-height: 1.35;
}

.site-preheader__message {
  white-space: nowrap;
}

.site-preheader__features {
  display: flex;
  align-items: center;
  gap: var(--token-space-2);
}

.site-preheader__feature {
  display: inline-flex;
  align-items: center;
  gap: var(--token-space-05);
  white-space: nowrap;
}

.site-preheader__feature + .site-preheader__feature::before {
  content: "|";
  margin-right: var(--token-space-2);
  opacity: var(--alpha-65);
}

.site-preheader__feature .material-icons {
  font-size: var(--token-size-16px);
  line-height: 1;
}

@media (max-width: 1100px) {
  .site-preheader__inner {
    flex-direction: column;
    justify-content: center;
    gap: var(--token-space-05);
    text-align: center;
  }

  .site-preheader__message {
    white-space: normal;
  }

  .site-preheader__features {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .site-preheader__inner {
    gap: var(--token-space-05);
    padding-block: var(--token-space-1);
    font-size: 10px;
  }
}

.site-header {
  position: relative;
  z-index: var(--token-number-100);
  width: 90vw;
  margin-inline: auto;
  background: var(--token-color-white);
  backdrop-filter: blur(var(--token-size-16px));
  -webkit-backdrop-filter: blur(var(--token-size-16px));
  border-bottom: var(--border-width-hairline) solid rgb(var(--color-white-rgb) / var(--alpha-08));
}

.site-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  height: var(--token-size-5rem);
  gap: var(--token-number-0);
}

.site-header__brand {
  flex-shrink: var(--token-number-0);
  margin-right: var(--token-size-2rem);
}

.site-header__brand img {
  height: 43.2px;
  width: auto;
}

.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: var(--text-heading-md);
  color: var(--token-color-green-dark);
  cursor: pointer;
  padding: var(--token-space-05);
  position: relative;
  z-index: var(--token-number-1000);
}

@media (min-width: 1280px) {
  .site-header__toggle { display: none; }
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--token-space-4);
}

@media (min-width: 1280px) {
  .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: var(--token-number-1);
  }
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--token-space-2);
  flex: var(--token-number-1);
  justify-content: flex-start;
}

.site-nav__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-body);
  color: var(--color-muted);
  transition: var(--transition);
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--color-accent);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--token-space-2);
  flex-shrink: var(--token-number-0);
}

.site-nav__search {
  display: flex;
  align-items: center;
  flex: 0 0 234px;
  min-width: 140px;
  height: var(--token-size-2p5rem);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-btn);
  background: var(--token-color-white);
}

.site-nav__search:focus-within {
  border-color: var(--token-color-green-dark);
}

.site-nav__search input {
  flex: var(--token-number-1);
  min-width: var(--token-number-0);
  height: var(--token-ratio-100percent);
  padding-inline: var(--token-space-2);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--token-color-green-dark);
  font: inherit;
  font-size: var(--text-label);
}

.site-nav__search input::placeholder {
  color: var(--color-muted);
}

.site-nav__search button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--token-size-2p5rem);
  height: var(--token-ratio-100percent);
  padding: var(--token-number-0);
  border: 0;
  background: transparent;
  color: var(--token-color-green-dark);
  cursor: pointer;
}

.site-nav__search button .material-icons {
  font-size: var(--text-body-lg);
}

.site-nav__cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--token-size-2p5rem);
  height: var(--token-size-2p5rem);
  border-radius: var(--radius-btn);
  color: var(--color-muted);
  font-size: var(--text-heading-md);
  transition: var(--transition);
}

.site-nav__cart:hover { color: var(--color-accent); }

.site-nav__badge {
  position: absolute;
  top: var(--token-size-neg-0p25rem);
  right: var(--token-size-neg-0p25rem);
  background: var(--color-accent);
  color: var(--color-white);
  font-size: var(--text-label-sm);
  font-weight: var(--font-weight-600);
  width: var(--token-size-1p1rem);
  height: var(--token-size-1p1rem);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-nav__cta {
  font-size: var(--text-label);
  padding: var(--token-space-125) var(--token-space-25);
  white-space: nowrap;
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
  box-shadow: none;
}

.site-nav__cta:hover {
  background: var(--token-color-green-hover);
  color: var(--color-white);
  border-color: var(--token-color-green-hover);
  box-shadow: none;
}

.site-nav__cta:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  box-shadow: none;
}

/* ════════════════════════
   SITE FOOTER
   ════════════════════════ */
.site-footer {
  background: var(--footer-bg, var(--color-white));
  color: var(--footer-text, var(--color-green-dark));
  margin-top: var(--token-number-0);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--token-space-5);
  width: 90vw;
  max-width: none;
  margin-inline: auto;
  padding: var(--token-space-7) var(--token-number-0);
}

.site-footer__copy .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--token-space-3);
  width: 90vw;
  max-width: none;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .site-footer__inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.site-footer__brand img { filter: none; }

.site-footer__tagline {
  font-size: var(--text-label);
  color: var(--color-green-dark);
  margin-top: var(--token-space-5);
  margin-bottom: 0;
}

.site-footer__nav-title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-green-dark);
  margin-bottom: var(--token-size-1rem);
}

.site-footer__link {
  display: block;
  font-size: var(--text-label);
  color: var(--color-green-dark);
  margin-bottom: var(--token-size-0p5rem);
  transition: var(--transition);
}

.site-footer__link:hover { color: var(--color-green); }

.site-footer__list,
.site-footer__contact-list {
  display: grid;
  gap: var(--token-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li,
.site-footer__contact-list li {
  font-size: var(--text-label);
  line-height: var(--leading-normal);
  color: var(--color-green-dark);
}

.site-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--token-space-1);
}

.site-footer__contact-list .ti {
  flex: 0 0 auto;
  margin-top: 0.1em;
  font-size: var(--text-body);
  color: var(--color-green-dark);
}

.site-footer__info {
  font-size: var(--text-label);
  color: var(--color-green-dark);
  margin-bottom: var(--token-size-1p25rem);
}

.site-footer__social {
  display: flex;
  gap: var(--token-space-15);
  margin-top: var(--token-space-5);
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: var(--color-green-dark);
  font-size: 1.75rem;
  font-weight: var(--weight-700);
  -webkit-text-stroke: 0.55px currentColor;
  line-height: 1;
  transition: color var(--duration-normal) ease;
}

.site-footer__social-link:hover {
  background: transparent;
  color: var(--color-green);
}

.site-footer__copy {
  border-top: var(--border-width-hairline) solid rgb(var(--color-green-dark-rgb) / var(--alpha-10));
  padding: var(--token-space-25) var(--token-number-0);
}

.site-footer__copy p {
  font-size: var(--text-label);
  color: var(--color-green-dark);
  margin: 0;
  text-align: left;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--token-space-1);
  color: var(--color-green-dark);
  font-size: var(--text-label);
}

@media (max-width: 767px) {
  .site-footer__copy .container {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__legal {
    flex-wrap: wrap;
  }
}

/* WhatsApp flotante */
.wp-float {
  --whatsapp-green: #25D366;
  position: fixed;
  bottom: var(--token-size-1p5rem);
  right: var(--token-size-1p5rem);
  z-index: var(--token-number-200);
  width: var(--token-size-3p25rem);
  height: var(--token-size-3p25rem);
  border-radius: var(--radius-circle);
  background: var(--whatsapp-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-heading-lg-desktop);
  box-shadow: 0 4px 16px rgb(37 211 102 / 40%);
  transition: var(--transition);
  isolation: isolate;
}

.wp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgb(37 211 102 / 45%);
  animation: wp-float-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

.wp-float .ti {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  line-height: 1;
}

.wp-float__online-dot {
  position: absolute;
  right: -2px;
  top: -2px;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 3px solid var(--color-white);
  border-radius: 50%;
  background: var(--whatsapp-green);
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}

.wp-float:hover {
  transform: translateY(var(--token-size-neg-3px));
  box-shadow: 0 8px 24px rgb(37 211 102 / 50%);
  color: var(--color-white);
}

.wp-float:focus-visible {
  outline: 3px solid var(--color-green-dark);
  outline-offset: 4px;
}

@keyframes wp-float-pulse {
  0% { box-shadow: 0 0 0 0 rgb(37 211 102 / 45%); }
  70% { box-shadow: 0 0 0 16px rgb(37 211 102 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-float::before { animation: none; }
}

/* ── Fix botón secundario sobre fondo claro ── */
.btn--secondary {
  color: var(--color-ink);
}
.btn--secondary:hover {
  background: var(--color-stone);
  border-color: var(--color-sky);
  color: var(--color-ink);
}

/* Anti-FOUC eliminado — GSAP gestiona opacity */

/* Anti-FOUC eliminado — GSAP gestiona opacity */

/* ── Colores explícitos faltantes ── */

/* Split section — texto sobre fondo blanco */
.split__content h2 { color: var(--color-ink); }
.split__content p  { color: var(--color-ink); }

/* How section */
.how h2 { color: var(--color-ink); }
.how .section-lead { color: var(--color-ink); }

/* Features section */
.features h2 { color: var(--color-ink); }
.features .section-lead { color: var(--color-ink); }

/* Nav sobre fondo blanco — texto e iconos en verde oscuro */
.site-nav__link {
  color: var(--token-color-green-dark) !important;
}
.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--token-color-green-dark) !important;
}
.site-nav__cart {
  color: var(--token-color-green-dark) !important;
}

/* Footer blanco — texto e iconos en verde oscuro */
.site-footer__link {
  color: var(--color-green-dark) !important;
}
.site-footer__info {
  color: var(--color-green-dark) !important;
}
.site-footer__social-link {
  color: var(--color-green-dark) !important;
}

/* ── CINTILLO PROMOCIONALES ── */
.promo-band {
  background-color: var(--color-sky);
  border-radius: var(--radius-card-lg);
  padding: clamp(var(--token-space-5), var(--token-size-5vw), var(--token-space-10)) clamp(var(--token-space-3), var(--token-size-4vw), var(--token-space-7));
  overflow: hidden;
}

.promo-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--token-space-4);
  width: var(--token-ratio-100percent);
  text-align: center;
}

/* Anula margin-bottom del section-head global */
.promo-band .section-head {
  margin-bottom: var(--token-number-0);
  width: var(--token-ratio-100percent);
  text-align: center;
}

.promo-band__title {
  font-family: var(--font-title);
  font-weight: var(--font-weight-900);
  font-size: var(--text-heading-md);
  color: rgb(var(--color-white-rgb) / var(--alpha-88));
  line-height: var(--leading-snug);
  width: var(--token-ratio-100percent);
  text-align: center;
  margin: var(--token-number-0);
}

.promo-band__lead {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: rgb(var(--color-white-rgb) / var(--alpha-88));
  line-height: var(--leading-relaxed);
  width: var(--token-ratio-100percent);
  max-width: 52ch;
  text-align: center;
  margin: var(--token-space-1) auto var(--token-number-0);
}

/* ── Logos strip ── */
.promo-band__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(var(--token-space-3), var(--token-size-4vw), var(--token-space-7));
  width: var(--token-ratio-100percent);
}

.promo-band__logos img {
  height: clamp(var(--token-size-24px), var(--token-size-3p5vw), var(--token-size-40px));
  width: auto;
  max-width: var(--token-size-120px);
  object-fit: contain;
  filter: brightness(var(--token-number-0)) invert(var(--token-number-1));
  opacity: var(--token-number-0p85);
  transition: var(--transition);
  display: block;
}

.promo-band__logos img:hover {
  opacity: var(--token-number-1);
}

/* ── Pill badge ── */
.promo-band__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--token-ratio-100percent);
}

.promo-band__pill span {
  display: inline-flex;
  align-items: center;
  border: var(--border-width-strong) solid rgb(var(--color-white-rgb) / var(--alpha-65));
  border-radius: var(--radius-pill);
  padding: var(--token-space-7px) var(--token-space-35);
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-label);
  color: var(--color-text-inverse);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

/* ── Footnote ── */
.promo-band__footnote {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: rgb(var(--color-white-rgb) / var(--alpha-72));
  max-width: 54ch;
  margin: var(--token-number-0) auto;
  line-height: var(--leading-normal);
  text-align: center;
  width: var(--token-ratio-100percent);
}

.promo-band .section-head h2 {
  color: var(--color-white) !important;
}

/* ── Mobile ── */
@media (max-width: 479px) {
  .promo-band__logos {
    gap: var(--token-space-25) var(--token-space-4);
  }
  .promo-band__logos img {
    height: var(--token-size-22px);
    max-width: var(--token-size-90px);
  }
  .promo-band__pill span {
    white-space: normal;
    text-align: center;
  }
}

/* ════════════════════════
   MOBILE NAV OVERLAY
   ════════════════════════ */
.site-nav.is-open {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  inset: var(--token-number-0);
  background: var(--token-color-white);
  z-index: var(--token-number-99999);
  padding: var(--token-space-10) var(--token-space-4) var(--token-space-4);
  gap: var(--token-space-3);
  animation: navFadeIn var(--token-duration-0p25s) ease;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.site-nav.is-open .site-nav__links {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--token-space-25);
}

.site-nav.is-open .site-nav__link {
  font-size: var(--text-heading-md);
  color: var(--token-color-green-dark) !important;
}

.site-nav.is-open .site-nav__link:hover,
.site-nav.is-open .site-nav__link.is-active {
  color: var(--token-color-green-dark) !important;
}

.site-nav.is-open .site-nav__cart {
  color: var(--token-color-green-dark) !important;
}

.site-nav.is-open .site-nav__search,
.site-nav.is-open .site-nav__actions,
.site-nav.is-open .site-nav__cta {
  width: var(--token-ratio-100percent);
}

.site-nav.is-open .site-nav__search {
  flex: 0 0 auto;
}

.site-nav.is-open .site-nav__actions {
  flex-direction: column;
}

@keyframes navFadeIn {
  from { opacity: var(--token-number-0); }
  to { opacity: var(--token-number-1); }
}

.site-header__toggle {
  position: relative;
  z-index: var(--token-number-999999);
}

/* ── TESTIMONIOS ── */
.testimonials {
  padding: var(--token-space-10) var(--token-number-0);
  background: var(--color-bg);
}

.testimonials__track-wrapper {
  overflow: hidden;
  margin-top: var(--token-size-2p5rem);
  cursor: grab;
  user-select: none;
}

.testimonials__track-wrapper:active {
  cursor: grabbing;
}

.testimonials__track {
  display: flex;
  gap: var(--token-space-3);
  width: max-content;
}

.testimonial-card {
  flex: var(--token-number-0) var(--token-number-0) var(--token-size-320px);
  background: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--token-space-4) var(--token-space-35);
  display: flex;
  flex-direction: column;
  gap: var(--token-space-25);
  justify-content: space-between;
}

@media (max-width: 480px) {
  .testimonial-card { flex: var(--token-number-0) var(--token-number-0) var(--token-size-260px); }
}

.testimonial-card__text {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  font-style: italic;
}

.testimonial-card__author {
  font-family: var(--font-body);
  font-weight: var(--font-weight-600);
  font-size: var(--text-label);
  color: var(--color-accent);
}

.testimonials__dots { display: none; }

/* ── Avisos legales ── */
.legal-copy {
  max-width: var(--token-size-760px);
  margin: var(--token-number-0) auto;
  padding: var(--token-size-40px) var(--token-size-20px) var(--token-size-80px);
  font-family: var(--font-body);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
}

.legal-copy__heading {
  margin: var(--token-number-0) var(--token-number-0) var(--token-size-12px);
  color: var(--color-sky);
  font-size: var(--token-size-1p2rem);
  font-weight: var(--weight-700);
}

.legal-copy__heading--first { margin-top: var(--token-size-40px); }

.legal-copy__divider {
  border: var(--token-number-0);
  border-top: var(--border-width-hairline) solid var(--color-border);
  margin: var(--token-size-32px) var(--token-number-0);
}

.legal-copy__list {
  margin: var(--token-size-12px) var(--token-number-0) var(--token-size-12px) var(--token-size-20px);
  color: var(--color-muted);
}

.legal-copy__list-item { margin-bottom: var(--token-size-6px); }
.legal-copy__list-item--spaced { margin-bottom: var(--token-size-10px); }
.legal-copy__muted { color: var(--color-muted); }
.legal-copy__emphasis { color: var(--color-ink); }
.legal-copy__paragraph--tight { margin: var(--token-number-0) var(--token-number-0) var(--token-size-8px); }
.legal-copy__paragraph--muted-tight { margin: var(--token-number-0) var(--token-number-0) var(--token-size-4px); }
.legal-copy__paragraph--address { margin: var(--token-size-16px) var(--token-number-0) var(--token-size-4px); }
.legal-copy__paragraph--compact { margin: var(--token-size-8px) var(--token-number-0) var(--token-size-4px); }
.legal-copy__updated { margin-top: var(--token-size-40px); font-size: var(--text-label-sm); color: var(--color-muted); }

/* Globalmente reduce el radio en controles, búsquedas y tarjetas. */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="search"],
  .btn,
  [class*="btn"],
  [role="button"],
  [role="search"],
  [class*="search"],
  [class*="card"],
  [class*="cta"],
  .service-visual,
  .nav__link--quote,
  .site-nav__cart,
  .site-footer__social-link
) {
  border-radius: 2px !important;
}