/* ==========================================================================
   Sergio Núñez Heras — Banca Privada
   Hoja de estilo única del sitio.

   Fuente de verdad: /design-system (readme.md + tokens/ + components/).
   Este archivo TRADUCE los componentes React del design system a CSS estático.
   No inventa valores: cada número sale de design-system/tokens/*.css o del
   .jsx del componente correspondiente.

   ADICIÓN INTENCIONADA: el design system no define ningún @media (solo
   prefers-reduced-motion). Las reglas responsive de la sección 4 son una
   extensión propia, necesaria para móvil, que respeta el lenguaje visual.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS  — copia literal de design-system/tokens/
   ========================================================================== */

:root{
  /* --- Navy: la autoridad de la marca --- */
  --navy-900:#0B1524;
  --navy-800:#0F1B2D;
  --navy-700:#132238;
  --navy-600:#1B3049;
  --navy-500:#28425F;
  --navy-400:#3E5A79;
  --navy-300:#6C87A6;
  --navy-200:#A8BACD;
  --navy-100:#D7E0EA;

  /* --- Stone: papel gris claro, nunca gris neutro --- */
  --stone-900:#2B3138;
  --stone-800:#454C55;
  --stone-700:#5E656E;
  --stone-600:#7C838C;
  --stone-500:#9BA1A9;
  --stone-400:#C2C6CB;
  --stone-300:#DDE0E3;
  --stone-200:#EBEDEF;
  --stone-100:#F4F5F6;
  --stone-050:#FAFAFB;
  --white:#FFFFFF;

  /* --- Gold: antiguo y desaturado. Solo acento --- */
  --gold-700:#7C6634;
  --gold-600:#8F7540;
  --gold-500:#A88B4C;
  --gold-400:#BFA46F;
  --gold-300:#D6C094;
  --gold-200:#E8DCC1;
  --gold-100:#F3ECDD;

  --signal-error:#8E3B34;
  --signal-success:#3D6152;

  /* --- Alias semánticos: los componentes referencian estos --- */
  --surface-page:var(--white);
  --surface-alt:var(--stone-100);
  --surface-card:var(--white);
  --surface-inverse:var(--navy-800);
  --surface-inverse-deep:var(--navy-900);
  --surface-card-inverse:var(--navy-600);
  --surface-gold-wash:var(--gold-100);

  --text-display:var(--navy-700);
  --text-body:var(--stone-800);
  --text-muted:var(--stone-600);
  --text-on-inverse:var(--white);
  --text-on-inverse-muted:var(--navy-200);
  --text-accent:var(--gold-600);
  --text-link:var(--navy-700);
  --text-link-hover:var(--gold-600);

  --border-hairline:var(--stone-300);
  --border-strong:var(--stone-400);
  --border-inverse:rgba(255,255,255,.16);
  --border-accent:var(--gold-500);

  --accent:var(--gold-500);
  --accent-strong:var(--gold-600);
  --focus-ring:var(--gold-500);

  --overlay-image:linear-gradient(180deg,rgba(11,21,36,.72) 0%,rgba(11,21,36,.82) 100%);
  --overlay-image-side:linear-gradient(90deg,rgba(11,21,36,.88) 0%,rgba(11,21,36,.55) 55%,rgba(11,21,36,.35) 100%);

  /* --- Tipografía --- */
  --font-display:"Crimson Pro",Georgia,"Times New Roman",serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;

  --text-display-1:clamp(46px,6.2vw,88px);
  --text-display-2:clamp(38px,4.6vw,64px);
  --text-display-3:clamp(30px,3.2vw,44px);
  --text-display-4:26px;

  --text-lead:19px;
  --text-body:17px;
  --text-body-sm:15px;
  --text-caption:13px;
  --text-eyebrow:12px;

  --weight-display:300;
  --weight-display-mid:400;
  --weight-body:400;
  --weight-medium:500;
  --weight-semibold:600;

  --leading-display:1.06;
  --leading-display-loose:1.14;
  --leading-heading:1.22;
  --leading-body:1.62;
  --leading-tight:1.35;

  --tracking-display:-0.015em;
  --tracking-heading:-0.008em;
  --tracking-body:0;
  --tracking-eyebrow:0.16em;
  --tracking-button:0.06em;

  /* --- Espaciado: base 4px --- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;--space-40:160px;

  --container-max:1200px;
  --container-narrow:760px;
  --container-gutter:clamp(20px,5vw,64px);
  --section-y:clamp(72px,9vw,128px);
  --section-y-tight:clamp(48px,6vw,80px);
  --grid-gap:clamp(20px,2.5vw,36px);
  --header-h:76px;

  /* --- Radios y bordes: la marca es cuadrada --- */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:3px;
  --radius-full:999px;

  --border-width:1px;
  --border-width-strong:2px;
  --rule:1px solid var(--border-hairline);
  --rule-inverse:1px solid var(--border-inverse);
  --rule-accent:2px solid var(--border-accent);
  --eyebrow-rule-w:32px;

  /* --- Elevación: casi invisible --- */
  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(11,21,36,.04);
  --shadow-card-hover:0 8px 24px -12px rgba(11,21,36,.18);
  --shadow-header:0 1px 0 rgba(11,21,36,.08);
  --shadow-raised:0 18px 48px -24px rgba(11,21,36,.35);
  --blur-glass:saturate(140%) blur(14px);

  /* --- Movimiento: contenido --- */
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --ease-out-soft:cubic-bezier(.16,1,.3,1);
  --duration-fast:140ms;
  --duration-base:220ms;
  --duration-slow:420ms;
  --duration-image:700ms;
  --transition-base:all var(--duration-base) var(--ease-standard);
  --transition-image:transform var(--duration-image) var(--ease-out-soft);
  --reveal-distance:14px;
}

/* Ámbito inverso: se pone en cualquier banda oscura y los componentes
   anidados voltean solos, sin pasar props. */
[data-theme="inverse"]{
  --surface-page:var(--navy-800);
  --surface-alt:var(--navy-700);
  --surface-card:var(--navy-600);
  --text-display:var(--white);
  --text-body:var(--navy-100);
  --text-muted:var(--navy-200);
  --text-link:var(--white);
  --text-link-hover:var(--gold-300);
  --text-accent:var(--gold-300);
  --border-hairline:rgba(255,255,255,.16);
  --border-strong:rgba(255,255,255,.28);
}

@media (prefers-reduced-motion:reduce){
  :root{
    --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms;
    --duration-image:0ms; --reveal-distance:0px;
  }
  html{scroll-behavior:auto}
}

/* ==========================================================================
   2. BASE  — design-system/tokens/base.css
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-weight:var(--weight-body);
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text-display);
  font-weight:var(--weight-display-mid);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--text-display-1);font-weight:var(--weight-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-display-2);font-weight:var(--weight-display);line-height:var(--leading-display-loose)}
h3{font-size:var(--text-display-3)}
h4{font-size:var(--text-display-4)}

p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}

a{
  color:var(--text-link);
  text-decoration:none;
  border-bottom:1px solid var(--border-accent);
  transition:color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

::selection{background:var(--gold-200);color:var(--navy-800)}
hr{border:0;border-top:var(--rule);margin:var(--space-8) 0}

/* Enlace de salto: accesibilidad, invisible hasta recibir foco. */
.bp-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy-800);color:var(--white);
  padding:var(--space-3) var(--space-5);border:0;
  font-size:var(--text-body-sm);
}
.bp-skip:focus{left:var(--space-4);top:var(--space-4)}

.bp-container{
  width:100%;max-width:var(--container-max);
  margin-inline:auto;padding-inline:var(--container-gutter);
}
.bp-container--narrow{max-width:var(--container-narrow)}
.bp-container--wide{max-width:1440px}

.bp-section{padding-block:var(--section-y)}
.bp-section--tight{padding-block:var(--section-y-tight)}
.bp-section--light{background:var(--white)}
.bp-section--stone{background:var(--stone-100)}
.bp-section--navy{background:var(--navy-800);color:var(--navy-100)}
.bp-section--navy-deep{background:var(--navy-900);color:var(--navy-100)}
.bp-section--gold{background:var(--gold-100)}

/* Solo lectores de pantalla. */
.bp-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Revelado al hacer scroll: sube 14px y aparece, una sola vez. */
@keyframes bp-reveal{
  from{opacity:0;transform:translateY(var(--reveal-distance))}
  to{opacity:1;transform:none}
}
[data-reveal]{opacity:0}
[data-reveal].is-revealed{animation:bp-reveal var(--duration-slow) var(--ease-out-soft) both}
/* Sin JS, todo visible: nunca se esconde contenido por depender de scripts. */
.no-js [data-reveal]{opacity:1}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1}
}

/* ==========================================================================
   3. COMPONENTES  — traducción 1:1 de design-system/components/
   ========================================================================== */

/* --- Eyebrow: raya corta + etiqueta en mayúsculas. Abre cada sección. --- */
.bp-eyebrow{display:flex;align-items:center;gap:14px;justify-content:flex-start}
.bp-eyebrow--center{justify-content:center}
.bp-eyebrow::before{
  content:"";width:var(--eyebrow-rule-w);height:1px;
  background:var(--gold-500);flex:0 0 auto;
}
.bp-eyebrow--inverse::before{background:rgba(255,255,255,.4)}
.bp-eyebrow--norule::before{display:none}
.bp-eyebrow > span{
  font-family:var(--font-sans);font-size:var(--text-eyebrow);
  font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--navy-700);
}
.bp-eyebrow--muted > span{color:var(--stone-600)}
.bp-eyebrow--accent > span{color:var(--gold-600)}
.bp-eyebrow--inverse > span{color:var(--navy-200)}

/* --- Rule: filete. `accent` es la raya dorada corta. --- */
.bp-rule{height:1px;width:100%;background:var(--border-hairline);flex:0 0 auto;border:0}
.bp-rule--accent{height:2px;width:48px;background:var(--gold-500)}
.bp-rule--short{height:1px;width:var(--eyebrow-rule-w);background:var(--gold-500)}
.bp-rule--inverse{background:rgba(255,255,255,.16)}
.bp-rule--short.bp-rule--inverse{background:rgba(255,255,255,.4)}

/* --- Button --- */
.bp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-button);text-transform:uppercase;
  border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  font-size:12px;padding:14px 26px;
  transition:background-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.bp-btn:active{transform:translateY(1px)}
.bp-btn--sm{font-size:11px;padding:9px 16px}
.bp-btn--md{font-size:12px;padding:14px 26px}
.bp-btn--lg{font-size:13px;padding:18px 34px}
.bp-btn--full{width:100%}
.bp-btn[disabled],.bp-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.bp-btn--primary{background:var(--navy-700);color:var(--white);border-color:transparent}
.bp-btn--primary:hover{background:var(--navy-600);color:var(--white);border-color:transparent}

.bp-btn--secondary{background:transparent;color:var(--navy-700);border-color:var(--navy-700)}
.bp-btn--secondary:hover{background:var(--navy-700);color:var(--white);border-color:var(--navy-700)}

.bp-btn--gold{background:var(--gold-500);color:var(--white);border-color:transparent}
.bp-btn--gold:hover{background:var(--gold-600);color:var(--white);border-color:transparent}

.bp-btn--inverse{background:var(--white);color:var(--navy-800);border-color:transparent}
.bp-btn--inverse:hover{background:var(--gold-100);color:var(--navy-800);border-color:transparent}

.bp-btn--inverse-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.bp-btn--inverse-outline:hover{background:rgba(255,255,255,.10);color:var(--white);border-color:rgba(255,255,255,.45)}

.bp-btn--ghost{background:transparent;color:var(--navy-700);border-color:transparent}
.bp-btn--ghost:hover{background:transparent;color:var(--gold-600);border-color:transparent}

/* --- ArrowLink: micro-etiqueta con flecha dorada que se desliza. --- */
.bp-arrowlink{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-sans);font-size:var(--text-eyebrow);
  font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;text-decoration:none;border:0;
  color:var(--navy-700);
  transition:color var(--duration-base) var(--ease-standard);
}
.bp-arrowlink::after{
  content:"→";display:inline-block;font-size:14px;line-height:1;
  transition:transform var(--duration-base) var(--ease-standard);
}
.bp-arrowlink:hover{color:var(--gold-600);border:0}
.bp-arrowlink:hover::after{transform:translateX(4px)}
.bp-arrowlink--accent{color:var(--gold-600)}
.bp-arrowlink--accent:hover{color:var(--navy-700)}
.bp-arrowlink--inverse{color:var(--white)}
.bp-arrowlink--inverse:hover{color:var(--gold-300)}

/* --- Wordmark: la marca es tipográfica. No hay logotipo dibujado. --- */
.bp-wordmark{display:inline-block;text-decoration:none;border:0;line-height:1}
.bp-wordmark:hover{border:0}
.bp-wordmark__name{
  display:block;font-family:var(--font-display);font-size:22px;
  font-weight:var(--weight-display-mid);letter-spacing:.01em;color:var(--navy-700);
}
.bp-wordmark__desc{
  display:block;margin-top:5px;font-family:var(--font-sans);font-size:10px;
  font-weight:var(--weight-medium);letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-600);
}
.bp-wordmark--sm .bp-wordmark__name{font-size:17px}
.bp-wordmark--sm .bp-wordmark__desc{font-size:9px}
.bp-wordmark--lg .bp-wordmark__name{font-size:30px}
.bp-wordmark--lg .bp-wordmark__desc{font-size:11px}
.bp-wordmark--inverse .bp-wordmark__name{color:var(--white)}
.bp-wordmark--inverse .bp-wordmark__desc{color:var(--navy-200)}

/* --- SectionHeading: eyebrow + titular serif + entradilla. --- */
.bp-heading{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start;text-align:left}
.bp-heading--center{align-items:center;text-align:center}
.bp-heading__title{
  font-family:var(--font-display);font-size:var(--text-display-2);
  font-weight:var(--weight-display);line-height:var(--leading-display-loose);
  letter-spacing:var(--tracking-display);color:var(--navy-700);margin:0;max-width:20ch;
}
.bp-heading--sm .bp-heading__title{font-size:var(--text-display-3)}
.bp-heading__title em{font-style:italic;color:var(--navy-400)}
.bp-heading--inverse .bp-heading__title{color:var(--white)}
.bp-heading--inverse .bp-heading__title em{color:var(--navy-200)}
.bp-heading__lead{
  font-size:var(--text-lead);line-height:var(--leading-body);
  color:var(--text-muted);max-width:56ch;margin:0;
}
.bp-heading--inverse .bp-heading__lead{color:var(--navy-200)}

/* --- ServiceCard: foto 4:5, título serif, cuerpo, arrow link. Sin caja. --- */
.bp-servicecard{display:flex;flex-direction:column;gap:var(--space-6)}
.bp-servicecard__media{
  display:block;overflow:hidden;border:0;border-radius:var(--radius-none);
  aspect-ratio:4/5;background:var(--navy-800);position:relative;
}
.bp-servicecard__media:hover{border:0}
.bp-servicecard__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.80) saturate(.88);transform:scale(1);
  transition:transform var(--duration-image) var(--ease-out-soft),
             filter var(--duration-base) var(--ease-standard);
}
.bp-servicecard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background:linear-gradient(180deg,rgba(11,21,36,.22) 0%,rgba(11,21,36,.34) 100%);
  transition:opacity var(--duration-base) var(--ease-standard);
}
.bp-servicecard:hover .bp-servicecard__media img{filter:brightness(.88) saturate(.94);transform:scale(1.04)}
.bp-servicecard:hover .bp-servicecard__media::after{opacity:.7}
.bp-servicecard__body{display:flex;flex-direction:column;gap:var(--space-4)}
.bp-servicecard__eyebrow{
  font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-600);
}
.bp-servicecard__title{
  font-family:var(--font-display);font-size:var(--text-display-4);
  font-weight:var(--weight-display-mid);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);margin:0;color:var(--navy-700);
  transition:color var(--duration-base) var(--ease-standard);
}
.bp-servicecard__title a{color:inherit;border:0}
.bp-servicecard__title a:hover{color:inherit;border:0}
.bp-servicecard:hover .bp-servicecard__title{color:var(--gold-700)}
.bp-servicecard__text{
  font-size:var(--text-body-sm);line-height:var(--leading-body);
  color:var(--text-muted);margin:0;
}
.bp-servicecard__foot{margin-top:auto;padding-top:var(--space-2)}

/* --- ProcessStep: peldaños de la escalera "cómo trabajo". --- */
.bp-step{
  display:grid;grid-template-columns:minmax(72px,110px) 1fr;
  gap:clamp(16px,3vw,48px);align-items:start;
  padding:clamp(24px,3vw,40px) clamp(24px,3.5vw,48px);
  background:var(--white);
  border:1px solid var(--border-hairline);
  border-left:2px solid var(--border-hairline);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
  transition:transform var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.bp-step:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-left-color:var(--gold-500)}
.bp-step--0{margin-left:0;margin-right:calc(2 * clamp(0px,3vw,40px))}
.bp-step--1{margin-left:clamp(0px,6vw,96px);margin-right:clamp(0px,3vw,40px)}
.bp-step--2{margin-left:calc(2 * clamp(0px,6vw,96px));margin-right:0}
.bp-step__index{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:clamp(48px,6vw,76px);line-height:.85;letter-spacing:-.02em;
  color:var(--stone-300);
  transition:color var(--duration-base) var(--ease-standard);
}
.bp-step:hover .bp-step__index{color:var(--gold-400)}
.bp-step__body{display:flex;flex-direction:column;gap:var(--space-4);padding-top:6px}
.bp-step__title{
  font-family:var(--font-display);font-size:var(--text-display-4);
  font-weight:var(--weight-display-mid);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);margin:0;color:var(--navy-700);
}
.bp-step__text{
  font-size:var(--text-body);line-height:var(--leading-body);
  margin:0;max-width:62ch;color:var(--text-muted);
}

/* --- Stat: cifra serif grande sobre pie sans. --- */
.bp-stat{display:flex;flex-direction:column;gap:var(--space-3)}
.bp-stat__value{
  font-family:var(--font-display);font-size:48px;font-weight:var(--weight-display);
  line-height:1;letter-spacing:var(--tracking-display);color:var(--navy-700);
}
.bp-stat__label{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:.04em;line-height:var(--leading-tight);color:var(--text-muted);
}
.bp-stat--inverse .bp-stat__value{color:var(--white)}
.bp-stat--inverse .bp-stat__label{color:var(--navy-200)}

/* --- PullQuote: una por página como mucho. --- */
.bp-quote{
  margin:0;display:flex;flex-direction:column;gap:var(--space-6);
  align-items:flex-start;text-align:left;
}
.bp-quote::before{content:"";width:48px;height:2px;background:var(--gold-500);flex:0 0 auto}
.bp-quote__text{
  margin:0;font-family:var(--font-display);font-style:italic;
  font-size:var(--text-display-3);font-weight:var(--weight-display);
  line-height:1.3;letter-spacing:var(--tracking-heading);
  max-width:24ch;color:var(--navy-700);
}
.bp-quote__by{
  font-family:var(--font-sans);font-size:var(--text-eyebrow);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.bp-quote--inverse .bp-quote__text{color:var(--white)}
.bp-quote--inverse .bp-quote__by{color:var(--navy-200)}

/* --- Breadcrumb --- */
.bp-crumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);
  font-family:var(--font-sans);font-size:var(--text-eyebrow);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
}
.bp-crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);list-style:none;margin:0;padding:0}
.bp-crumbs li{display:flex;align-items:center;gap:var(--space-3)}
.bp-crumbs li+li::before{content:"/";color:var(--gold-500)}
.bp-crumbs a{color:var(--text-muted);text-decoration:none;border:0}
.bp-crumbs a:hover{color:var(--gold-600);border:0}
.bp-crumbs [aria-current="page"]{color:var(--navy-700)}
.bp-crumbs--inverse a{color:var(--navy-200)}
.bp-crumbs--inverse [aria-current="page"]{color:var(--white)}

/* --- Formularios --- */
.bp-field{display:flex;flex-direction:column;gap:var(--space-2)}
.bp-field__label{
  font-family:var(--font-sans);font-size:var(--text-eyebrow);
  font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted);
}
.bp-field__label .req{color:var(--gold-500)}
.bp-field input,.bp-field textarea{
  font-family:var(--font-sans);font-size:var(--text-body);
  color:var(--navy-800);background:var(--white);
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:13px 14px;outline:none;width:100%;
  transition:border-color var(--duration-base) var(--ease-standard);
}
.bp-field textarea{line-height:var(--leading-body);resize:vertical}
.bp-field input:focus,.bp-field textarea:focus{border-color:var(--gold-500)}
.bp-field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.bp-field__error{font-size:var(--text-caption);color:var(--signal-error)}
.bp-field input[aria-invalid="true"],.bp-field textarea[aria-invalid="true"]{border-color:var(--signal-error)}

.bp-field--inverse .bp-field__label{color:var(--navy-200)}
.bp-field--inverse input,.bp-field--inverse textarea{
  color:var(--white);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);
}
.bp-field--inverse input::placeholder,.bp-field--inverse textarea::placeholder{color:var(--navy-300)}
.bp-field--inverse .bp-field__hint{color:var(--navy-300)}

/* Checkbox: el tick es CSS puro (dos bordes girados 45°). Sin SVG. */
.bp-check{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.bp-check__box{
  position:relative;flex:0 0 auto;width:17px;height:17px;margin-top:2px;
  border:1px solid var(--border-strong);background:transparent;
  border-radius:var(--radius-sm);
  transition:background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
}
.bp-check--inverse .bp-check__box{border-color:rgba(255,255,255,.4)}
.bp-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
/* El tick es CSS puro: dos bordes girados 45°, nunca un SVG. */
.bp-check__tick{
  position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--white);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);opacity:0;pointer-events:none;
}
.bp-check input:checked ~ .bp-check__tick{opacity:1}
.bp-check__box:has(input:checked){background:var(--gold-500);border-color:var(--gold-500)}
.bp-check__text{
  font-family:var(--font-sans);font-size:var(--text-caption);
  line-height:var(--leading-tight);color:var(--text-muted);
}
.bp-check--inverse .bp-check__text{color:var(--navy-200)}
.bp-check input:focus-visible ~ .bp-check__tick,
.bp-check input:focus-visible{outline:none}
.bp-check:focus-within .bp-check__box{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ==========================================================================
   4. CABECERA, PIE Y BLOQUES DE PÁGINA
   ========================================================================== */

/* --- SiteHeader: pegajosa. Transparente sobre el héroe, blanca al bajar. --- */
.bp-header{
  position:sticky;top:0;z-index:40;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:var(--blur-glass);
  backdrop-filter:var(--blur-glass);
  border-bottom:1px solid var(--border-hairline);
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.bp-header__inner{
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--container-gutter);display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-8);
}
.bp-header__nav{display:flex;align-items:center;gap:var(--space-8)}
.bp-header__link{
  font-family:var(--font-sans);font-size:var(--text-body-sm);
  color:var(--stone-700);text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.bp-header__link:hover,.bp-header__link[aria-current="page"]{color:var(--navy-700)}
.bp-header__link[aria-current="page"]{border-bottom-color:var(--gold-500)}

/* Variante transparente: solo mientras el héroe está bajo la cabecera. */
.bp-header--over{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.bp-header--over .bp-header__link{color:var(--navy-100)}
.bp-header--over .bp-header__link:hover,
.bp-header--over .bp-header__link[aria-current="page"]{color:var(--white)}
.bp-header--over .bp-wordmark__name{color:var(--white)}
.bp-header--over .bp-wordmark__desc{color:var(--navy-200)}
.bp-header--over .bp-btn--primary{background:var(--white);color:var(--navy-800)}
.bp-header--over .bp-btn--primary:hover{background:var(--gold-100);color:var(--navy-800)}
.bp-header--over .bp-burger__bar{background:var(--white)}

/* Botón hamburguesa: solo móvil. Dos filetes, sin iconografía importada. */
.bp-burger{
  display:none;width:40px;height:40px;padding:0;background:transparent;
  border:0;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
}
.bp-burger__bar{
  display:block;width:22px;height:1px;background:var(--navy-700);
  transition:transform var(--duration-base) var(--ease-standard),
             opacity var(--duration-base) var(--ease-standard);
}
.bp-burger[aria-expanded="true"] .bp-burger__bar:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.bp-burger[aria-expanded="true"] .bp-burger__bar:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* --- Héroe --- */
.bp-hero{position:relative;background:var(--navy-900);overflow:hidden;margin-top:calc(var(--header-h) * -1)}
.bp-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.bp-hero__scrim{position:absolute;inset:0;background:var(--overlay-image-side)}
.bp-hero__inner{
  position:relative;width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--container-gutter);
  padding-block:clamp(96px,15vh,180px) clamp(96px,16vh,190px);
  display:flex;flex-direction:column;gap:var(--space-8);align-items:flex-start;
}
/* max-width 24ch, no 16ch: el titular es de dos líneas (romana + cursiva) y
   la cursiva "administrado con criterio." debe caber entera en la suya.
   El salto lo marca el <br>, no el ancho. */
.bp-hero__title{
  font-family:var(--font-display);font-size:var(--text-display-1);
  font-weight:var(--weight-display);line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);color:var(--white);margin:0;max-width:24ch;
}
.bp-hero__title em{font-style:italic;color:var(--navy-200)}
.bp-hero__lead{
  font-size:var(--text-lead);line-height:var(--leading-body);
  color:var(--navy-100);max-width:46ch;margin:0;
}
.bp-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-4)}
.bp-hero__note{font-size:var(--text-caption);color:var(--navy-300);max-width:48ch;margin:0}

/* --- Sobre mí: retrato a la izquierda, texto a la derecha. --- */
.bp-about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start}
.bp-about__portrait{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;background:var(--stone-100)}
.bp-about__col{display:flex;flex-direction:column;gap:var(--space-8)}
.bp-about__text{display:flex;flex-direction:column;gap:var(--space-5);max-width:58ch}
.bp-about__text p{font-size:var(--text-body);line-height:var(--leading-body)}
.bp-about__text p+p{color:var(--text-muted)}
.bp-about__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.5vw,36px);align-items:start;padding-top:var(--space-2);
}
.bp-about__bank{display:flex;flex-direction:column;gap:var(--space-3)}
.bp-about__bank img{height:44px;width:auto;margin-bottom:4px}
.bp-about__bank span{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:.04em;line-height:var(--leading-tight);color:var(--text-muted);
}
.bp-about__quote{border-top:var(--rule);padding-top:var(--space-10)}

/* --- Rejilla de tarjetas --- */
.bp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--grid-gap)}
.bp-stack{display:flex;flex-direction:column;gap:clamp(18px,2vw,28px)}
.bp-mb-lg{margin-bottom:var(--space-24)}

/* --- CTA de cierre --- */
.bp-cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);text-align:center}
.bp-cta__title{
  font-family:var(--font-display);font-size:var(--text-display-2);
  font-weight:var(--weight-display);line-height:var(--leading-display-loose);
  letter-spacing:var(--tracking-display);color:var(--white);margin:0;max-width:17ch;
}
.bp-cta__title em{font-style:italic;color:var(--navy-200)}
.bp-cta__note{
  font-size:var(--text-caption);color:var(--navy-300);max-width:46ch;
  margin:0;line-height:var(--leading-body);
}
.bp-form{display:flex;flex-direction:column;gap:var(--space-6)}
.bp-form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6)}
.bp-form__actions{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}
.bp-form__head{display:flex;flex-direction:column;gap:var(--space-5)}
.bp-form__head h2{
  font-family:var(--font-display);font-size:var(--text-display-3);
  font-weight:var(--weight-display);color:var(--white);margin:0;max-width:20ch;
}
.bp-sent{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}
.bp-sent::before{content:"";width:48px;height:2px;background:var(--gold-500)}
.bp-sent h2{
  font-family:var(--font-display);font-size:var(--text-display-3);
  font-weight:var(--weight-display);color:var(--white);margin:0;max-width:20ch;
}
.bp-sent p{font-size:var(--text-body);color:var(--navy-200);max-width:42ch;margin:0}
[hidden]{display:none !important}

/* --- Banda CTA sobre fotografía (páginas de servicio) --- */
.bp-band{position:relative;overflow:hidden;background:var(--navy-900)}
.bp-band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.bp-band__scrim{position:absolute;inset:0;background:var(--overlay-image)}
.bp-band__inner{
  position:relative;width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--container-gutter);padding-block:var(--space-20);
  display:flex;flex-wrap:wrap;gap:var(--space-10);
  align-items:center;justify-content:space-between;
}
.bp-band__copy{display:flex;flex-direction:column;gap:var(--space-4);max-width:34ch}
.bp-band__copy h2{
  font-family:var(--font-display);font-size:var(--text-display-3);
  font-weight:var(--weight-display);color:var(--white);margin:0;
}
.bp-band__copy p{font-size:var(--text-body-sm);color:var(--navy-100);margin:0}

/* --- Portada de página de servicio --- */
.bp-cover{position:relative;background:var(--navy-800);overflow:hidden;margin-top:calc(var(--header-h) * -1)}
.bp-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.bp-cover__scrim{position:absolute;inset:0;background:var(--overlay-image-side)}
.bp-cover__inner{
  position:relative;width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--container-gutter);
  padding-block:calc(var(--header-h) + var(--space-16)) var(--space-20);
  display:flex;flex-direction:column;gap:var(--space-8);align-items:flex-start;
}
.bp-cover__title{
  font-family:var(--font-display);font-size:var(--text-display-2);
  font-weight:var(--weight-display);line-height:var(--leading-display-loose);
  letter-spacing:var(--tracking-display);color:var(--white);margin:0;max-width:18ch;
}
.bp-cover__lead{
  font-size:var(--text-lead);color:var(--navy-100);max-width:52ch;
  margin:0;line-height:var(--leading-body);
}

/* --- Detalle: columna fija + lista de puntos numerados --- */
.bp-detail{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,88px);align-items:start}
.bp-detail__aside{
  display:flex;flex-direction:column;gap:var(--space-5);
  position:sticky;top:calc(var(--header-h) + 32px);
}
.bp-detail__aside p{font-size:var(--text-body-sm);color:var(--text-muted);margin:0}
.bp-detail__list{display:flex;flex-direction:column}
.bp-point{
  display:grid;grid-template-columns:48px 1fr;gap:var(--space-8);
  padding-block:var(--space-10);border-bottom:var(--rule);
}
.bp-point:first-child{border-top:var(--rule)}
.bp-point__n{
  font-family:var(--font-sans);font-size:var(--text-caption);
  letter-spacing:var(--tracking-eyebrow);color:var(--gold-600);padding-top:6px;
}
.bp-point__body{display:flex;flex-direction:column;gap:var(--space-3)}
.bp-point__body h3{
  font-family:var(--font-display);font-size:var(--text-display-4);
  font-weight:var(--weight-display-mid);color:var(--navy-700);margin:0;
}
.bp-point__body p{
  font-size:var(--text-body);color:var(--text-muted);margin:0;
  max-width:58ch;line-height:var(--leading-body);
}

/* --- Preguntas frecuentes: <details> nativo, sin JS --- */
.bp-faq{display:flex;flex-direction:column;border-top:var(--rule)}
.bp-faq__item{border-bottom:var(--rule)}
.bp-faq__item summary{
  cursor:pointer;list-style:none;padding-block:var(--space-6);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-6);
  font-family:var(--font-display);font-size:var(--text-display-4);
  font-weight:var(--weight-display-mid);color:var(--navy-700);
  transition:color var(--duration-base) var(--ease-standard);
}
.bp-faq__item summary::-webkit-details-marker{display:none}
.bp-faq__item summary::after{
  content:"+";font-family:var(--font-sans);font-size:20px;
  color:var(--gold-600);flex:0 0 auto;line-height:1;
  transition:transform var(--duration-base) var(--ease-standard);
}
.bp-faq__item[open] summary::after{content:"–"}
.bp-faq__item summary:hover{color:var(--gold-700)}
.bp-faq__item > div{padding-bottom:var(--space-8);max-width:64ch}
.bp-faq__item > div p{font-size:var(--text-body);color:var(--text-muted);line-height:var(--leading-body)}
.bp-faq__item > div p + p{margin-top:var(--space-4)}

/* --- Texto largo (aviso legal, privacidad) --- */
.bp-prose{max-width:68ch;display:flex;flex-direction:column;gap:var(--space-5)}
.bp-prose h2{font-size:var(--text-display-3);margin-top:var(--space-8)}
.bp-prose h3{font-size:var(--text-display-4);margin-top:var(--space-5)}
.bp-prose p,.bp-prose li{font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-body)}
.bp-prose ul{margin:0;padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.bp-prose strong{font-weight:var(--weight-semibold);color:var(--navy-700)}

/* --- SiteFooter --- */
.bp-footer{background:var(--navy-800);color:var(--navy-200)}
.bp-footer__top{
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--container-gutter);padding-block:var(--space-12) var(--space-10);
  display:flex;flex-wrap:wrap;gap:var(--space-10);
  justify-content:space-between;align-items:center;
}
.bp-footer__brand{display:flex;flex-direction:column;gap:var(--space-6)}
.bp-footer__bank{flex:1 1 200px;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.bp-footer__bank-role{
  font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--navy-300);
}
.bp-footer__bank a{border:0;display:inline-flex;opacity:.88;transition:opacity var(--duration-base) var(--ease-standard)}
.bp-footer__bank a:hover{opacity:1;border:0}
.bp-footer__bank img{height:clamp(56px,7vw,92px);width:auto}
.bp-footer__contacts{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.bp-contact{display:grid;grid-template-columns:92px auto;align-items:baseline;gap:var(--space-5);text-decoration:none;border:0}
.bp-contact:hover{border:0}
.bp-contact__label{
  font-family:var(--font-sans);font-size:var(--text-eyebrow);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-400);
}
.bp-contact__value{
  font-family:var(--font-sans);font-size:var(--text-body);color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.24);padding-bottom:2px;
  transition:color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.bp-contact:hover .bp-contact__value{color:var(--gold-300);border-bottom-color:var(--gold-300)}
.bp-footer__bar{border-top:1px solid rgba(255,255,255,.12)}
.bp-footer__bar-inner{
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--container-gutter);padding-block:var(--space-5);
  display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;
  justify-content:space-between;font-size:var(--text-caption);color:var(--navy-300);
}
.bp-footer__links{display:flex;align-items:center;gap:var(--space-6)}
.bp-footer__links a{
  font-family:var(--font-sans);font-size:var(--text-caption);
  color:var(--navy-300);text-decoration:none;border:0;
  transition:color var(--duration-base) var(--ease-standard);
}
.bp-footer__links a:hover{color:var(--gold-300);border:0}
.bp-top{
  width:30px;height:30px;border-radius:var(--radius-full);cursor:pointer;
  background:transparent;padding:0;border:1px solid rgba(255,255,255,.4);
  color:var(--white);display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:14px;line-height:1;
  transition:transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard);
}
.bp-top:hover{transform:translateY(-2px);border-color:var(--gold-300);color:var(--gold-300)}

/* ==========================================================================
   5. RESPONSIVE  — extensión propia (el design system no trae breakpoints)
   ========================================================================== */

/* Tablet */
@media (max-width:960px){
  .bp-about{grid-template-columns:1fr;gap:var(--space-10)}
  .bp-about__portrait{max-width:420px}
  .bp-detail{grid-template-columns:1fr;gap:var(--space-10)}
  .bp-detail__aside{position:static;top:auto}
  /* La escalera se endereza: los peldaños escalonados no caben. */
  .bp-step--0,.bp-step--1,.bp-step--2{margin-left:0;margin-right:0}
}

/* Móvil */
@media (max-width:760px){
  :root{--header-h:64px}

  .bp-burger{display:flex}

  /* Menú desplegable: ocupa el ancho, bajo la cabecera. */
  .bp-header__nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);
    border-bottom:1px solid var(--border-hairline);
    box-shadow:var(--shadow-raised);
    padding:var(--space-4) var(--container-gutter) var(--space-6);
  }
  .bp-header__nav[hidden]{display:none}
  .bp-header__link{
    padding-block:var(--space-4);border-bottom:1px solid var(--border-hairline);
    color:var(--stone-700);font-size:var(--text-body);
  }
  .bp-header__link[aria-current="page"]{border-bottom-color:var(--gold-500)}
  /* Dentro del panel abierto el fondo siempre es blanco, aunque
     la cabecera esté en modo transparente sobre el héroe. */
  .bp-header--over .bp-header__nav .bp-header__link{color:var(--stone-700)}
  .bp-header--over .bp-header__nav .bp-header__link:hover{color:var(--navy-700)}
  .bp-header__nav .bp-btn{margin-top:var(--space-5);width:100%}
  .bp-header--over .bp-header__nav .bp-btn--primary{background:var(--navy-700);color:var(--white)}

  .bp-about__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  .bp-step{grid-template-columns:1fr;gap:var(--space-4)}
  .bp-step__index{font-size:56px}
  .bp-step__body{padding-top:0}
  .bp-point{grid-template-columns:1fr;gap:var(--space-3)}
  .bp-point__n{padding-top:0}
  .bp-band__inner{padding-block:var(--space-16)}
  .bp-footer__top{flex-direction:column;align-items:flex-start;gap:var(--space-10)}
  .bp-footer__bank{align-items:flex-start}
  .bp-footer__bar-inner{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
  .bp-hero__actions .bp-btn{flex:1 1 100%}
  .bp-quote__text{font-size:var(--text-display-4)}
  .bp-faq__item summary{font-size:22px}
}

@media (max-width:420px){
  .bp-about__stats{grid-template-columns:1fr}
  .bp-contact{grid-template-columns:1fr;gap:var(--space-1)}
}

/* Impresión: sin cromo, sin fondos oscuros. */
@media print{
  .bp-header,.bp-burger,.bp-hero__media,.bp-top,.bp-form,.bp-band{display:none}
  body{background:#fff;color:#000}
  a{border:0;text-decoration:underline}
}