/* Sitio de Turismo médico. Esqueleto: layer Dantora (GetLayers) re-vestido con tokens.css; secciones Roadmap Ascent
   (viaje) y Showcase Equator (precios) re-vestidas claras; globo propio en three. Composición y movimiento se
   conservan (contrato del layer); todo lo que es piel vive aquí y en tokens.css. Ningún color escrito a mano. */

/* La cuadrícula adaptable de Dantora: de 1280 en adelante la composición está en coordenadas del artboard 1440, así
   que la raíz escala con el ancho (16px a 1440). Abajo de 1280 es flujo normal con raíz de 16px. Mínimo 14.2px. */
html { font-size: 16px; scrollbar-gutter: stable; }
@media (min-width: 1280px) { html { font-size: 1.111111vw; } :root { --t-chico: 1rem; } }

html, body { margin: 0; padding: 0; }
body { min-height: 100vh; overflow-x: hidden; -moz-osx-font-smoothing: grayscale; line-height: var(--interlineado-texto); }
h1, h2, h3, h4, h5, h6, p, li, dd, dt, label, figcaption, button, a, summary { text-box: trim-both cap alphabetic; }
.text-trim { text-box: trim-both cap alphabetic; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol, dl { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dd, dt { margin: 0; }
input, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.words { display: flex; flex-wrap: wrap; }
.words.center { justify-content: center; text-align: center; }
.words .w { display: inline-block; will-change: transform, opacity, filter; }

/* Rótulo de datos de ejemplo: todo lo que no es real lo dice. */
.sample { display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--radio-chip); border: 1px dashed var(--aviso); color: var(--aviso); padding: .5rem .875rem; font-size: var(--t-chico); font-weight: 500; }

/* ---- Cortina de entrada ---- */
#preloader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; background: var(--marca); will-change: clip-path; }
#preloader.gone { display: none; }
#pre-dial { position: relative; display: grid; width: min(60vw, 22rem); height: min(60vw, 22rem); place-items: center; }
#pre-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#pre-ring circle { stroke: var(--acento); }
#pre-mark { position: relative; width: 38%; height: 38%; }
#pre-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#pre-mark .dim { color: var(--sobre-marca); opacity: .18; }
#pre-mark .lit { position: absolute; inset: 0; color: var(--acento); }
#pre-count { font-size: 2.5rem; line-height: var(--interlineado-display); font-weight: 300; color: var(--sobre-marca); font-variant-numeric: tabular-nums; }

/* ---- Cabecera fija, esmerilada ---- */
#header { pointer-events: none; position: fixed; left: 0; right: 0; top: max(1rem, env(safe-area-inset-top)); z-index: 50; padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right)); }
#header .row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#header .left { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.glass { pointer-events: auto; border-radius: var(--radio-panel); background: var(--vidrio); -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)); backdrop-filter: blur(var(--desenfoque-vidrio)); }
#header .logo { display: flex; height: 3.375rem; align-items: center; gap: .75rem; padding-right: 1rem; padding-left: .375rem; min-width: 0; }
.mark-tile { display: grid; width: 2.625rem; height: 2.625rem; flex: none; place-items: center; border-radius: var(--radio-marca); background: var(--marca); color: var(--acento); }
.mark-tile svg { width: 1.5rem; height: 1.5rem; }
#header .logo .name { font-size: 1.125rem; line-height: var(--interlineado-display); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#header nav.bar { display: none; height: 3.375rem; align-items: center; padding-inline: 2rem; }
#header nav.bar ul { display: flex; align-items: center; gap: 2rem; }
#header nav.bar a { font-size: 1rem; line-height: var(--interlineado-texto); font-weight: 300; transition: color var(--dur-rapida) var(--curva); }
#header nav.bar a:hover { color: var(--marca); }
#header .right { display: flex; align-items: center; gap: .5rem; }
#lang { display: flex; height: 3.375rem; min-width: 3.375rem; align-items: center; justify-content: center; padding-inline: .875rem; font-size: 1rem; font-weight: 500; letter-spacing: .04em; }
#lang:hover { color: var(--marca); }
#header-cta { display: none; pointer-events: auto; }
#burger-wrap { pointer-events: auto; position: relative; }
#burger { display: flex; width: 3.375rem; height: 3.375rem; align-items: center; justify-content: center; }
#burger .bars { display: flex; flex-direction: column; gap: .3125rem; }
#burger .bars i { display: block; height: 1px; width: 1.25rem; background: var(--tinta); transition: transform var(--dur-normal) var(--curva), opacity var(--dur-rapida) var(--curva); }
#burger[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(.34375rem) rotate(45deg); }
#burger[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
#burger[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-.34375rem) rotate(-45deg); }
#burger-panel { position: absolute; top: 4.125rem; right: 0; display: none; width: min(18rem, calc(100vw - 2.5rem)); transform-origin: top right; flex-direction: column; gap: .5rem; padding: 1.25rem; }
#burger-panel.open { display: flex; }
#burger-panel a.link { display: block; padding-block: .75rem; font-size: 1.125rem; line-height: var(--interlineado-texto); font-weight: 300; transition: color var(--dur-rapida) var(--curva); }
#burger-panel a.link:hover { color: var(--marca); }
#burger-panel .btn { width: 100%; justify-content: space-between; }

/* ---- El botón ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radio-accion); border: 1px solid transparent; font-size: 1.125rem; line-height: var(--interlineado-texto); font-weight: 400; white-space: nowrap; transition: background-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva); height: 3rem; padding-inline: 2rem; }
.btn.primary { background: var(--marca); border-color: var(--marca-oscura); color: var(--sobre-marca); }
.btn.primary:hover { background: var(--marca-oscura); }
.btn.secondary { background: var(--acento); border-color: var(--acento-borde); color: var(--sobre-acento); }
.btn.secondary:hover { background: var(--acento-borde); }
.btn.arrow { height: 3.375rem; gap: .625rem; padding-right: .125rem; padding-left: 2rem; }
.btn .disc { display: grid; width: 3rem; height: 3rem; flex: none; place-items: center; border-radius: 9999px; background: var(--acento); color: var(--sobre-acento); }
.btn .disc svg { width: 1rem; height: 1rem; }

/* ---- Secciones ---- */
main { display: block; }
.eyebrow { font-size: var(--t-chico); line-height: var(--interlineado-texto); font-weight: 500; color: var(--marca); text-transform: uppercase; letter-spacing: .02em; }
.display { font-size: 2.25rem; line-height: var(--interlineado-display); font-weight: 300; }
.lead { font-size: 1.0625rem; line-height: 1.3; font-weight: 300; }

/* Hero */
#hero { position: relative; display: flex; min-height: 100dvh; flex-direction: column; gap: 2rem; overflow: hidden; border-radius: 0 0 var(--radio-seccion) var(--radio-seccion); background: var(--marca-suave); padding: 7rem 1.25rem 3rem; }
#hero h1 { font-size: 2.5rem; line-height: var(--interlineado-display); font-weight: 300; }
#hero-copy { position: relative; z-index: 10; }
#hero-copy .stack { display: flex; flex-direction: column; gap: 1.5rem; }
#hero-copy .head { display: flex; flex-direction: column; gap: 1rem; }
#hero-actions { position: relative; z-index: 10; display: flex; flex-wrap: wrap; gap: 1rem; }
#hero-actions .btn { min-width: 11.25rem; }
#hero-scene { pointer-events: none; margin-inline: -1.25rem; height: 40dvh; }
#hero-scene canvas { display: block; width: 100%; height: 100%; }
#hero-rule { border: 0; border-top: 1px solid var(--linea); }
#hero-trust { display: flex; align-items: center; gap: .75rem; font-size: 1rem; line-height: var(--interlineado-texto); color: var(--marca); }
#hero-trust .tick { height: 1px; width: 3.125rem; background: var(--marca); }
#hero-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
#hero-chips li { border-radius: var(--radio-chip); border: 1px solid var(--linea); background: var(--vidrio-suave); padding: .75rem 1.25rem; font-size: var(--t-chico); line-height: var(--interlineado-texto); font-weight: 300; -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)); backdrop-filter: blur(var(--desenfoque-vidrio)); }

/* Why Vallarta: banda blanca con estela de fotos al mover el cursor */
#why { position: relative; height: 100dvh; min-height: 34rem; overflow: hidden; background: var(--fondo); }
#trail { position: relative; height: 100%; }
#trail .cards { pointer-events: none; position: absolute; inset: 0; }
#trail .cards img { position: absolute; top: 0; left: 0; width: 13.5rem; height: 17rem; border-radius: var(--radio-tarjeta); object-fit: cover; will-change: transform; }
#why-copy { position: absolute; top: 50%; left: 50%; display: flex; width: min(100% - 2.5rem, 44.75rem); transform: translate(-50%, -50%); flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
#why-copy .head { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; }
#why-copy .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
#why-copy .row .btn { min-width: 11.25rem; }
#why-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
#why-facts li { border-radius: var(--radio-chip); border: 1px solid var(--linea); padding: .625rem 1rem; font-size: var(--t-chico); color: var(--tinta-2); }

/* Especialidades: pista de 4 pantallas con panel pegado y tarjetas que se desplazan */
#services { position: relative; background: var(--fondo); }
#services-runway { position: relative; height: 400lvh; }
#services-panel { position: sticky; top: 0; height: 100lvh; overflow: hidden; border-radius: var(--radio-seccion) var(--radio-seccion) 0 0; background: var(--marca-suave); }
#services-head { display: flex; flex-direction: column; gap: 1rem; padding: 6rem 1.25rem 0; }
#services-rail { position: absolute; top: 46%; right: 0; bottom: 1.25rem; left: 1.25rem; display: flex; gap: .625rem; will-change: transform; }
.svc-card { position: relative; display: flex; height: 100%; width: 78vw; max-width: 22rem; flex: none; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: var(--radio-tarjeta); padding: 1.5rem; }
.svc-card.lime { border: 1px solid var(--acento-borde); background: var(--acento); color: var(--sobre-acento); }
.svc-card.photo { color: var(--sobre-foto); }
.svc-card.photo::after { content: ""; position: absolute; inset: 0; background: var(--velo-foto); }
.svc-card.brand { background: var(--marca); color: var(--sobre-marca); }
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-card .top { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1rem; }
.svc-card .idx { font-size: 1rem; line-height: var(--interlineado-texto); }
.svc-card h3 { font-size: 1.5rem; line-height: var(--interlineado-display); font-weight: 300; }
.svc-card ul { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1rem; }
.svc-card ul li { display: flex; flex-direction: column; gap: 1rem; }
.svc-card ul .rule { height: 1px; width: 100%; background: var(--linea); }
.svc-card ul .row { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; line-height: var(--interlineado-texto); }
.svc-card ul .row svg { width: 1.1875rem; height: 1.1875rem; }
.svc-card .discover { position: relative; z-index: 10; display: flex; align-items: flex-end; justify-content: space-between; }
.svc-card .discover p { font-size: 1rem; line-height: var(--interlineado-texto); }
.svc-card .ring { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 9999px; border: 1px solid currentColor; }
.svc-card .ring svg { width: 1.1875rem; height: 1.1875rem; }

/* El viaje (Roadmap Ascent, claro): sube sobre el panel pegado de especialidades */
#journey { position: relative; z-index: 10; margin-top: -100lvh; }
#journey .scroll { height: 420vh; position: relative; }
#journey .pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; border-radius: var(--radio-seccion) var(--radio-seccion) 0 0; background: radial-gradient(70% 80% at 96% 0%, var(--marca-suave-2), transparent 52%), var(--fondo); opacity: 0; transition: opacity .9s ease; }
#journey .pin.-ready { opacity: 1; }
#journey .jhead { position: absolute; left: 1.25rem; right: 1.25rem; top: max(4.5rem, 10vh); z-index: 5; display: flex; flex-direction: column; gap: .75rem; pointer-events: none; }
#pix { position: absolute; right: 0; top: 0; width: 56vw; height: 100%; z-index: 0; pointer-events: none; }
#journey .spine { position: absolute; top: 0; height: 100%; width: 1px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--linea) 16%, var(--linea) 84%, transparent); }
#months { position: absolute; inset: 0; z-index: 2; pointer-events: none; --mg: linear-gradient(180deg, transparent 0, transparent var(--mt, 2%), black calc(var(--mt, 2%) + var(--mf, 56px)), black calc(var(--mb, 98%) - var(--mf, 56px)), transparent var(--mb, 98%), transparent 100%); -webkit-mask: var(--mg); mask: var(--mg); }
.mlabel { position: absolute; text-align: right; white-space: nowrap; transform-origin: 100% 50%; will-change: transform, opacity; font-size: 1rem; font-weight: 500; letter-spacing: .01em; color: var(--tinta); }
.mtick { position: absolute; height: 1px; transform: translateY(-50%); background: var(--linea); }
.nglow { position: absolute; width: 320px; height: 320px; z-index: 2; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; filter: blur(3px); background: radial-gradient(circle, var(--marca-suave-2) 0%, var(--marca-suave) 36%, transparent 66%); }
.node { position: absolute; z-index: 3; transform: translate(-50%, -50%); width: var(--cd, 76px); height: var(--cd, 76px); border-radius: 50%; display: grid; place-items: center; pointer-events: none; }
.node__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--marca) calc(var(--p, 0) * 360deg), var(--linea) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 3px)); }
.node__face { position: absolute; inset: 5px; border-radius: 50%; background: var(--marca); border: 1px solid var(--marca-oscura); box-shadow: var(--sombra); display: grid; place-items: center; }
.node__face svg { width: 42%; height: 42%; stroke: var(--sobre-marca); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(1.5px) } 50% { transform: translateY(-2.5px) } }
#journey .right { position: absolute; left: 52%; top: 50%; transform: translateY(calc(-100% - 14px)); z-index: 4; width: min(40vw, 460px); display: flex; flex-direction: column; }
#journey .chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: var(--t-chico); font-weight: 500; letter-spacing: .04em; color: var(--marca); background: var(--marca-suave); border: 1px solid var(--marca-suave-2); }
#journey .chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); }
.qtitle { margin: 20px 0 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; color: var(--tinta); }
.qsub { margin: 12px 0 0; max-width: 30ch; font-size: 1rem; font-weight: 300; line-height: 1.5; color: var(--tinta-2); }
#journey .metric { position: absolute; left: 52%; top: 50%; transform: translateY(14px); z-index: 4; width: min(40vw, 460px); }
.odo { display: flex; align-items: stretch; font-weight: 500; letter-spacing: -.02em; line-height: 1; font-size: clamp(46px, 7.4vw, 86px); color: var(--marca); font-variant-numeric: tabular-nums; }
.od-cur { width: .62em; display: flex; align-items: center; justify-content: center; }
.od-d { position: relative; overflow: hidden; height: 1em; width: .62em; -webkit-mask: linear-gradient(180deg, transparent 0, black 24%, black 76%, transparent 100%); mask: linear-gradient(180deg, transparent 0, black 24%, black 76%, transparent 100%); }
.od-strip { display: flex; flex-direction: column; will-change: transform; }
.od-strip span { height: 1em; display: flex; align-items: center; justify-content: center; }
.od-comma { width: .28em; display: flex; align-items: flex-end; justify-content: center; }
.reg { margin-top: 8px; font-size: 1rem; font-weight: 400; color: var(--tinta-2); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
.anim { animation: rise .6s cubic-bezier(.22,.61,.36,1) both; }

/* Precio antes de volar (Showcase Equator, claro) */
#prices { position: relative; width: 100%; color: var(--tinta); }
#prices .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 44% 56%; background: var(--fondo); }
#prices .left { position: relative; overflow: hidden; background: linear-gradient(158deg, var(--marca) 0%, var(--marca-oscura) 100%); }
#prices .phead { position: absolute; left: clamp(14px, 6%, 44px); right: 1rem; top: max(4.5rem, 9vh); z-index: 3; display: flex; flex-direction: column; gap: .75rem; color: var(--sobre-marca); pointer-events: none; }
#prices .phead .eyebrow { color: var(--sobre-marca); opacity: .8; }
#prices .phead h2 { font-size: clamp(1.5rem, 2.6vw, 2.5rem); font-weight: 300; line-height: var(--interlineado-display); }
#prices .rail { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, black 14%, black 86%, transparent 100%); }
#prices .pill { position: absolute; left: clamp(14px, 6%, 44px); top: 0; display: inline-flex; align-items: center; gap: 13px; white-space: nowrap; padding: 12px 24px 12px 16px; border-radius: 999px; border: 1.5px solid var(--vidrio); background: var(--vidrio-suave); color: var(--tinta); font-weight: 500; font-size: var(--t-chico); letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--sombra); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; will-change: transform; transition: background .4s var(--curva), border-color .4s var(--curva), box-shadow .4s var(--curva); min-height: 44px; }
#prices .pill.-active { background: var(--superficie); border-color: var(--superficie); }
#prices .pill .ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--marca); }
#prices .pill .ic svg { width: 100%; height: 100%; display: block; }
#prices .pill:focus-visible { outline: 3px solid var(--sobre-marca); outline-offset: 3px; }
#prices .right { position: relative; display: grid; place-items: center; padding: 5vh 4%; }
#prices .deck { position: relative; width: min(74%, 360px); aspect-ratio: 1 / var(--ratio, 1.14); touch-action: pan-y; }
#prices .rcard { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; cursor: pointer; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--marca-oscura); transform-origin: 50% 50%; will-change: transform, opacity; box-shadow: var(--sombra); transition: transform var(--tdur, .6s) var(--curva), opacity var(--tdur, .6s) var(--curva); -webkit-tap-highlight-color: transparent; text-align: left; color: var(--sobre-foto); }
#prices .rcard__media { position: absolute; inset: 0; background: linear-gradient(158deg, var(--c1), var(--c2)); }
#prices .rcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--velo-foto); }
#prices .cap { position: absolute; top: 16px; left: 18px; right: 18px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
#prices .cap b { font-weight: 500; font-size: 1.125rem; line-height: 1.15; }
#prices .cap span { font-weight: 400; font-size: var(--t-chico); letter-spacing: .04em; opacity: .9; }
#prices .quote { position: absolute; left: 18px; right: 18px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; gap: 10px; }
#prices .quote .here { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 500; line-height: 1; }
#prices .quote .us { font-size: var(--t-chico); opacity: .9; }
#prices .quote .us s { opacity: .8; }
#prices .quote .inc { display: flex; flex-wrap: wrap; gap: 6px; }
#prices .quote .inc li { font-size: var(--t-chico); border: 1px solid var(--vidrio-suave); border-radius: 999px; padding: 4px 10px; }
#prices .tag { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 999px; background: var(--superficie); color: var(--tinta); font-weight: 500; font-size: var(--t-chico); letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--sombra); }
#prices .tag .ic { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--marca); }
#prices .tag .ic svg { width: 100%; height: 100%; }
#prices .chrome { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#prices .chrome .prog { position: absolute; right: 11px; top: 15px; bottom: 15px; width: 3px; border-radius: 3px; background: var(--vidrio-suave); overflow: hidden; }
#prices .chrome .prog i { position: absolute; left: 0; top: 0; width: 100%; height: var(--p, 0%); background: var(--superficie); border-radius: 3px; }
#prices .foot { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vh, 34px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(18px, 5%, 54px); pointer-events: none; }
#prices .foot .note { font-size: var(--t-chico); color: var(--tinta-2); max-width: 28ch; }
#prices .cue { position: absolute; top: clamp(16px, 3vh, 30px); right: clamp(18px, 5%, 54px); z-index: 3; display: flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: var(--t-chico); letter-spacing: .18em; text-transform: uppercase; pointer-events: none; transition: opacity .4s var(--curva); }
#prices .cue svg { width: 13px; height: 13px; animation: cuebob 1.7s var(--curva) infinite; }
#prices.-scrolled .cue { opacity: 0; }
@keyframes cuebob { 0%,100% { transform: translateY(-2px) } 50% { transform: translateY(2px) } }

/* Hospital y equipo (About de Dantora) */
#about { position: relative; z-index: 10; border-radius: var(--radio-seccion) var(--radio-seccion) 0 0; background: var(--marca-suave-2); padding: 4rem 1.25rem; }
#about-banner { position: relative; height: 16rem; overflow: hidden; border-radius: var(--radio-tarjeta); }
#about-banner .layer { position: absolute; left: 0; right: 0; will-change: transform; }
#about-banner img { width: 100%; height: 100%; object-fit: cover; }
#about-row { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
#about-left { display: flex; flex-direction: column; gap: 2rem; }
#about-stats { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: .625rem; row-gap: 2.5rem; }
#about-stats > div { display: flex; flex-direction: column; gap: 1rem; border-left: 1px solid var(--marca); padding-left: 1rem; }
#about-stats dd { font-size: 2.5rem; line-height: var(--interlineado-display); font-weight: 300; }
#about-stats dt { font-size: var(--t-chico); line-height: var(--interlineado-texto); font-weight: 300; }
#about-right { display: flex; flex-direction: column; gap: 2.5rem; }
#about-para { font-size: 1.375rem; line-height: var(--interlineado-texto); font-weight: 300; }
#about-para .muted { color: var(--tinta-tenue); }
#about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
#about-actions .btn { min-width: 11.25rem; }
/* Acreditaciones: marquesina de texto */
#marquee { position: relative; z-index: 10; overflow: hidden; background: var(--marca-suave-2); padding: 0 0 2.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
#marquee ul { display: flex; width: max-content; gap: 2.5rem; animation: marquee 38s linear infinite; }
#marquee li { display: flex; align-items: center; gap: .75rem; white-space: nowrap; font-size: 1rem; color: var(--tinta-2); }
#marquee li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--marca); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Globo: de dónde vienen los pacientes */
#globe { position: relative; z-index: 10; background: var(--fondo); padding: 4rem 1.25rem; display: flex; flex-direction: column; gap: 2rem; }
#globe .head { display: flex; flex-direction: column; gap: 1rem; }
#globe-stage { position: relative; width: min(100%, 34rem); aspect-ratio: 1; margin: 0 auto; }
#globe-stage canvas { width: 100%; height: 100%; }
#flights { display: grid; gap: .25rem; }
#flights li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .5rem 0; border-bottom: 1px solid var(--linea); font-size: 1rem; }
#flights li b { font-weight: 500; }
#flights li span { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
#flights li.dest { color: var(--marca); border-bottom-color: var(--marca); }

/* Médicos: riel pegado que se arrastra; el bloque siguiente sube encima */
#team { position: sticky; top: 0; z-index: 10; display: flex; height: 100lvh; flex-direction: column; justify-content: center; background: var(--marca-suave-2); padding-top: 18%; }
#team-box { display: flex; height: 74%; flex-direction: column; }
#team-rail { display: flex; min-height: 0; flex: 1; cursor: grab; gap: .6875rem; overflow-x: auto; overscroll-behavior-x: contain; padding-left: 1.25rem; touch-action: pan-y; user-select: none; -webkit-user-select: none; scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; }
#team-rail:active { cursor: grabbing; }
#team-rail::-webkit-scrollbar { display: none; }
#team-rail img { pointer-events: none; }
.team-intro { display: flex; height: 100%; width: 80vw; max-width: 22rem; flex: none; flex-direction: column; justify-content: space-between; border-radius: var(--radio-tarjeta); background: var(--marca); padding: 1.5rem; color: var(--sobre-marca); }
.team-intro .head { display: flex; flex-direction: column; gap: 2rem; }
.team-intro .eyebrow { color: var(--sobre-marca); opacity: .8; }
.team-intro h2 { font-size: 1.5rem; line-height: var(--interlineado-display); font-weight: 300; }
.team-intro .sample { border-color: var(--acento); color: var(--acento); }
.team-card { position: relative; height: 100%; width: 70vw; max-width: 20.75rem; flex: none; overflow: hidden; border-radius: var(--radio-tarjeta); }
.team-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-card figcaption { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: flex; height: 4rem; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; border-radius: var(--radio-panel); background: var(--vidrio); padding-inline: 1.25rem; text-align: center; -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)); backdrop-filter: blur(var(--desenfoque-vidrio)); }
.team-card figcaption .n { font-size: 1rem; line-height: var(--interlineado-texto); font-weight: 500; }
.team-card figcaption .r { font-size: var(--t-chico); line-height: var(--interlineado-texto); font-weight: 300; color: var(--tinta-2); }
.team-more { display: flex; height: 100%; width: 70vw; max-width: 20.75rem; flex: none; flex-direction: column; justify-content: space-between; border-radius: var(--radio-tarjeta); border: 1px solid var(--acento-borde); background: var(--acento); padding: 1.5rem; color: var(--sobre-acento); }
.team-more p { font-size: 1.5rem; line-height: var(--interlineado-display); font-weight: 300; }
.team-more .foot { display: flex; align-items: flex-end; justify-content: space-between; }
.team-more .foot span:first-child { font-size: 1rem; line-height: var(--interlineado-texto); font-weight: 300; }
.team-more .ring { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; border-radius: 9999px; border: 1px solid currentColor; }
.team-more .ring svg { width: 1.1875rem; height: 1.1875rem; }
.team-gutter { width: 2.5rem; flex: none; }
#team-bar { position: relative; margin: 1.5rem 1.25rem 0; height: .125rem; flex: none; background: var(--linea); }
#team-bar .fill { height: 100%; transform-origin: left; background: var(--marca); }

/* Preguntas: sube sobre el riel de médicos */
#faq { position: relative; z-index: 20; border-radius: var(--radio-seccion) var(--radio-seccion) 0 0; background: var(--fondo); padding: 4rem 1.25rem; display: flex; flex-direction: column; gap: 2rem; }
#faq .head { display: flex; flex-direction: column; gap: 1rem; }
#faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
#faq-list details { border-bottom: 1px solid var(--linea); }
#faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 400; }
#faq-list summary::-webkit-details-marker { display: none; }
#faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--linea); color: var(--marca); font-weight: 300; transition: transform var(--dur-normal) var(--curva); }
#faq-list details[open] summary::after { transform: rotate(45deg); }
#faq-list details p { padding: 0 0 1.25rem; max-width: 62ch; color: var(--tinta-2); line-height: 1.5; }

/* Contacto: con la hélice detrás; sube sobre lo anterior */
#contact { position: relative; z-index: 20; display: flex; min-height: 100lvh; flex-direction: column; gap: 2.5rem; overflow: hidden; border-radius: var(--radio-seccion) var(--radio-seccion) 0 0; background: var(--marca-suave); padding: 7rem 1.25rem 5rem; }
#contact-scene { display: none; }
#contact-scene canvas { display: block; width: 100%; height: 100%; }
#contact-copy { display: flex; flex-direction: column; gap: 1.5rem; }
#contact-copy .head { display: flex; flex-direction: column; gap: 1rem; }
#form-panel { display: flex; flex-direction: column; gap: 2rem; border-radius: var(--radio-tarjeta); background: var(--vidrio-fuerte); padding: 1.5rem; -webkit-backdrop-filter: blur(var(--desenfoque-vidrio)); backdrop-filter: blur(var(--desenfoque-vidrio)); }
#form-panel .head { display: flex; flex-direction: column; gap: 1.5rem; }
#form-panel h3 { font-size: 1.75rem; line-height: var(--interlineado-display); font-weight: 300; }
#form-panel form { display: flex; flex: 1; flex-direction: column; gap: 1.5rem; }
#form-panel .field { display: flex; flex-direction: column; gap: 1rem; }
#form-panel label { font-size: var(--t-chico); line-height: var(--interlineado-texto); font-weight: 500; color: var(--marca); text-transform: uppercase; }
#form-panel input, #form-panel textarea { width: 100%; border-radius: var(--radio-panel); border: 1px solid var(--linea); background: transparent; padding: 1.25rem 1.5rem; font-size: 1rem; line-height: var(--interlineado-texto); font-weight: 300; color: inherit; outline: none; min-height: 44px; }
#form-panel textarea { resize: none; }
#form-panel input::placeholder, #form-panel textarea::placeholder { color: var(--tinta-suave); }
#form-panel input:focus-visible, #form-panel textarea:focus-visible { border-color: var(--marca); }
#form-panel .consent { font-size: 1rem; line-height: var(--interlineado-texto); font-weight: 300; color: var(--tinta-2); }
#form-submit { margin-top: auto; display: flex; height: 3.375rem; flex: none; align-items: center; justify-content: space-between; border-radius: var(--radio-accion); border: 1px solid var(--marca-oscura); background: var(--marca); padding-right: .125rem; padding-left: 2rem; font-size: 1.125rem; line-height: var(--interlineado-texto); font-weight: 400; color: var(--sobre-marca); transition: background-color var(--dur-rapida) var(--curva); }
#form-submit:hover { background: var(--marca-oscura); }
#form-submit .disc { display: grid; width: 3rem; height: 3rem; flex: none; place-items: center; border-radius: 9999px; background: var(--acento); color: var(--sobre-acento); }
#form-submit .disc svg { width: 1rem; height: 1rem; }
#form-note { border-radius: var(--radio-panel); background: var(--marca-suave); color: var(--tinta); padding: 1rem 1.25rem; font-size: 1rem; line-height: 1.4; }
#form-note a { color: var(--marca); text-decoration: underline; }

footer { position: relative; z-index: 20; background: var(--marca-suave); padding: 0 1.25rem 2rem; color: var(--tinta-2); font-size: var(--t-chico); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

/* Pantallas chicas y horizontal de celular */
@media (max-width: 720px) {
  #pix { width: 48vw; height: 26vh; }
  .mlabel { font-size: var(--t-chico); }
  #months { --mf: 28px; }
  #journey .jhead { top: max(4.25rem, 8vh); }
  #journey .jhead { top: 5.5rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
  #journey .jhead h2 { display: none; }
  #journey .right { left: 6vw; right: 34vw; top: 15vh; width: auto; transform: none; }
  .qtitle { font-size: 26px; margin-top: 10px; }
  .qsub { margin-top: 8px; font-size: var(--t-chico); max-width: 34ch; }
  #journey .metric { left: 6vw; right: auto; top: auto; bottom: max(6vh, env(safe-area-inset-bottom)); width: auto; transform: none; }
  .odo { font-size: clamp(42px, 14.5vw, 66px); }
  .nglow { width: 220px; height: 220px; }
}
@media (min-width: 721px) { #journey .jhead { max-width: 44%; } }
@media (min-width: 721px) and (max-width: 1024px) {
  #journey .right, #journey .metric { left: 46%; width: min(48vw, 400px); }
  #pix { width: 46vw; }
  .qtitle { font-size: clamp(24px, 3.6vw, 34px); }
}
@media (max-width: 860px) {
  #prices .pin { grid-template-columns: 1fr; grid-template-rows: 46svh 54svh; }
  #prices .pill { left: 50%; transform-origin: 50% 50%; }
  #prices .phead { top: max(5.5rem, 8vh); left: 1.25rem; right: 1.25rem; }
  #prices .right { padding: 2vh 6%; }
  #prices .deck { width: min(62%, 300px); }
  #prices .cue { top: auto; bottom: clamp(12px, 2vh, 20px); right: 50%; transform: translateX(50%); }
  #prices .foot { display: none; }
}
@media (max-width: 480px) {
  #prices .pin { grid-template-rows: 46svh 54svh; }
  #prices .deck { width: min(74%, 280px); --ratio: 1.3; }
  /* Tarjeta angosta: la cifra va anclada abajo (sobre la etiqueta) en una sola línea, para
     que no choque con el nombre del procedimiento arriba. */
  #prices .quote { top: auto; bottom: 58px; transform: none; gap: 6px; }
  #prices .quote .here { font-size: 1.25rem; white-space: nowrap; }
  #prices .quote .inc { display: block; line-height: 1.4; }
  #prices .quote .inc li { display: inline; border: 0; padding: 0; border-radius: 0; }
  #prices .quote .inc li:not(:last-child)::after { content: ' · '; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #hero { padding-top: 5rem; }
  #hero-scene { height: 30dvh; }
  #journey .jhead { display: none; }
  #journey .right { top: 20vh; right: 50vw; }
  #journey .qsub { display: none; }
  #prices .phead { display: none; }
  #team { padding-top: 6%; }
}

/* md — 768 */
@media (min-width: 768px) {
  #header { padding-inline: 2.5rem; }
  #hero { padding-inline: 2.5rem; }
  #hero h1 { font-size: 3rem; }
  #hero-scene { margin-inline: -2.5rem; }
  #why-copy .display, #services-head .display, #contact-copy .display, #globe .display, #faq .display { font-size: 3rem; }
  #services-head { padding-inline: 2.5rem; }
  #services-rail { left: 2.5rem; }
  #journey .jhead { left: 2.5rem; right: 2.5rem; }
  #about { padding-inline: 2.5rem; }
  #about-banner { height: 24rem; }
  #about-para { font-size: 1.75rem; }
  #team-rail { padding-left: 2.5rem; }
  #team-bar { margin-inline: 2.5rem; }
  #team { padding-top: 12%; }
  #contact { padding-inline: 2.5rem; }
  #form-panel { padding: 2rem; }
  #globe { padding-inline: 2.5rem; flex-direction: row; align-items: center; gap: 3rem; }
  #globe .head { flex: 1; }
  #globe-stage { flex: none; width: min(46vw, 34rem); margin: 0; }
  #faq { padding-inline: 2.5rem; flex-direction: row; gap: 3rem; }
  #faq .head { flex: 1; position: sticky; top: 6rem; align-self: flex-start; }
  #faq-list { flex: 1.4; }
  footer { padding-inline: 2.5rem; }
}

/* lg — 1280: el artboard de 1440 */
@media (min-width: 1280px) {
  #header nav.bar { display: flex; }
  #header-cta { display: block; }
  #burger-wrap { display: none; }

  #hero { display: block; height: 100lvh; min-height: 0; padding: 0; }
  #hero h1 { font-size: 3.75rem; }
  #hero-copy { position: absolute; top: 28.55%; left: 2.5rem; width: 44.75rem; }
  #hero-copy .stack { gap: 3rem; }
  #hero-copy .head { gap: 2rem; }
  #hero-copy .lead { width: 30.875rem; }
  #hero-actions { position: absolute; top: 89.375%; left: 2.5rem; }
  #hero-scene { position: absolute; top: 0; bottom: 0; left: 22.5625rem; width: 71.25rem; height: auto; margin: 0; }
  #hero-rule-slot { position: absolute; top: 78.625%; right: 2.5rem; left: 2.5625rem; }
  #hero-trust-slot { position: absolute; top: 83.625%; left: 2.5rem; }
  #hero-chips-slot { position: absolute; top: 83.625%; left: 55.5625rem; width: 31.9375rem; }
  #hero-chips { justify-content: flex-end; }
  #hero-chips li { padding: 1rem 2rem; font-size: 1rem; }

  #why-copy { gap: 3rem; }
  #why-copy .head { gap: 2rem; }
  #why-copy .display { width: 39.25rem; }
  #why-copy .lead { width: 27.625rem; }

  #services-head { display: block; padding: 0; }
  #services-head .eyebrow-slot { position: absolute; top: 14%; left: 66.75rem; width: 20.75rem; }
  #services-head .title-slot { position: absolute; top: 14%; left: 2.5rem; width: 43.5rem; }
  #services-head .desc-slot { position: absolute; top: 21%; left: 66.75rem; width: 20.75rem; }
  #services-head .display { font-size: 3.75rem; }
  #services-rail { top: 39%; bottom: 2.5rem; width: 85rem; }
  .svc-card { max-width: none; padding: 2rem; }
  .svc-card.lime { width: 35.0625rem; }
  .svc-card.photo, .svc-card.brand { width: 27.9375rem; }
  .svc-card .idx, .svc-card .discover p, .svc-card ul .row { font-size: 1.25rem; }
  .svc-card h3 { font-size: 2rem; }
  .svc-card .top { gap: 1.5rem; }
  .svc-card ul { width: 31.0625rem; gap: 1.5rem; }
  .svc-card ul li { gap: 1.5rem; }
  .svc-card .ring { width: 4.5rem; height: 4.5rem; }

  #about { height: 71.5rem; padding: 0; }
  #about-banner { position: absolute; top: 2.5rem; left: 2.5rem; height: 31.25rem; width: 85rem; }
  #about-row { position: absolute; top: 37.75rem; left: 2.375rem; width: 85.125rem; margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; }
  #about-left { width: 28.0625rem; gap: 5.5625rem; }
  #about-stats { height: 17.125rem; row-gap: 5.625rem; }
  #about-stats > div { gap: 2.375rem; padding-left: 1.5rem; }
  #about-stats dd { font-size: 3.75rem; }
  #about-stats dt { font-size: 1rem; }
  #about-right { width: 49.3125rem; gap: 8.375rem; }
  #about-para { font-size: 2.25rem; }

  #globe { padding: 6rem 2.5rem; }
  #globe .display { font-size: 3.75rem; }

  #team { padding-top: 6%; }
  #team-box { height: 86%; }
  .team-intro { width: 27.9375rem; max-width: none; padding: 2rem; }
  .team-intro h2 { width: 21rem; font-size: 2rem; }
  .team-card { width: 20.75rem; }
  .team-more { width: 20.75rem; padding: 2rem; }
  .team-more p { font-size: 2rem; }
  #team-bar { margin-top: 2.5rem; }

  #faq { padding: 6rem 2.5rem; }
  #faq .display { font-size: 3.75rem; }

  #contact { display: block; height: 100lvh; min-height: 0; padding: 0; }
  #contact-scene { pointer-events: none; display: block; position: absolute; top: 0; bottom: 0; left: 7.0625rem; width: 71.125rem; }
  #contact-copy { position: absolute; top: 35.25%; left: 2.5625rem; width: 42.75rem; gap: 3rem; }
  #contact-copy .head { gap: 2rem; }
  #contact-copy .display { font-size: 3.75rem; }
  #contact-copy .lead { width: 27.6875rem; }
  #form-panel { position: absolute; top: 1rem; right: 2.5rem; bottom: 2.5rem; width: 35.0625rem; gap: 3rem; }
  #form-panel h3 { font-size: 2.25rem; }
  footer { padding-inline: 2.5rem; }
}

/* Red de seguridad: si el módulo principal no carga (red, CSP), la cortina no puede dejar la página tapada. */
@keyframes failsafe { to { visibility: hidden; } }
#preloader { animation: failsafe 0s 9s forwards; }