/* ARRANXO company pages (/quienes-somos, /inmobiliarias) + the home additions of v4 (more trades in the scroll story,
   the "siempre con los mismos" link, a third audience, the zone line). Linked from those pages' content (pages/*.html),
   on top of styles.css: same tokens, same rules (DESIGN.md). Motion = transform, opacity and stroke only; everything is
   readable at once, without JS and with reduced motion (styles.css turns every animation off there).
   Behaviour: assets/js/p-empresa.js.

   Class vocabulary
   .emp-sello            stamp of a company hero (wide screens only, it repeats the hero)
   .dic                  dictionary entry (Real Academia Galega), quoted: .dic-word, .dic-pos, .dic-senses, .dic-n, mark,
                         .dic-ring (the pencil ring around the sense of the name)
   .lm                   "siempre los mismos": two drawings side by side (.lm-a national platform, .lm-b ARRANXO),
                         .lm-steps = the four calls; pinned while it plays (CSS below, before first paint)
   .qs-rules             how one gets onto and off the list · .qs-who = who answers, who comes, who is responsible
   .qs-zone              where we are from (+ {{zona_mapa}} when it exists)
   .h1-k                 the search words inside a promise H1, under the promise (/inmobiliarias)
   .h48                  48 h dial (in the style of the home's 24 h dial) + .h48-steps; pinned while it plays
   .inmo-call            "no buscas a tres, llamas a uno": one call moment · .inmo-price · .inmo-tur (pisos turísticos)
   Home: .node-more, .trades (11 rows), .aud-sec with three audiences, .zone-line
*/

/* ================= HOME additions ================= */

/* the scroll story now lists eleven trades: shorter rows so the whole fan fits one screen (pinned desktop) */
.story .node-txt .node-more { display: inline-flex; margin-top: .35rem; color: var(--paper); font-size: .9688rem; white-space: normal; }
@media (max-width: 63.99em) {
  .story .trades a { min-height: 3.3rem; }
  .story .bus { bottom: 1.65rem; }                     /* half a row: the bus ends at the last branch */
  .story .node-x .node-txt { display: grid; justify-items: start; padding-left: .75rem; }   /* clear of the X's outer rings */
}
@media (min-width: 64em) {
  .story .trades a { min-height: clamp(2.85rem, 5.4vh, 4.1rem); font-size: 1.1875rem; }
  .story .trades .ico { width: 2.2rem; height: 2.2rem; }
  .story .bus { top: calc(100% / 22); bottom: calc(100% / 22); }   /* from the first to the last branch (11 rows) */
  .story .node-x .node-txt { white-space: normal; width: 15rem; text-align: center; }
  .story .node-txt .node-more { justify-content: center; }
}

/* audiences: the building spans the three of them */
@media (min-width: 56em) { .aud-sec .aud-grid > .bld-fig { grid-row: 1 / span 3; } }

/* zone line under the final call */
.zone-line { max-width: 34rem; color: var(--granite); }
.zone-line strong { color: var(--paper); }
.zone-line .link-arrow { color: var(--paper); margin-left: .15rem; }

/* ================= shared: company heroes ================= */
.emp-hero .lead strong { color: var(--paper); }
.emp-sello { display: none; }
.emp-sello .s-ring { stroke-opacity: .55; }
.emp-sello .s-thin { stroke-opacity: .32; }
.emp-sello .s-txt { fill: currentColor; fill-opacity: .8; font: 700 14.5px var(--font); letter-spacing: .1em; }
.emp-sello .s-ico { stroke-opacity: .85; }
@media (min-width: 75em) {
  .page-hero .emp-sello { display: block; position: absolute; right: 0; top: 50%; width: 20rem; height: auto; translate: 0 -46%;
    color: var(--paper); pointer-events: none; }
  .page-hero:has(.emp-sello)::before { display: none; }   /* the stamp is the drawing of this hero */
  .emp-hero h1, .emp-hero .lead { max-width: min(42rem, calc(100% - 22rem)); }
}
@media (prefers-reduced-motion: no-preference) {   /* drawn once, like the X of the home: rings first, then the mark */
  .emp-sello .s-ring, .emp-sello .s-ico path { stroke-dasharray: 1 2; animation: draw 1100ms var(--ease-io) 150ms both; }
  .emp-sello .s-ring + .s-ring { animation-delay: 260ms; }
  .emp-sello .s-ring + .s-ring + .s-ring { animation-delay: 370ms; }
  .emp-sello .s-ico path { animation-duration: 900ms; animation-delay: 650ms; }
}
/* a long word in a big heading may break instead of pushing the page sideways (320 px + text spacing) */
:is([data-page="quienes-somos"], [data-page="inmobiliarias"]) main :is(h1, h2, h3) { overflow-wrap: break-word; }
@media (max-width: 47.99em) {
  :is([data-page="quienes-somos"], [data-page="inmobiliarias"]) main .tel { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
}

/* ================= /quienes-somos ================= */

/* ---------- por qué nos llamamos ARRANXO: the dictionary entry, quoted ---------- */
.qs-name-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.qs-name-in .section-head { margin-bottom: 0; }
.qs-name-end { margin: 1.5rem 0 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
@media (min-width: 56em) { .qs-name-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.dic { position: relative; margin: 0; padding: clamp(1.4rem, .9rem + 2.4vw, 3rem); background: var(--sheet);
  border: 1px solid var(--line-strong); border-radius: var(--r); }
.dic::before { /* drawing-sheet corner marks */
  content: ""; position: absolute; inset: .6rem; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--slate), var(--slate)) 0 0 / .9rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 0 0 / 1.5px .9rem no-repeat,
    linear-gradient(var(--slate), var(--slate)) 100% 100% / .9rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 100% 100% / 1.5px .9rem no-repeat; }
.dic blockquote { margin: 0; }
.dic-src { margin: 0 0 1rem; font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dic-word { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; margin: 0 0 1.4rem; padding-bottom: .9rem;
  border-bottom: 1.5px solid var(--slate); max-width: none; }
.dic-word dfn, .dic-word b { font-style: normal; font-weight: 800; letter-spacing: -.05em; line-height: .92; color: var(--slate); }
.dic-word dfn { font-size: clamp(3.4rem, 2rem + 6.4vw, 6.75rem); }
.dic-pos { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dic-sub { margin-top: 1.9rem; padding-bottom: .6rem; border-bottom-width: 1px; }
.dic-sub b { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); letter-spacing: -.035em; }
.dic-senses { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.dic-senses > li { position: relative; padding-left: 2.6rem; }
.dic-n { position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
  border: 1.5px solid var(--slate); border-radius: 50%; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dic-def { margin: 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); font-weight: 500; line-height: 1.45; color: var(--slate); }
.dic-senses:first-of-type .dic-def, .dic mark { font-weight: 650; }
.dic-ex { margin: .4rem 0 0; color: var(--muted); }
.dic-syn { margin: .5rem 0 0; font-size: .9688rem; color: var(--slate); }
.dic-syn > span { margin-right: .55rem; font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* the sense the name stands for: marked as in a dictionary read with a pencil (a tint under the words and a hand-drawn ring
   around its number, which p-empresa.js draws with the scroll) */
.dic mark { color: inherit; padding: 0 .1em; margin: 0 -.1em; background: linear-gradient(rgb(27 42 56 / .13), rgb(27 42 56 / .13)) 0 92% / 100% .62em no-repeat; }
.dic-ring { position: absolute; left: -1.1rem; top: -.95rem; width: calc(100% + 1.8rem); max-width: none; height: calc(100% + 1.8rem); overflow: visible; pointer-events: none; }
.dic-ring path { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-linecap: round; }
.dic figcaption { margin: 1.5rem 0 0; font-size: .9375rem; color: var(--muted); }
.dic figcaption a { color: var(--slate); }

/* ---------- siempre con los mismos: a national platform's scatter vs ARRANXO's ring ---------- */
.lm-sec { position: relative; padding-block: var(--space); }
.lm-head .section-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.lm-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.lm-panel { position: relative; margin: 0; padding: .5rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); }
.lm-svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--slate); }
.lm-svg text { fill: currentColor; stroke: none; font-family: var(--font); }
.lm-lbl { font-size: 17.5px; font-weight: 600; letter-spacing: 1px; }
.lm-title rect { fill: var(--sheet); stroke: currentColor; stroke-width: 1.4; }
.lm-title text { font-size: 16px; font-weight: 700; letter-spacing: 1.6px; }
.lm-note { font-size: 16px; font-weight: 700; letter-spacing: 1.2px; }
.lm-pool circle { fill: currentColor; opacity: .3; }
.lm-call, .lm-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lm-box rect { fill: var(--sheet); stroke: currentColor; stroke-width: 1.6; }
.lm-ring { fill: var(--sheet); stroke: currentColor; stroke-width: 1.6; }
.lm-who .lm-ring { stroke-dasharray: 4 4.4; }
.lm-q { font-size: 18px; font-weight: 700; }
.lm-dot { fill: currentColor; }
.lm-lit circle { fill: var(--slate); stroke: var(--slate); stroke-width: 1.6; }
.lm-lit text, .lm-lit .lm-dot { fill: var(--paper); }
.lm-orbit { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-opacity: .55; }
.lm-x path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.lm-house circle { fill: var(--sheet); stroke: currentColor; stroke-width: 1.6; }
.lm-house path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lm-same { fill: none; stroke: var(--green); stroke-width: 3.2; }   /* THE green of this screen: "uno de los de siempre" */
@media (max-width: 47.99em) {   /* phones: the plans are drawn at ~2/3 scale, so their words grow to stay ≥ 12 px */
  .lm-lbl { font-size: 19px; }
  .lm-box .lm-lbl { font-size: 17.5px; letter-spacing: .5px; }   /* fits its box */
  .lm-title text, .lm-note { font-size: 17.5px; letter-spacing: 1px; }
}
/* final state without JS (and with reduced motion): the four calls drawn, the people who went lit */
.lm-lit { opacity: 0; }
.lm-who[class*=" v"] .lm-lit, .lm-pro[class*=" v"] .lm-lit { opacity: 1; }
.lm-steps-h { margin: 1.25rem 0 0; max-width: none; font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lm-steps { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; max-width: none; }
.lm-steps li { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .3rem .85rem; border: 1px solid var(--line-strong);
  border-radius: var(--r); background: var(--sheet); font-size: .9688rem; font-weight: 600;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease); }
.lm-steps li::before { content: ""; width: .5rem; height: .5rem; border: 1.5px solid currentColor; border-radius: 50%; }
.lm-steps .lm-k { display: none; }
.lm.is-live .lm-steps li.is-on { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.lm.is-live .lm-steps li.is-on::before, .lm.is-live .lm-steps li.is-past::before { background: currentColor; }
@media (min-width: 48em) {
  .lm-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); }
  .lm-panel { padding: .75rem; }
  .lm-steps-h, .lm-steps { justify-content: center; text-align: center; }
}
/* pinned while the four calls play (motion allowed, enough height for both drawings): set before first paint, so nothing
   jumps when p-empresa.js starts; the script marks the section .is-static when GSAP is missing. The pin lasts one screen
   of scroll whatever the stage's height: the stage stays put while the track's spacer (::after) passes */
@media (prefers-reduced-motion: no-preference) and (min-width: 48em) and (min-height: 44em) {
  .js .lm-sec:not(.is-static) { padding-bottom: 0; }
  .js .lm-sec:not(.is-static) .lm-track::after { content: ""; display: block; height: 100svh; }
  .js .lm-sec:not(.is-static) .lm-stage { position: sticky; top: var(--header-h); padding-block: 1rem; }   /* p-empresa.js sets the
     top that centres the stage on the screen while it stays put */
  .js .lm-sec:not(.is-static) .lm-panels { width: min(100%, calc((100vh - var(--header-h) - 10rem) * 2.9)); margin-inline: auto; }
}
/* phones: the two drawings stacked and pinned; the header slides away while reading down (main.js), so the stage takes the
   whole screen above the call bar; one call at a time under them */
@media (prefers-reduced-motion: no-preference) and (max-width: 47.99em) and (min-height: 40em) {
  .js .lm-sec:not(.is-static) { padding-bottom: 0; }
  .js .lm-sec:not(.is-static) .lm-track::after { content: ""; display: block; height: 100svh; }
  .js .lm-sec:not(.is-static) .lm-stage { position: sticky; top: 0; padding-block: .5rem; }
  .js .lm-sec:not(.is-static) .lm-panels { width: min(100%, calc((100svh - var(--cover-b) - 6rem) * .7)); margin-inline: auto; gap: .5rem; }   /* --cover-b: the call bar or an open cookie notice, whichever covers more */
  .js .lm-sec:not(.is-static) .lm-panel { padding: .25rem; }
  .js .lm-sec:not(.is-static) .lm-steps-h { display: none; }
  .js .lm-sec:not(.is-static) .lm-steps { justify-content: center; margin-top: .6rem; }
  .js .lm-sec:not(.is-static) .lm.is-live .lm-steps li:not(.is-on) { display: none; }   /* one call at a time */
  .js .lm-sec:not(.is-static) .lm-steps .lm-k { display: inline; font-weight: 600; opacity: .75; }
}

/* ---------- cómo se entra y cómo se sale de la lista ---------- */
.qs-rules-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.qs-rules-grid h3 { margin-bottom: .7em; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.qs-rules-grid > div + div h3 { color: var(--granite-ink); }
.qs-out { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; border-top: 1px solid var(--line); }
.qs-out li { position: relative; padding: .95rem 0 .95rem 2.5rem; border-bottom: 1px solid var(--line); }
.qs-out li::before, .qs-out li::after { content: ""; position: absolute; left: .35rem; top: 1.62rem; width: 1rem; height: 2px; background: currentColor; }
.qs-out li::before { transform: rotate(45deg); }
.qs-out li::after { transform: rotate(-45deg); }
.qs-rules-note { margin: 2rem 0 0; color: var(--muted); }
@media (min-width: 56em) { .qs-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 6rem); } }

/* ---------- quién entra en tu casa ---------- */
.qs-who { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--slate); }
.qs-who > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .2rem 1.1rem; padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--line-strong); }
.qs-who .ico { grid-row: 1 / span 2; width: 3rem; height: 3rem; stroke-width: 1.6; }
.qs-who h3 { margin: .35rem 0 .35rem; }   /* a title (styles.css h3), the statement under it reads as body text */
.qs-who p { margin: 0; color: var(--muted); }
.qs-trades-h { margin: 2.25rem 0 .85rem; font-weight: 600; color: var(--slate); }
.qs-trades { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.qs-trades a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem 1rem; border: 1px solid var(--line-strong);
  border-radius: var(--r); background: var(--sheet); font-weight: 700; text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 160ms var(--ease); }
.qs-trades a::after { content: ""; width: .45rem; height: .45rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.qs-trades a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .qs-trades a:hover { background: var(--slate); color: var(--paper); border-color: var(--slate); } }
@media (min-width: 56em) {
  .qs-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); border-top: 0; }
  .qs-who > li { grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: 1.75rem; border-top: 1.5px solid var(--slate); border-bottom: 0; }
  .qs-who .ico { grid-row: auto; margin-bottom: .9rem; }
}

/* ---------- de dónde somos ---------- */
.qs-zone-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.qs-zone-txt { display: grid; gap: 1.5rem; }
.qs-zone-txt h2 { margin-bottom: .35em; }
.qs-zone-txt .lead { margin: 0; }
.qs-zone-towns { margin: 0 0 1rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.qs-zone-txt .svc-extra { margin-top: 1.5rem; }
@media (min-width: 56em) {
  /* with the zone map ({{zona_mapa}}): text left, map right; without it: heading left, the zone right */
  .qs-zone-in:has(> :not(.qs-zone-txt, link, script)) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .qs-zone-in:not(:has(> :not(.qs-zone-txt, link, script))) .qs-zone-txt { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 6rem); align-items: start; }
}

/* ================= /inmobiliarias ================= */
.h1-k { display: block; margin-top: .5em; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 700; letter-spacing: -.01em;
  line-height: 1.25; color: var(--granite); }   /* under the promise, granite on slate (4.7:1) */

/* ---------- the 48 h dial ---------- */
.h48-sec { position: relative; }
.h48-stage { padding-block: var(--space); }
.h48-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.h48-in .h48-head { margin-bottom: 0; }
.h48-art { display: grid; justify-items: center; gap: .75rem; }
.h48-now { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin: 0; max-width: none; color: var(--slate); }
.h48-num { font-size: clamp(3.4rem, 2.6rem + 3.6vw, 5.75rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.h48-u { font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; }
.h48-ph { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.h48-fig { margin: 0; width: min(100%, 25rem); color: var(--slate); }
.h48-svg { display: block; width: 100%; height: auto; overflow: visible; }
.h48-ring { fill: none; stroke: currentColor; }
.h48-ring.r-out { stroke-opacity: .55; stroke-width: 1.5; }
.h48-ring.r-in { stroke-opacity: .2; stroke-width: 1; }
.h48-track { fill: none; stroke: currentColor; stroke-opacity: .08; stroke-width: 13; }
.h48-t { fill: none; stroke: currentColor; stroke-opacity: .55; stroke-width: 1.5; }
.h48-t.t-q { stroke-opacity: .28; stroke-width: 1; }
.h48-t.t-major { stroke-opacity: .9; stroke-width: 2.5; }
.h48-arc { fill: none; stroke: currentColor; stroke-width: 13; stroke-opacity: .82; }
.h48-hl { fill: currentColor; fill-opacity: .75; font: 600 15px var(--font); letter-spacing: .06em; }
.h48-pl { fill: currentColor; font: 700 16.5px var(--font); letter-spacing: 1.6px; }
.h48-pl.pl-top { fill-opacity: .75; }
.h48-start { fill: var(--paper); stroke: currentColor; stroke-width: 2; }
.h48-hand { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(var(--angle, 360deg)); }   /* without JS: 48 h */
.h48-hand line { stroke: var(--green); stroke-width: 3; stroke-linecap: round; }   /* THE green of this screen */
.h48-hand circle { fill: var(--green); }
.h48-hub { fill: var(--paper); stroke: currentColor; stroke-width: 1.5; }
/* the five moments: drawn nodes on one line (the order is the content) */
.h48-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; counter-reset: h48; }
.h48-steps > li { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .9rem; padding: .55rem 0; counter-increment: h48; }
.h48-steps > li::before { content: counter(h48); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--slate);
  border-radius: 50%; background: var(--paper); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 1;
  transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.h48-steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - .75px); top: 2.9rem; bottom: -.45rem; width: 1.5px;
  background: var(--slate); opacity: .35; }
.h48-steps h3 { margin: .35rem 0 .15rem; font-size: clamp(1.1rem, 1.05rem + .3vw, 1.3rem); }
.h48-steps p { margin: 0; color: var(--muted); }
.h48.is-live .h48-steps > li:not(.is-on):not(.is-past)::before { border-style: dashed; color: var(--granite-ink); }
.h48.is-live .h48-steps > li.is-on::before { background: var(--slate); color: var(--paper); }
.h48-note { margin: 1.25rem 0 0; padding: .85rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--slate); }
@media (min-width: 64em) {   /* heading and steps left, the dial right */
  .h48-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head art" "list art"; column-gap: clamp(2rem, 5vw, 6rem);
    row-gap: 1.5rem; align-items: start; }
  .h48-head { grid-area: head; align-self: end; }
  .h48-art { grid-area: art; align-self: center; }
  .h48-list { grid-area: list; }
  .h48-fig { width: min(100%, 30rem); }
}
/* .h48-pin (a wrapper around .h48-art, when the page has it) only matters while it pins; elsewhere the art keeps its own
   grid place */
.h48-pin { display: contents; }
/* phones and tablets (one column, motion allowed, tall enough for the readout and the dial): the readout and the dial
   stay put for one screen of scroll while the hand turns, the steps follow below; p-empresa.js sets the top that centres
   them on the free screen. Set before first paint; .is-static = no GSAP */
@media (prefers-reduced-motion: no-preference) and (max-width: 63.99em) and (min-height: 34em) {
  .js .h48-sec:not(.is-static) .h48-pin { display: block; }
  .js .h48-sec:not(.is-static) .h48-pin::after { content: ""; display: block; height: 100svh; }
  .js .h48-sec:not(.is-static) .h48-pin > .h48-art { position: sticky; top: 0; }
}
/* pinned while the hand turns (desktop, motion allowed, enough height): set before first paint; .is-static = no GSAP */
@media (prefers-reduced-motion: no-preference) and (min-width: 64em) and (min-height: 52em) {   /* the whole stage fits from 832 px */
  .js .h48-sec:not(.is-static) { height: calc(200vh - var(--header-h)); }   /* one screen of scroll while pinned */
  .js .h48-sec:not(.is-static) .h48-stage { position: sticky; top: var(--header-h); min-height: calc(100vh - var(--header-h)); display: grid;
    align-content: center; padding-block: clamp(1.5rem, 4vh, 3rem); }
  .js .h48-sec:not(.is-static) .h48-fig { width: min(100%, 30rem, calc(100vh - var(--header-h) - 13rem)); }
  .js .h48-sec:not(.is-static) .h48-in { row-gap: 1rem; }
  .js .h48-sec:not(.is-static) .h48-steps > li { padding-block: .3rem; }
  .js .h48-sec:not(.is-static) .h48-note { margin-top: .9rem; padding-block: .65rem; }
}
@media (min-width: 64em) {
  .h48-head h2 { font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3.1rem); max-width: 16ch; }
  .h48-steps h3 { font-size: 1.15rem; }
  .h48-steps p { font-size: .9688rem; }
}

/* ---------- no buscas a tres, llamas a uno: one call moment (as electricista's .pe-call): the drawing of three trades
   wired into one call, "Llámanos: +34 …" and WhatsApp; also on phones (the call bar is not the only way to call) ---------- */
.inmo-call-in { display: grid; gap: 2rem; align-items: center; }
.inmo-call-art { width: clamp(9rem, 5rem + 12vw, 15rem); color: var(--paper); }
.inmo-mini { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.inmo-mini .mc { stroke-width: 1; stroke-opacity: .3; }
.inmo-mini .wire { stroke-width: 1.5; stroke-opacity: .7; }
.inmo-mini .node circle { stroke-width: 1.5; }
.inmo-mini .node .one { stroke-width: 2; }
.inmo-mini .mi { stroke-width: 3.2; }        /* the 48-grid icons at .55 */
.inmo-mini .mi-one { stroke-width: 2.4; }    /* the phone at .77 */
.inmo-call h2 { max-width: 16ch; }
.inmo-call-line { display: inline-grid; gap: .15rem; margin: .35rem 0 1.25rem; text-decoration: none; color: var(--paper); max-width: 100%; }
.inmo-call-k { font-size: 1.0625rem; font-weight: 600; color: rgb(242 240 236 / .86); }
.inmo-call-n { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
  white-space: normal; overflow-wrap: anywhere; padding-bottom: .12em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .inmo-call-line:hover .inmo-call-n { background-size: 100% 2px; } }
.inmo-call-wa { margin: 0; }
.inmo-call .svc-extra { margin-top: 1.5rem; }
.inmo-call .svc-extra .link-arrow { color: var(--paper); }
@media (min-width: 64em) { .inmo-call-in { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); } }

/* ---------- qué incluye + precio ---------- */
.inmo-price { display: grid; gap: .5rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: 1.25rem 1.25rem 1.35rem; border: 1.5px solid var(--slate);
  border-radius: var(--r); background: var(--sheet); }
.inmo-price-h { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.3; max-width: none; }
.inmo-price-h .ico { width: 2.5rem; height: 2.5rem; stroke-width: 1.8; }
.inmo-price > :not(.inmo-price-h) { margin-top: .5rem; }

/* ---------- pisos turísticos ---------- */
.inmo-tur { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.inmo-tur .section-head { margin-bottom: 0; }
.inmo-tur .checks { margin-bottom: 0; }
@media (min-width: 56em) { .inmo-tur { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.inmo-tur-ico { width: 3.25rem; height: 3.25rem; stroke-width: 1.6; margin-bottom: 1rem; }