/* ============================================================================
   Alio · Sección 3 — La franja lateral
   ----------------------------------------------------------------------------
   Repaso rápido del resto de la app. Deliberadamente SIN interfaz: después de
   dos secciones mirando el teléfono, repetir pantallas cansa. Aquí manda la
   tipografía grande y una lámina abstracta por panel.

   En pantalla ancha la sección se ancla y el carril se desplaza de lado con el
   scroll: seis o siete funciones en el coste vertical de dos pantallas, y con
   un cambio de eje que rompe la monotonía después del vuelo y del corrimiento.
   En pantalla estrecha no se secuestra nada: pasa a ser un carrusel que se
   desliza con el dedo, con anclaje por tarjeta.
   ========================================================================== */

.strip {
  position: relative;
  background: var(--p-bg);
  color: var(--p-text);
  --strip-x: 0px;
}

.strip__stage {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.5vh, 40px);
  padding: clamp(56px, 9vh, 104px) 0 clamp(40px, 6vh, 72px);
}

.strip.is-pinned .strip__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  justify-content: center;
}

/* --- Cabecera ------------------------------------------------------------- */

.strip__head {
  flex: none;
  padding: 0 var(--gutter);
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
}

.strip__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--p-sub);
}

.strip__title {
  margin-top: var(--sp-12);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--p-text);
  text-wrap: balance;
}

/* --- Carril --------------------------------------------------------------- */

.strip__viewport {
  flex: none;
  overflow: hidden;
}

.strip__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  width: max-content;
  padding: 0 var(--gutter);
  transform: translateX(var(--strip-x));
}

/* Sin anclaje (móvil): el dedo manda */
.strip:not(.is-pinned) .strip__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.strip:not(.is-pinned) .strip__viewport::-webkit-scrollbar {
  display: none;
}

.strip:not(.is-pinned) .strip__track {
  transform: none;
}

.strip:not(.is-pinned) .feat {
  scroll-snap-align: center;
}

/* --- Panel ---------------------------------------------------------------- */

.feat {
  flex: none;
  position: relative;
  width: clamp(258px, 24vw, 348px);
  height: clamp(330px, 56vh, 500px);
  padding: clamp(20px, 2.4vh, 30px);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(155deg, var(--a) 0%, var(--b) 100%);
  color: var(--ink);
  /* Sobre papel la sombra tiene que ser mucho más ligera: la de antes estaba
     calculada para un lienzo oscuro y aquí ensuciaba la superficie. */
  box-shadow: 0 18px 44px rgba(23, 28, 34, 0.16);
}

/* Un velo muy sutil en la esquina para que el degradado no se lea plano */
.feat::after {
  content: "";
  position: absolute;
  right: -20%;
  top: -30%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--veil), transparent 68%);
  pointer-events: none;
}

.feat__art {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.feat__art svg {
  width: 62%;
  max-width: 180px;
  height: auto;
  color: var(--ink);
}

.feat__body {
  flex: none;
  position: relative;
  z-index: 1;
}

/* El texto secundario NO usa `opacity`: cada tono declara su propio
   `--ink-soft`. Bajar la opacidad sobre un degradado deja el contraste al
   azar, y así medido, la tarjeta coral se quedaba en 3,9:1 — por debajo de AA
   justo donde va la explicación. */
.feat__kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.feat__title {
  margin-top: 10px;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.feat__text {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Paletas ---------------------------------------------------------------
   ESTO es para lo que existe la gama expresiva: piezas de comunicación
   variadas sin salirse del sistema. Cada tarjeta toma un expresivo o uno de
   los cinco degradados, y alternan frío/cálido y oscuro/claro para que el
   carril no se lea monótono.

   Dos reglas que no son estéticas:

   1. El texto vive SIEMPRE al pie de la tarjeta, así que el degradado se
      orienta para que el pie caiga en el extremo con el que la tinta contrasta.
      Por eso Acero, Marea baja, Aleación y Crepúsculo van invertidos respecto
      a su definición: terminan en pizarra, no empiezan.
   2. `--ink-soft` es un color propio, no una opacidad. Bajar la opacidad sobre
      un degradado deja el contraste al azar. Cada par va medido y anotado.
   ------------------------------------------------------------------------ */

/* 1 · Metas — Acero invertido (peltre → pizarra) */
.feat[data-tone="1"] {
  --a: #96a2ad;
  --b: #2f3e4e;
  --ink: #ffffff; /* 10,9:1 */
  --ink-soft: #c2d2e0; /* 7,1:1 */
  --art: #f6f7f8;
  --veil: rgba(255, 255, 255, 0.16);
}

/* 2 · Presupuestos — Lino */
.feat[data-tone="2"] {
  --a: #eeeae1;
  --b: #ded7c8;
  --ink: #171c22; /* 12,4:1 */
  --ink-soft: #4a5763; /* 5,3:1 */
  --art: #2f3e4e;
  --veil: rgba(255, 255, 255, 0.4);
}

/* 3 · Calculadora — Marea baja invertida (eucalipto → pizarra) */
.feat[data-tone="3"] {
  --a: #6f8c88;
  --b: #2f3e4e;
  --ink: #ffffff; /* 10,9:1 */
  --ink-soft: #c9d6d3; /* 7,9:1 */
  --art: #e6e0d4;
  --veil: rgba(255, 255, 255, 0.16);
}

/* 4 · Patrimonio — Arena tostada */
.feat[data-tone="4"] {
  --a: #d3c3ab;
  --b: #bda98c;
  --ink: #171c22; /* 7,6:1 */
  --ink-soft: #1e2a36; /* 6,2:1 */
  --art: #2f3e4e;
  --veil: rgba(255, 255, 255, 0.32);
}

/* 5 · Alio AI — Aleación invertida. Es la firma del sistema y le toca a la
   función insignia; el latón se queda arriba, lejos del texto. */
.feat[data-tone="5"] {
  --a: #d4b269;
  --b: #1e2a36;
  --ink: #ffffff; /* 15,3:1 */
  --ink-soft: #c2d2e0; /* 9,9:1 */
  --art: #f6f7f8;
  --veil: rgba(255, 255, 255, 0.14);
}

/* 6 · Familia — Peltre */
.feat[data-tone="6"] {
  --a: #a9b3bd;
  --b: #8e9ba7;
  --ink: #171c22; /* 6,2:1 */
  --ink-soft: #1e2a36; /* 5,2:1 */
  --art: #2f3e4e;
  --veil: rgba(255, 255, 255, 0.28);
}

/* 7 · Sin conexión — Crepúsculo invertido (latón → profundo) */
.feat[data-tone="7"] {
  --a: #a9803a;
  --b: #1e2a36;
  --ink: #ffffff; /* 15,3:1 */
  --ink-soft: #c2d2e0; /* 9,9:1 */
  --art: #d4b269;
  --veil: rgba(255, 255, 255, 0.14);
}

/* --- Progreso ------------------------------------------------------------- */

.strip__progress {
  flex: none;
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.strip__progress span {
  display: block;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(23, 28, 34, 0.14);
  overflow: hidden;
}

.strip__progress span::before {
  content: "";
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--p-slate);
  transform: scaleX(var(--strip-p, 0.04));
  transform-origin: left center;
}

/* En móvil el propio deslizamiento ya informa; sobra la barra, hace falta
   decir el gesto (un carrusel que nadie anuncia no se descubre). */
.strip:not(.is-pinned) .strip__progress {
  display: none;
}

.strip__swipe {
  display: none;
  padding: 0 var(--gutter);
  font-size: var(--text-sm);
  color: var(--p-sub);
}

.strip:not(.is-pinned) .strip__swipe {
  display: block;
}

@media (max-width: 900px) {
  .feat {
    width: min(300px, 78vw);
    height: clamp(340px, 62vh, 460px);
  }
}