/* /a-tu-medida/ (high ticket). Sobre tokens.css, base.css, components.css y calculadora.css (controles y barras).
   Interacción: 05-interaccion-a-tu-medida.md. Escena WebGL: js/plano.js; resto: js/a-tu-medida.js. */

/* ---- Fondo que cambia de color por sección (body[data-tono], lo pone el JS) ---- */
body { background: var(--color-bg); }
.fondo-medida {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 80% 10%, var(--tono-a, rgba(43, 77, 255, 0.16)), transparent 70%),
    radial-gradient(60% 50% at 10% 90%, var(--tono-b, rgba(46, 230, 168, 0.06)), transparent 70%),
    var(--tono-fondo, var(--color-bg));
  transition: background-color 900ms var(--ease-out);
}
/* Los colores no se pueden interpolar dentro de un gradiente sin @property: se registran para que la transición funcione */
@property --tono-a { syntax: "<color>"; inherits: true; initial-value: rgba(43, 77, 255, 0.16); }
@property --tono-b { syntax: "<color>"; inherits: true; initial-value: rgba(46, 230, 168, 0.06); }
@property --tono-fondo { syntax: "<color>"; inherits: true; initial-value: #070A14; }
body { transition: --tono-a 900ms var(--ease-out), --tono-b 900ms var(--ease-out), --tono-fondo 900ms var(--ease-out); }
body[data-tono="noche"] { --tono-a: rgba(43, 77, 255, 0.16); --tono-b: rgba(46, 230, 168, 0.06); --tono-fondo: #070A14; }
body[data-tono="azul"]  { --tono-a: rgba(43, 77, 255, 0.30); --tono-b: rgba(43, 77, 255, 0.12); --tono-fondo: #081030; }
body[data-tono="menta"] { --tono-a: rgba(46, 230, 168, 0.16); --tono-b: rgba(34, 199, 199, 0.12); --tono-fondo: #061A1C; }
body[data-tono="tinta"] { --tono-a: rgba(157, 176, 255, 0.10); --tono-b: rgba(43, 77, 255, 0.10); --tono-fondo: #0A0D1C; }

.header__nav a[aria-current="page"] { color: var(--color-text-strong); text-decoration: underline; text-decoration-color: var(--color-acento-2); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.site-header { transition: background-color var(--duration-base) var(--ease-out); }

/* ==========================================================================
   1. Hero "Del plano al sitio"
   ========================================================================== */
.plano { position: relative; }
.plano__sticky {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; align-content: start; justify-items: center;
  padding: calc(var(--header-h) + clamp(2rem, 8svh, 5rem)) var(--gutter) var(--space-8);
}
.plano__poster, .plano__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plano__canvas { opacity: 0; transition: opacity 600ms var(--ease-out); }
.plano[data-escena="lista"] .plano__canvas { opacity: var(--canvas-o, 1); }
.plano[data-escena="lista"] .plano__poster { visibility: hidden; }

/* Panel del titular: columna centrada con aire. El velo garantiza el contraste sobre las líneas del plano */
.plano__panel {
  position: relative; z-index: 2; text-align: center; max-width: 58rem;
  display: grid; justify-items: center;
}
.plano__panel::before {
  content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 10, 20, 0.92), rgba(7, 10, 20, 0.7) 60%, transparent);
}
.plano h1 {
  font-size: clamp(2.6rem, 1rem + 6.8vw, 6.75rem); line-height: 0.95; letter-spacing: -0.045em;
  margin: 0 0 var(--space-3); max-width: 14ch;
}
.plano__entradilla { font-size: var(--text-md); line-height: 1.5; color: var(--color-text); max-width: 40ch; margin: 0 0 var(--space-4); }
.plano__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2) var(--space-4); }
/* fondo propio: en móvil el enlace cae sobre las líneas del plano (contraste medido 4.29 sin él) */
.plano__enlace { color: var(--color-link); font-weight: var(--weight-semibold); padding: 12px 16px; border-radius: var(--radius-pill); background: rgba(7, 10, 20, 0.9); }
.plano__fases, .plano__pista { display: none; }

/* Con escena: sección alta y fija, todo desde --p (lo escribe el JS) */
.js-plano .plano { --p: 0; height: 320vh; height: 320svh; }
.js-plano .plano__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.js-plano .plano__panel {
  --t: clamp(0, var(--p) / 0.22, 1);
  opacity: max(0.001, calc(1 - var(--t)));
  transform: translate3d(0, calc(var(--t) * -8vh), 0);
}
.js-plano .plano[data-titular="oculto"] .plano__panel { pointer-events: none; }
.js-plano .plano[data-titular="oculto"] .plano__panel:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.js-plano .plano__fases {
  display: grid; position: absolute; z-index: 2; left: var(--gutter); bottom: var(--space-4); margin: 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); letter-spacing: -0.02em; color: var(--color-text-strong);
}
.js-plano .plano__fases li {
  grid-area: 1 / 1; padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(7, 10, 20, 0.86);
  border: 1px solid var(--glass-border);
  /* cada rótulo visible en su tramo: [0, .12), [.12, .5), [.5, .78), [.78, 1] (05, §1) */
  --a: 0; --b: 0.12;
  opacity: clamp(0, min((var(--p) - var(--a)) / 0.03 + 1, (var(--b) - var(--p)) / 0.03), 1);
}
.js-plano .plano__fases li:nth-child(1) { --a: -1; --b: 0.12; }
.js-plano .plano__fases li:nth-child(2) { --a: 0.12; --b: 0.54; }   /* "Color" entra cuando las caras ya se ven (F > 0.1) */
.js-plano .plano__fases li:nth-child(3) { --a: 0.54; --b: 0.78; }
.js-plano .plano__fases li:nth-child(4) { --a: 0.78; --b: 0.95; }
.js-plano .plano__pista {
  display: block; position: absolute; z-index: 2; right: var(--gutter); bottom: var(--space-4); margin: 0;
  font-size: var(--text-sm); color: var(--color-text); background: rgba(7, 10, 20, 0.86); padding: 6px 14px; border-radius: var(--radius-pill);
  opacity: max(0.001, calc(1 - var(--p) / 0.05));
}
/* Aterrizaje (05, §1): Conceptos se monta 100svh sobre el final de la escena, así que con p = 1 su título y la ventana
   de Lindero ocupan la pantalla. La cámara lleva la placa hasta el rectángulo de esa ventana (js/plano.js, llegada) y
   entre p 0.94 y 1 el canvas se funde con la sección. Mientras sube por encima de la escena, la sección es invisible:
   su opacidad sale de --p-plano (el mismo progreso, escrito en <html> por js/a-tu-medida.js). */
.js-plano .plano[data-escena="lista"] .plano__canvas { opacity: clamp(0, (1 - var(--p)) / 0.06, 1); }
.js-plano .plano { margin-bottom: -100vh; margin-bottom: -100svh; }
.js-plano .plano + .seccion { z-index: 3; }
.js-plano .plano + .conceptos {
  padding-top: calc(var(--header-h) + var(--space-3));
  opacity: clamp(0, (var(--p-plano, 1) - 0.94) / 0.06, 1);
}
.js-plano .plano + .conceptos .titulo-grande { margin-bottom: var(--space-3); }
/* La ventana destino llega ya armada (sin animación de entrada) para coincidir con la placa; el sol sigue su arco */
html.js-plano .concepto--destino[data-concepto] .kl__traza { stroke-dashoffset: 0; animation: none; }
html.js-plano .concepto--destino[data-concepto] :is(.kl__titulo span, .kl__cuerpo, .kl__boton) { opacity: 1; transform: none; animation: none; }
@media (max-width: 47.99rem) {
  .js-plano .plano { height: 260vh; height: 260svh; }
  .plano__sticky { padding-top: calc(var(--header-h) + var(--space-4)); }
  .js-plano .plano__fases { bottom: var(--space-3); font-size: 1.125rem; }
  .js-plano .plano__pista { display: none; }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.seccion { position: relative; padding: var(--section-normal) 0; }
.seccion .titulo-grande { font-size: clamp(2.5rem, 1.2rem + 5vw, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; max-width: 18ch; }
.seccion .entradilla { margin-bottom: var(--space-8); max-width: 52ch; }
.seccion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-8); }
.seccion__nota { margin: 0; color: var(--color-text-muted); }

/* Tipografía cinética: cada palabra sube desde su propia máscara (el JS envuelve las palabras) */
.pal { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.pal > span { display: inline-block; }
.js-cinetico [data-cinetico]:not(.is-visible) .pal > span { transform: translate3d(0, 105%, 0); }
.js-cinetico [data-cinetico] .pal > span { transition: transform 760ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }

/* Tarjetas con profundidad: el JS escribe --rx, --ry, --mx, --my */
[data-inclinar] { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 400ms var(--ease-out); }
[data-inclinar].is-inclinada { transition: transform 80ms linear; }

/* 2. Qué es */
.rasgos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .rasgos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .rasgos { grid-template-columns: repeat(4, 1fr); } }
.rasgo {
  position: relative; padding: var(--space-4) var(--space-3) var(--space-3); min-height: 15rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(160deg, rgba(43, 77, 255, 0.22), rgba(14, 20, 38, 0.92) 55%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.rasgo::after {   /* reflejo que sigue al puntero */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(157, 176, 255, 0.14), transparent 70%);
}
.rasgo__num { margin-bottom: auto; padding-bottom: var(--space-4); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--color-acento-2); letter-spacing: -0.04em; }
.rasgo h3 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.rasgo p { margin: 0; color: var(--color-text); }

/* 3. Conceptos */
.conceptos__lista { display: grid; gap: var(--space-12); margin-top: var(--space-2); }
.seccion .conceptos__nota { margin: var(--space-8) 0 0; }
.concepto { margin: 0; display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 64rem) {
  .concepto { grid-template-columns: 1.7fr 1fr; gap: var(--space-6); }
  .concepto--inv { grid-template-columns: 1fr 1.7fr; }
  .concepto--inv .concepto__marco { order: 2; }
}
.concepto__pie { display: grid; gap: var(--space-1); font-size: var(--text-lg); color: var(--color-text); line-height: 1.3; }
.concepto__pie strong { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.03em; color: var(--color-text-strong); }
.concepto__desc { font-size: var(--text-base); color: var(--color-text-muted); max-width: 36ch; }
.rotulo-ficticio {
  justify-self: start; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); color: var(--color-text); background: var(--color-surface-2); border: 1px dashed var(--color-border-strong);
}
.concepto__marco { border-radius: var(--radius-window); }
.ventana-k {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-window); overflow: hidden;
  box-shadow: var(--shadow-window); container-type: inline-size; background: #fff;
}
@media (max-width: 47.99rem) { .ventana-k { aspect-ratio: 4 / 5; } }
.ventana-k__barra { position: absolute; inset: 0 0 auto 0; z-index: 3; height: 28px; display: flex; gap: 6px; align-items: center; padding: 0 12px; background: rgba(0, 0, 0, 0.08); }
.ventana-k__barra i { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }
.ventana-k > div:not(.ventana-k__barra) { position: absolute; inset: 0; padding-top: 28px; }

/* Concepto 1: Lindero. Hueso, tinta y terracota; el alzado se dibuja al entrar y el sol recorre su arco */
.k-lindero { background: #ECE7DE; color: #1C1F24; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image: linear-gradient(rgba(28, 31, 36, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 31, 36, 0.06) 1px, transparent 1px);
  background-size: 5cqi 5cqi; }
.kl__nav { display: flex; gap: 3.2cqi; align-items: baseline; padding: 2.6cqi 4cqi; font-size: max(10px, 1.35cqi); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgba(28, 31, 36, 0.18); }
.kl__nav b { margin-right: auto; font-size: max(12px, 1.9cqi); letter-spacing: 0.32em; }
.kl__texto { position: absolute; left: 4cqi; top: 15cqi; width: 46%; }
.kl__ante { margin: 0 0 1.4cqi; font-size: max(10px, 1.3cqi); letter-spacing: 0.18em; text-transform: uppercase; color: #8A4A2C; }
.kl__titulo { margin: 0 0 2cqi; font-size: 5.4cqi; line-height: 0.98; letter-spacing: -0.03em; font-weight: 300; display: grid; }
.kl__titulo span { display: block; }
.kl__cuerpo { margin: 0 0 2.6cqi; font-size: max(11px, 1.55cqi); line-height: 1.5; color: #3B3D42; max-width: 32ch; }
.kl__boton { display: inline-block; padding: 1.1cqi 2.2cqi; border: 1px solid #1C1F24; font-size: max(10px, 1.3cqi); letter-spacing: 0.12em; text-transform: uppercase; }
.kl__alzado { position: absolute; right: 2cqi; bottom: 3cqi; width: 52%; height: auto; }
.kl__traza { stroke-dasharray: 1; stroke-dashoffset: 0; }
.kl__disco { offset-path: path("M60 230a160 160 0 0 1 280 0"); offset-distance: 30%; }
@media (max-width: 47.99rem) {
  .kl__texto { top: 22cqi; width: 84%; }
  .kl__titulo { font-size: 10cqi; }
  .kl__alzado { width: 88%; right: 6%; bottom: 2cqi; }
  .kl__cuerpo { display: none; }
}

/* Concepto 2: Comal y Ceniza. Carbón, crema y brasa; serifa del sistema; brasas en bucle */
.k-comal { background: radial-gradient(70% 80% at 80% 60%, #2A1A12, #120E0B 70%); color: #F1E6D2; font-family: Georgia, "Times New Roman", serif; overflow: hidden; }
.kc__nav { position: relative; z-index: 2; display: flex; gap: 3cqi; align-items: baseline; padding: 2.4cqi 4cqi; font-size: max(10px, 1.4cqi); font-style: italic; }
.kc__nav b { margin-right: auto; font-weight: 400; font-size: max(13px, 2.2cqi); font-style: normal; letter-spacing: 0.02em; }
.kc__nav em { color: #E0703A; }
.kc__comal { position: absolute; right: -6cqi; top: 10cqi; width: 50cqi; height: 50cqi; }
.kc__texto { position: relative; z-index: 2; padding: 4cqi 4cqi 0; width: 58%; }
.kc__ante { margin: 0 0 1cqi; font-size: max(10px, 1.3cqi); letter-spacing: 0.22em; text-transform: uppercase; color: #E9A27A; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.kc__titulo { margin: 0 0 2.6cqi; font-size: 5.2cqi; line-height: 1.02; font-style: italic; letter-spacing: -0.01em; }
.kc__menu { list-style: none; margin: 0 0 2.6cqi; padding: 0; display: grid; gap: 1.2cqi; font-size: max(11px, 1.8cqi); }
.kc__menu li { padding-bottom: 1cqi; border-bottom: 1px solid rgba(241, 230, 210, 0.2); }
.kc__menu span { display: block; font-size: 0.78em; font-style: italic; color: #D9C9AE; }
.kc__boton { display: inline-block; padding: 1.1cqi 2.4cqi; border-radius: 99px; background: #E0703A; color: #120E0B; font-size: max(10px, 1.4cqi); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; }
.kc__brasas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kc__brasas i { position: absolute; bottom: -2cqi; left: calc(52% + var(--x) * 1cqi); width: 0.6cqi; height: 0.6cqi; border-radius: 50%; background: #FF9A55; opacity: 0; }
.kc__brasas i:nth-child(1) { --x: 2; --d: 0s; } .kc__brasas i:nth-child(2) { --x: 9; --d: -1.1s; }
.kc__brasas i:nth-child(3) { --x: 16; --d: -2.3s; } .kc__brasas i:nth-child(4) { --x: 22; --d: -0.6s; }
.kc__brasas i:nth-child(5) { --x: 28; --d: -3.1s; } .kc__brasas i:nth-child(6) { --x: 34; --d: -1.7s; }
.kc__brasas i:nth-child(7) { --x: 12; --d: -3.8s; } .kc__brasas i:nth-child(8) { --x: 26; --d: -2.8s; }
.kc__brasas i:nth-child(9) { --x: 40; --d: -0.3s; } .kc__brasas i:nth-child(10) { --x: 5; --d: -2s; }
@media (max-width: 47.99rem) {
  .kc__texto { width: 100%; padding-top: 30cqi; }
  .kc__titulo { font-size: 9cqi; }
  .kc__menu { font-size: max(11px, 3.4cqi); }
  .kc__comal { right: auto; left: 22cqi; top: 6cqi; width: 56cqi; height: 56cqi; }
  .kc__brasas i { left: calc(10% + var(--x) * 2cqi); }
}

/* Concepto 3: Bruma Clara. Paleta clara, formas que respiran y frascos que flotan */
.k-nube { background: #F6F3FB; color: #2A2540; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.kn__forma { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(0.4cqi); }
.kn__forma--1 { width: 46cqi; height: 46cqi; right: -6cqi; top: 4cqi; background: #CFE8DF; }
.kn__forma--2 { width: 30cqi; height: 30cqi; right: 22cqi; top: 26cqi; background: #E6D9F7; }
.kn__forma--3 { width: 22cqi; height: 22cqi; right: 2cqi; bottom: -4cqi; background: #FBE3D6; }
.kn__nav { position: relative; z-index: 2; display: flex; gap: 3cqi; align-items: baseline; padding: 2.4cqi 4cqi; font-size: max(10px, 1.4cqi); }
.kn__nav b { margin-right: auto; font-size: max(13px, 2.4cqi); font-weight: 800; letter-spacing: -0.04em; }
.kn__texto { position: relative; z-index: 2; padding: 5cqi 4cqi 0; width: 50%; }
.kn__titulo { margin: 0 0 2.6cqi; font-size: 5cqi; line-height: 1; font-weight: 800; letter-spacing: -0.045em; }
.kn__pasos { margin: 0 0 3cqi; padding: 0 0 0 1.2em; display: grid; gap: 0.8cqi; font-size: max(11px, 1.7cqi); }
.kn__pasos li::marker { color: #6B57B0; font-weight: 700; }
.kn__boton { display: inline-block; padding: 1.2cqi 2.6cqi; border-radius: 99px; background: #2A2540; color: #F6F3FB; font-size: max(10px, 1.4cqi); font-weight: 700; }
.kn__frascos { position: absolute; z-index: 2; right: 8cqi; bottom: 7cqi; display: flex; gap: 3cqi; align-items: flex-end; }
.kn__frasco { display: block; width: 7cqi; border-radius: 2cqi 2cqi 1.4cqi 1.4cqi; background: linear-gradient(160deg, #fff, #E9E2F5); box-shadow: 0 2cqi 3cqi -1.5cqi rgba(42, 37, 64, 0.35), inset 0 0 0 1px rgba(42, 37, 64, 0.08); position: relative; }
.kn__frasco::before { content: ""; position: absolute; left: 25%; right: 25%; top: -2cqi; height: 2.2cqi; border-radius: 0.6cqi 0.6cqi 0 0; background: #2A2540; }
.kn__frasco--1 { height: 15cqi; } .kn__frasco--2 { height: 20cqi; background: linear-gradient(160deg, #fff, #D7EFE6); } .kn__frasco--3 { height: 12cqi; background: linear-gradient(160deg, #fff, #FCE9DF); }
@media (max-width: 47.99rem) {
  .kn__texto { width: 100%; }
  .kn__titulo { font-size: 10cqi; }
  .kn__pasos { font-size: max(11px, 3.6cqi); }
  .kn__frascos { right: 50%; transform: translateX(50%); bottom: 8cqi; gap: 6cqi; }
  .kn__frasco { width: 13cqi; }
  .kn__frasco--1 { height: 26cqi; } .kn__frasco--2 { height: 34cqi; } .kn__frasco--3 { height: 21cqi; }
}

/* Animaciones de los conceptos: solo con JS y sin reduced-motion (sin eso, se ve el estado final) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-concepto] .kl__traza { stroke-dashoffset: 1; }
  .js [data-concepto] .kl__titulo span, .js [data-concepto] .kl__cuerpo, .js [data-concepto] .kl__boton { opacity: 0; transform: translate3d(0, 1.6cqi, 0); }
  .js [data-concepto].en-vista .kl__traza { animation: kl-traza 2.2s var(--ease-in-out) forwards; }
  .js [data-concepto].en-vista .kl__traza:nth-of-type(3) { animation-delay: 0.35s; } .js [data-concepto].en-vista .kl__traza:nth-of-type(4) { animation-delay: 0.7s; } .js [data-concepto].en-vista .kl__traza:nth-of-type(5) { animation-delay: 1s; }
  .js [data-concepto].en-vista :is(.kl__titulo span, .kl__cuerpo, .kl__boton) { animation: k-sube 900ms var(--ease-out) forwards; }
  .js [data-concepto].en-vista .kl__titulo span:nth-child(2) { animation-delay: 120ms; } .js [data-concepto].en-vista .kl__titulo span:nth-child(3) { animation-delay: 240ms; }
  .js [data-concepto].en-vista .kl__cuerpo { animation-delay: 420ms; } .js [data-concepto].en-vista .kl__boton { animation-delay: 560ms; }
  .js [data-concepto].en-vista .kl__disco { animation: kl-sol 14s ease-in-out infinite alternate; }

  .js [data-concepto] :is(.kc__titulo, .kc__menu li, .kc__boton) { opacity: 0; transform: translate3d(0, 1.6cqi, 0); }
  .js [data-concepto].en-vista :is(.kc__titulo, .kc__menu li, .kc__boton) { animation: k-sube 900ms var(--ease-out) forwards; }
  .js [data-concepto].en-vista .kc__menu li:nth-child(1) { animation-delay: 300ms; } .js [data-concepto].en-vista .kc__menu li:nth-child(2) { animation-delay: 480ms; }
  .js [data-concepto].en-vista .kc__menu li:nth-child(3) { animation-delay: 660ms; } .js [data-concepto].en-vista .kc__boton { animation-delay: 840ms; }
  .js [data-concepto].en-vista .kc__brasas i { animation: kc-brasa 4.2s linear infinite; animation-delay: var(--d); }
  .js [data-concepto].en-vista .kc__comal { animation: kc-gira 40s linear infinite; }

  .js [data-concepto] :is(.kn__titulo, .kn__pasos li, .kn__boton) { opacity: 0; transform: translate3d(0, 1.6cqi, 0); }
  .js [data-concepto] .kn__forma { transform: scale(0.6); opacity: 0; }
  .js [data-concepto].en-vista :is(.kn__titulo, .kn__pasos li, .kn__boton) { animation: k-sube 900ms var(--ease-out) forwards; }
  .js [data-concepto].en-vista .kn__pasos li:nth-child(1) { animation-delay: 200ms; } .js [data-concepto].en-vista .kn__pasos li:nth-child(2) { animation-delay: 340ms; }
  .js [data-concepto].en-vista .kn__pasos li:nth-child(3) { animation-delay: 480ms; } .js [data-concepto].en-vista .kn__boton { animation-delay: 620ms; }
  .js [data-concepto].en-vista .kn__forma { animation: kn-entra 1.2s var(--ease-out) forwards, kn-respira 9s ease-in-out 1.2s infinite alternate; }
  .js [data-concepto].en-vista .kn__forma--2 { animation-delay: 0.15s, 1.35s; } .js [data-concepto].en-vista .kn__forma--3 { animation-delay: 0.3s, 1.5s; }
  .js [data-concepto].en-vista .kn__frasco { animation: kn-flota 5s ease-in-out infinite alternate; }
  .js [data-concepto].en-vista .kn__frasco--2 { animation-delay: -1.6s; } .js [data-concepto].en-vista .kn__frasco--3 { animation-delay: -3.2s; }
  .js [data-concepto].en-pausa * { animation-play-state: paused !important; }
}
@keyframes k-sube { to { opacity: 1; transform: none; } }
@keyframes kl-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kl-sol { from { offset-distance: 8%; } to { offset-distance: 92%; } }
@keyframes kc-brasa { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate3d(3cqi, -46cqi, 0) scale(0.3); } }
@keyframes kc-gira { to { transform: rotate(360deg); } }
@keyframes kn-entra { to { transform: scale(1); opacity: 1; } }
@keyframes kn-respira { 0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: scale(1) rotate(0deg); } 100% { border-radius: 58% 42% 38% 62% / 55% 38% 62% 45%; transform: scale(1.08) rotate(12deg); } }
@keyframes kn-flota { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -2.4cqi, 0); } }

/* 4. Qué incluye */
.incluye__base {
  display: flex; gap: var(--space-2); align-items: flex-start; max-width: 46rem; margin: 0 0 var(--space-6);
  padding: var(--space-3); border-radius: var(--radius-lg); background: rgba(46, 230, 168, 0.08); border: 1px solid rgba(46, 230, 168, 0.35);
}
.incluye__base svg { width: 28px; height: 28px; flex: none; color: var(--color-acento-2); }
.incluye__base p { margin: 0; font-size: var(--text-md); color: var(--color-text-strong); }
.servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--space-6); }
@media (min-width: 48rem) { .servicios { grid-template-columns: 1fr 1fr; } }
.servicios li { padding: var(--space-2) 0; border-top: 1px solid var(--color-border-subtle); color: var(--color-text); }
.servicios strong { color: var(--color-text-strong); }

/* 5. Proceso */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: etapa; }
@media (min-width: 64rem) { .etapas { grid-template-columns: repeat(5, 1fr); } }
.etapa { position: relative; padding-top: var(--space-6); }
.etapa::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: linear-gradient(90deg, var(--color-primary), var(--color-acento-2)); opacity: 0.6; }
.etapa__num {
  position: absolute; top: 0; left: 0; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-bg); border: 2px solid var(--color-acento-2); font-family: var(--font-display); font-size: var(--text-md); color: var(--color-text-strong);
}
.etapa h3 { margin-top: var(--space-2); }
.etapa p { margin: 0 0 var(--space-1); color: var(--color-text); }
.etapa__plazo { font-size: var(--text-sm); color: var(--color-text-muted); }

/* 6. Calculadora: pasos a la izquierda, total fijo a la derecha (en móvil, barra fija abajo) */
.calculadora:focus { outline: none; }
.cm { display: grid; gap: var(--space-4); align-items: start; font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) { .cm { grid-template-columns: 1.5fr 1fr; gap: var(--space-6); } }
.cm__pasos { display: grid; gap: var(--space-4); }
.cm__paso {
  margin: 0; padding: var(--space-3); min-width: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.cm__paso legend { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-strong); }
.cm__n { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-size: var(--text-sm); }
.cm__paso .calc__fila:first-of-type { border-top: 0; }
.cm__paso--aparte { border-style: dashed; }
.cm__paso .calc__fila.is-activa { background: var(--color-surface-2); }

.cm__panel {
  position: sticky; top: calc(var(--header-h) + var(--space-2)); padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-window);
}
.cm__panel-titulo { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-strong); margin: 0 0 var(--space-2); }
.cm__resumen { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: 6px; font-size: var(--text-sm); }
.cm__resumen li { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text); }
.cm__resumen li span:last-child { white-space: nowrap; color: var(--color-text-strong); }
.cm__cuentas { margin: 0; display: grid; gap: 4px; font-size: var(--text-sm); }
.cm__cuentas div { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--color-border-subtle); }
.cm__cuentas div[hidden] { display: none; }
.cm__cuentas dt { color: var(--color-text); } .cm__cuentas dd { margin: 0; color: var(--color-text-strong); }
.cm__total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 2px solid var(--color-primary); }
.cm__total-rotulo { font-size: var(--text-md); color: var(--color-text); }
.cm__total-valor { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); color: var(--color-text-strong); letter-spacing: -0.03em; text-align: right; }
.cm__total-valor small { font-size: 0.45em; color: var(--color-text); letter-spacing: 0; }
.cm__iva { grid-column: 2; text-align: right; font-size: var(--text-sm); color: var(--color-text-muted); }
.cm__total-valor.is-cambio { animation: cm-pulso 420ms var(--ease-out); }
@keyframes cm-pulso { 40% { color: var(--color-acento-2); transform: translate3d(0, -2px, 0); } }
.cm__mensual { margin: var(--space-2) 0 0; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px dashed var(--color-border-strong); font-size: var(--text-sm); color: var(--color-text); }
.cm__mensual[hidden] { display: none; }
.cm__mensual strong { color: var(--color-text-strong); }
.cm__panel .calc__nota { margin-bottom: var(--space-3); }
.cm__barra-movil { display: none; }
@media (max-width: 63.99rem) {
  .cm__panel { position: relative; top: auto; }
  .js .cm__barra-movil {
    display: flex; position: sticky; bottom: var(--space-1); z-index: 5; justify-content: space-between; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-window);
  }
  .cm__barra-movil small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
  .cm__barra-movil b { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-strong); }
  .cm__barra-movil .btn { min-height: 44px; }
}
.js .calc-estatica { display: none; }
html:not(.js) .calc-vivo { display: none; }

/* 7–8 */
.preguntas { background: transparent; }
.cierre { text-align: left; }
.cierre__contacto { margin-top: var(--space-6); color: var(--color-text-muted); }
.cierre__contacto:focus { outline: none; }

/* Ventana de contacto (reusa .pedido de components.css) */
.contacto__intro { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.contacto__resumen p { margin: 0 0 4px; }
.contacto__resumen p:last-child { margin: 0; }
.campo textarea { min-height: 96px; resize: vertical; font: inherit; }
.contacto__ok { padding: var(--space-6) 0 var(--space-2); }
.contacto__ok h2 { font-size: var(--text-2xl); margin: var(--space-2) 0; }
.contacto__check { width: 48px; height: 48px; color: var(--color-acento-2); }

@media (prefers-reduced-motion: reduce) {
  [data-inclinar] { transform: none !important; }
  .fondo-medida, body { transition: none; }
}