/* ============================================================
   SCALER AGENCY — SISTEMA DE DISEÑO
   Una familia (Satoshi) · seis tamaños · escala de 4px ·
   paleta cerrada · una curva de transición · sin decoración.
   ============================================================ */

/* ---------- Tipografía local ---------- */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta cerrada — no existe ningún otro color en el proyecto */
  --bg-a: #14060C;
  --bg-b: #2A0C18;
  --brand: #6D1A36;    /* burdeos de marca — el del logo */
  --accent: #BE2233;   /* el mismo, aclarado hacia el rojo, para leerse sobre oscuro */
  --tx-100: #FFFFFF;
  --tx-72: rgba(255, 255, 255, 0.72);
  --tx-55: rgba(255, 255, 255, 0.55);
  --tx-40: rgba(255, 255, 255, 0.40);
  --line: rgba(255, 255, 255, 0.12);

  /* Escala tipográfica — ningún tamaño fuera de estos seis */
  --t-display: clamp(2.75rem, 5.5vw, 4.5rem);
  --t-h2: clamp(2rem, 3.6vw, 3rem);
  --t-h3: 1.375rem;
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-eyebrow: 0.72rem;

  /* Espaciado — escala de 4px */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;

  /* Rejilla */
  --max: 1200px;
  --pad: clamp(24px, 5vw, 80px);
  --gutter: 24px;

  /* Movimiento — una curva, dos duraciones */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-ui: 200ms;
  --dur-in: 600ms;

  /* Radios — solo tres */
  --r-sm: 12px;
  --r-md: 20px;
  --r-pill: 999px;

  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.motion { scroll-behavior: auto; }

body {
  font-family: 'Satoshi', -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  background: var(--bg-a);
  color: var(--tx-72);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

/* ---------- Rejilla ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.container--narrow { max-width: var(--max); }

/* Padding vertical idéntico en todas las secciones */
.scene {
  position: relative;
  padding-top: var(--s-128);
  padding-bottom: var(--s-128);
}
@media (max-width: 768px) {
  .scene { padding-top: 72px; padding-bottom: 72px; }
}

/* ---------- Escala tipográfica ---------- */
h1 {
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--tx-100);
}
h2 {
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--tx-100);
}
h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--tx-100);
}
p { font-size: var(--t-body); line-height: 1.6; }
/* Ningún párrafo pasa de 68 caracteres */
p, li { max-width: 68ch; }
.eyebrow {
  font-size: var(--t-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Botones y enlaces ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 500;
  padding: var(--s-16) var(--s-32);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform var(--dur-ui) var(--ease),
              background var(--dur-ui) var(--ease),
              color var(--dur-ui) var(--ease),
              border-color var(--dur-ui) var(--ease);
}
.btn--white { background: var(--tx-100); color: var(--bg-a); }
.btn--white:hover { transform: translateY(-2px); }
.btn--burdeos { background: var(--accent); color: var(--bg-a); }
.btn--burdeos:hover { transform: translateY(-2px); }
.hero__link, .link-line {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--tx-72);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-4);
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.hero__link:hover, .link-line:hover { color: var(--tx-100); border-color: var(--tx-100); }

/* ---------- Números de paso: tratamiento único ---------- */
.step-num {
  display: block;
  font-size: var(--t-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--s-12);
}

/* ---------- Iconos: uno de cada tipo, mismo trazo y tamaño ---------- */
.ico {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Entradas al scroll: un solo gesto ---------- */
html.motion [data-in] { opacity: 0; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  color: var(--tx-100);
  transition: transform var(--dur-ui) var(--ease),
              opacity var(--dur-ui) var(--ease),
              background-color var(--dur-ui) var(--ease);
}
.nav__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav--hidden { transform: translateY(-110%); }
.nav--pre { opacity: 0; pointer-events: none; }
.nav--solid {
  background-color: rgba(20, 6, 12, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__logo { display: flex; align-items: center; gap: var(--s-8); }
.logo-mini { width: 20px; height: 18px; flex-shrink: 0; }
.nav__wordmark {
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav__links { display: flex; gap: var(--s-32); }
.nav__links a {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--tx-72);
  transition: color var(--dur-ui) var(--ease);
}
.nav__links a:hover { color: var(--tx-100); }
.nav__cta {
  font-size: var(--t-small);
  font-weight: 500;
  padding: var(--s-8) var(--s-16);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-ui) var(--ease);
}
.nav__cta:hover { border-color: var(--tx-100); }
@media (max-width: 768px) { .nav__links { display: none; } }

/* Barra de progreso */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1001;
}

/* ---------- Grano ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
html.no-motion .grain { display: none; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed;
  left: -8px; top: -8px;
  width: 14px; height: 13px;
  z-index: 6000;
  pointer-events: none;
  color: var(--tx-100);
  opacity: 0;
  transition: color var(--dur-ui) var(--ease);
}
html.fine-pointer body,
html.fine-pointer a,
html.fine-pointer button,
html.fine-pointer summary { cursor: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  height: 100svh;
  padding: 0;
  background: var(--bg-a);
  color: var(--tx-100);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--tx-72);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--line);
  padding: var(--s-8) var(--s-16);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-32);
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.hero__pill:hover { color: var(--tx-100); border-color: var(--tx-100); }
.hero__title {
  font-size: var(--t-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero__line { display: block; }
.hero__title .w { display: inline-block; }
.hero__sub {
  margin-top: var(--s-24);
  font-size: var(--t-body);
  color: var(--tx-72);
}
.hero__actions { margin-top: var(--s-48); display: flex; align-items: center; gap: var(--s-24); }
.hero__scroll-hint {
  position: absolute;
  bottom: var(--s-32);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 36px;
  z-index: 3;
  pointer-events: none;
}
.hero__scroll-hint span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll-hint { display: none; } }

/* ============================================================
   LA FACTURA
   ============================================================ */
.puya { background: var(--bg-b); color: var(--tx-100); overflow: hidden; z-index: 2; }
.puya__stage {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
}
.puya__copy { grid-column: span 5; display: grid; }
.puya__copyA, .puya__copyB { grid-area: 1 / 1; }
.puya__line--big {
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--tx-100);
  margin-bottom: var(--s-16);
}
.puya__line--small { font-size: var(--t-body); color: var(--tx-72); }
.puya__ticketWrap {
  grid-column: 8 / span 5;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.puya__slot {
  position: absolute;
  top: -6px; left: -24px; right: -24px;
  height: 12px;
  background: var(--bg-a);
  border-radius: var(--r-sm);
  z-index: 3;
}
.puya__window { overflow: hidden; padding: var(--s-8) 0 var(--s-24); }
.puya__ticket {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bg-a);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  padding: var(--s-24) var(--s-16) var(--s-32);
  border-radius: var(--r-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.ticket__head {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-align: center;
  max-width: none;
}
.ticket__sub {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  opacity: 0.55;
  margin-bottom: var(--s-24);
  max-width: none;
}
.ticket__row {
  font-size: var(--t-small);
  line-height: 2;
  white-space: pre;
  overflow: hidden;
  max-width: none;
}
.ticket__text { display: inline-block; }
.ticket__row--total { font-weight: 600; }
.ticket__row--ventas { margin-top: var(--s-8); }
.ticket__zero { display: inline-block; color: var(--accent); font-weight: 600; }
.puya__stamp {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  rotate: -8deg;
  z-index: 4;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  padding: var(--s-12) var(--s-16);
  width: max-content;
  max-width: 110%;
}
@media (max-width: 768px) {
  .puya__stage { grid-template-columns: 1fr; gap: var(--s-48); }
  .puya__copy, .puya__ticketWrap { grid-column: 1 / -1; }
}

/* ============================================================
   EL SISTEMA
   ============================================================ */
.sistema { background: var(--bg-a); z-index: 2; }
.sistema__title { margin-bottom: var(--s-24); }
.sistema__intro { color: var(--tx-72); margin-bottom: var(--s-48); }
.sistema__flow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-48) var(--gutter);
}
.sistema__block {
  grid-column: span 6;
  padding-top: var(--s-32);
  border-top: 1px solid var(--line);
}
.sistema__block h3 { margin-bottom: var(--s-12); }
.sistema__quote { color: var(--tx-72); margin-bottom: var(--s-24); }
.sistema__list { display: flex; flex-direction: column; gap: var(--s-12); }
.sistema__list li {
  display: flex;
  gap: var(--s-12);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--tx-55);
}
.sistema__list .ico { color: var(--accent); margin-top: 3px; }
@media (max-width: 768px) { .sistema__block { grid-column: 1 / -1; } }

/* ============================================================
   RESULTADOS — informes enfrentados
   ============================================================ */
.resultados { background: var(--bg-b); z-index: 2; }
.resultados__title { margin-bottom: var(--s-48); }
.informes { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.informe {
  grid-column: span 6;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
}
.informe--scaler { background: rgba(255, 255, 255, 0.04); }
.informe__head { margin-bottom: var(--s-24); }
.informe__kicker {
  display: block;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--tx-40);
  margin-bottom: var(--s-8);
}
.informe__rows { display: flex; flex-direction: column; flex-grow: 1; }
.informe__rows li {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16) 0;
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.informe__rows li:last-child { border-bottom: 0; }
.informe__icon { width: 18px; height: 18px; flex: none; color: var(--tx-40); }
.informe--scaler .informe__icon { color: var(--accent); }
.informe__label { font-size: var(--t-small); color: var(--tx-55); }
.informe__valor { margin-left: auto; font-size: var(--t-h3); font-weight: 600; color: var(--tx-100); }
.informe--humo .informe__valor { color: var(--tx-40); }
.informe__pie { font-size: var(--t-small); color: var(--tx-40); margin-top: var(--s-24); }
@media (max-width: 768px) { .informe { grid-column: 1 / -1; } }

/* ============================================================
   CASOS
   ============================================================ */
.casos { background: var(--bg-a); z-index: 2; }
.casos__kicker {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--s-12);
}
.casos__title { margin-bottom: var(--s-48); }
.casos__carousel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: center;
}
.casos__deck { grid-column: span 5; position: relative; aspect-ratio: 3 / 4; }
.casos__info { grid-column: 7 / span 6; position: relative; display: grid; align-items: start; }
.caso-card {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-b);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-in) var(--ease), opacity var(--dur-in) var(--ease);
  opacity: 0;
  pointer-events: none;
  transform: translate(24px, 16px);
}
.caso-card.is-active { opacity: 1; pointer-events: auto; transform: none; z-index: 4; }
.caso-card.is-next { opacity: 1; transform: translate(12px, 8px); z-index: 3; }
.caso-card.is-after { opacity: 1; transform: translate(24px, 16px); z-index: 2; }
.caso-card.is-out { opacity: 0; transform: translate(-32px, 0); z-index: 5; }
.caso-card__photo { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s-8); color: var(--tx-40); }
.caso-card__photo svg { width: 40px; }
.caso-card__photo span { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.2em; }
.caso-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.caso-card__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(20, 6, 12, 0.72), rgba(20, 6, 12, 0));
}
.caso-card__perfil {
  position: absolute;
  left: var(--s-16); bottom: var(--s-16);
  z-index: 2;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--tx-100);
  background: rgba(20, 6, 12, 0.72);
  border: 1px solid var(--line);
  padding: var(--s-8) var(--s-16);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-ui) var(--ease);
}
.caso-card__perfil:hover { border-color: var(--tx-100); }
.caso-card--cta { background: var(--bg-b); }
.caso-card__cta-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-24);
  padding: var(--s-32);
}
.caso-card__cta-inner h3 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.025em; }
.caso-info {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-in) var(--ease), visibility var(--dur-in);
}
.caso-info.is-active { opacity: 1; visibility: visible; }
.caso-info__nombre { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.025em; color: var(--tx-100); margin-bottom: var(--s-8); }
.caso-info__label { font-size: var(--t-small); color: var(--accent); margin-bottom: var(--s-24); }
.caso-info__historia { color: var(--tx-72); }
.casos__nav { display: flex; gap: var(--s-8); margin-top: var(--s-48); }
.casos__arrow {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: none;
  color: var(--tx-72);
  font-family: inherit;
  font-size: var(--t-body);
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.casos__arrow:hover { color: var(--tx-100); border-color: var(--tx-100); }
.casos__nota { font-size: var(--t-small); color: var(--tx-40); margin-top: var(--s-24); }
@media (max-width: 768px) {
  .casos__deck, .casos__info { grid-column: 1 / -1; }
  .casos__deck {
    display: flex;
    aspect-ratio: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--s-16);
    scrollbar-width: none;
  }
  .casos__deck::-webkit-scrollbar { display: none; }
  .caso-card {
    position: relative;
    inset: auto;
    flex: none;
    width: 76vw;
    aspect-ratio: 3 / 4;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    scroll-snap-align: center;
  }
  .caso-card.is-active, .caso-card.is-next, .caso-card.is-after, .caso-card.is-out { transform: none; opacity: 1; }
  .casos__info { margin-top: var(--s-24); }
}

/* ============================================================
   MARCAS
   ============================================================ */
.marcas { background: var(--bg-a); border-top: 1px solid var(--line); z-index: 2; overflow: hidden; }
.marcas__label {
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--tx-40);
  margin-bottom: var(--s-32);
  max-width: none;
}
.marcas__marquee { overflow: hidden; white-space: nowrap; }
.marcas__inner {
  display: inline-flex;
  gap: var(--s-64);
  align-items: center;
  padding-right: var(--s-64);
  animation: marcasSlide 45s linear infinite;
}
.marcas__inner span {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tx-40);
  flex: none;
}
@keyframes marcasSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html.no-motion .marcas__inner { animation: none; }

/* ============================================================
   EL PROCESO
   ============================================================ */
.proceso { background: var(--bg-b); z-index: 2; }
.proceso__pin { min-height: 100svh; display: flex; align-items: center; }
.proceso__title { margin-bottom: var(--s-48); }
.proceso__layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.proceso__steps { grid-column: span 8; position: relative; display: grid; min-height: 240px; align-items: start; }
.proceso__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.proceso__step:first-child { opacity: 1; visibility: visible; }
.proceso__step h3 { margin-bottom: var(--s-12); }
.proceso__step p { color: var(--tx-72); }
@media (max-width: 768px) {
  .proceso__pin { min-height: 0; display: block; }
  .proceso__steps { display: flex; flex-direction: column; gap: var(--s-48); min-height: 0; grid-column: 1 / -1; }
  .proceso__step { opacity: 1; visibility: visible; }
}
html.no-motion .proceso__pin { min-height: 0; display: block; }
html.no-motion .proceso__steps { display: flex; flex-direction: column; gap: var(--s-48); min-height: 0; }
html.no-motion .proceso__step { opacity: 1; visibility: visible; }

/* ============================================================
   PLANES
   ============================================================ */
.planes { background: var(--bg-a); z-index: 2; }
.planes__title { margin-bottom: var(--s-48); }
.planes__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.plan {
  grid-column: span 6;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
  transition: border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.plan:hover { border-color: var(--tx-100); transform: translateY(-2px); }
.plan__desc { color: var(--tx-72); flex-grow: 1; }
.planes__nota { font-size: var(--t-small); color: var(--tx-40); margin-top: var(--s-24); }
@media (max-width: 768px) { .plan { grid-column: 1 / -1; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--bg-b); z-index: 2; }
.faq__title { margin-bottom: var(--s-48); }
.faq__list { max-width: 68ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--tx-100);
  padding: var(--s-24) var(--s-32) var(--s-24) 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__marker {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
}
.faq__marker::before, .faq__marker::after {
  content: "";
  position: absolute;
  background: var(--tx-55);
  transition: transform var(--dur-ui) var(--ease);
}
.faq__marker::before { left: 0; top: 6px; width: 14px; height: 1px; }
.faq__marker::after { left: 6px; top: 0; width: 1px; height: 14px; }
.faq__item[open] .faq__marker::after { transform: scaleY(0); }
.faq__item p { color: var(--tx-72); padding: 0 var(--s-32) var(--s-24) 0; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final { background: var(--bg-a); }
.cta-final__inner { display: flex; flex-direction: column; align-items: flex-start; }
.cta-final__title { margin-bottom: var(--s-24); }
.cta-final__sub { color: var(--tx-72); margin-bottom: var(--s-48); }
.cta-final__email { font-size: var(--t-small); color: var(--tx-40); margin-top: var(--s-24); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-a);
  border-top: 1px solid var(--line);
  padding: var(--s-48) 0;
}
.footer__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
  flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: var(--s-8); font-size: var(--t-small); color: var(--tx-55); }
.footer__links { display: flex; gap: var(--s-24); flex-wrap: wrap; }
.footer__links a, .footer__links span { font-size: var(--t-small); color: var(--tx-40); transition: color var(--dur-ui) var(--ease); }
.footer__links a:hover { color: var(--tx-100); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA v2 — secciones nuevas + dos fondos únicos
   Añadido en la reestructuración. Todo lo de aquí abajo manda.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg-a:#14060C;
  --bg-b:#2A0C18;
  --accent:#BE2233;
  --tx-1:#fff;
  --tx-2:rgba(255,255,255,.72);
  --tx-3:rgba(255,255,255,.55);
  --tx-4:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.12);
  --pad-sec:128px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Dos fondos, alternados. Fuera blancos y negros puros. */
.scene.hero,
.scene.casos,
.scene.filtro,
.scene.faq        { background:var(--bg-a) !important; color:var(--tx-1); }
.scene.problema,
.scene.sistema,
.scene.oferta,
.scene.cta-final  { background:var(--bg-b) !important; color:var(--tx-1); }
.footer           { background:var(--bg-a) !important; color:var(--tx-3); }

.scene.problema,.scene.sistema,.scene.filtro,.scene.oferta,
.scene.casos,.scene.faq,.scene.cta-final{
  padding-block:var(--pad-sec);
  min-height:auto;
}

/* Tipografía compartida */
.eyebrow{
  font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.2em;font-weight:600;
  color:var(--tx-3);margin:0 0 16px;
}
.sec__title{
  font-size:var(--t-h2);line-height:1.05;letter-spacing:-.025em;
  font-weight:600;color:var(--tx-1);margin:0 0 16px;
}
.sec__lead{
  font-size:var(--t-body);line-height:1.6;color:var(--tx-2);max-width:68ch;margin:0 0 48px;
}

/* ── PROBLEMA ───────────────────────────────────────────────── */
.problema__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.problema__title{
  font-size:var(--t-h2);line-height:1.02;letter-spacing:-.03em;
  font-weight:600;margin:0 0 24px;
}
.problema__line{font-size:var(--t-body);line-height:1.6;color:var(--tx-2);max-width:68ch;margin:0 0 8px}
.problema__visual{display:flex;justify-content:center}
.phone{
  width:270px;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;
  background:rgba(255,255,255,.035);filter:saturate(.7) brightness(.95);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.phone__bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.phone__dot{width:34px;height:34px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);flex:none}
.phone__handle{font-size:var(--t-small);color:var(--tx-3)}
.phone__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.phone__cell{aspect-ratio:1;background:rgba(255,255,255,.05);border-radius:var(--r-sm)}
.phone__cell--full{background:rgba(255,255,255,.13)}
.phone__stale{margin:16px 0 0;font-size:var(--t-small);color:var(--tx-4);text-align:center}

/* ── SISTEMA · linea de tiempo ─────────────────────────────────
   Tecnica propia: un riel vertical que se rellena segun bajas y
   va encendiendo los pasos uno a uno. Cada paso reparte el trabajo
   en dos columnas — lo que pone el cliente y lo que ponemos
   nosotros — que es la duda real de quien contrata: cuanto tiempo
   me va a comer esto.
   ------------------------------------------------------------ */
.pasos{ list-style:none; margin:56px 0 0; padding:0; position:relative; }

/* El riel y su relleno */
.pasos__riel{
  position:absolute; left:15px; top:8px; bottom:8px; width:2px;
  background:var(--ink-line); border-radius:2px;
}
.pasos__lleno{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:var(--accent-ink); transform-origin:50% 0;
  transform:scaleY(0);
}

.paso{
  position:relative;
  display:grid; grid-template-columns:32px 56px 1fr; gap:0 20px;
  align-items:start; padding:0 0 48px;
}
.paso:last-child{ padding-bottom:0; }

/* El punto del riel: apagado hasta que llegas */
.paso__punto{
  width:32px; height:32px; border-radius:var(--r-pill);
  border:2px solid var(--ink-line); background:var(--bg-b);
  position:relative; z-index:1;
  transition:border-color 360ms var(--ease), background-color 360ms var(--ease);
}
.paso__punto::after{
  content:""; position:absolute; inset:7px; border-radius:var(--r-pill);
  background:var(--accent-ink); transform:scale(0);
  transition:transform 360ms var(--ease);
}
.paso.is-activo .paso__punto{ border-color:var(--accent-ink); }
.paso.is-activo .paso__punto::after{ transform:scale(1); }

.paso__num{
  font-family:var(--font-mono); font-size:var(--t-small);
  letter-spacing:.14em; font-weight:600; color:var(--ink-4);
  padding-top:5px; transition:color 360ms var(--ease);
}
.paso.is-activo .paso__num{ color:var(--accent-ink); }

.paso__cuerpo{ padding-top:1px; }
.paso__title{ font-size:var(--t-h3); line-height:1.25; letter-spacing:-.01em; font-weight:600; margin:0 0 8px; color:var(--ink-1) }
.paso__text{ font-size:var(--t-body); line-height:1.6; color:var(--ink-2); max-width:60ch; margin:0 }

/* Quien hace que: la duda de verdad de quien te contrata */
.reparto{
  margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--ink-line); border:1px solid var(--ink-line);
  border-radius:var(--r-sm); overflow:hidden;
}
.reparto__col{ background:var(--bg-b); padding:16px 18px; }
.reparto__col--nos{
  /* Tinte solido: si fuera translucido se veria la linea oscura
     del contenedor por debajo y salia gris, no rojo. */
  background:linear-gradient(rgba(142,26,40,.055), rgba(142,26,40,.055)), var(--bg-b);
}
.reparto__quien{
  margin:0 0 6px; font-family:var(--font-mono);
  font-size:var(--t-eyebrow); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4);
}
.reparto__col--nos .reparto__quien{ color:var(--accent-ink); }
.reparto__que{ margin:0; font-size:var(--t-small); line-height:1.55; color:var(--ink-2); }

@media (max-width:900px){
  .pasos__riel{ left:11px; }
  .paso{ grid-template-columns:24px 1fr; gap:0 16px; padding-bottom:40px; }
  .paso__punto{ width:24px; height:24px; }
  .paso__punto::after{ inset:5px; }
  .paso__num{ grid-column:2; padding-top:0; margin-bottom:4px; }
  .paso__cuerpo{ grid-column:2; }
  .reparto{ grid-template-columns:1fr; }
}

/* ── FILTRO ─────────────────────────────────────────────────── */
.filtro__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.filtro__col--no{position:relative}
.filtro__col--no::before{content:"";position:absolute;left:-32px;top:0;bottom:0;width:1px;background:var(--line)}
.filtro__head{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--tx-2);margin:0 0 24px}
.filtro__col--no .filtro__head{color:var(--tx-4)}
.filtro__list{list-style:none;margin:0;padding:0}
.filtro__list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-body);line-height:1.5;margin-bottom:16px;color:rgba(255,255,255,.88)}
.filtro__col--no .filtro__list li{color:rgba(255,255,255,.45)}
.filtro__ico{flex:none;width:18px;font-size:.9rem;line-height:1.5}
.filtro__ico--si{color:var(--accent)}
.filtro__ico--no{color:rgba(255,255,255,.25)}

/* ── OFERTA ─────────────────────────────────────────────────── */
.oferta__card{
  max-width:720px;margin:0 auto;padding:48px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-md);
}
.oferta__list{list-style:none;margin:0;padding:0}
.oferta__list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-body);line-height:1.5;margin-bottom:16px;color:rgba(255,255,255,.88)}
.oferta__list li:last-child{margin-bottom:0}
.oferta__nota{margin:32px auto 0;max-width:48ch;text-align:center;font-size:var(--t-body);color:var(--tx-3)}
.oferta__actions{margin-top:32px;text-align:center}

/* ── Móvil ──────────────────────────────────────────────────── */
@media(max-width:900px){
  :root{--pad-sec:72px}
  .problema__grid,.filtro__grid{grid-template-columns:1fr;gap:48px}
  .filtro__col--no::before{display:none}
  .paso{grid-template-columns:1fr;gap:8px}
  .oferta__card{padding:32px}
}

/* ═══════════════════════════════════════════════════════════════
   CAPA EDITORIAL — serif para titulares, mono para eyebrows.
   Satoshi se queda para el cuerpo. Esto es lo que separa
   "cartel de gimnasio" de "estudio".
   ═══════════════════════════════════════════════════════════════ */
:root{
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Titulares en serif, peso medio. NUNCA bold extremo: el serif de
   alto contraste pierde toda la elegancia por encima de 600. */
h1, h2, h3,
.hero__title,
.sec__title,
.problema__title,
.casos__title,
.faq__title,
.cta-final__title,
.paso__title{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.015em;
}

.hero__title{ font-weight:500; letter-spacing:-.02em; line-height:1.0; }
.sec__title,
.problema__title,
.casos__title,
.faq__title,
.cta-final__title{ font-weight:500; line-height:1.06; }
.paso__title{ font-weight:500; font-size:1.5rem; letter-spacing:-.01em; }

/* Segunda voz: media frase en cursiva y en el acento.
   Es el recurso que más sube la percepción de la pieza. */
.it{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}

/* Eyebrows en monoespaciada — iguales en toda la web */
.eyebrow,
.filtro__head,
.paso__num{
  font-family:var(--font-mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:var(--t-eyebrow);
}

/* Cifras grandes en el serif: editorial, no panel de control */
.num-xl{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem,5vw,4rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--tx-1);
  font-variant-numeric:lining-nums;
}

/* El cuerpo sigue en Satoshi */
.sec__lead,.problema__line,.paso__text,.filtro__list li,.oferta__list li,
.oferta__nota,.hero__sub,p{ font-family:'Satoshi',-apple-system,sans-serif; }


/* ── LO QUE NO SOMOS ────────────────────────────────────────── */
.scene.niego{background:var(--bg-b) !important;text-align:center}
/* Hereda un max-width de una regla general de parrafos, asi que sin
   margin auto su caja se queda pegada a la izquierda del contenedor
   y el texto centrado dentro de ella parece descuadrado. */
.niego__eyebrow{ text-align:center; margin-left:auto; margin-right:auto; }

/* Los descartes son el planteamiento, no el mensaje: van pequenos y
   apretados, como una lista que se va tachando. El tachado se ve de
   verdad -2px y en burdeos- porque el gesto de tachar ES el contenido. */
.niego__descartes{ margin:0 auto; max-width:30ch; }
.niego__tachado{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.5vw,1.15rem); font-weight:400;
  line-height:1.55; margin:0 0 4px;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(142,26,40,.55);
  text-underline-offset:0;
}

/* La frase que si sois es lo mas grande de la seccion, y va en el serif
   de los titulares: en esta web el serif es el que afirma. */
.niego__somos{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.6rem); font-weight:400;
  line-height:1.18; letter-spacing:-.015em;
  max-width:26ch; margin:var(--s-48) auto 0;
}

/* El mantra son tres tiempos, no un parrafo: cada linea respira sola
   y una raya fina lo separa de lo anterior para que cierre. */
.niego__mantra{
  display:flex; flex-direction:column; gap:6px;
  font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.3;
  margin:var(--s-48) auto 0; padding-top:var(--s-48);
  max-width:34ch; position:relative;
}
.niego__mantra::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:56px; height:1px; background:rgba(26,8,16,.18);
}

/* niego y el cierre comparten el crema: sin esto se leen como una sola
   explanada vacia de 256px. Se recorta el aire y una raya marca el final. */
.scene.niego{ padding-bottom:var(--s-96); }
.scene.cta-final{ padding-top:var(--s-96); border-top:1px solid rgba(26,8,16,.10); }

/* El cierre, centrado como todo lo que lleva encima, y con el boton
   grande de verdad: btn--big estaba en el HTML pero no existia en el CSS. */
.cta-final__inner{ align-items:center; text-align:center; }
.cta-final__sub{ max-width:44ch; }
.btn--big{
  padding:var(--s-24) var(--s-48);
  font-size:1.0625rem; font-weight:600; letter-spacing:.01em;
}
@media (max-width:768px){
  .btn--big{ padding:var(--s-16) var(--s-32); font-size:var(--t-body); }
}

/* ── Precio: se enseña con orgullo, no escondido en gris ────── */
.oferta__precio{margin:32px 0 12px;text-align:center}
.oferta__pill{
  display:inline-block;padding:10px 22px;border-radius:999px;
  background:rgba(190,34,51,.14);border:1px solid rgba(190,34,51,.45);
  color:#E86572;font-family:'Satoshi',sans-serif;font-size:.9375rem;font-weight:600;
}

/* ═══════════════════════════════════════════════════════════════
   TEMA CREMA — las secciones alternas pasan a crema con texto
   oscuro. El ritmo claro/oscuro es lo que hace respirar la web.

   👉 PARA VOLVER A TODO OSCURO: borra este bloque entero
      (desde esta cabecera hasta el final del archivo).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg-b:#F4EFE7;          /* crema cálido — nunca blanco puro */
  --ink-1:#1A0810;         /* titulares sobre crema */
  --ink-2:rgba(26,8,16,.72);
  --ink-3:rgba(26,8,16,.55);
  --ink-4:rgba(26,8,16,.38);
  --ink-line:rgba(26,8,16,.14);
  --accent-ink:#8E1A28;    /* burdeos legible sobre crema */
}

/* Secciones claras: problema · sistema · oferta · no somos · cierre */
.scene.problema, .scene.sistema, .scene.oferta,
.scene.niego, .scene.cta-final{
  background:var(--bg-b) !important;
  color:var(--ink-1);
}

.scene.problema h2, .scene.sistema h2, .scene.oferta h2,
.scene.cta-final h2, .scene.problema h3, .scene.sistema h3,
.scene.problema .problema__title, .scene.sistema .sec__title,
.scene.oferta .sec__title, .scene.cta-final .cta-final__title,
.scene.sistema .paso__title{ color:var(--ink-1); }

.scene.problema .eyebrow, .scene.sistema .eyebrow, .scene.oferta .eyebrow,
.scene.problema .problema__line, .scene.sistema .paso__text,
.scene.oferta .sec__lead, .scene.sistema .sec__lead,
.scene.oferta .oferta__nota, .scene.cta-final .cta-final__sub,
.scene.cta-final .cta-final__email{ color:var(--ink-2); }

.scene.problema .eyebrow, .scene.sistema .eyebrow, .scene.oferta .eyebrow,
.scene.niego .eyebrow{ color:var(--accent-ink); }
.scene.sistema .paso__num{ color:var(--accent-ink); }
.scene.sistema .paso{ border-color:var(--ink-line); }
.scene.oferta .oferta__list li{ color:var(--ink-1); }
.scene.oferta .oferta__card{ background:rgba(26,8,16,.03); border-color:var(--ink-line); }
.scene.oferta .filtro__ico--si{ color:var(--accent-ink); }

/* Móvil de la sección problema, sobre crema */
.scene.problema .phone{ background:rgba(26,8,16,.04); border-color:var(--ink-line); box-shadow:0 24px 60px rgba(26,8,16,.14); }
.scene.problema .phone__dot, .scene.problema .phone__cell{ background:rgba(26,8,16,.10); }
.scene.problema .phone__cell--full{ background:rgba(26,8,16,.22); }
.scene.problema .phone__handle{ color:var(--ink-3); }
.scene.problema .phone__stale{ color:var(--ink-4); }

/* Lo que no somos, sobre crema */
.scene.niego .niego__tachado{ color:var(--ink-4); }
.scene.niego .niego__somos{ color:var(--ink-1); }

/* La cursiva de acento, legible sobre crema */
.scene.problema .it, .scene.sistema .it, .scene.oferta .it,
.scene.niego .it, .scene.cta-final .it{ color:var(--accent-ink); }

/* Pastilla del precio sobre crema */
.scene.oferta .oferta__pill{
  background:rgba(142,26,40,.10); border-color:rgba(142,26,40,.35); color:var(--accent-ink);
}

/* Botón blanco no vale sobre crema: pasa a burdeos sólido */
.scene.oferta .btn--white, .scene.cta-final .btn--white{
  background:var(--accent-ink); color:#fff;
}
.scene.oferta .btn--white:hover, .scene.cta-final .btn--white:hover{ background:#7C1428; }

/* La nav sobre secciones claras necesita texto oscuro */
.nav.nav--onlight .nav__logo,
.nav.nav--onlight .nav__links a{ color:var(--ink-2); }
.nav.nav--onlight .nav__cta{ color:var(--ink-1); border-color:var(--ink-line); }

/* ═══════════════════════════════════════════════════════════════
   SECCIONES NUEVAS — reencuadre · casos · números · quién lo hace
   capacidades · footer · páginas legales
   ═══════════════════════════════════════════════════════════════ */


/* ── CASOS — tres tarjetas iguales ─────────────────────────── */
.casos__fila{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px;
}
.caso{ display:flex; flex-direction:column; }
.caso__foto{
  position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  display:grid; place-items:center; margin-bottom:24px;
}
.caso__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.caso__falta{
  font-family:var(--font-mono); font-size:var(--t-eyebrow); letter-spacing:.14em;
  color:var(--tx-4); text-align:center; padding:0 16px;
}
.caso__sector{ color:var(--accent); margin:0 0 8px; }
.caso__negocio{
  font-family:var(--font-display); font-weight:500; font-size:1.5rem;
  line-height:1.2; letter-spacing:-.01em; color:var(--tx-1); margin:0 0 16px;
}
.caso__linea{
  font-size:var(--t-small); line-height:1.5; color:var(--tx-3); margin:0 0 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.caso__num{ margin:16px 0 4px; }
.caso__etiqueta{ color:var(--tx-4); margin:0 0 16px; }
.caso__perfil{
  margin-top:auto; align-self:flex-start; font-size:var(--t-small); color:var(--tx-2);
  border-bottom:1px solid var(--line); padding-bottom:4px;
  transition:color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.caso__perfil:hover{ color:var(--tx-1); border-color:var(--tx-1); }
.casos__nota{ font-size:var(--t-small); color:var(--tx-4); margin:48px 0 0; }
@media(max-width:860px){
  .casos__fila{
    grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; gap:16px;
    padding-bottom:8px; scrollbar-width:none;
  }
  .casos__fila::-webkit-scrollbar{ display:none; }
  .caso{ scroll-snap-align:center; }
}

/* ── LOS NÚMEROS ───────────────────────────────────────────── */
.datos{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.dato{
  position:relative; overflow:hidden; padding:32px;
  border:1px solid var(--line); border-radius:var(--r-md);
}
.dato__titulo{ font-size:1rem; font-weight:600; color:var(--tx-1); margin:0 0 16px; }
.dato__cifra{ margin:0 0 12px; position:relative; z-index:1; }
.dato__pie{ font-size:var(--t-small); color:var(--tx-3); margin:0; position:relative; z-index:1; max-width:34ch; }
.dato__curva{
  position:absolute; right:0; bottom:0; width:52%; height:44%;
  color:var(--accent); opacity:.30; pointer-events:none;
}
@media(max-width:860px){ .datos{ grid-template-columns:1fr; } }

/* ── TIRA DE CAPACIDADES ───────────────────────────────────── */
.caps{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin:64px auto 0; max-width:900px; list-style:none; padding:0;
}
.caps__pill{
  padding:10px 18px; border:1px solid var(--line); border-radius:999px;
  font-size:.9rem; color:var(--tx-2); max-width:none;
}

/* ── QUIÉN LO HACE ─────────────────────────────────────────── */
.scene.quien{ background:var(--bg-a) !important; color:var(--tx-1); }
.quien__lead{ max-width:60ch; margin:0 0 48px; }
.quien__grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.quien__card{ border:1px solid var(--line); border-radius:var(--r-md); padding:32px; }
.quien__foto{
  position:relative;
  width:96px; height:96px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  display:grid; place-items:center; margin-bottom:24px;
}
.quien__foto span{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  color:var(--tx-4); text-align:center; padding:0 8px; line-height:1.3;
}
.quien__foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
.quien__nombre{
  font-family:var(--font-display); font-weight:500; font-size:1.5rem;
  color:var(--tx-1); margin:0 0 8px; letter-spacing:-.01em;
}
.quien__rol{ font-size:var(--t-small); color:var(--accent); margin:0 0 16px; }
.quien__texto{ font-size:var(--t-body); line-height:1.6; color:var(--tx-2); margin:0; }
@media(max-width:860px){ .quien__grid{ grid-template-columns:1fr; } }

/* ── FOOTER ────────────────────────────────────────────────── */
.footer{ background:var(--bg-a) !important; color:var(--tx-3); padding:96px 0 32px; border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; }
.footer__col{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.footer__logo{ display:flex; align-items:center; gap:8px; color:var(--tx-1); margin-bottom:8px; }
.footer__marca{ font-family:var(--font-mono); font-weight:500; letter-spacing:.2em; font-size:var(--t-small); }
.footer__claim{ font-family:var(--font-display); font-size:1.25rem; color:var(--tx-1); margin:0; max-width:22ch; }
.footer__lugar{ font-size:var(--t-small); color:var(--tx-4); margin:0; }
.footer__head{ color:var(--tx-4); margin:0 0 8px; }
.footer__col a{
  font-size:var(--t-small); color:var(--tx-3);
  transition:color var(--dur-ui) var(--ease);
}
.footer__col a:hover{ color:var(--tx-1); }
.footer__bajo{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:64px; padding-top:24px; border-top:1px solid var(--line);
  font-size:var(--t-small); color:var(--tx-4);
}
.footer__legal{ display:flex; gap:24px; }
.footer__legal a{ color:var(--tx-4); transition:color var(--dur-ui) var(--ease); }
.footer__legal a:hover{ color:var(--tx-1); }
@media(max-width:860px){ .footer__grid{ grid-template-columns:1fr; gap:32px; } }

/* ── PÁGINAS LEGALES ───────────────────────────────────────── */
.scene.legal{ background:var(--bg-a); color:var(--tx-1); min-height:100svh; }
.legal__inner{ max-width:68ch; }
.legal__volver{ display:inline-block; font-size:var(--t-small); color:var(--tx-3); margin-bottom:32px; }
.legal__volver:hover{ color:var(--tx-1); }
.legal__texto{ font-size:var(--t-body); line-height:1.7; color:var(--tx-2); margin:24px 0 0; }

/* ── Los números, sobre crema ──────────────────────────────── */
.scene.numeros{ background:var(--bg-b) !important; color:var(--ink-1); }
.scene.numeros .sec__title{ color:var(--ink-1); }
.scene.numeros .eyebrow{ color:var(--accent-ink); }
.scene.numeros .it{ color:var(--accent-ink); }
.scene.numeros .dato{ border-color:var(--ink-line); background:rgba(26,8,16,.03); }
.scene.numeros .dato__titulo{ color:var(--ink-1); }
.scene.numeros .num-xl{ color:var(--ink-1); }
.scene.numeros .dato__pie{ color:var(--ink-3); }
.scene.numeros .dato__curva{ color:var(--accent-ink); opacity:.22; }

/* ── Arreglos de integración ───────────────────────────────── */
/* Los pasos: el texto caía en la columna del número (88px) porque
   la rejilla lo autocolocaba en la fila 2, columna 1. */
.paso__title, .paso__text{ grid-column:2; }
@media(max-width:768px){ .paso__title, .paso__text{ grid-column:1; } }

/* Capacidades y casos, sobre crema */
.scene.sistema .caps__pill{ color:var(--ink-2); border-color:var(--ink-line); }

/* ═══════════════════════════════════════════════════════════════
   CON QUIÉN TRABAJAMOS — escenario propio
   Al entrar, los dos campos se separan del centro y las filas
   responden al puntero. En móvil se apila, sin pin.
   ═══════════════════════════════════════════════════════════════ */
.scene.filtro{ position:relative; overflow:hidden; }
.filtro__fondo{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 60% at 26% 42%, rgba(190,34,51,.16) 0%, rgba(190,34,51,0) 70%),
    radial-gradient(58% 60% at 74% 58%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 70%);
}
.filtro__stage{ position:relative; z-index:1; }
.filtro__grid{ position:relative; }

/* Eje central: separa los dos campos */
.filtro__eje{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--line) 12%, var(--line) 88%, rgba(255,255,255,0));
  transform-origin:50% 0;
}
@media(min-width:861px){
  .filtro__col--no::before{ display:none; } /* lo sustituye el eje */
}

/* Filas: cada una es un objeto que responde */
.filtro__list li{
  position:relative; padding:8px 12px; margin-bottom:8px; border-radius:var(--r-sm);
  transition:background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
             transform var(--dur-ui) var(--ease);
}
.filtro__ico{ transition:transform var(--dur-ui) var(--ease); }
@media(hover:hover){
  .filtro__col--si .filtro__list li:hover{
    background:rgba(190,34,51,.12);
    color:var(--tx-1);
    transform:translateX(4px);
  }
  .filtro__col--si .filtro__list li:hover .filtro__ico{ transform:scale(1.15); }
  .filtro__col--no .filtro__list li:hover{
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.7);
    transform:translateX(-4px);
  }
}
/* Los dos campos se mueven con el cursor, cada uno a su ritmo */
.filtro__col{ will-change:transform; }

/* Las líneas de caso van con nowrap + ellipsis: sin min-width:0 su
   ancho mínimo infla la rejilla y desborda entre 861 y 1000px. */
.casos__fila > *, .caso, .caso__linea{ min-width:0; }

/* ═══════════════════════════════════════════════════════════════
   PORTADA — texto a la izquierda, vídeo a la derecha.
   Sin mosaico: el peso visual lo lleva el vídeo, no el fondo.
   ═══════════════════════════════════════════════════════════════ */
.scene.hero{
  min-height:100svh; height:auto; padding:calc(var(--nav-h) + 64px) 0 96px;
  display:flex; align-items:center; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, #26101A 0%, var(--bg-a) 55%, #0D0308 100%);
}
/* Profundidad: un halo detrás del vídeo, no un patrón */
.hero__aura{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 52% at 72% 42%, rgba(190,34,51,.28) 0%, rgba(190,34,51,0) 70%),
    radial-gradient(38% 44% at 18% 78%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 70%);
}
.hero .hero__grain{ position:absolute; inset:0; z-index:1; opacity:.05; pointer-events:none; }

/* Portada centrada: el titular manda en el eje, y el video debajo
   a lo ancho. Antes era texto a la izquierda y video a la derecha,
   que partia la atencion en dos. */
.hero__grid{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:56px;
}
.hero__copy{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero__title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.8rem,6vw,5rem); line-height:1.02; letter-spacing:-.03em;
  color:var(--tx-1); margin:0 0 24px; max-width:18ch;
}
.hero__sub{ font-size:var(--t-body); color:var(--tx-2); margin:0 0 40px; max-width:46ch; }
.hero__actions{ margin:0; display:flex; align-items:center; justify-content:center; gap:24px; }

/* ── El vídeo ──────────────────────────────────────────────── */
.hero__vsl{ margin:0; width:100%; max-width:860px; text-align:center; }
.vsl{
  position:relative; aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden;
  background:#0D0308; border:1px solid var(--line);
  /* profundidad de verdad: sombra larga + luz de canto arriba */
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 40px 80px -20px rgba(0,0,0,.75),
    0 8px 24px rgba(0,0,0,.5);
  display:grid; place-items:center;
}
.vsl__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vsl__falta{
  font-family:var(--font-mono); font-size:var(--t-eyebrow); letter-spacing:.14em;
  color:var(--tx-4); text-align:center; padding:0 24px;
}
.vsl__play{
  position:absolute; z-index:2; width:72px; height:72px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.25); background:rgba(20,6,12,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--tx-1); cursor:pointer; display:grid; place-items:center;
  transition:transform var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease),
             background var(--dur-ui) var(--ease);
}
.vsl__play svg{ width:26px; height:26px; fill:currentColor; margin-left:3px; }
.vsl__play:hover{ transform:scale(1.06); border-color:var(--tx-1); background:rgba(20,6,12,.75); }
.vsl.is-playing .vsl__play, .vsl.is-playing .vsl__falta{ opacity:0; pointer-events:none; }
.vsl__pie{ font-size:var(--t-small); color:var(--tx-4); margin:16px 0 0; text-align:center; }

@media(max-width:860px){
  .scene.hero{ padding:calc(var(--nav-h) + 32px) 0 64px; min-height:auto; }
  .hero__grid{ gap:32px; }
  .hero__title{ font-size:clamp(2.2rem,8vw,3rem); max-width:none; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ width:100%; text-align:center; }
  .vsl{ aspect-ratio:16/11; }
  .vsl__play{ width:56px; height:56px; }
  .hero__scroll-hint{ display:none; }
}

/* ── Menos plano: relieve en las superficies de toda la web ── */
.caso__foto, .dato, .quien__card, .oferta__card, .informe{
  box-shadow:0 24px 48px -24px rgba(0,0,0,.6);
}
.scene.problema, .scene.sistema, .scene.oferta, .scene.niego, .scene.cta-final,
.scene.numeros{
  background-image:radial-gradient(90% 60% at 50% 0%, rgba(26,8,16,.05) 0%, rgba(26,8,16,0) 60%);
}
.scene.casos, .scene.filtro, .scene.quien, .scene.faq{
  background-image:radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 60%);
}

/* ═══════════════════════════════════════════════════════════════
   EL REENCUADRE — la palabra cambia mientras bajas.
   Es la única sección que se fija: dura una pantalla y suelta.
   ═══════════════════════════════════════════════════════════════ */
.scene.reenc{ background:var(--bg-a) !important; color:var(--tx-1); }
.reenc__inner{ min-height:60svh; display:flex; flex-direction:column; justify-content:center; }
.reenc__pre, .reenc__real{
  font-family:var(--font-mono); font-size:var(--t-eyebrow); text-transform:uppercase;
  letter-spacing:.2em; margin:0; color:var(--tx-4);
}
.reenc__real{ color:var(--accent); }
.reenc__swap{ position:relative; margin:24px 0; min-height:1.1em; }
.reenc__pal{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.4rem,7vw,5rem); line-height:1.05; letter-spacing:-.03em;
}
.reenc__pal--fuera{ position:relative; color:var(--tx-2); width:max-content; max-width:100%; }
/* La tachadura se dibuja de izquierda a derecha con el scroll */
.reenc__tacha{
  position:absolute; left:0; top:52%; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
}
.reenc__pal--dentro{
  position:absolute; left:0; top:0; color:var(--accent);
  font-style:italic; font-weight:400;
}
.reenc__text{
  font-size:var(--t-body); line-height:1.7; color:var(--tx-2);
  max-width:52ch; margin:48px 0 0;
}
@media(max-width:860px){
  .reenc__inner{ min-height:auto; }
  .reenc__swap{ margin:16px 0; }
}

/* El titular se descubre tras una máscara: sin recorte externo */
.sec__title, .hero__title{ will-change:clip-path, transform, opacity; }


/* Un hueco ocupado: es un cliente */
.agenda__hueco.is-lleno{
  background:var(--accent); border-color:var(--accent);
}
@media(max-width:860px){
  .reenc__inner{ grid-template-columns:1fr; gap:32px; }
  .agenda{ max-width:none; }
  .agenda__hueco{ height:22px; }
}

/* ── El reencuadre, a dos columnas: texto + reels en 3D ────── */
.reenc__inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
}
.reenc__texto{ display:flex; flex-direction:column; justify-content:center; }
.reenc__visual{ display:flex; justify-content:center; perspective:1200px; }

.pila{
  position:relative; width:100%; max-width:420px; height:420px;
  transform-style:preserve-3d; will-change:transform;
}
.pila__card{
  position:absolute; top:50%; left:50%; width:190px; aspect-ratio:9/16;
  margin:-168px 0 0 -95px;              /* centrada */
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0D0308;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.8);
  display:grid; place-items:center;
  transform-style:preserve-3d;
}
.pila__card--izq   { transform:translate3d(-110px,18px,-90px) rotateY(24deg) rotate(-4deg); }
.pila__card--centro{ transform:translate3d(0,0,0) rotateY(0deg); z-index:2; }
.pila__card--der   { transform:translate3d(110px,26px,-140px) rotateY(-24deg) rotate(5deg); }
.pila__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) contrast(1.05) saturate(.75);
}
/* Si en vez de vídeo pones una foto, se comporta igual */
.pila__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.72) contrast(1.05) saturate(.8);
}
/* La luz del acento por detrás de la pila */
.reenc__visual::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(190,34,51,.30) 0%, rgba(190,34,51,0) 70%);
  pointer-events:none;
}
@media(max-width:860px){
  .reenc__inner{ grid-template-columns:1fr; gap:32px; }
  .pila{ height:320px; max-width:none; }
  .pila__card{ width:140px; margin:-124px 0 0 -70px; }
  .pila__card--izq{ transform:translate3d(-78px,14px,-70px) rotateY(24deg) rotate(-4deg); }
  .pila__card--der{ transform:translate3d(78px,20px,-110px) rotateY(-24deg) rotate(5deg); }
}

/* El mazo de casos llega en 3D: necesita perspectiva propia */
.casos__carousel{ perspective:1400px; }
.casos__deck{ transform-style:preserve-3d; will-change:transform, opacity; }

/* El halo que se enciende cuando aterriza el mazo de casos.
   Se sale por arriba a proposito: cose el hueco oscuro que queda
   entre el reencuadre que se va y los casos que llegan. */
.scene.casos{ position:relative; }
.casos__aura{
  position:absolute; top:-440px; left:0; right:0; bottom:0;
  pointer-events:none; z-index:0;
  background:radial-gradient(46% 42% at 32% 62%, rgba(190,34,51,.30) 0%, rgba(190,34,51,.10) 46%, rgba(190,34,51,0) 74%);
}
.scene.casos .container{ position:relative; z-index:1; }

/* ============================================================
   ESCENA · EN LO QUE SOMOS EXPERTOS
   Tecnica propia: rejilla de simbolos dibujados a trazo. La idea
   es que se reconozca cada cosa por el dibujo antes de leer nada,
   asi que el simbolo manda y el texto es una linea corta.
   ============================================================ */
.scene.expertos{ background:var(--bg-a); position:relative; }

.bento{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
.pieza{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:40px 24px 32px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.025);
  transition:border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.pieza:hover{ border-color:rgba(190,34,51,.55); background:rgba(255,255,255,.05); }

.pieza__ico{
  display:flex; align-items:center; justify-content:center;
  height:72px; margin-bottom:24px; color:var(--accent);
}
.pieza__marca{
  height:72px; width:auto; display:block;
  transition:transform var(--dur-ui) var(--ease);
}
.pieza:hover .pieza__marca{ transform:translateY(-4px); }

.pieza__title{
  margin:0 0 6px; color:var(--tx-100);
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.15rem, 1.7vw, 1.45rem); line-height:1.2;
}
.pieza__text{ margin:0; color:var(--tx-72); font-size:var(--t-small); line-height:1.5; }

/* Cierre: la misma llamada de siempre, sin inventar patrones */
.expertos__cierre{
  margin-top:40px; padding:28px 32px;
  border:1px solid var(--line); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.expertos__pregunta{ margin:0; color:var(--tx-100); font-size:var(--t-body); }

/* Lo que se contrata suelto: nota al pie, no compite con la rejilla */
.sueltos{ margin-top:80px; padding-top:32px; border-top:1px solid var(--line); }
.sueltos__lista{
  list-style:none; margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px;
}
.suelto{ display:flex; flex-direction:column; gap:6px; }
.suelto strong{ color:var(--tx-100); font-weight:600; font-size:var(--t-body); }
.suelto span{ color:var(--tx-72); font-size:var(--t-small); line-height:1.6; }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .pieza{ padding:32px 16px 24px; }
  .pieza__ico, .pieza__marca{ height:56px; }
  .pieza__ico{ margin-bottom:18px; }
  .expertos__cierre{ flex-direction:column; align-items:flex-start; }
  .expertos__cierre .btn{ width:100%; text-align:center; }
  .sueltos{ margin-top:56px; }
  .sueltos__lista{ grid-template-columns:1fr; gap:24px; }
}

/* ============================================================
   ESCENA 2 · TE BUSCAN, TE ENCUENTRAN, SE VAN
   Tecnica propia de esta escena: una secuencia en tres pasos que
   se representa sola al llegar. Cuenta literalmente lo que dice
   el texto de al lado: se teclea el nombre del negocio, sale el
   resultado y se abre un perfil parado hace ocho meses.
   Los tres pasos son clases en #busca: paso-resultado, paso-perfil.
   ============================================================ */
.busca{
  width:300px; display:flex; flex-direction:column; gap:14px;
  /* Alto reservado desde el principio: al aparecer los pasos nada salta */
  min-height:520px;
}

/* 1 · la barra de busqueda */
.busca__barra{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--r-pill);
  border:1px solid var(--ink-line); background:rgba(26,8,16,.04);
  font-size:var(--t-small); color:var(--ink-1);
}
.busca__lupa{ width:16px; height:16px; flex:none; color:var(--ink-3); }
.busca__texto{ white-space:nowrap; }
.busca__cursor{
  width:1.5px; height:15px; background:var(--accent-ink); flex:none;
  animation:parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* 2 · el resultado */
.busca__resultado{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-radius:var(--r-sm);
  opacity:0; transform:translateY(8px);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease),
             background-color 260ms var(--ease);
}
.busca.paso-resultado .busca__resultado{ opacity:1; transform:none; }
/* Al abrirlo se marca, como cuando alguien lo pulsa */
.busca.paso-perfil .busca__resultado{ background:rgba(26,8,16,.06); }
.busca__avatar{
  width:34px; height:34px; border-radius:var(--r-pill); flex:none;
  background:rgba(26,8,16,.10);
}
.busca__quien{ display:flex; flex-direction:column; line-height:1.3; }
.busca__quien strong{ font-size:var(--t-small); font-weight:600; color:var(--ink-1); }
.busca__quien span{ font-size:var(--t-small); color:var(--ink-4); }

/* 3 · el perfil parado */
.scene.problema .phone{
  width:100%; margin:0;
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity 420ms var(--ease), transform 420ms var(--ease);
}
.busca.paso-perfil .phone{ opacity:1; transform:none; }
.phone__cell{ position:relative; }
/* La fecha es el remate: llega la ultima y en rojo */
.scene.problema .phone__stale{
  opacity:0; transition:opacity 380ms var(--ease) 520ms;
}
.busca.paso-perfil .phone__stale{ opacity:1; color:var(--accent-ink); font-weight:600; }

/* Repetir: discreto, solo aparece cuando la secuencia ha terminado */
.busca__repetir{
  align-self:flex-start; margin-top:2px;
  border:0; background:none; padding:6px 0; cursor:pointer;
  font-family:inherit; font-size:var(--t-small); color:var(--ink-4);
  opacity:0; pointer-events:none;
  transition:opacity 300ms var(--ease), color var(--dur-ui) var(--ease);
}
.busca.paso-perfil .busca__repetir{ opacity:1; pointer-events:auto; }
.busca__repetir:hover{ color:var(--ink-1); }
.busca__repetir::before{ content:"\21ba"; margin-right:7px; }

@media (max-width:900px){
  .busca{ width:100%; max-width:340px; margin:0 auto; min-height:0; }
}
@media (prefers-reduced-motion: reduce){
  .busca__cursor{ animation:none; }
  .busca__resultado, .scene.problema .phone,
  .scene.problema .phone__stale, .busca__repetir{ transition:none; }
}

/* Nada de arrastre lateral. Las tarjetas del mazo de casos asoman por
   el borde a proposito y creaban 19px de scroll horizontal a ciertos
   anchos. clip en vez de hidden: recorta sin crear un contenedor de
   scroll, asi que no rompe los pins ni el sticky de la web. */
html{ overflow-x:clip; }

/* El recorte por defecto de las tarjetas es "center top", que va bien
   para un retrato de una persona. En la foto de Coches Morales las
   dos caras estan a media altura, asi que se baja el encuadre para
   que no salgan solo el cartel y el techo. */
.caso-card__photo img.foto--morales{ object-position: center 46%; }

/* Cabecera dentro de la tarjeta de la oferta: la lista ya no repite
   lo que incluye (eso esta en los pasos y en las pastillas de arriba),
   ahora dice que es lo que hace variar el precio. */
.oferta__cabecera{
  margin:0 0 20px; font-family:var(--font-mono);
  font-size:var(--t-eyebrow); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink);
}

/* El titular partia como "Contenido que llena tu / agenda." y dejaba
   una palabra suelta abajo. Manteniendo "tu agenda." de una pieza,
   parte por donde toca: "Contenido que llena / tu agenda." */
.hero__title .it{ white-space:nowrap; }

/* ============================================================
   CINTA DE MARCAS
   Tecnica propia: una cinta en movimiento continuo. Los logos van
   todos del mismo blanco — un muro de logos de colores distintos
   queda a tablon de anuncios y le roba el sitio a la marca de casa.
   Al pasar por encima, la cinta se para y el logo se enciende.
   ============================================================ */
.marcas{
  background:var(--bg-a); padding:56px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.marcas__eyebrow{
  margin:0 0 32px; text-align:center;
  font-family:var(--font-mono); font-size:var(--t-eyebrow);
  letter-spacing:.2em; text-transform:uppercase; color:var(--tx-4);
}
/* Los bordes se difuminan: la cinta no "empieza" ni "acaba" */
.marcas__ventana{
  display:flex; width:max-content;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marcas__pista{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:72px; padding-right:72px;
  animation:marcasPasa 38s linear infinite;
}
@keyframes marcasPasa{ to{ transform:translateX(-100%); } }
.marcas:hover .marcas__pista{ animation-play-state:paused; }

.marcas__item{ flex:none; }
.marcas__item img{
  display:block; height:52px; width:auto; max-width:190px;
  object-fit:contain;
  /* cualquier color de logo pasa a blanco */
  filter:brightness(0) invert(1);
  opacity:.55;
  transition:opacity var(--dur-ui) var(--ease);
}
.marcas__item img:hover{ opacity:1; }

@media (max-width:900px){
  .marcas{ padding:40px 0; }
  .marcas__pista{ gap:48px; padding-right:48px; animation-duration:26s; }
  .marcas__item img{ height:40px; max-width:145px; }
}
@media (prefers-reduced-motion: reduce){
  .marcas__pista{ animation:none; }
  .marcas__ventana{ flex-wrap:wrap; justify-content:center; width:auto; }
}


/* ════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES — estructura de documento
   El aviso legal y la privacidad son textos largos: necesitan
   jerarquía, listas y tablas. Misma paleta cerrada, misma escala.
   ════════════════════════════════════════════════════════════════ */
.scene.legal{ padding-block:var(--s-96) var(--s-96); }
.legal__inner{ max-width:72ch; }

.legal__meta{
  font-family:var(--font-mono); font-size:var(--t-eyebrow);
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4);
  margin:0 0 var(--s-48); padding-bottom:var(--s-24);
  border-bottom:1px solid var(--line);
}

/* Los epígrafes numerados llevan el número en mono y colgado,
   como los pasos del sistema: se escanea el documento de un vistazo. */
.legal__h2{
  font-family:var(--font-display); font-size:var(--t-h3);
  font-weight:500; line-height:1.25; color:var(--tx-1);
  margin:var(--s-48) 0 var(--s-16);
}
.legal__h2 span{
  display:block; font-family:var(--font-mono); font-size:var(--t-eyebrow);
  font-weight:400; letter-spacing:.2em; color:var(--accent);
  margin-bottom:var(--s-8);
}
.legal__h3{
  font-size:var(--t-body); font-weight:600; color:var(--tx-1);
  margin:var(--s-32) 0 var(--s-8);
}
.legal__texto{
  font-size:var(--t-body); line-height:1.7; color:var(--tx-2);
  margin:0 0 var(--s-16);
}
.legal__texto:last-child{ margin-bottom:0; }
.legal__texto a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal__texto a:hover{ color:var(--tx-1); }
.legal__texto strong{ color:var(--tx-1); font-weight:600; }

/* Listas: el bullet es una raya, no un punto — no existe otro
   marcador en el proyecto. */
.legal__lista{ margin:0 0 var(--s-16); padding:0; }
.legal__lista li{
  position:relative; padding-left:var(--s-24);
  font-size:var(--t-body); line-height:1.7; color:var(--tx-2);
  margin-bottom:var(--s-8);
}
.legal__lista li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:10px; height:1.5px; background:var(--accent);
}

/* Ficha de datos (titular, NIF, domicilio…): pares clave–valor. */
.legal__ficha{
  margin:var(--s-24) 0; padding:var(--s-24);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s-12) var(--s-24);
}
.legal__ficha dt{
  font-family:var(--font-mono); font-size:var(--t-eyebrow);
  text-transform:uppercase; letter-spacing:.14em; color:var(--tx-4);
  padding-top:3px;
}
.legal__ficha dd{ margin:0; font-size:var(--t-small); color:var(--tx-2); overflow-wrap:anywhere; }
@media (max-width:560px){
  .legal__ficha{ grid-template-columns:1fr; gap:var(--s-4) 0; }
  .legal__ficha dd{ margin-bottom:var(--s-12); }
}

/* Tabla de tratamientos del RGPD: finalidad · base legal · plazo.
   En móvil se rompe en bloques con la cabecera como etiqueta. */
.legal__tablaWrap{ overflow-x:auto; margin:var(--s-24) 0; }
.legal__tabla{
  width:100%; border-collapse:collapse; font-size:var(--t-small);
  min-width:520px;
}
.legal__tabla th,
.legal__tabla td{
  text-align:left; vertical-align:top;
  padding:var(--s-12) var(--s-16);
  border-bottom:1px solid var(--line);
}
.legal__tabla th{
  font-family:var(--font-mono); font-size:var(--t-eyebrow);
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--tx-4); font-weight:400; white-space:nowrap;
}
.legal__tabla td{ color:var(--tx-2); line-height:1.6; }
.legal__tabla tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.legal__tabla tbody tr:last-child td{ border-bottom:0; }