/* GENERADO POR scripts/build-css.mjs — NO EDITAR A MANO.
   Se edita el archivo suelto correspondiente y se corre `npm run build:css`.
   Fuentes, en orden de cascada:
     css/marquee.css
     css/problem.css
     css/solution.css
     css/features.css
 */

/* ── css/marquee.css ────────────────────────────────── */
.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  background: #fff;
  /* Bordes que se desvanecen: las píldoras entran y salen en vez de cortarse
     en seco contra el borde de la pantalla. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

/* ── Modo arrastrable ──────────────────────────────────────────────────────
   Lo activa js/marquee.js añadiendo la clase. Mejora progresiva: sin JS la
   animación CSS de abajo sigue corriendo y la banda se ve como siempre. */
.marquee-wrapper--interactive {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  /* Sin esto, arrastrar hasta el extremo dispara el gesto de "atrás" del
     navegador en trackpads y en Android. */
  overscroll-behavior-x: contain;
  /* La barra estorba en una banda decorativa; el arrastre es la affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.marquee-wrapper--interactive::-webkit-scrollbar {
  display: none;
}

.marquee-wrapper--interactive.is-dragging {
  cursor: grabbing;
}

/* Ahora es enfocable por teclado (las flechas desplazan la región), así que
   necesita foco visible. */
.marquee-wrapper--interactive:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -3px;
  /* Con foco no se desvanecen los bordes: la máscara también recortaría el
     anillo. */
  -webkit-mask-image: none;
  mask-image: none;
}

/* El movimiento pasa a scrollLeft: si la animación siguiera activa, pelearía
   con el arrastre por la posición. */
.marquee-wrapper--interactive .marquee-track {
  animation: none;
}

/* Las píldoras no deben capturar el arrastre como si fuera una selección. */
.marquee-wrapper--interactive .marquee-pill {
  user-select: none;
  -webkit-user-select: none;
}

.marquee-wrapper--interactive .marquee-pill__img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  /* Duration ajustada a 10 pills para mantener la misma velocidad visual */
  animation: marquee-scroll 35s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-content {
  display: flex;
  align-items: center;
  /* Gap entre pills del diseño Figma (frame "Bull"): 6px */
  gap: 0.375rem;
  /* padding-right = gap, para que el salto entre la copia 1 y 2 sea idéntico al gap entre pills */
  padding-right: 0.375rem;
}

.marquee-pill {
  display: inline-flex;
  align-items: center;
  /* Dimensiones Figma: 77px alto, 15px gap, 10/48/9/10px padding — escalan al 40% a 769px */
  gap: clamp(0.5rem, 0.78vw, 0.9375rem);
  padding:
    clamp(0.375rem, 0.52vw, 0.625rem)
    clamp(1.75rem, 2.5vw, 3rem)
    clamp(0.3125rem, 0.47vw, 0.5625rem)
    clamp(0.375rem, 0.52vw, 0.625rem);
  border-radius: clamp(1.375rem, 2.08vw, 2.5rem);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  /* Texto oscuro, no blanco: con blanco 9 de las 10 píldoras fallaban el
     contraste AA (hasta 2:1 sobre el cian y el verde). Con el texto en
     --color-text los colores de marca se conservan exactos y pasan AA.
     El patrón ya existía: la píldora amarilla ya usaba texto oscuro. */
  color: var(--color-text);
  flex-shrink: 0;
  height: clamp(2.8rem, 4.01vw, 4.8125rem);
}

.marquee-pill__img {
  height: clamp(2rem, 2.86vw, 3.4375rem);
  width: clamp(2rem, 2.86vw, 3.4375rem);
  object-fit: contain;
  flex-shrink: 0;
  transition: rotate var(--motion-base) var(--ease-spring), scale var(--motion-base) var(--ease-spring);
}

/* Guiño del ícono al pasar el mouse (la banda ya está pausada por el hover).
   Se anima el ícono y no la píldora: escalar la píldora la recortaría contra
   el overflow del carril. */
@media (hover: hover) {
  .marquee-pill:hover .marquee-pill__img {
    rotate: -10deg;
    scale: 1.1;
  }
}


@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 48rem) {
  .marquee-content {
    gap: clamp(0.75rem, 2.75vw, 1.32rem);
    padding-right: clamp(0.75rem, 2.75vw, 1.32rem);
  }

  .marquee-pill {
    height: clamp(3.375rem, 14.1vw, 6.77rem);   /* 108px @ 768px */
    gap: clamp(0.75rem, 2.75vw, 1.32rem);        /* 21px @ 768px */
    padding:
      clamp(0.5rem, 1.83vw, 0.878rem)
      clamp(2.9rem, 12.1vw, 5.81rem)
      clamp(0.4rem, 1.65vw, 0.792rem)
      clamp(0.5rem, 1.83vw, 0.878rem);
    border-radius: clamp(1.75rem, 7.33vw, 3.52rem); /* 56px @ 768px */
    font-size: clamp(0.875rem, 3.6vw, 1.73rem);     /* 28px @ 768px */
  }

  .marquee-pill__img {
    height: clamp(2.5rem, 10.5vw, 5.04rem);   /* 81px @ 768px */
    width: clamp(2.5rem, 10.5vw, 5.04rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ── css/problem.css ────────────────────────────────── */
.problem {
  position: relative;
  padding-top: var(--space-section);
  overflow: visible;
  background: #fff;
}

.problem > .container {
  position: relative;
  z-index: 1;
}

.problem__animated-line {
  position: absolute;
  top: clamp(10rem, 20.83vw, 25rem);
  left: clamp(-28.125rem, -23.44vw, -11.25rem);
  width: clamp(17.5rem, 36.46vw, 43.75rem);
  height: clamp(28rem, 58.33vw, 70rem);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-25deg);
  transform-origin: top left;
}

.problem__header {
  margin-bottom: clamp(1.6rem, 3.33vw, 4rem);
  position: relative;
  z-index: 1;
  background: transparent;
}

.problem__header-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(1.2rem, 4vw, 5rem);
  align-items: start;
  background: transparent;
  position: relative;
}

.problem__header-grid .section-title {
  font-size: clamp(2.5rem, calc(2.432vw + 0.831rem), 3.25rem);
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: clamp(0.4rem, 0.83vw, 1rem);
}

.problem__header-grid .section-title__part {
  display: block;
}

.problem__header-grid .section-title__part--regular {
  font-weight: 400;
}

.problem__header-grid .section-title__part--bold {
  position: relative;
  display: inline-block;
  font-weight: 700;
}


.problem__title-wrap {
  background: transparent;
}

/* Subrayado anclado al texto, no a coordenadas.
   Antes usaba números mágicos (left: 83%, bottom: -40% en desktop y otro juego
   distinto en mobile) calibrados a ojo contra un largo de texto concreto: al
   cambiar el texto o el ancho, el trazo se despegaba de "ser un caos".
   El <strong> que envuelve esas palabras ya es position:relative e
   inline-block, así que basta centrarlo sobre él y separarlo en `em`, que va
   atado al tamaño de fuente y por tanto se comporta igual en mobile sin
   necesitar overrides. */
.problem__header-grid .section-title__underline {
  left: 50%;
  bottom: -0.12em;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  max-width: none;
}

.problem__lead {
  font-family: var(--font-body);
  font-size: max(14px, var(--fs-lg));
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  text-align: start;
  background: transparent;
}

.problem__lead strong {
  font-weight: 700;
}

/* Carousel */
.problem__carousel {
  position: relative;
  overflow: hidden;
}

.problem__track {
  display: flex;
  gap: clamp(0.6rem, 1.25vw, 1.5rem);
  transition: transform 0.9s var(--ease-out-soft);
}

.problem__card {
  flex: 0 0 calc(50% - clamp(0.3rem, 0.625vw, 0.75rem));
  border-radius: clamp(0.375rem, 0.625vw, 0.75rem);
  padding: clamp(1.25rem, 1.67vw, 2rem);
  position: relative;
}

.problem__card--teal {
  position: relative;
}

/* Más lenta y con menos giro que antes (±12° en 4 s): se leía nerviosa. */
@keyframes emotion-float {
  0%, 100% { transform: translateY(0)       rotate(0deg);  }
  50%      { transform: translateY(-0.4rem) rotate(6deg);  }
}

.problem__emotion {
  position: absolute;
  top: 32%;
  right: -10%;
  width: clamp(2.4rem, 5vw, 6rem);
  height: auto;
  pointer-events: none;
  z-index: 2;
  animation: emotion-float 6s var(--ease-in-out) infinite;
  transform-origin: center;
}

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

.problem__card h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: clamp(0.4rem, 0.83vw, 1rem);
  line-height: 1.3;
}

.problem__card h3 strong {
  font-weight: 700;
}

.problem__card p {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
}

.problem__card p strong {
  font-weight: 700;
}

.problem__card--light {
  background: var(--color-surface);
  border: clamp(4px, 0.47vw, 9px) solid var(--color-border-mid);
}

/* Ícono en una ficha blanca: misma lectura sobre la card gris y sobre la
   seleccionada en teal. Antes eran emojis, que cambian de dibujo según el
   sistema operativo. */
/* Sticker 3D (antes emojis planos, que cambiaban de dibujo según el sistema
   operativo). Sin ficha: la calcomanía ya trae su borde blanco. */
.problem__card-icon {
  display: inline-block;
  margin-bottom: clamp(0.6rem, 1vw, 1.25rem);
  font-size: clamp(3.25rem, 4.6vw, 5.5rem);
  rotate: -6deg;
}

/* Al quedar seleccionada, el ícono hace un único guiño. */
@keyframes problem-icon-wiggle {
  0%   { rotate: 0deg; scale: 1; }
  30%  { rotate: -12deg; scale: 1.12; }
  60%  { rotate: 8deg; }
  100% { rotate: 0deg; scale: 1; }
}

.problem__card--selected .problem__card-icon .sticker {
  animation: problem-icon-wiggle 700ms var(--ease-out-soft);
}

.problem__card h3,
.problem__card p {
  transition: color var(--transition-base);
}

.problem__card {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
  .problem__card {
    cursor: pointer;
  }

  /* El relleno turquesa SIGUE AL CURSOR: mientras el ratón está sobre
     cualquier card, la activa cede su marca y la toma la card bajo el
     puntero. Así nunca hay dos cards destacadas a la vez y el hover se lee
     como una vista previa de lo que se va a seleccionar al hacer clic.
     Al salir el ratón, la marca vuelve sola a la activa: no hace falta JS
     porque :has() consulta el estado del propio contenedor.
     El autoplay ya se pausa con mouseenter sobre el track, así que la card
     activa no se mueve bajo el cursor mientras dura la vista previa. */
  .problem__track:has(.problem__card:hover)
    .problem__card--light.problem__card--selected:not(:hover) {
    background: var(--color-surface);
    border-color: var(--color-border-mid);
  }

  .problem__card--light:hover {
    background: var(--color-brand-teal);
    border-color: var(--color-brand-teal-dark);
  }
}

/* Con teclado el foco debe verse tan claro como el hover. */
.problem__card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 3px;
}

/* La seleccionada conserva el teal de marca, pero el texto va oscuro: en
   blanco daba 2.07:1 (y el cuerpo de la card es texto chico). En
   --color-text son 8.25:1. */
.problem__card--light.problem__card--selected {
  background: var(--color-brand-teal);
  border-color: var(--color-brand-teal-dark);
}

.problem__nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.3rem, 0.625vw, 0.75rem);
  margin-top: clamp(0.6rem, 1.25vw, 1.5rem);
}

/* 44px de piso (a 1024px medían 36) y flecha blanca sobre card-purple: sobre
   el lila de antes la flecha daba 1.8:1, por debajo del 3:1 de un ícono. */
.problem__nav-btn {
  width: max(44px, clamp(2.75rem, 2.71vw, 3.25rem));
  height: max(44px, clamp(2.75rem, 2.71vw, 3.25rem));
  border-radius: 50%;
  border: none;
  background: var(--color-card-purple);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-spring);
}

@media (hover: hover) {
  .problem__nav-btn:hover {
    background: var(--color-purple-dark);
    transform: scale(1.08);
  }
}

.problem__nav-btn:active {
  transform: scale(0.92);
  transition-duration: var(--motion-press);
}

@media (max-width: 48rem) {
  .problem__animated-line {
    top: clamp(25rem, 198vw, 99rem);   /* 520px @ 430px */
    width: clamp(15rem, 96vw, 46.5rem);  /* bbox rotado ≈ 942px @768px (Figma) */
  }

  .problem > .container {
    padding-left: clamp(2.5rem, 12.5vw, 6rem);  /* 96px @ 768px, 53.75px @ 430px */
    padding-block: clamp(2.5rem, 12.5vw, 6rem); /* 96px @ 768px, 53.75px @ 430px */
  }

  .problem__header-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 9vw, 4.32rem);         /* 38.7px @ 430px */
    max-width: clamp(10rem, 76vw, 38rem);   /* 260px @ 430px */
  }

  .problem__header-grid .section-title {
    font-size: var(--fs-h2);
    text-align: left;
  }

  /* Sin override en mobile: la regla base está en `em` y en % del propio
     texto, así que escala sola. Los valores en vw que había aquí eran otra
     calibración a ojo que se despegaba al cambiar el copy. */

  .problem__emotion {
    top: clamp(0.75rem, 20vw, 10rem);       /* 17px @ 430px — un poco más abajo */
    right: clamp(2.75rem, 14vw, 6.75rem); /* 51.6px @ 430px — un poco más a la izquierda */
    width: clamp(2rem, 14.6vw, 7rem);     /* 62.78px @ 430px */
  }

  .problem__carousel {
    margin-right: calc(-1 * var(--container-padding));
    /* La card activa descansa pegada al borde de recorte (overflow:hidden), que se come
       1-2px de su borde izquierdo. Movemos solo el recorte a la izquierda con margin/padding
       compensados: la card sigue alineada con el texto de arriba y el hueco cae dentro del
       gap del flex (no revela el clon anterior). */
    margin-left: -0.4rem;
    padding-left: 0.4rem;
  }

  /* Card y contenido — proporciones relativas a la card del diseño Figma
     (227.4px ancho): cada medida = figma_px / 227.4 × 65vw. */
  .problem__card {
    flex: 0 0 clamp(17rem, 65vw, 32rem);            /* 279px @ 430px — carrusel */
    min-height: clamp(19rem, 93.77vw, 46rem);        /* 403px @ 430px — ratio 328/227 Figma */
    border-radius: clamp(0.375rem, 2.324vw, 1.2rem); /* 10px @ 430px (Figma 8.13) */
    padding: clamp(1rem, 7.04vw, 3.5rem);            /* 30px @ 430px (Figma 24.62) */
  }

  .problem__card--light {
    border-width: clamp(4px, 1.767vw, 0.9rem);       /* 7.6px @ 430px (Figma 6.18) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.75rem, 6.5vw, 2.75rem);             /* 28px @ 430px */
  }

  .problem__card-icon {
    font-size: clamp(3.25rem, 13vw, 6rem);
    margin-bottom: 0;
  }

  .problem__card h3 {
    font-size: var(--fs-h3);
    line-height: 1.05;
  }

  .problem__card p {
    font-size: var(--fs-body);
    line-height: 1.4;
  }

  .problem__nav {
    display: none;
  }
}

/* ── Puntos de paginación ──────────────────────────────────────────────────
   Solo en mobile: en desktop la navegación son las flechas, y duplicar la
   señal cargaría de más una sección que ya tiene ilustración y línea
   decorativa. Es la única pista de que hay 4 tarjetas cuando las flechas
   no se muestran. */
.problem__dots {
  display: none;
}

@media (max-width: 48rem) {
  .problem__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.875rem);
  }

  /* El punto visible es pequeño, pero el botón que lo contiene mantiene los
     44px de objetivo táctil con padding transparente. */
  .problem__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .problem__dot::before {
    content: '';
    display: block;
    width: clamp(0.5rem, 2.1vw, 0.75rem);
    height: clamp(0.5rem, 2.1vw, 0.75rem);
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .problem__dot[aria-selected="true"]::before {
    background: var(--color-purple-dark);
    transform: scale(1.35);
  }

  .problem__dot:focus-visible {
    outline: 3px solid var(--color-purple-dark);
    outline-offset: -8px;
    border-radius: var(--radius-full);
  }
}

/* ── css/solution.css ────────────────────────────────── */
.solution {
  padding-block: var(--space-section);
  background: transparent;
  position: relative;
}


/* El <picture> no debe generar caja propia: el <img> se posiciona contra .solution */
.solution__bg-bottom-pic {
  display: contents;
}

.solution__bg-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(12rem, 66vw, 80rem);
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.solution__animated-line,
.value-props__line {
  display: none;
}

.solution__animated-line {
  position: absolute;
  top: 130px;
  right: 0;
  width: 700px;
  height: 1000px;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.solution > .container {
  max-width: none;
  /* mismo clamp que hero margin-inline para alinear bordes laterales */
  padding-inline: clamp(2.5rem, 5.21vw, 6.25rem);
}

/* Main box */
.solution__box {
  background: var(--color-brand-lila);
  border-radius: clamp(0.6rem, 1.25vw, 1.5rem);
  padding: clamp(1.25rem, calc(2.432vw + 0.081rem), 3rem);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1rem, 2.085vw, 2.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: clamp(0.4rem, 0.83vw, 1rem);
}

.solution__box-wrap {
  position: relative;
}

/* Desktop: badges flotan sobre el área del box (mismo bloque contenedor) */
.solution__badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.solution__deco-heart {
  position: absolute;
  left: 5%;
  bottom: -10%;
  width: clamp(6.5rem, 7.5vw, 9rem);
  height: auto;
  pointer-events: none;
  z-index: 3;
}

.solution__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-left: clamp(2rem, calc(11.121vw - 0.5rem), 13rem);
}

.solution__left .section-tag {
  margin-bottom: clamp(1rem, 2.08vw, 2.5rem);
}

.solution__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, calc(1.878vw + 2.06rem), 3.75rem);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: clamp(0.4rem, 0.83vw, 1rem);
}

.solution__title--bold {
  font-weight: 700;
}

.solution__title--last {
  position: relative;
  display: inline-block;
}

/* Anclado al texto, no a coordenadas. El ancho en vw estaba calibrado a ojo
   contra un largo concreto: medido, el trazo caía 29px fuera de "necesita." en
   desktop y 73px en mobile. Con width: 100% del propio <span> y separación en
   `em` queda centrado solo, y la misma regla sirve en ambos tamaños. */
.solution__title--last .section-title__underline {
  left: 50%;
  bottom: -0.12em;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  max-width: none;
}

/* Video — márgenes proporcionales: 100px top/bottom → 2.5rem, 140px right → 3.5rem a 768px */
.solution__right {
  position: relative;
  z-index: 1;
  margin: clamp(2.5rem, 5.21vw, 6.25rem) clamp(3.5rem, 7.29vw, 8.75rem) clamp(2.5rem, 5.21vw, 6.25rem) 0;
}

/* Deco garabatos — posición y tamaño proporcionales */
.solution__deco-lines {
  position: absolute;
  top: clamp(-6.5625rem, -5.47vw, -4.625rem);
  right: clamp(-6.875rem, -5.73vw, -5.75rem);
  width: clamp(8rem, 8.33vw, 10rem);
  height: auto;
  pointer-events: none;
  z-index: 3;
}

.solution__deco-line {
  opacity: 0;
}

.solution__video-wrap {
  position: relative;
}

.solution__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
}

.solution__player-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.solution__player-cover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  transition: opacity var(--transition-base);
  /* Póster POR ORIENTACIÓN. El atributo `poster` del <video> solo admite una
     URL, pero el reproductor cambia mucho de aspecto: 1.60 en desktop y 0.57
     en mobile. Con un único póster 16:9, object-fit: cover recortaba en mobile
     a una franja central del 32% del ancho — de ahí que allí solo se viera el
     logo sobre fondo morado.
     La portada ya cubre el reproductor entero antes del play, así que sirve de
     lienzo y el problema se resuelve en CSS, sin JS. Los dos pósters son
     fotogramas reales del propio video (t≈135s), no un fondo plano. */
  background-color: var(--color-brand-teal);
  background-size: cover;
  background-position: center;
}

/* El póster se pide cuando el reproductor está cerca de la pantalla
   (js/motion.js pone .is-near), no al cargar: eran 49–63 KB que competían con
   el hero por el ancho de banda. Sin IntersectionObserver (no hay
   .reveal-armed) se carga como antes. */
.solution__player.is-near .solution__player-cover,
html:not(.reveal-armed) .solution__player-cover {
  background-image: url('../assets/images/solution/video_poster.webp');
}

@media (max-width: 48rem) {
  .solution__player.is-near .solution__player-cover,
  html:not(.reveal-armed) .solution__player-cover {
    background-image: url('../assets/images/solution/video_poster_vertical.webp');
  }
}

.solution__player.is-started .solution__player-cover {
  opacity: 0;
  pointer-events: none;
}

.solution__play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(4rem, calc(6.864vw + 0.701rem), 8.9375rem);
  height: clamp(4rem, calc(6.864vw + 0.701rem), 8.9375rem);
  border-radius: 50%;
  background: rgba(241, 241, 241, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  box-shadow: none;
  transition: transform var(--transition-fast);
  z-index: 3;
}

.solution__play-btn svg {
  width: clamp(2rem, calc(3.36vw + 0.341rem), 4.375rem);
  height: clamp(2rem, calc(3.36vw + 0.341rem), 4.375rem);
  transform: translateX(4px);
}

@media (hover: hover) {
  .solution__play-btn:hover {
    transform: scale(1.08);
  }
}

.solution__play-btn:active {
  transform: scale(0.95);
}

/* Dos ondas que salen del botón cuando el reproductor entra en pantalla, y
   paran: invitan a darle play sin quedarse latiendo para siempre. Es un
   pseudo-elemento que escala y se desvanece (transform + opacity). */
.solution__play-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}

@keyframes play-ripple {
  from { opacity: 0.9; scale: 1; }
  to   { opacity: 0; scale: 1.55; }
}

.solution__player.is-near .solution__play-btn::after {
  animation: play-ripple 1.6s var(--ease-out-soft) 0.6s 2;
}

@media (prefers-reduced-motion: reduce) {
  .solution__play-btn::after { animation: none; }
}

/* Controls bar */
.solution__player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.solution__player.is-started:hover .solution__player-controls,
.solution__player.is-paused .solution__player-controls {
  opacity: 1;
  pointer-events: auto;
}

.solution__player-toggle,
.solution__player-mute,
.solution__player-maximize {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  /* Pisos en px absolutos: 2.75rem da 36px cuando el root baja a 13px, por
     debajo del mínimo táctil. Mismo criterio que el navbar. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.solution__player-toggle:hover,
.solution__player-mute:hover,
.solution__player-maximize:hover {
  transform: scale(1.15);
}

.solution__player-toggle .icon-play  { display: none; }
.solution__player-toggle .icon-pause { display: block; }
.solution__player.is-paused .solution__player-toggle .icon-play  { display: block; }
.solution__player.is-paused .solution__player-toggle .icon-pause { display: none; }

.solution__player-volume {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.solution__player-mute .icon-vol-off { display: none; }
.solution__player.is-muted .solution__player-mute .icon-vol-on  { display: none; }
.solution__player.is-muted .solution__player-mute .icon-vol-off { display: block; }

/* El control mide 44px de alto para poder agarrarse con el dedo, pero el
   carril visible sigue siendo de 4px: se pinta en el pseudo-elemento del
   track, no en el fondo del propio input. Antes el input tenía height: 4px y
   por tanto un objetivo táctil de 4px de alto. */
.solution__player-vol-slider {
  width: clamp(4rem, 8vw, 7rem);
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.solution__player-vol-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.solution__player-vol-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.solution__player-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  /* Centrado sobre el carril de 4px: (4 - 14) / 2 */
  margin-top: -5px;
}

.solution__player-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

/* Floating badges */
.solution__badge {
  position: absolute;
  background: #fff;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  z-index: 2;
}

/* Keyframes por badge: preservan la rotación base + añaden flotado idéntico a hero__deco-face */
@keyframes float-badge-top {
  0%, 100% { transform: translateX(-50%) rotate(-5.1deg) translateY(0); }
  50%       { transform: translateX(-50%) rotate(-5.1deg) translateY(-0.4rem); }
}

@keyframes float-badge-mid {
  0%, 100% { transform: rotate(-2.87deg) translateY(0); }
  50%       { transform: rotate(-2.87deg) translateY(-0.4rem); }
}

@keyframes float-badge-bot {
  0%, 100% { transform: rotate(8.57deg) translateY(0); }
  50%       { transform: rotate(8.57deg) translateY(-0.4rem); }
}

.solution__badge--top {
  top: clamp(0.3125rem, 0.521vw, 0.625rem);
  left: 70%;
  right: auto;
  background: var(--color-brand-yellow);
  border-radius: var(--radius-full);
  padding: clamp(0.1rem, 0.2vw, 0.275rem) var(--space-4) clamp(0.1rem, 0.2vw, 0.275rem) var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 6 s y no 2: tres insignias subiendo y bajando cada 2 s se leía agitado. */
  animation: float-badge-top 6s var(--ease-in-out) infinite;
}

.solution__badge__icon {
  /* 0.5rem = 2 × var(--space-1): compensa el padding top + bottom del badge */
  width: clamp(1.5rem, calc(1.912vw + 0.081rem), 2.375rem);
  height: clamp(1.5rem, calc(1.912vw + 0.081rem), 2.375rem);
  flex-shrink: 0;
  overflow: visible;
}

.solution__badge--top .solution__badge__icon { color: var(--color-brand-orange); }
.solution__badge--mid .solution__badge__icon { color: var(--color-brand-pink); }
.solution__badge--bot .solution__badge__icon { color: var(--color-brand-teal); }

.solution__badge__text {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.solution__badge__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}

@media (max-width: 48rem) {
  /* En mobile el nowrap obligaba al badge a desbordar el viewport en 320px.
     Se permite envolver; el max-width del badge decide cuándo hace falta. */
  .solution__badge__row {
    flex-wrap: wrap;
    white-space: normal;
  }
}

.solution__badge__row--en {
  display: none;
}

html[lang="en"] .solution__badge__row--en {
  display: flex;
}

html[lang="en"] .solution__badge__row:not(.solution__badge__row--en) {
  display: none;
}

.solution__badge__bold {
  font-family: var(--font-body);
  font-weight: 600;
  /* Pisos en px: a 1024 el root está en 13px y caían a 11.4 y 9.4px. */
  font-size: max(14px, clamp(0.75rem, calc(1.18vw + 0.177rem), 1.5625rem));
  color: var(--color-text);
}

.solution__badge__medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: max(12px, clamp(0.625rem, calc(0.972vw + 0.145rem), 1.3125rem));
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

/* Íconos de la insignia (reemplazan a los emojis de personas). */
.solution__badge__ico {
  display: inline-flex;
  font-size: 1.6em;
  margin-block: -0.3em;
}

.solution__badge--mid {
  bottom: -23%;
  right: 0%;
  background: var(--color-brand-pink);
  border-radius: var(--radius-full);
  padding: clamp(0.1rem, 0.2vw, 0.275rem) var(--space-4) clamp(0.1rem, 0.2vw, 0.275rem) var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: float-badge-mid 6.6s var(--ease-in-out) infinite -2s;
}

.solution__badge--bot {
  bottom: -35%;
  right: 22%;
  background: var(--color-brand-teal);
  border-radius: var(--radius-full);
  padding: clamp(0.1rem, 0.2vw, 0.275rem) var(--space-4) clamp(0.1rem, 0.2vw, 0.275rem) var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: float-badge-bot 7.2s var(--ease-in-out) infinite -4s;
}

/* Desktop: corrección de posición para --mid y --bot tras mover al nuevo containing block.
   Antes: posicionados relativo a .solution__right (~21.875rem alto con 6.25rem márgenes).
   Ahora: relativo a .solution__badges (inset:0 = tamaño del box completo ~40rem).
   Conversión: bottom_original_rem = (box_h - right_bottom - pct * right_h)
               → bottom_%_box = esa distancia / box_h */
@media (min-width: 48.0625rem) {
  .solution__badge--mid {
    bottom: 10.5%;
    right: 11.3%;
  }
  .solution__badge--bot {
    bottom: 4%;
    right: 21%;
  }
}

.value-props__line {
  position: absolute;
  top: 480px;
  left: 0;
  width: 520px;
  height: 900px;
  pointer-events: none;
  z-index: 0;
}


/* Value props section wrapper */
.value-props-section {
  position: relative;
  z-index: 0;
  background: rgba(241, 241, 241, 0.92);
  backdrop-filter: blur(2px);
  border-radius: clamp(0.6rem, 1.25vw, 1.5rem);
  padding: clamp(2.4rem, 5vw, 6rem);
  overflow: visible;
}

/* Carotas — caritas flotantes a los lados de la sección */
@keyframes float-face-left {
  0%, 100% { transform: translateX(-50%) rotate(-16.513deg) translateY(0); }
  33%       { transform: translateX(-50%) rotate(-13.5deg)  translateY(-0.75rem); }
  66%       { transform: translateX(-50%) rotate(-18.5deg)  translateY(-0.4rem); }
}

@keyframes float-face-right {
  0%, 100% { transform: translateX(50%) rotate(21.537deg) translateY(0); }
  33%       { transform: translateX(50%) rotate(24.5deg)  translateY(-0.75rem); }
  66%       { transform: translateX(50%) rotate(19.5deg)  translateY(-0.4rem); }
}

.value-props-face {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.value-props-face--left {
  /* Dentro del grid: left:0 + translateX(-50%) centra la cara en el borde izquierdo */
  left: -3%;
  top: 49%;
  width: clamp(3.8rem, 7.92vw, 9.5rem);
  z-index: -1;
  animation: float-face-left 4.3s ease-in-out infinite;
  animation-delay: -1.6s;
}

.value-props-face--right {
  /* Dentro del grid: right negativo extiende la cara más allá del borde derecho.
     clamp(-4rem, -3vw, -1rem): proporcional al viewport, sin JS, sin variables. */
  right: clamp(-4rem, -3vw, -1rem);
  left: auto;
  top: 10%;
  width: clamp(4.1rem, 8.54vw, 10.25rem);
  z-index: 2;
  animation: float-face-right 5.7s ease-in-out infinite;
  animation-delay: -3.1s;
}

@media (prefers-reduced-motion: reduce) {
  .value-props-face--left  { animation: none; transform: translateX(-50%) rotate(-16.513deg); }
  .value-props-face--right { animation: none; transform: translateX(50%)  rotate(21.537deg); }
}

/* Checks flotantes entre las tarjetas — diseño Figma (node 3101:27817): círculo 76.64px, ícono 44.86px */
.value-props-check {
  position: absolute;
  width: clamp(1.9rem, 3.95vw, 4.75rem);
  height: clamp(1.9rem, 3.95vw, 4.75rem);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.value-props-check__icon {
  width: clamp(1.12rem, 2.33vw, 2.8rem);
  height: clamp(1.12rem, 2.33vw, 2.8rem);
}

.value-props-check--1 {
  /* --vp-gap-1 = centro exacto del gap 1, medido via JS desde el left del grid */
  left: var(--vp-gap-1, 33%);
  top: 15.3%;
  transform: translateX(-50%);
}

.value-props-check--2 {
  left: var(--vp-gap-2, 67%);
  top: 15.3%;
  transform: translateX(-50%);
}

/* Value props */
.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 66rem;
  margin-inline: auto;
  gap: clamp(0.5rem, 1.04vw, 1.25rem);
  position: relative;
  z-index: 1;
  overflow: visible;
}

.solution__cta {
  grid-column: 1 / -1;
  margin-top: clamp(0.8rem, 1.67vw, 1rem);
  text-align: center;
  position: relative;
  z-index: 1;
}

.value-card {
  border-radius: clamp(0.6rem, 1.25vw, 1.5rem);
  padding: clamp(1.2rem, calc(3.892vw - 0.671rem), 4rem) clamp(1rem, calc(3.128vw - 0.503rem), 3.25rem) clamp(0.75rem, calc(2.085vw - 0.252rem), 2.25rem);
  color: #fff;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 367 / 366;
  border: clamp(3px, 0.469vw, 9px) solid transparent;
  /* Contexto de apilamiento propio: así la sombra del ::after (z-index -1)
     queda justo detrás de la card y no debajo del fondo de la sección. */
  isolation: isolate;
  transition: transform var(--motion-base) var(--ease-out-soft);
}

/* Sombra en un pseudo-elemento: se anima su opacidad, no el box-shadow. */
.value-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--elev-3);
  opacity: 0;
  transition: opacity var(--motion-base) ease;
  pointer-events: none;
}

@media (hover: hover) {
  .value-card:hover {
    transform: translateY(-0.375rem) rotate(-0.6deg);
  }

  .value-card:hover::after {
    opacity: 1;
  }
}

.value-card--pink   { background: var(--color-card-pink);   border-color: var(--color-card-pink-border);   --vp-check-color: var(--color-card-pink); }
.value-card--purple { background: var(--color-card-purple); border-color: var(--color-card-purple-border); --vp-check-color: var(--color-card-purple); }
.value-card--blue   { background: var(--color-card-blue);   border-color: var(--color-card-blue-border);   --vp-check-color: var(--color-card-blue); }

/* Check y caras dentro de la card — solo visibles en mobile (<769px) */
.value-card__check,
.value-card__face { display: none; }

.value-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, calc(0.695vw + 0.666rem), 1.5rem);
  font-weight: 700;
  line-height: 1.1;
}

.value-card p {
  font-size: clamp(0.8rem, calc(0.625vw + 0.5rem), 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  /* Blanco puro, no rgba(…, 0.92): esa transparencia restaba contraste sin
     aportar nada (3.47:1 en la rosa y 3.59:1 en la morada). */
  color: #fff;
}

.solution__cta {
  text-align: center;
  position: relative;
  z-index: 1;
}

/* El botón iguala al .hero__cta: los dos CTA principales del sitio deben
   leerse como el mismo botón. Antes medía 53px en desktop y 47px en mobile.
   Va ANTES del @media de abajo a propósito: misma especificidad, así que si
   fuera después ganaría por orden de aparición y pisaría el override mobile. */
.solution__cta .btn-lg {
  /* Más ancho: 18.4rem (294px) quedaba por debajo del CTA del hero (315px)
     pese a llevar el mismo texto. */
  width: 20.5rem;
  height: clamp(2.5rem, 1.75rem + 2vw, 4rem);
  min-height: 44px;
  /* Radio proporcional, no fijo. .btn-lg trae border-radius: 1.65625rem, que
     era exactamente la mitad de su altura original (3.3125rem) y por tanto una
     píldora perfecta. Al subir aquí la altura a 57-64px para igualar al hero,
     ese radio fijo se quedó en 0.41-0.47× del alto y el botón perdió la forma.
     --radius-full lo mantiene redondo sea cual sea la altura. */
  border-radius: var(--radius-full);
  font-size: max(15px, clamp(0.9375rem, 0.8rem + 0.4vw, 1.125rem));
  font-weight: 600;
}

@media (max-width: 48rem) {
  /* ── solution__bg-bottom ──
     Figma mobile: frame 440px, nodo "BG 3 2" en x=-13 con 1028×584.
     La imagen sangra a 2.34× el ancho del frame, así que solo se ve su 42%
     izquierdo. El <picture> pasa a ser la caja que recorta ese sobrante. */

  .solution__bg-bottom-pic {
    display: block;
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    aspect-ratio: 440 / 584;   /* alto del bg respecto al ancho del frame */
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .solution__bg-bottom {
    left: -2.9545%;            /* -13 / 440 */
    width: 233.6364%;          /* 1028 / 440 */
    max-width: none;           /* anula el max-width:100% global de img */
    height: 100%;
    object-position: left bottom;
  }

  /* ── solution__box ── */

  .solution > .container {
    padding-inline: 0;
  }

  .solution__box {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    gap: var(--space-12);
    margin-bottom: 0;
  }

  /* Título — Sour Gummy, line-height 1.0 */
  .solution__title {
    font-size: var(--fs-h2);
    line-height: 1;
    text-align: left;
    margin-right: 3.5rem;
  }


  .solution__deco-heart {
    left: auto;
    bottom: auto;
    top: clamp(-6rem, -12.5vw, -3rem); /* -96px @ 768px → proporcional */
    right: clamp(2.5rem, 12vw, 5rem);   /* 51.6px @ 430px — más a la izquierda */
    width: clamp(7rem, 24vw, 11rem);    /* 103px @ 430px — un poco más grande */
  }

  .solution__left {
    order: 1;
    margin-left: 0; 
    gap: 2rem;
  }

  .solution__right {
    margin: 0;
    order: 2;
  }

  .solution__deco-lines {
    display: block;
    width: clamp(8rem, 30vw, 12rem);        /* 129px @ 430px — un poco más grande */
    top: clamp(-7.5rem, -20vw, -4.5rem);    /* -90px @ 430px — sobre la esquina superior */
    right: clamp(-7rem, -18vw, -9rem);       /* -38.7px @ 430px — pasando el borde derecho */
  }

  .solution__player {
    aspect-ratio: 320 / 563;
  }

  /* Play button proporcional: vw empalma con el máx de desktop (8.9375rem) a 768px */
  .solution__play-btn {
    width: clamp(4.5rem, 18.6vw, 8.9375rem);  /* 80px @ 430px, 143px @ 768px */
    height: clamp(4.5rem, 18.6vw, 8.9375rem);
  }

  .solution__play-btn svg {
    width: clamp(2.25rem, 9.3vw, 4.375rem);   /* 40px @ 430px */
    height: clamp(2.25rem, 9.3vw, 4.375rem);
  }

  /* Badges: flotando sobre la juntura box / value-props */
  .solution__badges {
    position: absolute;
    inset: auto;
    bottom: 1rem;
    left: 0;
    right: 0;
    transform: translateY(50%);
    z-index: 10;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    /* Reducido de 9.42vw: dejaba solo 316px útiles en un viewport de 390 y el
       badge más largo ("Más organizada para el jardín infantil") necesita 378
       para caber en una línea. */
    padding-inline: clamp(0.25rem, 1.5vw, 1.5rem);
  }

  .solution__badge {
    /* Tope de ancho + permiso para envolver: el badge más largo ("Más
       organizada para el jardín infantil") medía 353px y se salía 17px en un
       viewport de 320. Con esto solo se parte en dos líneas cuando de verdad
       no cabe; de 360px en adelante sigue en una sola. */
    max-width: calc(100vw - 1.5rem);
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: fit-content;
    animation: none;
    /* --space-2 a la derecha en vez de --space-4: los 13px recuperados son la
       diferencia entre caber o no en una línea a 360px, el ancho de Android de
       gama media más común en Colombia (CLAUDE.md §10). */
    padding: 0.2rem var(--space-2) 0.2rem 0.2rem;
  }

  .solution__badge--top { z-index: 3; transform: rotate(1.37deg); top: 0.5rem; }
  .solution__badge--mid { z-index: 1; transform: rotate(-2.87deg); top: 1rem; }
  .solution__badge--bot { z-index: 2; transform: rotate(1.11deg); top: 1.5rem; }

  .solution__badge__bold,
  .solution__badge__medium {
    /* --fs-xl en vez de --fs-2xl: 15px en un 390 en lugar de 16px. Sigue por
       encima del piso legible de 14px y permite la línea única. */
    font-size: var(--fs-xl);
    line-height: 1;
  }

  .solution__badge__icon {
    width: clamp(1.75rem, 6vw, 3rem);   /* 25.8px @ 430px — un poco más grande */
    height: clamp(1.75rem, 6vw, 3rem);
  }

  .solution__box {
    padding-inline: clamp(2.5rem, 12.5vw, 6rem);
    padding-block: clamp(3.33rem, 16.67vw, 8rem); /* ⅓ más que el inline */
  }

  /* ── value-props ── */
  .value-props {
    grid-template-columns: 1fr;
    max-width: none;
    gap: var(--space-2);
  }

  .value-card:last-child {
    grid-column: auto;
  }

  /* Card — proporciones del diseño Figma (337×287, radius 22.04, border 8.26) */
  .value-card {
    /* Sin aspect-ratio fijo. El 337/287 forzaba la card a una proporción
       constante independientemente del texto: medido, quedaba entre un 54%
       (320px) y un 72% (428px) vacía, unos 170px desperdiciados por card.
       En mobile las tres van apiladas, así que no necesitan altura idéntica;
       el padding da el aire y el contenido manda. */
    aspect-ratio: auto;
    min-height: 0;
    justify-content: center;
    padding: clamp(1.5rem, 8vw, 4rem) clamp(1.25rem, 7vw, 3.5rem);
    border-width: clamp(4px, 1.92vw, 0.9rem);        /* 8.26px @ 430px */
    border-radius: clamp(0.75rem, 5.12vw, 2.5rem);   /* 22px @ 430px */
  }

  .value-card h3 {
    font-size: var(--fs-4xl);
    line-height: 0.9;
  }

  .value-card p {
    /* Piso de 14px: --fs-body es 1rem, que con el root en 13px daba
       exactamente 13. Mismo criterio que navbar, hero y Problema. */
    font-size: max(14px, var(--fs-body));
    line-height: 1.4;
  }

  /* CTA — proporciones Figma (289×52.04, radius 26.02); color #8768F5 = btn-primary */
  .solution__cta {
    margin-top: clamp(1.5rem, 15vw, 8rem); /* 25.8px @ 430px — más separación */
  }

  .solution__cta .btn-lg {
    /* mismo ancho relativo que el CTA del hero en mobile */
    width: clamp(16rem, 82vw, 33rem);
    /* misma fórmula que .hero__cta en mobile → 52px @ 390px */
    height: clamp(3.25rem, 13.3vw, 6.384rem);
    min-height: 44px;
    border-radius: var(--radius-full);
    font-size: max(16px, clamp(1rem, 4vw, 1.92rem));
    line-height: 1;
  }

  /* Check — círculo blanco, checkmark y borde del color de la card, esquina sup. der. */
  .value-card__check {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: clamp(-4.5rem, -8.5vw, -2rem);   /* -36.55px @ 430px — proporcional (min@768=-65px, max@320=-27px) */
    right: clamp(0.25rem, 7vw, 5.25rem);     /* 8.6px @ 430px — un poco más a la izquierda */
    width: clamp(3rem, 15vw, 7.2rem);  /* 64.5px @ 430px, 115px @ 768px — un poco más pequeño */
    height: clamp(3rem, 15vw, 7.2rem);
    border-radius: 50%;
    background: #fff;
    border: clamp(1.5px, 0.48vw, 3px) solid var(--vp-check-color); /* 2.07px @ 430px (Figma) */
    box-shadow: var(--shadow-md);
    z-index: 4;
  }

  .value-card__check::before {
    content: "";
    display: block;
    width: 55%;
    height: 55%;
    background-color: var(--vp-check-color);
    -webkit-mask: url("../assets/images/solution/check_icon.svg") center / contain no-repeat;
    mask: url("../assets/images/solution/check_icon.svg") center / contain no-repeat;
  }

  /* Caras — izquierda en esquina sup. izq. de la 1ra card, derecha en inf. der. de la última */
  .value-card__face {
    display: block;
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 3;
  }

  /* Flotación — mismo lenguaje que las carotas de desktop (float-face-left/right):
     balanceo suave de rotación + subida vertical, con duraciones y delays distintos
     para que las dos caras nunca vayan sincronizadas. */
  @keyframes float-face-card-left {
    0%, 100% { transform: rotate(21.54deg) translateY(0); }
    33%      { transform: rotate(24.5deg)  translateY(-0.75rem); }
    66%      { transform: rotate(19.5deg)  translateY(-0.4rem); }
  }

  @keyframes float-face-card-right {
    0%, 100% { transform: rotate(-16.51deg) translateY(0); }
    33%      { transform: rotate(-13.5deg)  translateY(-0.75rem); }
    66%      { transform: rotate(-18.5deg)  translateY(-0.4rem); }
  }

  .value-card__face--left {
    top: clamp(-3.5rem, -12vw, -1.75rem);   /* -51.6px @ 430px */
    left: clamp(-10rem, -20vw, -0.75rem);   /* -86px @ 430px — proporcional (min@768=-153.6px) */
    width: clamp(4.5rem, 28.4vw, 13.6rem);     /* 122.17px @ 430px (Figma) */
    transform: rotate(21.54deg);              /* Figma */
    animation: float-face-card-left 4.3s ease-in-out infinite;
    animation-delay: -1.6s;
  }

  .value-card__face--right {
    bottom: clamp(-10rem, -20vw, -1.75rem);   /* -86px @ 430px — proporcional (min@768=-153.6px) */
    right: clamp(-12.5rem, -25vw, -1.75rem);  /* -107.5px @ 430px — proporcional (min@768=-192px) */
    width: clamp(5rem, 33.54vw, 16.1rem);   /* 144.21px @ 430px (Figma) */
    transform: rotate(-16.51deg);            /* Figma */
    animation: float-face-card-right 5.7s ease-in-out infinite;
    animation-delay: -3.1s;
  }

  @media (prefers-reduced-motion: reduce) {
    .value-card__face--left  { animation: none; transform: rotate(21.54deg); }
    .value-card__face--right { animation: none; transform: rotate(-16.51deg); }
  }

  /* Caras y checks originales (desktop, hermanos del grid) ocultos en mobile */
  .value-props-face,
  .value-props-check {
    display: none;
  }

  .value-props-section {
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding-inline: clamp(2.5rem, 12.5vw, 6rem);
    padding-block: clamp(5.2rem, 26vw, 12.5rem); /* 112px @ 430px — más padding */
  }
}

/* ── css/features.css ────────────────────────────────── */
.features {
  position: relative;
  padding-bottom: clamp(11.2rem, 23.33vw, 28rem);
  background: var(--color-purple);
  overflow: hidden;
}

.features__bg-top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(12rem, 46vw, 44rem);
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Decos — garabatos diagonales en esquinas opuestas (nodes 3154:25981/25982) */
.features__deco-yellow {
  position: absolute;
  top: 25%;
  right: 8%;
  width: 5rem;
  height: auto;
  rotate: 256deg; /* individual property — compone con el animation sin sobreescribirse */
  pointer-events: none;
  z-index: 0;
  animation: float-slow 6s ease-in-out infinite;
}

.features__deco-celeste {
  position: absolute;
  bottom: 15%;
  right: 37%;
  width: 5rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
  animation: float-slow 5s ease-in-out infinite 1.5s; /* duración y delay distintos → desfase visual */
}

.features__animated-line {
  position: absolute;
  top: clamp(40rem, 20rem + 50vw, 68rem);
  right: clamp(-5.125rem, -23.44vw, -11.25rem);
  will-change: transform;
  transform: translateZ(0);
  width: clamp(17.5rem, 36.46vw, 38.75rem);
  height: clamp(28rem, 58.33vw, 70rem);
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  transform: rotate(115deg);
  transform-origin: top right;
}

@media (prefers-reduced-motion: reduce) {
  .features__animated-line path { animation: none; }
}

/* Mismo padding-inline que .solution > .container.
   max-width: 96rem garantiza el mismo body de 1136px a 1920px
   que teníamos con el container estándar (75rem + 32px padding). */
/* .features__inner {
  max-width: 96rem;
  padding-inline: clamp(5rem, 10.42vw, 12.5rem);
} */

.features__header {
  margin-bottom: var(--space-20);
}

.features__title {
  color: #fff;
  font-size: clamp(1.4rem, 0.5rem + 2.5vw, 5rem);
  font-weight: 500;
}

.features__title--accent {
  position: relative;
  display: inline-block;
  /* --color-brand-yellow: el mismo amarillo que el tag "Diario" y que el SVG
     del subrayado (underline_yellow.svg, fill #FFC10F). Antes el texto usaba
     --color-yellow (#FBBF24), un amarillo ligeramente distinto al de la línea.
     Decisión de marca consciente: sobre el morado del panel da 2.42:1, por
     debajo del 3:1 que WCAG pide para texto grande. Se asume el tradeoff a
     cambio de la coherencia cromática. Ver CLAUDE.md §5. */
  color: var(--color-brand-yellow);
  font-weight: 800;
}

/* El subrayado amarillo sobra con la etiqueta: la etiqueta ya es el acento. */
.features__title--accent:has(.text-sticker) .section-title__underline {
  display: none;
}

/* Anclado al texto, no a coordenadas. El ancho en vw estaba calibrado a ojo
   contra el largo de "Sin líos.": medido, el trazo caía 108px fuera en mobile.
   Con width: 100% del propio <span> y separación en `em` queda centrado solo,
   y la misma regla sirve en ambos tamaños. Tercer y último subrayado con este
   problema, tras Problema y Solución. */
.features__title--accent .section-title__underline {
  left: 50%;
  bottom: -0.12em;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  max-width: none;
}

/* ── Layout ── */
.features__body {
  display: grid;
  grid-template-columns: 1fr; /* tabs y phone son absolute; solo panel en flujo */
  align-items: center;
  position: relative;
}

/* Resplandor lila centrado en el teléfono (right: -20rem centra el glow en el phone) */
.features__body::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -15rem;
  transform: translateY(-50%);
  width: 55.9375rem;
  height: 46.8125rem;
  border-radius: 55.9375rem;
  background: radial-gradient(50% 50% at 50% 50%, var(--color-brand-lila) 29.81%, rgba(195, 178, 255, 0.00) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Tabs — flotan sobre el borde izq. del panel ── */
.features__tabs {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* ancho proporcional — 19rem a 1920px, 10rem a 769px */
  width: clamp(10rem, 15.83vw, 19rem);
  align-items: flex-end;
}

.features__tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) clamp(var(--space-3), 2.5vw, var(--space-10)) var(--space-2) var(--space-2);
  border-radius: var(--radius-full);
  border: none;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  /* Piso táctil: a 1024px medían 39px de alto. */
  min-height: 44px;
  transform-origin: right center;
  transition:
    transform var(--motion-base) var(--ease-spring),
    opacity var(--motion-fast) ease;
}

/* Las inactivas se corren un poco hacia el panel; la activa se adelanta y
   gana sombra. El movimiento es transform: no empuja a las vecinas. */
.features__tab:not(.active) {
  opacity: 0.92;
}

/* La activa avanza hacia el panel (a la derecha), no hacia afuera: la
   columna de pestañas está pegada al borde de la pantalla en los anchos
   medianos y cualquier desplazamiento a la izquierda la recortaba. */
.features__tab.active {
  transform: translateX(0.5rem) scale(1.04);
  box-shadow: var(--elev-2);
}

@media (hover: hover) {
  .features__tab:not(.active):hover {
    opacity: 1;
    transform: translateX(0.25rem);
  }
}


.features__tab:active {
  transform: scale(0.97);
  transition-duration: var(--motion-press);
}

/* El ícono de la pestaña que se activa hace un pop corto. */
@keyframes tab-icon-pop {
  0%   { scale: 0.6; rotate: -12deg; }
  60%  { scale: 1.12; rotate: 6deg; }
  100% { scale: 1; rotate: 0deg; }
}

.features__tab.active .features__tab-icon-img {
  animation: tab-icon-pop var(--motion-reveal) var(--ease-spring);
}

.features__tab-icon-wrap {
  width: clamp(1.2rem, 2.5vw, 3rem);
  height: clamp(1.2rem, 2.5vw, 3rem);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.features__tab-icon-img {
  width: clamp(1.2rem, 2.5vw, 3rem);
  height: clamp(1.2rem, 2.5vw, 3rem);
  object-fit: contain;
}

/* Inactivo muestra label corto; activo muestra label largo */
.features__tab-label--full  { display: none; }
.features__tab.active .features__tab-label--full  { display: inline; }
.features__tab.active .features__tab-label--short { display: none; }

/* Todos los tabs siempre tienen fondo de su color */
.features__tab--calendar { background: var(--color-tab-calendar); color: var(--color-text); }
.features__tab--diary    { background: var(--color-tab-diary);    color: var(--color-text); }
/* Texto oscuro, no blanco: sobre naranja daba 2.61:1, sobre verde 2.00:1 y
   sobre rosa 2.97:1, todos por debajo del 4.5:1 de AA. Con --color-text suben
   a 6.53, 8.54 y 5.75 sin tocar los colores de marca, y además quedan
   coherentes con los otros tres tabs, que ya lo usaban. Mismo criterio que
   las píldoras del marquee. */
.features__tab--chat     { background: var(--color-tab-chat);     color: var(--color-text); }
.features__tab--gallery  { background: var(--color-tab-gallery);  color: var(--color-text); }
.features__tab--info     { background: var(--color-tab-info);     color: var(--color-text); }
.features__tab--obs      { background: var(--color-tab-obs);      color: var(--color-text); }

/* ── Panel wrap ── */
/* margin-inline proporcional: 16rem a 1920px → 9rem a 769px */
/* padding lateral proporcional: 5rem a 1920px → 2rem a 768px */
.features__panel-wrap {
  position: relative;
  z-index: 1;
  margin-right: clamp(9rem, 16vw, 20rem);
  margin-left: clamp(9rem, 13vw, 17rem);
  padding: var(--space-8) clamp(2rem, 4.17vw, 5rem);
  border-radius: var(--radius-xl);
  transition: background var(--transition-base);
}



/* Sombra diagonal de "piso" — independiente del tab activo */
.features__panel-wrap::after {
  content: '';
  position: absolute;
  right: -3%;
  bottom: -5rem;
  width: 125%;
  height: 6rem;
  background: radial-gradient(ellipse at 80% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);
  transform: skewX(-22deg);
  transform-origin: right center;
  pointer-events: none;
  z-index: -1;
}

.features__panel-wrap--calendar { background: var(--color-tab-calendar); --tab-color: var(--color-tab-calendar); }
.features__panel-wrap--diary    { background: var(--color-tab-diary);    --tab-color: var(--color-tab-diary); }
.features__panel-wrap--chat     { background: var(--color-tab-chat);     --tab-color: var(--color-tab-chat); }
.features__panel-wrap--gallery  { background: var(--color-tab-gallery);  --tab-color: var(--color-tab-gallery); }
.features__panel-wrap--info     { background: var(--color-tab-info);     --tab-color: var(--color-tab-info); }
.features__panel-wrap--obs      { background: var(--color-tab-obs);      --tab-color: var(--color-tab-obs); }

/* ── Panels wrapper ── */
.features__panels {
  display: grid; /* permite apilar todos los paneles en la misma celda */
}

/* ── Individual panels — todos en la misma celda, altura fija = el más alto ── */
.features__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

.features__panel.active {
  visibility: visible;
  pointer-events: auto;
}

/* ── White cards ── */
.features__card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}

.features__card--top {
  flex-shrink: 0;
}

.features__card--bottom {
  flex: 1;
}

.features__card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.features__card-lead {
  color: var(--color-text);
  font-size: max(14px, var(--fs-body));
  margin-bottom: var(--space-3);
}

.features__card p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ── Checklist ── */
.features__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.features__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: max(14px, var(--fs-sm));
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.features__list li::before {
  content: '';
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--tab-color, var(--color-purple));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: 55% 50%;
}

/* ── Phone — flota sobre el borde der. del panel, espejo de los tabs ── */
.features__phone {
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  /* GSAP autoAlpha lo anima; garantizamos que sea visible si JS no carga */
  visibility: visible;
}


/* .features__phone::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1rem;
  transform: translateX(-50%);
  width: 75%;
  height: 2rem;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
  z-index: -1;
} */

/* Phone proporcional: 22.8rem a 1920px → 10rem a 769px */
.features__phone-img {
  display: none;
  width: clamp(10rem, 19vw, 22.8rem);
  height: auto;
}

.features__phone-img.active {
  display: block;
}

.features__cta {
  position: absolute;
  right: 30%;
  bottom: -5rem;
  /* El ancho de diseño es un mínimo: con el piso de 14px el texto ya no cabía
     en 19.17vw dentro de la banda muerta (173px a 900) y se salía del botón. */
  width: max-content;
  min-width: clamp(9.2rem, 19.17vw, 23rem);
  text-align: center;
  z-index: 3;
}

/* ── Scroll stepper: wrapper alto + sticky nativo (sin GSAP pin, sin layout shift) ──
   El offset sticky lo define el `top: -8rem` de .features (abajo); animations.js lo
   LEE en runtime, no lo duplica. No hay número mágico que mantener sincronizado. */
.features-scroll-track {
  position: relative;
  background: var(--color-purple); /* elimina espacio blanco durante el scroll stepper */
}

/* Scroll stepper activo: ancho ≥ 1024px Y alto ≤ 1100px.
   Fuera de este rango (pantalla muy alta o muy estrecha) la sección
   scrollea normal y los tabs funcionan solo con click. */
@media (min-width: 64rem) and (max-height: 68.75rem) {
  .features {
    position: sticky;
    top: -8rem; /* fuente de verdad del offset sticky; animations.js lo lee con getComputedStyle */
  }

  /* El body crece proporcionalmente con el viewport (70vh) hasta un cap razonable
     para que la sección llene el viewport cuando está sticky en este rango. */
  .features__body {
    min-height: min(70vh, 900px);
  }
}

/* ── Responsive ── */

/* Mobile: tab activo muestra label corto para evitar overflow en pantallas pequeñas */
@media (max-width: 48rem) {
  /* clip ≠ hidden: recorta igual pero no crea scroll container, así el
     position:sticky de .features__mobile-carousel sigue funcionando. */
  .features {
    overflow: clip;
  }

  .features__inner {
    padding: 0;
  }

  .features__header {
    padding-inline: clamp(2.5rem, 12.5vw, 6rem);
    padding-top: clamp(2.5rem, 12.5vw, 6rem);
  }

  .features__title {
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1;
    text-align: left;
  }

  .features__title--accent {
    font-weight: 700;
    /* inline-block con width: fit-content, no block. Con `block` la caja
       ocupaba los 293px de la columna mientras el texto medía 119px, y el
       subrayado (width: 100%) copiaba la caja: quedaba 87px descentrado.
       El salto de línea se conserva con el margen superior del bloque. */
    display: inline-block;
    width: fit-content;
  }

  .features__animated-line,
  .features__deco-celeste,
  .features__deco-yellow {
    display: none;
  }

  .features__tab.active .features__tab-label--full  { display: none; }
  .features__tab.active .features__tab-label--short { display: inline; }

  .features {
    padding-bottom: clamp(10rem, 41.67vw, 20rem); /* 20rem @ 768px → 41.67vw; mín 10rem @ 320px */
  }

  .features__bg-top {
    height: clamp(12rem, 100vw, 50rem);
  }

  /* ── Mobile carousel (generado por JS) ──
     Las tarjetas se ven deslizando en horizontal; el scroll vertical pasa
     derecho. Antes el scroll vertical se secuestraba para moverlas de lado
     (pin alto + carrusel sticky) y los usuarios lo reportaron como confuso.
     El wrapper se queda solo como contenedor: ya no lleva alto ni sticky. */
  .features__mobile-pin {
    position: relative;
    margin-bottom: var(--space-12);
  }

  /* Puntos de paginación — mismo patrón visual que .problem__dots.
     Sin el scroll-jack nada indicaba que hay seis tarjetas: el peek del
     siguiente card insinúa que hay más, pero no cuántas ni por dónde vas. */
  .features__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Sin gap: el paso entre puntos lo fija el ancho del botón. Con 44px + gap
       los seis puntos medían 303px de 390 —casi de borde a borde—, y una fila
       así de estirada se lee como una barra, no como un indicador centrado. */
    gap: 0;
    margin-top: clamp(1rem, 4vw, 2rem);
  }

  /* El punto se ve pequeño, pero el botón mantiene los 44px de objetivo táctil
     con padding transparente. */
  .features__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    /* El alto mantiene los 44px de la casa; el ancho baja para juntar los
       puntos. Los objetivos quedan pegados pero sin solaparse, y siguen muy por
       encima del mínimo de WCAG 2.5.8 (24x24). */
    width: clamp(32px, 9vw, 40px);
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .features__dot::before {
    content: '';
    display: block;
    width: clamp(0.5rem, 2.1vw, 0.75rem);
    height: clamp(0.5rem, 2.1vw, 0.75rem);
    border-radius: var(--radius-full);
    /* Blanco y no los tokens de .problem__dots: allí los puntos van sobre fondo
       claro, acá sobre el morado de la sección. Con --color-purple el punto
       activo daba 1:1 contra el fondo — invisible. Blanco da 3,94:1, que es lo
       que WCAG 1.4.11 pide para un indicador. */
    background: rgba(255, 255, 255, 0.45);
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  /* El tamaño acompaña al color: quien no distinga bien los tonos igual ve
     cuál está activo. */
  .features__dot[aria-selected="true"]::before {
    background: #fff;
    transform: scale(1.35);
  }

  .features__dot:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -8px;
    border-radius: var(--radius-full);
  }

  .features__mobile-viewport {
    overflow-x: clip;     /* clip horizontal para el peek, sin bloquear overflow vertical */
    overflow-y: visible;  /* el teléfono sobresale por arriba del slide */
    padding-top: clamp(7rem, 26vw, 13rem); /* espacio para el teléfono sobre el slide */
    touch-action: pan-y;  /* lo sobrescribe --native a pan-x pan-y */
    /* iOS: el long-press sobre las imágenes del teléfono abría el menú de
       "copiar imagen" a mitad del arrastre y cortaba el gesto. */
    -webkit-touch-callout: none;
  }

  /* Scroller horizontal nativo — el único modo desde que se retiró el
     scroll-jack. overflow-x:auto vuelve scrollable también el eje Y, así que el
     teléfono tiene que caber dentro del padding-top: de ahí el tope más alto. */
  .features__mobile-viewport--native {
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: clamp(7.5rem, 34vw, 18rem);
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    /* Cada swipe encaja en un slide; sin esto (p. ej. iOS Safari sin soporte de
       scroll-driven animations, que cae a este modo) el gesto quedaba a medio
       camino y mostraba el slide corrido/cortado. */
    scroll-snap-type: x mandatory;
  }

  .features__mobile-viewport--native::-webkit-scrollbar {
    display: none;
  }

  /* Durante el arrastre no debe seleccionarse el texto de los cards */
  .features__mobile-viewport.is-dragging {
    user-select: none;
    -webkit-user-select: none;
  }

  .features__mobile-track {
    --peek: clamp(2rem, 8vw, 4rem); /* ~34px @ 430px → slide ~362px; ~61px @ 768px → slide ~646px */
    --card-gap: 0.75rem;
    display: flex;
    gap: var(--card-gap);
    /* Solo al inicio: ni el padding-inline-end ni un margen en el último hijo
       generan área desplazable —el scroll termina en el borde del último
       elemento—, así que la última tarjeta quedaba pegada al borde derecho
       mientras la primera sí respiraba. El aire del final lo da el espaciador
       de abajo, que es una caja real y sí cuenta para el scrollWidth. */
    padding-inline-start: var(--peek);
  }

  /* Espaciador final: replica el hueco de --peek del inicio. Se le resta el gap
     porque flex ya inserta uno entre la última tarjeta y este pseudo-elemento. */
  .features__mobile-track::after {
    content: '';
    flex: 0 0 calc(var(--peek) - var(--card-gap));
  }

  .features__mobile-slide {
    flex: 0 0 calc(100vw - 2 * var(--peek));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0; /* el teléfono flota sobre el slide — sin padding superior */
    padding: clamp(1.5rem, 6vw, 3rem); /* ~28px @ 430px = Figma Left 78.5-50.5 */
    border-radius: 1.5rem;
    overflow: visible; /* permite que el teléfono sobresalga por arriba */
    scroll-snap-align: center;
  }

  .features__mobile-slide--calendar { background: var(--color-tab-calendar); --tab-color: var(--color-tab-calendar); }
  .features__mobile-slide--diary    { background: var(--color-tab-diary);    --tab-color: var(--color-tab-diary); }
  .features__mobile-slide--chat     { background: var(--color-tab-chat);     --tab-color: var(--color-tab-chat); }
  .features__mobile-slide--gallery  { background: var(--color-tab-gallery);  --tab-color: var(--color-tab-gallery); }
  .features__mobile-slide--info     { background: var(--color-tab-info);     --tab-color: var(--color-tab-info); }
  .features__mobile-slide--obs      { background: var(--color-tab-obs);      --tab-color: var(--color-tab-obs); }

  /* Teléfono: sobresale por encima del slide y solapa el card blanco */
  .features__mobile-slide picture {
    display: block;
    width: 75%;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * clamp(7rem, 32vw, 17rem)); /* sube el teléfono fuera del slide */
    margin-bottom: clamp(-11rem, -20vw, -4rem); /* -176px @ 768px → escala proporcionalmente */
    flex-shrink: 0;
  }

  .features__mobile-slide picture img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-drag: none;  /* el arrastre mueve el carrusel, no la imagen */
    opacity: 0;
    transition: opacity var(--transition-slow);
  }

  .features__mobile-slide picture img.is-loaded {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .features__mobile-slide picture img {
      transition: none;
    }
  }

  /* Card blanco con contenido — proporción Figma 294×344px @ frame 449px.
     min-height y no height: el alto del card escalaba con vw, pero el texto
     tiene piso de 14px y deja de encoger por debajo de 624px, donde además el
     card es más angosto y el checklist envuelve más líneas. Las dos curvas se
     cruzaban y el contenido se recortaba: 66px perdidos de 170px útiles a
     320px. Con min-height el card crece lo que haga falta y el recorte deja de
     ser posible en cualquier pantalla.
     flex: el slide es un flex column y el track estira todos los slides al más
     alto; sin esto el card corto dejaba ver el fondo de color por debajo. */
  .features__mobile-content {
    background: #fff;
    border-radius: var(--radius-2xl); /* 24px Figma */
    padding: clamp(3.5rem, 22vw, 11rem) clamp(1.25rem, 6vw, 3rem) clamp(1.5rem, 6vw, 2.5rem);
    width: 100%;
    min-height: clamp(20rem, 76.6vw, 36.75rem); /* 344/449×100vw → ~329px @ 430px, ~587px @ 768px */
    flex: 1 0 auto;
    margin-top: clamp(1rem, 4.5vw, 2.25rem); /* espacio entre phone image y card — Top: 410px Figma */
    position: relative;
    z-index: 1;
  }

  /* Lead y body no van en mobile — solo título + checklist */
  .features__mobile-content .features__card-lead,
  .features__mobile-content .features__card--top p:not(.features__card-lead) {
    display: none;
  }

  .features__mobile-content .features__card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Título: Sour Gummy 700 — Figma features.cal_title */
  /* Piso de 14px en el texto clonado al carrusel. Los clones pierden las
   clases del panel original, así que hay que alcanzarlos por descendencia;
   medido, caían a 11px con el root en 13. */
.features__mobile-content .features__card-lead,
.features__mobile-content p,
.features__mobile-content strong {
  font-size: max(14px, var(--fs-body));
}

.features__mobile-content .features__card h3 {
    font-family: var(--font-display);
    font-size: max(14px, var(--fs-h3));
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
  }

  /* Items del checklist: Poppins SemiBold — Figma features__list */
  .features__mobile-content .features__list {
    gap: clamp(0.5rem, 1.56vw, 0.75rem);
  }

  .features__mobile-content .features__list li {
    font-family: var(--font-body);
    font-size: max(14px, var(--fs-sm));
    gap: clamp(0.5rem, 2.08vw, 1rem);
    font-weight: 600;
    /* 1.25 y no 1: casi todos los items envuelven a dos líneas en pantallas
       angostas, y con 1 las dos líneas se tocaban. */
    line-height: 1.25;
  }

  .features__mobile-content .features__card--top {
    padding-bottom: clamp(0.75rem, 3vw, 1.25rem);
  }

  .features__mobile-content .features__card--bottom {
    padding-top: clamp(0.75rem, 3vw, 1.25rem);
  }

  /* CTA debajo del carousel — fuera del pin, aparece al terminar el recorrido.
     position:relative (no static) para que el z-index:3 heredado de
     .features__cta surta efecto: la ola .features__bg-top es absolute y, sin
     esto, se pinta por encima del CTA y lo oculta. */
  .features__cta--mobile {
    position: relative;
    inset: auto;              /* anula right:30% / bottom:-5rem de la regla base */
    z-index: 3;
    text-align: center;
    width: 100%;
  }

  /* Botón del CTA — mismas proporciones que .solution__cta .btn-lg en mobile */
  .features__cta--mobile .btn {
    width: clamp(15rem, 67.2vw, 33rem);           /* 289px @ 430px */
    height: clamp(2.75rem, 12.1vw, 6rem);         /* 52px @ 430px */
    border-radius: clamp(1.375rem, 6.05vw, 3rem); /* 26px @ 430px */
    font-size: var(--fs-body);
    line-height: 1;
  }
}

/* mobile — ajustes de densidad para pantallas muy pequeñas */
@media (max-width: 480px) {
  .features__tab {
    /* Piso de 14px: --fs-xs daba 10px con el root en 13, y estos son los
       rótulos de navegación de la sección más larga de la página. */
    font-size: max(14px, var(--fs-xs));
    padding: var(--space-2) var(--space-3);
  }

  .features__tab.active {
    padding-right: var(--space-4);
  }

  .features__card {
    padding: var(--space-6);
  }
}

/* ── Pisos de legibilidad ──────────────────────────────────────────────────
   Con el root en 13px, --fs-sm y --fs-body caen a 11px. Estos selectores
   alcanzan los nodos que no llevan clase propia (el <strong> del lead y el
   <p> suelto de cada tarjeta) y el CTA de la seccion, que estaba en 11px. */
.features__card-lead,
.features__card-lead strong,
.features__card p,
.features__card p strong {
  font-size: max(14px, var(--fs-body));
}

.features__cta .btn {
  min-height: 44px;
  font-size: max(14px, var(--fs-sm));
}

/* Región desplazable del carrusel móvil: enfocable con teclado. */
.features__mobile-viewport--native:focus-visible {
  outline: var(--focus-ring-width) solid #fff;
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* ── Banda muerta (769–1279px): pestañas que se expanden ──────────────────
   La columna de pestañas mide 130–160px y está pegada al borde de la
   pantalla. Ya en main la activa ("Calendario Inteligente") se salía 31–76px
   por la izquierda, y en 800px también "Observador". Acá las inactivas pasan
   a ser solo el ícono en un círculo de 44px y la activa se expande con su
   rótulo corto (patrón "expanding tabs"). El rótulo de las inactivas no
   desaparece: queda oculto a la vista pero disponible para los lectores, así
   cada pestaña conserva su nombre accesible.
   max-width a propósito: es un cambio estructural acotado a ese rango
   (CLAUDE.md §3). Va al final del archivo para ganar en la cascada. */
@media (min-width: 48.0625rem) and (max-width: 79.9375rem) {
  .features__tab:not(.active) {
    justify-content: center;
    gap: 0;
    min-width: 44px;
    padding: var(--space-1);
  }

  .features__tab:not(.active) .features__tab-label--short {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .features__tab.active .features__tab-label--full  { display: none; }
  .features__tab.active .features__tab-label--short { display: inline; }
}