/* ARRANXO Multiservicios: design system "Planos del Atlántico" (v2, 2026-10-17)
   The X as an engineer's drawing: deep Atlantic slate = the blueprint (moments, motion, calls),
   warm off-white = the drawing sheet (reading, choosing, forms). Montserrat only. Mobile first.

   Colour rules (WCAG 2.2 AA, measured):
   --slate #1B2A38 base · --paper #F2F0EC backgrounds · --green #1F9D7F verde atlántico.
   Green = at most ONE element per screen and never a second fill: as text only ≥ 1.25rem bold on slate (large text,
   4.3:1); on paper it is 2.98:1, so there it is only a decorative mark (the selected-tile slash). The isotipo keeps its
   green bar (it is the logo).
   --granite #8A949C = secondary text on slate only (4.7:1). On paper it is 2.7:1: never text on light surfaces; there
   use --granite-ink #566069 (5.6:1 on paper, 6.1:1 on --sheet). Focus rings: slate on light, paper on dark (never green).

   ONE numbering system: no eyebrow numbers, no section numbers. Numerals appear only where the order is the content
   (step lists: .reasons, .prose ol), always as the same drawn node on a line. Section labels above headings are hidden
   (the heading speaks); the only small labels left are the page-hero location line and technical annotations inside
   drawings.

   Class vocabulary for page authors (pages/*.html = the <main>):
   .section (.section-alt = paper-2 band) > .wrap · .section-head (h2 + .lead) · .sheet (drawing-sheet section, home)
   .on-dark = any slate surface (sets text, link, focus and button colours)
   .page-hero.on-dark (inner pages: .crumbs, .kicker = location line, h1, .lead, .big-phone, .cta-row, .hero-proof)
   .hero (home only) · .band.on-dark (full-width call band: .band-big.accent, h2, .lead, .big-phone, .cta-row, .note)
   .prose (long text) · .checks (drawn check marks) · .faq ({{faq:key}}) · .split (two columns ≥ 48em)
   .cards > .card (drawing-sheet blocks) · .svc-list > .svc (service rows; .svc-num is hidden: services are not a sequence)
   .tasks > li > a (link rows + {{icon_arrow}}) · .svc-extra (one-line teaser + .link-arrow)
   .big-phone · .tel · .link-arrow · .btn (+ .btn-dark | .btn-light | .btn-outline-dark | .btn-outline-light | .btn-block)
   {{cta}} = .btn-call + .btn-wa · .btn-ghost (outline on any surface) · .form-wrap ({{form}}) · .accent (THE green element)
   Client material (tools/build.py, rendered only once it exists): .foto-equipo ({{foto_equipo}}) · .reviews + .rv-grid
   ({{resenas}}) · .resena-boton · .ficha-google · .team ({{equipo}}) · .trabajos + .ba ({{trabajos}}, main.js) · .precios
   ({{precios_inmo}}) · .zona-in ({{zona_mapa}} beside the text on /contacto)
   No style="" attributes and no <style> blocks: the CSP is style-src 'self' (worker.js).
   Motion: transform/opacity (+ stroke-dashoffset on inline SVG); everything is readable at once, without JS and with
   reduced motion; .js (set before first paint by the inline script in layout.html) only gates the problem picker.
*/

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* metric-matched fallback: keeps the layout still while the web font swaps in */
@font-face {
  font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 113%; ascent-override: 85%; descent-override: 22%; line-gap-override: 0%;
}

:root {
  --slate: #1B2A38; --slate-deep: #132029; --slate-night: #0C151C; --slate-2: #22364A;
  --paper: #F2F0EC; --paper-2: #E8E5DF; --sheet: #F8F7F4;
  --green: #1F9D7F;
  --granite: #8A949C; --granite-ink: #566069;
  --ink: var(--slate); --muted: var(--granite-ink);
  --line: rgb(27 42 56 / .13); --line-strong: rgb(27 42 56 / .3);
  --grid: rgb(27 42 56 / .05);
  --focus: var(--slate);
  --btn-bg: var(--slate); --btn-fg: var(--paper); --btn-line: var(--slate);
  --font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 78rem; --gutter: clamp(1rem, 4vw, 2.75rem);
  --space: clamp(4.5rem, 2.6rem + 7vw, 9.5rem);
  --r: 4px;                      /* one radius for every control and sheet; drawings use circles */
  --header-h: 4rem;
  --bar-h: 4.75rem;              /* phones: floating call bar (incl. its margin), without the safe area */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --label: 600 .75rem/1.2 var(--font);
  /* what covers the bottom of the screen: the call bar (phones) or, while it is open, the cookie notice
     (--cc-cover = its distance from the bottom edge, measured by main.js). Focus, anchors and the last line of the
     page always stay above it */
  --cc-cover: 0px;
  --cover-b: max(calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)), var(--cc-cover));
}
.on-dark {
  --ink: var(--paper); --muted: var(--granite);
  --line: rgb(242 240 236 / .13); --line-strong: rgb(242 240 236 / .3);
  --grid: rgb(242 240 236 / .045);
  --focus: var(--paper);
  --btn-bg: var(--paper); --btn-fg: var(--slate); --btn-line: var(--paper);
  background-color: var(--slate); color: var(--paper);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  /* focus and anchors never land under the fixed call bar / cookie notice (phones) or the sticky header (≥ 48em) */
  scroll-padding-bottom: calc(var(--cover-b) + 1rem);
}
/* no CSS smooth scrolling: with it, Tab focus glides into view and is still off screen or under the call bar while the
   visitor looks for it (WCAG 2.4.11); focus and in-page jumps land at once */
a, button, summary, label, [role="button"] { touch-action: manipulation; }
/* a focused control never ends under the call bar or the cookie notice (WebKit ignores scroll-padding when it scrolls
   focus into view) */
:where(a, button, input, textarea, select, summary) { scroll-margin-bottom: calc(var(--cover-b) + .5rem); }
body {
  margin: 0; background: var(--paper); color: var(--slate);
  font: 400 1.0625rem/1.62 var(--font); font-kerning: normal; font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* very light paper grain over everything: one fixed layer, no blend mode (cheap to composite) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--slate); color: var(--paper); }
.on-dark ::selection { background: var(--paper); color: var(--slate); }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.04; letter-spacing: -.035em; margin: 0 0 .55em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.35rem, 1.45rem + 3.8vw, 4.5rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong { font-weight: 700; }
.nw { white-space: nowrap; }
.tel { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
/* skip link: same 44 px box hidden and shown; on focus it sits above the header (z 40) and the paper grain (z 60) */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .75rem 1rem; background: var(--paper); color: var(--slate); --focus: var(--paper); }
.skip:focus { left: 1rem; top: 1rem; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 3rem; height: 3rem; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* blueprint grid: fine 2rem lines + a stronger 8rem module, faded towards the edges (drawn, never interactive) */
.bp { position: relative; isolation: isolate; }
.bp::before, .page-hero::after, .band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 2rem 2rem, 2rem 2rem, 8rem 8rem, 8rem 8rem;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 100%);
}

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .75rem 1.5rem; border: 1.5px solid var(--btn-line); border-radius: var(--r);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 1rem/1.2 var(--font); letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: transform 160ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
/* technical corner marks: the button gets "measured" on hover */
.btn::before, .btn::after {
  content: ""; position: absolute; width: .55rem; height: .55rem; border: 1.5px solid var(--btn-line); opacity: 0;
  pointer-events: none; transition: opacity 200ms var(--ease), transform 260ms var(--ease);
}
.btn::before { left: -.45rem; top: -.45rem; border-right: 0; border-bottom: 0; transform: translate(.2rem, .2rem); }
.btn::after { right: -.45rem; bottom: -.45rem; border-left: 0; border-top: 0; transform: translate(-.2rem, -.2rem); }
.btn:active { transform: scale(.97); }
.btn-dark { --btn-bg: var(--slate); --btn-fg: var(--paper); --btn-line: var(--slate); }
.btn-light { --btn-bg: var(--paper); --btn-fg: var(--slate); --btn-line: var(--paper); }
.btn-outline-dark, .btn-outline-light, .btn-wa, .btn-quiet, .btn-ghost { background: transparent; color: var(--btn-line); }
.btn-outline-dark { --btn-line: var(--slate); }
.btn-outline-light { --btn-line: var(--paper); }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before, .btn:hover::after { opacity: 1; transform: none; }
  .btn-wa:hover, .btn-outline-dark:hover, .btn-outline-light:hover, .btn-quiet:hover, .btn-ghost:hover { background: var(--btn-line); color: var(--btn-fg); }
  .btn-outline-dark:hover { color: var(--paper); }
  .btn-outline-light:hover { color: var(--slate); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; max-width: none; }
@media (max-width: 47.99em) { .on-dark .cta-row { display: none; } }   /* phones: the fixed call bar is that pair */
.cta-row .btn { flex: 1 1 10rem; }
@media (min-width: 30em) { .cta-row .btn { flex: 0 0 auto; min-width: 11.5rem; } }
.magnetic { will-change: transform; }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
/* 44 px tap box (padding) without moving anything (negative margin of the same size); the underline keeps its place */
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; text-decoration: none;
  padding-block: .65rem .55rem; margin-block: -.25rem;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .25rem) / 100% 1.5px no-repeat;
  transition: background-size 320ms var(--ease); }
.link-arrow .i-arrow { transition: transform 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { background-size: 35% 1.5px; }
  .link-arrow:hover .i-arrow { transform: translateX(5px); }
}

/* ---------- type helpers ---------- */
.kicker { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem; font: var(--label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; }
.kicker .num { display: none; }              /* one numbering system: no eyebrow numbers anywhere */
.section .section-head > .kicker, .section .split > div > .kicker,
.section .zones-in > div > .kicker, .cta-final .kicker { display: none; }   /* the heading speaks; no labels above it */
.lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); line-height: 1.52; color: var(--muted); }
.on-dark .lead { color: rgb(242 240 236 / .86); }
.accent, .on-dark .accent { color: var(--green); font-weight: 700; }   /* slate surfaces only, ≥ 1.25rem (large text) */
/* min-height = 44 px tap target on phones */
.big-phone { display: inline-block; min-height: 2.75rem; font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.4rem); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.05; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: .12em;
  transition: background-size 420ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .big-phone:hover { background-size: 100% 2px; } }
/* phones: a number wider than the screen column (the visitor's own letter spacing, WCAG 1.4.12) wraps instead of being cut
   off at the screen edge; it stays on one line otherwise (no-break spaces in FACTS) */
@media (max-width: 47.99em) { .big-phone, .footer-phone { max-width: 100%; white-space: normal; overflow-wrap: break-word; } }
.note { font-size: .9375rem; color: var(--muted); }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 40; background: var(--slate); color: var(--paper); --focus: var(--paper);
  border-bottom: 1px solid rgb(242 240 236 / .08); }
.header-in { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
/* phones: the header rides along, slides away while reading down and comes back on the first scroll up (main.js);
   it never covers keyboard focus: main.js hides it at once when focus would land under it */
@media (max-width: 47.99em) {
  .js .site-header { position: sticky; top: 0; transition: transform 280ms var(--ease); }
  .js .site-header.is-up { transform: translateY(-100%); }
  .js .site-header.is-snap { transition: none; }
  .pick-tile { scroll-margin-top: calc(var(--header-h) + .5rem); }   /* the picker scrolls a tile up: clear of the header */
}
@media (max-width: 47.99em) and (prefers-reduced-motion: reduce) { .js .site-header { transition: none; } }
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; text-decoration: none; color: var(--paper); margin-right: auto; }
.brand-mark { width: 2.1rem; height: auto; transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.04); } }
.brand-word { display: grid; line-height: 1; }
.brand-name { font-size: 1.1875rem; font-weight: 700; letter-spacing: .085em; }
.brand-sub { margin-top: .3rem; font-size: .5625rem; font-weight: 600; letter-spacing: .318em; text-transform: uppercase; color: var(--granite); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-weight: 600; }
.header-phone { display: none; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1.5px solid rgb(242 240 236 / .4); border-radius: var(--r); color: var(--paper); font-weight: 700;
  text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.header-phone:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .header-phone:hover { background: var(--paper); color: var(--slate); border-color: var(--paper); } }
.nav-toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem .25rem .5rem .75rem;
  background: none; border: 0; color: var(--paper); font: 600 1rem var(--font); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 1.25rem; height: 2px; background: currentColor;
  transition: transform 260ms var(--ease), background-color 160ms; }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }
/* phone + tablet: the menu is a panel under the header */
@media (max-width: 83.99em) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--slate-deep);
    border-top: 1px solid rgb(242 240 236 / .1); box-shadow: 0 24px 40px rgb(8 14 19 / .4);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }   /* the header rides along: a long menu scrolls inside itself */
  .nav.open { display: block; animation: drop 260ms var(--ease) both; }
  .nav ul { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: .5rem 1.25rem; }
  .nav li + li { border-top: 1px solid rgb(242 240 236 / .1); }
  .nav a { display: flex; align-items: center; min-height: 3.5rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; }
  .nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-.5rem); } }
html:not(.js) .nav-toggle { display: none; }
@media (max-width: 83.99em) {
  html:not(.js) .header-in { flex-wrap: wrap; padding-top: .9rem; }
  html:not(.js) .nav { display: block; position: static; flex: 1 1 100%; background: none; box-shadow: none; margin-bottom: .5rem; }
  html:not(.js) .nav ul { width: auto; display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: .25rem 0 0; }
  html:not(.js) .nav li + li { border: 0; }
  html:not(.js) .nav a { min-height: 2.75rem; font-size: 1rem; }
}
@media (min-width: 48em) {
  :root { --header-h: 4.75rem; --bar-h: 0rem; }
  html { scroll-padding-top: calc(var(--header-h) + 1rem); }
  .site-header { position: sticky; top: 0; }   /* opaque on purpose: the granite wordmark keeps its 4.7:1 on slate */
  .header-phone { display: inline-flex; }
  [id] { scroll-margin-top: 6rem; }
}
/* desktop: one-line nav from 84em (1344 px). At their natural width brand (164 px) + seven items with 1rem gaps (814 px)
   + the phone button (220 px) + two 1rem gaps take 1229 px; the header row is capped by the 78rem wrap (1248 px), so from
   1344 to 1920 px the same 19 px stay free (Chromium and WebKit, measured 21-oct-2026). Below 84em the row does not fit:
   the menu stays a drawer. Labels are never cut or shrunk. */
@media (min-width: 84em) {
  .nav-toggle { display: none; }
  .header-in { gap: 1rem; }
  .nav { margin-left: auto; }
  .nav ul { display: flex; gap: 1rem; }
  .nav a { position: relative; display: inline-block; padding-block: .625rem; font-size: .9375rem; white-space: nowrap; color: var(--paper); }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
  .nav a[aria-current]::after { transform: none; }
  .brand { margin-right: 0; }
}
@media (min-width: 84em) and (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: none; } }

/* submenus (main.js): "Ayuda rápida" = link + arrow button (.sub-toggle), "Servicios" = the button itself (.sub-parent,
   no page of its own). The button opens / closes the list (phone drawer, touch, keyboard); desktop also opens it on hover
   and on keyboard focus. Without JS: desktop on hover / focus (CSS below), phones show every list open. */
.sub-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; color: var(--paper); cursor: pointer; }
.sub-toggle::before, .sub-parent::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 220ms var(--ease); }
.sub-toggle[aria-expanded="true"]::before, .sub-parent[aria-expanded="true"]::after { margin-top: .25rem; transform: rotate(-135deg); }
.sub-parent { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0; background: none; border: 0;
  color: var(--paper); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
html:not(.js) .sub-toggle { display: none; }
.nav .sub { display: none; list-style: none; }
.nav .sub.open { display: block; }
@media (max-width: 83.99em) {
  .nav .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .nav .has-sub > a { flex: 1; }
  /* the parent button is a full menu row; its arrow sits where the arrow button of "Ayuda rápida" sits */
  .nav .sub-parent { flex: 1 1 100%; justify-content: space-between; min-height: 3.5rem; padding-right: 1.125rem;
    font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; }
  .nav .sub-parent.is-current span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
  .nav .sub { flex: 1 1 100%; width: auto; margin: 0 0 .9rem; padding: 0 0 0 1rem; border-left: 2px solid rgb(242 240 236 / .2); }
  .nav .sub li + li { border-top: 0; }
  .nav .sub a { min-height: 2.75rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
  /* no JS: every list is shown open (rule above); "Servicios" is just the label of its list, sized like the links */
  html:not(.js) .nav .sub-parent { min-height: 2.75rem; font-size: 1rem; }
  html:not(.js) .nav .sub-parent::after { display: none; }
}
@media (min-width: 84em) {
  .nav .has-sub { position: relative; display: flex; align-items: center; }
  .nav .has-sub .sub-toggle { width: 1.75rem; margin-right: -.6rem; }
  .nav .sub-parent { padding-block: .625rem; font-size: .9375rem; white-space: nowrap; }
  .nav .sub-parent span { position: relative; }
  .nav .sub-parent span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
  .nav .sub-parent.is-current span::after { transform: none; }
  .nav .sub { position: absolute; z-index: 50; top: 100%; left: -1rem; min-width: 15.5rem; padding: .5rem; background: var(--slate-deep);
    border: 1px solid rgb(242 240 236 / .12); border-radius: var(--r); box-shadow: 0 24px 40px rgb(8 14 19 / .45); }
  .nav .sub.open, html:not(.js) .nav .has-sub:hover .sub, html:not(.js) .nav .has-sub:focus-within .sub { display: block; animation: drop 200ms var(--ease) both; }
  .nav .sub a { display: block; padding: .625rem .75rem; border-radius: calc(var(--r) - 2px); font-weight: 600; }
  .nav .sub a::after { display: none; }
  .nav .sub a:hover, .nav .sub a[aria-current] { background: rgb(242 240 236 / .08); }
}
@media (min-width: 84em) and (hover: hover) and (pointer: fine) { .nav .sub-parent:hover span::after { transform: none; } }

/* ---------- sections ---------- */
.section { padding-block: var(--space); }
.section-alt { background: var(--paper-2); }
.sheet { background: var(--paper); }
.section-head { margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 4rem); max-width: 48rem; }
.section-head h2 { margin-bottom: .35em; }
.section-head .lead { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); }
@media (min-width: 48em) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

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

/* ---------- 1 · hero: the X assembles from its construction lines ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(1rem, .5rem + 2.5vw, 3.5rem) clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.hero::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 75% 45%, #000 20%, transparent 95%);
  mask-image: radial-gradient(ellipse 70% 80% at 75% 45%, #000 20%, transparent 95%);
}
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-claim { grid-row: 2; position: relative; z-index: 1; margin: 0 0 .4em; font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: .96; letter-spacing: -.04em; font-weight: 800; }
.hero-claim .l { display: block; }
.hero-claim .l2 { display: block; }
.hero-art { grid-row: 1; position: relative; width: min(100%, 22rem); justify-self: end; margin: -.5rem -1.5rem -3rem 0; color: var(--paper); pointer-events: none; }
.hero-body { grid-row: 3; position: relative; z-index: 1; }
.hero-sub { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); line-height: 1.5; max-width: 36rem; margin-bottom: .9rem; color: rgb(242 240 236 / .88); }
.hero-urgent { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; margin-bottom: 1.25rem; }
.hero-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; justify-items: start; }
.hero-contact .big-phone { font-size: clamp(2rem, 1.3rem + 3.6vw, 3.6rem); }   /* 2rem: one line down to 320 px */

/* the drawing */
.plano { width: 100%; height: auto; overflow: visible; }
.plano-lines { fill: none; stroke: currentColor; stroke-width: var(--plano-stroke, 2); }
.plano-lines .cl { stroke-opacity: .22; }
.plano-lines .c1 { stroke-opacity: .38; } .plano-lines .c2 { stroke-opacity: .28; }
.plano-lines .ax, .plano-lines .ay { stroke-opacity: .2; }
.plano-lines .tick { stroke-opacity: .55; }
.plano-lines .dim { stroke-opacity: .45; }
@media (max-width: 47.99em) { .hero .plano-lines .dim, .hero .plano-label { display: none; } }
.plano-label { fill: currentColor; fill-opacity: .6; stroke: none; font: 600 13px var(--font); letter-spacing: .14em; }
.plano-x path { transform-box: fill-box; transform-origin: center; }
@media (min-width: 48em) { .plano { --plano-stroke: 1.2; } }

@media (prefers-reduced-motion: no-preference) {
  /* construction lines draw (pathLength = 1), then the three pieces slide in, the green bar lands last: ≤ 1.3 s, once */
  .plano .cl { stroke-dasharray: 1; animation: draw 900ms var(--ease-io) both; }
  .plano .c1 { animation-delay: 0ms; } .plano .c2 { animation-delay: 70ms; } .plano .c3 { animation-delay: 140ms; }
  .plano .c4 { animation-delay: 210ms; } .plano .ax { animation-delay: 60ms; } .plano .ay { animation-delay: 120ms; }
  .plano .d1 { animation-delay: 180ms; } .plano .d2 { animation-delay: 240ms; }
  .plano .tick, .plano .dim, .plano-label { animation: fade 500ms var(--ease) 700ms both; }
  .plano .xp-a { animation: piece-a 720ms var(--ease) 320ms both; }
  .plano .xp-b { animation: piece-b 720ms var(--ease) 470ms both; }
  .plano .xp-c { animation: piece-c 640ms var(--ease) 660ms both; }
  /* the claim inks in: weight and tracking only, readable from the first frame */
  .hero-claim .l { animation: ink 1100ms var(--ease) both; }
  .hero-claim .l + .l { animation-delay: 120ms; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes piece-a { from { opacity: 0; transform: translate(-16%, 4%); } }
@keyframes piece-b { from { opacity: 0; transform: translate(22%, 18%); } }
@keyframes piece-c { from { opacity: 0; transform: translate(40%, -48%); } 70% { opacity: 1; } }
@keyframes ink { from { font-weight: 300; letter-spacing: -.01em; } }

@media (max-width: 47.99em) {
  .hero-art { width: min(64vw, 16rem); }
  .hero-sub { max-width: 30rem; }
}
@media (max-height: 46em) and (max-width: 47.99em) { .hero-art { width: 11rem; margin-bottom: -2rem; } }
@media (max-width: 39.99em) {
  .hero-claim { font-size: clamp(2.6rem, 11.4vw, 3.4rem); }
  .hero-urgent .sep { display: none; }          /* two clean lines instead of a dot left hanging at the line end */
  .hero-urgent .nw { display: block; }
}
@media (min-width: 40em) { .hero-claim .l2 { display: inline; } }
@media (min-width: 48em) {
  .hero { padding-block: 3.5rem 5rem; }
  .hero-claim { grid-row: 1; position: relative; z-index: 1; }
  .hero-body { grid-row: 2; max-width: 36rem; }
  .hero-art { position: absolute; z-index: 0; grid-row: auto; margin: 0; right: -6%; top: 50%; width: 46%; translate: 0 -46%; }
  .hero .btn-wa:not(:hover) { background-color: var(--slate); }
}
@media (min-width: 64em) {
  .hero { min-height: calc(100svh - var(--header-h) - 2.5rem); display: grid; align-items: center; padding-block: 3rem 4rem; }
  .hero-claim { margin-bottom: .5em; }
  .hero-body { max-width: none; }
  .hero-art { right: -4%; width: min(44%, 38rem); translate: 0 -53%; }
  .hero-contact { grid-template-columns: none; grid-auto-flow: column; align-items: center; justify-content: start; gap: 2rem; }
  .hero-contact .cta-row { flex-wrap: nowrap; }
}

/* ---------- 2 · ¿Qué te ha pasado? problem picker ---------- */
.pick-sec { position: relative; }
.pick-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3.25rem); }
.pick-head h2 { margin-bottom: .35em; }
.pick-head .lead { margin: 0; }
.pick { display: grid; gap: .5rem; }
.pick-tile {
  position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.25rem; padding: .7rem 3.25rem .7rem .9rem;
  background: var(--sheet); color: var(--slate); border: 1px solid var(--line-strong); border-radius: var(--r);
  font: 700 1.0625rem/1.25 var(--font); letter-spacing: -.01em; text-align: left; cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 160ms var(--ease);
}
.pick-tile .ico { width: 2.5rem; height: 2.5rem; stroke-width: 2; }
.pick-tile .ico * { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* /ayuda-rapida: "Qué puedes hacer ahora" under each answer, numbered like a checklist */
.pick-steps { margin: 0 0 1.1rem; padding: 1rem 1.1rem 1.1rem; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.pick-steps-h { margin: 0 0 .6rem; font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pick-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: .55rem; }
.pick-steps li { position: relative; padding-left: 2.1rem; counter-increment: st; }
.pick-steps li::before { content: counter(st); position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--slate); font-size: .8rem; font-weight: 700; line-height: 1.3rem; text-align: center; }
.pick-tile::after { /* plus → minus */
  content: ""; position: absolute; right: 1.1rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 300ms var(--ease); }
.pick-tile[aria-expanded="true"]::after { transform: rotate(180deg); background-size: 100% 2px, 2px 0; }
.pick-tile:active { transform: scale(.985); }
.pick-tile[aria-expanded="true"] { background: var(--slate); color: var(--paper); border-color: var(--slate); --focus: var(--slate); }
.pick-tile[aria-expanded="true"]::before { /* the isotipo's green bar: THE one green mark of this screen */
  content: ""; position: absolute; top: .55rem; right: 2.6rem; width: 1.15rem; height: .3rem; background: var(--green);
  transform: rotate(-52deg); border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .pick-tile[aria-expanded="true"] .ico *, .pick-tile.is-drawing .ico * { animation: draw 700ms var(--ease-io) both; }
}
@media (hover: hover) and (pointer: fine) {
  .pick-tile:hover { border-color: var(--slate); }
  .pick-tile:not([aria-expanded="true"]):hover { background: #fff; }
}
.pick-panel { padding: 1.4rem 1.1rem 1.6rem; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); }
.js .pick-panel:not(.is-open) { display: none; }
.js .pick-panel { border-top: 0; border-radius: 0 0 var(--r) var(--r); margin-top: -.5rem; }
.pick-panel h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.03em; margin-bottom: .55em; }
.pick-panel p { color: var(--slate); }
.pick-know { position: relative; padding: .9rem 1rem .9rem 1.1rem; margin: 1.25rem 0 1.5rem; border: 1px dashed var(--line-strong);
  border-radius: var(--r); font-size: .9688rem; line-height: 1.55; }
.pick-know strong { display: block; margin-bottom: .2rem; }
.pick-panel .cta-row { margin-bottom: 1.25rem; }
.pick-panel .link-arrow { margin-top: .25rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .pick-panel.is-open .pick-in > * { animation: rise 520ms var(--ease) both; }
  .js .pick-panel.is-open .pick-in > :nth-child(2) { animation-delay: 50ms; }
  .js .pick-panel.is-open .pick-in > :nth-child(3) { animation-delay: 100ms; }
  .js .pick-panel.is-open .pick-in > :nth-child(n+4) { animation-delay: 150ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(.6rem); } }
/* tablets and up (only with JS: without it every answer stays open as a list): tiles left, the open answer right */
@media (min-width: 56em) {
  .js .pick { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr); gap: .75rem; align-items: stretch; }
  .js .pick-tile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.25rem; min-height: 9.25rem;
    padding: 1.15rem 1.15rem 1.1rem; font-size: 1.125rem; }
  .js .pick-tile .ico { width: 3.25rem; height: 3.25rem; stroke-width: 1.6; }
  .js .pick-tile::after { top: 1.4rem; margin-top: 0; }
  .js .pick-tile[aria-expanded="true"]::before { top: 1.35rem; right: 2.9rem; }
  .js .pick-panel { grid-column: 3; grid-row: 1 / span 4; margin: 0; border-top: 1px solid var(--line-strong); border-radius: var(--r);
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); background: var(--sheet); position: relative; }
  .js .pick-panel::before { /* drawing-sheet corner marks */
    content: ""; position: absolute; inset: .6rem; pointer-events: none;
    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;
    opacity: .5; }
  .js .pick-in { position: sticky; top: calc(var(--header-h) + 2rem); }
  /* the same grid before and after home.js: tiles pinned to columns 1–2, and the first answer already shows in
     column 3 until the script opens it (no reflow of the tiles at load) */
  .js .pick-tile:nth-of-type(odd) { grid-column: 1; }
  .js .pick-tile:nth-of-type(even) { grid-column: 2; }
  .js .pick:not(:has(.pick-panel.is-open)) > .pick-panel:first-of-type { display: block; }
}
@media (min-width: 75em) { .js .pick-tile { min-height: 10rem; } }

/* ---------- 3 · una llamada → todos los oficios (scroll story) ---------- */
.story { position: relative; background: var(--slate); }
.story-pin { position: relative; padding-block: var(--space); }
.story-in { display: grid; gap: 2.5rem; }
.story-text h2 { max-width: 14ch; }
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.story-cap { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); line-height: 1.45; color: rgb(242 240 236 / .88); max-width: 30rem; }
.story-cap strong { color: var(--paper); }
.diagram { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.node { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; text-decoration: none; color: var(--paper); }
.node-ring { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1.5px solid rgb(242 240 236 / .55); border-radius: 50%;
  background: var(--slate); }
.node-ring .i { width: 1.35rem; height: 1.35rem; }
.node-x .node-ring { width: 4.5rem; height: 4.5rem; margin-left: -.5rem; border-color: var(--paper); background: var(--slate-deep);
  box-shadow: 0 0 0 .7rem var(--slate), 0 0 0 calc(.7rem + 1px) rgb(242 240 236 / .22), 0 0 0 1.5rem var(--slate), 0 0 0 calc(1.5rem + 1px) rgb(242 240 236 / .12); }
.node-x .node-ring img { width: 2.4rem; height: auto; }
.node-label { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--granite); }
.node-num { display: block; margin-top: .2rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--paper); }
.node-call { grid-column: 1 / -1; }
.node-call:hover .node-num { text-decoration: underline; text-underline-offset: .2em; }
.node-x { grid-column: 1 / -1; }
.wire { display: block; background: rgb(242 240 236 / .7); transform-origin: 0 0; }
.wire-1, .wire-2 { width: 2px; height: 2.75rem; margin-left: calc(1.75rem - 1px); grid-column: 1 / -1; }
.trades-wrap { position: relative; grid-column: 1 / -1; }
.bus { position: absolute; left: calc(1.75rem - 1px); top: 0; bottom: 1.85rem; width: 2px; background: rgb(242 240 236 / .7); transform-origin: 0 0; }
.trades { list-style: none; margin: 0; padding: 0; display: grid; }
.trades li { position: relative; --stub: 1; }
.trades li::before { content: ""; position: absolute; left: 1.75rem; top: 50%; width: 1.5rem; height: 2px; margin-top: -1px; background: rgb(242 240 236 / .7);
  transform: scaleX(var(--stub)); transform-origin: 0 50%; }
.trades a { display: flex; align-items: center; gap: .9rem; min-height: 3.7rem; padding-left: 3.6rem; color: var(--paper); text-decoration: none;
  font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.trades .ico { width: 2.25rem; height: 2.25rem; stroke-width: 2; color: var(--paper); }
.trades li:focus-within, .node-call:focus-visible { opacity: 1 !important; }   /* a focused row is never dimmed by the scrub */
@media (hover: hover) and (pointer: fine) { .trades a:hover span { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; } }
@media (min-width: 64em) {
  .story-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-text { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 2rem; margin-bottom: 1rem; }
  .story-text h2 { margin: 0; }
  .story-steps { align-self: end; }
  .diagram { grid-template-columns: auto minmax(3rem, 1fr) auto minmax(3rem, .75fr) minmax(17rem, 23rem); column-gap: 0; align-items: center;
    min-height: 30rem; }
  .node-call, .node-x { grid-column: auto; grid-row: 1; }
  .node-call { grid-template-columns: auto; justify-items: center; row-gap: .7rem; text-align: center; }
  .node-x { grid-template-columns: auto; justify-items: center; row-gap: .7rem; text-align: center; }
  .node-x .node-ring { margin: 0; width: 7rem; height: 7rem;
    box-shadow: 0 0 0 1rem var(--slate), 0 0 0 calc(1rem + 1px) rgb(242 240 236 / .22), 0 0 0 2.1rem var(--slate), 0 0 0 calc(2.1rem + 1px) rgb(242 240 236 / .12); }
  .node-x .node-ring img { width: 3.7rem; }
  .node-call .node-ring { width: 5.25rem; height: 5.25rem; }
  .node-call .node-ring .i { width: 1.9rem; height: 1.9rem; }
  .node-num { font-size: 1.375rem; }
  .node-txt { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .8rem; display: grid; justify-items: center;
    white-space: nowrap; }
  .node-call, .node-x { position: relative; }
  .node-x .node-txt { margin-top: 2.6rem; }
  .node-call .node-txt { left: 0; transform: none; justify-items: start; }
  .wire-1, .wire-2 { grid-column: auto; grid-row: 1; width: auto; height: 2px; margin: 0 1.75rem; align-self: center; transform-origin: 0 50%; }
  .wire-2 { margin-right: 0; }
  .trades-wrap { grid-column: auto; grid-row: 1; }
  .bus { left: 0; top: calc(100% / 14); bottom: calc(100% / 14); transform-origin: 50% 50%; }
  .trades li::before { left: 0; width: 2.25rem; }
  .trades a { padding-left: 3rem; min-height: clamp(3.9rem, 7.6vh, 5.25rem); font-size: 1.3rem; gap: 1.1rem; }
  .trades .ico { width: 2.6rem; height: 2.6rem; stroke-width: 1.7; }
}

/* pinned version (desktop, motion allowed): the sheet stays while the line draws; the heading sits top left, the caption
   of each phase bottom left, like the notes of a drawing. Set in CSS before first paint (.js = scripts run), so nothing
   jumps when home.js starts and a link to #urgencias lands without a shift; home.js marks the story .is-static when
   GSAP is missing (then it is the plain stacked version) */
@media (min-width: 64em) and (min-height: 42em) and (prefers-reduced-motion: no-preference) {
  .js .story:not(.is-static) { height: 300vh; }
  .js .story:not(.is-static) .story-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); padding-block: clamp(1.5rem, 4vh, 3rem); }
  .js .story:not(.is-static) .story-pin > .wrap { height: 100%; }
  .js .story:not(.is-static) .story-in { position: relative; height: 100%; display: grid; align-items: center; }
  .js .story:not(.is-static) .story-text { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .js .story:not(.is-static) .story-text h2 { position: absolute; top: 0; left: 0; }
  .js .story:not(.is-static) .story-steps { position: absolute; left: 0; bottom: 0; width: min(34rem, 44%); display: grid; }
  .js .story:not(.is-static) .story-cap { grid-area: 1 / 1; align-self: end; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.35; max-width: none; }
  .js .story:not(.is-static) .story-cap + .story-cap { opacity: 0; }   /* the captions take turns (home.js) */
  .js .story:not(.is-static) .diagram { min-height: 0; }
}

/* ---------- 4 · 24 h live dial ---------- */
.dial-sec { position: relative; overflow: clip; background: var(--slate-deep); transition: background-color 600ms var(--ease); }
.dial-sec.is-night { background: var(--slate-night); }
.dial-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 5rem); align-items: center; }
.dial-copy h2 { max-width: 17ch; }
.dial-now { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 1.25rem; max-width: 22ch; }
.dial-now time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dial-copy .big-phone { margin: .5rem 0 1.25rem; }
.dial-copy .note { margin: 1.25rem 0 0; }
.dial { position: relative; width: min(100%, 30rem); justify-self: center; color: var(--paper); }
.dial svg { width: 100%; height: auto; overflow: visible; }
.dial .ring { fill: none; stroke: currentColor; }
.dial .r-out { stroke-opacity: .55; stroke-width: 1.5; }
.dial .r-in { stroke-opacity: .2; stroke-width: 1; }
.dial .r-dash { stroke-opacity: .25; stroke-width: 1; stroke-dasharray: 2 6; }
.dial .t { stroke: currentColor; stroke-opacity: .5; stroke-width: 1.5; }
.dial .t-q { stroke-opacity: .22; stroke-width: 1; }
.dial .t-major { stroke-opacity: .9; stroke-width: 2.5; }
.dial .hl { fill: currentColor; fill-opacity: .72; font: 600 15px var(--font); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.dial .night-arc { fill: none; stroke: currentColor; stroke-opacity: .1; stroke-width: 14; }
.dial-legend { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 1.1rem 0 0; max-width: none;
  font: var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--granite); }
.dial-legend::before { content: ""; width: 1.6rem; height: .5rem; border-radius: 1px; background: rgb(242 240 236 / .16); }
.dial-sec.is-night .dial-legend::before { background: rgb(242 240 236 / .3); }
.dial .hand { transform-origin: 200px 200px; transform: rotate(var(--angle, 0deg)); transition: transform 900ms var(--ease); }
.dial .hand line { stroke: var(--green); stroke-width: 3; stroke-linecap: round; }
.dial .hand circle { fill: var(--green); }
.dial .hub { fill: var(--slate-deep); stroke: currentColor; stroke-width: 1.5; }
.dial-sec.is-night .hub { fill: var(--slate-night); }
.dial .sec { transform-origin: 200px 200px; transform: rotate(var(--sec, 0deg)); }
.dial .sec circle { fill: currentColor; fill-opacity: .8; }
.dial-sec.is-night .night-arc { stroke-opacity: .2; }
.dial-sec:not(.is-ready) .hand, .dial-sec:not(.is-ready) .sec { visibility: hidden; }   /* no JS: no fake time */
@media (prefers-reduced-motion: reduce) { .dial .sec { display: none; } }   /* nothing ticks; the hand moves once a minute */
@media (min-width: 56em) {
  .dial-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .dial-copy .big-phone { font-size: min(3.4rem, 5vw); }   /* fits the narrower column on one line (56–68em) */
}

/* ---------- 5 · así trabajamos: one continuous line ---------- */
.tl-wrap { position: relative; }
.tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.tl-line { position: absolute; left: 1.95rem; top: 2rem; bottom: 2rem; width: 1.5px; background: var(--slate); transform-origin: 50% 0; }
.tl-step { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; align-content: start; }
.tl-node { position: relative; z-index: 1; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--slate); color: var(--slate); transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.tl-node .ico { width: 2.25rem; height: 2.25rem; stroke-width: 2; }
.tl-node .ico * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.tl-step h3 { margin: .25rem 0 .35rem; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }
.tl-step p { margin: 0; color: var(--muted); max-width: 26rem; }
.tl-wrap.is-live .tl-step:not(.is-on) .tl-node { border-style: dashed; color: var(--granite-ink); }
.tl-wrap.is-live .tl-step.is-on .tl-node { background: var(--slate); color: var(--paper); }
@media (prefers-reduced-motion: no-preference) { .tl-wrap.is-live .tl-step.is-on .tl-node .ico * { animation: draw 800ms var(--ease-io) both; } }
@media (min-width: 64em) {
  .tl { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; }
  .tl-line { left: 2.5rem; right: calc(20% - 2.5rem); top: 2.5rem; bottom: auto; width: auto; height: 1.5px; transform-origin: 0 50%; }
  .tl-step { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .tl-node { width: 5rem; height: 5rem; }
  .tl-node .ico { width: 2.6rem; height: 2.6rem; stroke-width: 1.7; }
  .tl-step h3 { min-height: 2.36em; display: flex; align-items: flex-end; }
}

/* ---------- 6 · revisión gratuita del cuadro: the same tap-able panel as /cuadro (.xp, assets/css/p-campana.css) ---------- */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill .lbl { font-family: var(--font); }
.ill .ac { stroke-opacity: .55; }
.ill g:hover .sel { opacity: 1; transition: opacity 200ms var(--ease); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 7 · comunidades y negocios ---------- */
.aud-grid { display: grid; gap: 2.5rem; }
.aud-fig { margin: 0; color: var(--slate); }
.aud-fig .ill { width: min(100%, 26rem); }
.aud-item { display: grid; align-content: start; gap: .25rem; padding-top: 1.5rem; border-top: 1.5px solid var(--slate); }
.aud-item .ico { width: 2.75rem; height: 2.75rem; stroke-width: 1.8; margin-bottom: .75rem; }
.aud-item h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 2rem); letter-spacing: -.03em; margin-bottom: .4em; }
.aud-item p { color: var(--muted); margin-bottom: 1.25rem; }
.aud-item .link-arrow { justify-self: start; }
@media (min-width: 56em) {
  .aud-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .aud-fig { grid-row: 1 / span 2; align-self: center; }
  .aud-fig .ill { width: 100%; }
}

/* ---------- 8 · FAQ (home) ---------- */
.faq-in { display: grid; gap: 2rem; }
@media (min-width: 56em) {
  .faq-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
  .faq-in h2 { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ================= SHARED BLOCKS (all pages) ================= */

/* ---------- inner page hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: clip; padding-block: 2.25rem 3rem; }
.page-hero::before { /* the X's construction circles, quiet, top right */
  content: ""; position: absolute; z-index: -1; width: 34rem; aspect-ratio: 1; right: -16rem; top: -10rem;
  background: url("/assets/img/trazado.svg") center / contain no-repeat; opacity: .55; pointer-events: none; }
.page-hero .wrap { position: relative; }
.page-hero h1 { max-width: 19ch; font-size: clamp(2.35rem, 1.4rem + 4vw, 4.75rem); letter-spacing: -.04em; line-height: 1; }
.page-hero .lead { max-width: 42rem; }
.page-hero .big-phone { margin: .4rem 0 1.25rem; }
.page-hero .cta-row { margin-top: .25rem; }
.page-hero .svc-extra { margin-top: 1.25rem; }
.page-hero .hero-urgent { margin: 0 0 .75rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
@media (min-width: 48em) {
  .page-hero { padding-block: 4rem 4.75rem; }
  .page-hero::before { width: 48rem; right: -12rem; top: -12rem; opacity: .75; }
}
@media (min-width: 75em) { .page-hero::before { right: max(-10rem, calc((100vw - var(--wrap)) / 2 - 14rem)); } }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.75rem; font-size: .875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .7; }
.crumbs a { color: inherit; }
/* the four promises under a page hero: one spec strip, drawn ticks */
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 1.25rem 0 0; margin: 2rem 0 0;
  border-top: 1px solid var(--line); font-size: .9375rem; font-weight: 600; color: rgb(242 240 236 / .86); max-width: 50rem; }
.hero-proof li { display: inline-flex; align-items: center; gap: .55rem; }
/* phones: the call bar replaces the hero buttons (hidden), so the proof list follows the big number closely */
@media (max-width: 47.99em) { .page-hero .hero-proof { margin-top: 1rem; } }
.hero-proof li::before { content: ""; width: .8rem; height: .42rem; margin-top: -.2rem; border-left: 1.5px solid var(--granite);
  border-bottom: 1.5px solid var(--granite); transform: rotate(-45deg); }

/* ---------- services: rows with a drawn arrow (no numbers: not a sequence) ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--slate); }
.svc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: start;
  padding: 1.6rem .25rem 1.7rem; border-bottom: 1px solid var(--line-strong); }
.svc-num { display: none; }
.svc h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; }
/* 44 px box for the link itself (padding, cancelled by the margin: the row does not move) */
.svc h3 a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.svc p { grid-column: 1 / -1; margin: 0; color: var(--muted); max-width: 44rem; }
.svc .svc-go { grid-column: 2; grid-row: 1; align-self: center; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 1.5px solid var(--line-strong); border-radius: 50%;
  transition: transform 260ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease); }
/* focus ring around the whole row = on the link's own row-sized ::after (no :has(), so every browser shows it) */
.svc h3 a:focus-visible { outline: none; }
.svc h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover .svc-go { background: var(--slate); color: var(--paper); border-color: var(--slate); transform: rotate(-45deg); }
}
.svc:active .svc-go { transform: scale(.94); }
@media (min-width: 48em) {
  .svc { grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.2fr) auto; gap: 2rem; padding: 2.1rem .5rem; align-items: center; }
  .svc .svc-go, .svc p { grid-row: auto; grid-column: auto; }
}
@media (min-width: 64em) { .svc { grid-template-columns: minmax(12rem, 24rem) 1fr auto; gap: 2.5rem; } }
.svc-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 2rem 0 0; max-width: none; }

/* ---------- ordered steps: THE numbering of the site (drawn nodes on one line) ---------- */
.reasons, .prose ol { list-style: none; counter-reset: step; }
.reasons { position: relative; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.reasons > li, .prose ol > li { position: relative; counter-increment: step; }
.reasons > li { padding-left: 3.75rem; min-height: 2.75rem; }
.reasons > li::before, .prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border: 1.5px solid var(--slate); border-radius: 50%; background: var(--paper); font-size: .9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--slate); z-index: 1; }
.section-alt .reasons > li::before, .section-alt .prose ol > li::before { background: var(--paper-2); }
.reasons > li:not(:last-child)::after, .prose ol > li:not(:last-child)::after { /* the connecting line */
  content: ""; position: absolute; left: calc(1.3rem - .75px); top: 2.5rem; bottom: -1.85rem; width: 1.5px; background: var(--slate); opacity: .35; }
.reasons h3 { margin: .3rem 0 .4rem; }
.reasons p { margin: 0; color: var(--muted); }
.reasons > li > p:only-child { color: var(--slate); padding-top: .45rem; }
@media (min-width: 64em) {
  .reasons { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; }
  .reasons > li { padding-left: 0; padding-top: 3.75rem; }
  .reasons > li:not(:last-child)::after { left: 3.1rem; right: -2rem; top: 1.25rem; bottom: auto; width: auto; height: 1.5px; }
  .reasons > li > p:only-child { padding-top: 0; }
}

/* ---------- full-width call band ---------- */
.band { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space); }
.band-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.band-big { margin: 0; font-size: clamp(5.5rem, 3rem + 12vw, 13rem); font-weight: 800; letter-spacing: -.06em; line-height: .8;
  font-variant-numeric: tabular-nums; }
.band h2 { color: var(--paper); max-width: 18ch; }
.band p { color: rgb(242 240 236 / .88); }
.band .kicker { display: flex; color: var(--granite); }
.band .note { color: var(--granite); font-size: .9375rem; margin: 1.25rem 0 0; }
.band .big-phone { margin: .25rem 0 1.25rem; color: var(--paper); }
@media (min-width: 64em) { .band-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; } }

/* ---------- link rows ---------- */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1.5px solid var(--slate); }
.tasks a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: .8rem .25rem;
  border-bottom: 1px solid var(--line-strong); font-weight: 700; text-decoration: none; transition: padding 300ms var(--ease), background-color 200ms var(--ease); }
.tasks a .i-arrow { transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .tasks a:hover { padding-left: .75rem; }
  .tasks a:hover .i-arrow { transform: translateX(5px); }
}
@media (min-width: 48em) { .tasks { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

/* ---------- drawing-sheet cards ---------- */
.cards { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.card { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); }
.card::before { content: ""; position: absolute; inset: .55rem; pointer-events: none; opacity: .45;
  background:
    linear-gradient(var(--slate), var(--slate)) 0 0 / .8rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 0 0 / 1.5px .8rem no-repeat,
    linear-gradient(var(--slate), var(--slate)) 100% 100% / .8rem 1.5px no-repeat, linear-gradient(var(--slate), var(--slate)) 100% 100% / 1.5px .8rem no-repeat; }
.card .kicker { margin-bottom: .75rem; }
.card ul { list-style: none; padding: 0; margin: .5rem 0 1.5rem; }
.card li { position: relative; padding: .55rem 0 .55rem 1.5rem; border-top: 1px solid var(--line); }
.card li::before { content: ""; position: absolute; left: .15rem; top: 1.15rem; width: .45rem; height: .45rem; border: 1.5px solid var(--slate); border-radius: 50%; }
.card p { margin: 0; color: var(--muted); }
.card .link-arrow { margin-top: auto; align-self: flex-start; }
@media (min-width: 48em) { .cards { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (min-width: 64em) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- zones (contacto) ---------- */
.zones-in { display: grid; gap: 2.5rem; align-items: center; }
.zones-map { position: relative; width: min(72%, 26rem); justify-self: center; color: var(--slate); }
.zones-map svg { width: 100%; height: auto; }
@media (min-width: 48em) { .zones-in { grid-template-columns: 1.1fr .9fr; } }
/* text + agent D's map ({{zona_mapa}}): every shown child becomes one equal column. Without the map the text is the only
   child: then the contact card moves beside the text, so no half of the section stays empty */
.zona-in { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); align-items: center; }
.zona-txt { max-width: 46rem; }
.zona-txt .ficha { margin-top: 1.75rem; }
@media (min-width: 56em) {
  .zona-in { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .zona-txt:only-child { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
    align-items: center; max-width: none; }
  .zona-txt:only-child > * { grid-column: 1; }
  .zona-txt:only-child > .ficha { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; grid-template-columns: minmax(0, 1fr); }
  .zona-txt:only-child > .ficha > div:nth-child(2) { border-top: 1px solid var(--line-strong); }
  .zona-txt:only-child > .ficha > div:nth-child(even) { border-left: 0; }
}

/* ---------- CTA + form ---------- */
.cta-final .split { align-items: center; }
.cta-final .big-phone { margin: .25rem 0 1rem; }
.cta-final.on-dark { position: relative; isolation: isolate; overflow: clip; }
.cta-zone { color: var(--granite); max-width: 34rem; }
.form-wrap { position: relative; background: var(--sheet); color: var(--slate); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); box-shadow: 0 1px 0 rgb(27 42 56 / .04), 0 24px 48px -28px rgb(27 42 56 / .4); }
.on-dark .form-wrap { --ink: var(--slate); --muted: var(--granite-ink); --focus: var(--slate); --line: rgb(27 42 56 / .13);
  --line-strong: rgb(27 42 56 / .3); --btn-bg: var(--slate); --btn-fg: var(--paper); --btn-line: var(--slate); border-color: transparent;
  box-shadow: 0 30px 60px -30px rgb(4 8 12 / .7); }
.on-dark .form-wrap ::selection { background: var(--slate); color: var(--paper); }
.form-wrap h3 { color: var(--slate); }
.wa-form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 700; font-size: .9688rem; }
.field input, .field textarea { width: 100%; min-height: 3.1rem; padding: .75rem .9rem; font: 400 1rem/1.4 var(--font); color: var(--slate);
  background: #fff; border: 1.5px solid var(--granite-ink); border-radius: var(--r); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.wa-form [aria-invalid="true"] { border-color: #A3261B; border-width: 2px; }
.form-error { margin: 0; font-weight: 600; color: #A3261B; }
.form-call { margin: 0; font-weight: 600; }
/* 16 px like the running text: on a short page (/contacto) this note is the longest visible text block, and phones read
   anything smaller as small print (cockpit: body text on phones ≥ 16 px) */
.privacy-note { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--granite-ink); }
.privacy-note a, .form-call a { color: var(--slate); }

/* ---------- long text, legal pages, lists, FAQ ---------- */
.prose, .legal-text .wrap > * { max-width: 46rem; }
.prose h2, .legal-text h2 { font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.1rem); margin-top: 2.1em; }
.prose h3, .legal-text h3 { margin-top: 1.75em; }
.prose > :first-child { margin-top: 0; }
.legal-text { background: var(--paper); }
.legal-text h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); }
.legal-text a { overflow-wrap: anywhere; }
.prose ul, .legal-text ul { list-style: none; padding: 0; }
.prose ul li, .legal-text ul li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
.prose ul li::before, .legal-text ul li::before { content: ""; position: absolute; left: .15rem; top: .6em; width: .45rem; height: .45rem;
  border: 1.5px solid var(--slate); border-radius: 50%; }
.prose ol { padding: 0; margin: 0 0 1em; display: grid; gap: 1.6rem; }
.prose ol > li { padding: .45rem 0 0 3.75rem; min-height: 2.6rem; }
.checks { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.checks li { position: relative; padding: .95rem 0 .95rem 2.5rem; border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: .25rem; top: 1.3rem; width: 1rem; height: .5rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.faq { max-width: 52rem; border-top: 1.5px solid var(--slate); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { position: relative; display: flex; justify-content: space-between; gap: 1.25rem; align-items: center; min-height: 3.75rem;
  padding: 1.15rem 0; font-weight: 700; font-size: 1.0938rem; line-height: 1.35; cursor: pointer; list-style: none;
  transition: color 200ms var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center / .7rem 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px .7rem no-repeat;
  transition: transform 300ms var(--ease), background-size 300ms var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); background-size: .7rem 1.5px, 1.5px 0; }
/* open: the isotipo's green bar beside the minus, as on the picker tiles; one per list (the first open answer), so a
   screen never shows two greens */
.faq details[open] summary::before { content: ""; position: absolute; top: calc(50% - 1.25rem); right: 1.85rem; width: 1.15rem; height: .3rem;
  background: var(--green); transform: rotate(-52deg); border-radius: 1px; }
.faq details[open] ~ details[open] summary::before { content: none; }
.faq details p { margin: 0 0 1.4rem; color: var(--muted); padding-right: 3rem; }
@media (prefers-reduced-motion: no-preference) { .faq details[open] p { animation: rise 420ms var(--ease) both; } }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { border-color: var(--slate); } }

/* ---------- footer ---------- */
.site-footer { position: relative; overflow: clip; background: var(--slate-deep); color: var(--paper); --focus: var(--paper);
  /* + what covers the screen bottom (call bar, open cookie notice): the last links always scroll clear of it, on slate */
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem) calc(1.5rem + var(--cover-b)); }
.site-footer::before { content: ""; position: absolute; width: 44rem; aspect-ratio: 1; right: -18rem; bottom: -20rem;
  background: url("/assets/img/trazado.svg") center / contain no-repeat; opacity: .5; pointer-events: none; }
.site-footer .wrap { position: relative; }
.site-footer a { color: var(--paper); }
.footer-hero { display: grid; gap: 1.25rem; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); margin-bottom: 2.5rem; border-bottom: 1px solid rgb(242 240 236 / .12); }
.footer-claim { margin: 0; font-size: clamp(2.1rem, 1.2rem + 4vw, 4.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; max-width: 14ch; }
.footer-phone { justify-self: start; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: .15em; }
.footer-top { display: grid; gap: 2.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(242 240 236 / .12); }
.footer-note { margin: 1.1rem 0 0; color: var(--granite); font-size: .9375rem; max-width: 22ch; }
.footer-h { margin: 0 0 .9rem; font: var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--granite); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: .35rem; line-height: 1.3; text-decoration: none; }   /* a wrapped link reads as one item */
.footer-col p { margin: 0; padding-block: .3rem; color: rgb(242 240 236 / .86); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover, .footer-legal a:hover { text-decoration: underline; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1.25rem 0 0; max-width: none; font-size: .875rem; color: var(--granite); align-items: center; }
.footer-legal a, .footer-legal .linklike { display: inline-flex; align-items: center; min-height: 2.75rem; color: rgb(242 240 236 / .86); text-decoration: none; }
.footer-legal > span { margin-right: auto; }
.footer-col .ficha-google { margin: .25rem 0 0; padding: 0; }
.footer-col .ficha-google .link-arrow { font-weight: inherit; background: none; padding-block: 0; margin-block: 0; }
.footer-col .ficha-google .i-arrow { display: none; }
@media (max-width: 47.99em) { .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 48em) {
  .footer-hero { grid-template-columns: 1fr auto; align-items: end; }
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .footer-top { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

/* ---------- phones: floating call bar ---------- */
.callbar { position: fixed; z-index: 30; left: .5rem; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem; padding: .375rem; border-radius: 10px;
  background: rgb(19 32 41 / .97); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgb(242 240 236 / .14); box-shadow: 0 18px 40px -14px rgb(4 8 12 / .65); --focus: var(--paper); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .callbar { background: var(--slate-deep); } }
.callbar a { display: flex; align-items: center; gap: .65rem; min-height: 3.25rem; border-radius: var(--r); text-decoration: none; font-weight: 700;
  -webkit-user-select: none; user-select: none; transition: transform 140ms var(--ease); }
.callbar a:active { transform: scale(.97); }
.callbar-call { padding: .35rem .9rem .35rem .4rem; background: var(--paper); color: var(--slate); }
.callbar-call .i { width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 50%; background: var(--slate); color: var(--paper); stroke-width: 2.2; }
.callbar-txt { display: grid; line-height: 1.12; min-width: 0; }
.callbar-label { font-size: 1.0625rem; }
.callbar-num { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--granite-ink); white-space: nowrap; }
.callbar-wa { padding: .35rem .85rem; color: var(--paper); border: 1.5px solid rgb(242 240 236 / .45); font-size: .9688rem; }
.callbar-wa .i { width: 1.3rem; height: 1.3rem; }
@media (max-width: 24em) { .callbar-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 48em) { .callbar { display: none; } }

/* ---------- cookie notice: compact, never blocks, never covers the phone or the call buttons ---------- */
.cc-bar { position: fixed; z-index: 35; left: .5rem; right: .5rem; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + .25rem);
  display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem .8rem; background: var(--paper); color: var(--slate);
  border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 14px 36px -14px rgb(4 8 12 / .55); }
.cc-bar[hidden] { display: none; }
.cc-bar p { flex: 1 1 auto; margin: 0; font-size: .75rem; line-height: 1.38; }
.cc-bar p a { white-space: nowrap; }
.cc-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; }
.cc-actions .btn { min-height: 2.75rem; padding: .45rem .9rem; font-size: .875rem; }
.cc-actions .btn::before, .cc-actions .btn::after { display: none; }
.btn-quiet { --btn-line: var(--slate); --btn-fg: var(--paper); }
@media (min-width: 48em) {
  .cc-bar { left: auto; right: 1.5rem; bottom: 1.5rem; max-width: 27rem; padding: .9rem 1rem; border-radius: var(--r); }
  .cc-bar p { font-size: .8125rem; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 62vh; display: grid; align-content: center; }
.notfound .wrap { display: grid; gap: 2rem; align-items: center; }
.nf-art { width: min(70%, 20rem); color: var(--paper); }
.nf-art svg { width: 100%; height: auto; overflow: visible; }
.nf-art .plano-x path:nth-child(1) { transform: translate(-7%, 3%) rotate(-9deg); }
.nf-art .plano-x path:nth-child(2) { transform: translate(14%, 12%) rotate(14deg); }
.nf-art .plano-x path:nth-child(3) { transform: translate(18%, -22%) rotate(-21deg); }
@media (min-width: 56em) { .notfound .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .nf-art { justify-self: end; width: 100%; } }

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .magnetic { will-change: auto; }
}
.notfound::before { display: none; }