/* ═══════════════════════════════════════════════════════════════
   core.css — B1 owns this file.
   SEED (main agent): tokens, base, utilities — real values from RESEARCH.
   B1: extend below with chrome/loader/menu/modal/cursor/pills/rollovers.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fluid root: 1rem = 15px @1440 (px→rem: divide R4 px by 15) ── */
html { font-size: 1.0416667vw; }

:root {
  /* palette — FIRM LUXURY REALTY remap (var NAMES kept so consumers don't change) */
  --white: #FFFFFF;
  --black: #000000;
  --beige: #EBE3D6;   /* champagne — warm light panels */
  --blue:  #D9D9DE;   /* platinum — menu overlay, cool light surfaces */
  --red:   #C6A24B;   /* gold — text/pills/rules/small accents ONLY, never a large surface */
  --grey:  #6E675C;   /* warm grey — mid surfaces */
  --ink:   #191511;   /* near-black — cierre panel */

  /* families (free stand-ins, SPEC §0) */
  /* TWO FONTS ONLY (client rule 2026-07-31): Fraunces carries every serif
     role, Archivo carries the sans. The old Bodoni/Cinzel vars stay as
     names so no component changes — they all resolve to Fraunces now. */
  --f-izmir:       "Archivo", system-ui, sans-serif;          /* geometric sans */
  --f-regular:     "Fraunces", Georgia, serif;                 /* high-contrast serif (300) */
  --f-medium:      "Fraunces", Georgia, serif;                 /* (use weight 500) */
  --f-edit:        "Fraunces", Georgia, serif;                 /* was Bodoni Moda */
  --f-edit-reg:    "Fraunces", Georgia, serif;                 /* (use weight 500) */
  --f-edit-italic: "Fraunces", Georgia, serif;                 /* italic */
  --f-brand:       "Fraunces", Georgia, serif;                 /* was Cinzel (use 600) */

  /* type scale @1440 in rem (px/15) — r4 §0 */
  --t-subtitulo: .7rem;        --t-subtitulo-lh: .9rem;
  --t-parrafo: .85rem;         --t-parrafo-lh: 1.15rem;
  --t-parrafo-l: 1rem;         --t-parrafo-l-lh: 1.4rem;
  --t-titulo: 1.65rem;         --t-titulo-lh: 2.2rem;
  --t-titulo-l: 2.25rem;       --t-titulo-l-lh: 2.7rem;
  --t-titulo-xl: 3rem;         --t-titulo-xl-lh: 3.5rem;
  --t-titulo-xxl: 3.5rem;      --t-titulo-xxl-lh: 3.5rem;   --t-titulo-xxl-lh-less: 2.8rem;
  --t-supertitulo: 6.5rem;     --t-supertitulo-lh: 6.5rem;  --t-supertitulo-lh-less: 5.85rem;
  --t-supertitulo-l: 9.5rem;   --t-supertitulo-l-lh: 8.075rem;
  --t-supertitulo-xl: 12rem;   --t-supertitulo-xl-lh: 10.5rem;

  /* geometry */
  --inset: 1.65rem;        /* 24.75px page inset */
  --inset-card: 1.25rem;   /* 18.75px card inset */
  --pad-section: 9rem;     /* 135px */
  --grid-gap: 1.5rem;      /* 22.5px */
  --ls-display: -0.0826rem; /* −1.24px display tracking */

  --ease: cubic-bezier(.65, .05, 0, 1);
}

/* type breakpoint (r2 §0): tokens halve, root re-bases — px output continuous */
@media (max-width: 1024px) {
  html { font-size: 1.953125vw; }
  :root {
    --t-subtitulo: .5rem;      --t-subtitulo-lh: .65rem;
    --t-parrafo: .65rem;       --t-parrafo-lh: .85rem;
    --t-parrafo-l: .75rem;     --t-parrafo-l-lh: 1.05rem;
    --t-titulo: 1.1rem;        --t-titulo-lh: 1.45rem;
    --t-titulo-l: 1.6rem;      --t-titulo-l-lh: 1.9rem;
    --t-titulo-xl: 2rem;       --t-titulo-xl-lh: 2.35rem;
    --t-titulo-xxl: 2.2rem;    --t-titulo-xxl-lh: 2.2rem;  --t-titulo-xxl-lh-less: 1.8rem;
    --t-supertitulo: 3.3rem;   --t-supertitulo-lh: 3.3rem; --t-supertitulo-lh-less: 3rem;
    --t-supertitulo-l: 5.8rem; --t-supertitulo-l-lh: 4.95rem;
    --t-supertitulo-xl: 6.65rem; --t-supertitulo-xl-lh: 5.8rem;
  }
}

/* ── base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--f-izmir);
  font-weight: 400;
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
sup { font-size: .55em; }
i { font-style: normal; }

/* hide everything while loading (B1 reveals) */
body.is-loading main { opacity: 0; }

/* ── colour utilities (seam-filler shadow per r2; dropped ≤950 by B4) ── */
.bg-white { background: var(--white); box-shadow: 0 -1px 0 var(--white); }
.bg-black { background: var(--black); color: var(--white); box-shadow: 0 -1px 0 var(--black); }
.bg-beige { background: var(--beige); box-shadow: 0 -1px 0 var(--beige); }
.bg-blue  { background: var(--blue);  box-shadow: 0 -1px 0 var(--blue); }
.bg-red   { background: var(--red);   box-shadow: 0 -1px 0 var(--red); }
.bg-grey  { background: var(--grey);  box-shadow: 0 -1px 0 var(--grey); }
.bg-ink   { background: var(--ink);   color: var(--white); box-shadow: 0 -1px 0 #191511; }

/* ── family utilities (mixed-lockup pattern, r4 §7.9) ── */
.f-izmir   { font-family: var(--f-izmir); font-weight: 400; }
.f-regular { font-family: var(--f-regular); font-weight: 300; }
.f-medium  { font-family: var(--f-medium); font-weight: 500; }
.f-edit    { font-family: var(--f-edit); font-weight: 400; }
.f-edit-reg{ font-family: var(--f-edit-reg); font-weight: 500; }

/* ── shared atoms ── */
.t-left  { text-align: left; }
.t-right { text-align: right; }
.clip-y  { overflow: hidden; }

.side-label {
  position: absolute; left: var(--inset); top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-edit); font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
}
.side-label em { font-style: italic; font-family: var(--f-edit-italic); }

/* split helpers (spans generated by APP.splitChars / splitLines) */
.char { display: inline-block; overflow: hidden; vertical-align: top; }
.char > span { display: inline-block; will-change: transform; }
.sline { display: block; overflow: hidden; }
.sline > span { display: inline-block; will-change: transform; }
.sline-plain { display: block; }

/* pills (r4: radius 23.25px = 1.55rem, padding 7px 17.5px) */
.pill {
  display: inline-block;
  font-family: var(--f-edit); font-size: var(--t-parrafo-l); line-height: var(--t-parrafo-l-lh);
  padding: .47rem 1.17rem;
  border-radius: 1.55rem;
  background: var(--black); color: var(--white);
  text-align: center;
}
.pill--xl {
  font-size: var(--t-titulo); line-height: var(--t-titulo-lh);
  padding: 1.6rem 4.57rem;
  border-radius: 4.8rem;
}
.pill.is-disabled { opacity: .55; pointer-events: none; }

/* ═══ B1 CONTINUES BELOW: .chrome (difference layer), logo states, loader,
   #mouse, .transition, .menu, .modal-contact, .link rollovers ═══ */

/* ═══════════════════════════════════════════════════════════════
   B1 · CHROME / LOADER / CURSOR / TRANSICIÓN / MENÚ / MODAL
   Números de RESEARCH (r4 §1, §4.1, §5, §6.1, §6.4 · r2 §5, §8, §9 · r3 §5).
   px → rem = px / 15.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 12-col: col(n) = --col1 * n + gap * (n-1)   (r2 §4; 99.9vw evita el scrollbar) */
  --col1: calc((99.9vw - var(--inset) * 2 - var(--grid-gap) * 11) / 12);
  --z-chrome: 10;
  --z-menu: 5;
  --z-cookie: 500;   /* consent card: above chrome, below modal */
  --z-modal: 1000;
  --z-cursor: 10000;
  --z-transition: 1000000;
}

/* ───────────────────────────────────────────────────────────────
   1 · .chrome — capa fija a viewport completo, mix-blend-mode: difference
   Todo hijo se autora en blanco: el blend produce negro sobre blanco,
   blanco sobre negro, carbón sobre beige, marino sobre azul, teal sobre coral.
   (r4 §5 — cero JS de color)
   ─────────────────────────────────────────────────────────────── */
.chrome {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  z-index: var(--z-chrome);
  pointer-events: none;
  mix-blend-mode: difference;
  color: var(--white);
  isolation: auto;
}
.chrome * { color: var(--white); }

/* ── logotipo: un único bloque cuya caja crece de "centrado" a "viewport".
   .logo__main está anclado arriba-izquierda y .logo__lockup abajo-derecha,
   así que al crecer la caja las piezas «vuelan» a las esquinas (r4 §1). ── */
/* ── preloader brand: the LOGO one-for-one (client spec) — crown-and-key
   art on top, FIRM, then LUXURY REALTY, gold like the source art. Lives
   OUTSIDE the difference chrome so it renders in true color; core.js still
   drives the char wipes + reveal timing through the logo__* classes. Fixed
   and centered in both data-states (the corner fly-apart is retired — the
   whole composition simply fades as the page reveals). ── */
.logo {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-chrome) + 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s linear;
}
body.is-loading .logo { opacity: 1; }
.logo__key {
  width: 12.5rem;
  max-width: 46vw;
  height: auto;
  margin-bottom: .6rem;
}
.logo__main {
  font-family: "Cinzel", "Fraunces", serif;
  font-weight: 600;
  font-size: 1.06em;
  letter-spacing: .14em;
  margin-right: -.14em;              /* optical center vs the tracking */
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #EAC96E 0%, #C6A24B 48%, #8E6B23 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: auto;
}
.logo__lockup {
  display: flex;
  align-items: center;
  gap: .55em;
  margin-top: .5rem;
  font-size: .34em;
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #E2BE62 0%, #A8853B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the logo's flanking hairlines around LUXURY REALTY */
.logo__lockup::before,
.logo__lockup::after {
  content: "";
  width: 3.2em;
  height: 1px;
  flex: none;
}
.logo__lockup::before { background: linear-gradient(90deg, transparent, #C6A24B); }
.logo__lockup::after  { background: linear-gradient(90deg, #C6A24B, transparent); margin-left: .42em; }
.logo__es,
.logo__mark {
  font-family: "Cinzel", "Fraunces", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}
.logo .char { overflow: clip; }
.logo .char > span { display: block; }
/* Cinzel's tall metrics: clip X only — the reveal slides chars in X */
.logo__main .char { overflow: clip visible; }
/* background-clip:text does NOT paint through GSAP's composited char spans
   in Chrome — the glyphs went invisible during the load animation (client
   saw only the key). Each split glyph therefore carries its OWN gradient +
   clip: the vertical gradient restarts per glyph box, which reads the same.
   The parent-level clip above still covers the pre-split first paint. */
.logo__main .char > span {
  background: linear-gradient(180deg, #EAC96E 0%, #C6A24B 48%, #8E6B23 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo__lockup .char > span {
  background: linear-gradient(180deg, #E2BE62 0%, #A8853B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── pastilla «Menú» (arriba-derecha).
   Vive dentro del difference, por eso pre-invierte con filter (r2 §5). ── */
.menu-btn {
  position: absolute;
  top: var(--inset); left: var(--inset);   /* moved left — the emblem owns the top-right */
  z-index: 3;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 4.75rem;                    /* 71.25px */
  padding: .47rem 1.17rem;               /* 7 / 17.5 */
  border-radius: 1.55rem;                /* 23.25px */
  background: var(--black);
  color: var(--white);
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  filter: invert(1);
  transform: translateY(-4.44rem);       /* aparcada sobre el viewport (−66.6px) */
  opacity: 0;
  transition: transform .5s var(--ease), opacity .35s linear;
}
.menu-btn__label { display: block; overflow: clip; }
body.compact .menu-btn,
body.menu-open .menu-btn { transform: translateY(0); opacity: 1; }

/* ── Property Search pill — client rule: in the header AT ALL TIMES.
      Anchored at the left inset (the menu pill slides in beside it). ── */
.search-btn {
  position: absolute;
  top: var(--inset); left: var(--inset);
  z-index: 3;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  padding: .47rem 1.17rem;
  border-radius: 1.55rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  filter: invert(1);
  white-space: nowrap;
  text-decoration: none;
}
body.is-loading .search-btn { opacity: 0; }
.search-btn { transition: opacity .4s linear .15s; }
/* menu pill yields the corner to the always-on search pill; the offset is
   label-width dependent, so Spanish (wider «Buscar propiedades») gets its
   own value — html[lang] is stamped by i18n.js before first paint */
.menu-btn { left: calc(var(--inset) + 12.2rem); }
html[lang="es"] .menu-btn { left: calc(var(--inset) + 13.8rem); }

/* ── chrome-solid: fixed layer WITHOUT the difference blend — home of the
      gold emblem (client: logo top-right, stuck across the whole site; the
      colored image and the flags would invert to garbage under difference)
      and the EN/ES language switch. ── */
.chrome-solid {
  position: fixed;
  top: var(--inset); right: var(--inset);
  z-index: calc(var(--z-chrome) + 1);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  pointer-events: none;
  transition: opacity .4s linear .15s;
}
body.is-loading .chrome-solid { opacity: 0; }
body.menu-open .chrome-solid,
body.modal-open .chrome-solid { opacity: 0; pointer-events: none !important; }
.site-emblem {
  pointer-events: auto;
  display: block;
  width: 7rem;
}
.site-emblem img { display: block; width: 100%; height: auto; }
.lang-switch {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem .8rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(25, 21, 17, .12);
}
.lang-switch__btn {
  display: flex; align-items: center; gap: .34rem;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  font-family: var(--f-izmir);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .1em;
  color: rgba(25, 21, 17, .45);
}
.lang-switch__btn.is-active { color: #191511; }
.lang-switch__btn svg { display: block; width: 1.06rem; height: .74rem; border-radius: .1rem; }
.lang-switch__sep { color: rgba(25, 21, 17, .3); font-size: .74rem; }



/* ── contador + barra del preloader (r4 §1) ── */
.loader__percent {
  position: absolute;
  bottom: 3vw; right: 5vw;
  font-family: var(--f-edit-reg);
  font-weight: 500;
  font-size: var(--t-titulo-xxl);        /* 52.5px */
  line-height: var(--t-titulo-xxl-lh);
}
.loader__progress {
  position: absolute;
  left: 0; bottom: 0;
  width: var(--progress, 0%);
  height: 2.3px;
  background: var(--white);
  transition: width .25s ease;           /* la cifra hereda este easing (r4 §1) */
}
body:not(.is-loading) .loader__percent,
body:not(.is-loading) .loader__progress { display: none; }
.loader--silent .loader__percent,
.loader--silent .loader__progress { display: none !important; }

/* ───────────────────────────────────────────────────────────────
   2 · #mouse — single WHITE dot under difference (r4 §5, §6.4):
   pure monochrome inversions on every surface (brand rule)
   ─────────────────────────────────────────────────────────────── */
#mouse {
  position: fixed;
  top: 0; left: 0;
  width: .75rem; height: .75rem;         /* 11.25px */
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 1;
  transition: opacity .3s linear;
}
.mouse__dot {
  width: 100%; height: 100%;
  background: var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%);      /* offset −5.5 / −5.5 */
  transition: transform .33s cubic-bezier(.34, 1.56, .64, 1);
}
.mouse__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  font-family: var(--f-izmir);
  font-weight: 300;
  font-size: .85rem;                     /* 12.75px */
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
}
/* el punto desaparece cuando otro módulo sustituye el cursor (terms) */
body.follow-active #mouse { opacity: 0; }
body.follow-active .mouse__dot { transform: translate(-50%, -50%) scale(0); }
.expand-mouse { cursor: none; }

@media (max-width: 950px), (hover: none) {
  #mouse { display: none; }
  .expand-mouse { cursor: pointer; }
}

/* ───────────────────────────────────────────────────────────────
   3 · .transition — barrido negro entre páginas (r2 §9)
   ─────────────────────────────────────────────────────────────── */
.transition {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100svh;
  z-index: var(--z-transition);
  background: var(--black);
  transform: translateY(100%);
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────
   4 · .menu — overlay azul (r4 §6.1, r2 §5)
   ─────────────────────────────────────────────────────────────── */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100dvh;
  z-index: var(--z-menu);
  padding: var(--inset) var(--inset) 7.8rem;   /* 24.75 / 24.75 / 117 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: var(--black);
  visibility: hidden;
  pointer-events: none;
}
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__bg {
  position: fixed;
  top: 0; right: 0;
  width: 0%; height: 100%;
  background: var(--blue);
  z-index: 1;
}
.menu__content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: calc(10.25rem - var(--inset));   /* fila a y≈153.8 */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--grid-gap);
}

/* tarjeta multimedia 472.5 × 262.5 */
.menu__media {
  position: relative;
  display: block;
  width: 31.5rem;
  height: 17.5rem;
  max-height: 17.5rem;
  overflow: hidden;
  flex: none;
}
.menu__media img { width: 100%; height: 100%; object-fit: cover; }
.menu__media-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-medium);
  font-weight: 500;
  font-size: var(--t-titulo-xl);         /* 45px */
  line-height: var(--t-titulo-xl-lh);
  text-transform: uppercase;
  color: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
}
.menu__media-title .char { overflow: clip; }

/* columna derecha — col(6) a x≈732 */
.menu__projects {
  width: calc(var(--col1) * 6 + var(--grid-gap) * 5);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.menu__projects-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grid-gap);
  font-family: var(--f-izmir);
  font-size: var(--t-titulo);
  line-height: var(--t-titulo-lh);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.menu__seeall {
  font-family: var(--f-edit);
  font-size: var(--t-parrafo-l);
  line-height: var(--t-parrafo-l-lh);
  text-transform: none;
  border-bottom: 1px solid currentColor;
}
.menu__list { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.menu__list a {
  display: block;
  width: 100%;
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: var(--t-titulo-xl);         /* 45px serif */
  line-height: 1.12;
  text-transform: uppercase;
}
.menu__list .roll__l,
.menu__list a > .menu__list-title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  width: 100%;
}
.menu__list a > .menu__list-title { display: inline-block; width: auto; }
.menu__list i {
  font-family: var(--f-edit);
  font-size: var(--t-titulo);
  margin-right: .55rem;
  font-style: normal;
  flex: none;
}
.menu__list em {
  font-family: var(--f-edit-italic);
  font-style: italic;
  font-size: var(--t-titulo-l);
  line-height: 1.1;
  text-transform: none;
  width: calc(var(--col1) * 1.5 + var(--grid-gap) * .5);
  margin-left: auto;                     /* place name, right-aligned */
  white-space: nowrap;                   /* 'Edgewater' must not break mid-word */
  text-align: right;
  flex: none;
  text-align: left;
}

/* nav de sitio, abajo-izquierda */
.menu__nav {
  position: absolute;
  left: var(--inset); bottom: var(--inset);
  z-index: 2;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.menu__nav a {
  display: inline-block;
  font-family: var(--f-izmir);
  font-size: var(--t-titulo-l);          /* 33.75px */
  line-height: 1.1;
  text-transform: uppercase;
}
.menu__mail {
  position: absolute;
  bottom: var(--inset);
  left: calc(var(--col1) * 6 + var(--grid-gap) * 6 + var(--inset));
  z-index: 2;
  font-family: var(--f-edit);
  font-size: var(--t-titulo);            /* 24.75px */
  line-height: var(--t-titulo-lh);
}
body.menu-open { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────
   5 · .modal-contact — panel blanco (r3 §5, r2 §9)
   ─────────────────────────────────────────────────────────────── */
.modal-contact {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  overflow-y: auto;
  overflow-x: clip;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  color: var(--black);
}
.modal-contact.is-open { visibility: visible; pointer-events: auto; }
.modal-contact__bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  z-index: 1;
}
.modal-contact__panel {
  position: relative;
  z-index: 10;
  width: calc(var(--col1) * 5 + var(--grid-gap) * 6.5);   /* ≈632px */
  max-width: calc(100vw - var(--inset) * 2);
  margin: 7vh 0;
  padding: calc(var(--inset) * 1.9) calc(var(--inset) * 1.25);
  background: var(--white);
  border-radius: 1.25rem;                /* 18.75px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.modal-contact__close {
  position: absolute;
  top: var(--inset); right: var(--inset);
  font-family: var(--f-izmir);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  text-transform: uppercase;
  letter-spacing: .04em;
  pointer-events: auto;
}
.modal-contact__pretitle {
  font-family: var(--f-edit);
  font-size: var(--t-titulo);
  line-height: var(--t-titulo-lh);
  text-align: center;
}
.modal-contact__title {
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: var(--t-titulo-xl);
  line-height: var(--t-titulo-xl-lh);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
}
.modal-contact__title .word,
.modal-contact__title .char { overflow: clip; }
/* logo — the png has an opaque grey-gradient ground: multiply sinks it
   into the white panel (light surfaces only, per brief) */
.modal-contact__logo {
  width: 9rem;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* direct broker actions — rows: small Archivo label over a Fraunces value */
.modal-contact__actions {
  list-style: none;
  width: 100%;
  margin: .4rem 0 1rem;
}
.modal-contact__actions li { border-top: 1px solid rgba(0, 0, 0, .14); }
.modal-contact__actions li:last-child { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.modal-contact__actions a {
  display: block;
  width: 100%;
  padding: 1rem .15rem 1.05rem;
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: var(--t-titulo);
  line-height: var(--t-titulo-lh);
  transition: color .3s ease;
}
.modal-contact__actions a:hover { color: var(--red); }   /* gold hover accent */
/* label span is classless in the markup; rollover-generated spans carry classes */
.modal-contact__actions a span:not([class]) {
  display: block;
  font-family: var(--f-izmir);
  font-size: var(--t-subtitulo);
  line-height: var(--t-subtitulo-lh);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grey);
  margin-bottom: .35rem;
}
.modal-contact__note {
  /* Archivo, not serif italic: this line carries BK# 3443361 and the
     license digits must read unambiguously (client flagged the serif 4) */
  font-family: var(--f-izmir);
  font-weight: 400;
  font-size: var(--t-parrafo);
  line-height: var(--t-parrafo-lh);
  color: var(--grey);
  text-align: center;
  max-width: 26rem;
}
.pill--dark { background: var(--black); color: var(--white); }
body.modal-open { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────
   6 · .link — rollover de dos capas (r4 §7.12); JS duplica la etiqueta
   ─────────────────────────────────────────────────────────────── */
.roll {
  position: relative;
  display: inline-block;
  overflow: clip;
  vertical-align: top;
}
.roll__l { display: block; padding: .08em 0 .1em; }
.roll__l--dup {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  transform: translateY(100%);
}
.menu__list .roll,
.menu__nav .roll { display: block; width: 100%; }

/* máscara genérica para textos que no son .link */
.mask { display: block; overflow: clip; }
.mask > span { display: block; }

/* ───────────────────────────────────────────────────────────────
   7 · .cookie-card — consent card, JS-injected as a <body> child on
   every page (core.js §8). Solid opaque brand surface: it sits
   OUTSIDE .chrome, under the difference-blend cursor only.
   ─────────────────────────────────────────────────────────────── */
.cookie-card {
  position: fixed;
  left: var(--inset);
  bottom: var(--inset);
  z-index: var(--z-cookie);
  width: 21rem;
  max-width: calc(100vw - var(--inset) * 2);
  padding: 1.15rem 1.3rem 1.25rem;
  background: var(--beige);              /* opaque champagne */
  border: 1px solid var(--red);          /* gold hairline */
  color: var(--black);
  font-family: var(--f-izmir);
  font-size: .8rem;
  line-height: 1.2rem;
  opacity: 0;
  transform: translateY(1.2rem);
  visibility: hidden;
  transition: opacity .45s ease, transform .45s var(--ease), visibility 0s linear .45s;
}
.cookie-card.is-shown {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .45s ease, transform .45s var(--ease);
}
/* yield to the overlays — the menu nav also lives bottom-left */
body.menu-open .cookie-card,
body.modal-open .cookie-card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.2rem);
  transition: opacity .3s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.cookie-card__title {
  font-family: var(--f-regular);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.3rem;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.cookie-card__text { margin-bottom: .95rem; }
.cookie-card__text a {
  text-decoration: underline;
  text-underline-offset: .15em;
}
.cookie-card__actions { display: flex; gap: .6rem; }
.cookie-card__btn {
  font-family: var(--f-edit);
  font-size: .8rem;
  line-height: 1;
  padding: .55rem 1.35rem;
  border-radius: 1.55rem;
}
.cookie-card__btn--accept { background: var(--red); color: var(--ink); }  /* gold pill, dark text */
.cookie-card__btn--decline {
  background: transparent;
  border: 1px solid rgba(25, 21, 17, .4);   /* hairline */
  color: var(--black);
}

/* accesibilidad: sin animaciones si el usuario las reduce */
@media (prefers-reduced-motion: reduce) {
  .logo, .menu-btn, .mouse__dot, .loader__progress,
  .cookie-card { transition-duration: .01ms !important; }
}