/* ==========================================================================
   Serrano, Foix y Riquelme Abogados — main stylesheet
   Layout of this file:
     1. Design tokens      5. Buttons
     2. Reset and base     6. Sections
     3. Layout             7. Components
     4. Site header        8. Footer and utilities
   ========================================================================== */

/* ============================ 1. DESIGN TOKENS ========================== */
:root {
  /* Brand color (inherited from the previous site) */
  --blue-900: #0a2f4e;
  --blue-800: #0d3e65;   /* primary — corporate color */
  --blue-700: #1a4f78;
  --blue-600: #41617a;   /* secondary */
  --blue-400: #7d95a8;
  --blue-200: #afbbc3;   /* neutral */

  /* Accent: darkened from the original #078DFA to meet WCAG AA
     (4.5:1 on white) in body text. */
  --accent: #0a6fc2;
  --accent-dark: #085a9e;
  --accent-light: #e8f2fb;

  /* Neutrals */
  --ink: #2e353b;      /* body text */
  --ink-soft: #5a646d;
  --line: #e2e8ed;
  --bg: #ffffff;
  --bg-alt: #f5f8fa;
  --bg-dark: var(--blue-800);

  /* Typography */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Explicit type scale (the previous site had none) */
  --t-xs: 0.8125rem;   /* 13px */
  --t-sm: 0.9375rem;   /* 15px */
  --t-base: 1.0625rem; /* 17px */
  --t-md: 1.1875rem;   /* 19px */
  --t-lg: 1.5rem;      /* 24px */
  --t-xl: 2rem;        /* 32px */
  --t-2xl: 2.5rem;     /* 40px */
  --t-3xl: 3.25rem;    /* 52px */

  /* Spacing (4px scale) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  /* Misc */
  --width: 1180px;
  --width-text: 68ch;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(13, 62, 101, 0.08), 0 6px 20px rgba(13, 62, 101, 0.06);
  --shadow-strong: 0 4px 12px rgba(13, 62, 101, 0.12), 0 16px 40px rgba(13, 62, 101, 0.10);
  --transition: 180ms ease;
  --header-height: 76px;
}

/* =========================== 2. RESET AND BASE ========================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* offsets the fixed header when jumping to an anchor */
  scroll-padding-top: calc(var(--header-height) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--blue-800);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); max-width: var(--width-text); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }

/* Visible, consistent focus ring for accessibility */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to content: only appears on keyboard focus */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--blue-800); color: #fff;
  padding: var(--s-3) var(--s-5); z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* ============================== 3. LAYOUT =============================== */
.container {
  width: 100%;
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-9); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--compact { padding-block: var(--s-8); }

.section__intro { max-width: 62ch; margin-bottom: var(--s-7); }

/* Eyebrow: short label above the heading */
.eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow { color: var(--blue-200); }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* An item left alone on the last row spans the full width and centers itself,
   keeping the width of a single column, instead of hugging the left edge. */
@media (min-width: 700px) and (max-width: 999.98px) {
  .grid--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--s-5)) / 2);
  }
}
@media (min-width: 1000px) {
  .grid--3 > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 2 * var(--s-5)) / 3);
  }
}

/* =========================== 4. SITE HEADER ============================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--header-height);
}

.site-header__logo { flex-shrink: 0; }
/* The logo square bleeds to the edge, so this height IS the size of the
   square itself. Ratio ~6.85:1, i.e. 274px wide at 40px tall.
   On small screens it shrinks so it does not collide with the menu button. */
.site-header__logo img { height: 40px; width: auto; }
@media (max-width: 600px) { .site-header__logo img { height: 36px; } }
@media (max-width: 400px) { .site-header__logo img { height: 31px; } }

.nav { margin-left: auto; }
.nav__list {
  display: flex; align-items: center; gap: var(--s-5);
  list-style: none; margin: 0; padding: 0;
}
.nav__list li { margin: 0; }

.nav__link {
  font-size: var(--t-sm); font-weight: 500; color: var(--blue-800);
  text-decoration: none; padding: var(--s-2) 0;
  border-bottom: 2px solid transparent; transition: var(--transition);
}
.nav__link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Hamburger button (mobile only) */
.nav__toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-2) var(--s-3); cursor: pointer; color: var(--blue-800);
}
.nav__toggle svg { display: block; width: 24px; height: 24px; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-height) 0 auto 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-strong);
    transform: translateY(-130%); transition: transform 240ms ease;
    margin-left: 0;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav__list {
    flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--s-4) var(--s-5) var(--s-6);
  }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: var(--s-4) 0; font-size: var(--t-md); }
  .nav .button { margin-top: var(--s-5); }
}

/* ============================== 5. BUTTONS ============================== */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  line-height: 1.3; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.button svg { width: 18px; height: 18px; flex-shrink: 0; }

.button--primary { background: var(--accent); color: #fff; }
.button--primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }

.button--secondary { background: transparent; color: var(--blue-800); border-color: var(--blue-200); }
.button--secondary:hover { border-color: var(--accent); color: var(--accent); }

.button--light { background: #fff; color: var(--blue-800); }
.button--light:hover { background: var(--accent-light); color: var(--blue-800); }

.button--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.button--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.button--whatsapp { background: #25d366; color: #0a2f14; }
.button--whatsapp:hover { background: #1eb855; color: #0a2f14; }

.button--large { padding: var(--s-4) var(--s-6); font-size: var(--t-base); }
.button--block { width: 100%; }

/* =========================== 6. HERO (home page) ======================== */
.hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: flex; align-items: center;
  color: #fff;
  background: var(--blue-900);
  overflow: hidden;
}

/* Image layers cycled by JS */
.hero__background { position: absolute; inset: 0; }
.hero__layer {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero__layer[data-active="true"] { opacity: 1; }

/* Veil that guarantees text contrast over any photo */
.hero__background::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(10, 47, 78, 0.94) 0%,
              rgba(10, 47, 78, 0.86) 45%,
              rgba(13, 62, 101, 0.62) 100%);
}

.hero__content { position: relative; z-index: 2; padding-block: var(--s-8); }
.hero__text { max-width: 40rem; }
.hero h1 { color: #fff; margin-bottom: var(--s-5); }
.hero__subtitle {
  font-size: var(--t-md); color: rgba(255,255,255,.92);
  max-width: 34rem; margin-bottom: var(--s-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Trust signal bar below the hero */
.trust {
  background: var(--blue-900); color: rgba(255,255,255,.9);
  border-top: 1px solid rgba(255,255,255,.12);
}
.trust__title {
  margin: 0; padding-top: var(--s-6); max-width: none; text-align: center;
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--blue-200);
}
.trust__list {
  display: grid; gap: var(--s-5); list-style: none; margin: 0;
  padding: var(--s-5) 0 var(--s-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 800px) { .trust__list { grid-template-columns: repeat(4, 1fr); } }
.trust__item { margin: 0; text-align: center; }
.trust__figure {
  display: block; font-size: var(--t-lg); font-weight: 600; color: #fff;
  line-height: 1.2; margin-bottom: var(--s-1);
}
.trust__text { font-size: var(--t-xs); letter-spacing: .04em; }

/* Spotlight band: the one service the firm wants a visitor to meet first,
   between the trust bar and the services grid. */
.spotlight { background: var(--bg-alt); padding-block: var(--s-8); }
/* The call to action is its own grid item, not part of the text block, so that
   on one column it lands after the checklist instead of splitting text from card. */
.spotlight__inner { display: grid; gap: var(--s-6); }
.spotlight__cta { justify-self: start; }
@media (min-width: 900px) {
  .spotlight__inner {
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas: "text card"
                         "cta  card";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-8); row-gap: var(--s-5);
  }
  .spotlight__text { grid-area: text; }
  .spotlight__cta { grid-area: cta; }
  .spotlight__card { grid-area: card; align-self: center; }
}
.spotlight h2 { font-size: var(--t-xl); margin-bottom: var(--s-4); }
.spotlight p { color: var(--ink-soft); margin-bottom: 0; max-width: 46ch; }

/* The checklist reads as a card, echoing the service cards further down */
.spotlight__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); box-shadow: var(--shadow);
}
.spotlight__list { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.spotlight__item {
  position: relative; padding-left: 2.25rem; min-height: 1.5rem;
  font-size: var(--t-sm); color: var(--ink);
}
.spotlight__item::before {
  content: "✓";
  position: absolute; left: 0; top: .1em;
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  font-size: .75rem; line-height: 1;
}

/* Credential band: what the firm stands for, next to the team photo. Same grid
   shape as the spotlight — the call to action is its own item so it drops below
   the photo once the band collapses to one column. */
.credential { display: grid; gap: var(--s-6); }
.credential__cta { justify-self: start; }
@media (min-width: 700px) {
  .credential {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text photo"
                         "cta  photo";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-8); row-gap: var(--s-5);
  }
  .credential__text { grid-area: text; }
  .credential__cta { grid-area: cta; }
  .credential__photo { grid-area: photo; align-self: center; }
}
.credential__text > :last-child { margin-bottom: 0; }
.credential__photo img { border-radius: var(--radius-lg); }

/* ============================ 7. COMPONENTS ============================= */

/* --- Generic card --- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-6); transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow); border-color: var(--blue-200); }
.card h3 { margin-bottom: var(--s-3); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* --- Service card --- */
.service__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: var(--s-4);
  background: var(--accent-light); color: var(--accent); border-radius: var(--radius);
}
.service__icon svg { width: 24px; height: 24px; }
.service__list { list-style: none; padding: 0; margin: 0; }
.service__list li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.service__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* --- Lawyer profile --- */
.person { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .person { grid-template-columns: 220px 1fr; gap: var(--s-6); } }

.person__photo {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--bg-alt);
}
.person__name { margin-bottom: var(--s-1); }
.person__role {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4);
}
.person__bio p { font-size: var(--t-sm); color: var(--ink-soft); }
.person__bio p:last-child { margin-bottom: 0; }
.person__list { font-size: var(--t-sm); color: var(--ink-soft); }

.person + .person { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--line); }

/* Compact team card (home page) */
.member { text-align: center; }
.member__photo {
  width: 150px; height: 150px; object-fit: cover; object-position: top center;
  border-radius: 50%; margin: 0 auto var(--s-4);
}
.member__name { font-size: var(--t-base); margin-bottom: var(--s-1); }
.member__role {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); margin: 0;
}

/* --- News card --- */
.post {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: var(--transition);
}
.post:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.post__meta {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: var(--s-3);
}
.label {
  display: inline-block; padding: 2px var(--s-2);
  background: var(--accent-light); color: var(--accent-dark);
  border-radius: 3px; font-weight: 600; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .04em;
}
.post__title { font-size: var(--t-md); margin-bottom: var(--s-3); }
.post__title a { color: var(--blue-800); text-decoration: none; }
.post__title a:hover { color: var(--accent); }
.post__excerpt { font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: var(--s-4); }
.post__link {
  margin-top: auto; font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.post__link::after { content: " →"; }

/* --- Placeholder content notice --- */
.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
  background: #fff8e6; border: 1px solid #f0d999;
  border-left: 4px solid #e0a800; border-radius: var(--radius);
  font-size: var(--t-sm); color: #6b5200;
}
.notice strong { color: #4d3b00; }
.notice p { margin: 0; max-width: none; }

/* --- Contact form --- */
.contact { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.1fr; gap: var(--s-8); } }

.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 600; color: var(--blue-800); }
.field .optional { font-weight: 400; color: var(--ink-soft); }

.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--t-base); color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--blue-200); border-radius: var(--radius);
  background: #fff; transition: var(--transition); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 111, 194, .16);
}
.field__help { font-size: var(--t-xs); color: var(--ink-soft); }

/* Consent checkbox: label beside the box, not above it like the other fields */
.field--check {
  grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3);
}
.field--check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.field--check label { font-weight: 400; font-size: var(--t-xs); color: var(--ink-soft); }

/* Bot trap. It was off-screen until 2026-08-10, deliberately, because bots skip
   display:none — but so does autofill, and off-screen it does not: the field is
   rendered and named sitio_web, which a password manager reads as "website" and
   fills. A filled trap is discarded in silence by the Apps Script, so the price
   of catching a few more bots was losing real enquiries with no trace. For a
   firm that lives on those enquiries that trade is the wrong way round. */
.field--trap { display: none; }

.form button[disabled] { opacity: .6; cursor: progress; transform: none; }

.form__status {
  margin: 0; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); border: 1px solid;
  font-size: var(--t-sm);
}
.form__status--ok { background: #edf7ef; border-color: #a8d5b5; color: #1d5b31; }
.form__status--error { background: #fdeded; border-color: #e6b0b0; color: #8a2626; }
.form__status a { color: inherit; text-decoration: underline; }

.form__note { font-size: var(--t-xs); color: var(--ink-soft); margin: 0; }

/* Direct contact details */
.info { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-4); }
.info li { display: flex; gap: var(--s-4); align-items: flex-start; margin: 0; }
.info__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
}
.info__icon svg { width: 20px; height: 20px; }
.info__label {
  display: block; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--blue-200); margin-bottom: 2px;
}
.info a { color: #fff; text-decoration: none; font-weight: 500; }
.info a:hover { color: var(--blue-200); text-decoration: underline; }

/* --- Call to action band --- */
.cta-band { background: var(--blue-800); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { margin-inline: auto; color: rgba(255,255,255,.9); }
.cta-band__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; margin-top: var(--s-6);
}

/* --- Photo background with the brand veil ---
   Same gradient as the hero, which the brand manual (§06) defines as *the* way
   to put text over a photograph. Composed onto .page-header and .cta-band, which
   keep their flat blue as the colour showing while the image loads.

   The gradient is directional — 94% opaque on the left, 62% on the right — so
   the photo only really shows where there is no text. That is why the banners
   are cropped to 1600x334: at that ratio one file covers every width from 390px
   to 1920px with no visible upscaling. */
.photo-bg { position: relative; overflow: hidden; }
.photo-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--photo-bg);
  background-size: cover; background-position: center;
}
.photo-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(10, 47, 78, 0.94) 0%,
              rgba(10, 47, 78, 0.86) 45%,
              rgba(13, 62, 101, 0.62) 100%);
}
/* Lifts the content over both layers. */
.photo-bg > .container { position: relative; z-index: 2; }

/* Named after what the photograph shows, not after the page, because each one is
   used twice: as a page header on one page and as a closing band on another. No
   page repeats the same image top and bottom.

   URLs resolve against this stylesheet, so the same class works on the pages at
   the root and on the generated ones sitting one directory down. */
.photo-bg--meeting-room   { --photo-bg: url("../assets/img/banner/meeting-room.webp"); }
.photo-bg--open-office    { --photo-bg: url("../assets/img/banner/open-office.webp"); }
.photo-bg--desks          { --photo-bg: url("../assets/img/banner/desks.webp"); }
.photo-bg--private-office { --photo-bg: url("../assets/img/banner/private-office.webp"); }

/* --- Inner page header --- */
.page-header {
  background: var(--blue-800); color: #fff;
  padding-block: var(--s-8);
}
.page-header h1 { color: #fff; margin-bottom: var(--s-3); font-size: var(--t-2xl); }
.page-header p { color: rgba(255,255,255,.88); max-width: 52ch; margin: 0; }

/* --- Breadcrumbs --- */
.breadcrumbs { font-size: var(--t-xs); margin-bottom: var(--s-4); color: rgba(255,255,255,.7); }
.breadcrumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* --- Article (blog post) --- */
.article { max-width: var(--width-text); margin-inline: auto; }
.article h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.article h3 { margin-top: var(--s-6); }
.article ul { color: var(--ink-soft); }

/* Legal disclaimer the brand manual requires on every explanatory piece */
.disclaimer {
  max-width: var(--width-text); margin: var(--s-6) auto 0;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--ink-soft);
}
.disclaimer p { margin: 0; max-width: none; }

/* --- Pagination --- */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: var(--s-2);
  margin-top: var(--s-7); list-style: none; padding: 0;
}
.pagination li { margin: 0; }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--t-sm); text-decoration: none; color: var(--blue-800);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ======================== 8. FOOTER AND UTILITIES ======================= */
.site-footer { background: var(--blue-900); color: rgba(255,255,255,.75); padding-block: var(--s-7) var(--s-5); font-size: var(--t-sm); }
.site-footer__grid { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }

/* The footer uses the original three-line logo, larger than the header one */
.site-footer__logo { height: 92px; width: auto; margin-bottom: var(--s-5); }
@media (max-width: 480px) { .site-footer__logo { height: 76px; } }
.site-footer h3 { font-size: var(--t-sm); color: #fff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--t-xs); color: rgba(255,255,255,.6);
}
.site-footer__legal p { margin: 0; max-width: none; }

/* --- Floating WhatsApp button: visible at every width --- */
.wa-float {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 90;
  display: grid; place-items: center; width: 56px; height: 56px;
  background: #25d366; color: #fff; border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,.24); transition: var(--transition);
}
.wa-float:hover { transform: scale(1.06); color: #fff; }
.wa-float svg { width: 30px; height: 30px; }

/* On mobile the button shrinks slightly and respects the safe area of
   phones with a gesture bar. */
@media (max-width: 767px) {
  .wa-float {
    width: 52px; height: 52px;
    right: var(--s-3);
    bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  }
  .wa-float svg { width: 28px; height: 28px; }
}

/* --- Utilities --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.centered { text-align: center; }
.centered p { margin-inline: auto; }
/* When the paragraph itself is centered, the max-width inherited from
   <p> has to be cancelled: otherwise the box stays narrow and stuck to the
   left, and the content centers against the box instead of the container. */
p.centered { max-width: none; margin-inline: auto; }

/* --- Responsive type adjustments --- */
@media (max-width: 780px) {
  :root {
    --t-3xl: 2.25rem; --t-2xl: 1.75rem; --t-xl: 1.5rem; --t-lg: 1.25rem;
    --s-9: 3.5rem; --s-8: 2.5rem;
  }
}

/* --- Honor the reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__layer { transition: none; }
}