/* =========================================================
   Método · tablero Metodo.dc.html
   Medidas en "píxeles de tablero" (× --u), igual que la Home.
   Las dos pantallas que quedan quietas (Las dieciséis estaciones
   y Reservar) ocupan la ventana y centran su escena de 1440 × 900.
   ========================================================= */

.metodo { --u1: var(--u); }
.metodo .escena { position: relative; }
.caps { letter-spacing: 0.06em; white-space: nowrap; }
.nw { white-space: nowrap; }

/* Header: Método marcado como página actual */
.cab-nav .actual { text-decoration: underline; text-underline-offset: 6px; }

/* Títulos de bloque y la raya negra de arriba */
.raya { position: absolute; left: calc(64 * var(--u)); width: calc(1312 * var(--u)); top: calc(120 * var(--u)); height: 2px; background: var(--negro); }
.tit { position: absolute; left: calc(64 * var(--u)); top: calc(190 * var(--u)); margin: 0; font-weight: 400; font-size: calc(56 * var(--u)); line-height: 1.02; }

/* ---------- Apertura ---------- */
.ap { position: relative; height: calc(800 * var(--u)); background: var(--blanco); }
.ap .escena { height: 100%; }
.ap-tit { position: absolute; left: calc(64 * var(--u)); top: calc(200 * var(--u)); margin: 0; font-weight: 400; font-size: calc(56 * var(--u)); line-height: 1.02; }
.ap-p { position: absolute; top: calc(210 * var(--u)); width: calc(360 * var(--u)); margin: 0; font-size: calc(24 * var(--u)); line-height: 1.45; color: #6F6E6A; }
.ap-p .neg { color: var(--negro); }
.ap-p1 { left: calc(560 * var(--u)); }
.ap-p2 { left: calc(960 * var(--u)); }
.js .ap-tit, .js .ap-p { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.3s var(--ease); }
.js .ap-p1 { transition-delay: 0.35s; }
.js .ap-p2 { transition-delay: 0.7s; }
.listo .ap-tit, .listo .ap-p { opacity: 1; transform: none; }

/* ---------- Cuatro cualidades ---------- */
.ob { position: relative; height: calc(960 * var(--u)); background: var(--blanco); box-shadow: 0 2px 0 var(--blanco); }
.ob .escena { height: 100%; }
.cq-lista { position: absolute; left: calc(820 * var(--u)); width: calc(524 * var(--u)); top: calc(380 * var(--u)); border-top: 1px solid rgba(0, 0, 0, 0.15); }
.cq { border-bottom: 1px solid rgba(0, 0, 0, 0.15); opacity: var(--e, 1); transform: translateY(calc((1 - var(--e, 1)) * 22px)); }
.cq-btn { display: flex; align-items: baseline; gap: calc(28 * var(--u)); width: 100%; padding: calc(22 * var(--u)) 0; background: none; border: none; cursor: pointer; color: var(--negro); text-align: left; opacity: 0.35; transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.cq.on .cq-btn { opacity: 1; }
.cq-n { width: calc(24 * var(--u)); flex: none; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0.06em; }
.cq-t { font-size: calc(26 * var(--u)); line-height: 1; letter-spacing: 0.06em; }
.cq-d { margin: 0 0 0 calc(52 * var(--u)); overflow: hidden; max-height: 0; box-sizing: border-box; font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(17 * var(--u))); line-height: 1.45; opacity: 0; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; }
.cq-d::after { content: ''; display: block; height: calc(22 * var(--u)); }
.cq.on .cq-d { max-height: calc(90 * var(--u)); opacity: 0.85; }

/* ---------- Las dieciséis estaciones ---------- */
.es { position: relative; height: calc(600 * var(--u) + 100vh); height: calc(600 * var(--u) + 100svh); background: var(--carbon); color: var(--blanco); box-shadow: 0 2px 0 var(--carbon); }
.es-panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.es .tex { opacity: 0.16; }
.es-escena, .re-escena, .med-escena { position: absolute; left: calc(50% - 720 * var(--u)); top: calc(50% - 450 * var(--u)); width: calc(1440 * var(--u)); height: calc(900 * var(--u)); }
.re-escena { top: 0; }
.es-txt { position: absolute; left: calc(64 * var(--u)); top: calc(200 * var(--u)); width: calc(420 * var(--u)); display: flex; flex-direction: column; gap: calc(36 * var(--u)); opacity: var(--eo, 0); transform: translateY(calc(var(--ey, 20) * 1px)); }
.es-txt h2 { margin: 0; font-weight: 400; font-size: calc(56 * var(--u)); line-height: 1.02; }
.es-txt p { margin: 0; font-size: calc(22 * var(--u)); line-height: 1.45; color: rgba(255, 255, 255, 0.55); }
.es-txt .neg { color: var(--blanco); }
.rueda { position: absolute; inset: 0; }
.rueda-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rueda-tics { opacity: var(--to, 0); }
.punto { position: absolute; width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: none; background: none; cursor: none; transform: var(--pt, none); }
.punto:focus-visible { outline: none; }
.punto span { position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); min-width: 4px; min-height: 4px; border-radius: 50%; background: var(--pc, #fff); opacity: var(--po, 0); transform: scale(var(--ps, 1)); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s ease; }
.etiq { position: absolute; width: calc(170 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0.04em; white-space: nowrap; color: var(--blanco); opacity: var(--p, 0); pointer-events: none; }
.etiq.der { text-align: right; }
.etiq span { pointer-events: auto; padding: 4px 0; }
.anillo { position: absolute; left: calc(var(--rx, 930) * var(--u)); top: calc(var(--ry, 230) * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin: calc(-18 * var(--u)) 0 0 calc(-18 * var(--u)); box-sizing: border-box; border: 1px solid #fff; border-radius: 50%; pointer-events: none; opacity: var(--ro, 0); }
.es-nom { position: absolute; left: calc(780 * var(--u)); top: calc(410 * var(--u)); width: calc(300 * var(--u)); text-align: center; opacity: var(--nomOp, 0); pointer-events: none; }
.es-nom p { margin: 0; }
.es-nom-en { font-size: calc(22 * var(--u)); line-height: 1.1; letter-spacing: 0.08em; padding-left: 0.08em; text-transform: uppercase; color: var(--nomCol, #fff); transition: color 0.5s ease; }
.es-nom-es { margin-top: calc(8 * var(--u)) !important; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0.06em; padding-left: 0.06em; color: rgba(255, 255, 255, 0.6); }

/* ---------- Pasos (presencial y online) ---------- */
.pr { position: relative; height: calc(1760 * var(--u)); background: var(--blanco); }
.pr-escena { height: calc(860 * var(--u)); }
.onl { position: relative; z-index: 1; height: calc(1100 * var(--u)); background: var(--blanco); }
.on-escena { height: 100%; }
.pasos { position: absolute; left: 0; width: 100%; top: calc(var(--top, 440) * var(--u)); }
.pr .pasos { --top: 440; }
.onl .pasos { --top: 420; }
.pasos-riel, .pasos-linea { position: absolute; left: calc(64 * var(--u)); top: calc(4 * var(--u)); height: 1px; }
.pasos-riel { width: calc(1312 * var(--u)); background: rgba(0, 0, 0, 0.15); }
.pasos-linea { width: calc(var(--lw, 0) * var(--u)); background: var(--negro); }
.paso { position: absolute; top: 0; width: calc(288 * var(--u)); padding: 0 0 calc(12 * var(--u)); background: none; border: none; text-align: left; color: var(--negro); opacity: var(--s, 0.22); transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.paso:nth-of-type(1) { left: calc(64 * var(--u)); }
.paso:nth-of-type(2) { left: calc(392 * var(--u)); }
.paso:nth-of-type(3) { left: calc(720 * var(--u)); }
.paso:nth-of-type(4) { left: calc(1048 * var(--u)); }
.paso > span { display: block; }
.paso-p { width: calc(9 * var(--u)); height: calc(9 * var(--u)); min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--negro); }
.paso-n { margin-top: calc(24 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0.06em; }
.paso-t { margin-top: calc(6 * var(--u)); font-size: calc(26 * var(--u)); }
.paso-d { margin-top: calc(12 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(12px, calc(15 * var(--u))); line-height: 1.45; opacity: 0; transition: opacity 0.45s ease; }
.paso.foco .paso-d { opacity: 0.8; }

/* ---------- La medición: banda negra con la foto ---------- */
.med { position: absolute; left: 0; right: 0; top: calc(860 * var(--u)); height: calc(900 * var(--u)); background: #0E0E0E; overflow: hidden; }
.med-escena { top: 0; height: 100%; }
.med-foto { position: absolute; right: calc(20 * var(--u)); top: 0; width: calc(660 * var(--u)); height: calc(900 * var(--u)); -webkit-mask-image: radial-gradient(ellipse 62% 58% at 52% 52%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 58% at 52% 52%, #000 58%, transparent 100%); }
.med-foto img { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc(var(--fy, 0) * var(--u))) scale(var(--fs, 1.3)); }
.med-txt { position: absolute; left: calc(64 * var(--u)); top: calc(200 * var(--u)); width: calc(600 * var(--u)); color: var(--blanco); opacity: var(--mo, 0); transform: translateY(calc(var(--my, 20) * 1px)); }
.med-r { margin: 0; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0.14em; opacity: 0.7; }
.med-p { margin: calc(16 * var(--u)) 0 0; font-size: calc(26 * var(--u)); line-height: 1.35; text-wrap: balance; }

/* ---------- Máscaras de la sesión online ---------- */
.abanico { --fu: var(--u); position: absolute; left: calc(64 * var(--u)); top: calc(780 * var(--u)); width: calc(900 * var(--fu)); height: calc(220 * var(--fu)); display: flex; justify-content: flex-start; align-items: center; perspective: calc(900 * var(--fu)); cursor: ew-resize; touch-action: pan-y; }
.pm { position: relative; flex: 0 0 auto; height: calc(127 * var(--fu)); }
.pm img { position: absolute; max-width: none; left: 50%; top: 0; width: calc(90 * var(--fu)); height: calc(127 * var(--fu)); margin-left: calc(-45 * var(--fu)); display: block; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 14px -8px rgba(0, 0, 0, 0.25); }
.tx .pm::after { content: ''; position: absolute; left: 50%; top: 0; width: calc(90 * var(--fu)); height: calc(127 * var(--fu)); margin-left: calc(-45 * var(--fu)); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>"); background-size: 160px 160px; mix-blend-mode: multiply; opacity: 0.28; pointer-events: none; }
.ab-txt { position: absolute; left: calc(1000 * var(--u)); width: calc(344 * var(--u)); top: calc(830 * var(--u)); pointer-events: none; }
.ab-t { margin: 0; font-size: calc(24 * var(--u)); line-height: 1.2; }
.ab-d { margin: calc(10 * var(--u)) 0 0; font-family: var(--jost); font-weight: 200; font-size: max(12px, calc(15 * var(--u))); line-height: 1.45; opacity: 0.7; }

/* ---------- Reservar: paspartú invertido ---------- */
.re { position: relative; height: calc(500 * var(--u) + 100vh); height: calc(500 * var(--u) + 100svh); background: linear-gradient(var(--blanco) 0 50%, var(--carbon) 50% 100%); box-shadow: 0 2px 0 var(--carbon); }
.re-panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.re-fondo { position: absolute; inset: 0; background: var(--carbon); color: var(--blanco); }
.re-fondo .tex { opacity: 0.16; }
.re-cab { position: absolute; left: calc(64 * var(--u)); top: calc(230 * var(--u)); width: calc(460 * var(--u)); opacity: var(--rc, 0); transform: translateY(calc(var(--rcy, 20) * 1px)); }
.re-r { margin: 0; font-family: var(--jost); font-weight: 200; font-size: max(10px, calc(12 * var(--u))); letter-spacing: 0.14em; opacity: 0.7; }
.re-cab h2 { margin: calc(18 * var(--u)) 0 0; font-weight: 400; font-size: calc(40 * var(--u)); line-height: 1.15; }
.re-opc { position: absolute; left: calc(640 * var(--u)); width: calc(704 * var(--u)); top: calc(236 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(56 * var(--u)); opacity: var(--rc2, 0); transform: translateY(calc(var(--rcy2, 20) * 1px)); }
.re-opc a { display: block; padding-top: calc(20 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.3); text-decoration: none; color: var(--blanco); }
.re-opc a:hover { opacity: 1; }
.re-opc a > span { display: block; }
.re-t { font-size: calc(34 * var(--u)); }
.re-d { margin-top: calc(12 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(15 * var(--u))); line-height: 1.45; opacity: 0.7; }
.re-opc .re-a { display: inline-flex; align-items: center; gap: 12px; margin-top: calc(26 * var(--u)); font-family: var(--jost); font-weight: 200; font-size: max(13px, calc(16 * var(--u))); }
.re-a svg { transition: transform 0.4s var(--ease); }
.re-opc a:hover .re-a svg { transform: translateX(4px); }
.re-marco { position: absolute; z-index: 5; pointer-events: none; top: calc((1 - var(--ab, 0)) * 50%); bottom: calc((1 - var(--ab, 0)) * 50%); left: calc((1 - var(--ab, 0)) * 50%); right: calc((1 - var(--ab, 0)) * 50%); box-shadow: 0 0 0 200vmax var(--blanco); outline-offset: -1px; }
.re-marco.bisel { outline: 1px solid rgba(0, 0, 0, 0.25); }
.re-marco.fuera { display: none; }
.re .pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; opacity: var(--rc2, 0); pointer-events: none; }
.re.activo .pie { pointer-events: auto; }
.re-opc { pointer-events: none; }
.re.activo .re-opc { pointer-events: auto; }

/* =========================================================
   CELULAR Y TABLET VERTICAL (menos de 1024 px)
   ========================================================= */
@media (max-width: 1023px) {
  .metodo .escena { width: auto; }
  .raya, .tit, .ap-tit, .ap-p, .cq-lista, .es-txt, .pasos, .med-txt, .ab-txt, .re-cab, .re-opc { position: static; width: auto; }

  .ap { height: auto; }
  .ap .escena { padding: 128px 24px 72px; }
  .ap-tit { font-size: min(40px, 9.5vw); }
  .ap-p { margin-top: 28px; font-size: 20px; }

  .ob { height: auto; }
  .ob .escena { padding: 40px 24px 88px; }
  .raya { margin-bottom: 40px; }
  .tit { font-size: min(32px, 7vw); }
  .tit .nw { white-space: normal; }
  .cq-lista { margin-top: 40px; }
  .cq-btn { gap: 20px; padding: 20px 0; }
  .cq-n { width: 22px; font-size: 12px; }
  .cq-t { font-size: 22px; }
  .cq-d { margin-left: 42px; font-size: 16px; }
  .cq-d::after { height: 20px; }
  .cq.on .cq-d { max-height: 140px; }

  .es { height: auto; }
  .es-panel { position: relative; height: auto; padding: 88px 24px 72px; }
  .es-escena { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .es-txt { gap: 24px; opacity: 1; transform: none; }
  .es-txt h2 { font-size: min(34px, 8vw); }
  .es-txt p { font-size: 18px; }
  .rueda { position: relative; inset: auto; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 48px auto 0; --u: calc(min(100vw - 48px, 420px) / 460); }
  /* en celular la rueda se recorta al círculo: se desplaza para centrar (930, 430) */
  .rueda-svg { left: calc(-700 * var(--u)); top: calc(-200 * var(--u)); width: calc(1440 * var(--u)); height: calc(900 * var(--u)); }
  .punto, .anillo, .es-nom { translate: calc(-700 * var(--u)) calc(-200 * var(--u)); }
  .etiq { display: none; }
  .es-nom-en { font-size: 20px; }
  .es-nom-es { font-size: 12px; }

  .pr, .onl { height: auto; }
  .pr-escena, .on-escena { height: auto; padding: 40px 24px 72px; }
  .pasos { top: auto; margin-top: 48px; display: flex; flex-direction: column; gap: 32px; padding-left: 28px; position: relative; }
  .pasos-riel, .pasos-linea { left: 4px; top: 6px; width: 1px; height: calc(100% - 12px); }
  .pasos-linea { width: 1px; height: calc((100% - 12px) * var(--lw, 0) / 984); }
  .paso { position: relative; left: auto !important; width: auto; padding: 0; }
  .paso-p { position: absolute; left: -28px; top: 4px; width: 9px; height: 9px; }
  .paso-n { margin-top: 0; font-size: 12px; }
  .paso-t { font-size: 24px; }
  .paso-d { margin-top: 8px; font-size: 15px; opacity: 0.8; }

  .med { position: relative; top: auto; height: auto; padding: 72px 24px 0; }
  .med-escena { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-direction: column; gap: 24px; }
  .med-txt { opacity: 1; transform: none; }
  .med-r { font-size: 12px; }
  .med-p { margin-top: 14px; font-size: 21px; }
  .med-foto { position: relative; right: auto; width: calc(100% + 48px); margin: 0 -24px; height: auto; aspect-ratio: 2 / 3; }
  .med-foto img { transform: none; }

  .abanico { --fu: calc((100vw - 48px) / 900); position: relative; left: auto; top: auto; margin-top: 64px; cursor: auto; }
  .ab-txt { margin-top: 20px; min-height: 120px; }
  .ab-t { font-size: 21px; }
  .ab-d { font-size: 15px; }

  .re { height: auto; }
  .re-panel { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .re-fondo { position: relative; inset: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .re-marco { display: none; }
  .re-escena { position: relative; left: 0; top: 0; width: auto; height: auto; flex: 1; box-sizing: border-box; padding: 112px 24px 72px; display: flex; flex-direction: column; justify-content: center; }
  .re .pie { position: relative; opacity: 1; pointer-events: auto; }
  .re-opc { pointer-events: auto; }
  .re-r { font-size: 12px; }
  .re-cab h2 { margin-top: 14px; font-size: 30px; }
  .re-opc { margin-top: 40px; grid-template-columns: 1fr; row-gap: 36px; }
  .re-opc a { padding-top: 18px; }
  .re-t { font-size: 26px; }
  .re-d { margin-top: 8px; font-size: 15px; }
  .re-opc .re-a { margin-top: 16px; font-size: 16px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .ap-tit, .js .ap-p, .cq-d, .paso, .paso-d, .punto span { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}