/* fuerteventura.properties — public site theme, TRANSCRIBED from the design
 * model ~/design/fuerteventura.properties/diseno-completo/ (.dc.html files).
 * The model is the spec: every value here mirrors its inline styles 1:1 (the
 * CSP forbids inline styles, so model blocks become classes). Do NOT
 * re-interpret: change values only when the model (or Dani) changes.
 * Palette (LEEME.txt): Tinta #171a1c · Cal #f7f5f0 · Teja oklch(0.5 0.105 47)
 * · Teja clara oklch(0.72 0.09 47) · Piedra #6e7478.
 * Font self-hosted (CSP): Albert Sans variable 400-700 woff2.
 * The model ships NO media queries — desktop-first as designed; the
 * responsive pass is a later, separate authored step (aloe precedent). */

/* ── Fonts ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/albertsans-400-700-italic-latin-ext-3baf8d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/albertsans-400-700-italic-latin-a7ee66.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/albertsans-400-700-normal-latin-ext-c1263c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/albertsans-400-700-normal-latin-d33f7b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  --fp-cal:      #f7f5f0;
  --fp-tinta:    #171a1c;
  --fp-piedra:   #6e7478;
  --fp-teja:     oklch(0.5 0.105 47);
  --fp-teja-d:   oklch(0.44 0.105 47);   /* hover of the primary button */
  --fp-teja-l:   oklch(0.72 0.09 47);    /* teja clara — only on dark   */
  --fp-line:     rgba(0, 0, 0, .09);
  --fp-line-mid: rgba(0, 0, 0, .12);
  --fp-line-str: rgba(0, 0, 0, .14);
  --fp-cal-12:   rgba(247, 245, 240, .12);
  --fp-cal-16:   rgba(247, 245, 240, .16);
  --fp-sans:     'Albert Sans', system-ui, sans-serif;
  --fp-mono:     ui-monospace, Menlo, monospace;

  /* Core module library mapping (--mod-*): library modules render in-brand */
  --site-accent: var(--fp-teja);
  --mod-bg:      var(--fp-cal);
  --mod-fg:      var(--fp-tinta);
  --mod-muted:   var(--fp-piedra);
  --mod-accent:  var(--fp-teja);
  --mod-accent-fg: var(--fp-cal);
  --mod-surface: #fff;
  --mod-line:    var(--fp-line);
  --mod-radius:  10px;
  --mod-maxw:    1240px;
  --mod-space:   28px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body.site {
  font-family: var(--fp-sans);
  background: var(--fp-cal);
  color: var(--fp-tinta);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1; }
/* Markdown-rendered pages (the legal set — slots mode → article.entry):
 * fp prose. Authored pages carry their own fp-* vocabulary instead.
 * Layout comes from the .fp-doc documentation grid (views/site/page.php,
 * aloe recipe): non-sticky sidebar of curated link groups + the body. */
.site-main > .entry { max-width: 780px; margin: 0 auto; padding: 64px 32px 88px; }
.site-main > .fp-doc { max-width: 1240px; margin: 0 auto; padding: 64px 32px 88px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .site-main > .fp-doc { grid-template-columns: 1fr; gap: 40px; } }
.fp-doc-side { display: flex; flex-direction: column; gap: 30px; border-inline-end: 1px solid var(--fp-line-mid); padding-inline-end: 30px; }
@media (max-width: 900px) { .fp-doc-side { border-inline-end: 0; padding-inline-end: 0; } }
.fp-doc-group { display: flex; flex-direction: column; gap: 9px; }
.fp-doc-eyebrow { font: 500 10px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-piedra); margin-bottom: 5px; }
.fp-doc-group a { text-decoration: none; font: 500 14px/1.4 var(--fp-sans); color: var(--fp-tinta); }
.fp-doc-group a:hover { color: var(--fp-teja); }
.fp-doc-group a.on { color: var(--fp-teja); font-weight: 600; border-inline-start: 2px solid var(--fp-teja); padding-inline-start: 10px; margin-inline-start: -12px; }
.fp-doc-body { max-width: 720px; }
.entry { font: 400 15.5px/1.75 var(--fp-sans); color: var(--fp-piedra); }
.entry h1 { font: 600 34px/1.15 var(--fp-sans); letter-spacing: -.01em; color: var(--fp-tinta); margin: 0 0 20px; }
.entry h2 { font: 600 19px/1.3 var(--fp-sans); color: var(--fp-tinta); margin: 1.9em 0 .55em; }
.entry p, .entry ul { margin: 0 0 1em; }
.entry ul { padding-inline-start: 22px; }
.entry a { color: var(--fp-teja); }
.entry strong { color: var(--fp-tinta); }
.entry code { font: 500 13px/1 var(--fp-mono); background: rgba(0, 0, 0, .05); padding: 2px 6px; border-radius: 4px; }
a { color: var(--fp-tinta); }
a:hover { color: var(--fp-teja); }
/* Hiding mechanism lives in core (clip-path — the physical left:-9999px
 * override inflated RTL scrollWidth ~8×: in RTL the page GROWS leftward). */
.skip-link:focus { background: #fff; color: var(--fp-tinta); padding: 8px 12px; }

/* Motion keyframes (fx engine — the model's fx.js injected these; CSP moves
 * them here, site.js only assigns animation via CSSOM). */
@keyframes fpFloat { 0%, 100% { transform: translateY(0) rotate(var(--fpr, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--fpr, 0deg)); } }
@keyframes fpPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* ── Shared vocabulary ─────────────────────────────────────────────── */
.fp-wrap { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* Bands paint bg/borders only; the INNER wrap carries the vertical rhythm
 * (mirrors the model's outer-div + padded-inner structure on every page). */
.fp-white { background: #fff; }
.fp-dark { background:
    radial-gradient(1100px 620px at 88% -12%, rgba(156, 82, 40, .16), transparent 62%),
    radial-gradient(900px 540px at -8% 112%, rgba(156, 82, 40, .10), transparent 58%),
    var(--fp-tinta);
  color: var(--fp-cal); }
.fp-bt { border-top: 1px solid var(--fp-line); }
.fp-bb { border-bottom: 1px solid var(--fp-line); }
.fp-mb52 { margin-bottom: 52px; }

.fp-kick { font: 500 11px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-teja); }
.fp-kick--xs { font-size: 10px; }
.fp-dark .fp-kick, .fp-kick--light { color: var(--fp-teja-l); }

.fp-h1 { margin: 0; font: 600 58px/1.06 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); text-wrap: pretty; }
.fp-h1 .fp-acc { color: var(--fp-teja); }
.fp-h2 { margin: 0; font: 600 38px/1.1 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); text-wrap: pretty; }
.fp-dark .fp-h2 { color: var(--fp-cal); }
.fp-lead { margin: 0; max-width: 540px; font: 400 17.5px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-p { margin: 0; font: 400 16px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }

.fp-col { display: flex; flex-direction: column; }
.fp-gap26 { gap: 26px; } .fp-gap18 { gap: 18px; } .fp-gap14 { gap: 14px; } .fp-gap12 { gap: 12px; }

/* Buttons */
.fp-btn { display: inline-block; text-decoration: none; font: 600 14px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; transition: background .2s, color .2s, border-color .2s; }
.fp-btn--primary { color: var(--fp-cal); background: var(--fp-teja); padding: 17px 28px; }
.fp-btn--primary:hover { background: var(--fp-teja-d); color: var(--fp-cal); }
.fp-btn--outline { color: var(--fp-tinta); border: 1px solid var(--fp-tinta); padding: 16px 28px; }
.fp-btn--outline:hover { background: var(--fp-tinta); color: var(--fp-cal); }
.fp-btn--dark { color: var(--fp-cal); background: var(--fp-tinta); padding: 16px 26px; align-self: flex-start; }
.fp-btn--dark:hover { background: var(--fp-teja); color: var(--fp-cal); }
.fp-btn--amber { color: var(--fp-tinta); background: var(--fp-teja-l); padding: 16px 26px; }
.fp-btn--amber:hover { background: var(--fp-cal); color: var(--fp-tinta); }
.fp-btn--ghost { color: var(--fp-cal); border: 1px solid rgba(247, 245, 240, .35); padding: 15px 26px; }
.fp-btn--ghost:hover { border-color: var(--fp-cal); color: var(--fp-cal); }
.fp-btn--sm { font-size: 13px; padding: 12px 20px; }
.fp-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Inline arrow links */
.fp-link-teja { text-decoration: none; font: 600 12.5px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fp-teja); }
.fp-link-tejal { text-decoration: none; font: 600 12.5px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fp-teja-l); margin-top: 6px; }
.fp-link-tejal:hover { color: var(--fp-cal); }
.fp-morelink { text-decoration: none; font: 600 13px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fp-tinta); border-bottom: 2px solid var(--fp-teja); padding-bottom: 6px; align-self: flex-start; }
.fp-p + .fp-morelink { margin-top: 20px; } /* gapless flex columns glued the link to the paragraph */

/* Trust pills */
.fp-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.fp-pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fp-line-str); border-radius: 99px; padding: 9px 15px; font: 500 12.5px/1 var(--fp-sans); color: var(--fp-tinta); }

/* Icon sizing + color helpers (SVG style attrs from the model → classes;
 * fill/stroke that were attributes in the model stay attributes). */
.fp-i17 { width: 17px; height: 17px; flex: none; }
.fp-i18 { width: 18px; height: 18px; flex: none; }
.fp-i26 { width: 26px; height: 26px; flex: none; display: block; }
.fp-i28 { width: 28px; height: 28px; flex: none; }
.fp-i30 { width: 30px; height: 30px; flex: none; }
.fp-i32 { width: 32px; height: 32px; display: block; }
.fp-i38 { width: 38px; height: 38px; display: block; }
.fp-i44 { width: 44px; height: 44px; margin-bottom: 4px; }
.fp-fill-teja { fill: var(--fp-teja); }
.fp-fill-tejal { fill: var(--fp-teja-l); }
.fp-fill-cal { fill: var(--fp-cal); }
.fp-stroke-teja { stroke: var(--fp-teja); }
.fp-stroke-tejal { stroke: var(--fp-teja-l); }
.fp-stroke-tinta { stroke: var(--fp-tinta); }

/* Section header row (title + side link) */
.fp-secrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 52px; }
.fp-sechead { display: flex; flex-direction: column; gap: 14px; }

/* ── Announcement bar ──────────────────────────────────────────────── */
.fp-announce { background: var(--fp-tinta); color: var(--fp-cal); text-align: center; padding: 10px 32px; font: 500 12.5px/1.5 var(--fp-sans); letter-spacing: .02em; }
.fp-announce a { color: var(--fp-teja-l); font-weight: 600; }
.fp-announce a:hover { color: var(--fp-cal); }

/* ── Header ────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(247, 245, 240, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--fp-line); }
body.has-adminbar .site-header { top: var(--adminbar-h, 44px); }
.site-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.site-brand img { height: 41px; width: auto; display: block; }   /* web-dark slot is INK-TRIMMED (1367x280) — 41px ink = the old 52px padded box's ink */
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-nav-home { display: none; }   /* panel-only: the brand covers desktop */
.site-nav a { text-decoration: none; font: 500 13.5px/1 var(--fp-sans); color: var(--fp-tinta); }
.site-nav a:hover, .site-nav a.on { color: var(--fp-teja); }
.site-actions { display: flex; align-items: center; gap: 10px; flex: none; }   /* tight: the language selector needs the room when the ten-language programme lands (Dani 2026-07-31) */
.site-actions-menu, .site-actions-end { display: contents; }
/* Language dropdown + account icon (fleet end-cluster, Dani 2026-07-30 —
 * olga/aloe's CSS-only details/summary pattern in fp's square-cornered
 * clothes). The switcher only renders with >1 language. */
.site-lang { position: relative; }
.site-lang > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding-inline: 13px; border-radius: 6px;
    border: 1px solid var(--fp-line-str); color: var(--fp-tinta);
    font: 600 12.5px/1 var(--fp-sans); letter-spacing: .08em;
    transition: border-color .2s, background .2s, color .2s;
}
.site-lang > summary::-webkit-details-marker { display: none; }
.site-lang > summary:hover { border-color: var(--fp-teja); color: var(--fp-teja); }
.site-lang > summary svg { width: 14px; height: 14px; }
.site-lang > summary .chev { width: 10px; height: 10px; transition: transform .2s; }
.site-lang[open] > summary { border-color: var(--fp-teja); color: var(--fp-teja); }
.site-lang[open] > summary .chev { transform: rotate(180deg); }
.site-lang-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
    z-index: 70; padding: 8px;
    background: #fff; border: 1px solid var(--fp-line-mid); border-radius: 10px;
    box-shadow: 0 22px 50px rgba(23, 26, 28, .14);
    /* Two columns: a single column runs off the bar once the ten-language
       programme lands (aloe lesson 2026-07-27). */
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 320px;
}
.site-lang-panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 6px; text-decoration: none;
    font: 400 14px/1.2 var(--fp-sans); color: var(--fp-tinta); white-space: nowrap;
}
.site-lang-panel a:hover { background: var(--fp-cal); color: var(--fp-teja); }
.site-lang-panel a.on { color: var(--fp-teja); font-weight: 600; }
.site-lang-panel a.on::after { content: '✓'; color: var(--fp-teja); margin-inline-start: auto; font-size: 12px; }
.site-lang-panel .c { font: 600 11.5px/1 var(--fp-sans); color: var(--fp-piedra); inline-size: 22px; }
/* Services submenu (desktop only, Dani 2026-07-31) — the language-dropdown
 * pattern moved into the nav: details/summary, white 2-column panel. The
 * phone burger shows the plain link instead (.site-navsub-flat). */
.site-navsub { position: relative; }
.site-navsub > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: 500 13.5px/1 var(--fp-sans); color: var(--fp-tinta); transition: color .2s; }
.site-navsub > summary::-webkit-details-marker { display: none; }
.site-navsub > summary:hover, .site-navsub[open] > summary, .site-navsub > summary.on { color: var(--fp-teja); }
.site-navsub > summary .chev { width: 10px; height: 10px; transition: transform .2s; }
.site-navsub[open] > summary .chev { transform: rotate(180deg); }
.site-navsub-panel { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); top: calc(100% + 16px); z-index: 70; padding: 16px 18px;  background: #fff; border: 1px solid var(--fp-line-mid); border-radius: 10px; box-shadow: 0 22px 50px rgba(23, 26, 28, .14); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 460px; }
.site-navsub-panel a { display: flex; align-items: center; padding: 9px 12px; border-radius: 6px; text-decoration: none; font: 400 13.5px/1.25 var(--fp-sans); color: var(--fp-tinta); white-space: nowrap; }
.site-navsub-panel a:hover { background: var(--fp-cal); color: var(--fp-teja); }
.site-navsub-panel a.on { color: var(--fp-teja); font-weight: 600; }
.site-navsub-panel a.all { grid-column: 1 / -1; font-weight: 600; color: var(--fp-teja); border-bottom: 1px solid var(--fp-line); border-radius: 0; margin-bottom: 4px; padding-bottom: 11px; }
.site-navsub-flat { display: none; }
.site-actions a.site-account {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 6px;
    border: 1px solid var(--fp-line-str); color: var(--fp-tinta);
    transition: border-color .2s, background .2s, color .2s;
}
.site-actions a.site-account:hover { background: var(--fp-teja); border-color: var(--fp-teja); color: var(--fp-cal); }

/* Burger (chrome function — the model is desktop-only; the drawer is the
 * minimum viable mobile chrome, aloe pattern). */
.site-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.site-burger span { display: block; width: 22px; height: 2px; background: var(--fp-tinta); margin: 5px 0; }
@media (max-width: 1180px) {
  /* Far end of the cluster (Dani 2026-08-01); flex order mirrors in RTL. */
  .site-burger { display: block; order: 10; }
  /* Full-screen menu sliding from the inline end (clonext.com pattern,
     Dani 2026-08-01). The header's backdrop-filter would TRAP a fixed
     child (it forms a containing block — the clonext lesson), so the
     blur goes at these widths: the bar is 94% opaque cal, the eye
     doesn't miss it. z 50 keeps the header bar (z 60) on top, so the
     burger stays reachable as the close control and morphs to an X. */
  .site-header { backdrop-filter: none; }
  /* The panel is a CHILD of .site-header-inner: within that context the
     fixed nav (z 50) paints over the bar's STATIC children — including
     the burger, which stops being clickable. Lift brand + actions above
     the panel instead; padding clears announcement (72) + bar (65). */
  .site-brand, .site-actions { position: relative; z-index: 60; }
  .site-nav { display: flex; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--fp-cal); flex-direction: column; align-items: flex-start; gap: 16px;
    padding: 110px 32px 40px; overflow-y: auto;   /* clears the 64px bar (announcement gone 2026-08-01) */
    transform: translateX(100%); visibility: hidden;
    transition: transform .26s cubic-bezier(.22,1,.36,1), visibility .26s; }
  [dir="rtl"] .site-nav { transform: translateX(-100%); }
  .site-header.is-open .site-nav { transform: none; visibility: visible; }
  .site-nav-home { display: flex; }
  html:has(.site-header.is-open) { overflow: hidden; }
  .site-nav > a, .site-nav .site-navsub-flat { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--fp-line); font-size: 17px; }
  .site-burger span { transition: transform .2s, opacity .2s; }
  .site-header.is-open .site-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .site-burger span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .site-nav, .site-burger span { transition: none; } }
  /* Icons stay in the bar at every width (aloe doctrine); just tighter. */
  .site-lang > summary { padding-inline: 10px; }
  .site-navsub { display: none; }
  .site-navsub-flat { display: block; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.fp-hero { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; padding-top: 80px; padding-bottom: 96px; }
.fp-hero-copy { flex: 1.2; min-width: 420px; display: flex; flex-direction: column; gap: 26px; }
.fp-hero-art { flex: 1; min-width: 420px; max-width: 600px; position: relative; min-height: 560px; }

/* Portal collage card */
.fp-portal { position: absolute; top: 16px; right: 0; bottom: 44px; left: 28px; background: var(--fp-tinta); border-radius: 18px; padding: 32px; overflow: hidden; display: flex; flex-direction: column; gap: 13px; box-shadow: 0 24px 60px rgba(23, 26, 28, .22); }
.fp-portal-wm { position: absolute; right: -90px; bottom: -100px; width: 340px; height: 340px; fill: var(--fp-cal); opacity: .05; z-index: 0; }   /* fx prep skips sub-.95-opacity decoratives (site.js hide guard) — no !important needed */
.fp-portal-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(247, 245, 240, .14); }
.fp-portal-tag { font: 600 11px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 245, 240, .65); }
.fp-live { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 600 9.5px/1 var(--fp-mono); letter-spacing: .12em; color: var(--fp-teja-l); }
.fp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fp-teja-l); }
.fp-portal-row { position: relative; z-index: 1; background: rgba(247, 245, 240, .07); border-radius: 10px; padding: 14px 16px; display: flex; gap: 13px; align-items: center; }
.fp-portal-row > span { display: flex; flex-direction: column; gap: 3px; }
.fp-portal-row .t { font: 600 14px/1.3 var(--fp-sans); color: var(--fp-cal); }
.fp-portal-row .s { font: 400 12px/1.4 var(--fp-sans); color: rgba(247, 245, 240, .5); }
.fp-portal--in { position: relative; inset: auto; width: 100%; }   /* in-flow reuse of the hero portal card. RELATIVE, not static: the absolute watermark needs the card as containing block or it escapes the overflow clip (+90px at 390) */
/* Get-started contact box (home leadbox band): phone+mail rows, filled look
 * so the left column keeps pace with the form's height. */
.fp-talkbox { background: var(--fp-cal); border: 1px solid var(--fp-line); border-radius: 12px; padding: 24px 26px; display: flex; flex-direction: column; gap: 20px; }
.fp-talkrow { display: flex; gap: 16px; align-items: flex-start; }
.fp-talkrow svg { width: 26px; height: 26px; fill: none; stroke: var(--fp-teja); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; margin-top: 2px; }
.fp-talkrow > span { display: flex; flex-direction: column; gap: 3px; }
.fp-talkrow .l { font: 500 10px/1 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-piedra); }
.fp-talkrow .v { font: 600 16.5px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-talkrow .v a { color: var(--fp-tinta); text-decoration: none; }
.fp-talkrow .v a:hover { color: var(--fp-teja); }
.fp-talkrow .s { font: 400 13px/1.5 var(--fp-sans); color: var(--fp-piedra); }
.fp-portal-note { margin-top: auto; text-align: right; font: 500 9.5px/1 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 245, 240, .35); }

/* Floating cards */
.fp-float-help { position: absolute; left: 0; bottom: 0; width: 238px; background: #fff; border: 1px solid var(--fp-line); border-radius: 14px; padding: 22px; transform: rotate(1.8deg); box-shadow: 0 18px 44px rgba(23, 26, 28, .16); display: flex; flex-direction: column; gap: 10px; }
.fp-float-help .t { font: 600 15px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-float-stat { position: absolute; right: -4px; top: -12px; background: var(--fp-teja); border-radius: 12px; padding: 16px 20px; transform: rotate(2.5deg); box-shadow: 0 14px 34px rgba(23, 26, 28, .2); display: flex; flex-direction: column; gap: 3px; }
.fp-float-stat .n { font: 600 26px/1 var(--fp-sans); color: var(--fp-cal); }
.fp-float-stat .s { font: 400 12px/1.3 var(--fp-sans); color: rgba(247, 245, 240, .85); }

/* ── Stats strip ───────────────────────────────────────────────────── */
.fp-statstrip { border-top: 1px solid var(--fp-line); border-bottom: 1px solid var(--fp-line); }
.fp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--fp-line); }
.fp-stat { background: var(--fp-cal); padding: 30px 28px; display: flex; flex-direction: column; gap: 6px; }
.fp-stat .n { font: 600 32px/1 var(--fp-sans); color: var(--fp-tinta); }
.fp-stat .s { font: 400 13.5px/1.4 var(--fp-sans); color: var(--fp-piedra); }

/* ── Services grid (home + services page) ──────────────────────────── */
.fp-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--fp-line); border: 1px solid var(--fp-line); }
.fp-svc { text-decoration: none; background: #fff; padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start; transition: background .3s, transform .3s; }
.fp-svc:hover { background: var(--fp-cal); transform: translateY(-3px); }
.fp-svc-ic { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; width: auto; }
.fp-svc-num { font: 500 10px/1 var(--fp-mono); color: rgba(0, 0, 0, .35); }
.fp-svc-txt { display: flex; flex-direction: column; gap: 5px; }
.fp-svc-t { font: 600 16.5px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-svc-d { font: 400 13.5px/1.5 var(--fp-sans); color: var(--fp-piedra); }

/* ── Solutions cards (dark band) ───────────────────────────────────── */
.fp-sols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fp-sol { border: 1px solid var(--fp-cal-16); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.fp-sol--hot { border-color: var(--fp-teja-l); background: rgba(214, 154, 114, .08); }
.fp-sol .t { font: 600 16px/1.3 var(--fp-sans); color: var(--fp-cal); }
.fp-sol .d { font: 400 13.5px/1.55 var(--fp-sans); color: rgba(247, 245, 240, .6); text-wrap: pretty; }

/* ── Split section (switch teaser) ─────────────────────────────────── */
.fp-split { display: flex; gap: 64px; flex-wrap: wrap; padding-top: 88px; padding-bottom: 88px; }
.fp-split-a { flex: 1; min-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.fp-steps { flex: 1; min-width: 380px; display: flex; flex-direction: column; }
.fp-step { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--fp-line-mid); align-items: flex-start; }
.fp-step:last-child { border-bottom: 1px solid var(--fp-line-mid); }
.fp-step-txt { display: flex; flex-direction: column; gap: 4px; }
.fp-step .t { font: 600 16px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-step .d { font: 400 14px/1.5 var(--fp-sans); color: var(--fp-piedra); }

/* ── Area cards ────────────────────────────────────────────────────── */
.fp-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.fp-area { background: var(--fp-cal); border: 1px solid var(--fp-line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.fp-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.fp-chip { text-decoration: none; font: 500 13px/1 var(--fp-sans); color: var(--fp-tinta); border: 1px solid var(--fp-line-str); border-radius: 99px; padding: 10px 16px; background: #fff; transition: border-color .2s, color .2s, transform .2s; }
.fp-chip:hover { border-color: var(--fp-teja); color: var(--fp-teja); transform: translateY(-2px); }
.fp-chip--hot { font-weight: 600; color: var(--fp-teja); border-color: var(--fp-teja); }
.fp-area-foot { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--fp-line); padding-top: 16px; margin-top: auto; }
.fp-area-note { font: 400 12.5px/1.4 var(--fp-sans); color: var(--fp-piedra); }
.fp-mono-sm { font-family: var(--fp-mono); font-size: 11.5px; }

/* ── Testimonial ───────────────────────────────────────────────────── */
.fp-quote { max-width: 900px; margin: 0 auto; padding: 96px 32px; display: flex; flex-direction: column; gap: 20px; text-align: center; align-items: center; }
.fp-quote-mark { font: 700 92px/0.35 var(--fp-sans); color: var(--fp-teja); height: 40px; }
.fp-quote-txt { font: 400 26px/1.45 var(--fp-sans); color: var(--fp-tinta); text-wrap: pretty; }
.fp-quote-who { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.fp-ava { width: 46px; height: 46px; border-radius: 50%; background: var(--fp-tinta); display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--fp-sans); letter-spacing: .04em; color: var(--fp-cal); }
.fp-quote-meta { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.fp-quote-name { font: 600 14.5px/1 var(--fp-sans); color: var(--fp-tinta); }
.fp-quote-role { font: 500 10px/1 var(--fp-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .45); }

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer { background: var(--fp-tinta); }
.fp-foot-cta { max-width: 1400px; margin: 0 auto; padding: 88px 32px 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid var(--fp-cal-12); }
.fp-foot-cta-copy { max-width: 640px; display: flex; flex-direction: column; gap: 18px; }
.fp-foot-h { font: 600 42px/1.1 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-cal); text-wrap: pretty; }
.fp-foot-sub { font: 400 16px/1.6 var(--fp-sans); color: rgba(247, 245, 240, .65); text-wrap: pretty; }
.fp-foot-grid { max-width: 1400px; margin: 0 auto; padding: 56px 32px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px; }
.fp-foot-brand { display: flex; flex-direction: column; gap: 16px; padding-right: 24px; }
.fp-foot-brand img { height: 120px; width: auto; align-self: flex-start; }
.fp-foot-logo--h { display: none; }   /* horizontal variant: phones only (media block) */
.fp-foot-blurb { font: 400 13px/1.6 var(--fp-sans); color: rgba(247, 245, 240, .6); text-wrap: pretty; }
.fp-foot-college { font: 500 10px/1.7 var(--fp-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(247, 245, 240, .4); }
.fp-foot-h6 { font: 500 10px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 245, 240, .4); margin-bottom: 12px; }
.fp-foot-h6--mt { margin: 24px 0 12px; }
.fp-foot-col { display: flex; flex-direction: column; gap: 4px; }
.fp-foot-col a { text-decoration: none; font: 400 13px/1.5 var(--fp-sans); color: rgba(247, 245, 240, .72); padding: 3px 0; }
.fp-foot-col a:hover { color: var(--fp-teja-l); }
.fp-foot-offices { display: flex; flex-direction: column; gap: 20px; }
.fp-office { display: flex; flex-direction: column; gap: 5px; }
.fp-office .t { font: 600 13px/1.3 var(--fp-sans); color: var(--fp-cal); }
.fp-office .h { font: 400 11.5px/1.4 var(--fp-sans); color: var(--fp-teja-l); }
.fp-office .d { font: 400 12.5px/1.5 var(--fp-sans); color: rgba(247, 245, 240, .6); }
.fp-foot-legal { border-top: 1px solid var(--fp-cal-12); }
.fp-foot-legal-inner { max-width: 1400px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fp-foot-copy { font: 400 12px/1 var(--fp-sans); color: rgba(247, 245, 240, .45); }
.fp-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.fp-foot-links a { text-decoration: none; font: 400 12px/1 var(--fp-sans); color: rgba(247, 245, 240, .45); }
.fp-foot-links a:hover { color: var(--fp-cal); }

/* ── Breadcrumbs (core emits them on nested pages; the model has none —
 *    keep them quiet and out of the design's way) ─────────────────── */
.site-crumbs { max-width: 1240px; margin: 0 auto; padding: 14px 32px 0; }
.site-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font: 400 12px/1 var(--fp-sans); color: var(--fp-piedra); }
.site-crumbs li + li::before { content: '·'; margin-right: 8px; color: var(--fp-piedra); }
.site-crumbs a { color: var(--fp-piedra); text-decoration: none; }
.site-crumbs a:hover { color: var(--fp-teja); }

/* ═══ Inner pages vocabulary (services · detail · areas · about · blog ·
 * contact · get-a-quote · owners-portal · solution · switch) — same 1:1
 * transcription discipline as above. ═══ */

/* Layout utilities (compose the model's wrapper styles) */
.fp-pagehero { max-width: 1240px; margin: 0 auto; padding: 80px 32px 64px; display: flex; flex-direction: column; gap: 22px; }
.fp-narrow { max-width: 900px; margin: 0 auto; padding: 80px 32px; }
.fp-pt64 { padding-top: 64px; } .fp-pt72 { padding-top: 72px; } .fp-pt88 { padding-top: 88px; }
.fp-pb56 { padding-bottom: 56px; } .fp-pb72 { padding-bottom: 72px; } .fp-pb96 { padding-bottom: 96px; } .fp-pb104 { padding-bottom: 104px; }
.fp-py72 { padding-top: 72px; padding-bottom: 72px; }
.fp-py80 { padding-top: 80px; padding-bottom: 80px; }
.fp-py88 { padding-top: 88px; padding-bottom: 88px; }
.fp-frow { display: flex; } .fp-fcol { display: flex; flex-direction: column; }
.fp-f1 { flex: 1; } .fp-f11 { flex: 1.1; } .fp-f12 { flex: 1.2; } .fp-f14 { flex: 1.4; }
.fp-mnw320 { min-width: 320px; } .fp-mnw340 { min-width: 340px; } .fp-mnw360 { min-width: 360px; } .fp-mnw380 { min-width: 380px; } .fp-mnw400 { min-width: 400px; } .fp-mnw420 { min-width: 420px; }
.fp-mw520 { max-width: 520px; } .fp-mw560 { max-width: 560px; } .fp-mw600 { max-width: 600px; } .fp-mw620 { max-width: 620px; } .fp-mw640 { max-width: 640px; } .fp-mw660 { max-width: 660px; }
.fp-mw820 { max-width: 820px; } .fp-mw860 { max-width: 860px; } .fp-mw880 { max-width: 880px; } .fp-mw900 { max-width: 900px; }
.fp-gap8 { gap: 8px; } .fp-gap16 { gap: 16px; } .fp-gap22 { gap: 22px; } .fp-gap24 { gap: 24px; }
.fp-gap48 { gap: 48px; } .fp-gap56 { gap: 56px; } .fp-gap64 { gap: 64px; } .fp-gap72 { gap: 72px; } .fp-gap80 { gap: 80px; }
.fp-wrapw { flex-wrap: wrap; } .fp-aic { align-items: center; } .fp-afs { align-items: flex-start; }
.fp-asc { align-self: center; } .fp-asfs { align-self: flex-start; }

.fp-ls01 { letter-spacing: .01em; }
.fp-light { color: var(--fp-cal); }
.fp-p1526 { padding: 15px 26px; } .fp-p1728 { padding: 17px 28px; }
.fp-btnel { border: none; cursor: pointer; }
.fp-row14 { display: flex; gap: 14px; flex-wrap: wrap; }
.fp-chips12 { display: flex; gap: 12px; flex-wrap: wrap; }
.fp-between { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fp-iconrow { display: flex; align-items: center; justify-content: space-between; }
.fp-iconrow12 { display: flex; align-items: center; gap: 12px; }

/* Page-hero typography */
.fp-h1md { margin: 0; font: 600 52px/1.08 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); text-wrap: pretty; }
.fp-dark .fp-h1md { color: var(--fp-cal); }
.fp-h1sm { margin: 0; font: 600 48px/1.08 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); text-wrap: pretty; }
.fp-lead17 { margin: 0; font: 400 17px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-lead17--light { color: rgba(247, 245, 240, .65); }
.fp-lead16 { margin: 0; font: 400 16.5px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-h34 { margin: 0; font: 600 34px/1.1 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); }
.fp-dark .fp-h34 { color: var(--fp-cal); }
.fp-h3 { margin: 0; font: 600 26px/1.15 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); }
.fp-h22 { font: 600 22px/1.2 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); }
.fp-h22.fp-light { color: var(--fp-cal); }   /* dark cards — .fp-light alone loses the source-order fight */
.fp-h20 { font: 600 20px/1.25 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); }
.fp-crumb { font: 500 11px/1 var(--fp-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .4); }
.fp-crumb a { color: rgba(0, 0, 0, .4); text-decoration: none; }
.fp-kick2 { font: 500 11px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(0, 0, 0, .4); }
/* Margin utilities — AFTER the heading rules on purpose: .fp-h1md/.fp-h2/
 * .fp-h34 carry margin:0 and equal specificity, so these must come later in
 * the cascade to win (they silently lost from the mount until 2026-07-31). */
.fp-mt8 { margin-top: 8px; } .fp-mb20 { margin-bottom: 20px; } .fp-mb36 { margin-bottom: 36px; } .fp-mb44 { margin-bottom: 44px; } .fp-mb48 { margin-bottom: 48px; } .fp-mb52 { margin-bottom: 52px; } .fp-mb64 { margin-bottom: 64px; }

/* CTA rows (bottom of most pages) */
.fp-ctarow { max-width: 1240px; margin: 0 auto; padding: 72px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fp-ctarow-t { font: 600 24px/1.3 var(--fp-sans); color: var(--fp-tinta); max-width: 560px; text-wrap: pretty; }

/* Round chips (related links, nearby towns) */
.fp-chip2 { text-decoration: none; font: 500 13.5px/1 var(--fp-sans); color: var(--fp-tinta); border: 1px solid rgba(0, 0, 0, .16); border-radius: 99px; padding: 12px 20px; background: #fff; }
.fp-chip2:hover { border-color: var(--fp-teja); color: var(--fp-teja); }

/* Services page rows */
.fp-srow { display: flex; gap: 48px; padding: 56px 0; border-bottom: 1px solid var(--fp-line); flex-wrap: wrap; }
.fp-nob { border-bottom: 0; }
.fp-num2 { font: 500 10.5px/1 var(--fp-mono); color: rgba(0, 0, 0, .35); }
.fp-srow-p { margin: 0; font: 400 15.5px/1.6 var(--fp-sans); color: #4a4f52; text-wrap: pretty; }
.fp-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-tag { font: 500 12px/1 var(--fp-sans); color: var(--fp-tinta); border: 1px solid var(--fp-line-str); border-radius: 99px; padding: 8px 14px; }

/* Service detail: included grid, fees card, numbered steps, related */
.fp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--fp-line); border: 1px solid var(--fp-line); }
.fp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--fp-line); border: 1px solid var(--fp-line); }
.fp-cell26 { background: #fff; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.fp-cell36 { background: #fff; padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.fp-monoteja11 { font: 500 11px/1 var(--fp-mono); color: var(--fp-teja); }
.fp-monoteja12 { font: 500 12px/1.5 var(--fp-mono); color: var(--fp-teja); }
.fp-t155 { font: 600 15.5px/1.35 var(--fp-sans); color: var(--fp-tinta); }
.fp-t155b { font: 600 15.5px/1.3 var(--fp-sans); color: var(--fp-tinta); margin-bottom: 4px; }
.fp-d135 { font: 400 13.5px/1.55 var(--fp-sans); color: var(--fp-piedra); }
.fp-d135l { font: 400 13.5px/1.55 var(--fp-sans); color: rgba(247, 245, 240, .6); }
.fp-feecard { background: var(--fp-tinta); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fp-t20l { font: 600 20px/1.35 var(--fp-sans); color: var(--fp-cal); text-wrap: pretty; }
.fp-step24 { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--fp-line-mid); }
.fp-step24:last-child { border-bottom: 1px solid var(--fp-line-mid); }
.fp-step24 .t { font: 600 16px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-step24 .d { font: 400 14px/1.55 var(--fp-sans); color: var(--fp-piedra); }
.fp-stepnum { font: 500 12px/1 var(--fp-mono); color: var(--fp-teja); padding-top: 4px; }

/* FAQ (details/summary) */
.fp-faq { border-top: 1px solid var(--fp-line-mid); padding: 20px 0; }
h2 + .fp-faq { border-top: 0; }   /* the first question never glues its line to the heading */
.fp-faq:last-of-type { border-bottom: 1px solid var(--fp-line-mid); }
.fp-faq-q { font: 600 16.5px/1.4 var(--fp-sans); color: var(--fp-tinta); cursor: pointer; }
.fp-faq-a { margin: 12px 0 0; font: 400 14.5px/1.6 var(--fp-sans); color: var(--fp-piedra); }

/* Areas page */
.fp-region { display: flex; gap: 48px; flex-wrap: wrap; }
.fp-region--sep { border-top: 1px solid var(--fp-line); padding-top: 56px; }
.fp-region-l { width: 200px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.fp-towns { flex: 1; min-width: 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.fp-town { text-decoration: none; border: 1px solid var(--fp-line-mid); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 6px; transition: border-color .25s, transform .25s, box-shadow .25s; }
.fp-town:hover { border-color: rgba(0, 0, 0, .3); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(23, 26, 28, .07); }
.fp-town--hot { border-color: var(--fp-teja); background: var(--fp-cal); }
.fp-t17 { font: 600 17px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-p13 { font: 400 13px/1.5 var(--fp-sans); color: var(--fp-piedra); }
.fp-locallink { font: 600 12px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fp-teja); margin-top: 6px; }

/* Area detail: office box + help cards */
.fp-offbox { flex: 1; min-width: 320px; background: var(--fp-tinta); border-radius: 14px; padding: 34px; display: flex; flex-direction: column; gap: 18px; align-self: flex-start; }
.fp-p14l { font: 400 14px/1.7 var(--fp-sans); color: rgba(247, 245, 240, .65); }
.fp-offnote { font: 400 13px/1.6 var(--fp-sans); color: rgba(247, 245, 240, .5); border-top: 1px solid rgba(247, 245, 240, .14); padding-top: 16px; }
.fp-helpcard { border: 1px solid var(--fp-line-mid); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.fp-helpcard2 { background: #fff; border: 1px solid var(--fp-line); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.fp-p14 { font: 400 14px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-num11 { font: 500 11px/1 var(--fp-mono); color: rgba(0, 0, 0, .35); }
.fp-num12 { font: 500 12px/1 var(--fp-mono); color: rgba(0, 0, 0, .35); }

/* About: team + credentials */
.fp-grid250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.fp-grid240g40 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; }
.fp-teamcard { background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.fp-ava64 { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 20px/1 var(--fp-sans); letter-spacing: .04em; color: var(--fp-cal); }
.fp-ava64--tinta { background: var(--fp-tinta); }
.fp-ava64--teja { background: var(--fp-teja); }
.fp-ava64--piedra { background: var(--fp-piedra); }
.fp-p135 { font: 400 13.5px/1.5 var(--fp-sans); color: var(--fp-piedra); }
.fp-p-value { font: 400 14.5px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-langs { font: 500 10px/1.5 var(--fp-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, .38); }
.fp-cred { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(247, 245, 240, .14); padding-top: 20px; }
.fp-crednum { font: 600 30px/1 var(--fp-sans); color: var(--fp-cal); }
.fp-credsub { font: 400 13.5px/1.5 var(--fp-sans); color: rgba(247, 245, 240, .6); }

/* Blog cards (authored page — model posts verbatim) */
.fp-grid340 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.fp-postcard { text-decoration: none; background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 14px; transition: border-color .25s, transform .25s, box-shadow .25s; }
.fp-postcard:hover { border-color: var(--fp-teja); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23, 26, 28, .08); }
.fp-postmeta { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.fp-cat { font: 600 10.5px/1 var(--fp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fp-teja); border: 1px solid var(--fp-teja); border-radius: 99px; padding: 6px 12px; }
.fp-date { font: 500 10.5px/1 var(--fp-mono); color: rgba(0, 0, 0, .4); }
.fp-post-t { font: 600 20px/1.3 var(--fp-sans); color: var(--fp-tinta); text-wrap: pretty; }
.fp-readtime { font: 500 10.5px/1 var(--fp-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .38); margin-top: auto; }

/* Contact: office cards + info rows */
.fp-offcard { background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 34px; display: flex; flex-direction: column; gap: 16px; }
.fp-offcard--dark { background: var(--fp-tinta); border: 0; }
.fp-p145 { font: 400 14.5px/1.7 var(--fp-sans); color: var(--fp-piedra); }
.fp-p145l { font: 400 14.5px/1.7 var(--fp-sans); color: rgba(247, 245, 240, .65); }
.fp-hours { font: 500 10.5px/1.6 var(--fp-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .38); }
.fp-hoursl { font: 500 10.5px/1.6 var(--fp-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(247, 245, 240, .4); }
/* Live `map` module inside an office card (service points, 2026-07-30):
 * the iframe fills the card width; margin-top:auto pins it to the card
 * bottom so the three maps align across cards of uneven text height. */
.fp-map { margin-top: auto; }
.fp-map iframe { display: block; width: 100%; height: 200px; border: 0; border-radius: 8px; }
.fp-tel-l { color: var(--fp-cal); font-weight: 600; text-decoration: none; }
.fp-b600 { font-weight: 600; text-decoration: none; }
.fp-w600 { font-weight: 600; }
.fp-inforow { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--fp-line-mid); flex-wrap: wrap; }
.fp-inforow:last-child { border-bottom: 1px solid var(--fp-line-mid); }
.fp-t145 { font: 600 14.5px/1.4 var(--fp-sans); color: var(--fp-tinta); }
.fp-v145 { font: 400 14.5px/1.4 var(--fp-sans); }

/* Checklist rows (→ items on quote / portal / switch) */
.fp-chk18 { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--fp-line-mid); }
.fp-chk18:last-child { border-bottom: 1px solid var(--fp-line-mid); }
.fp-chk16 { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--fp-line-mid); }
.fp-chk16:last-child { border-bottom: 1px solid var(--fp-line-mid); }
.fp-chktxt { font: 400 14.5px/1.5 var(--fp-sans); color: var(--fp-tinta); }
.fp-chktxt15 { font: 400 15px/1.5 var(--fp-sans); color: var(--fp-tinta); }
.fp-talk { font: 400 14px/1.7 var(--fp-sans); color: var(--fp-piedra); }

/* Forms (live form module override + shared field look) */
.fp-formbox { background: var(--fp-cal); border: 1px solid var(--fp-line); border-radius: 14px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.fp-formbox2 { background: #fff; border: 1px solid var(--fp-line); border-radius: 14px; padding: 40px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 1px 2px rgba(23, 26, 28, .04); }
.fp-f2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fp-field { display: flex; flex-direction: column; gap: 7px; }
.fp-flabel { font: 600 12px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fp-tinta); }
.fp-fopt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fp-piedra); }
.fp-input { font: 400 14.5px/1.4 var(--fp-sans); color: var(--fp-tinta); padding: 9px 12px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 6px; background: #fff; box-sizing: border-box; width: 100%; }
.fp-tarea { resize: vertical; line-height: 1.5; }
.fp-input--flat { border: none; background: var(--fp-cal); padding: 10px 12px; }
.fp-checkrow { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.fp-checkbox { margin-top: 3px; accent-color: var(--fp-teja); }
.fp-consent { font: 400 12.5px/1.5 var(--fp-sans); color: var(--fp-piedra); }
.fp-formnote { font: 500 10.5px/1.5 var(--fp-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .38); text-align: center; }
.fp-thanks { background: var(--fp-tinta); border-radius: 14px; padding: 44px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fp-thanks .t { font: 600 26px/1.2 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-cal); }
.fp-thanks .d { font: 400 15px/1.6 var(--fp-sans); color: rgba(247, 245, 240, .65); }
.fp-thanks .d a { color: var(--fp-teja-l); font-weight: 600; }

/* Owners portal: sign-in card */
.fp-signcard { flex: 1; min-width: 360px; max-width: 460px; background: var(--fp-tinta); border-radius: 16px; padding: 48px; display: flex; flex-direction: column; gap: 22px; }
.fp-dimlink { font: 400 12.5px/1.4 var(--fp-sans); color: rgba(247, 245, 240, .55); }
.fp-dimlink:hover { color: var(--fp-cal); }
.fp-i44p { width: 44px; height: 44px; flex: none; }
.fp-i48 { width: 48px; height: 48px; display: block; }

/* Solution: quarterly report card */
.fp-report { flex: 1; min-width: 340px; background: var(--fp-cal); border: 1px solid var(--fp-line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 0; }
.fp-report-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--fp-line-mid); }
.fp-report-t { font: 600 14px/1 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); }
.fp-pdf { font: 500 10px/1 var(--fp-mono); color: rgba(0, 0, 0, .4); }
.fp-report-r { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--fp-line); }
.fp-report-r:last-child { border-bottom: 0; }
.fp-rl { font: 400 14px/1 var(--fp-sans); color: var(--fp-piedra); }
.fp-rv { font: 600 14px/1 var(--fp-sans); color: var(--fp-tinta); }
.fp-rvt { font: 600 14px/1 var(--fp-sans); color: var(--fp-teja); }
.fp-grid320 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

/* Switch: step cards + reassurance rows */
.fp-stepcard { border: 1px solid var(--fp-cal-16); border-radius: 12px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.fp-week { font: 500 13px/1 var(--fp-mono); color: var(--fp-teja-l); }
.fp-t19l { font: 600 19px/1.3 var(--fp-sans); color: var(--fp-cal); }
.fp-p14ld { font: 400 14px/1.6 var(--fp-sans); color: rgba(247, 245, 240, .6); text-wrap: pretty; }
.fp-assure { background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 28px; display: flex; gap: 18px; align-items: flex-start; }
.fp-btn--md { padding: 16px 26px; }
.fp-srow-p--soft { color: var(--fp-piedra); }

/* ── Services page dressing (2026-07-31 — Dani's page-by-page pass: the flat
 * ten-row list dressed with the home's own language. Copy stays verbatim;
 * values are borrowed 1:1 from existing rules — the index card mirrors the
 * portal card, group B reuses the dark sols cards, the stats strip is home's. */
.fp-h1md .fp-acc { color: var(--fp-teja); }
.fp-ixwrap { position: relative; flex: 1; min-width: 420px; max-width: 560px; }
.fp-ixcard { position: relative; overflow: hidden; background: var(--fp-tinta); border-radius: 18px; padding: 30px 32px 34px; box-shadow: 0 24px 60px rgba(23, 26, 28, .22); display: flex; flex-direction: column; gap: 14px; }
.fp-ixwm { position: absolute; right: -90px; bottom: -100px; width: 340px; height: 340px; fill: var(--fp-cal); opacity: .05; z-index: 0; }   /* behind the rows — an absolute paints over static siblings (Dani caught it on /areas) */
.fp-ix { display: flex; flex-direction: column; position: relative; }
.fp-ix a { display: flex; align-items: baseline; gap: 14px; padding: 9px 2px; text-decoration: none; }
.fp-ix .n { font: 500 10.5px/1 var(--fp-mono); color: rgba(247, 245, 240, .35); }
.fp-ix .t { font: 500 14.5px/1.3 var(--fp-sans); color: var(--fp-cal); transition: color .15s; }
.fp-ix a:hover .t { color: var(--fp-teja-l); }
.fp-dark .fp-num2 { color: rgba(247, 245, 240, .35); }
.fp-dark .fp-tag { color: var(--fp-cal); border-color: var(--fp-cal-16); }
.fp-sols320 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fp-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: stretch; }
.fp-svccard { border: 1px solid var(--fp-line-mid); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.fp-crosscard { background: var(--fp-tinta); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.fp-crosscard .t { font: 600 16px/1.3 var(--fp-sans); color: var(--fp-cal); }
.fp-crosscard .d { font: 400 13.5px/1.55 var(--fp-sans); color: rgba(247, 245, 240, .6); text-wrap: pretty; }
.fp-crosscard .sep { border-top: 1px solid rgba(247, 245, 240, .14); margin: 12px 0; }
/* Testimonial on tinta (non-resident page closes mirroring its dark hero) */
.fp-dark .fp-quote-txt { color: var(--fp-cal); }
.fp-dark .fp-quote-name { color: var(--fp-cal); }
.fp-dark .fp-quote-role { color: rgba(247, 245, 240, .5); }
.fp-dark .fp-quote-mark { color: var(--fp-teja-l); }
.fp-dark .fp-ava { background: var(--fp-teja); color: var(--fp-cal); }
/* Services stats — teja band variant (Dani 2026-07-31: distinct module for
 * the figures, not the home strip re-used; bridges white band A → dark B). */
.fp-statstrip--teja { background: var(--fp-teja); border-top: 0; border-bottom: 0; }
.fp-statstrip--teja .fp-stats { background: transparent; gap: 0; }
.fp-statstrip--teja .fp-stat { background: transparent; border-left: 1px solid rgba(247, 245, 240, .22); padding: 40px 32px; gap: 8px; }
.fp-statstrip--teja .fp-stat:first-child { border-left: 0; }
.fp-statstrip--teja .fp-stat .n { font-size: 40px; color: var(--fp-cal); }
.fp-statstrip--teja .fp-stat .s { color: rgba(247, 245, 240, .8); }
.fp-svc-ic--lg { width: 44px; }
/* ── Areas page dressing (2026-07-31 — page-by-page pass: split hero with a
 * dark coverage card on the ixcard geometry, one REAL service-point map per
 * region via the live map module, service-point wording alignment). */
.fp-covrow { position: relative; z-index: 1; background: rgba(247, 245, 240, .07); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; text-decoration: none; }
.fp-covrow .z { font: 500 10px/1 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-teja-l); }
.fp-covrow .t { font: 600 14.5px/1.4 var(--fp-sans); color: var(--fp-cal); transition: color .15s; }
.fp-covrow .s { font: 400 12px/1.4 var(--fp-sans); color: rgba(247, 245, 240, .5); }
.fp-covrow:hover .t { color: var(--fp-teja-l); }
.fp-offhost { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(247, 245, 240, .14); }
.fp-offhost .fp-offlogo { height: 44px; width: auto; align-self: flex-start; }
.fp-offhost .s { font: 400 13px/1.55 var(--fp-sans); color: rgba(247, 245, 240, .6); text-wrap: pretty; }
/* Full-bleed area map band on town landings (Dani 2026-07-31: the zone AND
 * the service point on one 100%-width map; offbox keeps only the data). */
/* v5 idea A: the whole first zone is ONE tinta composition — brand + office
 * data left, lead form right, floored by the full-bleed map. */
.fp-herodata { margin-top: 22px; border-top: 1px solid rgba(247, 245, 240, .14); padding-top: 38px; display: flex; flex-direction: column; gap: 16px; }
.fp-dark .fp-pill { color: var(--fp-cal); border-color: rgba(247, 245, 240, .28); }
.fp-dark .fp-crumb, .fp-dark .fp-crumb a { color: rgba(247, 245, 240, .5); }
.fp-dark .fp-crumb .fp-acc { color: var(--fp-teja-l); }
.fp-dark .fp-h1md .fp-acc { color: var(--fp-teja-l); }
.fp-map--floor { margin: 0; }
.fp-map--floor iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: 0; }
/* (fp-map--floor kept for possible reuse; the landing hero dropped its map
 * floor 2026-07-31 — Dani: space under the form instead.) */
/* Lead-gen quote card in the town-landing hero (v4, Dani: the landing must
 * convert ad traffic — pitched heading + trust line around the quote form). */
.fp-leadbox { background: #fff; border: 1px solid var(--fp-line); border-radius: 14px; padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 44px rgba(23, 26, 28, .08); }
.fp-leadbox .t { font: 600 22px/1.25 var(--fp-sans); color: var(--fp-tinta); text-wrap: pretty; }
.fp-leadbox .d { font: 400 14px/1.55 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; margin-bottom: 12px; }
.fp-leadbox .fp-formbox2 { border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }
.fp-leadbox .trust { font: 500 10px/1.6 var(--fp-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, .4); border-top: 1px solid var(--fp-line); padding-top: 14px; }
.fp-prose2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 32px 56px; }

/* ── Mobile pass for /areas + the town landings (2026-07-31, Dani).
 * Desktop-first stays the doctrine: nothing above 760px changes. The root
 * causes at phone width were the fp-mnw* floors (400/420px columns force
 * horizontal overflow at 390px) and the fixed-column grids (svcs 2-col,
 * stats 4-col, footer 5-col). Benefits every page sharing these blocks. */
@media (max-width: 760px) {
  .fp-mnw320, .fp-mnw340, .fp-mnw360, .fp-mnw380, .fp-mnw400, .fp-mnw420 { min-width: 0; }
  .fp-hero-copy, .fp-hero-art, .fp-ixwrap, .fp-split-a, .fp-towns { min-width: 0; }
  .fp-wrap, .fp-pagehero { padding-left: 20px; padding-right: 20px; }
  .fp-h1 { font-size: 38px; }
  .fp-h1md { font-size: 32px; }
  .fp-h2 { font-size: 27px; }
  .fp-h34 { font-size: 24px; }
  .fp-hero { gap: 40px; padding-top: 48px; padding-bottom: 56px; }
  .fp-py88, .fp-py80, .fp-py72 { padding-top: 52px; padding-bottom: 52px; }
  .fp-pt64 { padding-top: 44px; }
  .fp-pb104 { padding-bottom: 64px; }
  .fp-svcs { grid-template-columns: 1fr; }
  .fp-grid3 { grid-template-columns: 1fr; }
  .fp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-cycle { grid-template-columns: 1fr; }
  .fp-cyclecard:not(:last-child)::after { content: '↓'; inset-inline-end: auto; left: 26px; top: auto; bottom: -18px; }
  .fp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-stat { padding: 22px 20px; }
  .fp-stat .n { font-size: 26px; }
  .fp-statstrip--teja .fp-stat { border-left: 0; padding: 22px 20px; }
  .fp-statstrip--teja .fp-stat .n { font-size: 28px; }
  .fp-leadbox { padding: 24px 20px; }
  .fp-offbox { padding: 26px 22px; }
  .fp-split { gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .fp-quote { padding: 56px 20px; }
  .fp-quote-txt { font-size: 20px; }
  .fp-ctarow { padding: 48px 20px; }
  .fp-ctarow-t { font-size: 20px; }
  .fp-foot-grid { grid-template-columns: 1fr 1fr; padding: 44px 20px; gap: 36px 24px; }
  /* Brand full-width so the four link cells pair cleanly 2×2 (Dani
     2026-08-01 — Service points was hanging beside the wrong column). */
  .fp-foot-brand { grid-column: 1 / -1; padding-right: 0; }
  /* Phones show the HORIZONTAL cal logo (Dani 2026-08-01 — the vertical
     lockup read too tall full-width); alignment stays as-is. */
  .fp-foot-logo--v { display: none; }
  /* .fp-foot-brand prefix beats the base `.fp-foot-brand img` height.
     The web-light PNG is the PADDED original — ~52px of transparent air
     before the ink at this scale; the negative margin makes it flush-left
     (drop it if the slot ever gets an ink-trimmed copy). */
  .fp-foot-brand .fp-foot-logo--h { display: block; height: 64px; max-width: 100%; margin-inline-start: -64px; }   /* phantom air ≈ height at this asset's ratio */
  /* offices does NOT span: it pairs with Solutions+Company (2×2). */
  .fp-foot-cta { padding: 48px 20px; }
  .fp-foot-legal-inner { padding: 18px 20px; flex-wrap: wrap; gap: 10px; }
  .fp-announce { padding: 8px 16px; }
  .fp-srow { flex-direction: column; gap: 20px; padding: 36px 0; }   /* the mnw* zero-out (line ~737) squeezed title+desc onto one row — titles painted over the desc */
  .fp-region { gap: 24px; }
  .fp-region-l { width: auto; }
  .fp-secrow { margin-bottom: 36px; }
  .fp-prose2 { grid-template-columns: 1fr; }
  .fp-f2col { grid-template-columns: 1fr; }
  .site-header-inner { padding: 0 12px; gap: 8px; height: 64px; }
  .site-brand img { height: 25px; }
  .site-actions { gap: 4px; }
  .fp-duo { grid-template-columns: 1fr; }
  .fp-btn--sm { padding: 9px 10px; font-size: 11px; }
  .fp-steps, .fp-step, .fp-step-txt { min-width: 0; }
  .fp-region-l { width: 100%; }
  .fp-wrapw, .fp-split, .fp-hero { flex-direction: column; }
  .fp-wrapw > *, .fp-split > *, .fp-hero > * { width: 100%; }
}
/* Quote-form UX: hidden conditional fields (site.js).
 * .fp-field is display:flex — the hidden ATTRIBUTE loses that tie, so pin it.
 * When one half of a paired row hides, its sibling takes the full row. */
.fp-field[hidden] { display: none; }
.fp-f2col:has(> [hidden]) { grid-template-columns: 1fr; }
/* «Your current inbox» hero card (change-administrator page — the PAIN
 * mirrored in the portal-card idiom: ignored emails, then the teja turn). */
.fp-inbox { background: #fff; border: 1px solid var(--fp-line); border-radius: 14px; padding: 32px 34px; box-shadow: 0 24px 60px rgba(23, 26, 28, .22); display: flex; flex-direction: column; gap: 13px; }
/* The thread indents like real replies; the teja turn pops back full-width. */
.fp-inbox > div:nth-of-type(3) { margin-left: 16px; }
.fp-inbox > div:nth-of-type(4) { margin-left: 32px; }
.fp-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--fp-line); }
.fp-inbox-tag { font: 600 11px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-piedra); }
.fp-inbox-note { font: 500 9.5px/1 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-teja); }
.fp-inbox-row { background: var(--fp-cal); border-radius: 10px; padding: 15px 18px; display: flex; flex-direction: column; gap: 4px; }
.fp-inbox-row .t { font: 600 15px/1.35 var(--fp-sans); color: var(--fp-tinta); }
.fp-inbox-row .s { font: 400 12px/1.4 var(--fp-sans); color: var(--fp-piedra); }
.fp-inbox-turn { background: var(--fp-teja); border-radius: 10px; padding: 17px 18px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.fp-inbox-turn .t { font: 600 14.5px/1.35 var(--fp-sans); color: var(--fp-cal); }
.fp-inbox-turn .s { font: 400 12px/1.4 var(--fp-sans); color: rgba(247, 245, 240, .85); }
/* Partner logos band (services — replaces the Not-sure ctarow; Dani: «los
 * logos de los colaboradores»). Pure credibility strip, deliberately unlinked. */
.fp-partners-band { padding: 64px 0 72px; }
.fp-partners-band .fp-kick { text-align: center; margin-bottom: 36px; }
.fp-partners { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; gap: 40px; }
.fp-partners a { display: flex; justify-content: center; width: 100%; }
.fp-partners img { width: min(100%, 230px); height: auto; opacity: .92; transition: opacity .2s; }
.fp-partners a:last-child img { width: min(100%, 165px); }   /* clonext's compact mark reads oversized at full column width */
.fp-partners a:nth-child(3) img { width: min(100%, 205px); }   /* realestate slightly down (Dani 2026-07-31) */
.fp-partners a:hover img { opacity: 1; }

/* Carousel page dots: hidden by default, the phone block below shows them
 * (base hide FIRST in source order — the fp-mb* lesson). */
.fp-pdots { display: none; }
/* Partners band, phones: swipeable snap carousel auto-advanced by site.js.
 * Lives AFTER the desktop grid rules on purpose — same specificity, source
 * order decides (the fp-mb* lesson, same day). */
@media (max-width: 760px) {
  .fp-partners { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 0 0 8px; scrollbar-width: none; }
  .fp-partners::-webkit-scrollbar { display: none; }
  /* Two logos per view (Dani 2026-08-01); snap on the ODD items only so a
     swipe always lands on a whole pair, never between pages. */
  .fp-partners a { flex: 0 0 50%; scroll-snap-align: none; display: flex; justify-content: center; }
  .fp-partners a:nth-child(odd) { scroll-snap-align: start; }
  .fp-partners img { width: auto; max-width: 40vw; max-height: 56px; object-fit: contain; }
  .fp-pdots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
}
/* Carousel page dots (site.js builds them; phones only — the media block
 * above re-displays them; base hide must come FIRST in source order). */
.fp-pdot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: var(--fp-line-mid); cursor: pointer; }
.fp-pdot.on { background: var(--fp-teja); }
/* About: the group's partner cards (2-up grid, logo-led) */
.fp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px; }
.fp-plogo { height: 36px; width: auto; align-self: flex-start; }
.fp-plogo--clx { height: 46px; }   /* the ~3:1 marks need more height than the ~5:1 wordmarks' 36px… */
.fp-plogo--fre { height: 58px; }   /* …tuned per logo by eye (Dani 2026-07-31) */
.fp-helpcard2 .fp-link-teja { margin-top: auto; align-self: flex-start; text-transform: none; letter-spacing: .02em; font-size: 13px; }   /* domain links stay lowercase (Dani: enlaces teja, no botones) */
/* About hero: icon composition on the right (Dani 2026-07-31 — icons from the
 * collection as a graphic piece; glass tiles on the dark band, teja lead). */
.fp-herocomp { position: relative; flex: 1; min-width: 340px; max-width: 460px; min-height: 400px; }
.fp-ictile { position: absolute; display: grid; place-items: center; background: rgba(247, 245, 240, .05); border: 1px solid rgba(247, 245, 240, .13); border-radius: 22px; }
.fp-ictile svg { stroke: var(--fp-cal); opacity: .78; }
.fp-ictile--a { width: 200px; height: 200px; left: 8%; top: 6%; background: rgba(247, 245, 240, .07); }
.fp-ictile--a svg { width: 104px; height: 104px; stroke: var(--fp-teja-l); opacity: 1; }
.fp-ictile--b { width: 128px; height: 128px; right: 4%; top: 0; transform: rotate(6deg); }
.fp-ictile--b svg { width: 60px; height: 60px; }
.fp-ictile--c { width: 148px; height: 148px; left: 0; bottom: 2%; transform: rotate(-5deg); }
.fp-ictile--c svg { width: 68px; height: 68px; }
.fp-ictile--d { width: 112px; height: 112px; right: 12%; bottom: 8%; transform: rotate(3deg); }
.fp-ictile--d svg { width: 52px; height: 52px; }
.fp-icdot { position: absolute; border-radius: 50%; background: var(--fp-teja-l); opacity: .55; }
.fp-icdot--1 { width: 10px; height: 10px; right: 31%; top: 42%; }
.fp-icdot--2 { width: 7px; height: 7px; left: 41%; bottom: 22%; }
/* About hero v2: the lede as a BEFORE/AFTER glass card (Dani 2026-07-31,
 * «haz algo bueno» — replaces the icon tiles; unique to this page). */
.fp-abcard { background: rgba(247, 245, 240, .05); border: 1px solid rgba(247, 245, 240, .13); border-radius: 18px; padding: 28px 30px; display: flex; flex-direction: column; gap: 11px; }
.fp-abcard-h { padding-bottom: 12px; border-bottom: 1px solid rgba(247, 245, 240, .14); }
.fp-abrow { display: flex; gap: 13px; align-items: center; background: rgba(247, 245, 240, .06); border-radius: 10px; padding: 13px 16px; font: 400 14px/1.4 var(--fp-sans); color: rgba(247, 245, 240, .55); }
.fp-abrow svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: rgba(247, 245, 240, .4); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fp-abturn { margin-top: 9px; background: var(--fp-teja); border-radius: 12px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.fp-abturn .t { font: 600 14.5px/1.35 var(--fp-sans); color: var(--fp-cal); }
.fp-abturn .r { display: flex; gap: 10px; align-items: center; font: 400 13px/1.45 var(--fp-sans); color: rgba(247, 245, 240, .92); }
.fp-abturn .r svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--fp-cal); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Landing hero office card (2026-07-31: the service-point data moved into a
 * glass card on the hero's right; the quote form went down to the FAQ band). */
.fp-offcard-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(247, 245, 240, .14); }
.fp-offcard-h .fp-offlogo { height: 36px; width: auto; }
.fp-obrow { display: flex; gap: 13px; align-items: flex-start; background: rgba(247, 245, 240, .06); border-radius: 10px; padding: 13px 16px; }
.fp-obrow svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--fp-teja-l); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fp-obrow > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fp-obrow .l { font: 500 9.5px/1 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 245, 240, .45); }
.fp-obrow .v { font: 600 14.5px/1.4 var(--fp-sans); color: var(--fp-cal); }
.fp-obrow .v a { color: var(--fp-cal); text-decoration: none; }
.fp-obrow .v a:hover { color: var(--fp-teja-l); }
.fp-obrow .s { font: 400 12.5px/1.5 var(--fp-sans); color: rgba(247, 245, 240, .55); text-wrap: pretty; }
/* Money-cycle cards (accounts page, Dani: «pon algo way, con iconos») —
 * four cal cards chained with teja arrows; temporal MONO tags, never
 * numbers next to icons (doctrine). */
.fp-cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fp-cyclecard { position: relative; background: var(--fp-cal); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.fp-cyclecard .when { font: 600 10px/1 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-teja); }
.fp-cyclecard:not(:last-child)::after { content: '→'; position: absolute; inset-inline-end: -16px; top: 42px; font: 600 17px/1 var(--fp-sans); color: var(--fp-teja); z-index: 1; }
/* Landing office card v2 (Dani 2026-07-31: real info must NOT read as a
 * decorative card) — WHITE functional card with a REAL embedded map,
 * dark host logo, talkrow data rows and a cal note. Deliberately STILL:
 * no float, no loops — the decorative language animates, the real one
 * doesn't. */
.fp-offbox2 { background: #fff; border: 1px solid var(--fp-line); border-radius: 14px; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 18px 44px rgba(23, 26, 28, .18); }
.fp-offbox2-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--fp-line); }
.fp-offbox2-h img { height: 30px; width: auto; }
.fp-offbox2-h .k { font: 600 10px/1.5 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-teja); text-align: right; }
.fp-offbox2-map { border-radius: 10px; overflow: hidden; border: 1px solid var(--fp-line); }
.fp-offbox2-map iframe { display: block; width: 100%; height: 190px; border: 0; }
.fp-offbox2-note { background: var(--fp-cal); border-radius: 10px; padding: 13px 16px; font: 400 12.5px/1.55 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-offbox2-note strong { font-weight: 600; color: var(--fp-tinta); }
/* Life loops for the story card: the old story «echoes» row by row, the
 * teja turn breathes. Floating reuses fpFloat via --fpr so the card keeps
 * its rotation. All gated on no-preference (fx doctrine). */
@media (prefers-reduced-motion: no-preference) {
  .fp-abcard { animation: fpFloat 6.5s ease-in-out infinite; }
  .fp-abcard .fp-abrow { animation: fpAbEcho 7.5s ease-in-out infinite; }
  .fp-abcard .fp-abrow:nth-of-type(2) { animation-delay: .4s; }
  .fp-abcard .fp-abrow:nth-of-type(3) { animation-delay: 2.9s; }
  .fp-abcard .fp-abrow:nth-of-type(4) { animation-delay: 5.4s; }
  .fp-abturn { animation: fpAbGlow 5.6s ease-in-out infinite; }
}
@keyframes fpAbEcho { 0%, 13%, 100% { background: rgba(247, 245, 240, .06); } 6% { background: rgba(247, 245, 240, .14); } }
@keyframes fpAbGlow { 0%, 100% { box-shadow: 0 6px 18px rgba(156, 82, 40, 0); } 50% { box-shadow: 0 14px 40px rgba(156, 82, 40, .45); } }
/* The «vidilla» recipe ported to every hero card (Dani 2026-07-31, after
 * the about card landed): gentle float (rotation preserved via --fpr),
 * sequential row echo per card family, breathing teja turns. */
@media (prefers-reduced-motion: no-preference) {
  .fp-portal, .fp-ixcard, .fp-inbox { animation: fpFloat 6.8s ease-in-out infinite; }
  .fp-portal .fp-portal-row { animation: fpPortalEcho 8s ease-in-out infinite; }
  .fp-portal .fp-portal-row:nth-of-type(2) { animation-delay: .4s; }
  .fp-portal .fp-portal-row:nth-of-type(3) { animation-delay: 3s; }
  .fp-portal .fp-portal-row:nth-of-type(4) { animation-delay: 5.6s; }
  .fp-inbox .fp-inbox-row { animation: fpInboxEcho 8s ease-in-out infinite; }
  .fp-inbox .fp-inbox-row:nth-of-type(2) { animation-delay: .4s; }
  .fp-inbox .fp-inbox-row:nth-of-type(3) { animation-delay: 3s; }
  .fp-inbox .fp-inbox-row:nth-of-type(4) { animation-delay: 5.6s; }
  .fp-inbox-turn { animation: fpAbGlow 5.6s ease-in-out infinite; }
  .fp-ixcard .fp-covrow { animation: fpPortalEcho 8.4s ease-in-out infinite; }
  .fp-ixcard a.fp-covrow:nth-of-type(1) { animation-delay: .4s; }
  .fp-ixcard a.fp-covrow:nth-of-type(2) { animation-delay: 3.2s; }
  .fp-ixcard a.fp-covrow:nth-of-type(3) { animation-delay: 6s; }
  .fp-ix a { border-radius: 6px; animation: fpIxTick 8s ease-in-out infinite; }
  .fp-ix a:nth-child(1) { animation-delay: 0s; } .fp-ix a:nth-child(2) { animation-delay: .75s; }
  .fp-ix a:nth-child(3) { animation-delay: 1.5s; } .fp-ix a:nth-child(4) { animation-delay: 2.25s; }
  .fp-ix a:nth-child(5) { animation-delay: 3s; } .fp-ix a:nth-child(6) { animation-delay: 3.75s; }
  .fp-ix a:nth-child(7) { animation-delay: 4.5s; } .fp-ix a:nth-child(8) { animation-delay: 5.25s; }
  .fp-ix a:nth-child(9) { animation-delay: 6s; } .fp-ix a:nth-child(10) { animation-delay: 6.75s; }
}
@keyframes fpPortalEcho { 0%, 12%, 100% { background: rgba(247, 245, 240, .07); } 6% { background: rgba(247, 245, 240, .14); } }
@keyframes fpInboxEcho { 0%, 12%, 100% { background: var(--fp-cal); } 6% { background: #ece8df; } }
@keyframes fpIxTick { 0%, 9%, 100% { background: rgba(247, 245, 240, 0); } 4.5% { background: rgba(247, 245, 240, .08); } }
/* About creds band v2 + comment carousel (Dani: «mejora el módulo de números,
 * añade carrusel de comentarios») — teja bar over each figure, quotes below. */
.fp-credband--teja { background: var(--fp-teja); }
.fp-credband--teja .fp-credbar { background: var(--fp-cal); opacity: .85; }
.fp-credband--teja .fp-credsub { color: rgba(247, 245, 240, .8); }
.fp-cred2 { display: flex; flex-direction: column; gap: 12px; }
.fp-credbar { width: 30px; height: 3px; border-radius: 2px; background: var(--fp-teja-l); }
.fp-crednum2 { font: 600 40px/1.05 var(--fp-sans); color: var(--fp-cal); }
.fp-tcar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fp-tcar::-webkit-scrollbar { display: none; }
.fp-tslide { flex: 0 0 50%; scroll-snap-align: start; display: flex; padding: 0 9px; }
.fp-tbox { background: #fff; border: 1px solid var(--fp-line-mid); border-radius: 12px; padding: 36px 30px 38px; width: 100%; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.fp-ava--icon { background: var(--fp-tinta); }
.fp-ava--icon svg { width: 22px; height: 22px; fill: none; stroke: var(--fp-cal); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fp-tslide .fp-quote-mark { line-height: 1; height: 56px; }   /* the scroll container clips the 0.35-line glyph's upward overflow */
.fp-tslide .fp-quote-txt { font-size: 19px; max-width: 560px; }
.fp-tslide .fp-quote-meta { text-align: left; }

/* About additions, phones (source-order: media blocks stay last). */
@media (max-width: 760px) {
  .fp-grid2 { grid-template-columns: 1fr; }
  .fp-herocomp { min-width: 0; max-width: 100%; min-height: 300px; }
  .fp-ictile--a { width: 150px; height: 150px; }
  .fp-ictile--a svg { width: 78px; height: 78px; }
  .fp-ictile--b { width: 96px; height: 96px; }
  .fp-ictile--b svg { width: 46px; height: 46px; }
  .fp-ictile--c { width: 110px; height: 110px; }
  .fp-ictile--c svg { width: 52px; height: 52px; }
  .fp-ictile--d { width: 86px; height: 86px; }
  .fp-ictile--d svg { width: 40px; height: 40px; }
  .fp-crednum2 { font-size: 30px; }
  .fp-tslide { flex-basis: 100%; }
  .fp-tbox { padding: 28px 20px 24px; }
  .fp-tslide .fp-quote-txt { font-size: 19px; }
  .fp-cycle { grid-template-columns: 1fr; }
  .fp-cyclecard:not(:last-child)::after { content: '↓'; inset-inline-end: auto; left: 26px; top: auto; bottom: -18px; }
}

/* ── Blog — 2026-07-31, views/site/blog.php + post.php. The INDEX is a
 *    FIDELITY port of blog.dc.html (hero + auto-fit white cards, category
 *    pill + mono date/read-time; the model ships no featured/filter/pager).
 *    The ARTICLE has no model — it is the inner-page design pass in the
 *    same voice: single 780px measure, mono meta, uppercase title,
 *    .fp-prose typography, quote-CTA box, keep-reading on the model card. */
.fp-bloghero { padding-top: 80px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 22px; }
.fp-blogh1 { margin: 0; max-width: 820px; font: 600 52px/1.08 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); text-wrap: pretty; }
.fp-bloglead { margin: 0; max-width: 600px; font: 400 17px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-blogposts { padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.fp-bpost { text-decoration: none; background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s; }
.fp-bpost:hover { border-color: var(--fp-teja); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23, 26, 28, .08); }
/* Card cover (Dani 2026-07-31: images on the cards — deviation from the
 * text-only model card). Body carries the model's padding. */
img.fp-bpost-cover { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; border-bottom: 1px solid var(--fp-line); }
.fp-bpost-body { padding: 26px 32px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fp-bpost-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.fp-bpost-pill { font: 600 10.5px/1 var(--fp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fp-teja); border: 1px solid var(--fp-teja); border-radius: 99px; padding: 6px 12px; }
.fp-bpost-date { font: 500 10.5px/1 var(--fp-mono); color: rgba(0, 0, 0, .4); }
.fp-bpost-t { font: 600 20px/1.3 var(--fp-sans); color: var(--fp-tinta); }   /* no text-wrap:pretty — long real titles rebalance into chopped-looking lines (Dani 2026-07-31); the model never showed it because its fake titles were short */
.fp-bpost-d { font: 400 14px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-bpost-read { font: 500 10.5px/1 var(--fp-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .38); margin-top: auto; }

.fp-post > .fp-wrap { padding-bottom: 96px; }
/* Two columns since 2026-07-31 (Dani: sidebar on ENTRIES, index stays the
 * model). Aside is NOT sticky — house rule. */
.fp-postgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-top: 64px; align-items: start; }
.fp-postmain { min-width: 0; }
.fp-post-head { max-width: 780px; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.fp-post-meta { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; font: 500 10.5px/1.6 var(--fp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fp-piedra); }
.fp-post-meta .c { color: var(--fp-teja); font-weight: 600; }
.fp-post-title { margin: 0; font: 600 40px/1.18 var(--fp-sans); color: var(--fp-tinta); }   /* sentence case, not the uppercase display voice: real titles are 12-word sentences — caps + long words leave chopped-looking lines (Dani 2026-07-31) */
.fp-post-stand { max-width: 680px; }
img.fp-post-cover { display: block; width: 100%; max-width: 780px; height: auto; margin: 40px 0 0; border-radius: 14px; border: 1px solid var(--fp-line); }
.fp-prose { max-width: 780px; margin: 0; padding-top: 44px; font: 400 16.5px/1.75 var(--fp-sans); color: #33383b; }
.fp-prose h2 { font: 600 24px/1.25 var(--fp-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--fp-tinta); margin: 2.1em 0 .7em; text-wrap: pretty; }
.fp-prose h3 { font: 600 18px/1.3 var(--fp-sans); color: var(--fp-tinta); margin: 1.8em 0 .5em; }
.fp-prose > :first-child { margin-top: 0; }
.fp-prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.fp-prose a { color: var(--fp-teja); text-decoration: underline; text-underline-offset: 3px; }
.fp-prose a:hover { color: var(--fp-teja-d); }
.fp-prose ul, .fp-prose ol { margin: 0 0 1.15em; padding-inline-start: 1.3em; }
.fp-prose li { margin-bottom: .45em; }
.fp-prose li::marker { color: var(--fp-teja); }
.fp-prose blockquote { margin: 1.6em 0; border-inline-start: 3px solid var(--fp-teja); background: #fff; border-radius: 0 10px 10px 0; padding: 18px 22px; color: var(--fp-tinta); }
.fp-prose blockquote p:last-child { margin-bottom: 0; }
.fp-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.fp-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 14.5px; }
.fp-prose th, .fp-prose td { border: 1px solid var(--fp-line-mid); padding: 10px 12px; text-align: start; }
.fp-prose th { background: #fff; font-weight: 600; color: var(--fp-tinta); }
.fp-prose code { font-family: var(--fp-mono); font-size: .9em; background: rgba(0, 0, 0, .05); padding: 2px 6px; border-radius: 5px; }
.fp-prose hr { border: 0; border-top: 1px solid var(--fp-line-mid); margin: 2em 0; }
.fp-prose strong { color: var(--fp-tinta); }
.fp-post-tags { max-width: 780px; margin: 26px 0 0; }
.fp-post-cta { max-width: 780px; margin: 44px 0 0; background: #fff; border: 1px solid var(--fp-line); border-radius: 14px; padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fp-post-cta-txt { display: flex; flex-direction: column; gap: 6px; max-width: 470px; }
.fp-post-cta-txt .t { font: 600 17px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-post-cta-txt .d { font: 400 13.5px/1.55 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-keepread { padding-top: 88px; padding-bottom: 96px; }
.fp-keepread .fp-blogposts { padding-bottom: 0; }   /* the band already carries the foot */

/* Article sidebar (entries only) */
.fp-postside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fp-sidesearch { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--fp-line-str); border-radius: 10px; padding: 13px 16px; text-decoration: none; font: 400 14px/1 var(--fp-sans); color: var(--fp-piedra); transition: border-color .2s, color .2s; }
.fp-sidesearch:hover { border-color: var(--fp-teja); color: var(--fp-teja); }
.fp-sidesearch svg { width: 16px; height: 16px; flex: none; }
.fp-sidebox { background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.fp-side-eyebrow { font: 500 10px/1 var(--fp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fp-teja); margin-bottom: 4px; }
.fp-siderow { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; font: 500 14px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-siderow:hover { color: var(--fp-teja); }
.fp-siderow .n { font: 500 11px/1 var(--fp-mono); color: var(--fp-piedra); border: 1px solid var(--fp-line-str); border-radius: 99px; padding: 4px 9px; }
.fp-siderec { display: flex; flex-direction: column; gap: 3px; text-decoration: none; padding: 2px 0; }
.fp-siderec .t { font: 500 13.5px/1.4 var(--fp-sans); color: var(--fp-tinta); }
.fp-siderec:hover .t { color: var(--fp-teja); }
.fp-siderec .d { font: 500 10px/1 var(--fp-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .38); }
.fp-sidebox .fp-morelink { margin-top: 6px; font-size: 11.5px; }
.fp-sidecta { border-radius: 12px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; background:
    radial-gradient(420px 260px at 85% -10%, rgba(156, 82, 40, .22), transparent 60%),
    var(--fp-tinta); }
.fp-sidecta .t { font: 600 16px/1.3 var(--fp-sans); color: var(--fp-cal); text-wrap: pretty; }
.fp-sidecta .d { margin: 0; font: 400 13px/1.55 var(--fp-sans); color: rgba(247, 245, 240, .65); text-wrap: pretty; }

/* Search page (app skin over the core /search route) */
.fp-searchhero { padding-bottom: 40px; }
.fp-searchform { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--fp-line-str); border-radius: 10px; padding: 8px 8px 8px 18px; max-width: 620px; margin-top: 8px; color: var(--fp-piedra); }
.fp-searchform svg { width: 18px; height: 18px; flex: none; }
.fp-searchform input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15.5px/1.4 var(--fp-sans); color: var(--fp-tinta); }
.fp-searchform input::placeholder { color: var(--fp-piedra); }
.fp-searchform:focus-within { border-color: var(--fp-teja); }
.fp-searchbody { padding-bottom: 96px; }
.fp-sresults { display: flex; flex-direction: column; gap: 14px; max-width: 800px; }
.fp-sresult { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--fp-line); border-radius: 12px; padding: 24px 28px; text-decoration: none; transition: border-color .25s, transform .25s, box-shadow .25s; }
.fp-sresult:hover { border-color: var(--fp-teja); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(23, 26, 28, .08); }
.fp-sresult-t { font: 600 18px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.fp-sresult-d { font: 400 14px/1.6 var(--fp-sans); color: var(--fp-piedra); text-wrap: pretty; }
.fp-searchempty { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 620px; }
.fp-sresult-d mark, .site-search mark { background: rgba(214, 154, 114, .35); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Core search overlay (site-search.js <dialog>), fp clothes */
dialog.site-search { border: 1px solid var(--fp-line-mid); border-radius: 14px; padding: 0; width: min(640px, 92vw); box-shadow: 0 30px 70px rgba(23, 26, 28, .28); background: var(--fp-cal); font-family: var(--fp-sans); }
dialog.site-search::backdrop { background: rgba(23, 26, 28, .45); backdrop-filter: blur(3px); }
.site-search__bar { display: flex; align-items: center; gap: 10px; background: #fff; border-bottom: 1px solid var(--fp-line); padding: 14px 18px; }
.site-search__input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15.5px/1.4 var(--fp-sans); color: var(--fp-tinta); }
.site-search__results { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.site-search__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.site-search__item:hover, .site-search__item.is-active { background: #fff; }
.site-search__thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--fp-tinta); display: flex; align-items: center; justify-content: center; }
.site-search__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-search__thumb--ph { background: var(--fp-teja); }
.site-search__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.site-search__type { font: 500 9.5px/1 var(--fp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fp-teja); }
.site-search__title { font: 600 14.5px/1.3 var(--fp-sans); color: var(--fp-tinta); }
.site-search__excerpt { font: 400 12.5px/1.5 var(--fp-sans); color: var(--fp-piedra); }
.site-search__empty { padding: 18px; font: 400 14px/1.5 var(--fp-sans); color: var(--fp-piedra); }
.site-search__all { display: block; padding: 12px 18px; border-top: 1px solid var(--fp-line); text-decoration: none; font: 600 12px/1 var(--fp-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--fp-teja); }
.site-search__all:hover { color: var(--fp-teja-d); }

/* Blog + search, phones (source-order: media blocks stay last). The model's
 * 340px grid min overflows a 390 viewport — single column under 760. */
@media (max-width: 760px) {
  .fp-bloghero { padding-top: 48px; padding-bottom: 40px; }
  .fp-blogh1 { font-size: 36px; }
  .fp-blogposts { grid-template-columns: 1fr; padding-bottom: 72px; }
  .fp-bpost-body { padding: 22px 24px 24px; }
  .fp-postgrid { grid-template-columns: 1fr; gap: 44px; padding-top: 44px; }
  .fp-post-title { font-size: 27px; }
  .fp-prose { padding-top: 36px; }
  .fp-post-cta { padding: 22px; }
  .fp-keepread { padding-top: 64px; padding-bottom: 72px; }
  .fp-searchform { flex-wrap: wrap; padding: 12px; }
  .fp-searchform input { flex-basis: 100%; order: -1; padding: 4px 6px; }
  .fp-sresult { padding: 20px; }
}

/* Ten-language header at phone width (2026-08-01, the seven-language
 * activation): the actions cluster can no longer hold the quote CTA —
 * RU pushed scrollWidth to 503 — and the 320px two-column language panel
 * juts past the viewport when anchored to its chip. The hero carries the
 * same CTA; the panel spans the header instead (both edges = RTL-safe). */
@media (max-width: 600px) {
  .site-actions .fp-btn--primary { display: none; }
  /* fixed, not absolute: .site-actions is position:relative (menu z fix)
     and would become the containing block — the panel came out ~200px
     wide, cramped for ten languages (Dani caught it). Fixed + auto top
     keeps it under the chip, spanning the viewport. */
  .site-lang-panel { position: fixed; left: 12px; right: 12px; top: 72px; min-width: 0; }   /* explicit top: the base calc(100%+8px) reads the VIEWPORT under position:fixed (panel landed at 852px, off-screen) */
  /* Long language names (RU «Нидерландский») push the 2-column grid's code
     spans past the panel; display-size words («amministratore») exceed the
     column in the footer CTA. Let both wrap instead of overflowing. */
  .site-lang-panel a { white-space: normal; min-width: 0; }
  .fp-foot-cta-copy { min-width: 0; }
  .fp-foot-h, .fp-foot-cta-copy .fp-kick,
  .fp-h1, .fp-h2 { overflow-wrap: break-word; hyphens: auto; }
  /* 42px uppercase left «ADMINISTRADOR» (~340px) hyphen-chopped at 390 —
     smaller size fits every language's longest word whole (Dani). */
  .fp-foot-h { font-size: 30px; }
}