/* ============================================================
   APS SAINZ ABOGADOS SLP — Home (ES)
   Foundation: Concept C · "Galería tipográfica"
   Minimal-luxury, type-led. Cream canvas, oxblood + gold.
   Two refinements baked in:
     (1) Hero engraving watermark intensified (opacity .22 + filter).
     (2) Section headings use Concept B's mixed-type treatment
         (Fraunces upright + EB Garamond italic gold accent word).
   Vanilla CSS · no build step.
   ============================================================ */

:root {
  /* Brand palette (exact) */
  --oxblood:      #5E1E2B;
  --oxblood-dk:   #4c1722;
  --antique-gold: #A68A4D;
  --old-gold:     #B98D57;
  --aged-brass:   #BC7748;
  --raw-oak:      #D2BCA8;
  --plaster:      #DADCDD;
  --concrete:     #9C9D9F;
  --obsidian:     #202020;
  --cream:        #F6F0E8;
  --white:        #FFFFFF;

  --ink:      var(--obsidian);
  --ink-soft: #3a3a3a;
  /* AA-safe muted meta text on cream (~4.6:1). Concrete #9C9D9F is for
     hairlines/decoration only — never readable text. */
  --concrete-text: #6e6f71;
  --bg:       var(--cream);

  --font-display: "Fraunces", Georgia, serif;          /* headlines */
  --font-accent:  "EB Garamond", Georgia, serif;       /* italic accent + body lede */
  --font-ui:      "Inter", system-ui, -apple-system, Segoe UI, sans-serif; /* meta/UI */

  --maxw: 1560px;
  --gutter: clamp(1.4rem, 3.5vw, 2.75rem);

  /* hairlines */
  --rule:      rgba(32, 32, 32, .10);
  --rule-2:    rgba(32, 32, 32, .12);
  --rule-gold: rgba(166, 138, 77, .32);

  /* rhythm */
  --section-y: clamp(3.4rem, 9vw, 7rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* faint paper grain via layered tints — keeps the cream from reading flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 88% -10%, rgba(166,138,77,.10), transparent 55%),
    radial-gradient(90% 70% at -10% 110%, rgba(94,30,43,.06), transparent 55%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container--lg { max-width: 1760px; }
.container--md { max-width: 760px; }

/* ============================================================
   ACCESSIBILITY HELPERS
   ============================================================ */
.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 200;
  background: var(--oxblood);
  color: var(--white);
  padding: .65rem 1rem;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: .85rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 1px;
}
.band-dark :focus-visible { outline-color: var(--antique-gold); }

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
}
.btn__icon { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }

.btn--primary {
  padding: .95rem 1.9rem;
  background: transparent;
  color: var(--oxblood);
  border: 1.5px solid var(--old-gold);
  border-radius: 999px;
}
.btn--primary:hover { transform: translateY(-2px); background: var(--old-gold); color: var(--obsidian); }
.btn--primary:hover .btn__icon { transform: translateX(3px); }

.btn--ghost {
  padding: .95rem .4rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  position: relative;
}
.btn--ghost::after {
  content: "";
  position: absolute;
  left: .4rem; right: .4rem; bottom: .65rem;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.btn--ghost:hover::after { transform: scaleX(1); }
.btn--ghost:hover .btn__icon { transform: translateX(3px); }
.btn--ghost.is-disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* cream face on dark bands → antique-gold hover (mirrors Concept B) */
.btn--on-dark {
  padding: .95rem 1.9rem;
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--old-gold);
  border-radius: 999px;
}
.btn--on-dark:hover { background: var(--old-gold); color: var(--obsidian); border-color: var(--old-gold); transform: translateY(-2px); }
.btn--on-dark:hover .btn__icon { transform: translateX(3px); }

.btn--sm { min-height: 44px; padding: .72rem 1.2rem; font-size: .74rem; }
.btn--block { width: 100%; }

/* inline arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oxblood);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.link-arrow:hover { gap: .8rem; color: var(--oxblood-dk); }
.link-arrow:hover svg { transform: translateX(3px); }
.band-dark .link-arrow { color: var(--old-gold); }

/* ============================================================
   EYEBROW / KICKER  (Concept C "meta" voice)
   ============================================================ */
.eyebrow {
  margin: 0 0 clamp(1rem, 2.4vw, 1.6rem);
  font-family: var(--font-ui);
  font-size: clamp(.68rem, 1vw, .76rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before {
  content: "";
  width: clamp(28px, 5vw, 54px);
  height: 1px;
  background: var(--antique-gold);
  display: inline-block;
  flex: 0 0 auto;
}

/* ============================================================
   SECTION HEADING  (Concept B treatment in Concept C faces)
   Fraunces upright base + EB Garamond italic gold accent word.
   ============================================================ */
.section { padding-block: var(--section-y); position: relative; z-index: 1; }
.section + .section,
.section.has-rule { border-top: 1px solid var(--rule); }

.section-head {
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--rule-gold);   /* Concept B's gold hairline */
  max-width: var(--maxw);
}
.section-head .eyebrow { margin: 0 0 .9rem; }

.section-title {
  margin: 0;
  font-family: var(--font-display);            /* Fraunces */
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);      /* B-scale, sized for C's airiness */
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ink);
  font-optical-sizing: auto;
}
.section-title em {                             /* the italic accent word */
  font-family: var(--font-accent);             /* EB Garamond italic */
  font-style: italic;
  font-weight: 400;
  color: var(--oxblood);                        /* oxblood 10.93:1 on cream; gold failed AA. Gold accent kept on dark bands (line 283). */
  letter-spacing: 0;
  padding-right: .03em;
}

.lead {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  max-width: 46ch;
  font-family: var(--font-accent);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* centred head variant (booking) */
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }

/* head overrides on dark bands */
.band-dark .section-head { border-bottom-color: var(--rule-gold); }
.band-dark .section-title { color: var(--cream); font-weight: 500; }
.band-dark .section-title em { color: var(--antique-gold); }
.band-dark .eyebrow { color: var(--old-gold); }
.band-dark .eyebrow::before { background: var(--old-gold); }
.band-dark .lead { color: rgba(246,240,232,.74); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 240, 232, 0);
  transition: background .4s var(--ease), box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease);
}
.site-header.is-stuck {
  background: rgba(246, 240, 232, .9);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 1px 0 var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  max-width: 1760px;
  margin: 0 auto;
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.4rem, 3vw, 3rem);
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img {
  width: clamp(170px, 18vw, 230px);
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 1.8rem);
  flex-wrap: nowrap;
  white-space: nowrap;
}
.primary-nav a {
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink-soft);
  padding: .4rem 0;
  position: relative;
  transition: color .3s var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--oxblood);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.primary-nav a:hover { color: var(--oxblood); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--oxblood); }

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.8vw, 1.5rem);
}

/* segmented language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-family: var(--font-ui);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: .2rem;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-soft);                         /* inactive lang labels are interface text → 10.05:1 */
  transition: color .25s var(--ease), background .25s var(--ease);
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] {
  color: var(--cream);
  background: var(--oxblood);
}

.header-cta { flex: 0 0 auto; }

/* hamburger (mobile only) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* mobile lateral side drawer + dimmed backdrop */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(32, 32, 32, .42);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.mobile-menu-backdrop.is-open { opacity: 1; }

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 360px);
  z-index: 80;
  background: var(--cream);
  border-left: 1px solid var(--rule-gold);
  box-shadow: -18px 0 50px rgba(32, 32, 32, .22);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(1.4rem, 4vw, 2rem);
  padding: clamp(5rem, 12vw, 6.5rem) clamp(1.6rem, 6vw, 2.2rem) clamp(2rem, 6vw, 2.6rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .4s var(--ease), visibility .4s var(--ease);
}
.mobile-menu.is-open { visibility: visible; transform: translateX(0); }

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .2rem;
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .55rem 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  line-height: 1.1;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible { color: var(--oxblood); padding-left: .35rem; }

.mobile-menu .lang-switch { margin-top: .4rem; align-self: flex-start; }
.mobile-menu .btn--block { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  .mobile-menu-backdrop { transition: none; }
}

/* ============================================================
   HERO  (Concept C — preserved; engraving intensified)
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 2.4rem) var(--gutter) clamp(2.4rem, 6vh, 4.5rem);
  min-height: min(80vh, 720px);
  display: flex;
  align-items: flex-start;
  overflow: visible;
}
.hero-grid { width: 100%; }
.hero-copy { position: relative; z-index: 2; max-width: min(92vw, 980px); }
.hero-logo {
  display: block;
  width: clamp(220px, 28vw, 400px);
  height: auto;
  margin: 0 0 clamp(.5rem, 1.2vw, .95rem);
}

/* engraving watermark — tinted via CSS mask, bleeding off the top-right corner.
   REFINEMENT (1): opacity raised .12 -> .22 (~1.8x) + saturation/contrast bump
   so the scales read as a deliberate luxury motif, still secondary to the type. */
.hero::before {
  content: "";
  position: absolute;
  top: clamp(-5rem, -3vw, -.5rem);
  right: clamp(-6rem, -1vw, 2.5rem);
  width: clamp(400px, 52vw, 760px);
  height: clamp(420px, 56vw, 800px);
  background: linear-gradient(150deg, var(--oxblood) 0%, var(--aged-brass) 65%, var(--antique-gold) 100%);
  /* single mask: the engraving with its LEFT edge pre-faded into the PNG's own alpha.
     No mask-composite (it mis-rendered in iOS Safari and painted a rectangle). */
  -webkit-mask-image: url(../img/eng-detail-faded.png);
          mask-image: url(../img/eng-detail-faded.png);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: top right; mask-position: top right;
  opacity: .26;                         /* was .12 */
  filter: saturate(1.2) contrast(1.1);  /* richer, less washed-out */
  pointer-events: none;
  z-index: 0;
}
/* soft cream scrim directly behind the copy so glyphs never lose WCAG contrast
   against the densest part of the engraving (legibility guard for refinement 1) */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -2rem -3rem -2rem -3rem;
  z-index: -1;
  background: radial-gradient(120% 90% at 12% 40%, var(--cream) 40%, rgba(246,240,232,0) 78%);
  pointer-events: none;
}

.hero h1 { /* = .hero__title */
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--ink);
  font-optical-sizing: auto;
}
.hero h1 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--old-gold);         /* oro viejo (probando — contraste bajo sobre crema, ver nota) */
  letter-spacing: 0;
  padding-right: .04em;
}
.hero h1 .underline {
  display: block;
  height: 2px;
  width: clamp(120px, 22vw, 320px);
  margin-top: clamp(1.4rem, 2.6vw, 2.1rem);
  background: linear-gradient(90deg, var(--aged-brass), var(--antique-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .55s;
}
.hero.in h1 .underline,
.hero h1.is-in .underline { transform: scaleX(1); }

.hero-sub {
  margin: clamp(1.6rem, 3vw, 2.3rem) 0 0;
  max-width: 50ch;
  font-family: var(--font-accent);
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.9rem);
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.hero-meta {
  margin: clamp(2.6rem, 5vw, 3.6rem) 0 0;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--concrete-text);                    /* muted meta, AA-safe ~4.6:1 */
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, .32);
}
.trust .container { padding-block: clamp(1.6rem, 3.5vw, 2.4rem); }
.trust-row {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
}
.trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .25rem;
  padding-top: 1.15rem;
}
.trust-item::before {                 /* short gold hairline, in place of the icon */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 1px;
  background: var(--antique-gold);
}
.trust-text { display: flex; flex-direction: column; gap: .15rem; color: var(--ink-soft); font-size: .82rem; }
.trust-text strong {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

/* ============================================================
   VALORES — editorial index (sticky heading + numbered list)
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.values-intro { position: sticky; top: clamp(5rem, 9vw, 7rem); }
.values-lead {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  max-width: 32ch;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.values-intro .gold-rule { margin-top: clamp(1.4rem, 3vw, 2rem); }

.values-list { list-style: none; margin: 0; padding: 0; }
.value-row {
  display: grid;
  grid-template-columns: clamp(2.8rem, 5vw, 4.5rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3.2vw, 2.4rem) 0;
  border-top: 1px solid var(--rule-2);
  transition: padding-left .45s var(--ease);
}
.values-list .value-row:last-child { border-bottom: 1px solid var(--rule-2); }
.value-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--aged-brass);                        /* oversized oro numeral (decorative; aria-hidden) */
  font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}
.value-title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .45s var(--ease);
}
.value-desc {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
@media (hover: hover) {
  .value-row:hover { padding-left: clamp(.5rem, 1.6vw, 1.1rem); }
  .value-row:hover .value-num { color: var(--oxblood); }
  .value-row:hover .value-title { color: var(--oxblood); }
}

/* ============================================================
   AREAS DE PRACTICA — luxury panels
   Warm panel · gold top-rule grows on hover · tinted Themis
   watermark inside · oro-ring icon that fills on hover · lift.
   ============================================================ */
.card-grid {
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.4vw, 3rem) clamp(1.8rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.6rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22));
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  transition: transform .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease), background .5s var(--ease);
}
/* gold top hairline, grows from the left on hover */
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--aged-brass), var(--antique-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
  z-index: 2;
}
/* tinted Lady-Justice engraving, very subtle, bottom-right */
.card::before {
  content: "";
  position: absolute;
  right: clamp(-3rem, -3vw, -1.5rem);
  bottom: clamp(-3rem, -3vw, -1.5rem);
  width: clamp(150px, 16vw, 210px);
  height: clamp(190px, 20vw, 270px);
  background: linear-gradient(150deg, var(--oxblood) 0%, var(--aged-brass) 65%, var(--antique-gold) 100%);
  -webkit-mask-image: url(../img/eng-figure.png);
          mask-image: url(../img/eng-figure.png);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: bottom right; mask-position: bottom right;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
  transition: opacity .5s var(--ease);
}
.card > * { position: relative; z-index: 1; }
.card:hover {
  transform: translateY(-5px);
  border-color: var(--rule-gold);
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4));
  box-shadow: 0 26px 54px -30px rgba(94, 30, 43, .38);
}
.card:hover::after { transform: scaleX(1); }
.card:hover::before { opacity: .09; }

/* classical Roman-numeral medallion (replaces generic line icons) */
.card__num {
  display: inline-flex;
  width: 58px; height: 58px;
  align-items: center; justify-content: center;
  margin-bottom: clamp(1.2rem, 2.2vw, 1.6rem);
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--oxblood);
  font-variant-numeric: tabular-nums;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.card:hover .card__num { background: var(--oxblood); color: var(--cream); border-color: var(--oxblood); }
.card__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.card__desc {
  margin: 0 0 1.2rem;
  font-family: var(--font-accent);
  font-size: 1.05rem;
  line-height: 1.58;
  color: var(--ink-soft);
}
.card__list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.card__list li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--font-ui);
  font-size: .9rem;
  color: var(--ink-soft);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--antique-gold);
}
.card .link-arrow { margin-top: auto; }

/* ============================================================
   EL DESPACHO  (about)
   ============================================================ */
.about { position: relative; overflow: hidden; }
.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* tinted Themis watermark behind the column (oxblood->brass, low opacity) */
.about-watermark {
  position: absolute;
  top: 50%;
  left: clamp(-6rem, -6vw, -2rem);
  transform: translateY(-50%);
  width: clamp(280px, 36vw, 520px);
  height: clamp(360px, 46vw, 660px);
  background: linear-gradient(150deg, var(--oxblood) 0%, var(--aged-brass) 60%, var(--antique-gold) 100%);
  -webkit-mask-image: url(../img/eng-figure.png);
          mask-image: url(../img/eng-figure.png);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: .12;
  filter: saturate(1.1);
  pointer-events: none;
  z-index: 0;
}
.about-pullquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--ink);
}
.about-pullquote em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--oxblood);                        /* oxblood 10.93:1 on cream; gold failed AA */
}
.gold-rule {
  margin: clamp(1.2rem, 3vw, 2rem) 0 0;
  border: 0;
  height: 1px;
  width: clamp(120px, 18vw, 220px);
  background: linear-gradient(90deg, var(--aged-brass), var(--antique-gold));
}
.about-body p {
  margin: 0 0 1.3rem;
  font-family: var(--font-accent);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.66;
  color: var(--ink-soft);
}
.about-body strong { color: var(--ink); font-weight: 600; }
.about-values {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.about-values li {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
}
.about-values svg { width: 20px; height: 20px; color: var(--oxblood); flex: 0 0 auto; }

/* ============================================================
   DARK BANDS  (stats + final CTA)
   ============================================================ */
.band-dark {
  position: relative;
  overflow: hidden;
  background: var(--obsidian);
  color: var(--cream);
  border-top: 0;
}
.band-dark .container { z-index: 2; }
.stats-tagline {
  margin: 0 0 clamp(2rem, 5vw, 3.4rem);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--cream);
  max-width: 24ch;
}
.stats-tagline em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--antique-gold);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.stat__value {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--antique-gold);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(246, 240, 232, .68);
}

/* ============================================================
   EQUIPO
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.team-card {
  padding: clamp(1.8rem, 3vw, 2.4rem);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: rgba(255, 255, 255, .35);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.team-card:hover { border-color: var(--rule-gold); transform: translateY(-3px); }
.team-avatar {
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  border: 1.5px solid var(--oxblood);
  border-radius: 50%;
}
.team-avatar span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .02em;
  color: var(--oxblood);                           /* initials are normal text → 10.93:1 (gold failed AA) */
}
.team-name {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.15;
  color: var(--ink);
}
.team-role {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oxblood);                           /* meaningful label → 10.93:1 (gold failed AA on cream) */
}
.team-bio {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.05rem;
  line-height: 1.58;
  color: var(--ink-soft);
}

/* ============================================================
   PROCESO
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.step { position: relative; padding-top: 1.6rem; }
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule-gold);
}
.step__num {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--aged-brass);
}
.step__title {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.18;
  color: var(--ink);
}
.step__text {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.step__text .link-arrow { display: inline-flex; margin-top: .6rem; }

/* ============================================================
   RESERVA  (booking — Stripe + Calendly placeholders)
   ============================================================ */
.booking-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  max-width: 980px;
  margin-inline: auto;
}
.booking-step {
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
}
.step-tag {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);                           /* step tag is meaningful label → 10.93:1 */
  margin-bottom: 1rem;
}
.booking-step h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
}
.booking-step p {
  margin: 0 0 1.6rem;
  font-family: var(--font-accent);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.booking-step .btn { align-self: flex-start; }
.booking-note {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.2rem 0 0 !important;
  font-family: var(--font-ui) !important;
  font-size: .78rem !important;
  letter-spacing: .04em;
  color: var(--concrete-text) !important;          /* muted meta, AA-safe ~4.6:1 */
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial { text-align: center; }
.testimonial::before {
  content: "";
  display: block;
  width: clamp(80px, 12vw, 140px);
  height: 1px;
  margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--ink-soft);
}
.testimonial cite {
  display: block;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);                          /* attribution is real text → 10.05:1 */
}
.testimonial cite span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--concrete-text);                     /* '(testimonio de muestra)' muted, AA-safe ~4.6:1 */
}

/* ============================================================
   ACTUALIDAD  (news)
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .35);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.news-card:hover { border-color: var(--rule-gold); transform: translateY(-3px); }
.news-thumb {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(218,220,221,.5), rgba(246,240,232,.7));
  border-bottom: 1px solid var(--rule-2);
  color: var(--oxblood);
}
.news-thumb svg { width: 42px; height: 42px; }
.news-body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  flex: 1;
}
.news-tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oxblood);                           /* news category pill is meaningful label → 10.93:1 */
  border: 1px solid var(--rule-gold);
  border-radius: 999px;
  padding: .25rem .7rem;
}
.news-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.25;
  color: var(--ink);
}
.news-body .link-arrow { margin-top: auto; }
.news-more { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-info dl { margin: 0; }
.info-row {
  padding: 1.1rem 0 1.1rem 1.1rem;
  border-bottom: 1px solid var(--rule-2);
  border-left: 1px solid var(--rule-gold);   /* slim gold edge in place of the icon */
}
.info-row:first-child { padding-top: 0; }
.info-row dt {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oxblood);                           /* dt names the data below it → 10.93:1 */
  margin-bottom: .3rem;
}
.info-row dd {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.info-row dd a:hover { color: var(--oxblood); }

.map-embed {
  margin-top: 1.6rem;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(166,138,77,.05) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, rgba(218,220,221,.4), rgba(246,240,232,.6));
  color: var(--concrete-text);                     /* placeholder caption, AA-safe ~4.6:1 */
  font-family: var(--font-ui);
  font-size: .85rem;
  line-height: 1.5;
}
.map-embed .map-pin { width: 30px; height: 30px; color: var(--oxblood); margin: 0 auto .6rem; }

/* form */
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
}
.req { color: var(--oxblood); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-ui);
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  padding: .8rem .9rem;
  min-height: 44px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--oxblood);
  box-shadow: 0 0 0 2px rgba(94, 30, 43, .18);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-family: var(--font-ui);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.consent input {
  width: 20px; height: 20px;
  margin-top: .15rem;
  flex: 0 0 auto;
  accent-color: var(--oxblood);
}
.consent a { color: var(--oxblood); text-decoration: underline; }
.form-note {
  margin: 0;
  font-family: var(--font-ui);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--oxblood);
  background: rgba(94, 30, 43, .06);
  border-left: 2px solid var(--oxblood);
  padding: .8rem 1rem;
  border-radius: 0 3px 3px 0;
}

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
.final-cta { text-align: center; }
.final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.final-cta .eyebrow { justify-content: center; }
.final-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.018em;
  color: var(--cream);
  max-width: 18ch;
}
.final-cta h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--antique-gold);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  background: rgba(255, 255, 255, .25);
}
.site-footer .container { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.6rem, 4vw, 2.4rem); }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.footer-brand img { width: 96px; height: auto; margin-bottom: 1rem; }
.footer-brand p {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.footer-col h3 {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a {
  font-family: var(--font-ui);
  font-size: .88rem;
  color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.footer-col a:hover { color: var(--oxblood); }
.footer-col address {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.footer-col address a:hover { color: var(--oxblood); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--concrete-text);                     /* copyright line, AA-safe ~4.6:1 */
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-legal a { transition: color .25s var(--ease); }
.footer-legal a:hover { color: var(--oxblood); }

/* ============================================================
   COOKIE BANNER (RGPD)
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  background: var(--obsidian);
  color: var(--cream);
  border: 1px solid rgba(166, 138, 77, .4);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
.cookie-banner.is-visible { opacity: 1; visibility: visible; transform: none; }
.cookie-banner p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: .85rem;
  line-height: 1.55;
  color: rgba(246, 240, 232, .82);
}
.cookie-banner a { color: var(--old-gold); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.cookie-banner .btn--ghost { color: var(--cream); }
.cookie-banner .btn--ghost::after { background: var(--cream); }

/* ============================================================
   SCROLL REVEAL  (Concept C engine — supports .in and .is-in)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal[data-delay="1"], .reveal[data-stagger="1"], .reveal[style*="--i:0"] { transition-delay: .06s; }
.reveal[data-delay="2"], .reveal[data-stagger="2"], .reveal[style*="--i:1"] { transition-delay: .14s; }
.reveal[data-delay="3"], .reveal[data-stagger="3"], .reveal[style*="--i:2"] { transition-delay: .22s; }
.reveal[data-delay="4"], .reveal[data-stagger="4"], .reveal[style*="--i:3"] { transition-delay: .30s; }
.reveal[data-stagger="5"] { transition-delay: .38s; }
.reveal[data-stagger="6"] { transition-delay: .46s; }
.reveal.is-in,
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .header-actions .lang-switch { display: none; }
}

/* Tablet band: keep multi-column rhythm. Intrinsic grids (areas/team/news/
   stats) reflow on their own via auto-fit, so we do NOT force them to 1fr.
   Only the genuinely two-column editorial layouts collapse, and only lower
   down (<=760px). Here we just tighten section rhythm and fix the value rows. */
@media (max-width: 1080px) {
  :root { --section-y: clamp(2.8rem, 7vw, 4.6rem); }

  /* Intrinsic, fluid grids — reflow 3->2->1 by available width (no manual
     per-breakpoint column counts). Desktop (>=1081px) keeps its fixed columns. */
  .card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
  .team-grid    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .news-grid    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .stats-grid   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .process-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

  .trust-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(1rem, 3vw, 1.6rem); }

  /* valores: heading stops being sticky and stacks above the list */
  .values-grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.6rem); }
  .values-intro { position: static; }

  /* tighten the two-column editorial gaps before they collapse */
  .about-grid { gap: clamp(1.8rem, 5vw, 3rem); }
  .contact-grid { gap: clamp(1.8rem, 4vw, 3rem); }
}

/* Genuinely narrow: collapse the editorial two-column layouts to one. */
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .booking-card { grid-template-columns: 1fr; }

  .hero {
    min-height: auto;
    padding-top: clamp(1rem, 4vh, 2rem);
  }
  /* engraving sits lower-right behind the text and is shrunk + dimmed so it
     never washes out the subhead. The scrim below adds the final guard. */
  .hero::before {
    top: clamp(-3rem, -8vw, -1rem);
    right: clamp(-7rem, -26vw, -4rem);
    width: clamp(260px, 70vw, 380px);
    height: clamp(280px, 76vw, 400px);
    opacity: .14;
  }
  /* stronger cream scrim behind the copy → keeps headline + subhead readable */
  .hero-copy::before {
    inset: -1.5rem -1.5rem -1.5rem -1.5rem;
    background: radial-gradient(140% 100% at 20% 45%,
                var(--cream) 62%, rgba(246, 240, 232, .65) 84%, rgba(246, 240, 232, 0) 100%);
  }
  /* subhead: darker ink + tighter measure so it reads clearly on mobile */
  .hero-sub {
    color: var(--ink);
    max-width: 42ch;
  }
  .hero h1 { font-size: clamp(2.5rem, 12vw, 4.4rem); }
  .hero-ctas { gap: 1.1rem; }

  .form-row--split { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .brand img { width: 150px; }
  /* hero logo + CTAs scale down sensibly on the smallest phones */
  .hero-logo { width: clamp(180px, 56vw, 240px); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn--primary,
  .hero-ctas .btn--ghost { width: 100%; }
}

/* ============================================================
   ============================================================
   INTERIOR PAGES  (added for the multipage build)
   Reuses every home token + component above. New components:
   page-hero/banner, breadcrumb, prose, two-column doc layout
   with sticky aside, FAQ (<details>), timeline, blog index/post.
   ============================================================
   ============================================================ */

/* --- Header brand. Logo scales down slightly when the header sticks. --- */
.site-header.is-stuck .brand img { transform: scale(.94); transform-origin: left center; }
.brand img { transition: transform .4s var(--ease); }
/* On the HOME the hero already carries the big logo, so the header logo only
   appears once the header sticks (avoids two logos stacked at the top). On
   interior pages the brand is always visible. */
.brand { transition: opacity .4s var(--ease), visibility .4s var(--ease); }
.is-home .site-header:not(.is-stuck) .brand { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================================================
   PAGE HERO / BANNER  (compact interior intro)
   ============================================================ */
.page-hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.4rem, 5vw, 4.2rem);
  border-bottom: 1px solid var(--rule);
}
.page-hero .container { max-width: var(--maxw); }
.page-hero__inner { max-width: 60ch; }
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  color: var(--ink);
  font-optical-sizing: auto;
}
.page-title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--oxblood);                /* 10.93:1 on cream */
  letter-spacing: 0;
  padding-right: .03em;
}
.page-lead {
  margin: clamp(1.1rem, 2.4vw, 1.6rem) 0 0;
  max-width: 60ch;
  font-family: var(--font-accent);
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
/* engraving watermark variant (areas/about) — mirrors the hero motif */
.page-hero--engraving::before {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(-7rem, -2vw, 1rem);
  transform: translateY(-50%);
  width: clamp(280px, 34vw, 520px);
  height: clamp(320px, 40vw, 600px);
  background: linear-gradient(150deg, var(--oxblood) 0%, var(--aged-brass) 65%, var(--antique-gold) 100%);
  -webkit-mask-image: url(../img/eng-detail-faded.png);
          mask-image: url(../img/eng-detail-faded.png);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center right; mask-position: center right;
  opacity: .16;
  filter: saturate(1.15) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}
.page-hero > .container { position: relative; z-index: 1; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
  font-family: var(--font-ui);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--concrete-text);
}
.breadcrumb a { color: var(--ink-soft); transition: color .25s var(--ease); }
.breadcrumb a:hover { color: var(--oxblood); }
.breadcrumb [aria-current="page"] { color: var(--oxblood); }
.breadcrumb .sep { color: var(--rule-2); }
.breadcrumb .sep svg { width: 14px; height: 14px; display: block; }

/* ============================================================
   TWO-COLUMN DOC LAYOUT  (area detail · legal · post-with-aside)
   ============================================================ */
.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.doc-layout--toc { grid-template-columns: clamp(220px, 22vw, 280px) minmax(0, 1fr); }
.doc-aside { position: sticky; top: clamp(5rem, 9vw, 7rem); }
.doc-layout--toc .doc-main { order: 2; }
.doc-layout--toc .doc-aside { order: 1; }

/* sticky CTA / info card in the aside */
.aside-card {
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--obsidian);
  color: var(--cream);
  border-radius: 4px;
  border: 1px solid rgba(166, 138, 77, .3);
}
.aside-card + .aside-card { margin-top: 1.2rem; }
.aside-card h2, .aside-card h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.15;
  color: var(--cream);
}
.aside-card p {
  margin: 0 0 1.2rem;
  font-family: var(--font-accent);
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(246, 240, 232, .78);
}
.aside-card .btn { width: 100%; }
.aside-card .aside-contact {
  list-style: none; margin: 1.2rem 0 0; padding: 1.2rem 0 0;
  border-top: 1px solid rgba(246, 240, 232, .14);
  display: grid; gap: .7rem;
  font-family: var(--font-ui); font-size: .85rem;
  color: rgba(246, 240, 232, .82);
}
.aside-card .aside-contact a:hover { color: var(--old-gold); }
.aside-card .aside-contact li { display: flex; gap: .7rem; align-items: baseline; }
.aside-card .aside-contact .aside-k {
  flex: 0 0 auto;
  min-width: 2.6rem;
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--old-gold);
}

/* light variant for in-flow info boxes */
.aside-card--light {
  background: rgba(255,255,255,.5);
  border-color: var(--rule-gold);
  color: var(--ink-soft);
}
.aside-card--light h2, .aside-card--light h3 { color: var(--ink); }
.aside-card--light p { color: var(--ink-soft); }

/* table of contents (legal) */
.doc-toc {
  font-family: var(--font-ui);
  font-size: .85rem;
}
.doc-toc__title {
  margin: 0 0 .9rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: flex; gap: .6rem;
  color: var(--ink-soft);
  line-height: 1.4;
  transition: color .25s var(--ease);
}
.doc-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--antique-gold); font-variant-numeric: tabular-nums; }
.doc-toc a:hover { color: var(--oxblood); }

/* ============================================================
   PROSE  (rich text for legal pages + articles)
   ============================================================ */
.prose { max-width: 68ch; color: var(--ink-soft); }
.prose > :first-child { margin-top: 0; }
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.3rem;
  font-family: var(--font-accent);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}
.prose h2 {
  margin: clamp(2.4rem, 5vw, 3.4rem) 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  scroll-margin-top: 6rem;
}
.prose h2 .num { color: var(--antique-gold); font-variant-numeric: tabular-nums; margin-right: .5rem; }
.prose h3 {
  margin: clamp(1.8rem, 3.5vw, 2.4rem) 0 .7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--ink);
  scroll-margin-top: 6rem;
}
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--oxblood); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-gold); transition: text-decoration-color .25s var(--ease); }
.prose a:hover { text-decoration-color: var(--oxblood); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .5rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.2rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--antique-gold); }
.prose ol { counter-reset: ol; }
.prose ol li { list-style: none; position: relative; padding-left: 1.9rem; counter-increment: ol; }
.prose ol li::before { content: counter(ol) "."; position: absolute; left: 0; top: 0; font-family: var(--font-ui); font-weight: 600; color: var(--oxblood); }
.prose blockquote {
  margin: 1.6rem 0;
  padding: .4rem 0 .4rem 1.4rem;
  border-left: 2px solid var(--antique-gold);
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--ink-soft);
}
.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.6rem;
  font-family: var(--font-ui); font-size: .92rem;
}
.prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); border-bottom-color: var(--rule-gold); }
.prose hr { border: 0; height: 1px; background: var(--rule-gold); margin: clamp(2rem,4vw,3rem) 0; }
.prose .lede {
  font-size: clamp(1.18rem, 1.9vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink);
}
.prose .muted { color: var(--concrete-text); font-size: .92rem; }

/* ============================================================
   FAQ  (CSS-only accordion via <details>)
   ============================================================ */
.faq { display: grid; gap: 0; max-width: 68ch; }
.faq-item {
  border-top: 1px solid var(--rule-2);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule-2); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.2;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--oxblood); }
.faq-item summary .faq-icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--oxblood);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }
.faq-body {
  padding: 0 0 clamp(1.2rem, 2.6vw, 1.7rem);
  max-width: 64ch;
}
.faq-body p {
  margin: 0 0 1rem;
  font-family: var(--font-accent);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.faq-body :last-child { margin-bottom: 0; }

/* ============================================================
   TIMELINE  (process page — vertical)
   ============================================================ */
.timeline { display: grid; gap: 0; max-width: 56rem; margin-inline: auto; }
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.4rem, 7vw, 5rem) 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  border-top: 1px solid var(--rule-2);
}
.timeline-item:last-child { border-bottom: 1px solid var(--rule-2); }
.timeline-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1;
  color: var(--aged-brass);
  font-variant-numeric: tabular-nums;
}
.timeline-body h2 {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  color: var(--ink);
}
.timeline-body p {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.timeline-body .link-arrow { margin-top: .8rem; }

/* ============================================================
   BLOG INDEX  (extends .news-grid / .news-card as full-card links)
   ============================================================ */
.news-card--link { cursor: pointer; }
.news-card--link .news-body { gap: .7rem; }
.news-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--concrete-text);
}
.news-excerpt {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.news-card--link .news-body h3 { transition: color .25s var(--ease); }
.news-card--link:hover .news-body h3 { color: var(--oxblood); }


/* ============================================================
   POST  (article)
   ============================================================ */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: 1.2rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--concrete-text);
}
.post-meta .news-tag { margin: 0; }
.post-foot {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule-gold);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}

/* ============================================================
   AREA / FEATURE STRIP  (icon + heading + text rows)
   ============================================================ */
.feature-list { display: grid; gap: clamp(1rem,2.2vw,1.6rem); list-style: none; margin: 0; padding: 0; }
.feature-list li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start;
  padding: clamp(1.1rem,2.2vw,1.5rem) 0;
  border-top: 1px solid var(--rule-2);
}
.feature-list li:last-child { border-bottom: 1px solid var(--rule-2); }
.feature-list .feat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--aged-brass);
  font-variant-numeric: tabular-nums;
}
.feature-list h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem,2vw,1.4rem); color: var(--ink); }
.feature-list p { margin: 0; font-family: var(--font-accent); font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }

/* ============================================================
   UTILITIES (interior)
   ============================================================ */
.center { text-align: center; margin-inline: auto; }

/* ============================================================
   FOOTER SOCIAL  (Instagram · LinkedIn)
   ============================================================ */
.footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-social a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.footer-social a:hover { color: var(--cream); background: var(--oxblood); border-color: var(--oxblood); }
.footer-social svg { width: 18px; height: 18px; }

/* ============================================================
   AREA INTERIOR BLOCKS  (heading + complete service lists)
   ============================================================ */
.area-block { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.block-title {
  margin: 0 0 clamp(1.2rem, 2.6vw, 1.8rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.service-groups { display: grid; gap: clamp(1.6rem, 3.2vw, 2.4rem); }
.service-group h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.12rem, 2vw, 1.32rem);
  color: var(--oxblood);
}
.service-cols {
  list-style: none; margin: 0; padding: 0;
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
.service-cols li {
  break-inside: avoid;
  position: relative;
  padding: .45rem 0 .45rem 1.2rem;
  font-family: var(--font-ui);
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.service-cols li::before {
  content: "";
  position: absolute;
  left: 0; top: .82em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--antique-gold);
}
@media (max-width: 560px) { .service-cols { columns: 1; } }

/* ============================================================
   INTERIOR RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .doc-layout,
  .doc-layout--toc { grid-template-columns: 1fr; }
  .doc-layout--toc .doc-main { order: 1; }
  .doc-layout--toc .doc-aside { order: 2; }
  .doc-aside { position: static; }
  .doc-toc { display: none; }   /* TOC is a desktop convenience; prose has its own headings */
}
@media (max-width: 560px) {
  .timeline-item { grid-template-columns: 1fr; gap: .3rem; }
  .feature-list li { grid-template-columns: 1fr; }
  .feature-list .feat-num { margin-bottom: .2rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .underline { transform: scaleX(1); }
}

/* ============================================================
   ASTRA CHILD
   ============================================================ */

/* Eliminamos las viñetas y márgenes de la lista del menú de WordPress */
.primary-nav ul, 
.footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.primary-nav ul {
    display: flex !important;
    gap: 1.5rem; 
    align-items: center;
}

/* Forzamos el tamaño y estilo de tus enlaces (ajusta los px al diseño original) */
.primary-nav ul li a, 
.primary-nav a {
    font-size: .8rem !important; 
    text-decoration: none !important;
}

/* Convertimos la lista de Polylang en una línea idéntica a tu diseño anterior */
.lang-switch ul {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem; /* Espaciado entre ES, CA, EN */
}

/* Hacemos que los enlaces de idioma de Polylang hereden los estilos de tu CSS original */
.lang-switch ul li a {
    text-decoration: none !important;
    font-weight: 500;
    /* Copia aquí si tu desarrollador tenía estilos como color, padding, etc. */
}

/* Estilo para el idioma activo (Polylang usa la clase .current-lang) */
.lang-switch ul li.current-lang a {
    text-decoration: underline !important; /* O el estilo que tuviera el 'aria-current="true"' original */
}