/* =========================================================================
   Law Office of DHS — stylesheet  ·  "Midnight" (v3 · dark premium)
   A bold, modern, dark interface: deep-ink canvas with a blue aurora glow,
   oversized grotesk headlines, glassmorphic cards, glowing accents and a
   floating rounded hero photo card. Blue stays the brand anchor; electric
   cyan adds the modern spark.
   Palette: ink #080C18 · panel #0E1426 · azure #2D6BE4 · electric #38E1FF ·
            light text #E7EDFB · white
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  /* dark canvas */
  --ink: #080C18;        /* page ground */
  --ink-2: #0B1020;
  --panel: #0E1426;      /* raised band */
  --surface: #233358;    /* lighter elevated surface (section differentiation) */
  --surface-2: #2C3F69;  /* lightest surface */
  --card: #131C33;       /* glass card base */
  --card-2: #182238;
  /* brand blues + electric accent */
  --navy: #0B1226;       /* nav / footer surface */
  --navy-2: #16224a;
  --accent: #2D6BE4;     /* azure (overridden by Tweaks) */
  --accent-d: #1f54bd;
  --accent-l: #7FB0FF;
  --electric: #E0B256;   /* electric cyan — highlights, glows */
  --electric-d: #c2922f;
  /* text */
  --head: #F2F6FF;       /* headings */
  --text: #C2CCE2;       /* body */
  --muted: #8492AE;      /* secondary */
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.06);
  --white: #ffffff;
  --black: #0D0D0D;
  --wa: #25D366;
  --wa-d: #1da851;
  --hi: #F1D08C;

  --maxw: 1240px;
  --r: 18px;
  --r-sm: 12px;
  --r-lg: 28px;
  --glow: 0 0 0 1px rgba(224,178,86,.12), 0 30px 80px -30px rgba(45,107,228,.5);
  --shadow-sm: 0 2px 14px -6px rgba(0,0,0,.6);
  --shadow: 0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-lg: 0 50px 100px -40px rgba(0,0,0,.9);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.4,.5,1);

  --display: "Montserrat", "Space Grotesk", system-ui, sans-serif;
  --font: "Public Sans", system-ui, sans-serif; /* tweakable */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: var(--ink); -webkit-font-smoothing: antialiased;
  font-size: 17px; line-height: 1.62; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--head); line-height: 1.06;
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(44px, 6vw, 88px) 0; scroll-margin-top: 80px; position: relative; }
#services { scroll-margin-top: 84px; }

.services-section { padding-top: clamp(28px, 3.5vw, 56px); padding-bottom: clamp(28px, 3.5vw, 56px);
  position: relative; overflow: hidden;
  min-height: calc(100svh - 78px); display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(85% 70% at 50% -8%, rgba(255,255,255,.7) 0%, transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(45,107,228,.06) 0%, transparent 55%),
    linear-gradient(165deg, #EDEFF3 0%, #D9DEE7 60%, #CBD2DD 100%);
  border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(11,18,38,.08); }
.services-section > .container { position: relative; z-index: 1; }
.services-section .sec-head h2 { font-size: clamp(28px, 3.4vw, 44px); color: var(--navy); }
/* light-section text adaptations */
.services-section .eyebrow { color: #B5852B; }
.services-section .sec-head .sub { color: #46506A; }
/* instruction → solid white card with dark text */
.services-section .svc-instruction { background: #fff; color: var(--navy);
  border: 1.5px dashed rgba(181,133,43,.55); box-shadow: 0 10px 30px -16px rgba(11,18,38,.25); }
.services-section .svc-card { box-shadow: 0 20px 44px -22px rgba(11,18,38,.4), 0 1px 0 rgba(255,255,255,.4) inset; }

/* section grounds — subtle alternation + aurora glow */
.bg-gray { background: var(--panel); }
.bg-navy { background: var(--ink-2); color: var(--text); }
.section.bg-gray::before, #about::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(80% 60% at 12% 0%, rgba(45,107,228,.12) 0%, transparent 60%);
}
.section > .container { position: relative; z-index: 1; }

#testimonials.bg-navy { position: relative; color: var(--navy); overflow: hidden;
  /* dimensional ground: ALL washes live in one full-bleed background stack —
     no separate glow box, so there are no internal edges/lines anywhere in
     the section (a blurred ::before box previously left a faint straight band
     above the CTA button) */
  background:
    radial-gradient(80% 70% at 50% -6%, rgba(255,255,255,.85) 0%, transparent 58%),
    radial-gradient(55% 60% at 100% 0%, rgba(45,107,228,.1) 0%, transparent 55%),
    radial-gradient(120% 70% at 50% 42%, rgba(181,133,43,.13) 0%, rgba(45,107,228,.1) 44%, transparent 76%),
    radial-gradient(85% 50% at 50% 102%, rgba(181,133,43,.18) 0%, rgba(45,107,228,.07) 48%, transparent 74%),
    radial-gradient(70% 80% at 0% 100%, rgba(181,133,43,.16) 0%, transparent 55%),
    radial-gradient(90% 60% at 100% 105%, rgba(11,18,38,.15) 0%, transparent 58%),
    linear-gradient(165deg, #F2F4F8 0%, #DDE2EA 48%, #C4CCDA 100%);
  border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(11,18,38,.08); }
/* soft diagonal light beams sweeping the FULL section, header to CTA button */
#testimonials.bg-navy::after {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 24%, rgba(255,255,255,.5) 36%, rgba(255,255,255,.16) 42%, transparent 56%),
    linear-gradient(112deg, transparent 62%, rgba(255,255,255,.34) 74%, rgba(255,255,255,.1) 80%, transparent 92%);
  filter: blur(30px); mix-blend-mode: soft-light;
}
/* light-section text + control adaptations */
#testimonials .eyebrow { color: #B5852B; }
/* Google rating badge — golden, dimensional: warm gold gradient lit from the
   top, inner highlight, soft gold-tinted drop shadow */
#testimonials .g-summary {
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,244,214,.95) 0%, rgba(250,225,160,.55) 40%, transparent 70%),
    linear-gradient(165deg, #F6E3B4 0%, #E9C87E 48%, #D9AF5C 100%);
  border: 1px solid rgba(181,133,43,.55); border-top-color: rgba(255,250,235,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -12px 22px -14px rgba(140,96,22,.45),
    0 2px 6px -2px rgba(140,96,22,.35),
    0 16px 34px -14px rgba(140,96,22,.5); }
#testimonials .g-summary:hover {
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,248,224,1) 0%, rgba(252,231,172,.6) 40%, transparent 70%),
    linear-gradient(165deg, #F8E7BC 0%, #ECCD86 48%, #DDB463 100%);
  border-color: rgba(181,133,43,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -12px 22px -14px rgba(140,96,22,.4),
    0 3px 8px -2px rgba(140,96,22,.4),
    0 22px 44px -16px rgba(140,96,22,.55); }
#testimonials .g-rate strong { color: #4A3410; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
#testimonials .g-badge-title { color: #4A3410; }
#testimonials .g-count { color: #6E5320; }
/* stars inside the golden badge: bright saturated yellow that pops off the
   muted gold, with a dark-gold edge shadow for separation */
#testimonials .g-rate .stars { color: #FFD400; filter: drop-shadow(0 1px 1.5px rgba(90,58,8,.6)); }
#testimonials .g-rate .stars .st-empty { color: rgba(90,58,8,.3); }
/* CTA button sits on the dimensional ground too — lift it with real shadow */
#testimonials .tst-cta .btn-light { box-shadow: 0 2px 6px -2px rgba(11,18,38,.25), 0 16px 34px -14px rgba(11,18,38,.45); }
#testimonials .tst-cta .btn-light:hover { box-shadow: 0 3px 8px -2px rgba(11,18,38,.28), 0 22px 44px -16px rgba(11,18,38,.5); transform: translateY(-2px); }
#testimonials .tst-card { background: #fff; border: 1px solid rgba(11,18,38,.1);
  /* tight, single soft shadow — the previous huge multi-layer shadows merged
     between neighboring cards into a full-width dark band with a visible
     straight edge under the row */
  box-shadow: 0 1px 3px rgba(11,18,38,.14), 0 10px 22px -14px rgba(11,18,38,.35); }
#testimonials .tst-card:hover { background: #fff; border-color: rgba(181,133,43,.5); box-shadow: 0 26px 54px -22px rgba(11,18,38,.45); }
#testimonials .tst-id strong { color: var(--navy); }
#testimonials .tst-id span { color: #6a7488; }
#testimonials .tst-quote { color: #3A445C; }
#testimonials .tst-cta .btn-light { background: var(--navy); color: #fff; box-shadow: 0 14px 30px -12px rgba(11,18,38,.5); }
#testimonials .tst-cta .btn-light:hover { background: #060a16; color: #fff; }
#testimonials.bg-navy > .container { position: relative; z-index: 1; }

/* eyebrow / section heads — glowing electric tag */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--electric); margin: 0 0 20px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 12px 1px var(--electric); display: inline-block; }
.sec-head { max-width: 780px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; }
.sec-head .sub { margin-top: 16px; font-size: clamp(16px,1.7vw,18px); color: var(--muted); line-height: 1.58; }

/* services instruction callout — glass with electric edge */
.svc-instruction {
  display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 18px 22px;
  scroll-margin-top: 90px;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(224,178,86,.16) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1.5px dashed rgba(224,178,86,.5); border-radius: 20px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font); font-size: clamp(15px,1.5vw,17.5px); font-weight: 600; line-height: 1.4;
  color: var(--head); position: relative; overflow: hidden;
}
.svc-instruction::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  border-radius: 50%; background: radial-gradient(circle, rgba(224,178,86,.28), transparent 70%); pointer-events: none; }
.svc-instruction .ic { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(150deg, #F6DC9B, #C2922F); color: #1c1605;
  box-shadow: 0 0 0 4px rgba(224,178,86,.18), 0 0 22px -2px rgba(224,178,86,.7); }
.svc-instruction .ic svg { width: 23px; height: 23px; }
.cta-form-btn { margin-top: 22px; }

@keyframes svcAttention { 0%{transform:translateY(0) scale(1);}14%{transform:translateY(-12px) scale(1.035);}30%{transform:translateY(0) scale(1);}44%{transform:translateY(-6px) scale(1.015);}60%,100%{transform:translateY(0) scale(1);} }
@keyframes svcAttentionRing { 0%{box-shadow:0 0 0 0 rgba(224,178,86,.7);}55%{box-shadow:0 0 0 18px rgba(224,178,86,0);}100%{box-shadow:0 0 0 0 rgba(224,178,86,0);} }
.svc-instruction.attention { animation: svcAttention 1.4s var(--ease-back) both, svcAttentionRing 1.4s ease-out both; }
.svc-instruction.attention .ic { animation: svcAttention 1.4s var(--ease-back) .08s both; }
/* On phones the cue is a side-to-side shake — reads as "look here first". */
@keyframes svcAttentionX { 0%{transform:translateX(0);}12%{transform:translateX(-11px);}28%{transform:translateX(10px);}44%{transform:translateX(-8px);}60%{transform:translateX(6px);}74%{transform:translateX(-4px);}86%{transform:translateX(2px);}100%{transform:translateX(0);} }
@media (max-width: 980px){
  .svc-instruction.attention { animation: svcAttentionX 1.15s ease-in-out both, svcAttentionRing 1.4s ease-out both; }
  .svc-instruction.attention .ic { animation: none; }
}
/* NOTE: the .attention bounce is a brief, user-triggered attention cue (it only
   plays after tapping "Reserve una consulta"), so it intentionally plays even
   under prefers-reduced-motion — many phones have that setting on, which was
   silently disabling the cue on mobile while it worked on desktop. */

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 15px 26px; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer; letter-spacing: .01em;
  transition: transform .2s var(--ease-back), background .2s, box-shadow .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn svg { flex: none; }
.btn-sm { padding: 11px 17px; font-size: 14px; }
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px rgba(224,178,86,.18), 0 14px 30px -10px rgba(45,107,228,.8); }
.btn-accent:hover { background: var(--accent-d); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(224,178,86,.35), 0 18px 38px -10px rgba(45,107,228,.9); }
.btn-wa { background: var(--wa); color: #06351c; }
.btn-wa:hover { background: var(--wa-d); color: #042414; transform: translateY(-2px); }
.btn-light { background: #fff; color: #0b1226; box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); }
.btn-light:hover { background: #eaf1ff; transform: translateY(-2px); }
.btn-outline { background: rgba(255,255,255,.04); color: var(--head); border-color: var(--line); }
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--electric); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }
/* informational phone display (not a button anymore): no frame, no hover */
.btn-call { background: transparent; color: #fff; border-color: transparent; font-weight: 800; cursor: default; padding-left: 0; padding-right: 0; font-size: 19px; }
.btn-call svg { color: var(--electric); width: 24px; height: 24px; }

/* =============================== nav ==================================== */
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: var(--r-sm); z-index: 200; font-weight: 700; }
.skip-link:focus { left: 16px; }
.nav { position: sticky; top: 0; z-index: 100; color: #fff;
  background: linear-gradient(180deg, rgba(10,15,30,.86) 0%, rgba(8,12,24,.72) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line-2); transition: box-shadow .25s, background .25s, border-color .25s, height .25s; }
/* hairline of brand gold along the bottom edge — quiet, premium separation */
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(224,178,86,.42) 22%, rgba(224,178,86,.6) 50%, rgba(224,178,86,.42) 78%, transparent 100%); }
.nav.scrolled { background: linear-gradient(180deg, rgba(9,13,26,.96) 0%, rgba(8,12,24,.92) 100%); border-bottom-color: var(--line); box-shadow: 0 14px 40px -20px rgba(0,0,0,.9); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; height: 78px; display: flex; align-items: center; gap: 26px; transition: height .25s var(--ease); }
/* Taller bar + shrink-on-scroll is DESKTOP ONLY — unscoped, these rules beat the
   phone sizing in the max-width media blocks (media queries add no specificity). */
@media (min-width: 981px) {
  .nav-inner { height: 88px; }
  .nav.scrolled .nav-inner { height: 76px; }
}

/* segmented pill-bar primary nav */
.nav-links { display: flex; gap: 4px; margin-left: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px; }
.nav-links a { font-weight: 600; font-size: 14.5px; color: #aebbd6; padding: 9px 18px; border-radius: 999px; position: relative; transition: background .2s var(--ease), color .2s; }
.nav-links a:hover, .nav-links a:focus-visible { background: rgba(255,255,255,.1); color: #fff; outline: none; }
.nav-links a[aria-current="page"] { background: var(--electric); color: #1c1605; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* Standout gold CTA — high contrast against the dark nav, with a soft glow */
.nav-book.btn-accent {
  border-radius: 999px !important;
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%);
  color: #1c1605; font-weight: 800;
  border: 1px solid rgba(255,246,223,.7);
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 10px 26px -8px rgba(224,178,86,.7);
}
.nav-book.btn-accent svg { color: #1c1605; }
.nav-book.btn-accent:hover {
  background: linear-gradient(150deg, #FCEBBE 0%, #ECC067 48%, #CE9E36 100%);
  color: #120e02; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,246,223,.6), 0 16px 34px -8px rgba(224,178,86,.9);
}

/* wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 14px; }
.wordmark-logo { height: 44px; width: auto; flex: none; display: block; }
/* nav lockup: larger, better-proportioned logo that shrinks with the bar on
   scroll — desktop only, so phone sizes in the mobile blocks still win. */
@media (min-width: 981px) {
  .nav-inner .wordmark-logo { height: 58px; transition: height .25s var(--ease); }
  .nav.scrolled .wordmark-logo { height: 48px; }
  .nav-inner .wordmark-line2 { font-size: 23px; }
}
.wordmark-mark { width: 34px; height: 30px; flex: none; color: #fff; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.2); }
.wordmark-line1 { font-family: var(--font); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #8492AE; }
.wordmark-line2 { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.wordmark.light .wordmark-line1 { color: #8492AE; }
.wordmark.light .wordmark-line2, .wordmark.light .wordmark-mark { color: #fff; }

/* language toggle — segmented switch with a globe + sliding gold pill */
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 9px; }
.lang-toggle .lang-globe { color: var(--electric); margin-right: 3px; flex: none; }
.lang-toggle button { background: none; border: 0; padding: 6px 12px; border-radius: 999px; color: #8492AE; font-weight: 700;
  transition: color .18s, background .18s, box-shadow .18s; }
.lang-toggle.light button { color: #8492AE; }
.lang-toggle button.on { color: #1c1605; background: var(--electric); box-shadow: 0 0 14px -2px rgba(224,178,86,.7); }
.lang-toggle.light button.on { color: #1c1605; background: var(--electric); }
.lang-toggle button:not(.on):hover { color: #fff; background: rgba(255,255,255,.08); }
.lang-toggle.light button:not(.on):hover { color: #fff; }
.lang-div { display: none; }

/* book-a-consultation button — premium gold gradient pill with glow + icon */
.nav-book {
  border-radius: 999px !important; border: 0 !important;
  background: linear-gradient(135deg, var(--hi) 0%, var(--electric) 46%, var(--electric-d) 100%) !important;
  color: #1c1605 !important; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(241,208,140,.45), 0 12px 26px -10px rgba(224,178,86,.75);
  transition: transform .2s var(--ease-back), box-shadow .2s, filter .2s;
}
.nav-book svg { color: #1c1605; }
.nav-book:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(241,208,140,.7), 0 18px 34px -10px rgba(224,178,86,.9); }

/* burger / drawer */
.nav-burger, .drawer-close { display: none; background: none; border: 0; color: #fff; padding: 4px; }
.drawer-close { color: var(--head); }
.drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 150; background: rgba(8,14,30,.42); opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(3px);
  overflow: hidden; /* clip the off-canvas panel so its closed (translateX) position can't widen the page on mobile. NOTE: explicit 100dvh height is required because .nav's backdrop-filter makes it the containing block for this fixed element, so inset:0 would only fill the 78px nav. */ }
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(360px, 86vw); background: rgba(28,40,62,.6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; padding: 20px 22px; }
.drawer.open .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.drawer-links { display: flex; flex-direction: column; gap: 8px; padding: 18px 0; }
.drawer-links a { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--head);
  padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.03);
  display: flex; align-items: center; transition: transform .18s var(--ease-back), border-color .18s, background .18s; }
.drawer-links a:hover { background: rgba(255,255,255,.07); border-color: var(--electric); transform: translateX(4px); }
.drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.drawer-foot .lang-toggle { align-self: flex-start; }
/* "Reserve una consulta" in the mobile drawer: same gold pill as the PC nav CTA */
.drawer-foot .btn-accent {
  border-radius: 999px;
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%);
  color: #1c1605; border-color: rgba(255,246,223,.7); font-weight: 800;
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 10px 26px -8px rgba(224,178,86,.7);
}
.drawer-foot .btn-accent:hover {
  background: linear-gradient(150deg, #FCEBBE 0%, #ECC067 48%, #CE9E36 100%);
  color: #120e02;
}

/* =============================== hero =================================== */
.hero { position: relative; overflow: hidden; }
.hero-eyebrow { color: var(--electric); font-family: var(--font); font-size: clamp(12.5px, 1.4vw, 14px); letter-spacing: .2em; }
.hero-eyebrow::before { background: var(--electric); box-shadow: 0 0 12px 1px var(--electric); }
.hero h1 { font-size: clamp(40px, 6.6vw, 84px); font-weight: 700; line-height: 1.0; letter-spacing: -.03em; color: #fff; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, var(--electric), var(--accent-l)); -webkit-background-clip: text; background-clip: text; }
.hero-sub { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; max-width: 500px; color: var(--text); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-stats { display: flex; gap: 0; flex-wrap: nowrap; align-items: stretch; }
.hero-stat { display: flex; flex-direction: column; gap: 7px; padding: 2px 26px; position: relative; }
.hero-stat:first-child { padding-left: 0; }
.hero-stat + .hero-stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 44px; width: 1px; background: rgba(255,255,255,.16); }
.hero-stat strong { display: block; font-family: var(--display); font-size: 38px; color: #fff; font-weight: 700; line-height: 1; white-space: nowrap; }
.hero-stat span { font-family: var(--font); font-size: 11.5px; color: var(--electric); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; white-space: nowrap; }

/* shared dark hero ground with aurora */
.hero-split, .hero-center, .hero-flagphoto, .hero-bento {
  background:
    radial-gradient(60% 70% at 78% 18%, rgba(45,107,228,.32) 0%, transparent 60%),
    radial-gradient(50% 60% at 10% 92%, rgba(224,178,86,.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  color: var(--text);
}

/* —— split (text + portrait) —— */
.hero-split .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-block: clamp(60px,8vw,118px); position: relative; z-index: 2; }
.hero-split .hero-sub { margin: 26px 0 36px; }
.hero-split .hero-stats { margin-top: 46px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.16); }
.hero-portrait { position: relative; }
.hero-portrait .ph { aspect-ratio: 4/5; border-radius: var(--r-lg); }
.hero-portrait .flag-motif { position: absolute; bottom: -18px; left: -18px; width: 120px; height: 78px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }

/* —— centered statement —— */
.hero-center .hero-inner { padding-block: clamp(72px,9vw,140px) clamp(52px,6vw,90px); display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.hero-center h1 { max-width: 16ch; margin: 0 auto; }
.hero-center .hero-sub { margin: 28px auto 38px; text-align: center; }
.hero-center .hero-ctas { justify-content: center; }
.hero-center .hero-stats { justify-content: center; margin-top: 56px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,.16); width: min(720px,100%); }
.hero-center .hero-stat { text-align: center; }
.hero-center .hero-flag-top { width: 88px; height: 58px; border-radius: var(--r-sm); margin-bottom: 28px; box-shadow: var(--shadow-lg); }

/* —— image-forward —— */
.hero-image { color: #fff; position: relative; min-height: 86vh; display: flex; align-items: center; }
.hero-image .hero-photo { position: absolute; inset: 0; }
.hero-image .hero-photo .ph { width: 100%; height: 100%; border-radius: 0; }
.hero-image .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,24,.96) 0%, rgba(8,12,24,.8) 42%, rgba(8,12,24,.34) 100%); }
.hero-image .hero-content { position: relative; padding: clamp(60px,8vw,110px) 0; max-width: 640px; z-index: 2; }
.hero-image .hero-sub { margin: 26px 0 36px; }
.hero-image .hero-stats { margin-top: 46px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.18); }

/* placeholder image */
.ph { position: relative; background: #16203a; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, rgba(255,255,255,.015) 12px 24px);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ph .ph-label { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; color: #b6c4dd; background: rgba(8,12,24,.6); padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,.14); }
.ph.dark { background: #0e1730; }
.ph.dark .ph-label { color: #b6c4dd; background: rgba(8,12,24,.6); border-color: rgba(255,255,255,.14); }

/* ===================== soft / blurred recognizable US flag ============== */
.usflag { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: var(--flag-op, .12); }
.usflag-art { position: absolute; aspect-ratio: 19 / 10; filter: blur(3px); background: repeating-linear-gradient(to bottom, var(--flag-red, #b22234) 0 7.6923%, #fbfbfb 7.6923% 15.3846%); }
.usflag-canton { position: absolute; top: 0; left: 0; width: 40%; height: 53.846%; background-color: var(--flag-blue, #14264e); background-image: radial-gradient(circle at center, #fff 0 30%, transparent 33%); background-size: 16.66% 18.2%; background-position: 8% 12%; }
:root[data-flag="tonal"] .usflag-art { --flag-red: #1a3866; }
:root[data-flag="tonal"] .usflag-canton { background-color: var(--accent); }
.hero-flag-split .usflag-art { width: 72%; height: auto; right: -3%; top: 50%; left: auto; transform: translateY(-50%); }
.hero-flag-split { -webkit-mask: linear-gradient(95deg, transparent 4%, #000 46%); mask: linear-gradient(95deg, transparent 4%, #000 46%); }
.hero-noportrait .hero-grid { grid-template-columns: 1fr; }
.hero-noportrait .hero-text { max-width: 600px; }
.hero-noportrait .hero-flag-split .usflag-art { width: 86%; right: -4%; }

/* —— DEFAULT HERO · floating rounded photo card ————————————————————————
   Dark aurora canvas; the photograph becomes a large rounded, glowing card on
   the right with a subtle gradient scrim; the text lives clear on the left. */
.hero-flagphoto { position: relative; min-height: 90vh; display: flex; align-items: center; }
.hero-flagphoto .hero-grid { position: relative; z-index: 3; }
.hero-flagphoto.hero-noportrait .hero-grid { justify-content: flex-start; }
.hero-flagphoto .hero-text { max-width: 540px; }
.hero-flagphoto-img {
  position: absolute; z-index: 1; top: 50%; right: clamp(20px, 4vw, 60px); left: auto;
  transform: translateY(-50%); width: min(46%, 600px); height: 74%;
  background-size: cover; background-position: 50% center; opacity: var(--flag-photo-op, 1);
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--glow), var(--shadow-lg);
}
.hero-flagphoto-veil {
  position: absolute; z-index: 2; top: 50%; right: clamp(20px, 4vw, 60px); left: auto;
  transform: translateY(-50%); width: min(46%, 600px); height: 74%;
  border-radius: var(--r-lg); pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,24,0) 52%, rgba(8,12,24,.6) 100%),
              linear-gradient(280deg, rgba(8,12,24,0) 70%, rgba(45,107,228,.18) 100%);
}
@media (max-width: 980px) {
  .hero-flagphoto { min-height: 0; display: block; }
  .hero-flagphoto.hero-noportrait .hero-grid { justify-content: stretch; }
  .hero-flagphoto .hero-text { max-width: none; }
  .hero-flagphoto-img { position: relative; inset: auto; transform: none; top: auto; right: auto;
    width: auto; margin: clamp(20px,5vw,32px) 18px 0; height: 60vw; max-height: 380px; background-position: 50% 28%; }
  .hero-flagphoto-veil { position: absolute; inset: auto; transform: none; }
  .hero-flagphoto-veil { display: none; }
  .hero-flagphoto .hero-grid { padding-block: clamp(26px,6vw,48px) clamp(44px,8vw,80px); }
}

/* —— BENTO hero · message tile + photo tile + stat tiles —————————————————— */
/* Fill the viewport (minus the 78px sticky nav) and vertically center, so the
   whole first section is visible on load without scrolling. */
.hero-bento { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: calc(100svh - 78px);
  background:
    radial-gradient(55% 85% at 82% 8%, rgba(224,178,86,.3) 0%, transparent 60%),
    radial-gradient(62% 95% at 12% 12%, rgba(45,107,228,.5) 0%, transparent 62%),
    radial-gradient(85% 75% at 50% 122%, rgba(56,120,224,.3) 0%, transparent 62%),
    linear-gradient(180deg, #122142 0%, #0a1124 100%); }
.hero-bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto;
  gap: 18px; padding-block: clamp(24px,4vh,64px); position: relative; z-index: 2; align-items: stretch; width: 100%; }
.hb-main { grid-column: 1 / 8; grid-row: 1; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px,2.6vw,40px);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Smaller, tighter type so the whole first section fits on load. */
.hb-main h1 { margin-top: 4px; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.04; }
.hb-main .hero-sub { margin-top: 16px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.5; }
.hb-main .hero-ctas { margin-top: 26px; }
/* Hero primary CTA — the single most prominent button on the page */
.hb-main .hero-ctas .btn-accent {
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%);
  color: #1c1605; font-weight: 800; letter-spacing: .015em;
  padding: 17px 30px; font-size: 16px;
  border: 1px solid rgba(255,246,223,.75);
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 14px 34px -8px rgba(224,178,86,.75);
  animation: heroCtaPulse 2.8s var(--ease) infinite;
}
.hb-main .hero-ctas .btn-accent svg { color: #1c1605; }
.hb-main .hero-ctas .btn-accent:hover {
  background: linear-gradient(150deg, #FCEBBE 0%, #ECC067 48%, #CE9E36 100%);
  color: #120e02; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,246,223,.7), 0 20px 42px -8px rgba(224,178,86,.95);
}
@keyframes heroCtaPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 14px 34px -8px rgba(224,178,86,.75), 0 0 0 0 rgba(224,178,86,.5); }
  50% { box-shadow: 0 0 0 1px rgba(224,178,86,.4), 0 14px 34px -8px rgba(224,178,86,.85), 0 0 0 10px rgba(224,178,86,0); }
}
@media (prefers-reduced-motion: reduce) { .hb-main .hero-ctas .btn-accent { animation: none; } }
.hb-photo { grid-column: 8 / 13; grid-row: 1 / 3; position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--glow), var(--shadow-lg);
  min-height: 380px; }
.hb-photo-img { position: absolute; inset: 0; background-size: cover; background-position: 50% center; }
.hb-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,24,0) 48%, rgba(8,12,24,.6) 100%),
              linear-gradient(285deg, rgba(8,12,24,0) 70%, rgba(224,178,86,.16) 100%); }
.hb-stats { grid-column: 1 / 8; grid-row: 2; }
.hb-stats .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hb-stats .hero-stat { padding: 18px 20px; gap: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: var(--r);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hb-stats .hero-stat + .hero-stat::before { display: none; }
.hb-stats .hero-stat strong { font-size: 28px; font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; }
/* Desktop: hero copy sits directly on the aurora — no card frame on the left.
   The glass card is kept only on phones/tablets (the ≤980 rules below). */
@media (min-width: 981px) {
  .hb-main { background: none; border: 0; border-radius: 0; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 980px) {
  .hero-bento { min-height: 0; display: block; }
  .hero-bento-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px;
    padding-block: clamp(26px,6vw,52px) clamp(40px,8vw,72px); }
  .hb-main, .hb-stats { grid-column: 1 / -1; grid-row: auto; }
  .hb-photo { grid-column: 1 / -1; grid-row: auto; order: -1; min-height: 0; height: 60vw; max-height: 380px; }
}
@media (max-width: 640px) {
  /* Breathing room between the sticky top nav and the hero photo on phones. */
  .hero-bento-grid { padding-block: 38px clamp(40px, 8vw, 72px) !important; }
  .hb-photo { margin-top: 6px; }
  /* Stats stacked one below another; inside each box the title sits on top and
     the small caption beneath it, left-aligned. High specificity so it wins over
     the generic mobile hero rules further down the sheet. */
  .hb-stats .hero-stats { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; }
  .hb-stats .hero-stats .hero-stat { display: flex; flex-direction: column !important; align-items: flex-start; justify-content: center; gap: 4px; padding: 14px 18px; text-align: left; }
  .hb-stats .hero-stats .hero-stat strong { display: block; font-size: 22px !important; line-height: 1.05; white-space: normal; }
  .hb-stats .hero-stats .hero-stat span { display: block; font-size: 10.5px; line-height: 1.25; letter-spacing: .08em; white-space: normal; }
  /* short breathing room after the stats before the next section */
  .hb-stats { margin-bottom: 18px; }
}

.hero-flag-center .usflag-art { width: 122%; height: auto; left: 50%; top: 48%; transform: translate(-50%, -50%); max-width: 1500px; }
.hero-flag-center { -webkit-mask: radial-gradient(115% 92% at 50% 46%, #000 22%, transparent 74%); mask: radial-gradient(115% 92% at 50% 46%, #000 22%, transparent 74%); }

/* ============================= services ================================= */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; scroll-margin-top: 130px; }
.svc-card {
  background: linear-gradient(155deg, #F1D08C 0%, #E0B256 46%, #C2922F 100%);
  border: 1px solid rgba(241,208,140,.6); border-radius: var(--r); padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -20px rgba(224,178,86,.55);
  transition: transform .3s var(--ease-back), box-shadow .3s var(--ease), border-color .3s, background .3s;
  position: relative; overflow: hidden;
}
.svc-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, #fff6df, #C2922F); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .3s; }
.svc-card:hover { transform: translateY(-8px); background: linear-gradient(155deg, #FBE6B0 0%, #ECC067 46%, #CE9E36 100%);
  box-shadow: 0 0 0 1px rgba(255,246,223,.7), 0 34px 64px -22px rgba(224,178,86,.8); border-color: rgba(255,246,223,.9); }
.svc-card:hover::before { opacity: 1; }
.svc-ic { width: 46px; height: 46px; border-radius: 13px; background: #0B1226; color: var(--electric);
  box-shadow: 0 6px 16px -6px rgba(11,18,38,.7); display: grid; place-items: center; margin-bottom: 16px;
  transition: transform .3s var(--ease-back), background .3s, color .3s; }
.svc-card:hover .svc-ic { background: #060a16; color: var(--hi); transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 22px -8px rgba(11,18,38,.8); }
.svc-ic svg { width: 25px; height: 25px; }
.svc-card h3 { font-size: 20px; font-weight: 700; color: #1c1605; }
.svc-card p { margin: 9px 0 18px; color: #4a3a12; font-size: 14.5px; line-height: 1.52; }
.svc-link { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; background: transparent; color: #2c2206;
  font-family: var(--font); font-weight: 800; font-size: 14.5px; padding: 0; transition: gap .2s var(--ease), color .2s; }
.svc-link svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.svc-card:hover .svc-link { color: #0B1226; gap: 13px; }
.svc-card:hover .svc-link svg { transform: translateX(3px); }

/* —— Services · editorial restructure ————————————————————————————————————
   Two columns: a left rail with the title + "next step" instruction, and the
   gold service cards as large horizontal panels (number · icon · text · arrow)
   stacked on the right, so they become the bold focal point. */
.services-section .container {
  display: grid; grid-template-columns: minmax(260px, .82fr) 1.45fr;
  column-gap: clamp(30px, 4vw, 64px); row-gap: 22px; align-items: start;
}
.services-section .sec-head { grid-column: 1; grid-row: 1; align-self: start; }
.services-section .svc-instruction { grid-column: 1; grid-row: 2; margin-top: 4px; align-self: start; }
.services-section .services-grid {
  grid-column: 2; grid-row: 1 / 3; margin-top: 0;
  display: flex; flex-direction: column; gap: 10px; counter-reset: svc;
}
/* horizontal gold panels */
.services-section .svc-card {
  counter-increment: svc;
  display: grid; grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "num ic title link" "num ic desc link";
  align-items: center; column-gap: 16px; row-gap: 2px;
  padding: 14px 20px;
}
/* repurpose ::before as a large edition number */
.services-section .svc-card::before {
  content: counter(svc, decimal-leading-zero);
  position: static; grid-area: num; align-self: center;
  padding: 0; background: none; border-radius: 0; opacity: 1;
  -webkit-mask: none; mask: none; -webkit-mask-composite: initial; mask-composite: initial;
  font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1; color: rgba(11,18,38,.32); letter-spacing: -.03em;
  padding-right: 14px; margin-right: 2px; border-right: 1px solid rgba(11,18,38,.18);
  transition: color .3s;
}
.services-section .svc-card:hover::before { color: rgba(11,18,38,.62); }
.services-section .svc-ic { grid-area: ic; margin: 0; align-self: center; width: 40px; height: 40px; border-radius: 11px; }
.services-section .svc-ic svg { width: 21px; height: 21px; }
.services-section .svc-card h3 { grid-area: title; align-self: end; font-size: 17px; }
.services-section .svc-card p { grid-area: desc; margin: 0; align-self: start; max-width: 52ch; font-size: 13px; line-height: 1.4; }
.services-section .svc-link { grid-area: link; margin: 0; align-self: center; white-space: nowrap;
  background: #0B1226; color: #F6DC9B; border-radius: 999px; padding: 10px 16px; font-size: 13px;
  font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 8px 20px -8px rgba(11,18,38,.8); border: 1px solid rgba(255,246,223,.25);
  transition: transform .2s var(--ease-back), background .2s, color .2s, box-shadow .2s, gap .2s var(--ease); }
.services-section .svc-link svg { color: #F6DC9B; transition: transform .2s var(--ease), color .2s; }
.services-section .svc-card:hover .svc-link { background: #060a16; color: #fff; gap: 12px;
  transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(0,0,0,.9); }
.services-section .svc-card:hover .svc-link svg { color: #fff; transform: translateX(3px); }

@media (max-width: 980px) {
  .services-section { min-height: 0; display: block; }
  .services-section .container { grid-template-columns: 1fr; }
  .services-section .sec-head, .services-section .svc-instruction, .services-section .services-grid { grid-column: 1; grid-row: auto; }
  .services-section .services-grid { margin-top: 8px; }
}
@media (max-width: 560px) {
  /* Compact service cards on phones: icon + title + arrow link only, no long
     description text, tighter padding — so the buttons read smaller. */
  .services-section .svc-card { grid-template-columns: auto 1fr auto; grid-template-areas: "ic title link"; align-items: center; column-gap: 14px; row-gap: 0; padding: 14px 16px; }
  .services-section .svc-card::before { display: none; }
  .services-section .svc-card p { display: none; }
  .services-section .svc-card { min-width: 0; }
  .services-section .svc-card h3 { align-self: center; font-size: 15.5px; line-height: 1.2; min-width: 0; }
  .services-section .svc-ic { width: 34px; height: 34px; border-radius: 9px; }
  .services-section .svc-ic svg { width: 18px; height: 18px; }
  .services-section .svc-link { margin: 0; padding: 8px 12px; font-size: 12px; gap: 6px; }
  .services-section .svc-link span { display: none; }
  .services-section .services-grid { gap: 9px; }
}

/* ============================ legal pages =============================== */
/* /terminos-sms/ and /privacidad/ — plain reading document on the site's dark
   ground. No cards or per-section backgrounds: it reads straight through. */
.legal-main { background: linear-gradient(180deg, #0e1730 0%, #080C18 46%); padding: clamp(30px, 7vw, 54px) 0 clamp(48px, 9vw, 84px); }
.legal-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5.5vw, 28px); }
.legal-jump { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-bottom: 20px; margin-bottom: clamp(24px, 5vw, 34px); border-bottom: 1px solid var(--line); }
.legal-jump a { color: var(--electric); font-size: 14px; font-weight: 700; text-decoration: none; }
.legal-jump a:hover { text-decoration: underline; }
.legal-doc { scroll-margin-top: calc(var(--nav-h, 78px) + 16px); }
.legal-doc h2 { color: var(--head); font-family: var(--display); font-size: clamp(24px, 6vw, 33px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 10px; }
.legal-doc h3 { color: var(--head); font-family: var(--font); font-size: clamp(17px, 4.4vw, 19px); font-weight: 800; line-height: 1.3; margin: clamp(28px, 5.5vw, 36px) 0 10px; }
.legal-doc p, .legal-doc li { color: var(--text); font-size: 16.5px; line-height: 1.75; }
.legal-doc p + p { margin-top: 14px; }
.legal-doc strong { color: var(--head); font-weight: 700; }
.legal-updated { color: var(--muted); margin-bottom: 22px; }
.legal-updated strong { color: var(--muted); font-weight: 700; }
.legal-doc ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.legal-doc ul li { position: relative; padding-left: 20px; }
.legal-doc ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--electric); }
.legal-doc a { color: var(--electric); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: #F6DC9B; }
.legal-contact { font-style: normal; color: var(--text); font-size: 16.5px; line-height: 1.8; margin-top: 12px; }
.legal-sep { border: 0; border-top: 1px solid var(--line); margin: clamp(44px, 9vw, 68px) 0; }
/* footer legal links */
.footer-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.footer-legal-links a { color: #aebbd6; text-decoration: none; }
.footer-legal-links a:hover { color: var(--electric); text-decoration: underline; }
.footer-legal-links .sep { opacity: .5; }

/* ============================== about =================================== */
/* —— Nosotros · imagen grande nítida + texto debajo (rostro y letrero visibles) —— */
.about-feature { position: relative; overflow: hidden;
  background:
    radial-gradient(55% 80% at 85% 6%, rgba(224,178,86,.26) 0%, transparent 60%),
    radial-gradient(60% 95% at 10% 14%, rgba(45,107,228,.5) 0%, transparent 62%),
    radial-gradient(85% 75% at 50% 122%, rgba(56,120,224,.28) 0%, transparent 62%),
    linear-gradient(180deg, #122142 0%, #0a1124 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: calc(100svh - 78px); display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(24px,4vh,56px); }
.about-feature::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 60% at 85% 0%, rgba(45,107,228,.16) 0%, transparent 60%); }
.about-feature > .container { position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,4vw,60px); align-items: center; }
.about-figure { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden; order: 2;
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--glow), var(--shadow-lg); }
.about-figure img { width: 100%; display: block; height: clamp(320px, 64vh, 560px); object-fit: cover; object-position: center 28%; }
.about-content { display: flex; flex-direction: column; gap: clamp(20px,3vh,32px); order: 1; }
.about-text h2 { font-size: clamp(26px,3.2vw,42px); margin-top: 6px; }
.about-text > p:not(.eyebrow) { margin-top: 14px; font-size: 15.5px; color: var(--text); line-height: 1.58; }
.about-text > p:not(.eyebrow) em { color: var(--electric); font-style: normal; font-weight: 600; }
.creds { margin-top: 0; padding: clamp(20px,2.2vw,28px);
  background: transparent;
  border: 1px solid rgba(224,178,86,.55); border-left: 5px solid var(--electric); border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 0 28px -4px rgba(224,178,86,.45), 0 22px 50px -24px rgba(224,178,86,.6); }
.creds h4 { font-family: var(--font); font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--hi); margin-bottom: 14px; font-weight: 800; }
.creds ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.creds li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: #fff; font-size: 14px; }
.creds li .ck { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(150deg, #F6DC9B, #C2922F); color: #1c1605; display: grid; place-items: center;
  box-shadow: 0 0 12px -2px rgba(224,178,86,.7); }
.creds li .ck svg { width: 12px; height: 12px; }
.creds li .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(224,178,86,.18); color: var(--electric); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(224,178,86,.4); }
.creds li .ck svg { width: 12px; height: 12px; }

/* =========================== testimonials =============================== */
.tst-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
.g-summary { display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r); padding: 16px 22px; transition: background .15s, transform .2s var(--ease-back), border-color .2s; }
.g-summary:hover { background: rgba(255,255,255,.1); border-color: rgba(224,178,86,.45); transform: translateY(-2px); }
.g-meta { display: flex; flex-direction: column; gap: 3px; }
.g-rate { display: flex; align-items: center; gap: 10px; }
.g-rate strong { color: #fff; font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; }
.g-rate .stars { margin: 0; color: #FBBC05; }
.g-count { font-size: 13px; color: var(--muted); }
.g-badge-title { color: #fff; font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.2; }
/* continuously drifting marquee: 3 cards in view on desktop, 2 on tablet,
   ~1 on phones (with a peek of the next). Native overflow scroll so visitors
   can still swipe/drag; JS drifts it slowly and wraps seamlessly.
   NOTE: no scroll-snap / scroll-behavior here — they'd fight the per-frame
   scrollLeft drift. */
.tst-carousel { position: relative; }
.tst-track { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; align-items: stretch; padding-block: 10px 6px; }
.tst-track::-webkit-scrollbar { display: none; }
.tst-track .tst-card { flex: 0 0 calc((100% - 16px) / 3); }
@media (max-width: 980px) { .tst-track .tst-card { flex-basis: calc((100% - 8px) / 2); } }
@media (max-width: 640px) { .tst-track .tst-card { flex-basis: 94%; } }
.tst-card { position: relative; overflow: hidden; border-radius: 12px; padding: 18px 20px 16px; display: flex; flex-direction: column;
  /* Google-review look: clean white card, soft single shadow */
  background: #fff;
  border: 1px solid #E8EAED;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  transition: transform .3s var(--ease-back), box-shadow .3s; }
.tst-card::before, .tst-card::after { display: none; }
.tst-card:hover { transform: translateY(-4px); box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 6px 14px 2px rgba(60,64,67,.18); }
.tst-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; position: relative; z-index: 1; }
.tst-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, var(--accent), var(--electric-d)); color: #fff; display: grid; place-items: center; font-family: var(--font); font-weight: 500; font-size: 17px; flex: none; }
.tst-id { flex: 1; min-width: 0; line-height: 1.25; }
.tst-id strong { color: #202124; font-size: 14px; display: block; font-family: var(--font); font-weight: 700; }
.tst-id span { color: #70757A; font-size: 12px; }
.tst-g { flex: none; opacity: .9; }
/* Google-review stars: flat Google yellow, no shadow/outline (like on Google).
   Unfilled remainder renders gray, same as Google's empty stars. */
.stars { color: #FABB05; display: flex; gap: 1px; }
.stars .st-empty { color: #DADCE0; }
.tst-rate { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tst-when { color: #70757A; font-size: 12.5px; }
.tst-quote { font-family: var(--font); font-size: 14px; line-height: 1.58; color: #4D5156; flex: 1; position: relative; z-index: 1; }
.tst-quote.clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.tst-quote-muted { font-style: italic; opacity: .75; }
.tst-more { align-self: flex-start; margin-top: 8px; background: none; border: 0; padding: 0; color: #1A73E8; font-family: var(--font); font-weight: 500; font-size: 13.5px; cursor: pointer; position: relative; z-index: 1; }
.tst-more:hover { text-decoration: underline; }
.tst-cta { display: flex; justify-content: center; margin-top: 0; }

/* ============================= cta band ================================= */
.cta-band { color: var(--head); position: relative; overflow: hidden;
  background:
    radial-gradient(62% 100% at 12% 8%, rgba(45,107,228,.46) 0%, transparent 64%),
    radial-gradient(85% 75% at 50% 122%, rgba(56,120,224,.3) 0%, transparent 62%),
    linear-gradient(180deg, #122142 0%, #0a1124 100%);
  border-top: 1px solid rgba(255,255,255,.08); }
.cta-band::before { display: none; }
.cta-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-block: clamp(60px,8vw,96px); position: relative; z-index: 1; }
.cta-intro .eyebrow { color: var(--electric); }
.cta-intro h2 { color: var(--head); font-size: clamp(28px,3.4vw,42px); margin-top: 16px; max-width: 16ch; }
.cta-intro > p { color: var(--text); margin-top: 20px; max-width: 44ch; font-size: 17px; line-height: 1.6; }
.cta-hours { display: inline-flex; align-items: center; gap: 11px; margin-top: 24px;
  font-size: 15px; font-weight: 700; color: var(--head); line-height: 1.4;
  background: rgba(224,178,86,.12); border: 1px solid rgba(224,178,86,.4);
  border-radius: 999px; padding: 11px 18px; }
.cta-hours svg { color: var(--electric); flex: none; }
.cta-options { display: flex; flex-direction: column; gap: 14px; }
.cta-opt { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.05); border-radius: var(--r); padding: 20px 22px; border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .24s var(--ease-back), box-shadow .24s, border-color .2s, background .2s; }
.cta-opt:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(224,178,86,.45); box-shadow: 0 22px 48px -22px rgba(224,178,86,.55); }
.cta-opt .ic { width: 52px; height: 52px; border-radius: 13px; background: rgba(224,178,86,.14); color: var(--electric); box-shadow: inset 0 0 0 1px rgba(224,178,86,.26); display: grid; place-items: center; flex: none; }
.cta-opt.wa .ic { background: rgba(37,211,102,.16); color: #46e08a; box-shadow: inset 0 0 0 1px rgba(37,211,102,.3); }
.cta-opt .txt { flex: 1; min-width: 0; }
.cta-opt .txt strong { display: block; color: var(--head); font-size: 17px; line-height: 1.2; font-family: var(--display); font-weight: 700; }
.cta-opt .txt span { color: var(--muted); font-size: 13.5px; }
.cta-opt .go { color: var(--electric); flex: none; transition: transform .2s var(--ease); }
@media (max-width: 640px) {
  /* Mobile: the band keeps the SAME background as PC (no override). Just add
     breathing room after the "Agende de inmediato…" hours pill before the
     footer starts. */
  .cta-grid { padding-bottom: clamp(88px, 22vw, 130px); }
  .cta-hours { margin-bottom: 26px; }
  /* Footer brand lockup: larger for legibility but viewport-scaled so the
     name never outgrows the column or crowds neighboring blocks. */
  .footer .wordmark { min-width: 0; }
  .footer .wordmark-logo { height: clamp(34px, 10.5vw, 42px); }
  .footer .wordmark-text { padding-left: clamp(10px, 3.2vw, 14px); gap: 3px; }
  .footer .wordmark-line1 { font-size: clamp(9px, 2.8vw, 11px); letter-spacing: .13em; }
  .footer .wordmark-line2 { font-size: clamp(19px, 6vw, 25px); }
  /* Footer stacked layout: tighter rhythm + let the copyright line wrap
     (it has white-space:nowrap for desktop, which clips on a 390px phone). */
  .footer-inner { padding-top: 48px; gap: 34px; }
  .footer-legal { white-space: normal; flex-wrap: wrap; row-gap: 10px; }
  .footer-bottom-inner { row-gap: 14px; }
  .footer-col h4 { margin-bottom: 14px; }
  .footer-col h4.mt { margin-top: 22px; }
}

/* High-contrast solid CTA options that pop against the illuminated dark band */
/* 1 · primary "Completar mi formulario" → solid gold */
.cta-options .cta-opt:first-child {
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%);
  border-color: rgba(255,246,223,.7);
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 16px 36px -12px rgba(224,178,86,.7);
}
.cta-options .cta-opt:first-child:hover {
  background: linear-gradient(150deg, #FCEBBE 0%, #ECC067 48%, #CE9E36 100%);
  border-color: rgba(255,246,223,.9);
  box-shadow: 0 0 0 1px rgba(255,246,223,.6), 0 22px 46px -12px rgba(224,178,86,.9);
}
.cta-options .cta-opt:first-child .ic { background: #0B1226; color: #F6DC9B; box-shadow: 0 6px 16px -6px rgba(11,18,38,.7); }
.cta-options .cta-opt:first-child .txt strong { color: #1c1605; }
.cta-options .cta-opt:first-child .txt span { color: #5a4715; }
.cta-options .cta-opt:first-child .go { color: #1c1605; }
/* 2 · "Llame a la oficina" → solid gold (matches the form button) */
.cta-options .cta-opt:nth-child(2) {
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%);
  border-color: rgba(255,246,223,.7);
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 16px 36px -12px rgba(224,178,86,.7);
}
.cta-options .cta-opt:nth-child(2):hover {
  background: linear-gradient(150deg, #FCEBBE 0%, #ECC067 48%, #CE9E36 100%);
  border-color: rgba(255,246,223,.9);
  box-shadow: 0 0 0 1px rgba(255,246,223,.6), 0 22px 46px -12px rgba(224,178,86,.9);
}
.cta-options .cta-opt:nth-child(2) .ic { background: #0B1226; color: #F6DC9B; box-shadow: 0 6px 16px -6px rgba(11,18,38,.7); }
.cta-options .cta-opt:nth-child(2) .txt strong { color: #1c1605; }
.cta-options .cta-opt:nth-child(2) .txt span { color: #5a4715; }
.cta-options .cta-opt:nth-child(2) .go { color: #1c1605; }

/* 2b · phone card is an informational NOTICE (no link/hover): flat navy
   surface with a gold outline; white title, gold number, gold icon plate. */
.cta-options .cta-opt.cta-opt-static,
.cta-options .cta-opt.cta-opt-static:hover {
  background: #1A284C;
  border: 1px solid var(--electric);
  box-shadow: none;
  transform: none; cursor: default;
}
.cta-options .cta-opt.cta-opt-static .ic { background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 60%, #C2922F 100%); color: #0B1226;
  box-shadow: inset 0 1px 0 rgba(255,250,235,.7), 0 6px 16px -6px rgba(224,178,86,.6); }
.cta-options .cta-opt.cta-opt-static .txt strong { color: #fff; }
.cta-options .cta-opt.cta-opt-static .txt span { color: var(--electric); font-size: 17px; font-weight: 800; letter-spacing: .02em; text-shadow: none; }

/* =============================== footer ================================= */
.footer { background: var(--ink-2); color: var(--text); font-size: 15px; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 76px 28px 50px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer-tag { margin: 20px 0; max-width: 34ch; line-height: 1.6; color: var(--muted); }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social a { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; border: 1px solid var(--line); transition: transform .18s var(--ease-back), box-shadow .15s, filter .15s; }
.footer-social a svg { width: 28px; height: 28px; }
.footer-social a.soc-ig { background: linear-gradient(48deg, #feda75 4%, #fa7e1e 28%, #d62976 56%, #962fbf 78%, #4f5bd5 100%); }
.footer-social a.soc-tt { background: #010101; }
.footer-social a.soc-yt { background: #FF0000; }
.footer-social a.soc-fb { background: #1877F2; }
.footer-social a:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.footer-flag { width: 96px; height: 62px; border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.footer-col h4 { color: #fff; font-family: var(--font); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 20px; font-weight: 700; }
.footer-col h4.mt { margin-top: 28px; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact a, .footer-contact .fc-item { display: flex; gap: 12px; align-items: flex-start; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 13px; padding: 13px 15px; transition: background .18s, border-color .18s, transform .18s var(--ease-back); }
.footer-contact a:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(224,178,86,.4); transform: translateY(-2px); }
.footer-contact a.no-link, .footer-contact .fc-item.no-link { cursor: default; }
.footer-contact a.no-link:hover { transform: none; background: rgba(255,255,255,.03); border-color: var(--line-2); }
.footer-contact svg { color: var(--electric); margin-top: 3px; flex: none; }
.footer-contact em { display: block; font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 3px; }
.footer-hours { margin-top: 18px; font-size: 13px; color: var(--muted); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.footer-links a { display: inline-flex; align-items: center; color: var(--text); font-weight: 600; font-size: 13.5px; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: background .18s, border-color .18s, color .18s, transform .18s var(--ease-back); }
.footer-links a:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(224,178,86,.4); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom-inner { max-width: var(--maxw); margin: 0 auto; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-disclaimer { font-size: 12.5px; color: var(--muted); max-width: 62ch; line-height: 1.55; }
.footer-legal { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* =========================== whatsapp float ============================= */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.5); transition: transform .2s var(--ease-back); }
.wa-float:hover { transform: scale(1.09); }
.wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--wa); opacity: .55; z-index: -1; animation: wa-pulse 2.4s ease-out infinite; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(1.7); opacity: 0; } }
.wa-tip { position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; background: var(--panel); color: #fff; font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: var(--r-sm); white-space: nowrap; pointer-events: none; transition: .2s; box-shadow: var(--shadow); border: 1px solid var(--line); }
.wa-tip::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--panel); border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (prefers-reduced-motion: reduce) { .wa-pulse { animation: none; } }

/* ============================ flag motif ================================ */
.flag-motif { position: relative; width: 100%; height: 100%; background: var(--navy); display: block; }
.flag-stripes { position: absolute; inset: 0; display: flex; flex-direction: column; }
.flag-stripes i { flex: 1; }
.flag-stripes i:nth-child(odd) { background: var(--navy); }
.flag-stripes i:nth-child(even) { background: #fff; }
.flag-canton { position: absolute; top: 0; left: 0; width: 42%; height: 53.8%; background: var(--accent); z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr; place-items: center; padding: 12% 8%; gap: 4%; }
.flag-canton span { width: 28%; aspect-ratio: 1; background: #fff; border-radius: 50%; opacity: .92; }

/* =============================== service page =========================== */
.svc-hero { color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(55% 85% at 82% 8%, rgba(224,178,86,.34) 0%, transparent 60%),
    radial-gradient(60% 95% at 12% 12%, rgba(45,107,228,.5) 0%, transparent 62%),
    radial-gradient(85% 75% at 50% 120%, rgba(56,120,224,.28) 0%, transparent 62%),
    linear-gradient(180deg, #122142 0%, #0a1124 100%); }
.svc-hero .container { padding-top: clamp(52px,7vw,90px); padding-bottom: clamp(52px,7vw,90px); position: relative; }
.crumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.crumb a:hover { color: #fff; }
.crumb svg { width: 15px; height: 15px; }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 50px; align-items: center; min-width: 0; }
.svc-hero-grid > div { min-width: 0; }
.svc-hero .svc-ic { width: 72px; height: 72px; border-radius: 19px;
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%); color: #1c1605;
  box-shadow: 0 0 0 1px rgba(255,246,223,.4), 0 16px 36px -10px rgba(224,178,86,.75); margin-bottom: 24px; }
.svc-hero .svc-ic svg { width: 36px; height: 36px; }

/* —— Service hero · bento (mirrors home's first section) —————————————————— */
.svc-hero-bento { min-height: 0; display: block; }
.svc-hero-bento .hero-bento-grid { padding-block: clamp(40px,6vw,80px); align-items: stretch; }
.svc-hero-bento .hb-main { grid-column: 1 / 8; grid-row: 1; }
.svc-hero-bento .hb-photo { grid-column: 8 / 13; grid-row: 1; min-height: 360px; }
.svc-hero-bento .hb-main .crumb { margin-bottom: 18px; }
.svc-hero-bento .hb-main .svc-ic { margin-bottom: 18px; }
.svc-hero-bento .hb-main h1 { font-size: clamp(28px,3.4vw,48px); margin-top: 2px; }
.svc-hero-bento .hb-main .hero-sub { margin-top: 16px; }
.svc-hero-bento .hb-main .hero-ctas { margin-top: 26px; }
.svc-hero-bento .hb-photo-img { background-position: center 30%; }
@media (max-width: 980px) {
  .svc-hero-bento .hero-bento-grid { grid-template-columns: 1fr; }
  .svc-hero-bento .hb-main, .svc-hero-bento .hb-photo { grid-column: 1 / -1; grid-row: auto; }
  .svc-hero-bento .hb-photo { order: -1; min-height: 0; height: 56vw; max-height: 320px; }
}
.svc-hero h1 { color: #fff; font-size: clamp(34px,5vw,58px); font-weight: 700; overflow-wrap: break-word; }
.svc-hero p { color: var(--text); font-size: clamp(17px,2vw,20px); margin: 22px 0 32px; max-width: 52ch; line-height: 1.6; }
.svc-hero-ctas { display: flex; gap: 13px; flex-wrap: wrap; }
.svc-hero-art .ph { aspect-ratio: 5/4; border-radius: var(--r-lg); }
.svc-hero-photo { width: 100%; aspect-ratio: 4/5; max-height: 470px; object-fit: cover; object-position: center top; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--glow), var(--shadow-lg); }

.svc-body { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 64px; align-items: start; }
.svc-prose h2 { font-size: clamp(28px,3.6vw,40px); }
.svc-prose > p { margin-top: 22px; font-size: 18px; color: var(--text); line-height: 1.66; }
.svc-help { margin-top: 42px; padding-top: 38px; border-top: 1px solid var(--line); }
.svc-help h3 { font-family: var(--font); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--electric); margin-bottom: 20px; font-weight: 700; }
.svc-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.svc-help li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; color: var(--head); font-weight: 500; }
.svc-help li .ck { flex: none; width: 28px; height: 28px; border-radius: 9px; background: rgba(224,178,86,.14); color: var(--electric); display: grid; place-items: center; }
.svc-help li .ck svg { width: 16px; height: 16px; }

/* —— Service page · light body section (alternates with dark hero/related) —— */
.svc-light { position: relative; overflow: hidden;
  background:
    radial-gradient(85% 70% at 50% -8%, rgba(255,255,255,.7) 0%, transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(45,107,228,.06) 0%, transparent 55%),
    linear-gradient(165deg, #EDEFF3 0%, #D9DEE7 60%, #CBD2DD 100%);
  border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(11,18,38,.08); }
.svc-light .svc-prose .eyebrow { color: #B5852B; }
.svc-light .svc-prose h2 { color: var(--navy); }
.svc-light .svc-prose > p { color: #46506A; }
.svc-light .svc-help { border-top-color: rgba(11,18,38,.12); }
.svc-light .svc-help h3 { color: #B5852B; }
.svc-light .svc-help li { color: var(--navy); }
.svc-light .svc-help li .ck { background: rgba(45,107,228,.1); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(45,107,228,.2); }
/* intake form → solid white card with dark text on the light section */
.svc-light .qual-form { background: #fff; border: 1px solid rgba(11,18,38,.1);
  box-shadow: 0 24px 60px -28px rgba(11,18,38,.45); }
.svc-light .qual-form .form-head h3 { color: var(--navy); }
.svc-light .qual-form .form-head p { color: #5A6480; }
.svc-light .intake-ask { background: #F3F5F9; border-color: rgba(11,18,38,.08); }
.svc-light .intake-ask-label { color: #6A7488; }
.svc-light .intake-ask li { color: var(--navy); }
.svc-light .intake-ask li .ck { background: rgba(45,107,228,.1); color: var(--accent); }
.svc-light .form-secure { color: #6A7488; }

/* —— Service page · "Otras formas" related section · illuminated glow ——————— */
.svc-related { position: relative; overflow: hidden;
  background:
    radial-gradient(55% 80% at 85% 4%, rgba(224,178,86,.24) 0%, transparent 60%),
    radial-gradient(60% 95% at 10% 12%, rgba(45,107,228,.48) 0%, transparent 62%),
    radial-gradient(85% 75% at 50% 122%, rgba(56,120,224,.26) 0%, transparent 62%),
    linear-gradient(180deg, #122142 0%, #0a1124 100%);
  border-top: 1px solid rgba(255,255,255,.06); }
.svc-related > .container { position: relative; z-index: 1; }

/* —— Service "Qué hacemos" · modern overview (header + help cards + form) ——— */
.svc-overview-head { max-width: 760px; }
.svc-overview-head .eyebrow { color: #B5852B; }
.svc-overview-head h2 { color: var(--navy); font-size: clamp(28px,3.6vw,46px); margin-top: 4px; }
.svc-lead { margin-top: 18px; font-size: clamp(17px,1.9vw,20px); color: #46506A; line-height: 1.6; }
.svc-overview-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(28px,4vw,60px); align-items: start; margin-top: clamp(30px,4vw,52px); }
.svc-help-modern h3 { font-family: var(--font); font-size: 13px; text-transform: uppercase; letter-spacing: .14em;
  color: #B5852B; margin-bottom: 18px; font-weight: 700; }
.svc-help-cards { display: flex; flex-direction: column; gap: 12px; }
.svc-help-card { display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid rgba(11,18,38,.1); border-radius: var(--r);
  padding: 18px 20px; box-shadow: 0 10px 26px -18px rgba(11,18,38,.35);
  transition: transform .22s var(--ease-back), box-shadow .22s, border-color .2s; }
.svc-help-card:hover { transform: translateX(4px); border-color: rgba(224,178,86,.5); box-shadow: 0 16px 34px -18px rgba(11,18,38,.45); }
.svc-help-card .ck { flex: none; width: 30px; height: 30px; border-radius: 9px; margin-top: 1px;
  background: linear-gradient(150deg, #F6DC9B, #C2922F); color: #1c1605; display: grid; place-items: center;
  box-shadow: 0 6px 14px -6px rgba(224,178,86,.7); }
.svc-help-card .ck svg { width: 16px; height: 16px; }
.svc-help-card p { margin: 0; font-size: 16px; color: var(--navy); font-weight: 600; line-height: 1.45; }
/* standout form CTA on the light section */
.svc-light .qual-form .btn-accent {
  background: linear-gradient(150deg, #F6DC9B 0%, #E0B256 48%, #C2922F 100%); color: #1c1605; font-weight: 800;
  border: 1px solid rgba(255,246,223,.7);
  box-shadow: 0 0 0 1px rgba(224,178,86,.3), 0 14px 32px -8px rgba(224,178,86,.7); }
.svc-light .qual-form .btn-accent svg { color: #1c1605; }
.svc-light .qual-form .btn-accent:hover {
  background: linear-gradient(150deg, #FCEBBE 0%, #ECC067 48%, #CE9E36 100%); color: #120e02; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,246,223,.6), 0 20px 42px -8px rgba(224,178,86,.9); }
@media (max-width: 860px) {
  .svc-overview-grid { grid-template-columns: 1fr; }
}

/* —— Stacked variant: centered header · horizontal card row · wide form ——— */
.svc-overview-stacked { display: flex; flex-direction: column; align-items: center; text-align: center; }
.svc-overview-stacked .svc-overview-head { max-width: 720px; }
.svc-overview-stacked .eyebrow { justify-content: center; }
.svc-overview-stacked .svc-lead { margin-left: auto; margin-right: auto; }
.svc-overview-stacked .svc-help-modern { width: 100%; margin-top: clamp(32px,4vw,52px); text-align: left; }
.svc-overview-stacked .svc-help-modern h3 { text-align: center; margin-bottom: 22px; }
.svc-overview-stacked .svc-help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.svc-overview-stacked .svc-help-card { flex-direction: column; align-items: flex-start; gap: 14px; }
.svc-overview-stacked .svc-help-card:hover { transform: translateY(-5px); }
.svc-overview-stacked .form-wrap { position: static; width: 100%; max-width: 760px; margin-top: clamp(32px,4vw,52px); }
.svc-overview-stacked .qual-form { padding: clamp(28px,3vw,44px); }
@media (max-width: 860px) {
  .svc-overview-stacked .svc-help-cards { grid-template-columns: 1fr; }
}

/* —— "Qué hacemos" · título 1 línea · 2 cols (texto / checklist) · form 2 cols —— */
.svc-overview2 .eyebrow { color: #B5852B; }
.svc-title1 { color: var(--navy); font-size: clamp(26px,3.4vw,46px); margin-top: 4px; white-space: nowrap; }
.svc-top-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px);
  align-items: start; margin-top: clamp(26px,3vw,40px); }
.svc-intro-col .svc-lead { margin: 0; font-size: clamp(17px,1.9vw,20px); color: #46506A; line-height: 1.62; }
.svc-check-col h3 { font-family: var(--font); font-size: 13px; text-transform: uppercase; letter-spacing: .14em;
  color: #B5852B; margin-bottom: 16px; font-weight: 700; }
.svc-check-list { display: flex; flex-direction: column; gap: 12px; }
.svc-check-item { display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid rgba(11,18,38,.1); border-radius: var(--r);
  padding: 15px 18px; box-shadow: 0 10px 26px -18px rgba(11,18,38,.35);
  transition: transform .22s var(--ease-back), border-color .2s; }
.svc-check-item:hover { transform: translateX(4px); border-color: rgba(224,178,86,.5); }
.svc-check-item .ck { flex: none; width: 28px; height: 28px; border-radius: 8px; margin-top: 1px;
  background: linear-gradient(150deg, #F6DC9B, #C2922F); color: #1c1605; display: grid; place-items: center;
  box-shadow: 0 6px 14px -6px rgba(224,178,86,.7); }
.svc-check-item .ck svg { width: 15px; height: 15px; }
.svc-check-item p { margin: 0; font-size: 15.5px; color: var(--navy); font-weight: 600; line-height: 1.45; }

/* form: 2 columns — left text + ask list, right standout button */
.svc-overview2 .form-wrap { position: static; margin-top: clamp(30px,4vw,48px); }
.svc-form-split { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px,4vw,52px); align-items: center; }
.svc-form-left h3 { color: var(--navy); font-size: clamp(20px,2.2vw,26px); }
.svc-form-left .svc-form-sub { margin: 12px 0 20px; color: #46506A; font-size: 16px; line-height: 1.6; }
.svc-form-left .intake-ask { margin-bottom: 0; }
.svc-form-right { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.svc-form-right .btn { width: 100%; white-space: normal; line-height: 1.25; }
.svc-form-right .form-secure { margin-top: 0; }
@media (max-width: 860px) {
  .svc-title1 { white-space: normal; }
  .svc-top-split { grid-template-columns: 1fr; }
  .svc-form-split { grid-template-columns: 1fr; align-items: stretch; }
}

/* ============================== form ==================================== */
.form-wrap { position: sticky; top: 96px; }
.qual-form { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow); padding: 36px 34px; }
@keyframes form-nudge { 0%{transform:translateY(0);}18%{transform:translateY(-9px);}38%{transform:translateY(5px);}56%{transform:translateY(-4px);}74%{transform:translateY(2px);}100%{transform:translateY(0);} }
.qual-form.nudge { animation: form-nudge .7s var(--ease); box-shadow: 0 0 0 3px rgba(224,178,86,.35), var(--shadow); border-color: var(--electric); transition: box-shadow .3s, border-color .3s; }
@media (prefers-reduced-motion: reduce) { .qual-form.nudge { animation: none; } }
.qual-form .form-head h3 { font-size: 25px; font-weight: 700; color: var(--head); }
.qual-form .form-head p { margin: 12px 0 26px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--font); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--head); margin-bottom: 8px; }
.field .req { color: var(--electric); }
.field input, .field textarea, .field select { width: 100%; font-family: inherit; font-size: 15.5px; color: var(--head);
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: rgba(8,12,24,.5); transition: border-color .15s, box-shadow .15s; }
.field input::placeholder, .field textarea::placeholder { color: #6b7894; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--electric); box-shadow: 0 0 0 3px rgba(224,178,86,.18); }
.field.invalid input, .field.invalid textarea { border-color: #ff6b6b; background: rgba(255,107,107,.08); }
.field .err { color: #ff8f8f; font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.field select option { color: #0b1226; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 22px; }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--electric); }
.consent label { font-size: 13px; color: var(--muted); font-weight: 500; line-height: 1.5; }
.qual-form .btn { width: 100%; white-space: normal; line-height: 1.25; }
.form-secure { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 16px; display: flex; gap: 7px; justify-content: center; align-items: center; }
.form-success { text-align: center; padding: 28px 12px; }
.form-success .ok { width: 72px; height: 72px; border-radius: 50%; background: rgba(37,211,102,.16); color: #46e08a; display: grid; place-items: center; margin: 0 auto 24px; animation: pop .4s var(--ease-back); box-shadow: inset 0 0 0 1px rgba(37,211,102,.4); }
.form-success .ok svg { width: 38px; height: 38px; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.form-success h3 { font-size: 25px; font-weight: 700; color: var(--head); }
.form-success p { margin: 14px 0 24px; color: var(--muted); }
.intake-card { display: flex; flex-direction: column; }
.intake-card .btn { width: 100%; margin-bottom: 10px; }
.intake-ask { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin-bottom: 22px; }
.intake-ask-label { display: block; font-family: var(--font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.intake-ask ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.intake-ask li { display: flex; gap: 11px; align-items: center; font-size: 15px; font-weight: 600; color: var(--head); }
.intake-ask li .ck { flex: none; width: 22px; height: 22px; border-radius: 8px; background: rgba(224,178,86,.14); color: var(--electric); display: grid; place-items: center; }
.intake-ask li .ck svg { width: 13px; height: 13px; }
.intake-card .form-secure { margin-top: 6px; }
.spinner { width: 17px; height: 17px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 42px; }

/* ============================ reveal anim =============================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ============================ responsive ================================ */
@media (max-width: 980px) {
  .nav-links, .nav-book { display: none; }
  .nav-burger, .drawer-close { display: inline-flex; }
  .nav-right { gap: 12px; }
  .hero-split .hero-grid, .svc-hero-grid, .svc-body { grid-template-columns: minmax(0,1fr); }
  .hero-split .hero-grid { gap: 40px; }
  .hero-portrait { max-width: 420px; }
  .about-feature { min-height: 0; }
  .about-feature > .container { grid-template-columns: 1fr; gap: 28px; }
  .about-figure { order: -1; }
  .about-figure img { height: 56vw; max-height: 360px; }
  .services-grid { grid-template-columns: minmax(0,1fr); }
  .creds ul { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .form-wrap { position: static; margin-top: 8px; }
  .related-grid { grid-template-columns: minmax(0,1fr); }
  .cta-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .hero-image .hero-overlay { background: linear-gradient(180deg, rgba(8,12,24,.84), rgba(8,12,24,.96)); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .nav-inner { padding: 0 18px; gap: 10px; }
  /* Collision-proofing: the right-side controls (language toggle + menu
     button) never shrink; the brand lockup is the flexible element and
     truncates with an ellipsis in the impossible case a device is still too
     narrow — so overlapping is physically impossible on ANY screen. */
  .nav-inner .wordmark { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .nav-inner .wordmark-text { min-width: 0; overflow: hidden; }
  .nav-inner .wordmark-line1, .nav-inner .wordmark-line2 { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-inner .nav-right { flex: none; margin-left: auto; }
  .nav-inner .lang-toggle, .nav-inner .nav-burger { flex: none; }
  .wordmark { gap: 9px; }
  .wordmark-logo { height: 28px; }
  .wordmark-text { padding-left: 9px; }
  .wordmark-line1 { font-size: 8px; letter-spacing: .14em; }
  .wordmark-line2 { font-size: 16px; }
  /* Mobile top bar: compact brand lockup (small logo + name) on the left,
     then the language toggle and the menu button on the right.
     All sizes scale with viewport width (clamp) so the lockup can NEVER grow
     into the language toggle on narrow phones, while staying as large and
     readable as the row allows. */
  .nav-inner .wordmark { gap: 6px; min-width: 0; }
  .nav-inner .wordmark-logo { height: clamp(20px, 5.6vw, 24px); }
  .nav-inner .wordmark-text { display: flex; padding-left: 6px; gap: 1px; }
  .nav-inner .wordmark-line1 { font-size: clamp(6.5px, 2.1vw, 8px); letter-spacing: .08em; }
  /* Phone nav shows "David Square" (middle initial dropped) so the name fits
     at a readable size; the footer and desktop keep the full "David H Square". */
  .nav-inner .wm-mi { display: none; }
  .nav-inner .wordmark-line2 { font-size: clamp(15px, 5vw, 19px); white-space: nowrap; letter-spacing: -.015em; }
  /* Slim down the language toggle so the whole row fits on a phone. */
  .nav-inner .lang-toggle { padding: 2px 2px 2px 3px; font-size: 10px; gap: 0; }
  .nav-inner .lang-toggle .lang-globe { display: none; }
  .nav-inner .lang-toggle button { padding: 4px 5px; }
  .nav-right { gap: 9px; }
  .row-2 { grid-template-columns: 1fr; }
  .creds ul { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; padding: 56px 18px 38px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; padding: 20px 18px; }
  .hero-portrait .flag-motif { left: 0; bottom: -12px; }
  .footer-legal { white-space: normal; flex-wrap: wrap; gap: 12px 16px; }
  .hero-stats { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px 0; }
  .hero-stat { padding: 0 18px; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat strong { font-size: 27px; white-space: normal; }
  .hero-stat span { font-size: 10.5px; letter-spacing: .1em; }
  .hero-split .hero-grid { padding-block: 30px 34px; gap: 22px; }
  .hero-split h1, .hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .hero-split .hero-sub { margin: 16px 0 22px; font-size: 16px; line-height: 1.5; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 11px; }
  .hero-ctas .btn { width: 100%; padding: 14px 20px; }
  .hero-split .hero-stats { margin-top: 24px; padding-top: 20px; }
  .wa-float { right: 16px; bottom: 16px; }
}
@media (max-width: 380px) {
  .nav-inner { padding: 0 12px; }
  .nav-inner .wordmark { gap: 5px; }
  .nav-inner .wordmark-logo { height: clamp(18px, 5.2vw, 21px); }
  .nav-inner .wordmark-text { padding-left: 5px; }
  .nav-inner .wordmark-line2 { font-size: clamp(13.5px, 4.4vw, 16px); }
  .nav-inner .lang-toggle { padding: 2px 2px 2px 3px; }
  .nav-inner .lang-toggle button { padding: 4px 5px; }
  .nav-inner .lang-toggle .lang-globe { display: none; }
  .nav-right { gap: 7px; }
}