/* HDN · Highdatanet — Home (theme `chetto`).
 * Replica visual 1:1 de la home Next.js (chettoweb/app/page.tsx).
 * Mobile-first. Mismas escalas responsive que la versión Tailwind.
 */

:root {
  --ch-brand: #c4b5a0;
  --ch-brand-deep: #a89584;
  --ch-ink: #0a0a0a;
  --ch-muted: #f5f3ee;
  --ch-border: #e7e3da;
  --ch-text-soft: #6b6b6b;
  --ch-text-mute: #8b8b8b;
  --ch-max: 1354px;
  --ch-pad-x: 24px;
  --ch-radius-lg: 24px;
  --ch-radius-md: 16px;
  --ch-shadow-md: 0 10px 15px 0 rgba(0,0,0,.1), 0 4px 6px 0 rgba(0,0,0,.1);
  --ch-shadow-sm: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.1);
}

.chetto-home,
.chetto-home * {
  box-sizing: border-box;
}

.chetto-home img {
  max-width: 100%;
  height: auto;
}

.chetto-home a { text-decoration: none; color: inherit; }

/* ============================================================
   HERO
   ============================================================ */
.ch-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: #fff;
  touch-action: pan-y;
}
/* La PRIMERA imagen define la altura del slider (se renderiza inline a su
   proporción natural). Las demás se apilan absolute encima y se adaptan a
   ese tamaño con object-fit:cover (recortan lados si su proporción difiere).
   Así no hay espacios en blanco al cambiar de slide. */
.ch-hero__slides { position: relative; }
.ch-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.ch-hero__slide.is-active { opacity: 1; pointer-events: auto; }

/* Primer slide: define la altura del contenedor */
.ch-hero__slide:first-child { position: relative; }
.ch-hero__slide:first-child .ch-hero__img {
  display: block;
  width: 100%;
  height: auto;
}
/* Resto de slides: se adaptan al tamaño establecido por el primero */
.ch-hero__slide:not(:first-child) .ch-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ch-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Sombra base permanente para garantizar contraste de texto en todos los
   slides (independiente del gradient inline del overlay del slide). */
.ch-hero__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 60%),
    linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 55%);
}

.ch-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0 auto;
  display: flex;
  align-items: center;
  max-width: var(--ch-max);
  padding: 0 var(--ch-pad-x);
}
/* Mobile: copy arriba (en lugar de centrado) */
@media (max-width: 639.98px) {
  .ch-hero__inner {
    align-items: flex-start;
    padding-top: 24px;
  }
}
.ch-hero__copy { max-width: 660px; color: #fff; }

.ch-hero__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}
@media (min-width: 640px) {
  .ch-hero__badge { padding: 8px 16px; font-size: 14px; }
}
.ch-hero__eyebrow {
  margin: 16px 0 0;
  font-size: 11px;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.0893em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) {
  .ch-hero__eyebrow { margin-top: 24px; font-size: 14px; }
}
.ch-hero__title {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.004em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (min-width: 640px) { .ch-hero__title { font-size: 44px; line-height: 1.2; margin-top: 8px; } }
@media (min-width: 768px) { .ch-hero__title { font-size: 60px; line-height: 1.25; } }

.ch-hero__subtitle {
  margin: 10px 0 0;
  max-width: 448px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.0244em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
@media (min-width: 640px) {
  .ch-hero__subtitle { margin-top: 24px; font-size: 18px; line-height: 1.55; }
}

.ch-hero__cta,
.ch-hero__cta:link,
.ch-hero__cta:visited,
.ch-hero__cta:hover,
.ch-hero__cta:focus,
.ch-hero__cta:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  height: 40px;
  border-radius: 999px;
  background: var(--ch-brand) !important;
  padding: 0 16px 0 18px;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.0195em;
  box-shadow: var(--ch-shadow-md);
  transition: opacity .2s;
}
.ch-hero__cta * { color: #fff !important; }
.ch-hero__cta:hover { opacity: .9; }
@media (min-width: 640px) {
  .ch-hero__cta { margin-top: 32px; height: 56px; padding: 0 28px 0 32px; font-size: 16px; gap: 12px; }
}
.ch-hero__cta-arrow { font-size: 14px; line-height: 1; }
@media (min-width: 640px) { .ch-hero__cta-arrow { font-size: 16px; } }

.ch-hero__dots {
  position: absolute;
  inset: auto 0 32px 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ch-hero__dot {
  border: 0;
  cursor: pointer;
  padding: 0;
  background: rgba(255,255,255,.5);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transition: all .25s ease;
}
.ch-hero__dot:hover { background: rgba(255,255,255,.8); }
.ch-hero__dot.is-active { background: #fff; width: 48px; height: 8px; }

/* ============================================================
   TRUST
   ============================================================ */
.ch-trust {
  border-top: 1px solid var(--ch-border);
  border-bottom: 1px solid var(--ch-border);
  background: var(--ch-muted);
  margin-top: -1px !important;  /* compensa cualquier hueco que dejen wrappers PS */
  position: relative;
}
.ch-trust__inner {
  margin: 0 auto;
  max-width: var(--ch-max);
  padding: 24px var(--ch-pad-x);
}
@media (min-width: 768px) {
  .ch-trust__inner { padding: 32px var(--ch-pad-x); }
}

/* DESKTOP: grid 4 cols */
.ch-trust__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* MOBILE: carrusel scroll-snap horizontal con auto-play (JS) + swipe nativo */
@media (max-width: 767.98px) {
  .ch-trust__list {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ch-trust__list::-webkit-scrollbar { display: none; }
  .ch-trust__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    justify-content: center;
  }
}

/* Dots solo en mobile */
.ch-trust__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 767.98px) {
  .ch-trust__dots { display: flex; }
}
.ch-trust__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(45, 45, 45, .25);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.ch-trust__dot.is-active {
  background: var(--ch-ink);
  width: 20px;
}

.ch-trust__item { display: flex; align-items: center; gap: 16px; }

/* ============================================================
   CARRUSEL MOBILE GENÉRICO — para families, experience benefits, etc.
   Cualquier <section data-ch-carousel> con su <ul/grid data-ch-carousel-track>
   y dots <div data-ch-carousel-dots> queda como carrusel scroll-snap mobile.
   En desktop queda intacto (grid/flex original).
   ============================================================ */
@media (max-width: 767.98px) {
  [data-ch-carousel] [data-ch-carousel-track] {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
  }
  [data-ch-carousel] [data-ch-carousel-track]::-webkit-scrollbar { display: none; }
  [data-ch-carousel] [data-ch-carousel-track] > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }
}

.ch-carousel__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
@media (max-width: 767.98px) {
  .ch-carousel__dots { display: flex; }
}
.ch-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(45, 45, 45, .25);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}
.ch-carousel__dot.is-active {
  background: var(--ch-ink);
  width: 20px;
}
.ch-trust__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ch-brand);
}
.ch-trust__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}
.ch-trust__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ch-ink);
  letter-spacing: -0.0107em;
}
.ch-trust__subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ch-text-soft);
}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.ch-cats {
  background: #fff;
  padding: 40px 0;
}
@media (min-width: 640px) { .ch-cats { padding: 56px 0; } }
@media (min-width: 768px) { .ch-cats { padding: 64px 0; } }

.ch-cats__inner { margin: 0 auto; max-width: var(--ch-max); padding: 0 var(--ch-pad-x); }
.ch-cats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .ch-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 768px) { .ch-cats__grid { grid-template-columns: repeat(3, 1fr); } }

.ch-cats__cell { display: contents; }
.ch-cats__card {
  position: relative;
  display: block;
  /* Mobile: ratio vertical 3/4 → mismo proporción que la imagen Figma (419×559).
     Antes era 16/10 (muy ancho) → se recortaba el zapato dejando solo piernas. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--ch-radius-lg);
  background-size: cover;
}
@media (min-width: 640px) { .ch-cats__card { aspect-ratio: 420 / 560; } }

.ch-cats__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Mobile: contain → ZAPATO COMPLETO (con bg gradient relleno arriba/abajo).
     Desktop ≥640: cover → llena toda la card. */
  object-fit: contain;
  object-position: center;
  transition: transform .5s ease;
}
@media (min-width: 640px) {
  .ch-cats__img { object-fit: cover; }
}
.ch-cats__card:hover .ch-cats__img { transform: scale(1.05); }
.ch-cats__hover {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background-color .3s ease;
  pointer-events: none;
}
.ch-cats__card:hover .ch-cats__hover { background: rgba(0,0,0,.1); }
.ch-cats__bottom-shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 128px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  pointer-events: none;
}
.ch-cats__cta {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ch-ink);
}
.ch-cats__cta-arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform .3s ease;
}
.ch-cats__card:hover .ch-cats__cta-arrow { transform: translateX(4px); }

.ch-cats__caption {
  position: absolute;
  inset: auto 0 16px 0;
  padding: 0 16px;
  text-align: center;
}
@media (min-width: 640px) { .ch-cats__caption { inset-block-end: 24px; padding: 0 24px; } }
.ch-cats__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  letter-spacing: 0.003em;
}
@media (min-width: 640px) { .ch-cats__title { font-size: 24px; } }
.ch-cats__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  letter-spacing: -0.0107em;
}
@media (min-width: 640px) { .ch-cats__subtitle { font-size: 14px; } }

/* ============================================================
   FEATURED + CARD shared
   ============================================================ */
.ch-featured { background: var(--ch-muted); padding: 40px 0; }
@media (min-width: 640px) { .ch-featured { padding: 56px 0; } }
@media (min-width: 768px) { .ch-featured { padding: 64px 0; } }
.ch-featured__inner { margin: 0 auto; max-width: var(--ch-max); padding: 0 var(--ch-pad-x); }

.ch-featured__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  .ch-featured__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
}
.ch-featured__heading {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.013em;
  color: var(--ch-ink);
}
@media (min-width: 640px) { .ch-featured__heading { font-size: 28px; } }
@media (min-width: 768px) { .ch-featured__heading { font-size: 30px; line-height: 36px; } }
.ch-featured__sub {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #6b6b6b;
  letter-spacing: -0.0195em;
}

.ch-featured__cta {
  justify-content: center;
  align-items: flex-start;
  gap: 7.508px;
  border: 2px solid #2D2D2D;
  border-radius: 9999px;
  padding: 14px 26px 13.5px 26px;
  font-size: 14px;
  font-weight: 500;
  color: #2D2D2D;
  background: transparent;
  letter-spacing: -0.0107em;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ch-featured__cta:hover { background: #2D2D2D; color: #fff; }
.ch-featured__cta--desk { display: none; }
@media (min-width: 768px) { .ch-featured__cta--desk { display: inline-flex; } }
.ch-featured__cta-mob { display: block; margin-top: 40px; }
@media (min-width: 768px) { .ch-featured__cta-mob { display: none; } }
.ch-featured__cta--mob {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 12px 32px;
}

/* Cliente: Productos Destacados como CARRUSEL horizontal con scroll-snap.
   Cards 100% mobile · 50% sm · 33% lg. Auto-play + flechas + swipe. */
.ch-featured__grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0 0 16px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ch-featured__grid::-webkit-scrollbar { display: none; }
.ch-featured__item {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (min-width: 640px) {
  .ch-featured__item { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); }
}
@media (min-width: 1024px) {
  .ch-featured__item { flex-basis: calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); }
}

/* Header con flechas + CTA */
.ch-featured__head-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ch-featured__nav {
  display: none;
  gap: 8px;
}
@media (min-width: 768px) { .ch-featured__nav { display: flex; } }
.ch-featured__arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ch-border);
  color: var(--ch-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: background-color .2s ease, opacity .2s ease;
}
.ch-featured__arrow:hover:not([disabled]) { background: var(--ch-muted); }
.ch-featured__arrow[disabled] { opacity: .4; cursor: not-allowed; }
.ch-featured__arrow > span { display: block; transform: translateY(-1px); }

.ch-featured__item { display: block; }
.ch-featured__media {
  position: relative;
  aspect-ratio: 302 / 403;
  overflow: hidden;
  border-radius: var(--ch-radius-lg);
  background: var(--ch-muted);
}
.ch-featured__media-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.ch-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  transition: transform .5s ease;
}
.ch-featured__item:hover .ch-featured__img { transform: scale(1.05); }
.ch-featured__badge {
  pointer-events: none;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  padding: 4px 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ch-ink);
}
.ch-featured__action {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 10;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  background: var(--ch-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.0107em;
  border: 0;
  cursor: pointer;
  border-radius: 0 0 var(--ch-radius-lg) var(--ch-radius-lg);
  transform: translateY(100%);
  transition: transform .3s ease, background-color .2s;
  pointer-events: none;
  text-decoration: none;
}
.ch-featured__media:hover .ch-featured__action,
.ch-featured__media:focus-within .ch-featured__action,
.ch-featured__action:focus-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.ch-featured__action:hover { background: var(--ch-brand); }
.ch-featured__action[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 768px) {
  /* En móvil, mostrar siempre el botón */
  .ch-featured__action { transform: translateY(0); pointer-events: auto; }
}

/* Wishlist heart compartido (.ch-card__wish + .ch-featured__media .ch-card__wish) */
.ch-card__wish {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 11;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .9);
  color: var(--ch-ink);
  cursor: pointer;
  box-shadow: var(--ch-shadow-sm);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.ch-card__wish:hover,
.ch-card__wish:focus-visible {
  background: #fff;
  color: var(--ch-brand);
  outline: none;
}
.ch-card__wish:active { transform: scale(.94); }
.ch-card__wish svg { width: 18px; height: 18px; display: block; }
.ch-card__wish.is-active { color: var(--ch-brand); }
.ch-card__wish.is-active svg { fill: currentColor; }
.ch-card__wish[disabled] { opacity: .5; cursor: not-allowed; }

.ch-featured__info { display: block; margin-top: 16px; }
.ch-featured__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ch-ink);
  letter-spacing: -0.0244em;
}
.ch-featured__item:hover .ch-featured__title { text-decoration: underline; }
.ch-featured__price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ch-featured__price { margin: 0; font-size: 16px; color: var(--ch-ink); letter-spacing: -0.0195em; }
.ch-featured__price-old { margin-left: 8px; font-size: 14px; color: var(--ch-text-soft); text-decoration: line-through; }

.ch-featured__empty {
  margin-top: 40px;
  padding: 64px 24px;
  border: 1px dashed var(--ch-border);
  border-radius: var(--ch-radius-lg);
  background: rgba(245,243,238,.6);
  text-align: center;
}
.ch-featured__empty-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--ch-ink); }
.ch-featured__empty-sub { margin: 8px 0 0; font-size: 14px; color: rgba(10,10,10,.6); }
.ch-featured__empty-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ch-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}
.ch-featured__empty-cta:hover { background: var(--ch-brand-deep); }

/* ============================================================
   KEYS
   ============================================================ */
.ch-keys { background: #fff; padding: 48px 0; }
@media (min-width: 640px) { .ch-keys { padding: 64px 0; } }
@media (min-width: 768px) { .ch-keys { padding: 80px 0; } }
.ch-keys__inner { margin: 0 auto; max-width: var(--ch-max); padding: 0 var(--ch-pad-x); }

.ch-keys__head { text-align: center; }
.ch-keys__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--ch-muted);
  padding: 8px 24px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}
.ch-keys__title { margin: 24px 0 0; font-size: 30px; font-weight: 500; line-height: 1.1; letter-spacing: 0.007em; }
@media (min-width: 640px) { .ch-keys__title { margin-top: 32px; font-size: 40px; } }
@media (min-width: 768px) { .ch-keys__title { font-size: 48px; } }
.ch-keys__title-lead { display: block; color: var(--ch-ink); }
.ch-keys__title-accent { display: block; color: var(--ch-brand); }
.ch-keys__desc {
  margin: 24px auto 0;
  max-width: 672px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ch-text-soft);
  letter-spacing: -0.0244em;
}
@media (min-width: 640px) { .ch-keys__desc { margin-top: 32px; font-size: 18px; line-height: 1.55; } }

.ch-keys__layout {
  margin-top: 40px;
  display: grid;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 640px) { .ch-keys__layout { margin-top: 48px; } }
@media (min-width: 768px) { .ch-keys__layout { margin-top: 64px; } }
@media (min-width: 1024px) {
  .ch-keys__layout {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  /* En desktop, centrar verticalmente las 3 cards (Suela Flexible / Drop
     Cero / Puntera anatómica) respecto a la imagen showcase de al lado.
     `place-self: center stretch` = vertical center + horizontal stretch
     (mantiene el ancho completo de la celda del grid). */
  .ch-keys__layout .ch-keys__points-wrap {
    place-self: center stretch;
    width: 100%;
  }
}

.ch-keys__showcase {
  border-radius: 24px;
  background: linear-gradient(to bottom, var(--ch-muted), #eae7e1);
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ch-keys__stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.ch-keys__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 25px 50px rgba(0,0,0,.15));
  transition: opacity .3s ease;
}

.ch-keys__hotspot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  padding: 6px 16px;
  font-size: 12px;
  color: var(--ch-ink);
  box-shadow: var(--ch-shadow-md);
  transition: opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}
/* SOLO el hotspot activo (= corresponde a la imagen visible) se muestra */
.ch-keys__hotspot.is-active { opacity: 1; pointer-events: auto; }
.ch-keys__hotspot--p0 { left: 50%; top: 16px; transform: translateX(-50%); }
.ch-keys__hotspot--p1 { left: 50%; top: 16px; transform: translateX(-50%); }
.ch-keys__hotspot--p2 { left: 50%; top: 16px; transform: translateX(-50%); }
.ch-keys__hotspot-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ch-text-mute);
}
.ch-keys__hotspot.is-active .ch-keys__hotspot-dot { background: var(--ch-brand); }

.ch-keys__dots {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ch-keys__dot {
  border: 0;
  cursor: pointer;
  padding: 0;
  background: var(--ch-border);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transition: all .2s ease;
}
.ch-keys__dot:hover { background: var(--ch-text-mute); }
.ch-keys__dot.is-active { background: var(--ch-brand); width: 32px; }

.ch-keys__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* MOBILE: en modo carrusel, dejar cada card con respiro lateral
   y separación visible entre ellas. También ocultar los dots
   (no aportan en este bloque y la propia card ya hace de indicador
   con scroll-snap). */
@media (max-width: 767.98px) {
  .ch-keys__points-wrap .ch-keys__points[data-ch-carousel-track] {
    gap: 16px !important;
    padding: 4px 16px !important;
  }
  .ch-keys__points-wrap .ch-keys__points[data-ch-carousel-track] > * {
    flex: 0 0 calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
  }
  .ch-keys__points-wrap .ch-carousel__dots { display: none !important; }
}
.ch-keys__point {
  width: 100%;
  text-align: left;
  border: 2px solid var(--ch-border);
  background: #fff;
  border-radius: var(--ch-radius-md);
  padding: 24px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font: inherit;
  color: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ch-keys__point:hover { border-color: #c8c4bc; }
.ch-keys__point.is-active {
  border-color: var(--ch-brand);
  background: linear-gradient(to bottom, var(--ch-muted), #fff);
  box-shadow: var(--ch-shadow-md);
}
.ch-keys__point-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--ch-muted);
  color: var(--ch-brand);  /* SVG check brand por defecto (currentColor) */
  transition: background-color .2s ease, color .2s ease;
}
.ch-keys__point:hover .ch-keys__point-icon,
.ch-keys__point.is-active .ch-keys__point-icon {
  background: var(--ch-brand);
  color: #fff;             /* SVG blanco en hover/active */
}
.ch-keys__point-icon-img {
  width: 28px;
  height: 28px;
  display: block;
}
.ch-keys__point.is-active .ch-keys__point-icon-img {
  filter: brightness(0) invert(1);
}
.ch-keys__point-body { flex: 1 1 auto; }
.ch-keys__point-title {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ch-text-soft);
  letter-spacing: -0.0225em;
}
.ch-keys__point.is-active .ch-keys__point-title { color: var(--ch-ink); }
.ch-keys__point-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ch-text-mute);
  letter-spacing: -0.0107em;
}
.ch-keys__point-desc {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ch-border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}
.ch-keys__point.is-active .ch-keys__point-desc { display: block; }
.ch-keys__point-arrow { color: var(--ch-text-mute); transition: transform .2s, color .2s; }
.ch-keys__point.is-active .ch-keys__point-arrow { color: var(--ch-brand); }
.ch-keys__point:hover .ch-keys__point-arrow { transform: translateX(2px); }

.ch-keys__compare {
  margin-top: 32px;
  display: grid;
  gap: 32px;
  padding-top: 120px;
}
/* Sangrado lateral SOLO en desktop ≥768px (en mobile causaría overflow) */
@media (min-width: 768px) {
  .ch-keys__compare {
    grid-template-columns: 1fr 1fr;
    margin-left: calc(-1 * var(--ch-pad-x));
    margin-right: calc(-1 * var(--ch-pad-x));
  }
}

.ch-keys__compare-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ch-radius-md);
  padding: 32px;
}
.ch-keys__compare-card--trad {
  background: linear-gradient(to bottom, #e8e6e3, #d4d2cf);
}
.ch-keys__compare-card--bare {
  background: linear-gradient(to bottom, var(--ch-brand), var(--ch-brand-deep));
  color: #fff;
}
.ch-keys__compare-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  border-radius: 999px;
  background: var(--ch-brand);
  padding: 4px 12px;
  font-size: 12px;
  color: #fff;
}
.ch-keys__compare-badge--bare { background: rgba(255,255,255,.2); }
.ch-keys__compare-title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.0225em; color: var(--ch-ink); }
.ch-keys__compare-title--bare { color: #fff; }
.ch-keys__compare-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.ch-keys__compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ch-text-soft);
}
.ch-keys__compare-list--bare li { color: rgba(255,255,255,.95); }
.ch-keys__compare-x { color: #8b6f47; font-weight: bold; }
.ch-keys__compare-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  font-size: 10px;
  color: #fff;
}

/* ============================================================
   FAVORITES carousel
   ============================================================ */
.ch-favs {
  background: linear-gradient(to bottom, var(--ch-muted), #fff);
  padding: 40px 0;
}
@media (min-width: 640px) { .ch-favs { padding: 56px 0; } }
@media (min-width: 768px) { .ch-favs { padding: 64px 0; } }
.ch-favs__inner { margin: 0 auto; max-width: var(--ch-max); padding: 0 var(--ch-pad-x); }

.ch-favs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.ch-favs__head-copy { max-width: 430px; }
.ch-favs__heading {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ch-ink);
  letter-spacing: 0.013em;
}
@media (min-width: 640px) { .ch-favs__heading { font-size: 28px; } }
@media (min-width: 768px) { .ch-favs__heading { font-size: 30px; line-height: 36px; } }
.ch-favs__sub {
  margin: 8px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 24px;
  color: #6b6b6b;
  letter-spacing: -0.0195em;
}

.ch-favs__nav {
  display: none;
  gap: 8px;
  flex-shrink: 0;
}
@media (min-width: 768px) { .ch-favs__nav { display: flex; } }

.ch-favs__arrow {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ch-border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--ch-ink);
  box-shadow: var(--ch-shadow-sm);
  transition: background-color .2s, opacity .2s;
}
.ch-favs__arrow:hover:not([disabled]) { background: var(--ch-muted); }
.ch-favs__arrow[disabled] { opacity: .5; cursor: not-allowed; }
.ch-favs__arrow > span { display: block; transform: translateY(-1px); }

.ch-favs__carousel {
  margin-top: 32px;
  position: relative;
}
.ch-favs__track {
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ch-favs__track::-webkit-scrollbar { display: none; }

.ch-favs__cell {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (min-width: 640px) {
  .ch-favs__cell { flex-basis: calc((100% - 24px) / 2); width: calc((100% - 24px) / 2); }
}
@media (min-width: 1024px) {
  .ch-favs__cell { flex-basis: calc((100% - 48px) / 3); width: calc((100% - 48px) / 3); }
}

/* Flechas laterales SOBRE las cards (favorites + featured) */
.ch-favs__arrow--side,
.ch-featured__arrow--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--ch-border);
  color: var(--ch-ink);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transition: background-color .2s ease, transform .2s ease;
}
@media (min-width: 768px) {
  .ch-favs__arrow--side,
  .ch-featured__arrow--side { display: inline-flex; }
}
.ch-favs__arrow--side:hover,
.ch-featured__arrow--side:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.ch-favs__arrow--prev, .ch-featured__arrow--prev { left: -22px; }
.ch-favs__arrow--next, .ch-featured__arrow--next { right: -22px; }
.ch-favs__arrow--side > span,
.ch-featured__arrow--side > span { display: block; transform: translateY(-2px); }

/* Featured carousel wrapper para flechas position:absolute */
.ch-featured__carousel {
  position: relative;
  margin-top: 32px;
}
.ch-featured__carousel .ch-featured__grid { margin-top: 0; }

/* Clones del bucle infinito: ocultos a accesibilidad pero visibles para scroll
   visual seamless. NO interactivos (links/buttons no focusables). */
.is-clone { pointer-events: none; }
.is-clone a, .is-clone button { pointer-events: none; tabindex: -1; }

.ch-favs__cta-row { margin-top: 40px; display: flex; justify-content: center; }
.ch-favs__cta,
a.ch-favs__cta,
.ch-favs__cta:link,
.ch-favs__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ch-brand);
  padding: 12px 40px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.0195em;
  text-decoration: none !important;
  transition: opacity .2s;
}
.ch-favs__cta:hover { opacity: .9; color: #fff !important; }

.ch-favs__empty { text-align: center; }
.ch-favs__empty-card {
  margin: 40px auto 0;
  max-width: 640px;
  padding: 64px 24px;
  border: 1px dashed var(--ch-border);
  border-radius: var(--ch-radius-lg);
  background: #fff;
}
.ch-favs__empty-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--ch-ink); }
.ch-favs__empty-sub { margin: 8px 0 0; font-size: 14px; color: rgba(10,10,10,.6); }
.ch-favs__empty-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ch-brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* ----------------- Reusable card (favorites) ----------------- */
.ch-card { display: block; }
.ch-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 302 / 403;
  overflow: hidden;
  border-radius: var(--ch-radius-lg);
  background: #fff;
  border: 1px solid var(--ch-border);
}
.ch-card__media-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.ch-card__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  padding: 24px;
  transition: transform .5s ease;
}
.ch-card__media:hover .ch-card__img,
.ch-card:hover .ch-card__img { transform: scale(1.05); }
.ch-card__badge {
  pointer-events: none;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--ch-ink);
}
.ch-card__action {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 10;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  background: var(--ch-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.0107em;
  border: 0;
  cursor: pointer;
  border-radius: 0 0 var(--ch-radius-lg) var(--ch-radius-lg);
  transform: translateY(100%);
  transition: transform .3s ease, background-color .2s;
  pointer-events: none;
  text-decoration: none;
}
.ch-card__media:hover .ch-card__action,
.ch-card__media:focus-within .ch-card__action,
.ch-card__action:focus-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.ch-card__action:hover { background: var(--ch-brand); }
.ch-card__action[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 768px) {
  .ch-card__action { transform: translateY(0); pointer-events: auto; }
}
.ch-card__info { display: block; margin-top: 16px; text-decoration: none; }
.ch-card__info:hover { text-decoration: none; }
.ch-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ch-ink);
  letter-spacing: -0.0244em;
}
.ch-card:hover .ch-card__title,
.ch-card__info:hover .ch-card__title { text-decoration: underline; }
.ch-card__price-row {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ch-card__price {
  margin: 0;
  font-size: 16px;
  color: var(--ch-ink);
  letter-spacing: -0.0195em;
}
.ch-card__price-old {
  margin-left: 8px;
  font-size: 14px;
  color: #6b6b6b;
  text-decoration: line-through;
}
.ch-card__variant-info {
  margin: 0;
  font-size: 12px;
  color: #6b6b6b;
}

/* ============================================================
   FAMILIES
   ============================================================ */
.ch-fams { background: var(--ch-muted); padding: 48px 0; }
@media (min-width: 640px) { .ch-fams { padding: 64px 0; } }
@media (min-width: 768px) { .ch-fams { padding: 80px 0; } }
.ch-fams__inner { margin: 0 auto; max-width: var(--ch-max); padding: 0 var(--ch-pad-x); }
.ch-fams__head { text-align: center; }
.ch-fams__heading {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ch-ink);
  letter-spacing: 0.01em;
}
@media (min-width: 640px) { .ch-fams__heading { font-size: 32px; } }
@media (min-width: 768px) { .ch-fams__heading { font-size: 36px; line-height: 1.25; } }
.ch-fams__sub {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ch-text-soft);
  letter-spacing: -0.0195em;
}
@media (min-width: 640px) { .ch-fams__sub { font-size: 16px; } }

.ch-fams__grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .ch-fams__grid { margin-top: 40px; } }
@media (min-width: 768px) { .ch-fams__grid { margin-top: 48px; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ch-fams__grid { grid-template-columns: repeat(4, 1fr); } }

.ch-fams__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: var(--ch-radius-md);
  background: #fff;
  padding: 24px;
  box-shadow: var(--ch-shadow-sm);
}
.ch-fams__stars { display: flex; gap: 4px; }
.ch-fams__quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}
.ch-fams__author { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.ch-fams__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ch-brand);
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.0195em;
}
.ch-fams__author-name {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ch-ink);
  letter-spacing: -0.0107em;
}
.ch-fams__author-loc {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ch-text-soft);
}

.ch-fams__stats-wrap {
  margin-top: 48px;
  border-top: 1px solid var(--ch-border);
  padding-top: 32px;
}
.ch-fams__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 24px;
}
.ch-fams__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}
@media (min-width: 640px) { .ch-fams__stat { padding: 0 32px; } }
@media (min-width: 768px) { .ch-fams__stat { padding: 0 64px; } }
.ch-fams__stat + .ch-fams__stat { border-left: 1px solid var(--ch-border); }
.ch-fams__stat-val {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ch-ink);
  letter-spacing: 0.013em;
}
@media (min-width: 640px) { .ch-fams__stat-val { font-size: 26px; } }
@media (min-width: 768px) { .ch-fams__stat-val { font-size: 30px; line-height: 1.4; } }
.ch-fams__stat-lbl {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.ch-exp { background: #fff; padding: 48px 0; }
@media (min-width: 640px) { .ch-exp { padding: 64px 0; } }
@media (min-width: 768px) { .ch-exp { padding: 80px 0; } }
.ch-exp__inner { margin: 0 auto; max-width: var(--ch-max); padding: 0 var(--ch-pad-x); }

.ch-exp__about {
  display: grid;
  gap: 32px;
}
@media (min-width: 640px) { .ch-exp__about { gap: 40px; } }
@media (min-width: 768px) { .ch-exp__about { gap: 48px; } }
@media (min-width: 1024px) { .ch-exp__about { grid-template-columns: 1fr 1fr; } }

.ch-exp__media {
  position: relative;
  aspect-ratio: 621 / 400;
  overflow: hidden;
  border-radius: 24px;
}
.ch-exp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ch-exp__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--ch-muted);
  padding: 8px 24px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}
.ch-exp__title { margin: 24px 0 0; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; }
@media (min-width: 640px) { .ch-exp__title { font-size: 32px; } }
@media (min-width: 768px) { .ch-exp__title { font-size: 36px; line-height: 1.25; } }
.ch-exp__title-lead { display: block; color: var(--ch-ink); }
.ch-exp__title-accent { display: block; color: var(--ch-brand); }

.ch-exp__desc {
  margin: 16px 0 0;
  max-width: 572px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ch-text-soft);
  letter-spacing: -0.0244em;
}
@media (min-width: 640px) { .ch-exp__desc { margin-top: 24px; font-size: 18px; line-height: 1.625; } }

.ch-exp__points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) { .ch-exp__points { margin-top: 40px; } }
.ch-exp__point { display: flex; align-items: flex-start; gap: 16px; }
.ch-exp__point-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ch-muted);
}
.ch-exp__point-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ch-ink);
  letter-spacing: -0.0244em;
}
.ch-exp__point-desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}

.ch-exp__benefits {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) { .ch-exp__benefits { margin-top: 48px; gap: 32px; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .ch-exp__benefits { margin-top: 64px; } }
@media (min-width: 1024px) { .ch-exp__benefits { grid-template-columns: repeat(4, 1fr); } }

.ch-exp__benefit {
  border-radius: var(--ch-radius-md);
  background: var(--ch-muted);
  padding: 24px;
  text-align: center;
}
@media (min-width: 640px) { .ch-exp__benefit { padding: 32px; } }
.ch-exp__benefit-icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
}
.ch-exp__benefit-title {
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ch-ink);
  letter-spacing: -0.0244em;
}
.ch-exp__benefit-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.625;
  color: var(--ch-text-soft);
  letter-spacing: -0.0107em;
}

.ch-exp__cta {
  margin-top: 40px;
  border-radius: 24px;
  background: linear-gradient(to bottom, var(--ch-brand), var(--ch-brand-deep));
  padding: 40px 24px;
  text-align: center;
}
@media (min-width: 640px) { .ch-exp__cta { margin-top: 48px; padding: 48px; } }
.ch-exp__cta-title {
  margin: 0 auto;
  max-width: 800px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 0.013em;
}
@media (min-width: 640px) { .ch-exp__cta-title { font-size: 26px; } }
@media (min-width: 768px) { .ch-exp__cta-title { font-size: 30px; line-height: 36px; } }
.ch-exp__cta-sub {
  margin: 12px auto 0;
  max-width: 672px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  letter-spacing: -0.0195em;
}
@media (min-width: 640px) { .ch-exp__cta-sub { font-size: 16px; } }
.ch-exp__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--ch-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.0195em;
  transition: opacity .2s;
}
.ch-exp__cta-link:hover { opacity: .9; }
@media (min-width: 640px) {
  .ch-exp__cta-link { margin-top: 32px; height: 56px; padding: 0 40px; font-size: 16px; }
}