/* =========================================================
   Jos.IA · Tarjetas digitales NFC / QR
   Solo lo propio de esta página. La base vive en _shared/css/josia.css
   Prefijo .tj- = piezas propias de Tarjetas (movimiento y demostración).
   ========================================================= */

/* Ritmo vertical más compacto que el común (antes llegaba a 256 px entre secciones) */
:root { --section-y: clamp(44px, 5.4vw, 88px); }

/* ---------- Hero oscuro ----------
   Rendimiento: el movimiento con el scroll es una animación vinculada al scroll (CSS) que corre en el
   compositor sin tocar el hilo principal; la inclinación escribe transform directamente en 3 elementos.
   Las máscaras y el filtro de las imágenes están horneados en los archivos (alfa). */
.hero--dark { background: #000; padding-bottom: 36px; }          /* 36 px: la hoja de Modelos se superpone */
.hero--dark .hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  will-change: transform;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, #000 100%),     /* sustituye a la máscara: el fondo del hero ya es negro */
    radial-gradient(44% 72% at 76% 36%, rgba(118, 124, 138, 0.2), transparent 72%),
    radial-gradient(28% 46% at 95% 8%, rgba(255, 255, 255, 0.07), transparent 70%),
    url("../assets/img/waves.webp") 60% 70% / cover no-repeat;
}
/* Grano fino de película: mosaico precalculado (antes era un filtro SVG feTurbulence) */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.075;
  background: url("../assets/img/grano.webp") 0 0 / 256px 256px repeat;
}
.hero--dark .hero__grid { padding-block: clamp(8px, 2vw, 32px) 0; }
@media (min-width: 960px) {
  .hero--dark .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.hero--dark .display { font-size: clamp(2.3rem, 0.8rem + 4.3vw, 4.4rem); line-height: 0.98; letter-spacing: -0.042em; }
.hero--dark .hero__copy .display .muted { color: #8d939e; }
.hero--dark .hero__copy { will-change: transform; }
.hero__price { margin-top: -4px; font-size: 0.9375rem; color: var(--d-text-3); font-variant-numeric: tabular-nums; }
.hero__price strong { color: var(--white); font-weight: 600; }

/* Escenario de la tarjeta */
.hero__stage {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 0.95;
  perspective: 1100px;
}
.hero__card {
  position: absolute;
  inset: 0;
  will-change: transform;
  touch-action: pan-y;
}
.hero__card picture, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; }
/* Reflejo: realza solo los brillos de la foto. Es un círculo grande de luz que se DESPLAZA con transform
   (no se vuelve a pintar): la posición la escribe js/main.js directamente sobre el elemento. */
.hero__shine, .hero__sweep { position: absolute; pointer-events: none; mix-blend-mode: color-dodge; }
.hero__shine {
  left: -50%; top: -50%; width: 200%; height: 200%;
  opacity: 0;
  background: radial-gradient(13.7% 12.25% at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 100%);
  transform: translate3d(0, -8%, 0);
  transition: opacity 0.7s var(--ease);
  will-change: transform, opacity;
}
.hero__sweep {
  inset: -10%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%);
  transform: translateX(-110%);
  visibility: hidden;
}
.hero__bokeh {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 158, 176, 0.22), rgba(150, 158, 176, 0) 70%);
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.hero__gyro { position: absolute; left: 50%; bottom: -4px; z-index: 3; transform: translateX(-50%); }
.hero--dark .strip { margin-top: clamp(20px, 3vw, 44px); }
.strip__icon .icon { transition: transform var(--t-slow) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .strip__item:hover .strip__icon .icon { transform: scale(1.12); }
}

/* Salida del hero al hacer scroll: animación vinculada al scroll (compositor). Si el navegador no la
   soporta, js/main.js aplica lo mismo con un manejador mínimo y solo mientras el hero está a la vista. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero--dark .hero__bg { animation: tj-sc-bg 1ms linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .js .hero--dark .hero__bg { animation: tj-fadein-soft 1.8s var(--ease-out) backwards, tj-sc-bg 1ms linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 85vh; }
    .hero--dark .hero__copy { animation: tj-sc-copy 1ms linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .hero__card { animation: tj-sc-card 1ms linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .hero__bokeh { animation: tj-sc-bokeh 1ms linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
  }
}
@keyframes tj-sc-card { to { translate: 0 -44px; rotate: -2.4deg; scale: 0.94; opacity: 0.65; } }
@keyframes tj-sc-bg { to { translate: 0 70px; } }
@keyframes tj-sc-copy { to { translate: 0 -16px; } }
@keyframes tj-sc-bokeh { to { translate: 0 -26px; } }

/* Entrada del hero (el único momento autoral): fondo, tarjeta con luz recorriendo el borde, titular, textos y botones */
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .hero--dark .hero__bg { animation: tj-fadein-soft 1.8s var(--ease-out) backwards; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__stage { animation: tj-herocard 1.5s var(--ease-out) 0.15s backwards; }
  .js .hero__sweep { visibility: visible; animation: tj-sweep 1.9s var(--ease) 0.8s both; }
  .js .hero .tj-chars:not(.tj-split) { visibility: hidden; animation: tj-show 0s linear 1.5s forwards; }
  .js .hero .tj-chars.tj-split .tj-c {
    animation:
      tj-char 0.95s var(--ease-out) calc(0.35s + var(--c, 0) * 22ms) backwards,
      tj-wave 0.9s ease-in-out calc(1.3s + var(--c, 0) * 24ms);
  }
}
@keyframes tj-herocard { from { opacity: 0; transform: translate3d(0, 38px, 0) scale(0.965); } }
@keyframes tj-sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes tj-show { to { visibility: visible; } }

@media (max-width: 959px) {
  .hero__stage { justify-self: center; max-width: 440px; }
}

/* =========================================================
   PIEZAS DE MOVIMIENTO COMUNES (.tj-)
   Regla: el estado por defecto es el FINAL. Las animaciones parten de un
   "desde" y solo existen con JS y sin prefers-reduced-motion. Cada bloque
   [data-in] recibe .is-in cuando entra en pantalla (js/main.js).
   ========================================================= */
.tj-line { display: block; }
/* Titulares. Dos registros:
   - .tj-chars (hero y declaración de Precios): palabra con máscara + letra que sube con un giro corto y una onda de opacidad.
   - el resto: cada línea sube desde una máscara (más corto y callado). Sin JS queda el texto plano. */
.tj-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.tj-c { display: inline-block; }
.tj-words:not(.tj-chars) .tj-line { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.tj-lm { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .tj-chars .tj-c { opacity: 0; transform: translateY(112%) rotate(7deg); }
  .js [data-in].is-in .tj-chars .tj-c {
    animation:
      tj-char 0.95s var(--ease-out) calc(var(--c, 0) * 22ms) backwards,
      tj-wave 0.9s ease-in-out calc(0.95s + var(--c, 0) * 24ms);
  }
  .js [data-in]:not(.is-in) .tj-lm { transform: translateY(108%); }
  .js [data-in].is-in .tj-lm { animation: tj-line 0.8s var(--ease-out) calc(var(--l, 0) * 110ms) backwards; }

  .js [data-in]:not(.is-in) .tj-fade { opacity: 0; }
  .js [data-in].is-in .tj-fade { animation: tj-fadeup 0.9s var(--ease-out) calc(0.3s + var(--k, 0) * 90ms) backwards; }
  /* En el hero los textos entran por su cuenta, sin esperar al observador */
  .js .hero .tj-fade { animation: tj-fadeup 0.9s var(--ease-out) calc(0.3s + var(--k, 0) * 90ms) backwards; }
}
@keyframes tj-char { from { opacity: 0; transform: translateY(112%) rotate(7deg); } }
@keyframes tj-wave { 50% { opacity: 0.3; } }
@keyframes tj-line { from { transform: translateY(108%); } }
@keyframes tj-draw { from { stroke-dashoffset: 1; } }
/* Lede: las palabras se encienden al subir por la pantalla (solo con JS y movimiento permitido) */
.tj-lit-on { view-timeline: --lit block; }
@supports (animation-timeline: view()) {
  /* La palabra i (índice --s, calculado una vez en JS) sube de 0.34 a 1 entre dos puntos del recorrido del párrafo */
  .tj-lit-on .tj-lw {
    opacity: 0.34;
    animation: tj-lit linear both;
    animation-timeline: --lit;
    animation-range: cover calc(var(--s) * 1%) cover calc(var(--s) * 1% + 3%);
  }
}
@keyframes tj-lit { to { opacity: 1; } }
@keyframes tj-fadeup { from { opacity: 0; transform: translateY(12px); } }
@keyframes tj-rule { from { transform: scaleX(0); } }
@keyframes tj-stroke { from { stroke-dasharray: 120; stroke-dashoffset: 120; } to { stroke-dasharray: 120; stroke-dashoffset: 0; } }
@keyframes tj-pop { from { transform: scale(0); } }
@keyframes tj-grow { from { transform: scaleX(0); } }
@keyframes tj-pill { from { opacity: 0; transform: translateX(var(--from, 0)); } }
@keyframes tj-stagein { from { opacity: 0; transform: scale(0.96); } }
@keyframes tj-ring { from { transform: scale(0.45); opacity: 0.7; } to { transform: scale(1.55); opacity: 0; } }

/* Lista con reglas que se dibujan, iconos que se trazan y filas con respuesta al pasar el cursor */
.tj-rows .row { position: relative; border-top: 0; transition: background-color var(--t-base) var(--ease); }
.tj-rows .row:last-child { border-bottom: 0; }
.tj-rows .row::before,
.tj-rows .row:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; }
.tj-rows .row::before { top: 0; }
.tj-rows .row:last-child::after { bottom: 0; }
.tj-rows .row__icon { border: 1px solid var(--line); border-radius: 50%; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out); }
.tj-rows .row__icon .icon { width: 22px; height: 22px; }
.tj-rows .row > span:last-child { transition: transform var(--t-slow) var(--ease-out); }
@media (hover: hover) {
  .tj-rows .row:hover { background: rgba(127, 134, 148, 0.08); }
  .tj-rows .row:hover .row__icon { background: var(--text); color: var(--white); border-color: var(--text); }
  .is-dark .tj-rows .row:hover .row__icon { color: var(--ink); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tj-rows .row:hover .row__icon { transform: scale(1.07); }
  .tj-rows .row:hover > span:last-child { transform: translateX(6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .tj-rows .row::before,
  .js [data-in]:not(.is-in) .tj-rows .row:last-child::after { transform: scaleX(0); }
  .js [data-in].is-in .tj-rows .row::before { animation: tj-rule 0.9s var(--ease-out) calc(0.55s + var(--i, 0) * 0.12s) backwards; }
  .js [data-in].is-in .tj-rows .row:last-child::after { animation: tj-rule 0.9s var(--ease-out) calc(0.55s + (var(--i, 0) + 1) * 0.12s) backwards; }
  .js [data-in]:not(.is-in) .tj-rows .row__icon .icon { stroke-dasharray: 120; stroke-dashoffset: 120; }
  .js [data-in].is-in .tj-rows .row__icon .icon { animation: tj-stroke 1s var(--ease-out) calc(0.7s + var(--i, 0) * 0.12s) backwards; }
  .js [data-in]:not(.is-in) .tj-rows .row > span:last-child { opacity: 0; }
  .js [data-in].is-in .tj-rows .row > span:last-child { animation: tj-fadeup 0.8s var(--ease-out) calc(0.75s + var(--i, 0) * 0.12s) backwards; }
}

/* =========================================================
   MODELOS (hoja clara que se superpone al hero)
   ========================================================= */
.models {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  padding-block: calc(var(--section-y) + 12px) calc(var(--section-y) * 0.72);
  background: linear-gradient(180deg, #eceff3, #e2e6eb);
  overflow: clip;
}
.models__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(32px, 6vw, 104px);
}
.models__copy { display: grid; gap: clamp(16px, 1.8vw, 24px); justify-items: start; }
.models__copy .actions { margin-top: 8px; }

/* El escenario lleva las variables de inclinación (--tx / --ty) que usan imagen y etiquetas */
.models__stage { container-type: inline-size; position: relative; width: 100%; max-width: 720px; justify-self: end; }
.models__board { position: relative; aspect-ratio: 1 / 0.9; overflow: clip; perspective: 1200px; }
.models__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-top: -5%;                                  /* recorte vertical centrado: los contornos siguen alineados */
  will-change: transform;
  touch-action: pan-y;
}
.models__img { display: block; width: 100%; height: 100%; }

/* Zonas por tarjeta con el contorno exacto. El hit-testing lo hace js/main.js con un test de punto en
   polígono (no hay elementos encima de la imagen en reposo). Las capas con clip-path (atenuar las demás y el
   reflejo que cruza) solo existen mientras hay una tarjeta activa. */
.models__stage.is-over { cursor: pointer; }
.tj-hit {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: var(--clip);
  pointer-events: none;
  --glint: rgba(255, 255, 255, 0.5);
}
.models__grid[data-card="black"] .tj-hit, .models__grid[data-card="white"] .tj-hit, .models__grid[data-card="alu"] .tj-hit {
  display: block;
  transition: background-color 0.6s var(--ease);
}
@starting-style {
  .models__grid[data-card="black"] .tj-hit, .models__grid[data-card="white"] .tj-hit, .models__grid[data-card="alu"] .tj-hit { background-color: transparent; }
}
.tj-hit--black { --glint: rgba(255, 255, 255, 0.36); }
.tj-hit--white { --glint: rgba(184, 155, 114, 0.4); }
.tj-hit--alu { --glint: rgba(255, 255, 255, 0.75); }
.tj-hit > i {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, var(--glint) 50%, transparent 60%);
  transform: translateX(-70%);
  opacity: 0;
}
.models__grid[data-card="black"] .tj-hit:not(.tj-hit--black),
.models__grid[data-card="white"] .tj-hit:not(.tj-hit--white),
.models__grid[data-card="alu"] .tj-hit:not(.tj-hit--alu) { background: rgba(228, 232, 238, 0.46); }
@media (prefers-reduced-motion: no-preference) {
  .models__grid[data-card="black"] .tj-hit--black > i,
  .models__grid[data-card="white"] .tj-hit--white > i,
  .models__grid[data-card="alu"] .tj-hit--alu > i { animation: tj-glint 1.2s var(--ease-out) both; }
}
@keyframes tj-glint { from { opacity: 1; transform: translateX(-70%); } to { opacity: 1; transform: translateX(70%); } }

/* Etiquetas flotantes con línea indicadora: punto, línea y etiqueta aparecen en secuencia */
.callouts { position: absolute; inset: 0; pointer-events: none; z-index: 5; will-change: transform; }
.callout { --len: clamp(18px, 7cqw, 64px); position: absolute; display: flex; align-items: center; pointer-events: auto; }
.callout--left { transform: translate(calc(-100% + 5px), -50%); --from: 10px; }
.callout--right { transform: translate(-5px, -50%); --from: -10px; }
.callout--black { left: 21%; top: 52%; }
.callout--white { left: 79%; top: 30%; }
.callout--alu { left: 47%; top: 83%; }
.callout--left .callout__line { transform-origin: right; }
.callout--right .callout__line { transform-origin: left; }
.callout__pill {
  padding: clamp(8px, 1.6cqw, 11px) clamp(12px, 2.8cqw, 20px);
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: clamp(0.75rem, 2.1cqw, 0.9375rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(15, 23, 42, 0.04);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
.callout__pill--dark { background: var(--ink); color: var(--white); }
.callout__line { width: var(--len); height: 1px; background: rgba(69, 77, 91, 0.85); }
.callout__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px rgba(69, 77, 91, 0.85), 0 0 0 5px rgba(255, 255, 255, 0.45); transition: background-color var(--t-base) var(--ease); }
/* Tarjeta activa (cursor, foco o toque): su etiqueta y su punto responden */
.models__grid[data-card="black"] .callout--black .callout__pill,
.models__grid[data-card="white"] .callout--white .callout__pill,
.models__grid[data-card="alu"] .callout--alu .callout__pill { box-shadow: 0 0 0 2px var(--ink), 0 18px 32px -12px rgba(15, 23, 42, 0.55); }
.models__grid[data-card="black"] .callout--black .callout__dot,
.models__grid[data-card="white"] .callout--white .callout__dot,
.models__grid[data-card="alu"] .callout--alu .callout__dot { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .models__grid[data-card="black"] .callout--black .callout__pill,
  .models__grid[data-card="white"] .callout--white .callout__pill,
  .models__grid[data-card="alu"] .callout--alu .callout__pill { transform: translateY(-3px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .callout__pill:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .models__board { opacity: 0; }
  .js [data-in].is-in .models__board { animation: tj-stagein 1.1s var(--ease-out) 0.1s backwards; }
  .js [data-in]:not(.is-in) .callout__dot { transform: scale(0); }
  .js [data-in]:not(.is-in) .callout__line { transform: scaleX(0); }
  .js [data-in]:not(.is-in) .callout__pill { opacity: 0; }
  .js [data-in].is-in .callout__dot { animation: tj-pop 0.5s var(--ease-out) calc(0.9s + var(--k, 0) * 0.28s) backwards; }
  .js [data-in].is-in .callout__line { animation: tj-grow 0.6s var(--ease-out) calc(1.05s + var(--k, 0) * 0.28s) backwards; }
  .js [data-in].is-in .callout__pill { animation: tj-pill 0.7s var(--ease-out) calc(1.3s + var(--k, 0) * 0.28s) backwards; }
}

@media (max-width: 900px) {
  .models__grid { grid-template-columns: minmax(0, 1fr); }
  .models__stage { justify-self: center; }
}
@media (max-width: 700px) {
  /* Etiquetas como chips debajo de las tarjetas, con el nombre completo */
  .callouts { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; pointer-events: auto; transform: none; }
  .callout, .callout--left, .callout--right { position: static; transform: none; }
  .callout__line, .callout__dot { display: none; }
  .callout__pill { padding: 11px 18px; font-size: 0.875rem; }
}

/* =========================================================
   CÓMO FUNCIONA: demostración en tres pasos
   El JS pone data-step (0 a 3) en .tj-demo; cada elemento define su
   posición para cada paso y las transiciones hacen el resto.
   ========================================================= */
.tj-how { padding-block: calc(var(--section-y) * 0.9); }
.tj-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  grid-template-areas: "head demo" "steps demo";
  column-gap: clamp(28px, 5vw, 88px);
  row-gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.tj-how__head { grid-area: head; align-self: end; display: grid; gap: clamp(14px, 1.6vw, 20px); justify-items: start; }
.tj-steps { grid-area: steps; align-self: start; display: grid; }
.tj-demo { grid-area: demo; align-self: center; }

/* Lista de pasos: la regla superior se llena mientras el paso está activo */
.tj-step { position: relative; padding: clamp(12px, 1.4vw, 18px) 0 clamp(14px, 1.5vw, 19px); cursor: pointer; }
.tj-step:last-child { border-bottom: 1px solid var(--line); }
.tj-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.tj-step::after { content: ""; position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.tj-step.is-done::after { transform: scaleX(1); opacity: 0.28; }
.tj-step.is-active::after { transform: scaleX(1); }
.tj-step.is-active.is-auto::after { animation: tj-fill var(--dur, 3800ms) linear both; }
@keyframes tj-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tj-step__h { margin: 0; font-size: inherit; }
.tj-step__btn {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 0 18px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
}
.tj-step__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out);
}
.tj-step__num b { font-weight: inherit; grid-area: 1 / 1; transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out); }
.tj-step__num .icon { grid-area: 1 / 1; width: 20px; height: 20px; stroke-width: 2.2; opacity: 0; transform: scale(0.5); transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out); }
.tj-step__title { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--text-3); transition: color var(--t-base) var(--ease); }
.tj-step p { margin: 6px 0 0 62px; max-width: 26em; font-size: 0.96875rem; color: var(--text-3); text-wrap: pretty; transition: color var(--t-base) var(--ease); }

.tj-step.is-active .tj-step__num { background: var(--ink); border-color: var(--ink); color: var(--white); transform: scale(1.06); }
.tj-step.is-active .tj-step__title { color: var(--ink); }
.tj-step.is-active p { color: var(--text-2); }
.tj-step.is-done .tj-step__num { border-color: var(--ink); color: var(--ink); }
.tj-step.is-done .tj-step__num b { opacity: 0; transform: scale(0.5); }
.tj-step.is-done .tj-step__num .icon { opacity: 1; transform: none; }
.tj-step.is-done .tj-step__title { color: var(--text-2); }
@media (hover: hover) {
  .tj-step:not(.is-active):hover .tj-step__title { color: var(--ink); }
  .tj-step:not(.is-active):hover .tj-step__num { border-color: var(--ink); }
}

/* Escenario */
.tj-demo {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 640px;
  justify-self: end;
  aspect-ratio: 1 / 0.88;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, #eef0f4, #e2e6eb);
  --bd: 1.2s;
}
.tj-demo::before {                         /* curvas de nivel de la marca, invertidas sobre claro */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/img/waves-dark.webp") 60% 100% / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 65%);
  mask-image: linear-gradient(to top, #000, transparent 65%);
}
.tj-demo__glow {
  position: absolute;
  left: 50cqw;
  top: 43cqw;
  z-index: 1;
  width: 80cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, 0.78) 58%, rgba(255, 255, 255, 0) 100%);
}
.tj-demo[data-step="1"] { --bd: 1.25s; }
.tj-demo[data-step="2"] { --bd: 2.25s; }
.tj-demo[data-step="3"] { --bd: 2.2s; }

/* Ondas NFC: salen del punto de contacto cuando la tarjeta llega */
.tj-rings { position: absolute; left: 50cqw; top: 13cqw; z-index: 2; width: 0; height: 0; pointer-events: none; }
.tj-rings i { position: absolute; left: -10cqw; top: -10cqw; width: 20cqw; height: 20cqw; border: 0.3cqw solid rgba(10, 12, 16, 0.5); border-radius: 50%; opacity: 0; }
.tj-demo[data-step="1"] .tj-rings i { animation: tj-ring 1.6s var(--ease-out) calc(0.95s + var(--k, 0) * 0.3s) forwards; }

/* Celular */
.tj-phone {
  position: absolute;
  left: 31cqw;
  top: 6cqw;
  z-index: 2;
  width: 38cqw;
  height: 76cqw;
  border-radius: 6.4cqw;
  background: #05070a;
  box-shadow: inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.2), 0 0 0 0.5cqw #1b2029, 0 5cqw 9cqw -3cqw rgba(10, 12, 16, 0.5), 0 1cqw 2.4cqw rgba(10, 12, 16, 0.25);
}
.tj-phone__screen {
  position: absolute;
  inset: 1.5cqw;
  overflow: hidden;
  border-radius: 5cqw;
  color: var(--white);
  background: radial-gradient(90% 40% at 30% 0, rgba(255, 255, 255, 0.1), transparent 70%), linear-gradient(170deg, #12161d, #05070a 65%);
}
.tj-phone__island { position: absolute; top: 2.2cqw; left: 50%; z-index: 3; width: 11cqw; height: 3cqw; border-radius: 999px; background: #000; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }

.tj-scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6cqw;
  padding: 9cqw 3cqw 3cqw;
  text-align: center;
  opacity: 0;
  transform: translateY(1.2cqw) scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.8s var(--ease-out);
}
.tj-demo[data-step="0"] .tj-scr--read,
.tj-demo[data-step="1"] .tj-scr--read,
.tj-demo[data-step="2"] .tj-scr--scan,
.tj-demo[data-step="3"] .tj-scr--review { opacity: 1; transform: none; transition-delay: 0.18s; }

/* Pantalla 1: lista para leer, tarjeta detectada */
.tj-read__icon { position: relative; display: grid; place-items: center; width: 13cqw; height: 13cqw; border: 0.3cqw solid rgba(255, 255, 255, 0.28); border-radius: 50%; }
.tj-read__icon .icon { grid-area: 1 / 1; width: 6.4cqw; height: 6.4cqw; stroke-width: 1.5; transition: opacity 0.35s var(--ease), transform 0.7s var(--ease-out); }
.tj-read__icon .icon:last-child { opacity: 0; transform: scale(0.4); }
.tj-demo[data-step="1"] .tj-read__icon .icon:first-child { opacity: 0; transform: scale(0.4); transition-delay: 1s; }
.tj-demo[data-step="1"] .tj-read__icon .icon:last-child { opacity: 1; transform: none; transition-delay: 1.05s; }
.tj-read__txt, .tj-scan__txt { display: grid; justify-items: center; }
.tj-read__txt b, .tj-scan__txt b { grid-area: 1 / 1; font-size: max(10px, 2.5cqw); font-weight: 550; letter-spacing: -0.01em; transition: opacity 0.4s var(--ease), transform 0.7s var(--ease-out); }
.tj-read__txt b:last-child, .tj-scan__txt b:last-child { opacity: 0; transform: translateY(1cqw); }
.tj-demo[data-step="1"] .tj-read__txt b:first-child { opacity: 0; transform: translateY(-1cqw); transition-delay: 1s; }
.tj-demo[data-step="1"] .tj-read__txt b:last-child { opacity: 1; transform: none; transition-delay: 1.05s; }
.tj-read__bar { width: 18cqw; height: 0.6cqw; overflow: hidden; border-radius: 1cqw; background: rgba(255, 255, 255, 0.16); }
.tj-read__bar i { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; }
.tj-demo[data-step="1"] .tj-read__bar i { animation: tj-fill 1.4s var(--ease) 1.1s forwards; }

/* Pantalla 2: visor de cámara con el QR */
.tj-vf { position: relative; display: grid; place-items: center; width: 24cqw; aspect-ratio: 1; }
.tj-vf__qr { display: block; width: 16cqw; aspect-ratio: 1; padding: 1.1cqw; border-radius: 1cqw; background: var(--white); }
.tj-vf__qr img { width: 100%; height: 100%; }
.tj-vf__c { position: absolute; width: 4.4cqw; height: 4.4cqw; border: 0 solid var(--white); }
.tj-vf__c--tl { left: 0; top: 0; border-width: 0.5cqw 0 0 0.5cqw; border-top-left-radius: 1.4cqw; }
.tj-vf__c--tr { right: 0; top: 0; border-width: 0.5cqw 0.5cqw 0 0; border-top-right-radius: 1.4cqw; }
.tj-vf__c--bl { left: 0; bottom: 0; border-width: 0 0 0.5cqw 0.5cqw; border-bottom-left-radius: 1.4cqw; }
.tj-vf__c--br { right: 0; bottom: 0; border-width: 0 0.5cqw 0.5cqw 0; border-bottom-right-radius: 1.4cqw; }
.tj-vf__line { position: absolute; left: -3%; right: -3%; top: 0; height: 0.45cqw; border-radius: 1cqw; background: linear-gradient(90deg, transparent, #fff 25%, #fff 75%, transparent); box-shadow: 0 0 2.4cqw rgba(255, 255, 255, 0.7); opacity: 0; }
.tj-demo[data-step="2"] .tj-vf { animation: tj-snap 0.9s var(--ease-out) 0.25s backwards; }
.tj-demo[data-step="2"] .tj-vf__line { animation: tj-scan 1.45s var(--ease) 0.8s both; }
@keyframes tj-snap { from { transform: scale(1.3); opacity: 0.2; } }
@keyframes tj-scan { 0% { opacity: 0; transform: translateY(0); } 12%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(23.6cqw); } }
.tj-demo[data-step="2"] .tj-scan__txt b:first-child { opacity: 0; transform: translateY(-1cqw); transition-delay: 2.1s; }
.tj-demo[data-step="2"] .tj-scan__txt b:last-child { opacity: 1; transform: none; transition-delay: 2.2s; }

/* Pantalla 3: el perfil se abre */
.tj-scr--review { justify-content: flex-start; gap: 0; padding: 9.5cqw 2.6cqw 3cqw; }
.tj-rv__place { display: flex; align-items: center; gap: 1.1cqw; width: 100%; padding: 1.3cqw 2cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.09); font-size: max(8.5px, 1.9cqw); }
.tj-rv__place .icon { width: max(11px, 2.6cqw); height: max(11px, 2.6cqw); stroke-width: 1.8; }
.tj-rv__place { white-space: nowrap; }
@container (max-width: 440px) { .tj-rv__place small { display: none; } }
.tj-rv__place b { font-weight: 600; }
.tj-rv__place small { margin-left: auto; color: var(--d-text-3); font-size: max(7.5px, 1.6cqw); }
.tj-rv__ask { margin-top: 3.6cqw; font-size: max(11px, 2.9cqw); font-weight: 650; letter-spacing: -0.02em; }
.tj-rv__stars { display: flex; gap: 0.9cqw; margin-top: 1.8cqw; color: var(--white); }
.tj-rv__stars .icon { width: max(14px, 4.4cqw); height: max(14px, 4.4cqw); fill: currentColor; stroke: none; }
.tj-rv__btn { position: relative; display: grid; place-items: center; width: 100%; height: 7.4cqw; margin-top: 3.2cqw; border-radius: 999px; background: var(--white); color: var(--ink); font-size: max(9px, 2.2cqw); font-weight: 600; }
.tj-rv__btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.9cqw; white-space: nowrap; }
.tj-rv__btn .icon { width: max(11px, 2.6cqw); height: max(11px, 2.6cqw); stroke-width: 2.4; }
.tj-rv__a { opacity: 0; }
.tj-rv__follow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3cqw; width: 100%; margin-top: 3.2cqw; }
.tj-rv__follow li { display: flex; align-items: center; justify-content: center; gap: 1cqw; height: 6.6cqw; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: transparent; color: var(--white); font-size: max(8.5px, 1.9cqw); font-weight: 600; white-space: nowrap; }
.tj-rv__follow .icon { width: max(11px, 2.6cqw); height: max(11px, 2.6cqw); stroke-width: 1.8; }
.tj-rv__follow li:not(.tj-fo--ig) { background: var(--white); border-color: var(--white); color: var(--ink); }
.tj-fo__t { display: grid; }
.tj-fo__t i { grid-area: 1 / 1; font-style: normal; }
.tj-fo__a { opacity: 0; }
.tj-demo[data-step="3"] .tj-rv__place { animation: tj-fadeup 0.6s var(--ease-out) 0.2s backwards; }
.tj-demo[data-step="3"] .tj-rv__ask { animation: tj-fadeup 0.6s var(--ease-out) 0.35s backwards; }
.tj-demo[data-step="3"] .tj-rv__stars .icon { animation: tj-star 0.55s var(--ease-out) calc(0.6s + var(--k, 0) * 0.15s) backwards; }
.tj-demo[data-step="3"] .tj-rv__btn { animation: tj-fadeup 0.6s var(--ease-out) 1.2s backwards, tj-tap2 0.5s var(--ease) 2s; }
.tj-demo[data-step="3"] .tj-rv__a { animation: tj-outup 0.3s var(--ease) 2.15s both; }
.tj-demo[data-step="3"] .tj-rv__b { animation: tj-inup 0.45s var(--ease-out) 2.15s both; }
.tj-demo[data-step="3"] .tj-rv__follow li { animation: tj-fadeup 0.6s var(--ease-out) calc(2.4s + var(--k, 0) * 0.14s) backwards; }
.tj-demo[data-step="3"] .tj-fo--ig { animation: tj-fadeup 0.6s var(--ease-out) 2.4s backwards, tj-followed 0.45s var(--ease) 3.2s both; }
.tj-demo[data-step="3"] .tj-fo--ig .tj-fo__a { animation: tj-outup 0.3s var(--ease) 3.2s both; }
.tj-demo[data-step="3"] .tj-fo--ig .tj-fo__b { animation: tj-inup 0.4s var(--ease-out) 3.25s both; }
.tj-rv__stars .icon:nth-child(1) { --k: 0; } .tj-rv__stars .icon:nth-child(2) { --k: 1; } .tj-rv__stars .icon:nth-child(3) { --k: 2; } .tj-rv__stars .icon:nth-child(4) { --k: 3; } .tj-rv__stars .icon:nth-child(5) { --k: 4; }
.tj-rv__follow li:nth-child(2) { --k: 1; }
@keyframes tj-star { from { color: rgba(255, 255, 255, 0.2); transform: scale(0.55); } 60% { transform: scale(1.28); } }
@keyframes tj-tap2 { 45% { transform: scale(0.94); } }
@keyframes tj-outup { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-45%); } }
@keyframes tj-inup { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
@keyframes tj-followed { from { background: var(--white); border-color: var(--white); color: var(--ink); } }
@keyframes tj-fadein { from { opacity: 0; transform: scale(0.5); } }

/* Tarjeta: viaja de un paso al siguiente (solo transform) */
.tj-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 40cqw;
  aspect-ratio: 1.586;
  transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(var(--cs));
  transition: transform 1.1s var(--ease-out);
  --cx: 58cqw; --cy: 64cqw; --cr: 6deg; --cs: 0.7;
}
.tj-demo[data-step="0"] .tj-card { --cx: 3cqw; --cy: 58cqw; --cr: -14deg; --cs: 1; }
.tj-demo[data-step="1"] .tj-card { --cx: 30cqw; --cy: 1.5cqw; --cr: -3deg; --cs: 1; }
.tj-demo[data-step="2"] .tj-card { --cx: 57cqw; --cy: 62cqw; --cr: 8deg; --cs: 0.8; }
.tj-demo[data-step="3"] .tj-card { --cx: 58cqw; --cy: 64cqw; --cr: 6deg; --cs: 0.7; }
.tj-card__body { position: absolute; inset: 0; }
.tj-demo[data-step="1"] .tj-card__body { animation: tj-tap 0.55s var(--ease) 0.95s; }
@keyframes tj-tap { 50% { transform: translateY(0.9cqw) scale(0.985); } }
.tj-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  border-radius: 2.8cqw;
  color: var(--white);
  background: radial-gradient(90% 70% at 15% 0, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(160deg, #151a22, #05070a 62%);
  box-shadow: inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.3), 0 3cqw 6cqw -2cqw rgba(10, 12, 16, 0.6), 0 0.8cqw 1.8cqw rgba(10, 12, 16, 0.3);
}
.tj-card__face > img { width: 10.5cqw; height: 10.5cqw; }
.tj-card__face > b { font-family: var(--font-brand); font-size: 6.4cqw; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.tj-card__face > .icon { position: absolute; top: 2.2cqw; right: 2.6cqw; width: 3.6cqw; height: 3.6cqw; stroke-width: 1.7; opacity: 0.8; }

/* Insignia con el resultado de cada paso */
.tj-badge {
  position: absolute;
  left: 2cqw;
  top: 12cqw;
  z-index: 5;
  display: grid;
  justify-items: center;
  padding: 1.5cqw 2.8cqw;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: max(10.5px, 2.1cqw);
  font-weight: 550;
  box-shadow: 0 1.4cqw 3cqw -1.2cqw rgba(10, 12, 16, 0.4), 0 0 0 1px rgba(10, 12, 16, 0.05);
}
.tj-badge b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 1cqw; white-space: nowrap; opacity: 0; }
.tj-badge .icon { width: max(13px, 2.7cqw); height: max(13px, 2.7cqw); stroke-width: 2; }
.tj-demo[data-step="0"] .tj-badge { opacity: 0; }
.tj-demo[data-step="1"] .tj-badge b:nth-child(1),
.tj-demo[data-step="2"] .tj-badge b:nth-child(2),
.tj-demo[data-step="3"] .tj-badge b:nth-child(3) { opacity: 1; }
/* Una animación con nombre distinto por paso: así se reinicia al cambiar de paso */
.tj-demo[data-step="1"] .tj-badge { animation: tj-badge1 0.8s var(--ease-out) var(--bd) backwards; }
.tj-demo[data-step="2"] .tj-badge { animation: tj-badge2 0.8s var(--ease-out) var(--bd) backwards; }
.tj-demo[data-step="3"] .tj-badge { animation: tj-badge3 0.8s var(--ease-out) var(--bd) backwards; }
@keyframes tj-badge1 { from { opacity: 0; transform: translateY(1.4cqw) scale(0.95); } }
@keyframes tj-badge2 { from { opacity: 0; transform: translateY(1.4cqw) scale(0.95); } }
@keyframes tj-badge3 { from { opacity: 0; transform: translateY(1.4cqw) scale(0.95); } }

@media (max-width: 959px) {
  .tj-how__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "demo" "steps"; }
  .tj-demo { justify-self: center; max-width: 520px; }
}
@media (max-width: 560px) {
  .tj-demo { aspect-ratio: 1 / 1.04; }
  .tj-step p { margin-left: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .tj-demo *, .tj-demo { transition: none !important; animation: none !important; }
  .tj-step, .tj-step * { transition: none !important; animation: none !important; }
}

/* =========================================================
   MUNDO DIGITAL (panel oscuro)
   ========================================================= */
.tj-world-band { padding-bottom: calc(var(--section-y) * 0.6); }
.tj-world-band + #precios { padding-top: calc(var(--section-y) * 0.6); }
.world {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.4vw, 56px);
  padding-block: clamp(30px, 3.6vw, 56px);
}
.world > * { position: relative; z-index: 1; }
.world__copy { display: grid; gap: clamp(16px, 1.8vw, 22px); justify-items: start; align-self: center; }
.world__copy .title { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.4rem); }
.world__phone { position: relative; justify-self: center; width: 150%; margin-inline: -25%; align-self: stretch; display: grid; place-items: center; }
.world__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.06;
  object-fit: cover;
}
/* Parallax suave del celular: animación vinculada al scroll (antes lo escribía JS en cada fotograma) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (hover: hover) {
    .world__phone { animation: tj-par linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes tj-par { from { translate: 0 24px; } to { translate: 0 -24px; } }
.world__list .row { grid-template-columns: 44px minmax(0, 1fr); padding-block: 14px; }

/* Ondas alrededor del celular y notificación que confirma el resultado */
.tj-ripple { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.tj-ripple i { grid-area: 1 / 1; width: 46%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-in].is-in .tj-ripple i { animation: tj-ring 2.8s var(--ease-out) calc(0.9s + var(--k, 0) * 0.5s) forwards; }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .world__phone .world__img { opacity: 0; }
  .js [data-in].is-in .world__phone .world__img { animation: tj-fadein-soft 1.2s var(--ease-out) 0.2s backwards; }
}
@keyframes tj-fadein-soft { from { opacity: 0; } }

/* Abanico: líneas finas que salen del celular hacia cada función (las dibuja js/main.js) */
.world > .tj-fan { position: absolute; inset: 0; z-index: 2; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tj-fan path { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke var(--t-base) var(--ease), stroke-width var(--t-base) var(--ease); }
.tj-fan path.is-hot { stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.5; }
.tj-fan circle { fill: var(--white); }
.tj-fan circle.pulse { stroke: rgba(255, 255, 255, 0.3); stroke-width: 7px; }
.tj-fan circle.ring { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
.tj-fan circle.is-hot { r: 4px; }
@media (min-width: 1101px) { .world > .tj-fan { display: block; } }
@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .tj-fan path { stroke-dashoffset: 1; }
  .js [data-in]:not(.is-in) .tj-fan circle { opacity: 0; }
  .js [data-in].is-in .tj-fan path { animation: tj-draw 0.9s var(--ease-out) var(--d, 0.6s) backwards; }
  .js [data-in].is-in .tj-fan circle:not(.pulse) { animation: tj-fadein-soft 0.6s var(--ease) calc(var(--d, 0.6s) + 0.7s) backwards; }
}

@media (max-width: 1100px) {
  .world { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .world__list { grid-column: 1 / -1; }
  .world__phone { width: 118%; margin-inline: -9%; }
}
@media (max-width: 760px) {
  .world { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .world__phone { width: min(86vw, 360px); margin-block: -9% -7%; margin-inline: auto; }
}

/* Cuando el pulso llega a una función, su icono se enciende un instante */
.is-dark .tj-rows .row.is-ping .row__icon { animation: tj-ping 0.95s var(--ease-out); }
@keyframes tj-ping { from { background: var(--white); border-color: var(--white); color: var(--ink); transform: scale(1.18); } }

/* =========================================================
   MODELOS · lista de beneficios (panel blanco, iconos sólidos, acabados concretos)
   ========================================================= */
.tj-feat {
  width: 100%;
  max-width: 36em;
  margin-block: 4px;
  padding: 6px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 34px 60px -38px rgba(10, 12, 16, 0.4), 0 0 0 1px rgba(10, 12, 16, 0.05);
}
.tj-feat__item {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
  padding: clamp(16px, 1.7vw, 22px) clamp(14px, 1.6vw, 20px);
  border-radius: 16px;
  transition: background-color var(--t-base) var(--ease);
}
.tj-feat__item + .tj-feat__item::before {            /* regla fina entre filas */
  content: "";
  position: absolute;
  left: clamp(14px, 1.6vw, 20px);
  right: clamp(14px, 1.6vw, 20px);
  top: 0;
  height: 1px;
  background: var(--line);
  transition: opacity var(--t-base) var(--ease);
}
.tj-feat__ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 12px 22px -12px rgba(10, 12, 16, 0.65);
  transition: transform var(--t-slow) var(--ease-out), border-radius var(--t-slow) var(--ease-out);
}
.tj-feat__ic .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.tj-feat__tx { display: grid; gap: 2px; min-width: 0; }
.tj-feat__tx strong { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.tj-feat__tx small { font-size: 0.96875rem; line-height: 1.45; color: var(--text-2); }

.tj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tj-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out);
}
.tj-chip--black, .tj-chip--white, .tj-chip--alu { padding-left: 9px; }
.tj-sw { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(10, 12, 16, 0.18); }
.tj-sw--black { background: radial-gradient(circle at 32% 28%, #3b4350, #0a0c10 62%); }
.tj-sw--white { background: radial-gradient(circle at 32% 28%, #fff, #e4e6ea 80%); }
.tj-sw--alu { background: linear-gradient(135deg, #f1f2f4 0%, #a8adb5 48%, #e3e5e8 100%); }

@media (hover: hover) {
  .tj-feat__item:hover { background: #f4f5f8; }
  .tj-feat__item:hover::before, .tj-feat__item:hover + .tj-feat__item::before { opacity: 0; }
  .tj-chip:hover { background: var(--white); border-color: var(--ink); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tj-feat__item:hover .tj-feat__ic { transform: translateY(-2px) rotate(-6deg) scale(1.05); border-radius: 50%; }
  .tj-chip:hover { transform: translateY(-2px); }
}

/* Entrada: el panel sube, cada fila le sigue, el icono se pinta y los acabados aparecen uno a uno */
@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .tj-feat { opacity: 0; }
  .js [data-in]:not(.is-in) .tj-feat__item,
  .js [data-in]:not(.is-in) .tj-chip { opacity: 0; }
  .js [data-in].is-in .tj-feat { animation: tj-fadeup 0.9s var(--ease-out) 0.4s backwards; }
  .js [data-in].is-in .tj-feat__item { animation: tj-fadeup 0.8s var(--ease-out) calc(0.55s + var(--i, 0) * 0.15s) backwards; }
  .js [data-in].is-in .tj-feat__ic { animation: tj-pop 0.6s var(--ease-out) calc(0.65s + var(--i, 0) * 0.15s) backwards; }
  .js [data-in]:not(.is-in) .tj-feat__ic .icon { stroke-dasharray: 120; stroke-dashoffset: 120; }
  .js [data-in].is-in .tj-feat__ic .icon { animation: tj-stroke 1s var(--ease-out) calc(0.85s + var(--i, 0) * 0.15s) backwards; }
  .js [data-in].is-in .tj-chip { animation: tj-fadeup 0.6s var(--ease-out) calc(1s + var(--i, 0) * 0.15s + var(--j, 0) * 0.08s) backwards; }
}

@media (max-width: 480px) {
  .tj-feat__item { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
  .tj-feat__ic { width: 44px; height: 44px; border-radius: 14px; }
  .tj-feat__ic .icon { width: 22px; height: 22px; }
}

/* =========================================================
   TARJETA DE PRODUCTO (.jcard): se dibuja en código, escala con container queries
   y se usa en el visor 3D, en los planes de precio y en el aviso de envío.
   ========================================================= */
.jcard { position: relative; aspect-ratio: 5 / 7; transform-style: preserve-3d; }
.jcard--land { aspect-ratio: 1.586; }
.jcard__face {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.jcard__face--back { transform: rotateY(180deg); }
.jcard__in {
  --fg: var(--white);
  --sub: rgba(255, 255, 255, 0.82);
  --cast: 0 3.4cqw 8cqw -1cqw rgba(8, 12, 22, 0.45), 0 0.6cqw 1.6cqw rgba(8, 12, 22, 0.22);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8.5cqw 8cqw 6cqw;
  border-radius: 7.4cqw;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--fg);
  box-shadow: var(--rim), var(--cast);
  background: var(--bg);
}
.jcard__in::before {                                  /* brillo diagonal fijo del material */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, var(--gloss, 0.16)) 0%, rgba(255, 255, 255, 0) 34%);
}
.jcard__shine {                                       /* reflejo vivo: círculo de luz de 200 % que se desplaza con transform (sin repintar) */
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  z-index: 2;
  pointer-events: none;
  opacity: var(--shine-o, 0);
  background: radial-gradient(24.5% 19.25% at 50% 50%, var(--shine-c, rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0) 100%);
  transform: translate3d(-10%, -20%, 0);
  transition: opacity 0.6s var(--ease);
}
.jcard__nfc { position: absolute; top: 6.4cqw; right: 7.4cqw; width: 9.2cqw; height: 9.2cqw; stroke-width: 1.7; opacity: 0.95; }
.jcard__logo { width: 24cqw; height: 24cqw; margin-top: 3cqw; object-fit: contain; }
.jcard__brand { margin-top: 1.2cqw; font-family: var(--font-brand); font-size: 13.2cqw; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.jcard__cta { margin-top: 7cqw; font-size: 4.9cqw; font-weight: 650; letter-spacing: 0.05em; line-height: 1.35; text-transform: uppercase; }
.jcard__cta small { display: block; font-size: 4.1cqw; font-weight: 450; color: var(--sub); }
.jcard__qr { position: relative; display: block; flex: none; width: 38cqw; aspect-ratio: 1; margin-top: 4.4cqw; border-radius: 1.8cqw; background: var(--white); }
.jcard__qr img { position: absolute; inset: 2.2cqw; width: calc(100% - 4.4cqw); height: calc(100% - 4.4cqw); }
.jcard__user { margin-top: auto; padding-top: 3.4cqw; font-size: 3.5cqw; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sub); }
.jcard__rule { position: relative; width: 64%; height: 2cqw; margin-top: 2.6cqw; opacity: 0.7; background: linear-gradient(currentColor, currentColor) left center / 40% 1px no-repeat, linear-gradient(currentColor, currentColor) right center / 40% 1px no-repeat; }
.jcard__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5cqw; height: 1.5cqw; border: 1px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
/* Reverso */
.jcard__bignfc { display: grid; place-items: center; width: 34cqw; height: 34cqw; margin-top: 12cqw; border: 0.5cqw solid currentColor; border-radius: 50%; opacity: 0.9; }
.jcard__bignfc .icon { width: 17cqw; height: 17cqw; stroke-width: 1.3; }
.jcard__bk { margin-top: 6cqw; font-size: 4.6cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.jcard__sn { position: absolute; left: 0; right: 0; bottom: 9cqw; font-size: 3.6cqw; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sub); }
.jcard__brand--sm { position: absolute; left: 0; right: 0; bottom: 3.4cqw; margin: 0; font-size: 6cqw; opacity: 0.85; }

/* Negra */
.jcard--black .jcard__in {
  --rim: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.88), inset 0 0 0 1.5cqw #060607, inset 0 0 9cqw rgba(255, 255, 255, 0.04);
  --bg: radial-gradient(90% 60% at 20% 0, rgba(255, 255, 255, 0.07), transparent 70%), linear-gradient(162deg, #121316 0%, #000 52%, #0a0b0d 100%);
}
/* Blanca */
.jcard--white .jcard__in {
  --fg: #0b0b0c; --sub: #4b4d52; --gloss: 0.7; --shine-c: rgba(184, 155, 114, 0.3);
  --rim: inset 0 0 0 0.35cqw rgba(15, 20, 30, 0.1), inset 0 0 0 1.3cqw #fbfbfa;
  --bg: linear-gradient(160deg, #ffffff 0%, #f1f0ed 55%, #e6e5e1 100%);
}
.jcard--white .jcard__qr { border: 1px solid #dcdcd7; }
.jcard--white .jcard__nfc { color: #a58e6e; }
/* Aluminio cepillado (horizontal) */
.jcard--alu .jcard__in {
  --fg: #0d0e11; --sub: #26282d; --gloss: 0.5; --shine-c: rgba(255, 255, 255, 0.7);
  --rim: inset 0 0 0 0.4cqw rgba(255, 255, 255, 0.7), inset 0 0 0 1cqw rgba(0, 0, 0, 0.07);
  padding: 5cqw 8cqw 4.4cqw;
  border-radius: 5.4cqw;
  --bg: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0) 0 1px, rgba(255, 255, 255, 0.11) 1px 2px, rgba(0, 0, 0, 0.035) 2px 3px),
        linear-gradient(104deg, #9ea2a9 0%, #e8eaed 17%, #b3b7bd 34%, #f4f5f7 51%, #a6aab1 69%, #dcdee2 85%, #959aa1 100%);
}
.jcard--alu .jcard__nfc { right: auto; left: 5.6cqw; top: 5cqw; width: 6.2cqw; height: 6.2cqw; transform: scaleX(-1); }
.jcard--alu .jcard__logo { width: 19cqw; height: 19cqw; margin-top: 1.4cqw; }
.jcard--alu .jcard__brand { margin-top: 0.8cqw; font-size: 11cqw; }
.jcard--alu .jcard__cta { margin-top: 3cqw; font-size: 3.7cqw; }
.jcard--alu .jcard__rule { margin-top: auto; height: 1.6cqw; }
.jcard--alu .jcard__qr--big { width: 30cqw; margin-top: 3cqw; }
.jcard--alu .jcard__sn { bottom: 7cqw; font-size: 3cqw; }
.jcard--alu .jcard__brand--sm { bottom: 2.4cqw; font-size: 4.6cqw; }

/* Puntos de interés sobre la tarjeta (cada cara trae el suyo) */
.jcard__hot {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jcard__hot i { display: block; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 1px rgba(10, 12, 16, 0.35); transition: transform var(--t-slow) var(--ease-out), background-color var(--t-base) var(--ease); }
.jcard--white .jcard__hot i, .jcard--alu .jcard__hot i { border-color: rgba(10, 12, 16, 0.85); background: rgba(10, 12, 16, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.jcard__hot::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(50% + 16px);
  left: 50%;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out);
}
.jcard__hot:hover::after, .jcard__hot:focus-visible::after, .jcard__hot.is-open::after { opacity: 1; transform: translate(-50%, 0); }
.jcard__hot:hover i, .jcard__hot:focus-visible i, .jcard__hot.is-open i { transform: scale(1.25); }
.jcard__hot:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }

/* =========================================================
   MÍRALAS DE CERCA · visor 3D + configurador
   ========================================================= */
.tj-view { padding-block: calc(var(--section-y) * 0.85); }
.tj-view__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas: "stage head" "stage detail";
  column-gap: clamp(28px, 5vw, 88px);
  row-gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.tj-view__head { grid-area: head; align-self: end; display: grid; gap: clamp(14px, 1.6vw, 20px); justify-items: start; }
.tj-view__detail { grid-area: detail; align-self: start; display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; width: 100%; }
.tj-view__stage { grid-area: stage; align-self: center; display: grid; justify-items: center; gap: 14px; }

.tj-view__pad {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 0.8;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, #eef0f4, #e2e6eb);
  perspective: 1300px;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.tj-view__pad:active { cursor: grabbing; }
.tj-view__pad::before {                               /* curvas de nivel de la marca sobre claro */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../assets/img/waves-dark.webp") 60% 100% / cover no-repeat;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 65%);
  mask-image: linear-gradient(to top, #000, transparent 65%);
}
.tj-view__pad::after {                                /* halo suave detrás de la tarjeta */
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, 0.75) 58%, rgba(255, 255, 255, 0) 100%);
}
.tj-view__pad:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.tj-view__rot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.tj-view__rot > .jcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 37%;
  margin: 0;
  translate: -50% -50%;
  visibility: hidden;
  scale: 0.94;
  transition: scale 0.8s var(--ease-out), visibility 0s linear 0.55s;
}
.tj-view__rot > .jcard--land { width: 64%; }
.tj-view__rot > .jcard.is-active { visibility: visible; scale: 1; transition: scale 0.8s var(--ease-out), visibility 0s; }
.tj-view__rot > .jcard .jcard__in { transition: opacity 0.5s var(--ease); }
.tj-view__rot > .jcard:not(.is-active) .jcard__in { opacity: 0; }
.js .tj-view .jcard:not(.is-active) .jcard__hot { display: none; }
.tj-view__rot .jcard__shine { --shine-o: 1; }
.tj-view__stage[data-face="back"] .jcard__face--front, .tj-view__stage[data-face="front"] .jcard__face--back { pointer-events: none; }

.tj-view__tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tj-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out);
}
.tj-tool .icon { width: 18px; height: 18px; stroke-width: 1.7; }
.tj-tool[hidden] { display: none; }
@media (hover: hover) { .tj-tool:hover { border-color: var(--ink); } }
.tj-tool:active { transform: scale(0.97); }
.is-dark .tj-tool { background: rgba(255, 255, 255, 0.08); color: var(--white); border-color: rgba(255, 255, 255, 0.28); }

.tj-view__hint { min-height: 1.2em; font-size: 0.8125rem; color: var(--text-3); }

/* Selector de acabado con indicador que desliza */
.tj-finish {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 360px);
  padding: 4px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 18px 34px -24px rgba(10, 12, 16, 0.5), 0 0 0 1px rgba(10, 12, 16, 0.06);
}
.tj-finish::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.65s var(--ease-out);
}
.tj-finish button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-base) var(--ease);
}
.tj-finish button[aria-checked="true"] { color: var(--white); }
.tj-finish button[aria-checked="true"] .tj-sw { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.tj-finish button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Datos que cambian con el acabado */
.tj-spec { width: 100%; max-width: 30em; }
.tj-spec__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.tj-spec__row:last-child { border-bottom: 1px solid var(--line); }
.tj-spec dt { font-size: 0.875rem; color: var(--text-3); }
.tj-spec dd { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.tj-spec dd small { font-size: 0.8125rem; font-weight: 450; color: var(--text-3); letter-spacing: 0; }
.tj-spec [data-spec] { display: inline-block; transition: opacity 0.22s var(--ease), transform 0.5s var(--ease-out); }
.tj-spec.is-swap [data-spec] { opacity: 0; transform: translateY(6px); }
.tj-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; width: 100%; max-width: 30em; }
.tj-facts li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--text-2); }
.tj-facts .icon { width: 20px; height: 20px; stroke-width: 1.5; color: var(--ink); }

@media (max-width: 959px) {
  .tj-view__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "detail"; }
  .tj-view__head { align-self: start; }
}
@media (max-width: 480px) {
  .tj-facts { grid-template-columns: minmax(0, 1fr); }
  .tj-view__pad { aspect-ratio: 1 / 0.98; }
  .tj-view__rot > .jcard { width: 44%; }
  .tj-view__rot > .jcard--land { width: 76%; }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-in]:not(.is-in) .tj-view__pad { opacity: 0; }
  .js [data-in].is-in .tj-view__pad { animation: tj-stagein 1.1s var(--ease-out) 0.1s backwards; }
}

/* =========================================================
   CÓMO FUNCIONA · anillo de progreso y pausa
   ========================================================= */
.tj-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.tj-ring circle { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tj-step.is-active.is-auto .tj-ring circle { animation: tj-ringfill var(--dur, 3800ms) linear both; }
@keyframes tj-ringfill { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.tj-step.is-paused::after, .tj-step.is-paused .tj-ring circle { animation-play-state: paused; }
.tj-demo.is-reading .tj-phone { box-shadow: inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.2), 0 0 0 0.5cqw #1b2029, 0 5cqw 9cqw -3cqw rgba(10, 12, 16, 0.5), 0 0 7cqw 1cqw rgba(255, 255, 255, 0.7); }
.tj-phone { transition: box-shadow 0.8s var(--ease-out); }

/* =========================================================
   MUNDO DIGITAL · valoración que llega con el pulso
   ========================================================= */
.world__list .row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.world__list .row__rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease-out);
}
.world__list .row__rate .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.js .world__list .row__rate { opacity: 0; transform: scale(0.85); }
.js .world__list .row.is-rated .row__rate { opacity: 1; transform: none; }

/* =========================================================
   PRECIOS · el producto en cada plan, declaración y garantías
   ========================================================= */
#precios .section-head {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  grid-template-areas: "t a" "l a";
  column-gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
#precios .section-head .title { grid-area: t; max-width: none; font-size: clamp(2.3rem, 0.9rem + 4.4vw, 4.4rem); line-height: 1; letter-spacing: -0.045em; }
#precios .section-head .lede { grid-area: l; }
.tj-line--sub { margin-top: 0.5em; font-size: 0.42em; font-weight: 550; letter-spacing: -0.025em; line-height: 1.25; }
.plan-assure { grid-area: a; align-self: end; display: grid; width: 100%; max-width: 26em; justify-self: end; }
.plan-assure li { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--text-2); }
.plan-assure li:last-child { border-bottom: 1px solid var(--line); }
.plan-assure .icon { width: 20px; height: 20px; stroke-width: 1.5; color: var(--ink); }
@media (max-width: 900px) {
  #precios .section-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "l" "a"; }
  .plan-assure { justify-self: start; margin-top: 8px; }
}

/* La miniatura añade una fila: la subcuadrícula compartida pasa de 4 a 5 filas */
@media (min-width: 961px) { @supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: auto auto auto 1fr auto; }
  .plan { grid-row: span 5; }
} }

/* Foto-pieza del plan: tarjetas en miniatura que reaccionan al cursor */
.plan__media {
  position: relative;
  aspect-ratio: 16 / 9.2;
  margin: -8px -8px 2px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #f1f3f6, #e5e8ed);
  --shine-o: 0;
}
.plan--featured .plan__media { background: linear-gradient(180deg, #151a23, #0a0d12); }
.pm__stage { position: absolute; inset: 0; }
.pm__c {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  translate: calc(-50% + var(--px, 0%)) calc(-50% + var(--py, 0%));
  rotate: var(--r, 0deg);
  scale: var(--s, 1);
  transition: translate 0.9s var(--ease-out), rotate 0.9s var(--ease-out), scale 0.9s var(--ease-out);
}
.pm__c .jcard { width: 100%; }
.pm__c--alu { width: 52%; }
.pm__c .jcard__shine { --shine-o: var(--shine-o-p, 0); }
.plan__media { --shine-o-p: 0; }
.plan:hover .plan__media { --shine-o-p: 1; }

.plan__media--duo .pm__stage { inset: 0 0 46px; }
.plan__media--duo .pm__c { width: 25%; }
.plan__media--duo .pm__c--black { --px: -26%; --r: -7deg; z-index: 2; }
.plan__media--duo .pm__c--white { --px: 26%; --r: 8deg; z-index: 1; --s: 0.94; }
.plan__media--duo[data-pick="white"] .pm__c--white { --px: -26%; --r: -7deg; z-index: 2; --s: 1; }
.plan__media--duo[data-pick="white"] .pm__c--black { --px: 26%; --r: 8deg; z-index: 1; --s: 0.94; }
.plan__media--solo .pm__c--alu { --r: -5deg; }
.plan__media--trio .pm__c--black { --px: -62%; --py: -6%; --r: -11deg; width: 25%; z-index: 1; }
.plan__media--trio .pm__c--white { --px: 62%; --py: -6%; --r: 11deg; width: 25%; z-index: 1; }
.plan__media--trio .pm__c--alu { --py: 14%; --r: -3deg; width: 44%; z-index: 2; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:hover .plan__media--duo .pm__c--black { --px: -30%; --r: -9deg; --py: -3%; }
  .plan:hover .plan__media--duo .pm__c--white { --px: 30%; --r: 10deg; --py: -1%; }
  .plan:hover .plan__media--solo .pm__c--alu { --r: -2deg; --s: 1.05; --py: -3%; }
  .plan:hover .plan__media--trio .pm__c--black { --px: -68%; --r: -14deg; }
  .plan:hover .plan__media--trio .pm__c--white { --px: 68%; --r: 14deg; }
  .plan:hover .plan__media--trio .pm__c--alu { --py: 10%; --s: 1.04; }
}
.pm__tog { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 18px -10px rgba(10, 12, 16, 0.5); }
.pm__tog button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 9px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.pm__tog button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.pm__tog button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) { .pm__tog button { min-height: 44px; padding: 0 14px 0 11px; } }

/* Luz que sigue al cursor por el borde de cada plan (solo con puntero fino) */
.plan::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--spx, -200px) var(--spy, -200px), rgba(10, 12, 16, 0.55), rgba(10, 12, 16, 0) 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 0.5s var(--ease);
}
.plan--featured::before { background: radial-gradient(260px circle at var(--spx, -200px) var(--spy, -200px), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%); }
@media (hover: hover) and (pointer: fine) { .plan:hover::before { opacity: 1; } }

/* Dígitos del precio que ruedan al entrar (la regla compartida .plan__price span no debe encoger los dígitos) */
.plan__price strong span { font-size: inherit; color: inherit; }
.roll { display: inline-block; width: 1ch; height: 1em; overflow: hidden; vertical-align: top; }
.roll__col { display: block; transform: translateY(calc(var(--n, 0) * -1em)); }
.roll__col i { display: block; height: 1em; font-style: normal; line-height: 1; }
.js .plan:not(.is-visible) .roll__col { transform: none; }
.js .plan.is-visible .roll__col { transition: transform 1.1s var(--ease-out) calc(0.25s + var(--k, 0) * 90ms); }

/* Móvil: los planes pasan a carrusel con imán, con el destacado al centro */
.plans-dots { display: none; }
@media (max-width: 760px) {
  .plans {
    display: flex;
    gap: 14px;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 min(84%, 360px); scroll-snap-align: center; }
  .plans-dots { display: flex; justify-content: center; gap: 8px; margin-top: -2px; }
  .plans-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color var(--t-base) var(--ease), width var(--t-slow) var(--ease-out); }
  .plans-dots i.is-on { width: 22px; border-radius: 999px; background: var(--ink); }
}

/* =========================================================
   CONTACTO · validación con gesto y aviso de envío
   ========================================================= */
.field.is-valid label::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 10px;
  margin-left: 10px;
  border: solid rgba(255, 255, 255, 0.85);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  animation: tj-check 0.5s var(--ease-out) backwards;
}
@keyframes tj-check { from { opacity: 0; transform: translateY(-2px) rotate(45deg) scale(0); } }
.tj-ok { position: relative; width: 116px; margin-bottom: 4px; }
.tj-ok .jcard { width: 100%; }
.tj-ok__ring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; margin: -50% 0 0 -50%; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tj-ok .jcard { animation: tj-okin 1s var(--ease-out) backwards; }
  .tj-ok__ring { animation: tj-ring 1.8s var(--ease-out) 0.5s both; }
  .tj-ok__ring + .tj-ok__ring { animation-delay: 0.9s; }
}
@keyframes tj-okin { from { opacity: 0; transform: translateY(26px) rotate(-12deg) scale(0.9); } }

/* =========================================================
   CIERRE · barra móvil · botones magnéticos · pie
   ========================================================= */
.tj-outro { position: relative; overflow: clip; padding-block: clamp(32px, 5vw, 68px) 0; text-align: center; }
.tj-outro::before { content: ""; position: absolute; inset: 0; background: url("../assets/img/waves-dark.webp") 50% 100% / cover no-repeat; opacity: 0.22; -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 60%, #000, transparent 75%); }
.tj-outro__in { position: relative; display: grid; justify-items: center; gap: 10px; }
.tj-outro__mark { width: clamp(52px, 7vw, 80px); height: auto; }
.tj-outro__line { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.6rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; }
.tj-outro__sub { color: var(--text-2); }

.tj-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; padding: 22px var(--gutter) max(12px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(247, 248, 250, 0), rgba(247, 248, 250, 0.94) 42%); transform: translateY(110%); visibility: hidden; pointer-events: none; transition: transform 0.6s var(--ease-out), visibility 0s linear 0.6s; }
.tj-bar .btn { width: 100%; min-height: 54px; box-shadow: 0 18px 30px -16px rgba(10, 12, 16, 0.6); pointer-events: auto; }
.tj-bar small { font-size: 0.8125rem; font-weight: 450; opacity: 0.72; }
.tj-bar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
@media (max-width: 959px) { .tj-bar:not([hidden]) { display: block; } }

.btn[data-magnetic] { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); transition-duration: var(--t-base), var(--t-base), var(--t-base), var(--t-slow), 0.7s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn[data-magnetic]:hover { transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 1px), 0); }
}

.site-footer .signature { text-wrap: balance; max-width: 13em; }
.strip small { font-size: 0.875rem; }
.plan__badge { font-size: 0.8125rem; }

/* Táctil: sin efectos que dependan del cursor, con áreas cómodas */
@media (hover: none), (pointer: coarse) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; padding-inline: 3px; margin-inline: -3px; }
  .footer__col a { display: block; padding-block: 13px; }
  .footer__legal a { padding-block: 15px; }
  .tj-hit { cursor: default; }
  .tj-chip--btn { min-height: 44px; padding-inline: 16px; }
  .callout__pill { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sweep { display: none; }
  .hero__card, .models__art, .tj-view__rot { transition: none; }
  .tj-finish::before { transition: none; }
}

/* Acabados de la lista de beneficios: botones reales (táctil y teclado) */
.tj-chips > li { display: flex; }
button.tj-chip { font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tj-chip--btn[aria-pressed="true"] { background: var(--white); border-color: var(--ink); }
.tj-chip--btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* =========================================================
   RENDIMIENTO · cabecera sin desenfoque de fondo
   backdrop-filter obliga a desenfocar de nuevo lo que pasa por detrás en CADA fotograma de scroll
   (en celulares es lo más caro de la página). Se sustituye por un fondo casi opaco del mismo tono.
   ========================================================= */
.site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(247, 248, 250, 0.95); }
.site-header[data-tone="dark"].on-dark.is-scrolled { background: rgba(5, 7, 10, 0.9); }

/* Paneles oscuros (compartidos): mismo fondo, pero las ondas van como imagen (en vez de SVG de trazo fino) y el
   degradado en un pseudo-elemento aparte: juntos en un mismo fondo multicapa la GPU los pintaba mucho más lento. */
.panel::before { background: url("../assets/img/waves.webp") 60% 100% / cover no-repeat; }
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 90% at 100% 0, rgba(120, 128, 144, 0.16), transparent 65%);
  opacity: 0.8;
}

/* =========================================================
   RENDIMIENTO · miniaturas planas
   Las miniaturas de los planes no se giran: sin contexto 3D ni cara trasera no crean una capa de GPU por cara
   dentro de un contenedor con esquinas redondeadas (eso era lo más caro de Precios).
   ========================================================= */
.jcard--mini { transform-style: flat; }
.jcard--mini .jcard__face { -webkit-backface-visibility: visible; backface-visibility: visible; }

/* =========================================================
   RENDIMIENTO · secciones bajo el pliegue, diferidas
   Mientras carga la página y corre la entrada del hero, lo que está más abajo no necesita estilo, maquetación ni
   pintado: con content-visibility cada fotograma de esa entrada cuesta una fracción y el primer pintado llega antes
   (las fuentes e imágenes de esas secciones tampoco se piden todavía).
   Solo con JS: main.js (módulo "carga") las va despertando con .is-cv-on, primero las cercanas y luego el resto en
   ratos libres. Una sección despierta queda exactamente como antes. contain-intrinsic-block-size es la altura
   estimada del contenido (sin relleno) para que la barra de scroll no salte; el navegador la afina al renderizar. */
.js :is(#modelos, #detalle, #como-funciona, .tj-world-band, #precios, #faq, #contacto, .tj-outro, .site-footer):not(.is-cv-on) {
  content-visibility: auto;
}
.js #modelos:not(.is-cv-on) { contain-intrinsic-block-size: auto 1300px; }
.js #detalle:not(.is-cv-on) { contain-intrinsic-block-size: auto 1055px; }
.js #como-funciona:not(.is-cv-on) { contain-intrinsic-block-size: auto 1025px; }
.js .tj-world-band:not(.is-cv-on) { contain-intrinsic-block-size: auto 1000px; }
.js #precios:not(.is-cv-on) { contain-intrinsic-block-size: auto 1190px; }
.js #faq:not(.is-cv-on) { contain-intrinsic-block-size: auto 580px; }
.js #contacto:not(.is-cv-on) { contain-intrinsic-block-size: auto 1090px; }
.js .tj-outro:not(.is-cv-on) { contain-intrinsic-block-size: auto 140px; }
.js .site-footer:not(.is-cv-on) { contain-intrinsic-block-size: auto 750px; }
@media (min-width: 761px) and (max-width: 959px) {
  .js .tj-world-band:not(.is-cv-on) { contain-intrinsic-block-size: auto 800px; }
  .js #precios:not(.is-cv-on) { contain-intrinsic-block-size: auto 2740px; }
  .js #contacto:not(.is-cv-on) { contain-intrinsic-block-size: auto 830px; }
  .js .site-footer:not(.is-cv-on) { contain-intrinsic-block-size: auto 525px; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .js #modelos:not(.is-cv-on) { contain-intrinsic-block-size: auto 830px; }
  .js #detalle:not(.is-cv-on) { contain-intrinsic-block-size: auto 556px; }
  .js #como-funciona:not(.is-cv-on) { contain-intrinsic-block-size: auto 650px; }
  .js .tj-world-band:not(.is-cv-on) { contain-intrinsic-block-size: auto 970px; }
  .js #precios:not(.is-cv-on) { contain-intrinsic-block-size: auto 1015px; }
  .js #faq:not(.is-cv-on) { contain-intrinsic-block-size: auto 391px; }
  .js #contacto:not(.is-cv-on) { contain-intrinsic-block-size: auto 545px; }
  .js .tj-outro:not(.is-cv-on) { contain-intrinsic-block-size: auto 166px; }
  .js .site-footer:not(.is-cv-on) { contain-intrinsic-block-size: auto 320px; }
}
@media (min-width: 1280px) {
  .js #modelos:not(.is-cv-on) { contain-intrinsic-block-size: auto 720px; }
  .js #detalle:not(.is-cv-on) { contain-intrinsic-block-size: auto 606px; }
  .js #como-funciona:not(.is-cv-on) { contain-intrinsic-block-size: auto 622px; }
  .js .tj-world-band:not(.is-cv-on) { contain-intrinsic-block-size: auto 540px; }
  .js #precios:not(.is-cv-on) { contain-intrinsic-block-size: auto 1086px; }
  .js #faq:not(.is-cv-on) { contain-intrinsic-block-size: auto 391px; }
  .js #contacto:not(.is-cv-on) { contain-intrinsic-block-size: auto 545px; }
  .js .tj-outro:not(.is-cv-on) { contain-intrinsic-block-size: auto 171px; }
  .js .site-footer:not(.is-cv-on) { contain-intrinsic-block-size: auto 332px; }
}
@media print {
  .js :is(#modelos, #detalle, #como-funciona, .tj-world-band, #precios, #faq, #contacto, .tj-outro, .site-footer) { content-visibility: visible; }
}
/* <picture> solo envuelve la imagen (AVIF con respaldo WebP): no debe afectar a la maquetación */
.models__art > picture, .world__phone > picture { display: contents; }