/* =========================================================================
   SYSTEMA — Landing VSL
   Hoja de estilos única. Sin dependencias ni frameworks.
   Orden: tokens → base → utilidades → secciones → responsive → animaciones
   ========================================================================= */

/* ---------- 1. Tokens de marca -------------------------------------------- */
:root {
  /* Colores */
  --crema: #F7F5F0;
  --arena: #EFEBE1;
  --papel: #FFFFFF;
  --marino: #1B2438;
  --marino-oscuro: #0D1526;
  --azul: #4A5E8F;
  --amarillo: #F2D983;
  --verde: #2F6B4F;
  --menta: #C7F5C7;
  --menta-texto: #1E4D36;

  --texto: #444D63;
  --texto-fuerte: #2C3549;
  --texto-suave: #5A6275;
  --texto-claro: #A9B0C0;
  --linea: #DCD6C8;
  --linea-suave: #E6E1D6;
  --linea-fuerte: #CFC8B8;

  /* Panel "lo que te han vendido" */
  --basura-fondo: #E4DED1;
  --basura-tinta: #6B6659;
  --basura-tinta-suave: #8A8577;
  --basura-borde: #B3AB98;

  /* Tipografías */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --mano: 'Caveat', 'Segoe Script', cursive;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Escala tipográfica fluida (mínimo móvil → máximo escritorio) */
  --t-h1: clamp(34px, 4.4vw, 62px);
  --t-h2: clamp(30px, 3.4vw, 48px);
  --t-h3: clamp(19px, 1.5vw, 22px);
  --t-lead: clamp(17px, 1.45vw, 20px);
  --t-body: clamp(15px, 1.2vw, 17px);
  --t-small: clamp(13px, 1vw, 16px);
  --t-mono: clamp(10px, 0.85vw, 12px);

  /* Medidas */
  --ancho: 1120px;
  --ancho-ancho: 1280px;
  --ancho-texto: 820px;
  --gutter: 20px;
  --seccion: clamp(64px, 7.5vw, 112px);
  --radio: 20px;
}

/* ---------- 2. Base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--marino);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; margin: 0; }
h1 { font-size: var(--t-h1); line-height: 1.14; letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); line-height: 1.12; text-wrap: balance; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
p  { margin: 0; }

a { color: var(--marino); }
a:hover { color: var(--azul); }

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Utilidades ------------------------------------------------- */
.contenedor { width: min(var(--ancho), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.contenedor--ancho { width: min(var(--ancho-ancho), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.contenedor--texto { width: min(var(--ancho-texto), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.centrado { text-align: center; display: flex; flex-direction: column; align-items: center; }
.seccion { padding-block: var(--seccion); }
.seccion--arena { background: var(--arena); }
.seccion--marino { background: var(--marino); color: var(--crema); }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Palabra clave: cursiva de la misma familia + subrayado amarillo */
.clave {
  font-style: italic;
  background-image: linear-gradient(var(--amarillo), var(--amarillo));
  background-size: 100% 0.3em;
  background-position: 0 88%;
  background-repeat: no-repeat;
  padding-inline: 4px;
}
.clave--marino { background-image: none; color: var(--amarillo); padding-inline: 0; }

.mono {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.mano { font-family: var(--mano); font-weight: 600; color: var(--azul); }

/* Botón principal (mismo estilo en toda la página) */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 32px;
  background: var(--marino);
  color: var(--crema);
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1;
  box-shadow: 0 1px 0 var(--marino-oscuro), 0 12px 28px rgba(27, 36, 56, 0.2);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.boton:hover { background: var(--marino-oscuro); color: var(--crema); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton__nota { margin-top: 16px; font-family: var(--mono); font-size: var(--t-mono); color: var(--texto-suave); }

/* ---------- 4. Hero ------------------------------------------------------- */
.hero {
  background: var(--crema);
  padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(64px, 7vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  background: var(--marino);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema);
}
.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amarillo);
  flex-shrink: 0;
}

.hero__titulo {
  margin-top: clamp(24px, 2.5vw, 32px);
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* En escritorio el titular va en dos líneas exactas */
.hero__titulo > span { white-space: nowrap; }

.pastilla-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.24em;
  padding: 0.1em 0.3em 0.13em 0.22em;
  margin-inline: 0.06em;
  background: var(--papel);
  border: 1px solid #E2DDD1;
  border-radius: 0.3em;
  box-shadow: 0 2px 0 #E2DDD1, 0 14px 30px rgba(27, 36, 56, 0.08);
  transform: rotate(-2deg);
  vertical-align: 0.08em;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pastilla-ig svg { width: 0.95em; height: 0.95em; }

.marcado { position: relative; display: inline-block; white-space: nowrap; }
.marcado__fondo {
  position: absolute;
  left: -0.1em; right: -0.12em; bottom: 0.1em;
  height: 40%;
  background: var(--amarillo);
  border-radius: 4px;
}
.marcado__texto { position: relative; font-style: italic; }

.hero__entradilla {
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 660px;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--texto);
  text-wrap: pretty;
}

/* --- VSL --- */
.vsl {
  position: relative;
  width: min(1000px, 100%);
  margin-top: clamp(28px, 4vw, 64px);
}
.vsl__nota {
  position: absolute;
  left: -196px;
  top: -78px;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  transform: rotate(-6deg);
  pointer-events: none;
}
.vsl__nota span { font-size: 32px; line-height: 1; }
.vsl__flecha--abajo { display: none; }
.vsl__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  background-color: var(--marino-oscuro);
  background-image:
    linear-gradient(rgba(247, 245, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 245, 240, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  box-shadow: 0 1px 0 #E2DDD1, 0 30px 60px rgba(13, 21, 38, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsl__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vsl__play {
  position: relative;
  width: clamp(68px, 7vw, 104px);
  height: clamp(68px, 7vw, 104px);
  border: 0;
  border-radius: 50%;
  background: var(--amarillo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease;
}
.vsl__play:hover { transform: scale(1.06); }
.vsl__play svg { width: 34%; height: 34%; }
.vsl__anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--amarillo);
  pointer-events: none;
}
.vsl__marca {
  position: absolute;
  right: 28px;
  bottom: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(247, 245, 240, 0.55);
}
.vsl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hero__cta { margin-top: clamp(24px, 3vw, 44px); }

/* ---------- 5. Referentes ------------------------------------------------- */
.referentes { background: var(--crema); border-top: 1px solid var(--linea-suave); }

.polaroids {
  width: min(var(--ancho-ancho), 100% - (var(--gutter) * 2));
  margin: clamp(28px, 4vw, 48px) auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 2.2vw, 36px);
  padding-block: 24px 36px;
}
.polaroid {
  flex-shrink: 0;
  width: clamp(150px, 15vw, 220px);
  padding: 12px 12px 18px;
  background: var(--papel);
  box-shadow: 0 1px 2px rgba(27, 36, 56, 0.08), 0 14px 28px rgba(27, 36, 56, 0.12);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.polaroid:nth-child(1) { transform: rotate(-3deg); }
.polaroid:nth-child(2) { transform: rotate(2deg) translateY(10px); }
.polaroid:nth-child(3) { transform: rotate(-1.5deg); }
.polaroid:nth-child(4) { transform: rotate(3deg) translateY(6px); }
.polaroid:nth-child(5) { transform: rotate(-2.5deg); }
.polaroid img,
.polaroid .polaroid__hueco {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.polaroid__hueco {
  background-color: #ECE8DE;
  background-image: repeating-linear-gradient(135deg, rgba(27, 36, 56, 0.06) 0 1px, transparent 1px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-suave);
}
.polaroid figcaption { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.polaroid__nombre { font-family: var(--mano); font-weight: 600; font-size: clamp(19px, 1.8vw, 26px); line-height: 1; color: var(--marino); }
.polaroid__rol { font-family: var(--mono); font-size: clamp(8.5px, 0.75vw, 10px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }

.cifras {
  margin-top: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.cifra { padding: clamp(20px, 2.5vw, 32px) clamp(18px, 2.5vw, 36px); display: flex; flex-direction: column; gap: 6px; }
.cifra + .cifra { border-left: 1px solid var(--linea); }
.cifra__numero { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.1vw, 44px); letter-spacing: -0.03em; line-height: 1.05; color: var(--marino); }
.cifra__texto { font-size: var(--t-small); line-height: 1.5; color: var(--texto); }

/* ---------- 6. Metodología (paneles A y B) -------------------------------- */
.metodo__intro { max-width: 820px; }
.metodo__intro p { margin-top: clamp(16px, 1.8vw, 22px); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: var(--texto); text-wrap: pretty; }

.paneles {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.paneles__flecha {
  position: absolute;
  left: calc(50% - 26px);
  top: calc(50% - 26px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--crema);
  border: 1px solid var(--linea);
  box-shadow: 0 10px 24px rgba(27, 36, 56, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* --- Panel A: lo que te han vendido (escenario a escala) --- */
.basura {
  container-type: inline-size;
  position: relative;
  border: 1.5px dashed var(--basura-borde);
  border-radius: var(--radio);
  background-color: var(--basura-fondo);
  background-image: radial-gradient(rgba(94, 89, 77, 0.13) 1px, transparent 1px);
  background-size: 14px 14px;
  overflow: hidden;
}
.basura--ancha { aspect-ratio: 544 / 560; width: min(100%, 544px); justify-self: center; }
.basura--estrecha { aspect-ratio: 350 / 430; width: min(100%, 350px); justify-self: center; display: none; }
/* --u = 1px del diseño original. Todo el montón se mide en múltiplos de --u,
   así que escala con el ancho del panel sin deformarse.                      */
.basura__escenario { position: absolute; top: 0; left: 0; --u: 1px; }
.basura--ancha .basura__escenario { --u: calc(100cqw / 544); width: calc(544 * var(--u)); height: calc(560 * var(--u)); }
.basura--estrecha .basura__escenario { --u: calc(100cqw / 350); width: calc(350 * var(--u)); height: calc(430 * var(--u)); }

.basura__cabecera {
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(20 * var(--u)) calc(28 * var(--u));
  display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u));
  border-bottom: 1px dashed #C4BCA9;
  font-family: var(--mono); color: var(--basura-tinta);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.basura__cabecera span:last-child { text-transform: none; letter-spacing: 0.04em; color: var(--basura-tinta-suave); }
.basura__garabato { position: absolute; left: 0; top: calc(60 * var(--u)); }

.basura__posit {
  position: absolute;
  padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: #ECE1B4;
  box-shadow: 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(60, 50, 30, 0.16);
  transform: rotate(-8deg);
}
.basura__cinta { position: absolute; top: -9em; left: 34%; width: calc(58 * var(--u)); height: calc(20 * var(--u)); background: rgba(255, 255, 255, 0.55); transform: rotate(4deg); }
.basura__tachado { display: block; font-family: var(--mano); font-weight: 600; line-height: 1; color: var(--basura-tinta); text-decoration: line-through; text-decoration-thickness: 2px; }
.basura__subtexto { display: block; margin-top: calc(6 * var(--u)); font-family: var(--mano); font-weight: 500; line-height: 1.1; color: var(--basura-tinta-suave); }

.basura__cupon {
  position: absolute;
  padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u));
  background: #F3EFE4;
  border: 2px dashed #A39C8B;
  border-radius: calc(6 * var(--u));
  transform: rotate(5deg);
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
}
.basura__cupon::before, .basura__cupon::after {
  content: ""; position: absolute; top: calc(50% - calc(9 * var(--u)));
  width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: var(--basura-fondo);
}
.basura__cupon::before { left: -11em; }
.basura__cupon::after { right: -11em; }
.basura__cupon-label { font-family: var(--mono); letter-spacing: 0.1em; color: var(--basura-tinta-suave); }
.basura__cupon-titulo { font-family: var(--display); font-weight: 700; line-height: 1.15; color: #5E594D; }

.basura__sello { position: absolute; transform: rotate(10deg); }
.basura__sello svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.basura__sello span {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--display); font-style: italic; font-weight: 700; line-height: 1; color: #5E594D;
}
.basura__sello small { margin-top: calc(4 * var(--u)); font-family: var(--mono); font-style: normal; font-weight: 400; color: var(--basura-tinta); }

.basura__tira {
  position: absolute;
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  background: #FAF8F2;
  color: var(--basura-tinta);
  clip-path: polygon(0% 8%, 6% 0%, 12% 9%, 19% 1%, 27% 8%, 35% 0%, 44% 7%, 52% 1%, 61% 9%, 69% 0%, 77% 8%, 85% 1%, 93% 9%, 100% 2%, 100% 92%, 94% 100%, 87% 91%, 79% 99%, 71% 92%, 63% 100%, 55% 91%, 47% 99%, 39% 92%, 31% 100%, 23% 91%, 15% 99%, 7% 92%, 0% 100%);
}
.basura__arrugado { position: absolute; }
.basura__arrugado svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.basura__arrugado span {
  position: absolute; inset: 0; padding-inline: calc(14 * var(--u));
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mano); font-weight: 600; line-height: 1; color: var(--basura-tinta);
  transform: rotate(-6deg);
}
.basura__chip {
  position: absolute;
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  background: #F3EFE4;
  border: 1px solid #BDB5A3;
  border-radius: calc(8 * var(--u));
  color: var(--basura-tinta);
}
.basura__interrogante { position: absolute; font-family: var(--mano); font-weight: 600; line-height: 1; color: #A39C8B; }
.basura__pie { position: absolute; display: flex; align-items: center; gap: calc(10 * var(--u)); }
.basura__pie span { font-family: var(--mano); font-weight: 600; color: #5E594D; }

/* --- Panel B: lo que instalamos --- */
.sistema {
  position: relative;
  border-radius: var(--radio);
  background-color: var(--marino-oscuro);
  background-image:
    radial-gradient(circle at 88% 0%, rgba(74, 94, 143, 0.55), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(242, 217, 131, 0.10), transparent 45%);
  box-shadow: 0 30px 60px rgba(13, 21, 38, 0.25);
  overflow: hidden;
  padding: clamp(18px, 1.8vw, 22px) clamp(16px, 2vw, 28px) clamp(18px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sistema__cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sistema__titulo { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--menta); }
.sistema__estado {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  border: 1px solid rgba(247, 245, 240, 0.14);
  border-radius: 999px;
  font-family: var(--mono); font-size: calc(var(--t-mono) - 1px); color: #C9CEDA;
}
.sistema__estado .punto { width: 7px; height: 7px; background: var(--menta); }

.ventana {
  flex-grow: 1;
  border-radius: 14px;
  background: rgba(247, 245, 240, 0.04);
  border: 1px solid rgba(247, 245, 240, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ventana__barra {
  height: 38px; flex-shrink: 0;
  padding-inline: 14px;
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid rgba(247, 245, 240, 0.08);
}
.ventana__punto { width: 9px; height: 9px; border-radius: 50%; background: rgba(247, 245, 240, 0.18); }
.ventana__ruta { margin-left: 8px; font-family: var(--mono); font-size: calc(var(--t-mono) - 1px); color: rgba(247, 245, 240, 0.55); }

.modulos { position: relative; padding: clamp(14px, 1.4vw, 18px); display: flex; flex-direction: column; gap: clamp(10px, 1vw, 12px); }
.modulos__linea { position: absolute; left: calc(clamp(14px, 1.4vw, 18px) + 13px); top: 0; bottom: 0; width: 4px; pointer-events: none; }
.modulos__linea svg { position: absolute; left: 0; top: 0; width: 4px; height: 100%; }
.modulos__bolita { position: absolute; left: calc(clamp(14px, 1.4vw, 18px) + 8px); top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 3px var(--marino-oscuro); }

.modulo { position: relative; display: flex; align-items: center; gap: clamp(10px, 1vw, 12px); }
.modulo__numero {
  flex-shrink: 0;
  width: clamp(26px, 2.2vw, 30px);
  height: clamp(26px, 2.2vw, 30px);
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--marino);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(12px, 1vw, 13px);
  z-index: 1;
}
.modulo__caja {
  flex-grow: 1;
  display: flex; flex-direction: column; gap: 5px;
  padding: clamp(10px, 1vw, 12px) clamp(11px, 1.2vw, 14px);
  border-radius: 12px;
  background: rgba(247, 245, 240, 0.06);
  border: 1px solid rgba(247, 245, 240, 0.10);
}
.modulo__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modulo__titulos { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.modulo__nombre { font-family: var(--display); font-weight: 600; font-size: clamp(15px, 1.3vw, 17px); color: var(--crema); }
.modulo__clave { font-family: var(--mono); font-size: calc(var(--t-mono) - 1px); letter-spacing: 0.06em; color: rgba(247, 245, 240, 0.5); }
.modulo__texto { font-size: clamp(12.5px, 1.1vw, 13.5px); line-height: 1.45; color: var(--texto-claro); }
.modulo__estado {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(199, 245, 199, 0.12);
  font-family: var(--mono); font-size: calc(var(--t-mono) - 1.5px); color: var(--menta);
}

.metricas {
  margin-top: auto;
  padding: clamp(12px, 1.2vw, 14px) clamp(14px, 1.5vw, 18px) clamp(14px, 1.4vw, 16px);
  border-top: 1px solid rgba(247, 245, 240, 0.08);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.metrica { display: flex; flex-direction: column; gap: 7px; }
.metrica span:first-child { font-family: var(--mono); font-size: calc(var(--t-mono) - 1px); letter-spacing: 0.08em; color: rgba(247, 245, 240, 0.5); }
.metrica__barra { display: block; height: 6px; border-radius: 3px; background: rgba(247, 245, 240, 0.10); overflow: hidden; }
.metrica__relleno { display: block; height: 6px; border-radius: 3px; }

.sistema__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sistema__pie .mano { font-size: clamp(20px, 1.9vw, 26px); line-height: 1; color: var(--amarillo); }
.objetivo {
  flex-shrink: 0;
  padding: 9px 14px;
  background: var(--menta);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 12.5px);
  font-weight: 500;
  color: var(--menta-texto);
}

/* ---------- 7. Testimonios ------------------------------------------------ */
.testimonios__grid {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.testimonio {
  margin: 0;
  background: var(--papel);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.testimonio__video {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: #26314A;
  background-image: radial-gradient(circle at 50% 38%, rgba(247, 245, 240, 0.12), transparent 62%);
  display: flex; align-items: center; justify-content: center;
}
.testimonio__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testimonio__chip {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 9px;
  background: rgba(247, 245, 240, 0.92);
  border-radius: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--marino);
}
.testimonio__marca { position: absolute; bottom: 14px; left: 14px; font-family: var(--mono); font-size: 11px; color: rgba(247, 245, 240, 0.6); }
.testimonio__play {
  position: relative;
  width: 64px; height: 64px;
  border: 0; border-radius: 50%;
  background: var(--amarillo);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.testimonio__play:hover { transform: scale(1.06); }
.testimonio figcaption { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.testimonio__nombre { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--marino); }
.testimonio__resultado { font-family: var(--mano); font-weight: 600; font-size: 24px; color: var(--azul); }

/* ---------- 8. Perfiles --------------------------------------------------- */
.perfiles__grid {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
}
.perfil {
  padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 40px);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 22px);
}
.perfil--si { background: var(--papel); border: 1px solid var(--linea); }
.perfil--no { border: 1.5px dashed #B9B2A2; }
.perfil h3 { font-size: clamp(21px, 1.8vw, 24px); }
.perfil ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 22px); }
.perfil li { display: flex; gap: clamp(14px, 1.3vw, 16px); align-items: flex-start; font-size: var(--t-small); line-height: 1.55; }
.perfil li svg { flex-shrink: 0; width: clamp(24px, 2vw, 26px); height: clamp(24px, 2vw, 26px); margin-top: 1px; }
.perfil--si li { color: var(--texto-fuerte); }
.perfil--no li { color: var(--texto); }

/* ---------- 9. Proceso + calendario --------------------------------------- */
.proceso__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pasos { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.paso { display: flex; gap: clamp(16px, 1.6vw, 20px); padding-block: clamp(18px, 1.8vw, 22px); border-top: 1px solid var(--linea); }
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__numero {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--marino);
  color: var(--crema);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 15px;
}
.paso__texto { display: flex; flex-direction: column; gap: 6px; }
.paso__texto strong { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 20px); color: var(--marino); }
.paso__texto span { font-size: var(--t-small); line-height: 1.6; color: var(--texto); }

.calendario {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 1px 0 var(--linea), 0 30px 60px rgba(27, 36, 56, 0.10);
  overflow: hidden;
}
.calendario__cabecera {
  padding: clamp(16px, 1.6vw, 20px) clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--linea-suave);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.calendario__titulo { display: flex; flex-direction: column; gap: 2px; }
.calendario__titulo strong { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 1.5vw, 19px); }
.calendario__hueco { padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 28px); display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: clamp(18px, 2vw, 28px); }
.calendario__mes { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-weight: 600; font-size: 16px; }
.calendario__dias, .calendario__semana {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center;
}
.calendario__semana { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--texto-suave); }
.calendario__dias { margin-top: 8px; font-size: 14px; }
.calendario__dias span {
  height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #B3AEA2;
}
.calendario__dias .libre { background: #EEF1F7; color: var(--marino); font-weight: 600; }
.calendario__dias .elegido { background: var(--marino); color: var(--crema); font-weight: 600; }
.calendario__horas { display: flex; flex-direction: column; gap: 10px; }
.calendario__horas span:first-child { font-family: var(--mono); font-size: 11px; color: var(--texto-suave); }
.hora {
  height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--azul); border-radius: 8px;
  font-family: var(--mono); font-size: 14px; color: var(--azul);
}
.hora--activa { background: var(--marino); border-color: var(--marino); color: var(--crema); }

/* ---------- 10. FAQ ------------------------------------------------------- */
.faq__lista { margin-top: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; border-top: 1px solid var(--linea-fuerte); }
.faq__item { border-bottom: 1px solid var(--linea-fuerte); }
.faq__item summary {
  list-style: none;
  padding: clamp(20px, 2.2vw, 26px) 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.7vw, 21px);
  color: var(--marino);
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex-shrink: 0; }
/* Abierto: el signo "+" se queda en "−" */
.faq__item summary .mas-v { transform-origin: center; transition: opacity 0.2s ease, transform 0.2s ease; }
.faq__item[open] summary .mas-v { opacity: 0; transform: scaleY(0); }
.faq__item p { padding: 0 clamp(20px, 5vw, 60px) clamp(22px, 2.4vw, 28px) 4px; font-size: var(--t-small); line-height: 1.65; color: var(--texto); }

/* ---------- 11. Pie ------------------------------------------------------- */
.pie { background: var(--arena); border-top: 1px solid var(--linea-fuerte); }
.pie__contenido {
  padding: 28px 0 36px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 12px; color: var(--texto-suave);
}
.pie__enlaces { display: flex; gap: 28px; }
.pie__enlaces a { color: var(--texto-suave); text-decoration: none; }
.pie__enlaces a:hover { color: var(--marino); text-decoration: underline; }

/* ---------- 12. Responsive ------------------------------------------------ */
@media (max-width: 1400px) {
  /* Debajo de 1400px no cabe la nota al lado del vídeo: pasa a ir encima. */
  .vsl { display: flex; flex-direction: column; }
  .vsl__nota {
    position: static;
    align-self: flex-end;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
    width: auto;
    margin: 0 14px 4px 0;
    transform: rotate(-4deg);
  }
  .vsl__flecha--lado { display: none; }
  .vsl__flecha--abajo { display: block; }
}

@media (max-width: 1000px) {
  .proceso__grid { grid-template-columns: minmax(0, 1fr); }
  .paneles { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .paneles__flecha { position: static; margin: -22px auto; width: 44px; height: 44px; }
  .paneles__flecha svg { transform: rotate(90deg); }
}

@media (max-width: 480px) {
  /* En móvil el montón usa la composición estrecha */
  .basura--ancha { display: none; }
  .basura--estrecha { display: block; }
}

@media (max-width: 900px) {
  .hero__titulo > span { white-space: normal; }
  .cifras { grid-template-columns: minmax(0, 1fr); }
  .cifra + .cifra { border-left: 0; border-top: 1px solid var(--linea); }
  .perfiles__grid { grid-template-columns: minmax(0, 1fr); }
  .testimonios__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 250px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .testimonio { scroll-snap-align: start; }
  .testimonio figcaption { padding: 14px 16px 16px; }
  .testimonio__nombre { font-size: 17px; }
  .testimonio__resultado { font-size: 21px; }
  .sistema__pie { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) {
  .polaroids {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    width: 100vw;
  }
  .polaroid { width: 160px; scroll-snap-align: center; }
}

@media (max-width: 620px) {
  .vsl__nota { right: 8px; top: -54px; width: 150px; }
  .vsl__nota span { font-size: 26px; }
  .vsl__nota svg { width: 34px; height: 40px; }
  .vsl__marca { right: 14px; bottom: 12px; font-size: 9px; }
  .calendario__hueco { grid-template-columns: minmax(0, 1fr); }
  .calendario__horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .calendario__horas span:first-child { grid-column: 1 / -1; }
  .boton { width: 100%; }
  .pie__contenido { flex-direction: column; text-align: center; gap: 14px; }
}

/* ---------- 13. Animaciones ----------------------------------------------- */
@keyframes marcar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes parpadeo {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(242, 217, 131, 0.55), 0 0 10px 2px rgba(242, 217, 131, 0.85); }
  50% { opacity: 0.2; box-shadow: 0 0 0 7px rgba(242, 217, 131, 0), 0 0 0 0 rgba(242, 217, 131, 0); }
}
@keyframes anillo { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fluir { to { stroke-dashoffset: -40; } }
@keyframes viajar {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(var(--recorrido, 180px)); opacity: 0; }
}
@keyframes crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.marcado__fondo { transform-origin: left center; animation: marcar 1.1s cubic-bezier(0.7, 0, 0.2, 1) 0.5s both; }
.punto { animation: parpadeo 1.3s ease-in-out infinite; }
.vsl__anillo { animation: anillo 2.4s ease-out infinite; }
.modulos__linea line { animation: fluir 1.6s linear infinite; }
.modulos__bolita { animation: viajar 4.5s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.metrica__relleno { transform-origin: left center; animation: crecer 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.objetivo { animation: flotar 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marcado__fondo, .metrica__relleno { transform: scaleX(1); }
}

/* ---------- 14. Impresión (por si alguien imprime la página) -------------- */
@media print {
  .vsl__play, .testimonio__play, .paneles__flecha { display: none; }
  body { background: #fff; }
}