/* ═══════════════════════════════════════════════════════════════
   mobile.css — B4. Todo el estado ≤950px (+ sanidad 951–1024).
   Base: SPEC §8 · RESEARCH r3 §2–4, §8 · r2 (columnas ≤950 / bandas de rem).
   Desviación aprobada: scroll nativo del documento (sin Lenis, sin wrapper fijo).
   Carga la última → gana a core/horizontal/vertical a igual especificidad.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 950px) {

  /* ─────────────────────────────────────────────────────────────
     0. BANDAS DE REM + TOKENS  (r2 §0–1)
     core.css sólo publica ≥1025 y ≤1024; el original re-basa el rem en
     768/576/468/375 para que 1rem llegue siempre a 20px en el tope de banda.
     Sin esto, a 390px 1rem = 7.6px y toda la tipografía colapsa.
     ───────────────────────────────────────────────────────────── */
  @media (max-width: 768px) { html { font-size: 2.6041666667vw; } }
  @media (max-width: 576px) { html { font-size: 3.4722222222vw; } }
  @media (max-width: 468px) { html { font-size: 4.2735042735vw; } }
  @media (max-width: 375px) { html { font-size: 5.3333333333vw; } }

  :root {
    /* geometría ≤950 (= banda ≤1024 de r2) */
    --inset: 1.2rem;
    --inset-card: .75rem;
    --grid-gap: 1rem;
    --pad-section: 4.8rem;
    --ls-display: 0;                 /* .t-title-ls → 0 ≤950 (r2 §3) */
    /* .lh-less se neutraliza ≤950 (r2 §3) */
    --t-supertitulo-lh-less: var(--t-supertitulo-lh);
    --t-titulo-xxl-lh-less: var(--t-titulo-xxl-lh);
    /* columna de la retícula de 4 (r2 §4: ≤950 la retícula es de 4 columnas) */
    --c4: calc((100vw - var(--inset) * 2 - var(--grid-gap) * 3) / 4);
  }

  @media (max-width: 768px) {
    :root {
      /* escala tipográfica ≤768 (r2 §1) — 1rem = 20px @375 */
      --t-subtitulo: .65rem;       --t-subtitulo-lh: .85rem;
      --t-parrafo: .75rem;         --t-parrafo-lh: .95rem;
      --t-parrafo-l: .8rem;        --t-parrafo-l-lh: 1.1rem;
      --t-titulo: 1rem;            --t-titulo-lh: 1.3rem;
      --t-titulo-l: 1.4rem;        --t-titulo-l-lh: 1.7rem;
      --t-titulo-xl: 1.75rem;      --t-titulo-xl-lh: 2rem;
      --t-titulo-xxl: 1.75rem;     --t-titulo-xxl-lh: 1.75rem;
      --t-supertitulo: 2.2rem;     --t-supertitulo-lh: 2.2rem;
      --t-supertitulo-l: 3rem;     --t-supertitulo-l-lh: 2.7rem;
      --t-supertitulo-xl: 3rem;    --t-supertitulo-xl-lh: 2.7rem;
      --t-supertitulo-lh-less: 2.2rem;
      --t-titulo-xxl-lh-less: 1.75rem;
      /* espaciado ≤768 */
      --inset: .75rem;
      --grid-gap: .75rem;
      --pad-section: 4rem;
    }
  }

  /* ─────────────────────────────────────────────────────────────
     1. BASE MÓVIL
     ───────────────────────────────────────────────────────────── */
  html, body { overflow-x: hidden; }
  body { overscroll-behavior-y: none; }

  /* seam-filler shadow is only needed while the strip is horizontal (r2 §2) */
  .bg-white, .bg-black, .bg-beige, .bg-blue, .bg-red, .bg-grey, .bg-ink { box-shadow: none !important; }

  /* sin cursor propio en táctil (r3 §3, "lo que móvil descarta") */
  #mouse { display: none !important; }

  /* etiquetas laterales rotadas: pasan a flujo (o se ocultan) según panel */
  .side-label { position: static; transform: none; }

  /* ─────────────────────────────────────────────────────────────
     2. LA FRANJA DEJA DE SER HORIZONTAL (r3 §3: 10 paneles → 1 columna)
     ───────────────────────────────────────────────────────────── */
  main { height: auto !important; }
  .hscroll {
    display: block;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }
  .hscroll .strip {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .hscroll .panel {
    position: relative;
    width: 100% !important;
    max-width: 100vw;
    height: auto !important;
    flex: none !important;
  }

  /* flipMedia: dos capas apiladas al tamaño de la figura (sin barrido en móvil) */
  .hscroll .flip-media { position: relative; overflow: hidden; }
  .hscroll .flip-media__layer {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .hscroll .flip-media__layer.is-up { z-index: 2; }
  .hscroll .flip-media__layer.is-down { z-index: 1; }

  /* ── P1 · intro ─────────────────────────────────────────────── */
  .panel--intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100svh;
    padding: calc(var(--inset) * 5) var(--inset) var(--inset);
    gap: 1.1rem;
  }
  .panel--intro .side-label { display: none; }          /* __section oculto ≤950 (r2 §6.1) */
  .panel--intro .intro__menu { display: none; }         /* raíl rotado oculto ≤950 */
  /* ≤950: the divided logo stacks in flow — key + FIRM, then LUXURY REALTY */
  .panel--intro .intro__logo {
    position: static;
    width: auto; height: auto;
    margin-bottom: auto;
    opacity: 1;
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  }
  .panel--intro .intro__logo-main { position: static; font-size: 1.8rem; }
  .panel--intro .intro__logo-key { width: 6.2rem; margin-bottom: .3rem; }
  .panel--intro .intro__logo-lockup { position: static; font-size: .95rem; letter-spacing: .32em; }
  .panel--intro .intro__logo-lockup::before { width: 2rem; margin-right: .6rem; }
  .panel--intro .intro__titles {
    display: block;
    width: 100%;
    font-size: var(--t-titulo-xxl);
    line-height: var(--t-titulo-xxl-lh);
  }
  .panel--intro .intro__t { display: block; white-space: nowrap; }
  .panel--intro .intro__t--2 { margin-left: 42%; }      /* sangrado alterno (r3 §3, m-00) */
  .panel--intro .intro__text {
    max-width: 100%;
    width: 100%;
    margin-right: 0;
    font-size: var(--t-parrafo);
    line-height: var(--t-parrafo-lh);
  }
  .panel--intro .intro__copyright {
    position: static;
    margin-top: .6rem;
    font-size: var(--t-subtitulo);
    line-height: var(--t-subtitulo-lh);
    text-transform: uppercase;
  }

  /* ── P2/P6 · paneles de imagen (a sangre) ───────────────────── */
  .panel--images { padding: 0 0 4.25rem; overflow: clip; }
  .panel--images.is-secundario { padding-bottom: 5rem; }
  .panel--images .flip-media {
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 281;                            /* r2 §6.2 ≤950 */
    transform: none !important;
  }

  /* ── P3 · declaración ───────────────────────────────────────── */
  .panel--statement { padding: 2.4rem var(--inset); }
  .panel--statement .side-label {
    display: block;
    text-align: center;
    margin-bottom: 1.35rem;                             /* r2 §6.3 ≤950 */
  }
  .statement__title {
    font-family: var(--f-regular);
    font-size: var(--t-supertitulo);
    line-height: var(--t-supertitulo-lh);
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 3rem;                                /* r2 §6.3 ≤950 */
  }
  .statement__line { display: block; width: 100%; }
  .statement__shift { display: inline-block; transform: none !important; }
  .statement__text { width: 100%; margin-bottom: 2.4rem; }

  /* ── P4 · panel negro ───────────────────────────────────────── */
  .panel--dark {
    display: flex;
    flex-direction: column;
    padding: 2.4rem var(--inset);
  }
  .panel--dark .dark__media-a {
    order: 1;
    width: calc(var(--c4) * 3 + var(--grid-gap) * 2);
    aspect-ratio: 944 / 756;
    margin: 0;
    z-index: 3;
  }
  .panel--dark .dark__media-b {
    order: 2;
    align-self: flex-end;
    width: calc(var(--c4) * 2 + var(--grid-gap));
    aspect-ratio: 441 / 451;
    margin: -3rem 0 0;                                  /* solape de 3rem ≤950 (r2 §6.4) */
    z-index: 2;
  }
  .panel--dark .dark__text {
    order: 3;
    width: 99%;
    padding: 2.4rem 0 0;
    font-family: var(--f-regular);
    font-size: var(--t-titulo-xl);
    line-height: var(--t-titulo-xl-lh);
  }

  /* ── P5 · banda VALORES → marquesina horizontal (r2 §6.5 ≤950) ── */
  .panel--band {
    width: 100%;
    height: 1.5em !important;
    overflow: hidden;
    font-size: var(--t-supertitulo-l);
    display: flex; align-items: center;
  }
  .band__content {
    position: relative;
    top: auto; left: auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: max-content;
    gap: 1rem;
    font-size: 3.7rem;
    line-height: 1;
    transform: none !important;
    transform-origin: unset;
    animation: b4-marquee 14s linear infinite;
  }
  .band__group { display: flex; align-items: center; gap: 1rem; }
  .band__word { font-family: var(--f-regular); white-space: nowrap; text-transform: uppercase; }
  .band__star { display: block; width: .75em; height: .75em; flex: none; }
  .band__star svg { display: block; width: 100%; height: 100%; }
  @keyframes b4-marquee { to { transform: translateX(calc(-100% / 3)); } }

  /* ── P7 · términos: lista 01/02/03, sin imágenes de hover ───── */
  .panel--terms {
    display: flex;
    flex-direction: column;
    padding: 4rem 0;                                    /* r2 §6.6 ≤950 */
    gap: 2.75rem;
    overflow: hidden;
  }
  .panel--terms .term {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .35em;
    align-items: start;
    width: 100%;
    padding: 0 var(--inset);
  }
  .term__num {
    grid-column: 1; grid-row: 1;
    font-family: var(--f-edit);
    font-size: var(--t-parrafo);
    line-height: var(--t-parrafo-lh);
  }
  .term__title {
    grid-column: 2; grid-row: 1;
    position: relative;
    mix-blend-mode: normal;
    font-size: var(--t-supertitulo-l);
    line-height: .85;
    text-transform: uppercase;
    overflow-wrap: break-word;
    hyphens: auto;
    margin-bottom: 1.1rem;                              /* r2 §6.6 ≤950 */
  }
  .term__filter { display: none; }                      /* la capa invert sólo sirve al hover-media */
  .term__color { position: static; display: inline; color: inherit; filter: none; }
  .term__single {
    grid-column: 1 / -1; grid-row: 2;
    width: calc(100% - 2rem);
    min-width: unset;
    margin: 0 0 0 1rem;                                 /* r2 §6.6 ≤950 */
    font-size: var(--t-parrafo);
    line-height: var(--t-parrafo-lh);
  }
  .follow-mouse { display: none !important; }           /* r3 §3: el hover-media desaparece */

  /* ── P8 · proyectos: tarjetas verticales a sangre ───────────── */
  .panel--projects { display: block; }
  .projects__wrap-text {
    display: block;
    width: 100%;
    height: auto;
    padding: 3rem var(--inset);
    text-align: center;
    background: var(--white);
  }
  .projects__wrap-text .side-label { display: block; margin-bottom: .9rem; }
  .projects__intro {
    font-family: var(--f-edit);
    font-size: var(--t-titulo-l);
    line-height: var(--t-titulo-l-lh);
  }

  .proj {
    position: relative;
    display: block;
    width: 100% !important;
    overflow: hidden;
    box-shadow: none !important;
  }
  .proj__media {
    position: relative;
    width: 100%;
    height: 62svh;                                      /* r2 §6.7 ≤950 */
    overflow: hidden;
  }
  .proj__media img {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 150%;                                       /* holgura para el paneo de entrada */
    object-fit: cover;
    will-change: transform;
  }
  .proj__data {
    position: relative;
    height: 38svh;                                      /* 62 + 38 = 100svh (r2 §6.7) */
    display: grid;
    place-items: center;
    padding: var(--inset-card);
  }
  .proj__year, .proj__place, .proj__num, .proj__btn { position: absolute; overflow: hidden; }
  .proj__year > span, .proj__place > span { display: block; }
  .proj__year {
    top: var(--inset-card); left: var(--inset-card);
    font-family: var(--f-edit);
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
  }
  .proj__place {
    top: var(--inset-card); right: var(--inset-card);
    font-family: var(--f-izmir);
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
  }
  .proj__num {
    bottom: var(--inset-card); left: var(--inset-card);
    font-family: var(--f-izmir);
    font-size: var(--t-parrafo); line-height: var(--t-parrafo-lh);
  }
  .proj__name {
    width: 100%;
    padding: 0 var(--inset-card);
    font-size: var(--t-titulo-xxl);
    line-height: var(--t-titulo-xxl-lh);
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }
  .proj__btn {
    bottom: var(--inset-card); right: var(--inset-card);
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
    font-family: var(--f-edit);
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
    padding: .35rem 1rem;
  }
  .proj.bg-grey { color: var(--white); }
  /* disabled "Coming soon" pills (cards 4 & 5) — keep currentColor so the
     span reads black-on-champagne and white-on-grey, just dimmed */
  .proj__btn.is-disabled { opacity: .7; pointer-events: none; }

  /* cola del último proyecto: 2 fotos apiladas + bloque "Ver todas" */
  .proj--last { overflow: hidden; }
  .proj__mini {
    position: relative;
    display: block;
    width: 100%;
    transform: none !important;
  }
  .proj__mini figure {
    display: block;
    width: 100%;
    height: 40svh;                                      /* r2 §6.8 ≤950 */
    overflow: hidden;
  }
  .proj__seeall {
    display: grid;
    place-items: center;
    width: 100%;
    height: 20svh;                                      /* r2 §6.8 ≤950 */
    border-radius: 0;
    font-family: var(--f-edit);
    font-size: var(--t-titulo-l); line-height: var(--t-titulo-l-lh);
    color: var(--black);
  }

  /* ── P9 · espaciador del pin: no existe en vertical (r2 §6.9) ── */
  .panel--pin { display: none !important; }

  /* ── P10 · cierre (near-black ink) ──────────────────────────── */
  .panel--cierre {
    display: grid;
    place-items: center;
    min-height: 90svh;
    padding: 2.4rem 0;
    overflow: hidden;
  }
  .cierre__content {
    position: relative;
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    transform: none !important;
  }
  .cierre__content > * { transform: none !important; }
  .cierre__media {
    width: calc(100% - var(--inset) * 3);               /* r2 §6.10 ≤950 */
    max-width: none;
    aspect-ratio: 1226 / 689;
  }

  /* narrow-band spot fixes — English display lines whose glyph run exceeds
     the ≤375 band at the token size ("TO A QUIET KNOCK" ≈ 8.9em,
     "DISCRETION" ≈ 6.2em); sizes hold down to 320px.
     (chapter/team titles get theirs after their tail rules, same reason) */
  @media (max-width: 375px) {
    .statement__title { font-size: 1.85rem; line-height: 2rem; }
    .term__title { font-size: 2.35rem; }
  }

  /* ─────────────────────────────────────────────────────────────
     3. COLA VERTICAL (r3 §3: capítulo → doble media → líneas →
        columnas → centro → footer)
     ───────────────────────────────────────────────────────────── */

  .v-media-double {
    display: flex;
    align-items: flex-start;
    gap: var(--grid-gap);
    padding: 0 var(--inset);
  }
  .v-media-double .vmd__img--a {
    width: calc(var(--c4) * 2.35 + var(--grid-gap) * 1.35);
    aspect-ratio: 1152 / 2048;
    height: auto;
  }
  .v-media-double .vmd__img--b {
    flex: 1;
    width: auto;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-top: 3rem;                                   /* vertical offset (r3 §3) */
  }
  /* caption for the duo photo: the figure is overflow-hidden with a 115%
     overscan img, so "under the figure" becomes a scrim strip at its base */
  .vmd__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: .5rem .6rem;
    font-family: var(--f-edit-italic);
    font-style: italic;
    font-size: var(--t-subtitulo);
    line-height: var(--t-subtitulo-lh);
    color: var(--white);
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
  }

  /* ── header ≤950: search pill row 1 left, menu pill row 2 left,
        emblem + language switch stacked top-right ─────────────── */
  .search-btn { font-size: .78rem; padding: .4rem .95rem; }
  .menu-btn { left: var(--inset); top: calc(var(--inset) + 2.55rem); }
  .site-emblem { width: 4.6rem; }
  .lang-switch { padding: .28rem .65rem; gap: .4rem; }
  .lang-switch__btn { font-size: .66rem; }
  .chrome-solid { gap: .4rem; }

  /* ── concierge form ≤950 ────────────────────────────────────── */
  .v-concierge { padding: var(--pad-section) var(--inset) 4.5rem; }
  .v-concierge__form { max-width: 100%; gap: 1.1rem; }
  .v-concierge__row { gap: 1rem; }
  .v-concierge__field--zip { flex: 0 0 7.2rem !important; }
  .v-concierge__actions { flex-direction: column; align-items: flex-start; gap: .9rem; }

  /* ── landing v-hero · emblem-first opening ──────────────────── */
  .v-hero {
    min-height: 100svh;
    gap: 1.5rem;
  }
  .v-hero__key { width: 52vw; max-width: 12rem; }
  .v-hero__word { font-size: 2.6rem; margin-top: .3rem; }
  .v-hero__word-sub { font-size: .88rem; letter-spacing: .3em; }
  .v-hero__word-sub::before { width: 1.9rem; margin-right: .6rem; }
  .v-hero__word-sub::after { width: 1.9rem; margin-left: calc(.6rem + .3em); }
  .v-hero__tag  { letter-spacing: .3em; }
  .v-hero__ctas { flex-direction: column; gap: 1.1rem; }

  /* ── #team · broker feature + roster, fully stacked ─────────── */
  .v-team {
    padding: var(--pad-section) var(--inset) 2.5rem;
    text-align: left;
  }
  .v-team__pretitle {
    text-align: center;
    font-family: var(--f-edit);
    font-size: var(--t-titulo); line-height: var(--t-titulo-lh);
    margin-bottom: 1.5rem;                                }
  .v-team__title {
    font-family: var(--f-regular);
    font-size: var(--t-supertitulo-xl);
    line-height: var(--t-supertitulo-xl-lh);
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: left;
    hyphens: auto;
    margin-bottom: 2.4rem;
  }
  .v-team__title .v-line { display: block; }
  .v-team__broker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 2.4rem;
  }
  .v-team__portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    margin: 0;
    overflow: hidden;
  }
  /* 115% / -7.5% overscan kept so the vertical.js parallax never shows an edge */
  .v-team__portrait img {
    position: absolute;
    left: 0; top: -7.5%;
    width: 100%; height: 115%;
    object-fit: cover;
    will-change: transform;
  }
  .v-team__broker-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }
  .v-team__logo { width: 4.5rem; height: auto; mix-blend-mode: multiply; }
  .v-team__broker-name {
    font-family: var(--f-medium); font-weight: 500;
    font-size: var(--t-titulo-l); line-height: var(--t-titulo-l-lh);
  }
  .v-team__broker-role {
    font-family: var(--f-edit);
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
  }
  .v-team__broker-blurb { font-size: var(--t-parrafo); line-height: var(--t-parrafo-lh); }
  .v-team__broker-info .pill { margin-top: .5rem; }
  .v-team__band {
    position: relative;
    width: calc(100% + var(--inset) * 2);               /* full-bleed past the inset */
    margin: 0 0 2.4rem calc(var(--inset) * -1);
    height: auto;                                       /* full photo, no face crop (matches desktop) */
    overflow: hidden;
  }
  .v-team__band img {
    position: static;
    width: 100%; height: auto;
    object-fit: cover;
  }
  .v-team__note {
    font-family: var(--f-edit-italic);
    font-style: italic;
    font-size: var(--t-parrafo); line-height: var(--t-parrafo-lh);
    margin-bottom: 1.2rem;
  }
  .v-team__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
  }
  .v-team__agent {
    padding: 1.2rem .75rem;                             /* tighter than desktop */
    text-align: center;
  }
  .v-team__agent-name {
    font-family: var(--f-medium); font-weight: 500;
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
  }
  .v-team__agent-role {
    font-family: var(--f-edit);
    font-size: var(--t-parrafo); line-height: var(--t-parrafo-lh);
  }
  /* ≤375 spot fix: "THE WOMEN" ≈ 6em overflows the band at supertitulo-xl */
  @media (max-width: 375px) {
  }

  .v-lines { padding: 2.5rem var(--inset); }
  .v-lines__title {
    font-family: var(--f-regular);
    font-size: var(--t-supertitulo);
    line-height: var(--t-supertitulo-lh);
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .v-lines__line { display: block; width: 100% !important; align-self: flex-start; }
  .v-lines__line.t-right { text-align: left; }          /* ≤950 all lines rag-left (m-14) */

  /* ── #search · IDX embed, full width of the padded column ───── */
  .v-search { padding: 2.5rem var(--inset) var(--pad-section); }
  .v-search__pretitle {
    text-align: center;
    font-family: var(--f-edit);
    font-size: var(--t-titulo); line-height: var(--t-titulo-lh);
    margin-bottom: 1.5rem;
  }
  .v-search__title {
    font-family: var(--f-regular);
    font-size: var(--t-supertitulo);
    line-height: var(--t-supertitulo-lh);
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 1.2rem;                              /* wraps to 2 lines ≤375 — fine */
  }
  .v-search__copy {
    width: 100%;
    max-width: none;
    font-size: var(--t-parrafo); line-height: var(--t-parrafo-lh);
    margin-bottom: 1.6rem;
  }
  .v-search .idx-embed {
    width: 100%;
    height: 75svh;                                      /* fixed: no shift when the iframe lands */
  }
  .idx-embed__placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.2rem;                             /* pill never touches the frame */
    text-align: center;
  }
  .idx-embed__headline {
    font-family: var(--f-regular);
    font-size: var(--t-titulo-l); line-height: var(--t-titulo-l-lh);
  }
  .idx-embed__sub { font-size: var(--t-parrafo); line-height: var(--t-parrafo-lh); }

  .v-cols {
    display: block;
    padding: 2.5rem var(--inset);
  }
  .v-cols__left { display: none; }
  .v-cols__right {
    width: 100%;
    font-size: var(--t-titulo);
    line-height: var(--t-titulo-lh);
  }
  .v-cols__right a { text-decoration: underline; text-underline-offset: .15em; }

  .v-center {
    display: grid;
    place-items: center;
    padding: 1.5rem var(--inset) 3rem;
  }
  .pill--xl {
    font-size: var(--t-titulo);
    line-height: var(--t-titulo-lh);
    padding: .85rem 2.2rem;
    border-radius: 3rem;
  }

  /* ── footer ─────────────────────────────────────────────────── */
  .v-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--inset) var(--inset) 0;
    overflow: hidden;
  }
  .v-footer__links {
    order: 1;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;                                             /* r2 §7 footer ≤950 */
    text-align: right;
    font-family: var(--f-medium);
    font-weight: 500;
    font-size: var(--t-titulo-l);
    line-height: var(--t-titulo-l-lh);
    text-transform: uppercase;
  }
  .v-footer__bg {
    order: 2;
    position: relative !important;
    inset: auto !important;
    width: 100vw;
    margin-left: calc(var(--inset) * -1);
    height: 32svh;
    overflow: hidden;
    pointer-events: none;
  }
  .v-footer__bg svg { display: block; width: 100%; height: 100%; }  /* whole FL visible */
  /* Cinzel "FL" retuned for the mobile crop box. Values are svg USER UNITS
     (not viewport px): the 145%-wide svg always exposes ~959 of the 1390-unit
     viewBox width, so the composition is stable across every rem band.
     With markup x=-40 y=900 → baseline 970, cap-top ≈ -80: both stems run the
     full 32svh window, F bleeds top-left, the L foot runs off the right. */
  .v-footer__bg-text {
    font-family: var(--f-brand, "Cinzel", serif);
    font-weight: 600;
    font-size: 620px;
    letter-spacing: -0.02em;
    transform: translate(-20px, -346px);   /* same composition as desktop */
  }
  .v-footer__card {
    order: 3;
    position: static;
    width: 84vw;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .v-footer__card-year {
    font-family: var(--f-edit);
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
    margin-bottom: 1.2rem;
  }
  .v-footer__card-img {
    width: 100%;
    aspect-ratio: 450 / 253;
    margin-bottom: 1.2rem;
  }
  .v-footer__card-name {
    font-family: var(--f-medium);
    font-weight: 500;
    font-size: var(--t-titulo-l); line-height: var(--t-titulo-l-lh);
    margin-bottom: .4rem;
  }
  .v-footer__card-text {
    font-family: var(--f-edit);
    font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
  }
  .v-footer__footer {
    order: 4;
    position: relative;
    display: block;
    text-align: center;
  }
  .v-footer__copyright {
    display: block;
    width: 100%;                       /* long EHO line: wraps to 2 centered lines ≤576 */
    margin: 0 auto 1rem;
    text-align: center;
    line-height: 1.3;
    font-size: var(--t-parrafo);
    text-transform: uppercase;
  }
  .v-footer__legal {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    margin-bottom: 3.75rem;                             /* r2 §7 footer ≤950 */
    font-size: var(--t-parrafo);
    text-transform: uppercase;
  }

  /* ─────────────────────────────────────────────────────────────
     4. CHROME (r2 §5, columna ≤950)
     ───────────────────────────────────────────────────────────── */
  .chrome { padding: var(--inset); }
  .logo, .logo[data-state="hero"], .logo[data-state="compact"] { font-size: var(--t-titulo-xxl); }
  .menu-btn { width: 3.5rem; }
  .menu-btn__label { min-width: 2rem; text-align: center; }
  .loader__percent { bottom: 6vw; right: 6vw; }         /* r2 §5 ≤950 */

  /* ─────────────────────────────────────────────────────────────
     5. MENÚ OVERLAY — texto primero, media después (r3 §4)
     ───────────────────────────────────────────────────────────── */
  .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 13vh var(--inset) var(--inset);            /* r2 §5 ≤950 (inverted) */
    overflow-y: auto;                                   /* 5 nav rows: short screens scroll */
    overscroll-behavior: contain;
  }
  .menu__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: calc(1.05rem - var(--inset));
  }
  .menu__projects {
    order: 1;
    width: 100%;
    padding-right: 0;
    margin-bottom: .75rem;                              /* tightened: 5th nav row below */
  }
  .menu__projects-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    font-family: var(--f-izmir);
    font-size: var(--t-titulo);
    text-transform: uppercase;
    margin-bottom: .6rem;
  }
  .menu__seeall {
    font-size: var(--t-parrafo);
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .menu__list { list-style: none; display: flex; flex-direction: column; gap: 0; }
  .menu__list li a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    font-family: var(--f-regular);
    font-size: var(--t-titulo-l);
    line-height: 1.25;
    text-transform: uppercase;
  }
  .menu__list li a i {
    font-family: var(--f-edit);
    font-size: var(--t-parrafo-l);
    margin-right: .35em;
  }
  .menu__list li a em {
    font-family: var(--f-edit-italic);
    font-style: italic;
    font-size: var(--t-parrafo-l);
    text-transform: none;
    white-space: nowrap;
  }
  .menu__media {
    order: 2;
    position: relative;
    width: 100%;
    height: calc(var(--c4) * 1.6 + var(--grid-gap));    /* shorter card: makes room for 5 nav rows */
    max-height: none;
    overflow: hidden;
  }
  .menu__media img { width: 100%; height: 100%; object-fit: cover; }
  .menu__media-title {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--white);
    mix-blend-mode: difference;
    font-family: var(--f-medium); font-weight: 500;
    font-size: var(--t-titulo-xl);
    text-transform: uppercase;
  }
  .menu__nav {
    position: relative;
    order: 2;
    flex: 1;
    margin-top: .6rem;                                  /* tightened: 5th nav row */
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--f-izmir);
    font-size: var(--t-titulo-l);
    line-height: 1.15;
    text-transform: uppercase;
  }
  .menu__mail {
    position: static;
    order: 3;
    font-family: var(--f-edit);
    font-size: var(--t-titulo);
  }

  /* ─────────────────────────────────────────────────────────────
     6. CONTACT MODAL — full-width sheet of direct broker actions (r3 §5)
     ───────────────────────────────────────────────────────────── */
  .modal-contact__bg { background: rgba(0, 0, 0, .75); }
  .modal-contact__panel {
    position: fixed;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    width: 100%;
    max-width: 100%;
    max-height: 86svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;                                /* 16.67px @375 */
    padding: 2.25rem .75rem;                            /* 37.5 / 12.5 px @375 */
    background: var(--white);
  }
  .modal-contact__close { position: absolute; top: 1rem; right: .9rem; font-size: var(--t-parrafo); }
  .modal-contact__pretitle {
    text-align: center;
    font-family: var(--f-edit);
    font-size: var(--t-titulo);
    margin-bottom: .4rem;
  }
  .modal-contact__title {
    text-align: center;
    font-family: var(--f-regular);
    font-size: var(--t-titulo-xl);
    line-height: var(--t-titulo-xl-lh);
    text-transform: uppercase;
    margin-bottom: 1.6rem;
  }
  /* the form is gone — the sheet holds logo · title · 3 action rows · note */
  .modal-contact__logo {
    display: block;
    width: 7rem;
    height: auto;
    margin: 0 auto .9rem;
    mix-blend-mode: multiply;                           /* grey-gradient png on the white sheet */
  }
  .modal-contact__actions {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
  }
  .modal-contact__actions li { border-top: 1px solid var(--red); }        /* gold hairlines */
  .modal-contact__actions li:last-child { border-bottom: 1px solid var(--red); }
  .modal-contact__actions a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .8rem 0;
    font-size: var(--t-parrafo-l);
    line-height: var(--t-parrafo-l-lh);
    text-align: right;
  }
  .modal-contact__actions a span {
    flex: none;
    font-family: var(--f-edit);
    font-size: var(--t-parrafo);
    line-height: var(--t-parrafo-lh);
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
  }
  .modal-contact__note {
    font-family: var(--f-edit-italic);
    font-style: italic;
    font-size: var(--t-parrafo);
    line-height: var(--t-parrafo-lh);
    text-align: center;
  }

  /* ─────────────────────────────────────────────────────────────
     7. HOVER = 0 EN TÁCTIL (r3 §2; rollovers.js: toda duración → 0)
     ───────────────────────────────────────────────────────────── */
  .link, .pill, .menu-btn { transition-duration: 0s !important; }

  /* movimiento reducido */
  @media (prefers-reduced-motion: reduce) {
    .band__content { animation: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════
   951–1024 — tipografía móvil sobre maquetación de escritorio.
   La franja horizontal sigue activa aquí: sólo se ajustan piezas
   dimensionadas en em que se desbordarían (r2 §5, §6.6, §10).
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 951px) and (max-width: 1024px) {
  .logo, .logo[data-state="hero"] { font-size: 2rem; }
  .logo[data-state="compact"] { font-size: 1.5rem; }
  .menu-btn { width: 4rem; }
  .menu-btn__label { min-width: 2rem; }
  .follow-mouse { width: 11em; }                        /* 18em → 11em ≤1024 (r2 §6.6) */
  .term__title { hyphens: auto; overflow-wrap: break-word; }
}