/* ═══════════════════════════════════════════════════════════════════
   SMARTECNIA · Páginas de caso de éxito (/casos/*)
   Se carga DESPUÉS de styles.css y solo usa sus tokens (colores,
   espaciado, tipografía). Todo lleva prefijo .cs- para no chocar con
   el resto del sitio. Una plantilla, muchos casos: cada caso nuevo
   copia el HTML y reutiliza estas mismas piezas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Encabezados de sección ───────────────────────────────────── */
.cs-head { max-width: 760px; }
.cs-head .lead { margin-top: var(--space-4); }
.cs-head--center { margin-inline: auto; text-align: center; }
.cs-head--center .kicker { justify-content: center; }
.cs-head--center .lead { margin-inline: auto; max-width: 60ch; }
.section--navy .cs-head .h-lead { color: #fff; }
.section--navy .cs-head .lead { color: rgba(255,255,255,0.76); }

/* Salto de línea solo en escritorio: en el teléfono el texto se acomoda
   solo. Ojo al escribirlo: va SIEMPRE con un espacio antes
   ("web. <br class="cs-br">Le"), porque al ocultarse no deja espacio. */
.cs-br { display: none; }
@media (min-width: 900px) { .cs-br { display: inline; } }

/* En el teléfono el .h-lead del sitio (39 px fijos) deja titulares de
   cinco líneas y palabras largas que se salen del ancho: aquí escala. */
@media (max-width: 620px) {
  .cs-head .h-lead { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .cs-head .lead { font-size: var(--text-base); }
}

.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--azul);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: color 180ms var(--ease-out);
}
.cs-link:hover { color: var(--azul-hover); }

.cs-by {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-mute);
}
.cs-by a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1.5px solid var(--azul);
  transition: color 180ms var(--ease-out);
}
.cs-by a:hover { color: var(--azul); }

/* ── 1 · Hero ─────────────────────────────────────────────────── */
.cs-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding-block: calc(var(--nav-h) + var(--space-6)) var(--space-8);
  background:
    radial-gradient(70% 80% at 12% 0%, rgba(40,122,237,0.34), transparent 60%),
    radial-gradient(50% 60% at 95% 85%, rgba(40,122,237,0.18), transparent 65%),
    linear-gradient(165deg, #101f38 0%, var(--navy) 70%);
}

.cs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-7);
}
.cs-crumbs a { color: rgba(255,255,255,0.82); transition: color 180ms var(--ease-out); }
.cs-crumbs a:hover { color: #fff; }
.cs-crumbs [aria-current] { color: #fff; font-weight: 600; }

.cs-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-8);
  align-items: center;
}
.cs-hero__kicker { color: rgba(255,255,255,0.66); }
.cs-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.06;
  color: #fff;
}
.cs-hero__lead {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
}
.cs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.cs-hero__media { display: flex; justify-content: center; }
.cs-hero__media img {
  width: min(100%, 400px);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4));
  animation: csFloat 7s var(--ease-soft) infinite;
}
@keyframes csFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.6deg); }
}

/* Ficha del caso: vidrio sobre el navy */
.cs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  gap: 0;
  margin-top: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cs-facts__item { padding: var(--space-5); min-width: 0; }
.cs-facts__item + .cs-facts__item { border-inline-start: 1px solid rgba(255,255,255,0.10); }
.cs-facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-2);
}
.cs-facts dd { font-weight: 600; color: #fff; font-size: var(--text-sm); }
.cs-facts dd a { border-bottom: 1.5px solid rgba(255,255,255,0.4); transition: border-color 180ms var(--ease-out); }
.cs-facts dd a:hover { border-color: #fff; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chips span {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

@media (max-width: 900px) {
  .cs-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .cs-hero__media img { width: min(70%, 300px); }
  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-facts__item--wide { grid-column: 1 / -1; order: 3; }
  .cs-facts__item + .cs-facts__item { border-inline-start: 0; }
  .cs-facts__item:nth-child(2) { border-inline-start: 1px solid rgba(255,255,255,0.10); }
  .cs-facts__item--wide,
  .cs-facts__item:last-child { border-top: 1px solid rgba(255,255,255,0.10); }
  .cs-facts__item:last-child { order: 2; grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .cs-crumbs { margin-bottom: var(--space-5); }
  .cs-hero__actions .btn { width: 100%; }
  .cs-facts { grid-template-columns: 1fr; margin-top: var(--space-7); }
  .cs-facts__item { padding: var(--space-4) var(--space-5); }
  .cs-facts__item:nth-child(2) { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,0.10); }
}

/* ── 2 · Punto de partida ─────────────────────────────────────── */
/* Tres marcas sueltas: pastillas unidas por una línea cortada */
.cs-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.cs-names__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.cs-names__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--ink); }
.cs-names__role { font-size: var(--text-xs); color: var(--ink-mute); margin-top: 2px; }
.cs-names__gap {
  flex: 0 1 72px;
  min-width: 28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--chispa-roja) 0 6px, transparent 6px 12px);
  position: relative;
}
.cs-names__gap::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  background:
    linear-gradient(var(--chispa-roja), var(--chispa-roja)) center / 100% 2px no-repeat,
    linear-gradient(var(--chispa-roja), var(--chispa-roja)) center / 2px 100% no-repeat;
  border-radius: 1px;
  background-color: var(--bg);
}

.cs-pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.cs-pain {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cs-pain__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--chispa-roja);
  margin-bottom: var(--space-3);
}
.cs-pain h3 { font-size: var(--text-lg); line-height: 1.25; margin-bottom: var(--space-3); }
.cs-pain p { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.65; }

@media (max-width: 900px) { .cs-pains { grid-template-columns: 1fr; } }

/* Intro del punto de partida: texto + entrevista lado a lado */
.cs-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.cs-intro .cs-head { max-width: none; }
.cs-punch {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--azul);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--ink);
}

/* Entrevista: marco 16:9 (igual al video de YouTube que lo reemplaza) */
.cs-interview { margin: 0; }
.cs-interview__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(80% 100% at 20% 0%, rgba(40,122,237,0.42), transparent 60%),
    linear-gradient(165deg, #101f38, var(--navy));
  box-shadow: var(--shadow-lg);
}
.cs-interview__soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  color: #fff;
}
.cs-interview__face { position: relative; margin-bottom: var(--space-2); }
.cs-interview__face img {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.cs-interview__mini {
  position: absolute;
  right: -4px; bottom: -2px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  border: 3px solid #12213A;
}
.cs-interview__mini svg { width: 14px; height: 14px; margin-left: 2px; }
.cs-interview .cs-status { align-self: center; }
.cs-interview__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin-top: var(--space-1); }
.cs-interview__sub { font-size: var(--text-sm); color: rgba(255,255,255,0.72); }
.cs-interview figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  text-align: center;
}
.cs-interview figcaption a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--azul); }
.cs-interview figcaption a:hover { color: var(--azul); }

/* Estado listo: botón con portada; el iframe se crea al hacer clic */
.cs-interview__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; }
.cs-interview__play img { width: 100%; height: 100%; object-fit: cover; }
.cs-interview__btn {
  position: absolute;
  top: 50%; left: 50%;
  width: 76px; height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  box-shadow: 0 12px 30px rgba(10,21,38,0.4);
  transition: transform 220ms var(--ease-spring);
}
.cs-interview__btn svg { width: 30px; height: 30px; margin-left: 4px; }
.cs-interview__play:hover .cs-interview__btn { transform: translate(-50%, -50%) scale(1.08); }
.cs-interview__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 980px) {
  .cs-intro { grid-template-columns: 1fr; gap: var(--space-6); }
  .cs-interview { max-width: 640px; margin-inline: auto; width: 100%; }
}
@media (max-width: 520px) {
  /* El aviso no cabe en 16:9 a este ancho; el video real sí */
  .cs-interview__frame:has(.cs-interview__soon) { aspect-ratio: auto; }
  .cs-interview__soon { position: static; padding: var(--space-6) var(--space-5); }
  .cs-interview__face img { width: 76px; height: 76px; }
  .cs-interview__title { font-size: var(--text-lg); }
}

/* Arquitectura de marca: antes (fila suelta) → ahora (jerarquía en
   forma de paraguas: arriba la más ancha, la que cubre a las demás). */
.cs-arch {
  margin-top: var(--space-8);
  padding: clamp(var(--space-6), 5vw, var(--space-8)) clamp(var(--space-4), 4vw, var(--space-7));
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.cs-arch__head { max-width: 760px; margin-inline: auto; text-align: center; }
.cs-arch__title { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-4); }
.cs-arch__head > p:last-child { color: var(--ink-soft); max-width: 62ch; margin-inline: auto; }

.cs-arch__tag {
  display: table;
  margin: 0 auto var(--space-4);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chispa-roja);
  background: rgba(231,61,56,0.09);
}
.cs-arch__tag--now { color: #00753a; background: rgba(1,157,77,0.10); }

.cs-arch__before { margin-top: var(--space-7); }
.cs-arch .cs-names { margin-top: 0; }
.cs-arch .cs-names__item { background: var(--paper); opacity: 0.85; }
.cs-arch .cs-names__gap::after { background-color: var(--bg-2); }

.cs-arch__turn { display: flex; justify-content: center; margin: var(--space-5) 0; }
.cs-arch__turn span {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  box-shadow: 0 8px 20px rgba(40,122,237,0.3);
}
.cs-arch__turn svg { width: 20px; height: 20px; }

.cs-tiers { list-style: none; padding: 0; display: grid; gap: var(--space-5); justify-items: center; }
.cs-tier {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
/* Línea continua entre niveles: ahora sí están conectados */
.cs-tier + .cs-tier::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: calc(var(--space-5) + 2px);
  margin-left: -1px;
  background: var(--azul);
}
.cs-tier--1 {
  max-width: 820px;
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(40,122,237,0.45), transparent 60%),
    linear-gradient(165deg, #101f38, var(--navy));
  box-shadow: 0 18px 40px rgba(10,21,38,0.25);
}
.cs-tier--2 { max-width: 680px; background: var(--azul-soft); border-color: rgba(40,122,237,0.25); }
.cs-tier--3 { max-width: 540px; }
.cs-tier__level {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
}
.cs-tier--1 .cs-tier__level { color: #7FB2F7; }
.cs-tier__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin-top: var(--space-1); }
.cs-tier--1 .cs-tier__name { font-size: var(--text-2xl); }
.cs-tier__desc { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; }
.cs-tier--1 .cs-tier__desc { color: rgba(255,255,255,0.78); }

@media (max-width: 620px) {
  .cs-arch__title { font-size: 1.55rem; }
  .cs-tier { padding: var(--space-5) var(--space-4); }
  .cs-tier__name { font-size: 1.3rem; }
  .cs-tier--1 .cs-tier__name { font-size: 1.6rem; }
  .cs-tier--2 { max-width: 94%; }
  .cs-tier--3 { max-width: 88%; }
}
@media (max-width: 620px) {
  .cs-names { flex-direction: column; gap: var(--space-2); }
  .cs-names__item { width: 100%; max-width: 320px; }
  .cs-names__gap {
    flex: none;
    width: 2px; height: 36px; min-width: 0;
    background: repeating-linear-gradient(180deg, var(--chispa-roja) 0 6px, transparent 6px 12px);
  }
}

/* ── 3 · Comparador antes / después ───────────────────────────── */
.cs-compare { margin-top: var(--space-7); }
.cs-compare__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  cursor: ew-resize;
  touch-action: pan-y;            /* el scroll vertical sigue funcionando en el teléfono */
  user-select: none;
  -webkit-user-select: none;
}
.cs-compare__layer,
.cs-compare__layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cs-compare__layer img { object-fit: cover; object-position: top center; pointer-events: none; }
.cs-compare__layer--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

.cs-compare__tag {
  position: absolute;
  top: var(--space-4);
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(10,21,38,0.18);
  transition: opacity 200ms var(--ease-out);
}
.cs-compare__tag--before { left: var(--space-4); background: rgba(10,21,38,0.82); color: #fff; }
.cs-compare__tag--after  { right: var(--space-4); background: var(--azul); color: #fff; }

.cs-compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10,21,38,0.12), 0 0 18px rgba(10,21,38,0.25);
  pointer-events: none;
}
.cs-compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-md);
  transition: transform 200ms var(--ease-spring);
}
.cs-compare__knob svg { width: 22px; height: 22px; }
.cs-compare.is-dragging .cs-compare__knob { transform: translate(-50%, -50%) scale(1.08); }

/* El range queda encima pero invisible y sin recibir el mouse: solo
   existe para teclado y lectores de pantalla. */
.cs-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.cs-compare:has(.cs-compare__range:focus-visible) .cs-compare__knob {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

/* Mismo corte que el <source> del <picture> en el HTML (539px) */
@media (max-width: 539px) {
  .cs-compare__frame { aspect-ratio: 780 / 1400; max-height: 82vh; margin-inline: auto; }
  .cs-compare__url { display: none; }   /* en el teléfono, solo "Antes" / "Después" */
  .cs-compare__tag { top: var(--space-3); font-size: 0.6875rem; padding: 5px 10px; }
  .cs-compare__tag--before { left: var(--space-3); }
  .cs-compare__tag--after { right: var(--space-3); }
}

/* Link en bio: dos teléfonos lado a lado */
.cs-bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-9);
}
.cs-bio__title { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-4); }
.cs-bio__copy p { color: var(--ink-soft); }
.cs-bio__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* Marco de teléfono en CSS: sirve para cualquier captura vertical */
.cs-phone { margin: 0; }
.cs-phone__screen {
  border-radius: 30px;
  padding: 8px;
  background: linear-gradient(160deg, #1b2a44, var(--navy));
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.cs-phone__screen img { width: 100%; border-radius: 23px; }
.cs-phone figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  text-align: center;
}
.cs-phone figcaption strong { display: block; color: var(--ink); font-family: var(--font-display); }
.cs-phone--muted .cs-phone__screen { filter: saturate(0.6); opacity: 0.92; }
.cs-phone--lg { max-width: 330px; margin-inline: auto; }

@media (max-width: 900px) {
  .cs-bio { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); }
}
@media (max-width: 520px) {
  .cs-bio__pair { gap: var(--space-3); }
  .cs-phone__screen { border-radius: 22px; padding: 5px; }
  .cs-phone__screen img { border-radius: 18px; }
  .cs-phone figcaption { font-size: var(--text-xs); }
}

/* ── 4 · El sistema ───────────────────────────────────────────── */
.cs-flow {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-7);
  counter-reset: none;
}
.cs-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--ink-mute);
  line-height: 1.45;
}
.cs-flow li strong { font-family: var(--font-display); font-size: var(--text-sm); color: var(--ink); line-height: 1.25; }
.cs-flow li span:not(.cs-flow__n),
.cs-level p,
.cs-diff span,
.cs-credit__did,
.cs-portal__tile span { text-wrap: pretty; }
.cs-flow__n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
}
/* Flecha entre pasos */
.cs-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  right: calc(var(--space-3) * -1);
  width: var(--space-3);
  height: 2px;
  background: var(--azul);
  opacity: 0.5;
}
.cs-flow__last { background: rgba(1,157,77,0.07) !important; border-color: rgba(1,157,77,0.25) !important; }
.cs-flow__last .cs-flow__n { background: var(--chispa-verde); }

@media (max-width: 1100px) { .cs-flow { grid-template-columns: repeat(4, 1fr); } .cs-flow li:nth-child(4)::after { display: none; } }
@media (max-width: 620px) {
  .cs-flow { grid-template-columns: 1fr; gap: var(--space-2); }
  .cs-flow li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); }
  .cs-flow__n { grid-row: span 2; margin-bottom: 0; }
  .cs-flow li:not(:last-child)::after { display: block; top: auto; bottom: calc(var(--space-2) * -1); right: auto; left: calc(var(--space-4) + 12px); width: 2px; height: var(--space-2); }
  .cs-flow li:nth-child(4)::after { display: block; }
}

.cs-piece {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-9);
}
.cs-piece--flip .cs-piece__media { order: 2; }
.cs-piece__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: var(--space-3);
}
.cs-piece__title { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-4); }
.cs-piece__body > p:not(.cs-piece__label):not(.cs-by) { color: var(--ink-soft); }
.cs-piece__body > p + p:not(.cs-by) { margin-top: var(--space-3); }

.cs-checks { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.cs-checks li {
  position: relative;
  padding-inline-start: 30px;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.cs-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--azul-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.cs-mail { margin: 0 auto; max-width: 400px; }
.cs-mail img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.5deg);
}
.cs-mail figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-mute); text-align: center; }

.cs-portal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cs-portal__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.55;
}
.cs-portal__tile svg { width: 26px; height: 26px; color: var(--azul); margin-bottom: var(--space-1); }
.cs-portal__tile strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--ink); }
.cs-portal__tile:nth-child(2) svg { color: var(--chispa-oro); }
.cs-portal__tile:nth-child(3) svg { color: var(--chispa-verde); }
.cs-portal__tile:nth-child(4) svg { color: var(--chispa-roja); }

@media (max-width: 900px) {
  .cs-piece { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); }
  .cs-piece--flip .cs-piece__media { order: 0; }
  .cs-phone--lg { max-width: 260px; }
  .cs-mail { max-width: 320px; }
}
@media (max-width: 520px) {
  .cs-portal { grid-template-columns: 1fr; }
}

/* ── 5 · Motor de nutrición (navy) ────────────────────────────── */
.cs-motor {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(40,122,237,0.22), transparent 70%),
    var(--navy);
}
.cs-levels {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.cs-level {
  --lv: var(--azul);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
/* Barra de color arriba: el nivel "sube" de izquierda a derecha */
.cs-level::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lv);
}
.cs-level--1 { --lv: #7FB2F7; }
.cs-level--2 { --lv: var(--chispa-oro); }
.cs-level--3 { --lv: var(--chispa-roja); }
.cs-level--4 { --lv: var(--azul); }
.cs-level--5 { --lv: var(--chispa-verde); }
.cs-level__badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--navy);
  background: var(--lv);
}
.cs-level--4 .cs-level__badge,
.cs-level--5 .cs-level__badge,
.cs-level--3 .cs-level__badge { color: #fff; }
.cs-level__name { font-size: var(--text-lg); color: #fff; margin-top: var(--space-3); line-height: 1.2; }
.section--navy .cs-level__who { margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: rgba(255,255,255,0.9); }
.section--navy .cs-level__what { margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.6; color: rgba(255,255,255,0.7); }
.section--navy .cs-level__days {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--lv);
}
.cs-level--4 .cs-level__days { color: #7FB2F7; }

/* Aviso de consentimiento + Ley 21.719 */
.cs-legal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 860px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(1,157,77,0.08);
  border: 1px solid rgba(1,157,77,0.28);
}
.cs-legal__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(1,157,77,0.18);
  color: #3ccf82;
}
.cs-legal__icon svg { width: 22px; height: 22px; }
.section--navy .cs-legal p { font-size: var(--text-sm); line-height: 1.6; color: rgba(255,255,255,0.68); }
.cs-legal strong { color: #fff; font-weight: 600; }
.cs-legal p > span { display: block; margin-top: 2px; text-wrap: balance; }
@media (max-width: 520px) {
  .cs-legal { align-items: flex-start; padding: var(--space-4); }
}

.cs-editorrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-9);
}
.cs-editorrow__copy h3 { font-size: var(--text-2xl); color: #fff; line-height: 1.15; margin-bottom: var(--space-4); }

.cs-editor {
  margin: 0;
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
.cs-editor__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--ink-mute);
}
.cs-editor__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.cs-editor__bar i:nth-child(1) { background: var(--chispa-roja); }
.cs-editor__bar i:nth-child(2) { background: var(--chispa-oro); }
.cs-editor__bar i:nth-child(3) { background: var(--chispa-verde); }
.cs-editor__bar span { margin-inline-start: var(--space-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-editor__body { display: flex; flex-direction: column; padding: var(--space-5); }
.cs-editor__label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-mute); margin-bottom: 6px; }
.cs-editor__field {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.cs-editor__field--area { min-height: 112px; line-height: 1.6; color: var(--ink-soft); border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-soft); }
.cs-editor__caret {
  display: inline-block;
  width: 2px; height: 1.1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--azul);
  animation: csCaret 1s steps(1) infinite;
}
@keyframes csCaret { 50% { opacity: 0; } }
.cs-editor__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.cs-editor__btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.cs-editor__btn--primary { background: var(--azul); border-color: var(--azul); color: #fff; }
.cs-editor figcaption {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  color: var(--ink-mute);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .cs-levels { grid-template-columns: repeat(6, 1fr); }
  .cs-level { grid-column: span 2; }
  .cs-level--4 { grid-column: 2 / span 2; }
}
@media (max-width: 900px) {
  .cs-editorrow { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-8); }
}
@media (max-width: 760px) {
  .cs-levels { grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-level, .cs-level--4 { grid-column: auto; }
}

/* ── 6 · Atracción ────────────────────────────────────────────── */
.cs-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
  align-items: stretch;
}
.cs-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cs-card__title { font-size: var(--text-xl); line-height: 1.2; margin: var(--space-4) 0 var(--space-3); }
.cs-card p:not(.cs-by) { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; }
.cs-card .cs-by { margin-top: auto; padding-top: var(--space-5); }

.cs-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #9a6400;
  background: rgba(248,176,50,0.16);
}
.cs-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chispa-oro); }
.cs-status--live { color: #00753a; background: rgba(1,157,77,0.10); }
.cs-status--live::before { background: var(--chispa-verde); animation: csPulse 2s var(--ease-soft) infinite; }
@keyframes csPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1,157,77,0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(1,157,77,0); }
}

.cs-mini {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
  counter-reset: mini;
}
.cs-mini li {
  counter-increment: mini;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--bg-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}
.cs-mini li::before {
  content: counter(mini);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--azul-soft);
  color: var(--azul);
  font-size: var(--text-xs);
  font-weight: 700;
}

.cs-card--video { padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.cs-card__inner { display: flex; flex-direction: column; padding: var(--space-6); }
.cs-video { position: relative; background: var(--navy); min-height: 100%; }
.cs-video img,
.cs-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-video img { opacity: 0.45; filter: blur(1px) saturate(0.8); }
.cs-video__soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(10,21,38,0.15), rgba(10,21,38,0.7));
}
.cs-video__soon svg {
  width: 56px; height: 56px;
  padding: 16px 14px 16px 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 980px) {
  .cs-duo { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cs-card { padding: var(--space-5); }
  .cs-card--video { grid-template-columns: 1fr; padding: 0; }
  .cs-video { aspect-ratio: 16 / 10; min-height: 0; }
  .cs-card__inner { padding: var(--space-5); }
}

/* ── 7 · Lo que cambió ────────────────────────────────────────── */
.cs-diff {
  margin-top: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cs-diff__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
}
.cs-diff__row + .cs-diff__row { border-top: 1px solid var(--line); }
.cs-diff__row--head {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg-2);
  padding-block: var(--space-3);
}
.cs-diff__k { font-weight: 700; font-family: var(--font-display); color: var(--ink); }
.cs-diff__a { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: rgba(231,61,56,0.55); text-decoration-thickness: 1.5px; }
.cs-diff__b {
  position: relative;
  padding-inline-start: 28px;
  color: var(--ink);
  font-weight: 500;
}
.cs-diff__b::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(1,157,77,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23019D4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.cs-numbers {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--azul-soft);
  border: 1px solid rgba(40,122,237,0.18);
}
.cs-numbers__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--azul);
  color: #fff;
}
.cs-numbers__icon svg { width: 24px; height: 24px; }
.cs-numbers h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.cs-numbers p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; max-width: 75ch; }

@media (max-width: 760px) {
  .cs-diff__row--head { display: none; }
  .cs-diff__row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5); }
  .cs-diff__row + .cs-diff__row { border-top: 1px solid var(--line); }
  .cs-diff__row:nth-child(2) { border-top: 0; }
  /* inline-block: así el tachado del padre no alcanza a la etiqueta */
  .cs-diff__a::before { content: "Antes:"; display: inline-block; margin-right: 5px; font-weight: 600; }
}
@media (max-width: 520px) {
  .cs-numbers { flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
}

/* ── 8 · Créditos ─────────────────────────────────────────────── */
.cs-credits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.cs-credit {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.cs-credit:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--azul-soft); }
.cs-credit__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
  background: var(--bg-2);
}
.cs-credit__photo--logo {
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 90% at 30% 10%, rgba(40,122,237,0.35), transparent 60%),
    linear-gradient(165deg, #101f38, var(--navy));
}
.cs-credit__photo--logo img { width: 64px; height: 64px; }
.cs-credit__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) var(--space-5) var(--space-6); }
.cs-credit__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--ink); }
.cs-credit__role { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--azul); margin-top: 2px; }
.cs-credit__did { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.6; }
.cs-credit__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-mute);
  transition: color 200ms var(--ease-out);
}
.cs-credit__cta .arrow { transition: transform 200ms var(--ease-out); }
.cs-credit:hover .cs-credit__cta { color: var(--azul); }
.cs-credit:hover .cs-credit__cta .arrow { transform: translateX(3px); }

@media (max-width: 900px) { .cs-credits { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (max-width: 900px) {
  .cs-credit { flex-direction: row; }
  .cs-credit__photo { width: 34%; aspect-ratio: auto; min-height: 100%; flex: none; }
}
@media (max-width: 420px) {
  .cs-credit { flex-direction: column; }
  .cs-credit__photo { width: 100%; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ── 9 · CTA y volver ─────────────────────────────────────────── */
.cs-cta__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }
.cs-back { text-align: center; margin-top: var(--space-6); }
.cs-back a {
  display: inline-flex;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  transition: color 180ms var(--ease-out);
}
.cs-back a:hover { color: var(--azul); }

/* Títulos de pieza más contenidos en el teléfono. Va al final a
   propósito: tiene que ganarle a las reglas base de cada sección. */
@media (max-width: 620px) {
  .cs-piece__title, .cs-bio__title, .cs-editorrow__copy h3 { font-size: 1.55rem; }
}

/* ── Movimiento reducido ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cs-hero__media img,
  .cs-editor__caret,
  .cs-status--live::before { animation: none; }
  .cs-credit { transition: none; }
}