/* ============================================================
   ANIDA LAB — v2 shared design system (hx.*)
   Scroll-driven editorial language: Anida palette + Riforma.
   Loaded globally; motion in hx-motion.js. Pages compose with
   these classes + data-hx-* hooks.
   ============================================================ */
:root {
  --char:#2B2B2B; --cream:#F2F1ED; --paper:#FFFFFF;
  --muted:#3B3B3B; --soft:#B0B0B0; --line:#A5A5A5; --mauve:#BEADC4;
}
/* v2 is white-grounded (beats tailwind's warm .bg-offwhite body). */
body.bg-offwhite { background:#fff; }
/* Stop the trackpad's horizontal swipe from triggering browser back/forward
   navigation when scrubbing a carousel. */
html, body { overscroll-behavior-x: none; }
/* Guard contra el wiggle horizontal en iPad Safari (31.08.2026): clip no crea
   scroll-container, así que el position:sticky de la página sigue funcionando. */
html, body { overflow-x: clip; }
.hx-swiper, .hx-tswiper { overscroll-behavior-x: contain; }

/* ---------- Type (tightened, Apple-like scale) ---------- */
.hx-eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:0 0 18px; }
.hx-h1 { font-size:clamp(36px,6.2vw,88px); line-height:1.02; font-weight:500; letter-spacing:-.035em; color:var(--char); margin:0; }
.hx-h2 { font-size:clamp(26px,3.6vw,52px); line-height:1.04; font-weight:500; letter-spacing:-.028em; color:var(--char); margin:0; }
.hx-h3 { font-size:clamp(20px,2.3vw,30px); line-height:1.14; font-weight:500; letter-spacing:-.018em; color:var(--char); margin:0; }
.hx-lead { font-size:clamp(18px,1.9vw,25px); line-height:1.28; font-weight:500; letter-spacing:-.015em; color:var(--char); margin:0; }
.hx-body { font-size:clamp(15px,1.15vw,17px); line-height:1.6; color:var(--muted); margin:0; }
.hx-body + .hx-body { margin-top:18px; }

/* ---------- Sections & layout ---------- */
.hx-sec { padding:10vh 6vw; background:var(--paper); }
.hx-sec--cream { background:var(--cream); }
.hx-sec--dark { background:var(--char); color:var(--cream); }
.hx-sec--dark .hx-h1, .hx-sec--dark .hx-h2, .hx-sec--dark .hx-h3, .hx-sec--dark .hx-lead { color:var(--cream); }
.hx-sec--dark .hx-body { color:#d6d3cc; }
.hx-sec--dark .hx-eyebrow { color:var(--line); }
.hx-sec--tight { padding:7vh 6vw; }
.hx-wrap { max-width:1180px; margin:0 auto; }
.hx-wrap--narrow { max-width:900px; margin:0 auto; }
.hx-center { text-align:center; }

/* ---------- Buttons / links ---------- */
.hx-cta { display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 26px; font-size:15px; font-weight:500; text-decoration:none; border-radius:999px; transition:transform .2s ease, background .2s ease, color .2s ease; }
.hx-cta--primary { background:var(--mauve); color:#fff; } /* lila → texto SIEMPRE blanco */
.hx-cta--primary:hover { background:#C7B9CC; transform:translateY(-2px); } /* hover ACLARA (como "Mi cuenta" del header) */
.hx-cta--dark { background:var(--char); color:var(--cream); }
.hx-cta--dark:hover { transform:translateY(-2px); }
.hx-cta--secondary { background:transparent; color:var(--char); border:1px solid rgba(43,43,43,.4); }
.hx-cta--secondary:hover { background:var(--char); color:var(--cream); border-color:var(--char); }
.hx-sec--dark .hx-cta--secondary { color:var(--cream); border-color:rgba(242,241,237,.5); }
.hx-sec--dark .hx-cta--secondary:hover { background:var(--cream); color:var(--char); }
/* Enlace secundario inerte ("aún no disponible"): mismo aspecto que .hx-hero__link,
   apagado y con tooltip propio (data-soon). El tooltip cuelga por DEBAJO para no
   quedar recortado por la máscara de entrada del hero. */
.hx-hero__link.is-soon { position:relative; color:rgba(242,241,237,.55); border-bottom-color:rgba(242,241,237,.25); cursor:default; }
.hx-hero__link.is-soon:hover { border-bottom-color:rgba(242,241,237,.25); }
.hx-hero__link.is-soon:hover span { transform:none; }
.hx-hero__link.is-soon::after { content:attr(data-soon); position:absolute; left:0; top:calc(100% + 9px);
  background:var(--char); color:var(--cream); font-size:12.5px; line-height:1; white-space:nowrap; padding:8px 11px; border-radius:7px;
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.hx-hero__link.is-soon:hover::after, .hx-hero__link.is-soon:focus-visible::after { opacity:1; transform:translateY(0); }
/* La máscara recorta (overflow:hidden) para la animación de entrada; una vez terminada
   se libera para que el tooltip pueda salir del recuadro. */
.hx-hero__foot .hx-mask:has(.is-soon) { animation:hxunclip 0s 1.5s forwards; }
@keyframes hxunclip { to { overflow:visible; } }
.hx-link { display:inline-flex; align-items:center; gap:9px; font-size:16px; color:var(--char); text-decoration:none; border-bottom:1px solid rgba(43,43,43,.4); padding-bottom:3px; transition:gap .25s ease; }
.hx-link:hover { gap:16px; }
.hx-sec--dark .hx-link { color:var(--cream); border-color:rgba(242,241,237,.5); }
.hx-ctas, .hx-hero__ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px; }
/* Hero CTAs get a touch more separation (primary + secondary sit clearly apart). */
.hx-hero__ctas { gap:18px; }
.hx-center .hx-ctas { justify-content:center; }

/* ---------- Masked rise (load reveal, pure transform) ---------- */
.hx-mask { display:block; overflow:hidden; }
.hx-mask > * { display:block; transform:translateY(110%); animation:hxrise 1.15s cubic-bezier(.16,1,.3,1) forwards; }
/* Keep the CTA row a flex container (the mask above would force it to block, killing
   the gap between the two hero CTAs). */
.hx-mask > .hx-hero__ctas { display:flex; flex-wrap:wrap; align-items:center; }
.hx-maskgroup .hx-mask:nth-child(2) > *, .hx-hero__inner .hx-mask:nth-child(2) > * { animation-delay:.08s; }
.hx-maskgroup .hx-mask:nth-child(3) > *, .hx-hero__inner .hx-mask:nth-child(3) > * { animation-delay:.16s; }
@keyframes hxrise { to { transform:translateY(0); } }

/* ---------- HERO ---------- */
.hx-hero { position:relative; height:100vh; min-height:660px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column; }
.hx-hero--dark { color:var(--cream); }
.hx-hero__imgwrap { position:absolute; inset:0; z-index:0; overflow:hidden; will-change:transform; }
/* Sin parallax (2026-08-02): la imagen del hero llena el marco 1:1, encuadre fijo. */
.hx-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.hx-hero--dark .hx-hero__img { opacity:1; }
/* Home hero: el brazo alzado toca el borde superior de la foto — recorte anclado arriba. */
.hx-hero--home .hx-hero__img { object-position:center top; }
/* Hero 31.08 (Anida-Hero-Page-01): pared extendida a la izquierda (2ª ronda, más aún),
   chica al ~64% del lienzo — centrado la deja al ~70% en pantallas anchas; por debajo
   de 1300px el recorte es más estrecho y hay que anclar SOBRE ella o sale de cuadro. */
@media (max-width:1300px){ .hx-hero--home .hx-hero__img { object-position:64% top; } }
.hx-hero__scrim { position:absolute; inset:0; z-index:1; }
/* Legibility fade: a touch darker at the base where the copy sits, easing cleanly to
   transparent — keeps light photos (Membership, Contact, About) readable without a veil. */
.hx-hero--dark .hx-hero__scrim { background:linear-gradient(to top, rgba(15,15,13,.68) 0%, rgba(15,15,13,.34) 32%, rgba(15,15,13,0) 66%); }
/* Home hero: mismo scrim y texto que el resto de heroes (sin sombra ni velo extra). */
.hx-hero__inner { position:relative; z-index:10; margin-top:auto; padding:0 6vw 8vh; max-width:1180px; }
/* The title sits directly above a fixed-height "foot" holding the sub(s) + CTA, which
   is bottom-anchored — so BOTH the title bottom and the CTA land at the same spot on
   every page; only the empty gap between title and sub flexes with copy length. */
/* El subtítulo va SIEMPRE pegado al título (misma separación en todas las páginas);
   el hueco elástico se abre contra el bloque de CTAs, que sigue anclado abajo para
   que el botón caiga a la misma altura en todo el sitio. */
.hx-hero__foot { min-height:210px; display:flex; flex-direction:column; justify-content:flex-start; }
.hx-hero__foot > .hx-mask:has(.hx-hero__ctas) { margin-top:auto; }
.hx-hero__foot .hx-mask:nth-child(1) > * { animation-delay:.08s; }
.hx-hero__foot .hx-mask:nth-child(2) > * { animation-delay:.16s; }
.hx-hero__foot .hx-mask:nth-child(3) > * { animation-delay:.22s; }
.hx-hero__title { font-size:clamp(36px,5.5vw,70px); line-height:1.08; font-weight:500; letter-spacing:-.035em; color:var(--char); margin:0; padding-bottom:.06em; }
.hx-hero--dark .hx-hero__title { color:var(--cream); }
.hx-hero__sub { font-size:clamp(15px,1.4vw,19px); line-height:1.45; color:var(--muted); max-width:540px; margin:18px 0 0; }
.hx-hero--dark .hx-hero__sub { color:#e5e2db; }
/* Secondary hero CTA rendered as a white underlined link (like "Explore the Lab"). */
.hx-hero__link { display:inline-flex; align-items:center; gap:8px; font-size:16px; color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(242,241,237,.5); padding-bottom:3px; transition:border-color .25s ease; white-space:nowrap; }
.hx-hero__link:hover { border-color:var(--cream); }
.hx-hero__link span { display:inline-block; transition:transform .25s ease; }
.hx-hero__link:hover span { transform:translateX(4px); }
.hx-hero__cue { position:absolute; z-index:10; left:50%; bottom:22px; transform:translateX(-50%); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.hx-hero--dark .hx-hero__cue { color:#d9d6cf; }
.hx-hero__cue::after { content:""; display:block; width:1px; height:38px; margin:10px auto 0; background:linear-gradient(currentColor,transparent); animation:hxcue 1.9s ease-in-out infinite; transform-origin:top; }
@keyframes hxcue { 0%,100%{transform:scaleY(.35);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ---------- MANIFESTO (scrubbed word light-up) ---------- */
/* 30.08.2026 (cliente): el bloque ocupa casi toda la ventana — solo asoma un poco de
   la sección anterior y de la siguiente. El light-up NO cambia: su trigger es el
   propio párrafo (hx-motion), así que la altura de la sección no altera el scrub. */
/* 80svh y no más: el header fijo (banner+nav ≈ 10vh) tapa el asomo superior — con
   más altura el hero nunca llega a verse bajo el header. */
.hx-manifesto { background:var(--paper); padding:10vh 6vw; display:flex; justify-content:center; align-items:center; min-height:80vh; min-height:80svh; }
.hx-manifesto__inner { max-width:1120px; width:100%; }
/* Our Approach: icono + rótulo a la IZQUIERDA, texto a la derecha (la variante
   --tight de illumine.php sigue siendo una sola columna). */
.hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__inner { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; gap:0 clamp(34px,6vw,96px); align-items:start; }
/* La columna izquierda solo ocupa lo que mide el rótulo: el texto gana todo el ancho
   restante y el icono queda alineado con la primera línea. */
/* 2026-08-03: el icono se queda solo a la izquierda (algo mayor) y "Our Approach"
   pasa a la columna del texto, JUSTO ENCIMA del párrafo que se ilumina. */
.hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__key { grid-column:1; grid-row:1 / span 2; width:44px; margin:2px 0 0; }
.hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__title { grid-column:2; grid-row:1; white-space:nowrap; margin-bottom:12px; }
.hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__p { grid-column:2; grid-row:2; }
.hx-manifesto__key { display:block; width:42px; height:auto; margin-bottom:22px; filter:brightness(0); opacity:.85; }
.hx-manifesto__title { font-size:16px; letter-spacing:-.005em; text-transform:none; color:var(--soft); margin:0 0 30px; }
/* Mismo tamaño en todas las páginas (home = illumine de movement/therapy/nutrition). */
.hx-manifesto__p { font-size:clamp(16px,1.9vw,24px); line-height:1.45; font-weight:500; letter-spacing:-.02em; margin:0; color:var(--char); }
.hx-manifesto__p .w { display:inline-block; }
/* Illuminating block below page heroes (illumine.php). Con la sección a ~pantalla
   completa y el texto centrado, los remates asimétricos --tight/--even ya no aplican
   (descentraban el párrafo); las clases siguen en el HTML para el max-width. */
.hx-manifesto--tight .hx-manifesto__inner { max-width:920px; }
.hx-manifesto--tight .hx-manifesto__p { font-size:clamp(16px,1.9vw,24px); line-height:1.45; max-width:none; }

/* ---------- MEDIA ROW (text · image, alternating) ---------- */
/* Full-bleed row: image is exactly 50%, flush to the outer edge; the text column
   fills the rest with reading padding + a gap, and is sticky (follows the scroll
   down to the end of its image). Use inside a .hx-sec--flush (no h-padding). */
.hx-media { display:grid; grid-template-columns:1fr 50%; align-items:start; gap:0; width:100%; }
.hx-media--rev { grid-template-columns:50% 1fr; }
.hx-media__body { max-width:600px; padding:0 5vw 0 7vw; position:sticky; top:15vh; align-self:start; }
.hx-media__body > * + * { margin-top:20px; }
.hx-media__body .hx-eyebrow + .hx-h3, .hx-media__body .hx-eyebrow + .hx-h2 { margin-top:14px; }
.hx-media__fig { overflow:hidden; aspect-ratio:1/1; } /* cajas del PDF ≈ cuadradas */
.hx-media__fig img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.hx-media__fig:hover img { transform:scale(1.04); }
.hx-media--square .hx-media__fig { aspect-ratio:1/1; }
@media (min-width:901px) {
  .hx-media--rev .hx-media__body { order:2; padding:0 7vw 0 5vw; }
  .hx-media--rev .hx-media__fig { order:1; }
}
.hx-sec--flush { padding-left:0; padding-right:0; }

/* ---------- CAROUSEL (offerings) ---------- */
.hx-cards__head { margin:0 0 8vh; padding:0 6vw; } /* aire bajo el título = aire sobre él */
.hx-cards__head--split { display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hx-cards__link { flex:none; font-size:clamp(15px,1.5vw,18px); color:var(--muted); white-space:nowrap; border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .25s ease, border-color .25s ease; }
.hx-cards__link:hover { color:var(--char); border-color:var(--char); }
.hx-cards__link span { transition:transform .25s ease; display:inline-block; }
.hx-cards__link:hover span { transform:translateX(4px); }
/* Swiper ignores container padding for slide positioning, so edge spacing is set
   via slidesOffsetBefore/After in hx-motion.js (aligned to the heading). */
.hx-swiper { padding:0; }
/* Fixed slide widths + slidesPerView:'auto' (hx-motion.js) → always a peek. */
/* Slides en vw puro + tarjetas con aspect-ratio: la proporción (nº de tarjetas visibles y
   encuadre de la foto) se mantiene idéntica a cualquier resolución o zoom del navegador.
   Referencia de diseño 1440×900: 600px→41.6vw, 520px→36.1vw, ratio 600/640 y 520/560. */
.hx-swiper .swiper-slide { width:41.6vw; height:auto; }
.hx-swiper--sm .swiper-slide { width:36.1vw; height:auto; }
.hx-slide { position:relative; display:block; height:auto; aspect-ratio:600/640; overflow:hidden; text-decoration:none; background:#e7e5df; }
.hx-slide__img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.hx-slide:hover .hx-slide__img { transform:scale(1.05); }
/* Frosted-glass veil on hover: milky diagonal sheen + edge highlight + blur/saturation
   (reads as glass, not a plain blur). Layered over the image, under the scrim + text. */
.hx-slide::before, .hx-person::before { content:""; position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.18) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(2px) saturate(1); -webkit-backdrop-filter:blur(2px) saturate(1);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1), backdrop-filter .55s cubic-bezier(.2,.6,.2,1), -webkit-backdrop-filter .55s cubic-bezier(.2,.6,.2,1); }
/* El hover SOLO cuenta con ratón (06.09.2026). En un móvil el toque deja el :hover
   "pegado" y la ficha se quedaba abierta aunque el JS quitara .is-open: el segundo
   toque no cerraba nada. En táctil manda .is-open y punto. */
.hx-slide.is-open::before, .hx-person.is-open::before {
  opacity:1; backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); -webkit-backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); }
@media (hover:hover) and (pointer:fine){
  .hx-slide:hover::before, .hx-slide:focus-visible::before,
  .hx-person:hover::before, .hx-person:focus-within::before {
    opacity:1; backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); -webkit-backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); }
}
.hx-slide::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(20,20,18,.7) 0%, rgba(20,20,18,.05) 48%, rgba(20,20,18,.15) 100%); }
.hx-slide__body { position:absolute; z-index:3; left:0; bottom:0; padding:40px; color:var(--cream); }
.hx-slide__title { font-size:clamp(28px,3.6vw,52px); line-height:1; font-weight:500; letter-spacing:-.028em; margin:0; }
.hx-slide__reveal { display:block; overflow:hidden; margin-top:14px; }
.hx-slide__link { display:inline-flex; align-items:center; gap:9px; font-size:17px; border-bottom:1px solid rgba(242,241,237,.55); padding-bottom:3px; transform:translateY(135%); transition:transform .42s cubic-bezier(.2,.6,.2,1); }
.hx-slide.is-open .hx-slide__link { transform:translateY(0); }
@media (hover:hover) and (pointer:fine){
  .hx-slide:hover .hx-slide__link, .hx-slide:focus-visible .hx-slide__link { transform:translateY(0); }
}
.hx-swiper .swiper-pagination, .hx-tswiper .swiper-pagination { position:static; margin-top:26px; padding:0 6vw; }
.hx-swiper .swiper-pagination-bullet, .hx-tswiper .swiper-pagination-bullet { background:var(--line); opacity:.5; width:7px; height:7px; transition:opacity .2s ease, background .2s ease; }
.hx-swiper .swiper-pagination-bullet-active, .hx-tswiper .swiper-pagination-bullet-active { background:var(--char); opacity:1; }
.hx-sec--dark .hx-swiper .swiper-pagination-bullet-active { background:var(--cream); }

/* ---------- FULL-BLEED SCENE (photo scales to bleed + statement) ---------- */
.hx-space { position:relative; background:var(--paper); }
/* Escena estática (sin zoom de scroll, 2026-08-02): el contenedor fija la proporción 16:9
   de la foto → en desktop la imagen se ve COMPLETA a cualquier anchura; en móvil (media
   query abajo) el bloque es alto y la misma foto recorta centrada. */
.hx-space__stage { position:relative; height:auto; aspect-ratio:var(--space-ar,1.778); overflow:hidden; background:var(--char); } /* bandas laterales oscuras en el estado tarjeta */
/* Zoom-tarjeta (2026-08-02): el fig es la FOTO COMPLETA (vertical) centrada a altura del
   bloque — se ve entera al llegar — y el scroll la escala (origen data-origin) hasta que
   su anchura cubre el stage y queda el encuadre final del diseño. Escala en hx-motion.js. */
.hx-space__fig { position:absolute; top:0; bottom:0; left:50%; height:100%; width:auto; aspect-ratio:var(--fig-ar,0.667);
  transform:translateX(-50%); will-change:transform; }
.hx-space__fig img { width:100%; height:100%; object-fit:cover; display:block; }
/* Variante "bleed": la imagen ocupa el 100% del stage por defecto (su encuadre de diseño)
   y el scroll solo la amplía — sin estado tarjeta. */
.hx-space__fig--bleed { left:0; width:100%; aspect-ratio:auto; transform:none; transform-origin:center; }
.hx-space__spacer { display:none; }
.hx-space__scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(18,18,16,.78) 0%, rgba(18,18,16,.12) 46%, rgba(18,18,16,.28) 100%); }
.hx-space__overlay { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:0 6vw 11vh; color:var(--cream); }
.hx-space__overlay .hx-mask { overflow:hidden; }
.hx-space__h { font-size:clamp(36px,6vw,90px); line-height:.98; font-weight:500; letter-spacing:-.035em; margin:0; max-width:14ch; }
.hx-space__lead { font-size:clamp(16px,1.7vw,22px); line-height:1.4; margin:20px 0 0; max-width:640px; color:#e8e6df; }

/* Quick-links list (e.g. under a section) */
.hx-offer-links { list-style:none; margin:0; padding:0; border-top:1px solid rgba(43,43,43,.14); }
.hx-offer-links li { border-bottom:1px solid rgba(43,43,43,.14); }
.hx-offer-links a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 2px; font-size:clamp(19px,1.9vw,26px); font-weight:500; letter-spacing:-.02em; color:var(--char); text-decoration:none; transition:padding-left .3s cubic-bezier(.2,.6,.2,1); }
.hx-offer-links a .ar { color:var(--soft); transition:transform .3s cubic-bezier(.2,.6,.2,1), color .2s ease; }
.hx-offer-links a:hover { padding-left:12px; }
.hx-offer-links a:hover .ar { transform:translateX(7px); color:var(--char); }

/* ---------- TEAM CAROUSEL (portrait + caption on image) ---------- */
.hx-team__head { margin:0 0 8vh; padding:0 6vw; display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.hx-team__hint { font-family:"Riforma Mono LL",monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--line); }
.hx-tswiper { padding:0; }
.hx-tswiper .swiper-slide { width:36.1vw; height:auto; }
.hx-person { position:relative; display:block; width:100%; height:auto; aspect-ratio:520/548; overflow:hidden; background:#e7e5df; cursor:pointer; }
/* Expertos de nutrition: sus cajas del PDF son más verticales que las de trainers. */
.hx-team--experts .hx-person { aspect-ratio:520/627; }
.hx-person__img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.6,.2,1); pointer-events:none; }
@media (hover:hover) and (pointer:fine){ .hx-person:hover .hx-person__img { transform:scale(1.05); } }
.hx-person::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.26) 42%, rgba(0,0,0,0) 72%); pointer-events:none; transition:background .5s ease; }
.hx-person.is-open::after { background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.45) 56%, rgba(0,0,0,.06) 92%); }
@media (hover:hover) and (pointer:fine){
  .hx-person:hover::after, .hx-person:focus-within::after { background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.45) 56%, rgba(0,0,0,.06) 92%); }
}
.hx-person__cap { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:22px; color:var(--cream); text-align:left; }
/* Match the class-type card titles ("The Classes") exactly — same weight + size. */
.hx-person__cap .n { display:block; font-size:clamp(26px,3.2vw,44px); font-weight:500; line-height:1; letter-spacing:-.028em; }
.hx-person__cap .r { display:block; font-size:15px; color:#dcd9d2; margin-top:6px; }
/* Bio + CTA reveal — hover on desktop, tap/.is-open on touch (no modal, like the class cards). */
.hx-person__reveal { display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
  transition:max-height .5s cubic-bezier(.2,.6,.2,1), opacity .38s ease, margin-top .5s ease; }
/* Open cap = bio cap + room for the CTA, so it never clips out; a long bio scrolls inside. */
.hx-person.is-open .hx-person__reveal { max-height:calc(min(36vh,330px) + 80px); opacity:1; margin-top:12px; }
@media (hover:hover) and (pointer:fine){
  .hx-person:hover .hx-person__reveal, .hx-person:focus-within .hx-person__reveal { max-height:calc(min(36vh,330px) + 80px); opacity:1; margin-top:12px; }
}
.hx-person__bio { display:block; font-size:13px; line-height:1.5; color:#fff;
  max-height:min(36vh,330px); overflow:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.45) transparent; }
.hx-person__bio::-webkit-scrollbar { width:4px; }
.hx-person__bio::-webkit-scrollbar-thumb { background:rgba(255,255,255,.45); border-radius:2px; }
.hx-person__cta { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:14px; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px; transition:gap .25s ease; }
.hx-person__cta:hover { gap:12px; }

/* ---------- Section wrappers used by carousels / team / two-col text ---------- */
/* Sin aire superior: el bloque anterior (Our Approach) ya aporta su propio padding y
   con los dos parecía que Our Approach respiraba más abajo que arriba. Movement y
   Therapy fijan su padding-top en línea, así que solo afecta a la home. */
.hx-cards { background:var(--paper); padding:0 0 8vh; }
/* Guard: a carousel's off-screen slides must never scroll the page sideways. */
.hx-cards, .hx-team { overflow:hidden; }
/* Mismo tamaño que .hx-h3 ("Trainings and Therapies" en Movement). */
.hx-cards__h { font-size:clamp(20px,2.3vw,30px); line-height:1.14; font-weight:500; letter-spacing:-.018em; color:var(--char); margin:0; }
.hx-team { background:var(--paper); padding:8vh 0 8vh; } /* bloque totalmente simétrico */
/* Match the other section headings (.hx-h3). */
.hx-team__h { font-size:clamp(20px,2.3vw,30px); line-height:1.14; font-weight:500; letter-spacing:-.018em; color:var(--char); margin:0; }
.hx-space__more { background:var(--paper); padding:10vh 6vw; }
.hx-space__more-in { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:.5fr .5fr; gap:8vw; align-items:start; }
.hx-space__more-right { display:flex; flex-direction:column; gap:36px; }
.hx-space__more .lead { font-size:clamp(20px,2.4vw,32px); line-height:1.18; font-weight:500; letter-spacing:-.02em; color:var(--char); margin:0; }
.hx-space__more .sub { font-size:clamp(15px,1.15vw,17px); line-height:1.6; color:var(--muted); margin:0; }

@media (max-width:900px) {
  .hx-space__more-in { grid-template-columns:1fr; gap:26px; }
  .hx-sec { padding:10vh 7vw; }
  .hx-media, .hx-media--rev { grid-template-columns:1fr; gap:26px; }
  .hx-media__body { position:static; top:auto; padding:0 7vw; max-width:none; }
  .hx-media__fig { max-width:none; } /* misma proporción 1:1 también en móvil */
  .hx-hero__inner { padding-bottom:15vh; }
  .hx-manifesto { padding-left:7vw; padding-right:7vw; } /* vertical: módulo base */
  .hx-cta { height:50px; }
}
@media (prefers-reduced-motion:reduce) {
  .hx-mask > * { transform:none; animation:none; }
  .hx-hero__cue::after { animation:none; }
}

/* ============================================================
   RESPONSIVE / TABLET POLISH  (appended — v2 mobile + tablet pass)
   Desktop (≥1281px) is unchanged. Breakpoints introduced here:
   1280 / 1024 / 900(existing) / 834 / 768 / 600 / 430, plus a short-
   viewport (max-height:560) rule for landscape phones.
   Card frames stay a fixed height at every width so rows never desquare;
   long revealed content scrolls inside the frame instead of growing it.
   ============================================================ */

/* Revealed card content never grows the (fixed-height) frame — it scrolls. */
.hx-person__reveal, .hx-slide__reveal { -webkit-overflow-scrolling:touch; }

/* ---- Tablet landscape & below (≤1280) ---- */
@media (max-width:1280px){
  .hx-sec { padding:10vh 5vw; }
  .hx-manifesto { padding-left:5vw; padding-right:5vw; } /* vertical: módulo base */
  .hx-space__more { padding:10vh 5vw; }
  .hx-space__more-in { gap:6vw; }
}

/* ---- Tablet landscape (≤1024, e.g. iPad landscape) ---- */
@media (max-width:1024px){
  .hx-h1 { font-size:clamp(34px,7vw,72px); }
  .hx-sec { padding:11vh 5vw; }
  .hx-space__more-in { grid-template-columns:1fr 1fr; gap:5vw; }
  /* Carousels: slightly narrower slides so a second card always peeks (vw puro). */
  .hx-swiper .swiper-slide { width:52vw; }
  .hx-swiper--sm .swiper-slide { width:45vw; }
  .hx-tswiper .swiper-slide { width:42vw; }
}

/* ---- Tablet portrait (≤834, iPad Air/Pro portrait) ---- */
@media (max-width:834px){
  .hx-swiper .swiper-slide { width:64vw; }
  .hx-swiper--sm .swiper-slide { width:55vw; }
  .hx-tswiper .swiper-slide { width:52vw; }
  .hx-slide__body { padding:32px; }
}

/* ---- 768 portrait tuning (small tablets) ---- */
@media (max-width:768px){
  .hx-space__more-in { grid-template-columns:1fr; gap:24px; }
  .hx-cards { padding:0 0 7vh; }
  .hx-team { padding:7vh 0 7vh; }
  .hx-cards__head, .hx-team__head { margin-bottom:7vh; }
  /* Los bloques space conservan en móvil el MISMO efecto que en desktop; se compacta
     la tipografía del overlay para el marco más bajo. */
  .hx-space__overlay { padding:0 5vw 3vh; }
  .hx-space__h { font-size:clamp(18px,5.6vw,24px); }
  .hx-space__lead { font-size:12px; line-height:1.4; margin-top:6px; }
  .hx-space__p { font-size:11px; line-height:1.45; margin-top:6px; }
  /* Variante tarjeta (home): en vertical el marco panorámico no da altura ni para la
     foto ni para el texto → marco alto (mismo efecto: foto completa → zoom a llenar). */
  .hx-space__stage--card { aspect-ratio:.85; }
  /* Tarjetas de equipo/servicio: el texto largo scrollea DENTRO de la tarjeta y el CTA
     queda siempre visible en una posición estable (no se sale de la imagen). */
  .hx-person__bio { max-height:24vw; }
  .hx-person.is-open .hx-person__reveal { max-height:calc(24vw + 74px); }
}
/* El hover de este tramo va aparte: dentro del @media de ancho seguía aplicando en
   móvil (hover pegado) y el hueco de la bio no se cerraba, así que el título se
   quedaba flotando (06.09.2026). */
@media (max-width:820px) and (hover:hover) and (pointer:fine){
  .hx-person:hover .hx-person__reveal, .hx-person:focus-within .hx-person__reveal { max-height:calc(24vw + 74px); }
}

@media (max-width:820px) and (hover:hover) and (pointer:fine){
  .hm2-card--emma:hover .hm2-card__reveal, .hm2-card--emma:focus-within .hm2-card__reveal { max-height:calc(24vw + 60px); }
}

/* ---- Phones (≤600) ---- */
@media (max-width:600px){
  .hx-sec { padding:8vh 6vw; }
  .hx-sec--tight { padding:6vh 6vw; }
  .hx-manifesto { padding-left:7vw; padding-right:7vw; } /* vertical: módulo base */
  .hx-manifesto__p { font-size:clamp(23px,6.6vw,32px); }
  .hx-manifesto__key { width:36px; margin-bottom:18px; }
  /* Heroes: readable title/sub, comfortable bottom padding, shorter min-height. */
  .hx-hero { min-height:80svh; }
  .hx-hero__title { font-size:clamp(40px,11.5vw,60px); line-height:1.0; }
  .hx-hero__sub { font-size:15px; line-height:1.45; margin-top:16px; max-width:none; }
  .hx-hero__inner { padding:0 6vw 14vh; }
  .hx-hero__foot { min-height:150px; }
  .hx-hero__ctas { margin-top:26px; gap:20px; }
  .hx-hero__ctas .hx-cta { width:100%; justify-content:center; margin:0; }
  /* Full-bleed scene overlay. */
  .hx-space__overlay { padding:0 6vw 12vh; }
  .hx-space__h { font-size:clamp(32px,9vw,52px); max-width:none; }
  .hx-space__lead { font-size:16px; }
  /* Carousel cards. */
  .hx-swiper .swiper-slide { width:86vw; }
  .hx-swiper--sm .swiper-slide { width:84vw; }
  .hx-tswiper .swiper-slide { width:82vw; }
  .hx-slide__body { padding:26px; }
  .hx-slide__title { font-size:clamp(26px,7.4vw,38px); }
  .hx-person__cap { padding:20px; }
  .hx-offer-links a { font-size:clamp(19px,5.6vw,24px); padding:16px 2px; }
  /* CTAs read better stacked full-width on phones. */
  .hx-ctas .hx-cta { width:100%; justify-content:center; }
}

/* ---- Landscape phones / very short viewports ---- */
@media (max-height:560px) and (max-width:900px){
  .hx-hero { min-height:420px; }
  .hx-hero__inner { padding-bottom:8vh; }
  .hx-hero__cue { display:none; }
}

/* ---- Small phones (≤430) ---- */
@media (max-width:430px){
  .hx-hero__title { font-size:clamp(38px,12vw,50px); }
  .hx-slide__body { padding:22px; }
}

/* ---- Overrides finales (2026-08-02): van tras las media queries a propósito ---- */
/* Filas flush: laterales SIEMPRE a cero (los bloques @media de arriba reponen el padding
   lateral de .hx-sec y creaban margen junto a la imagen con zoom/resoluciones bajas). */
.hx-sec--flush { padding-left:0; padding-right:0; }
/* El texto de las filas flush respira arriba/abajo aunque la sección vaya a ras. */
.hx-sec--flush .hx-media__body { padding-top:9vh; padding-bottom:9vh; }
/* Our Approach en móvil: vuelve a una columna (icono + rótulo sobre el texto). */
@media (max-width:768px){
  .hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__inner { grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:0; }
  .hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__key { grid-column:1; grid-row:1; }
  .hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__title { grid-column:1; grid-row:2; margin-bottom:22px; }
  .hx-manifesto:not(.hx-manifesto--tight) .hx-manifesto__p { grid-column:1; grid-row:3; }
}

/* ---------- BLOQUE PARTIDO retrato · imagen (.hm2-*) ---------- */
/* Nacido como team de la home (Emma · The Team); movido aquí 30.08.2026 para
   reutilizarlo en /rotlicht-therapie (Jana & Vojtech · Alpinglow). */
/* Cream ground; two full-bleed images (40% Emma · 60% team), flush to the edges. */
.hm2-team { background:var(--cream); color:var(--char); padding:8vh 0 8vh; } /* = .hx-team */
/* Mismo tamaño de título que "Trainings and Therapies" (.hx-h3). */
.hm2-team__h { font-size:clamp(20px,2.3vw,30px); line-height:1.14; font-weight:500; letter-spacing:-.018em; color:var(--char); margin:0 6vw 8vh; } /* simétrico con el pt */
/* Medidas EXACTAS de una tarjeta del carrusel de trainers (Movement): Emma mide
   36.1vw × (520/548) igual que Alessio — puestas una junto a otra son idénticas —
   y el grupo ocupa el resto hasta el margen derecho (6vw a cada lado, gap 1.25vw). */
.hm2-grid { display:grid; grid-template-columns:36.1vw 1fr; gap:1.25vw; padding:0 6vw; align-items:stretch; }
.hm2-card { position:relative; display:block; width:100%; height:100%; overflow:hidden; background:#1f1f1d; border:0; padding:0; margin:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.hm2-card--emma { aspect-ratio:520/548; height:auto; }
/* Mismos anchos de tarjeta que el carrusel en cada breakpoint. */
@media (max-width:1280px){ .hm2-grid { grid-template-columns:42vw 1fr; } }
@media (max-width:1024px){ .hm2-grid { grid-template-columns:52vw 1fr; } }
.hm2-card__img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
@media (hover:hover) and (pointer:fine){ .hm2-card:hover .hm2-card__img { transform:scale(1.04); } }
/* Frosted-glass veil on hover — same effect as the trainer / class cards, on both cards. */
.hm2-card::before { content:""; position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.18) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(2px) saturate(1); -webkit-backdrop-filter:blur(2px) saturate(1);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1), backdrop-filter .55s cubic-bezier(.2,.6,.2,1), -webkit-backdrop-filter .55s cubic-bezier(.2,.6,.2,1); }
.hm2-card.is-open::before {
  opacity:1; backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); -webkit-backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); }
@media (hover:hover) and (pointer:fine){
  .hm2-card:hover::before, .hm2-card:focus-within::before {
    opacity:1; backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); -webkit-backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); }
}
.hm2-card::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(16,16,14,.82) 0%, rgba(16,16,14,.12) 52%, rgba(16,16,14,0) 100%); }
/* Mismo rótulo y separación que las tarjetas de Our Trainers (.hx-person__cap). */
.hm2-card__cap { position:absolute; z-index:4; left:0; right:0; bottom:0; padding:22px; color:var(--cream); text-align:left; transition:opacity .3s ease; }
.hm2-card__cap .n { display:block; font-size:clamp(26px,3.2vw,44px); font-weight:500; line-height:1; letter-spacing:-.028em; color:var(--cream); }
.hm2-card__cap .r { display:block; font-size:15px; color:#dcd9d2; margin-top:6px; }
.hm2-card:focus-visible { outline:2px solid var(--mauve); outline-offset:-2px; }
/* Emma card: hover (desktop) / tap (.is-open, touch) reveals a short bio + link —
   same model as the trainer cards, no modal. */
.hm2-card__reveal { display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
  transition:max-height .5s cubic-bezier(.2,.6,.2,1), opacity .38s ease, margin-top .5s ease; }
/* El tope abierto reserva sitio para el CTA; la bio larga scrollea dentro (nunca se corta). */
.hm2-card--emma.is-open .hm2-card__reveal { max-height:calc(min(30vh,250px) + 70px); opacity:1; margin-top:12px; }
@media (hover:hover) and (pointer:fine){
  .hm2-card--emma:hover .hm2-card__reveal, .hm2-card--emma:focus-within .hm2-card__reveal { max-height:calc(min(30vh,250px) + 70px); opacity:1; margin-top:12px; }
}
.hm2-card__bio { display:block; font-size:13.5px; line-height:1.5; color:var(--cream); max-width:52ch;
  max-height:min(30vh,250px); overflow:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.45) transparent; }
.hm2-card__bio::-webkit-scrollbar { width:4px; }
.hm2-card__bio::-webkit-scrollbar-thumb { background:rgba(255,255,255,.45); border-radius:2px; }
.hm2-card__cta { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:14px; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:2px; transition:gap .25s ease; }
.hm2-card__cta:hover { gap:12px; }
/* Group card: hover / focus / tap reveals the full roster — mismo glass claro que el
   resto de tarjetas (sheen + blur), con un velo mínimo para que los nombres lean. */
.hm2-roster { position:absolute; inset:0; z-index:3;
  background:linear-gradient(122deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 44%, rgba(255,255,255,.18) 100%), rgba(22,22,20,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(9px) saturate(1.55) brightness(1.06); -webkit-backdrop-filter:blur(9px) saturate(1.55) brightness(1.06);
  opacity:0; pointer-events:none; transition:opacity .35s ease; display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:0 34px;
  padding:34px 40px; margin:0; list-style:none; overflow-y:auto; }
.hm2-card--group.is-open .hm2-roster { opacity:1; pointer-events:auto; z-index:5; }
/* El pie de la tarjeta ("The Team / Behind the Scenes") es absoluto, pegado abajo y
   con z-index por encima de la lista. Abierto quedaba a opacity:0 pero SEGUÍA
   recibiendo los toques: en móvil la tarjeta mide lo que la lista y el pie tapa
   justo la última fila (Valentino y Andres). Al tocarlos, el toque iba al pie, no
   al nombre, y como el pie no es un nombre la tarjeta se plegaba (07.09.2026). */
.hm2-card--group.is-open .hm2-card__cap { opacity:0; pointer-events:none; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s; }
@media (hover:hover) and (pointer:fine){
  .hm2-card--group:hover .hm2-roster, .hm2-card--group:focus-within .hm2-roster, .hm2-card--group:focus .hm2-roster { opacity:1; pointer-events:auto; }
  .hm2-card--group:hover .hm2-card__cap, .hm2-card--group:focus .hm2-card__cap { opacity:0; pointer-events:none; }
}
.hm2-roster li { display:flex; flex-direction:column; gap:1px; padding:6px 0; border-bottom:1px solid rgba(242,241,237,.14); }
.hm2-roster .nm { font-size:13.5px; line-height:1.25; color:var(--cream); }
.hm2-roster .rl { font-size:11.5px; color:rgba(242,241,237,.6); }
/* Mobile: stack the grid but KEEP the roster 2-col so all 13 names fit; it scrolls
   inside the fixed card frame if the viewport is short. Reveal is tap-driven (.is-open). */
/* Retrato flotante (2026-08-17): al pasar por cada NOMBRE del roster aparece un
   bloque gris placeholder que sigue al cursor (solo hover + puntero fino). */
.hm2-roster li:hover .nm { color:#fff; }
.hm2-float { position:fixed; left:0; top:0; z-index:40; pointer-events:none; will-change:transform; display:none; }
@media (hover:hover) and (pointer:fine){ .hm2-float { display:block; } }
.hm2-float__card { display:grid; place-items:center; width:min(17vw,220px); aspect-ratio:3/4; background:#dcdad4;
  opacity:0; transform:scale(.88); transition:opacity .32s ease, transform .5s cubic-bezier(.2,.6,.2,1), background .35s ease; }
.hm2-float.is-on .hm2-float__card { opacity:1; transform:scale(1); }
.hm2-float--alt .hm2-float__card { background:#e7e5df; }
.hm2-float__init { font-size:clamp(26px,2.4vw,40px); font-weight:500; letter-spacing:.02em; color:rgba(43,43,43,.12); user-select:none; }
@media (prefers-reduced-motion:reduce){ .hm2-float { display:none !important; } }
/* Retrato al tocar un nombre del roster. La clase .is-touch la pone el JS solo
   cuando el toque ha sido de verdad táctil, así que estas reglas van SIN media query
   (06.09.2026): dentro de `@media (hover:none),(pointer:coarse)` no llegaban a
   aplicarse en los móviles que declaran hover, y el retrato no salía — es lo que
   pasaba al tocar los últimos nombres de la lista.

   La tarjeta flotante es hermana del bloque (fuera del backdrop-filter del roster,
   que en iOS convertía el fixed en relativo y lo recortaba) y se muestra como un
   fondo a pantalla completa: tocar en cualquier sitio lo cierra. */
/* El retrato NUNCA entra en la animación de aparición por scroll: es fijo y sin
   tamaño, así que el observador lo dejaba en opacity:0 y la foto no salía aunque
   se abriera (07.09.2026). Se blinda aquí por si queda un site.js cacheado. */
.hm2-float.reveal { opacity:1; transform:none; transition:none; }
.hm2-float.is-touch { display:block !important; pointer-events:auto; position:fixed; inset:0;
  transform:none !important; will-change:auto; z-index:90;
  /* Fondo atenuado (07.09.2026): sin él el retrato flotaba sobre la página sin
     que se entendiera que hay algo abierto que se cierra tocando. */
  background:rgba(20,20,18,.62); animation:hm2phBg .28s ease; }
@keyframes hm2phBg { from { background:rgba(20,20,18,0); } }
/* !important: en los aparatos híbridos (portátil táctil, Android con ratón) también
   arranca el retrato que sigue al cursor, y sus animaciones dejaban la tarjeta en
   opacity 0 por encima de esta regla. Al tocar, manda el táctil (07.09.2026). */
.hm2-float.is-touch .hm2-float__card { position:absolute; left:50%; top:50%; width:min(60vw,250px);
  opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; box-shadow:0 18px 50px rgba(0,0,0,.35);
  animation:hm2ph .28s cubic-bezier(.2,.6,.2,1); }
@keyframes hm2ph { from { opacity:0; transform:translate(-50%,-46%) scale(.94); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
/* El retrato inline no se usa: en táctil sale la tarjeta flotante. Se deja el
   elemento en el HTML (lleva la foto ya cargada) pero sin ocupar sitio, y sin
   media query — dentro de `@media (hover:none)` no se aplicaba en los Android que
   declaran hover (06.09.2026). */
.hm2-roster li .ph { display:none; }
@media (max-width:820px) {
  .hm2-team { padding:7vh 0 7vh; } /* = .hx-team móvil */
  .hm2-team__h { margin-bottom:7vh; }
  /* Apiladas en móvil: cada tarjeta a ancho completo del bloque. */
  .hm2-grid { grid-template-columns:1fr; gap:12px; }
  .hm2-card--emma { aspect-ratio:1.2; }
  .hm2-card--group { aspect-ratio:1.55; }
  /* La bio de Emma scrollea en un tope corto y el CTA queda siempre visible. */
  .hm2-card__bio { max-height:24vw; }
  .hm2-card--emma.is-open .hm2-card__reveal { max-height:calc(24vw + 60px); }
  .hm2-card__cap { padding:20px; }
  .hm2-roster { grid-template-columns:1fr 1fr; align-content:start; gap:0 18px; padding:26px 22px; }
  .hm2-roster .nm { font-size:12.5px; }
  .hm2-roster .rl { font-size:11px; }
  /* Abierta (tap), la tarjeta crece con el contenido: el roster pasa a flujo normal y
     los 9 nombres + el retrato desplegado caben SIEMPRE (antes quedaban cortados en el
     marco 1.55 con scroll interno). Cerrada conserva el ratio con la foto de grupo. */
  .hm2-card--group.is-open { aspect-ratio:auto; min-height:calc((100vw - 12vw - 24px) / 1.55); }
  .hm2-card--group.is-open .hm2-roster { position:relative; inset:auto; }
}
  
/* Alpinglow (therapy): la tarjeta ancha derecha reutiliza el reveal de la tarjeta
   Emma (clase --emma en el markup); aquí solo cambia la geometría: llena la
   columna derecha en vez del ratio retrato. */
.hm2-card--alpin { aspect-ratio:auto; height:100%; }
@media (max-width:820px){ .hm2-card--alpin { aspect-ratio:1.55; } }

/* ---- iPad en VERTICAL (31.08.2026, cliente): ajustes solo para tablet portrait ---- */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait) {
  /* Los bloques de texto iluminado bajo el hero tienen demasiado aire: −20% y otro
     −20% más (31.08 bis) = 64% del original. */
  .hx-manifesto { padding-top:6.4vh; padding-bottom:6.4vh; min-height:51vh; min-height:51svh; }
  /* La tarjeta de Alpinglow corta el logo (vive arriba de la foto): anclar arriba. */
  .hm2-card--alpin .hm2-card__img { object-position:center top; }
}
/* iPad Safari deja una franja blanca entre la fila Membership y el bloque The Lab
   (en Chrome el contacto es 0px a cualquier ancho — es un artefacto de render):
   The Lab se solapa 12px hacia arriba y su imagen tapa la costura. */
@media (min-width:768px) and (max-width:1200px){
  .hx-sec--flush + .hx-space { margin-top:-12px; }
}

/* iPad (31.08 bis, cliente): el bloque Meet our team de Red Light a 50/50 — con el
   52vw de tablet la columna de Alpinglow quedaba estrecha y el logo no cabía entero.
   Solo la rejilla que contiene la tarjeta Alpinglow; en móvil sigue a una columna. */
@media (min-width:821px) and (max-width:1100px){
  .hm2-grid:has(.hm2-card--alpin) { grid-template-columns:1fr 1fr; }
}
/* La descripción de Alpinglow aprovecha todo el ancho de la tarjeta (el tope de
   52ch de la bio está pensado para el retrato estrecho). */
.hm2-card--alpin .hm2-card__bio { max-width:none; }