/* MV Design · Lab — HUD en las esquinas + textos que viven dentro del espacio 3D */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("../assets/fonts/montserrat-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  --ink: #07070B; --fg: #F2F3F7; --fg-2: #B9BCC8; --fg-3: #7D8190; --line: rgba(255,255,255,.14);
  --grad: linear-gradient(120deg, #9E43B8 0%, #625CD9 28%, #4892D9 65%, #2BCCD9 100%);
  --pad: clamp(18px, 3.2vw, 48px);
  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--ink); color: var(--fg); overflow: hidden; }
body { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; -webkit-font-smoothing: antialiased; overscroll-behavior: none; touch-action: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid #2BCCD9; outline-offset: 3px; border-radius: 6px; }

.gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* capa CSS3D: los textos viven en el mismo espacio que la cámara */
.world { position: fixed !important; inset: 0; z-index: 4; pointer-events: none; }

.hud {
  position: fixed; z-index: 5; pointer-events: none;
  padding: calc(var(--pad) + env(safe-area-inset-top, 0px)) calc(var(--pad) + env(safe-area-inset-right, 0px))
           calc(var(--pad) + env(safe-area-inset-bottom, 0px)) calc(var(--pad) + env(safe-area-inset-left, 0px));
}
/* degradado sutil arriba y abajo: el HUD se lee sobre cualquier brillo del 3D (entre el lienzo y los textos) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,11,.55), rgba(7,7,11,0) 130px), linear-gradient(0deg, rgba(7,7,11,.45), rgba(7,7,11,0) 110px);
}
.hud a, .hud button { pointer-events: auto; }
.hud--tl { top: 0; left: 0; }
.hud--tr { top: 0; right: 0; text-align: right; }
.hud--bl { bottom: 0; left: 0; display: flex; flex-direction: column; gap: 14px; transition: opacity .6s ease; }
.mono { font-size: 12px; line-height: 1.45; letter-spacing: .02em; color: var(--fg-2); }
.manifesto { max-width: 34ch; margin-left: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 600 15px/1 "Montserrat", sans-serif; letter-spacing: .04em; color: #fff; }
.brand img { width: 28px; height: 28px; }

/* índice de escenas */
.idx { top: 0; left: 50%; transform: translateX(-50%); }
.idx ol {                                             /* cápsula oscura sutil: se lee aunque el filo del eclipse pase detrás */
  display: flex; gap: 22px; padding: 3px 16px; border-radius: 999px;
  background: rgba(7,7,11,.55); border: 1px solid rgba(255,255,255,.06);
}
.idx button {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9DA1B0; white-space: nowrap;
  transition: color .4s ease;
}
.idx button::before { content: ""; position: absolute; inset: -8px -7px; }   /* área táctil ≥ 44 px sin mover el diseño */
.idx button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.idx button:hover, .idx button[aria-current] { color: #fff; }
.idx button[aria-current]::after { transform: none; }

/* ---------- escenas: bloques centrados, sin fondo, en el espacio ---------- */
.scene {
  width: min(1120px, 92vw); text-align: center; color: #fff;
}
.scene::before {   /* sombra suave detrás del texto: se lee sobre partículas y anillos */
  content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7,7,11,.72), rgba(7,7,11,.4) 62%, rgba(7,7,11,0));
}
html.is-3d .scene--hero .title { font-size: max(clamp(40px, 6.4vw, 108px), min(calc(var(--h, 100vh) * .108), 11.6vw)); }   /* la firma, más grande */
.scene--hero::before { inset: -30% 4%; background: radial-gradient(closest-side, rgba(7,7,11,.45), rgba(7,7,11,0)); }
.scene a, .scene button { pointer-events: auto; }
.kicker { color: #C9CCD8; margin-bottom: 18px; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }   /* ≥ 5:1 sobre el resplandor */
.title {
  font: 700 clamp(40px, 6vw, 104px)/.92 "Montserrat", sans-serif; letter-spacing: -.045em;
  color: #fff;   /* sin text-shadow: un blur grande en texto 3D se re-pinta en cada cuadro del vuelo */
}
.title--2 { font-size: clamp(30px, 4.1vw, 66px); line-height: .98; letter-spacing: -.04em; max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.grad {
  white-space: nowrap;                                  /* "sin intermediarios." nunca se parte */
  font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .06em;
}

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 30px auto 0; max-width: 700px; }
.trio p { font-size: 12px; line-height: 1.55; color: var(--fg-2); border-top: 1px solid var(--line); padding-top: 14px; }
.trio strong { display: block; margin-bottom: 6px; font: 600 15px/1.2 "Montserrat", sans-serif; color: #fff; letter-spacing: -.01em; }

.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin: 34px auto 0; max-width: 980px; text-align: left; }
.svc-grid li { display: grid; grid-template-columns: 30px 1fr; padding: 13px 0 15px; border-top: 1px solid var(--line); }
.svc-grid span { font-size: 11px; color: var(--fg-3); padding-top: 3px; }
.svc-grid .svc__n { font: 600 16px/1.25 "Montserrat", sans-serif; color: #fff; letter-spacing: -.01em; }
.svc-grid i { grid-column: 2; font-style: normal; font-size: 11px; color: var(--fg-3); margin-top: 4px; }

/* ---------- manifiesto y servicios: dentro de su anillo ----------
   Con 3D, --ring es el diámetro del anillo en px (lo calcula lab.js). Todo se mide con él (--u = 1% del anillo),
   así el texto guarda su proporción con el círculo con cualquier zoom del navegador y en cualquier pantalla. */
html.is-3d .scene--ring { --u: calc(var(--ring, 700px) / 100); width: calc(var(--u) * 74); }
html.is-3d .scene--ring::before {   /* el disco oscuro del eclipse: el filo de luz queda afuera, el texto se lee adentro */
  inset: auto; left: 50%; top: calc(50% + var(--ring-oy, 0px)); width: var(--ring); height: var(--ring); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(7,7,11,.62), rgba(7,7,11,.5) 66%, rgba(7,7,11,0) 92%);
}
html.is-3d .scene--ring .kicker { font-size: calc(var(--u) * 1.75); margin-bottom: calc(var(--u) * 2.2); }
html.is-3d .scene--ring .title--2 { font-size: calc(var(--u) * 6); max-width: 15ch; }
html.is-3d .scene--ring .trio { max-width: none; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3.6); grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
html.is-3d .scene--ring .trio p { font-size: calc(var(--u) * 2); padding-top: calc(var(--u) * 1.7); }
html.is-3d .scene--ring .trio strong { font-size: calc(var(--u) * 2.3); margin-bottom: calc(var(--u) * .7); }
html.is-3d .scene--ring[data-scene="servicios"] { width: calc(var(--u) * 80); }
html.is-3d .scene--ring[data-scene="servicios"] .title--2 { font-size: calc(var(--u) * 5.2); }
html.is-3d .scene--ring .svc-grid { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--u) * 2.4); margin-top: calc(var(--u) * 3); }
html.is-3d .scene--ring .svc-grid li { grid-template-columns: calc(var(--u) * 2.8) 1fr; padding: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.3); }
html.is-3d .scene--ring .svc-grid span { font-size: calc(var(--u) * 1.7); padding-top: calc(var(--u) * .3); }
html.is-3d .scene--ring .svc-grid .svc__n { font-size: calc(var(--u) * 2.1); }
html.is-3d .scene--ring .svc-grid i { display: block; font-size: calc(var(--u) * 1.7); margin-top: calc(var(--u) * .5); }
/* anillo chico (vertical o pantalla baja): sólo lo esencial cabe en el círculo; el resto queda sr-only para lectores de pantalla */
html.is-3d .scene--ring.is-compact { width: calc(var(--u) * 78); }
html.is-3d .scene--ring.is-compact .kicker { font-size: calc(var(--u) * 2.7); margin-bottom: calc(var(--u) * 3); }
html.is-3d .scene--ring.is-compact .title--2 { font-size: calc(var(--u) * 6.8); }
html.is-3d .scene--ring.is-compact[data-scene="servicios"] .title--2 { font-size: calc(var(--u) * 6.2); }
html.is-3d .scene--ring.is-compact .trio { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 1.5) calc(var(--u) * 4); margin-top: calc(var(--u) * 5); }
html.is-3d .scene--ring.is-compact .trio p { border: 0; padding: 0; }
html.is-3d .scene--ring.is-compact .trio strong { font-size: calc(var(--u) * 3.3); margin: 0; line-height: 1.2; }
html.is-3d .scene--ring.is-compact .svc-grid { display: block; text-align: center; margin-top: calc(var(--u) * 4.5); }
html.is-3d .scene--ring.is-compact .svc-grid li { display: block; padding: 0; border: 0; }
html.is-3d .scene--ring.is-compact .trio .desc, html.is-3d .scene--ring.is-compact .svc-grid span, html.is-3d .scene--ring.is-compact .svc-grid i {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.is-3d .scene--ring.is-compact .svc-grid .svc__n { font-size: calc(var(--u) * 3.5); line-height: 1.55; white-space: nowrap; }

/* ---------- casos por rubro ----------
   Sin 3D: la lista de rubros y proyectos se lee como página. Con 3D: los rubros son una espiral (WebGL),
   esta lista queda para lectores de pantalla y el panel [data-rpanel] muestra los proyectos del rubro elegido. */
.rubros { width: min(1080px, 92vw); margin: 28px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 34px; text-align: left; }
.rubro__name { font: 700 24px/1.1 "Montserrat", sans-serif; letter-spacing: -.02em; color: #fff; }
.rubro__full { margin: 6px 0 12px; color: var(--fg-3); }
.rubro__list { display: grid; gap: 8px; }
.proj { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.proj__name { font: 600 15px/1.25 "Montserrat", sans-serif; color: #fff; }
.proj__sector, .proj__chip { font-size: 11px; color: var(--fg-3); }
.proj__desc { flex-basis: 100%; font-size: 12px; line-height: 1.55; color: var(--fg-2); }
.proj__img { flex-basis: 100%; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 6px; }
.proj__url { font-size: 11px; color: #fff; text-decoration: underline; text-underline-offset: 3px; pointer-events: auto; }
.chip { margin-top: 4px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 10.5px; color: #fff; background: rgba(7,7,11,.35); }
.chip--cta { padding: 9px 16px; font-size: 11px; letter-spacing: .06em; border-color: rgba(255,255,255,.4); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.chip--cta:hover { background: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-1px); }

/* ---------- espiral de rubros: título arriba, la ficha del rubro en medio, el pie abajo ---------- */
html.is-3d .scene--cases {
  height: calc(100vh - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: calc(100svh - 150px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
html.is-3d .scene--cases::before { display: none; }
html.is-3d .scene--cases, html.is-3d .scene--cases .cases-head { pointer-events: none; }
html.is-3d .scene--cases .rubros {   /* en 3D la lista sólo existe para lectores de pantalla */
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.orbit-cap { display: none; }
html.is-3d .orbit-cap { display: flex; align-items: center; gap: 18px; pointer-events: auto; }
.orbit-cap__txt { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(380px, 58vw); min-height: 92px; }   /* tamaño fijo: las flechas no brincan */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.orbit-cap__txt .mono { color: var(--fg-3); font-size: 11px; letter-spacing: .08em; }
.orbit-cap__txt b { font: 600 clamp(18px, 1.9vw, 26px)/1.15 "Montserrat", sans-serif; letter-spacing: -.02em; color: #fff; }
.arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(7,7,11,.62); color: #fff; transition: background .3s, border-color .3s; flex: none; }
.arrow svg { width: 16px; height: 16px; }
.arrow:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }

/* ---------- panel de un rubro: en horizontal vive en el espacio libre de la derecha (la espiral se corre a la izquierda) ---------- */
.rpanel {
  position: fixed; z-index: 6; top: 0; right: 0; bottom: 0; width: min(54vw, 780px);
  padding: 108px var(--pad) 96px 16px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-width: none; visibility: hidden; pointer-events: none;
}
.rpanel::-webkit-scrollbar { display: none; }
html:not(.is-3d) .rpanel { display: none; }
/* en horizontal la caja del panel es transparente: su espacio vacío deja pasar clics y rueda (índice, espiral) */
.rpanel.is-open { visibility: visible; }
.rpanel.is-open > * { pointer-events: auto; }
.rpanel.is-closing, .rpanel.is-closing > * { pointer-events: none; }
.rp-fly { position: fixed; inset: 0; z-index: 7; pointer-events: none; }   /* las subfichas vuelan aquí, sin recorte */
.rpanel__head { margin-bottom: 24px; transition: opacity .35s ease; }
.rpanel__close { color: var(--fg-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 14px 12px 14px 0; margin-bottom: 4px; transition: color .3s; }
.rpanel__close:hover { color: #fff; }
.rpanel .kicker { margin-bottom: 10px; }
.rpanel__title { font: 700 clamp(34px, 3.6vw, 58px)/1 "Montserrat", sans-serif; letter-spacing: -.045em; color: #fff; outline: none; }
.rpanel__sub { margin-top: 10px; color: var(--fg-3); }
.rpanel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; transition: opacity .35s ease; }
.rpanel.has-detail .rpanel__grid, .rpanel.has-detail .rpanel__head { opacity: 0; pointer-events: none; }
.sub {
  display: flex; flex-direction: column; width: 100%; height: 100%; text-align: left; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #0c0b15;
  transition: border-color .3s, transform .5s var(--ease);
}
.sub:hover { border-color: rgba(255,255,255,.4); transform: translateY(-3px); }
.sub__logo {
  position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; padding: 0 12%;
  background: radial-gradient(120% 100% at 85% 0%, rgba(98,92,217,.28), rgba(98,92,217,0) 62%), #0e0c19;
  border-bottom: 1px solid var(--line);
}
.sub__logo img { position: absolute; left: 17%; top: 20%; width: 66%; height: 60%; object-fit: contain; }   /* todas del mismo alto, sin importar la forma del logo */
.sub__logo img, .det__media--logo img { filter: brightness(0) invert(1); }   /* los logos publicados son tinta negra: aquí van en blanco */
.sub__word { font: 700 clamp(15px, 1.5vw, 20px)/1.1 "Montserrat", sans-serif; letter-spacing: -.02em; text-align: center; color: #fff; }
.sub__name { font: 600 14px/1.25 "Montserrat", sans-serif; color: #fff; padding: 12px 14px 3px; }
.sub__meta { font-size: 10.5px; color: var(--fg-3); padding: 0 14px 13px; letter-spacing: .04em; }
/* la ficha del caso: se expande desde su subficha y ocupa el panel */
.rpanel__detail {
  position: absolute; top: 108px; left: 16px; right: var(--pad); overflow: hidden;
  border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: #0b0a13; transform-origin: 50% 50%;
}
.rpanel__detail[hidden] { display: none; }
.rpanel__back {
  position: absolute; top: 12px; left: 12px; z-index: 2; min-height: 44px; padding: 12px 17px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3); background: rgba(7,7,11,.72); color: #fff;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: background .3s;
}
.rpanel__back:hover { background: rgba(7,7,11,.92); }
.det__media { aspect-ratio: 16 / 9; background: #0e0c19; }
.det__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.det__media--logo { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 12%; background: radial-gradient(90% 120% at 80% 0%, rgba(98,92,217,.32), rgba(98,92,217,0) 60%), radial-gradient(70% 90% at 10% 100%, rgba(43,204,217,.14), rgba(43,204,217,0) 60%), #0e0c19; }
.det__media--logo img { position: absolute; left: 22%; top: 16%; width: 56%; height: 68%; object-fit: contain; }
.det__media--logo .sub__word { font-size: clamp(26px, 3vw, 44px); }
.det__body { padding: 22px 26px 26px; }
.det__meta { font-size: 11px; color: var(--fg-3); letter-spacing: .06em; }
.det__name { margin-top: 8px; font: 700 clamp(24px, 2.4vw, 34px)/1.05 "Montserrat", sans-serif; letter-spacing: -.035em; color: #fff; outline: none; }
.det__desc { margin-top: 12px; font-size: 13px; line-height: 1.65; color: var(--fg-2); max-width: 60ch; }
.det__desc.is-soon { color: var(--fg-3); }
.det__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.det__ctas .pill { padding: 12px 18px; font-size: 13px; }
/* con un rubro abierto: el WhatsApp flotante se quita (el panel ya ofrece "quiero algo así") */
body.rp-open .wa { opacity: 0; transform: translateY(12px); pointer-events: none; }
body.rp-open .hud--tr { opacity: 0; }
.hud--tl .mono { transition: opacity .5s ease; }
body:not([data-scene="inicio"]) .hud-sub { display: none; }
.hud-note-m { display: none; max-width: 34ch; }
@media (max-width: 1360px) { body:not([data-scene="inicio"]) .hud-note-m { display: block; } }
@media (max-aspect-ratio: 799/1000) { body.rp-open .hud--tl .mono, body.rp-open .hud--bl { opacity: 0; } }
.hud--tr { transition: opacity .5s ease; }

/* ---------- proceso: cinco etapas unidas por un hilo de partículas ----------
   Con 3D, las partículas trazan el hilo entre los números y un anillo alrededor de cada uno
   (lab.js mide dónde quedan los números: nada aquí lleva transform). */
.proc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; margin: 38px auto 0; max-width: 1080px; text-align: center; }
.proc__step { position: relative; display: flex; flex-direction: column; align-items: center; }
.proc__n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: #07070B; color: var(--fg-3); font-size: 12px; letter-spacing: .04em; transition: color .5s ease;
}
.proc__step.is-on .proc__n { color: #fff; }
.proc__h { margin-top: 16px; font: 600 17px/1.2 "Montserrat", sans-serif; letter-spacing: -.01em; color: #fff; }
.proc__d { margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--fg-2); }
.proc__tag { margin-top: 10px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
html.is-3d .scene--proc::before, html.is-3d .scene--pk::before { display: none; }   /* el hilo y los marcos no se velan */
/* vertical: los números en columna (el hilo baja por ella) y el texto a la derecha */
html.is-3d .scene--proc.is-compact { width: min(92vw, 440px); }
html.is-3d .scene--proc.is-compact .proc { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; text-align: left; }
html.is-3d .scene--proc.is-compact .proc__step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
html.is-3d .scene--proc.is-compact .proc__n { width: 34px; height: 34px; font-size: 11px; }
html.is-3d .scene--proc.is-compact .proc__h { margin-top: 2px; font-size: 15px; }
html.is-3d .scene--proc.is-compact .proc__d { margin-top: 3px; font-size: 11px; line-height: 1.45; }
html.is-3d .scene--proc.is-compact .proc__tag {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.is-short.is-3d .scene--proc.is-compact .kicker { margin-bottom: 10px; }
html.is-short.is-3d .scene--proc:not(.is-compact) :is(.proc__d, .proc__tag) {   /* horizontal bajo: número y título legibles */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.is-short.is-3d .scene--proc.is-compact .proc { gap: 8px; margin-top: 14px; }

/* ---------- paquetes: tres tarjetas, cada una con su WhatsApp; con 3D, las partículas dibujan su marco ---------- */
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 34px auto 0; max-width: 1000px; text-align: left; align-items: stretch; }
.pk {
  position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 18px;
  background: #0c0b15; border: 1px solid var(--line); pointer-events: auto; transition: border-color .3s;
}
.pk:hover { border-color: rgba(255,255,255,.3); }
.pk--hot { background: #100e1c; border-color: rgba(255,255,255,.24); margin-top: -12px; padding-top: 38px; }   /* más alta sin transform: el marco se mide del layout */
.pk__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-height: 24px; }
.pk__k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.pk__badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(#100e1c, #100e1c) padding-box, var(--grad) border-box;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.pk__badge--line { background: none; border-color: rgba(255,255,255,.25); color: var(--fg-2); }
.pk__badge svg { width: 12px; height: 12px; flex: none; }
.pk__name { margin-top: 12px; font: 700 22px/1.1 "Montserrat", sans-serif; letter-spacing: -.02em; color: #fff; }
.pk__list { display: grid; gap: 8px; margin: 16px 0 22px; font-size: 12px; line-height: 1.5; color: var(--fg-2); }
.pk__list li { position: relative; padding-left: 16px; }
.pk__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--grad); }
.pk__acts { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.pk__cta { position: relative; z-index: 1; min-height: 48px; padding: 14px 20px 14px 16px; font-size: 13px; }
.pk__more { display: none; }
.pk:has(.pk__more:focus-visible) { outline: 2px solid #2BCCD9; outline-offset: 3px; }
.pk__more:focus-visible { outline: none; }
/* compacto (vertical o pantalla baja): sin viñetas a la vista; "Qué incluye" abre la hoja */
html.is-3d .scene--pk.is-compact .pk { padding: 12px 14px 12px; border-radius: 16px; }
html.is-3d .scene--pk.is-compact .pk--hot { margin-top: 0; }
html.is-3d .scene--pk.is-compact .pk__name { margin-top: 4px; font-size: 17px; }
html.is-3d .scene--pk.is-compact .pk__list {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.is-3d .scene--pk.is-compact .pk__acts { margin-top: 10px; }
html.is-3d .scene--pk.is-compact .pk__cta { flex: 1; min-height: 44px; justify-content: center; padding: 10px 14px; }
html.is-3d .scene--pk.is-compact .pk__cta::before { content: ""; position: absolute; inset: -3px 0; }   /* 44 px en pantalla aunque el bloque se achique */
html.is-3d .scene--pk.is-compact .pk__more {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap;
  transition: background .3s;
}
html.is-3d .scene--pk.is-compact .pk__more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* toda la tarjeta abre el detalle */
html.is-3d .scene--pk.is-compact .pk__more:hover { background: rgba(255,255,255,.07); }
@media (min-aspect-ratio: 800/1000) {
  html.is-3d .scene--pk.is-compact .pk__acts { flex-wrap: wrap; }
  html.is-3d .scene--pk.is-compact .pk__more { flex: 1 1 auto; }
  html.is-3d .scene--pk.is-compact .pk__cta { white-space: nowrap; }   /* las tres tarjetas se acomodan igual */
}
@media (max-aspect-ratio: 799/1000) {
  html.is-3d .scene--pk.is-compact { width: min(92vw, 440px); }
  html.is-3d .scene--pk.is-compact .pk-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }   /* aire para los dos marcos */
}
html.is-short.is-3d .scene--pk.is-compact .pk { padding: 9px 12px; }
html.is-short.is-3d .scene--pk.is-compact .pk-grid { gap: 16px; margin-top: 14px; }
html.is-short.is-3d .scene--pk.is-compact .kicker { margin-bottom: 10px; }
html.is-short.is-3d .scene--pk.is-compact .pk__acts { margin-top: 6px; }

/* hoja "Qué incluye": sube desde abajo (en horizontal, tarjeta centrada). Fondos sólidos, sin desenfoque */
.psheet-veil { position: fixed; inset: 0; z-index: 8; background: rgba(7,7,11,.62); opacity: 0; transition: opacity .35s ease; }
.psheet-veil.is-open { opacity: 1; }
.psheet {
  position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; max-height: min(80vh, 600px); max-height: min(80svh, 600px);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  padding: 16px calc(18px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
  background: #0b0a13; border-top: 1px solid rgba(255,255,255,.18); border-radius: 22px 22px 0 0; color: #fff; text-align: left;
  transform: translateY(105%); visibility: hidden; transition: transform .42s var(--ease), visibility 0s linear .42s;
}
.psheet.is-open { transform: none; visibility: visible; transition: transform .42s var(--ease), visibility 0s; }
.psheet__back { min-height: 44px; padding: 0 12px 0 0; color: var(--fg-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.psheet__back:hover { color: #fff; }
.psheet .pk__top { margin-top: 6px; }
.psheet h3 { margin-top: 8px; font: 700 26px/1.1 "Montserrat", sans-serif; letter-spacing: -.03em; outline: none; }
.psheet .pk__list { margin: 18px 0 22px; font-size: 13px; }
.psheet .pk__cta { display: flex; justify-content: center; width: 100%; min-height: 52px; }
@media (min-aspect-ratio: 800/1000) {
  .psheet { left: 50%; right: auto; bottom: 50%; width: min(520px, 92vw); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; transform: translate(-50%, 50%) translateY(24px); opacity: 0; transition: transform .42s var(--ease), opacity .3s ease, visibility 0s linear .42s; }
  .psheet.is-open { transform: translate(-50%, 50%); opacity: 1; transition: transform .42s var(--ease), opacity .3s ease, visibility 0s; }
}
@media (min-aspect-ratio: 800/1000) and (max-height: 480px) {
  .psheet { max-height: 92vh; max-height: 92svh; }
  .psheet .pk__list { margin: 10px 0 14px; gap: 4px; }
  .psheet h3 { font-size: 22px; }
}
html.is-short body[data-scene="proceso"] .hud-note-m, html.is-short body[data-scene="paquetes"] .hud-note-m { display: none; }

/* ---------- contacto ---------- */
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px 15px 18px; border-radius: 999px;
  font: 600 13px/1 "Montserrat", sans-serif; letter-spacing: .04em;
  transition: transform .4s var(--ease), background .3s;
}
.pill:hover { transform: translateY(-2px); }
.pill:active, .wa:active, .chip--cta:active, .arrow:active, .sub:active, .rpanel__back:active { transform: scale(.97); transition-duration: .08s; }   /* respuesta al presionar */
.title:focus { outline: none; }
.pill--light { background: #fff; color: #07070B; }
.pill--two { padding-top: 11px; padding-bottom: 11px; text-align: left; }
.pill__txt { display: flex; flex-direction: column; gap: 3px; }
.pill__txt b { font: 600 14px/1.1 "Montserrat", sans-serif; letter-spacing: -.005em; }
.pill__txt small { font-size: 11px; letter-spacing: .04em; color: #4a4d5a; }   /* sin sombras difusas: viven dentro del 3D */
.pill--ghost { border: 1px solid rgba(255,255,255,.22); color: #fff; padding-left: 22px; }
.pill--ghost:hover { background: rgba(255,255,255,.07); }
.restart { position: relative; margin-top: 22px; color: #9DA1B0; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.restart:hover { color: #fff; }
/* pie de contacto: volver al inicio + redes (íconos) en un renglón; enlaces legales debajo */
.contact-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 22px; }   /* (sobre el área táctil de los legales) */
.contact-foot .restart { margin-top: 0; }
.social { display: inline-flex; gap: 10px; }
.social__a {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: #fff; pointer-events: auto; transition: background .3s, border-color .3s;
}
.social__a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.social__a::before { content: ""; position: absolute; inset: -4px; }   /* área táctil de 44 px */
.social__a svg { width: 16px; height: 16px; }
.legal { margin-top: 16px; font-size: 10.5px; letter-spacing: .04em; color: var(--fg-3); }
/* contacto: el pie con la razón de ser local (texto real para Google) */
.copyline { margin-top: 6px; font-size: 9.5px; letter-spacing: .03em; color: var(--fg-3); }
.legal a { position: relative; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.25); pointer-events: auto; }
.legal a:hover { color: #fff; }
.legal a::before { content: ""; position: absolute; inset: -12px -4px; }   /* área táctil */
.restart::before { content: ""; position: absolute; inset: -14px -16px; }   /* área táctil ≥ 44 px sin agrandar el bloque (no empuja el texto hacia la M) */

/* ---------- HUD inferior ---------- */
/* pista de deslizar: abajo al centro (en celular, sobre el botón de WhatsApp) */
.swipe-hint {
  position: fixed; z-index: 5; left: 50%; bottom: calc(var(--pad) + 6px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: #C3C6D2; letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
  pointer-events: none; transition: opacity .6s ease;
}
.swipe-hint i { width: 1px; height: 30px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; display: block; order: -1; }
.swipe-hint i::after { content: ""; position: absolute; inset: 0; background: #2BCCD9; animation: cue 2.2s cubic-bezier(.2,.8,.25,1) infinite; }
body:not([data-scene="inicio"]) .swipe-hint, html.hint-done .swipe-hint:not(.is-tap), html:not(.is-3d) .swipe-hint { opacity: 0; }
/* guía del inicio (lab.js la coloca con --hx/--hy): "Tap" = anillo que late sobre la M; "Scroll" = cápsula con un punto que baja,
   centrada entre el titular y el WhatsApp. Es el mismo ícono: el círculo se vuelve cápsula mientras baja */
.swipe-hint.is-placed { left: 0; top: 0; bottom: auto; transform: translate(var(--hx, 50vw), var(--hy, 80vh)) translate(-50%, -50%); }
.swipe-hint.is-moving { transition: opacity .6s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.swipe-hint.is-placed i { transition: width .7s cubic-bezier(.16,1,.3,1), height .7s cubic-bezier(.16,1,.3,1), border-radius .7s cubic-bezier(.16,1,.3,1), background .4s; }
.swipe-hint.is-tap { pointer-events: auto; cursor: pointer; color: #fff; gap: 12px; }
.swipe-hint.is-tap i, .swipe-hint.is-scroll i { border: 1px solid rgba(255,255,255,.55); overflow: visible; }
.swipe-hint.is-tap i { width: 46px; height: 46px; border-radius: 23px; background: rgba(255,255,255,.06); }
.swipe-hint.is-tap i::after { inset: -1px; border-radius: 50%; background: none; border: 1px solid #2BCCD9; animation: tap-ring 1.8s cubic-bezier(.2,.8,.25,1) infinite; }
.swipe-hint.is-tap i::before, .swipe-hint.is-scroll i::before { content: ""; position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; }
.swipe-hint.is-tap i::before { top: 50%; margin-top: -3px; }
.swipe-hint.is-tap::before { content: ""; position: absolute; inset: -14px -18px; }   /* área táctil amplia */
.swipe-hint.is-scroll { gap: 10px; }
.swipe-hint.is-scroll i { width: 22px; height: 36px; border-radius: 11px; background: transparent; overflow: hidden; }
.swipe-hint.is-scroll i::after { display: none; }
.swipe-hint.is-scroll i::before { top: 7px; width: 4px; height: 4px; margin-left: -2px; background: #2BCCD9; animation: scroll-dot 1.9s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes tap-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(17px); opacity: 0; } 100% { transform: translateY(17px); opacity: 0; } }
@keyframes cue { 0% { transform: translateY(-100%); } 70%, 100% { transform: translateY(100%); } }
/* sonido: barras que se mueven mientras suena */
.snd, .idx .snd--m { display: none; }
html.is-3d .snd--d {
  position: relative; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 24px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9DA1B0; transition: color .3s;
}
.snd--d::before { content: ""; position: absolute; inset: -10px -12px; }   /* área táctil ≥ 44 px */
.snd--d:hover { color: #fff; }
.snd__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd__bars i { display: block; width: 2px; height: 3px; border-radius: 1px; background: currentColor; transition: height .3s, opacity .3s; }
.snd.is-playing .snd__bars i { animation: eq 1.1s ease-in-out infinite; }
.snd.is-playing .snd__bars i:nth-child(2) { animation-duration: .9s; animation-delay: -.3s; }
.snd.is-playing .snd__bars i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.6s; }
.snd.is-playing .snd__bars i:nth-child(4) { animation-duration: 1s; animation-delay: -.15s; }
.snd[aria-pressed="false"] .snd__bars i { height: 2px; opacity: .55; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.progress { width: 120px; height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }

.wa {
  position: fixed; z-index: 6; right: calc(var(--pad) + env(safe-area-inset-right, 0px)); bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  padding: 15px 22px 15px 18px; border-radius: 999px;
  background: #fff; color: #07070B; font: 600 13px/1 "Montserrat", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);           /* sombra neutra: el blanco ya destaca */
  transition: opacity .5s ease, transform .5s var(--ease);
}
/* se quita donde ya hay botones propios (paquetes, contacto) o donde tapa (casos y, si no cabe, proceso en celular): lab.js pone .wa-off */
body.wa-off .wa { opacity: 0; transform: translateY(12px); pointer-events: none; }
.idx__t { display: inline; }
.idx .idx__toggle { display: none; }
.wa__dot { width: 9px; height: 9px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 4px rgba(37,211,102,.18); flex: none; }

.curtain {
  position: fixed; inset: 0; z-index: 20; background: var(--ink); pointer-events: none; transition: opacity 1.1s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  animation: curtain-safe .8s ease 7s forwards;   /* red de seguridad si el JS no arranca */
}
.curtain__m { width: 56px; height: 56px; opacity: .92; }
.curtain__bar { width: 120px; height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.curtain__bar i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--load, .1)); transition: transform .5s var(--ease); }
/* la entrada: primero la M, luego el titular; el HUD y los botones llegan al final (lab.js quita la clase) */
html.is-intro .hud, html.is-intro .wa, html.is-intro .swipe-hint { opacity: 0; }
/* internet lento: a los 4 s de carga el WhatsApp aparece sobre el telón (lab.js pone .wa-early) */
html.wa-early body:not(.wa-off) .wa { z-index: 21; opacity: 1; animation: wa-in .5s var(--ease) both; }
@keyframes wa-in { from { opacity: 0; transform: translateY(8px); } }
.curtain.is-off { opacity: 0; }
.curtain:not(.is-off) { pointer-events: auto; }        /* bajo el telón nada se toca (el WhatsApp temprano va encima) */
@keyframes curtain-safe { to { opacity: 0; visibility: hidden; } }

/* sin WebGL / sin JS: los textos se leen como página normal */
html:not(.is-3d) body { overflow: auto; touch-action: auto; }
html:not(.is-3d) .stage { position: relative; z-index: 4; display: grid; gap: 16vh; padding: 150px var(--pad) 160px; }
html:not(.is-3d) .scene { margin: 0 auto; }
html:not(.is-3d) .scene::before { display: none; }
html:not(.is-3d) .idx, html:not(.is-3d) .restart { display: none; }
/* el HUD de arriba se va con el scroll (fijo, los títulos le pasaban encima) */
html:not(.is-3d) body { position: relative; }
html:not(.is-3d) :is(.hud--tl, .hud--tr) { position: absolute; }
/* legales: renglón que puede partirse y áreas táctiles de 44 px */
html:not(.is-3d) .legal { font-size: 11px; line-height: 1.4; }
html:not(.is-3d) .legal a { display: inline-block; padding: 14px 4px; }
html:not(.is-3d) .legal a::before { display: none; }
html:not(.is-3d) .proc { grid-template-columns: 1fr; gap: 16px; max-width: 560px; text-align: left; }
html:not(.is-3d) .proc__step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
html:not(.is-3d) .proc__n { border: 1px solid rgba(255,255,255,.3); color: #fff; }
html:not(.is-3d) .proc__h { margin-top: 8px; }
html:not(.is-3d) .pk-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
html:not(.is-3d) .pk--hot { margin-top: 0; }
html:not(.is-3d) .pk__more, html:not(.is-3d) .psheet, html:not(.is-3d) .psheet-veil { display: none; }
@media (min-width: 960px) {
  html:not(.is-3d) .proc { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; text-align: center; }
  html:not(.is-3d) .proc__step { display: flex; }
}

@media (max-width: 1360px) {             /* 7 escenas: con nombres sólo caben desde 1361 px */
  .hud--tr { display: none; }
  .idx { left: auto; right: 0; transform: none; }
  .idx ol { gap: 20px; padding: 3px 14px; }
  .idx button { padding: 8px 2px; }
  .idx button::before { inset: -8px -12px; }          /* números solos: el área táctil llega a ~44 px */
  .idx__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 720px) {
  .hud--tr { display: none; }
  html.is-3d .snd--d { display: none; }
  .idx { display: flex; align-items: center; gap: 8px; }
  html.is-3d .idx .snd--m {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
    border-radius: 50%; background: rgba(7,7,11,.55); border: 1px solid rgba(255,255,255,.1); color: #fff;
  }
  .idx .snd--m::before { content: ""; position: absolute; inset: -6px -4px; }   /* área táctil de 44 px */
  /* 7 escenas no caben junto a la marca: un botón con la escena actual abre la lista */
  .idx .idx__toggle {
    position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 14px;
    border-radius: 999px; background: rgba(7,7,11,.55); border: 1px solid rgba(255,255,255,.1);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; white-space: nowrap;
  }
  .idx .idx__toggle::before { content: ""; position: absolute; inset: -6px -4px; }   /* área táctil de 44 px */
  .idx__now { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; color: #C9CCD8; }
  .idx__toggle i { width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
  .idx.is-open .idx__toggle i { transform: translateY(1px) rotate(-135deg); }
  .idx ol {
    display: none; position: absolute; top: calc(var(--pad) + env(safe-area-inset-top, 0px) + 40px); right: calc(var(--pad) + env(safe-area-inset-right, 0px));
    flex-direction: column; gap: 0; width: 212px; padding: 6px; border-radius: 16px; background: #0c0b15; border: 1px solid rgba(255,255,255,.14);
    max-height: calc(100vh - var(--pad) - env(safe-area-inset-top, 0px) - 52px); max-height: calc(100svh - var(--pad) - env(safe-area-inset-top, 0px) - 52px);
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
  }
  .idx.is-open ol { display: flex; }
  .idx ol button { width: 100%; min-height: 44px; padding: 0 12px; gap: 14px; justify-content: flex-start; color: #9DA1B0; }
  .idx ol button::before { inset: 0; }
  .idx ol button::after { left: 12px; right: auto; width: 18px; bottom: 9px; }
  .idx ol .idx__t { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: inherit; }
  .title--2 { font-size: clamp(28px, 8vw, 40px); }
  .trio { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; text-align: left; }
  .trio p { font-size: 11px; padding-top: 10px; }
  .trio strong { font-size: 14px; margin-bottom: 3px; }
  .svc-grid { grid-template-columns: 1fr; margin-top: 18px; }
  .svc-grid li { padding: 8px 0; }
  .svc-grid .svc__n { font-size: 14px; }
  .svc-grid i { display: none; }
  html.is-3d .scene--cases {
    height: calc(100vh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    height: calc(100svh - 140px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .orbit-cap { gap: 10px; }
  .ctas { flex-direction: column; align-items: stretch; }
  .pill--two { min-height: 56px; }
  .pill { justify-content: center; }
  .wa { left: 0; right: 0; width: max-content; margin-inline: auto; justify-content: center; }   /* píldora centrada, no barra */
  .hud--bl { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body[data-scene="contacto"] .hud--bl, body[data-scene="casos"] .hud--bl, body[data-scene="paquetes"] .hud--bl { opacity: 0; }
  .swipe-hint { bottom: calc(var(--pad) + 62px + env(safe-area-inset-bottom, 0px)); }
  .progress { display: none; }                         /* en celular, la línea suelta sobraba */
  .contact-foot { margin-top: 10px; gap: 16px; }
  .scene--contact .ctas { gap: 8px; margin-top: 22px; }
  .scene--contact .pill--two { min-height: 52px; }
  html.is-3d .legal { margin-top: 12px; font-size: 9.5px; letter-spacing: 0; white-space: nowrap; }   /* un renglón: no empuja el bloque sobre la M */
  html.is-3d .legal a::before { inset: -6px -4px; }     /* (no invade los íconos de redes de arriba) */
  .copyline { font-size: 9px; letter-spacing: 0; }
}
/* contacto en pantallas bajas: buildPath mide el aire que le queda a la M y aprieta el bloque (tight) o,
   si aun así no alcanza, suelta el kicker y la nota del HUD (bare). Todo sigue a ≥ 44 px táctiles */
html.is-3d .scene--contact.is-tight .kicker { margin-bottom: 10px; }
html.is-3d .scene--contact.is-tight .ctas { gap: 6px; margin-top: 14px; }
html.is-3d .scene--contact.is-tight .pill--two { min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
html.is-3d .scene--contact.is-tight .pill--ghost { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
html.is-3d .scene--contact.is-tight .contact-foot { margin-top: 8px; }
html.is-3d .scene--contact.is-bare :is(.kicker, .copyline) { display: none; }   /* (pantallas muy bajas: la M necesita ese aire) */
html.contact-bare body[data-scene="contacto"] .hud-note-m { display: none; }
@media (max-width: 380px) {
  .idx__now { display: none; }                          /* celulares angostos: número + flecha (cabe el botón de sonido) */
}
@media (prefers-reduced-motion: reduce) {
  .curtain, .sub, .rpanel__grid, .rpanel__head, .psheet, .psheet-veil, .proc__n, .idx__toggle i { transition: none; }
  .snd.is-playing .snd__bars i { animation: none; height: 8px; }
  .swipe-hint i::after { animation: none; }
}

/* vertical (mismo corte que lab.js: ancho/alto < 0.8, estricto): el panel es una hoja sólida que sube desde abajo */
@media (max-aspect-ratio: 799/1000) {
  .rpanel.is-open { pointer-events: auto; }
  .rpanel {
    top: auto; left: 0; width: auto; height: 60vh; height: 60svh;
    padding: 20px calc(16px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    border-radius: 22px 22px 0 0; border-top: 1px solid rgba(255,255,255,.18); background: rgba(9,9,15,.95);
  }
  .rpanel__head { margin-bottom: 16px; }
  .rpanel__close { margin-bottom: 6px; }
  .rpanel__title { font-size: 30px; }
  .rpanel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sub__name { font-size: 13px; padding: 10px 12px 2px; }
  .sub__meta { padding: 0 12px 11px; }
  .rpanel__detail { top: 12px; left: 12px; right: 12px; margin-bottom: 20px; }
  .det__body { padding: 18px 18px 20px; }
}

/* pista de sonido: "Toca para escuchar" junto al botón, una vez por visita (lab.js la coloca) */
.snd-hint {
  position: fixed; z-index: 9; transform: translate(-50%, 0); pointer-events: none;
  padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.94); color: #07070B;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; translate: 0 -4px; transition: opacity .35s ease, translate .35s var(--ease);
}
.snd-hint.is-above { transform: translate(-50%, -100%); }
.snd-hint::before { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
.snd-hint.is-above::before { top: auto; bottom: -4px; }
.snd-hint.is-on { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .snd-hint, .swipe-hint, .swipe-hint i { transition: none !important; } .swipe-hint.is-tap i::after, .swipe-hint.is-scroll i::before { animation: none; } }
body:not([data-scene="inicio"]) .swipe-hint.is-tap { pointer-events: none; }
/* la nota del HUD se escribe con saltos reales (el decodificado la reescribe como texto) */
[data-note] { white-space: pre-line; }
/* estela del cursor (solo con mouse): puntos de marca que siguen al puntero y se apagan al detenerse */
.trail { position: fixed; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; }
.trail i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
html:not(.is-3d) .trail { display: none; }