/* ===================================================================
   Felipe Martinez Migration Law — Hoja de estilos
   Palette: Navy (trust/authority) + Gold (accent) + Cream (warmth)
=================================================================== */

:root{
  --navy-950:#050e20;
  --navy-900:#0b1e42;
  --navy-800:#102a58;
  --navy-700:#17386e;
  --gold-500:#c2924e;
  --gold-400:#dcb47c;
  --gold-100:#f5ead6;
  --gold-700:#8a6224;
  --cream:#f8f6f1;
  --white:#ffffff;
  --ink:#1b2230;
  --ink-soft:#4a5164;
  --border:#e7e3d9;
  --shadow: 0 20px 40px -20px rgba(11,30,66,.25);
  --radius:14px;
  --maxw:1200px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
/* Safari/WebKit silently boosts font sizes on some phone widths ("text size
   adjust") to improve readability of non-responsive pages — but this page
   already sets its own responsive type scale, so that heuristic only makes
   text overflow. Locking it to 100% forces every size to render exactly as
   authored, on every device. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
/* The header is fixed and overlaps the top of the page, so a plain anchor
   jump lands each section's heading right underneath it. scroll-margin-top
   stops there instead, leaving the heading visible below the header —
   otherwise every nav link looks like it "landed in the wrong place". */
#inicio, #intro, #servicios, #metodo, #sobre-nosotros, #oficinas, #faq, #contacto{
  scroll-margin-top:90px;
}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
body.nav-open{overflow:hidden;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--navy-900);margin:0 0 .5em;line-height:1.15;}
p{margin:0 0 1em;color:var(--ink-soft);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Keyboard focus ----------
   Only the contact form had a visible focus state before this; every other
   control (nav links, buttons, cards, the FAQ accordion, the language
   toggle) relied on the browser default, which is faint-to-invisible on the
   navy sections. --gold-700 keeps a real 3:1+ ring against every background
   the site uses, light or dark, so focus is always visible without needing
   a second color per section. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold-700);outline-offset:3px;border-radius:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:.92rem;
  letter-spacing:.03em;text-transform:uppercase;border:2px solid transparent;
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn-primary{background:var(--navy-900);color:var(--white);}
.btn-primary:hover{background:var(--navy-800);}
.btn-gold{background:var(--gold-500);color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-400);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.6);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.full-width{width:100%;}

/* ---------- Seal (signature mark) ----------
   An engraved medallion — the dotted outer ring plus solid inner ring reads as
   an approval stamp/seal, the visual language of an immigration case moving
   from filed to approved. Reused everywhere a plain circle mark previously
   stood in for it (process steps, FAQ toggle, trust-bar stats), so the whole
   site shares one signature instead of scattering different motifs. */
.seal{position:relative;}
.seal::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px dotted rgba(194,146,78,.5);
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:200;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-400));
  transition:width .1s linear;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(5,14,32,.0);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:20px 0;
}
.site-header.scrolled{
  background:rgba(5,14,32,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.2);
  padding:12px 0;
  border-bottom:1px solid rgba(194,146,78,.15);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}

/* Logo */
.logo{display:flex;align-items:center;color:var(--gold-500);}
.logo-img{height:42px;width:auto;display:block;transition:height .35s ease;}
.site-header.scrolled .logo-img{height:34px;}
.logo-compact{display:none;}

.main-nav{display:flex;align-items:center;gap:28px;position:relative;}
.main-nav a{
  color:rgba(255,255,255,.88);font-size:.86rem;font-weight:500;letter-spacing:.02em;
  position:relative;padding:6px 0;transition:color .25s ease;
  /* Sin esto, etiquetas de dos palabras como "Areas de Practica" o
     "Preguntas Frecuentes" se parten en dos lineas en cuanto el ancho
     disponible se ajusta, y el header entero pasa a doble alto. */
  white-space:nowrap;
}
.main-nav a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold-500);
  transition:width .25s ease;
}
.main-nav a:hover::after{width:100%;}
.main-nav a.active{color:var(--gold-400);}
.nav-indicator{
  position:absolute;bottom:-2px;left:0;height:2px;width:0;background:var(--gold-500);
  transition:transform .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1), opacity .2s ease;
  opacity:0;pointer-events:none;
}
.nav-indicator.visible{opacity:1;}

.header-actions{display:flex;align-items:center;gap:16px;}
/* The button itself stays a bare, unstyled hit target — some browsers keep a
   native <button> background alive no matter what you tell it in CSS, even
   with appearance:none. All the visible styling (border, fill, radius) lives
   on the .lang-pill span inside it instead, which reliably takes a real
   background color, so the ES/EN state change is never at the mercy of that
   native-control quirk. */
.lang-toggle{
  appearance:none;-webkit-appearance:none;background:none;border:none;padding:0;
  color:#fff;flex:none;cursor:pointer;font:inherit;
}
.lang-pill{
  display:inline-block;white-space:nowrap;
  background:transparent;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;
  transition:background-color .25s ease, border-color .25s ease;
}
.lang-toggle:hover .lang-pill{border-color:var(--gold-400);}
.lang-toggle .lang-active{color:var(--gold-400);font-weight:600;transition:color .25s ease;}
.lang-toggle .lang-inactive{color:#fff;opacity:.55;transition:color .25s ease, opacity .25s ease;}
/* The pill's own background flips solid gold in English, not just the text —
   ES stays the quiet outlined default, EN becomes the site's accent color. */
html[lang="en"] .lang-pill{background:var(--gold-500);border-color:var(--gold-500);}
html[lang="en"] .lang-toggle .lang-active{color:var(--navy-950);}
html[lang="en"] .lang-toggle .lang-inactive{color:var(--navy-950);opacity:.5;}
.header-actions .btn-primary{background:var(--gold-500);color:var(--navy-950);padding:11px 22px;font-size:.78rem;}
.header-actions .btn-primary:hover{background:var(--gold-400);}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:10000;position:relative;}
.hamburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease, opacity .2s ease;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero (full-bleed sliding carousel) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;background:var(--navy-950);isolation:isolate;
}

/* Photo panel: covers 100% of the hero. Slides are stacked and cross-fade
   (JS in script.js), each photo doing its own slow zoom-out + pan while
   active — the same unhurried Ken Burns feel as hoyos.law's hero, instead
   of a hard slide/push between images. */
.hero-photo-panel{position:absolute;inset:0;overflow:hidden;background:var(--navy-950);}
.hero-slide{
  position:absolute;inset:0;opacity:0;z-index:1;
  transition:opacity 3.5s ease;
}
.hero-slide.is-active{opacity:1;z-index:2;}
.hero-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:saturate(.72) brightness(.68);
  animation:heroKenBurns 7s ease-out infinite;
}
@keyframes heroKenBurns{
  0%{transform:scale(1.26) translateX(6%);}
  100%{transform:scale(1.02) translateX(-6%);}
}
@media (prefers-reduced-motion: reduce){
  .hero-photo{animation:none;}
  .hero-slide{transition:opacity 1.2s ease;}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(5,10,20,.92) 0%, rgba(5,14,32,.72) 32%, rgba(5,10,20,.42) 58%, rgba(5,10,20,.6) 100%),
    linear-gradient(180deg, rgba(5,10,20,.2) 0%, rgba(5,10,20,.45) 48%, rgba(5,10,20,.72) 100%);
}

.hero-content{position:relative;z-index:2;max-width:900px;margin:0 auto;padding-top:96px;text-align:center;}
.eyebrow{
  font-family:var(--mono);color:var(--gold-400);text-transform:uppercase;letter-spacing:.08em;font-size:1.05rem;
  font-weight:600;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.eyebrow::before{content:'';display:inline-block;width:26px;height:1.5px;background:var(--gold-500);}
.hero h1{color:var(--white);font-size:clamp(2.4rem,5.2vw,4.1rem);margin-bottom:24px;text-shadow:0 4px 24px rgba(0,0,0,.5);}
.hero-subtitle{color:#fff;font-size:1.22rem;max-width:560px;margin:0 auto 36px;text-shadow:0 2px 16px rgba(0,0,0,.6);}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

.scroll-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;}
.scroll-cue span{
  display:block;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:20px;position:relative;
}
.scroll-cue span::before{
  content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;background:var(--gold-500);border-radius:2px;
  animation:scrollDown 1.6s infinite;
}
@keyframes scrollDown{0%{opacity:1;top:8px;}100%{opacity:0;top:22px;}}

/* ---------- Trust bar ---------- */
.trust-bar{background:var(--navy-900);padding:40px 0;}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(255,255,255,.7);font-size:.78rem;font-family:var(--mono);letter-spacing:.02em;}
.trust-num{
  font-family:var(--serif);color:var(--gold-500);font-weight:700;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  min-width:72px;height:72px;padding:0 8px;
  border:1.5px solid var(--gold-500);border-radius:50%;
}
.trust-num--wide{font-size:1rem;letter-spacing:.02em;}

/* ---------- Section shared ---------- */
.section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
.section-head.light h2, .section-head.light p{color:var(--white);}
/* --gold-500 reads at 6–10:1 on the site's dark navy sections, but only
   2.2–2.4:1 on white/cream — below the 3:1 floor WCAG requires even for
   bold, uppercase text. The darker --gold-700 is the default (most kickers
   sit on light backgrounds); the two dark-background contexts (the process
   section, the contact section) opt back into the brighter gold below,
   where it already had the contrast to spare. */
.section-kicker{
  display:inline-block;font-family:var(--mono);color:var(--gold-700);text-transform:uppercase;letter-spacing:.08em;
  font-size:.95rem;font-weight:600;margin-bottom:14px;
}
.section-head.light .section-kicker,
.contact .section-kicker{color:var(--gold-500);}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);}
.section-head p{font-size:1.05rem;}

/* ---------- Intro ---------- */
.intro{padding:100px 0;background:var(--cream);text-align:center;}
.intro-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;}
.intro-tag{display:flex;gap:14px;justify-content:center;}
.tag-line{width:2px;background:var(--gold-500);}
.intro-tag p{font-family:var(--serif);font-style:italic;color:var(--navy-800);font-size:1.05rem;}
.intro-copy h2{font-size:clamp(1.5rem,3vw,2.1rem);}
.intro-copy p{font-size:1.08rem;max-width:680px;margin-left:auto;margin-right:auto;}
.text-link{color:var(--navy-800);font-weight:600;border-bottom:2px solid var(--gold-500);padding-bottom:2px;}

/* ---------- Services (staggered, non-uniform rhythm) ---------- */
.services{padding:110px 0;}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-bottom:34px;}
.service-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:34px 26px;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-align:center;
}
.service-card:hover{box-shadow:var(--shadow);transform:translateY(-6px);border-color:var(--gold-400);}
.service-icon{
  width:56px;height:56px;border-radius:12px;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.service-icon svg{width:28px;height:28px;color:var(--gold-500);}
.service-card h3{font-size:1.15rem;margin-bottom:10px;}
.service-card p{font-size:.94rem;}
.card-link{color:var(--navy-800);font-weight:600;font-size:.88rem;}

/* ---------- Method / Process ---------- */
.method{
  padding:140px 0;background:var(--navy-950);position:relative;overflow:hidden;
  clip-path:polygon(0 46px, 100% 0, 100% calc(100% - 46px), 0 100%);
  margin:-46px 0;
}
.method-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.22;
}
.method::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,10,20,.88) 0%, rgba(5,14,32,.94) 60%, var(--navy-950) 100%);
}
.method::before{
  content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(194,146,78,.12), transparent 70%);
  z-index:1;
}
.method .container{position:relative;z-index:2;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;z-index:1;}
.step{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:30px 24px;text-align:center;
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1.5px solid var(--gold-500);color:var(--gold-500);
  font-family:var(--serif);font-weight:700;margin:0 auto 18px;
}
.step h3{color:var(--white);font-size:1.05rem;margin-bottom:8px;}
.step p{color:rgba(255,255,255,.68);font-size:.92rem;margin:0;}
.method-cta{
  margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;position:relative;z-index:1;
  text-align:center;
}
.method-cta p{color:var(--white);font-family:var(--serif);font-size:1.2rem;margin:0;max-width:480px;}

/* ---------- About ---------- */
.about{padding:110px 0;background:var(--cream);position:relative;overflow:hidden;}
/* Same seal motif as the process steps and trust-bar stats, scaled up into a
   faint watermark — the section that vouches for the firm's credibility gets
   the largest, quietest version of the mark. Positioned low and to the side
   (behind the founder card, not the heading) so it never crosses text; hidden
   below 900px, where there isn't enough width for it to clear the copy. */
.about::before{
  content:'';position:absolute;top:220px;right:-170px;width:420px;height:420px;
  border-radius:50%;border:1px dotted rgba(194,146,78,.35);pointer-events:none;
}
.about::after{
  content:'';position:absolute;top:260px;right:-130px;width:340px;height:340px;
  border-radius:50%;border:1.5px solid rgba(194,146,78,.18);pointer-events:none;
}
@media (max-width:900px){
  .about::before, .about::after{display:none;}
}
.about .container{position:relative;z-index:1;}
.about-lead{font-size:1.1rem;max-width:680px;text-align:center;margin-left:auto;margin-right:auto;}
.founder{
  display:grid;grid-template-columns:180px 1fr;gap:36px;align-items:center;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:36px;margin:46px 0 60px;
}
.founder-photo{width:180px;height:180px;border-radius:50%;overflow:hidden;border:3px solid var(--gold-500);flex:none;}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.founder-info h3{font-size:1.5rem;margin-bottom:4px;}
.founder-role{color:var(--gold-700);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.92rem;margin-bottom:14px;}
.founder-info p:not(.founder-role){text-align:justify;}

.mvv-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:60px;}
.mvv-card{background:var(--navy-900);border-radius:var(--radius);padding:34px;text-align:center;}
.mvv-card h3{color:var(--gold-500);font-size:1.2rem;}
.mvv-card p{color:rgba(255,255,255,.82);margin:0;}

.values h3{font-size:1.3rem;margin-bottom:30px;text-align:center;}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.value-item{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 24px;transition:border-color .25s ease, transform .25s ease;text-align:center;
}
.value-item:hover{border-color:var(--gold-400);transform:translateY(-4px);}
.value-item h4{margin:0 0 8px;font-size:1.05rem;}
.value-item p{font-size:.92rem;margin:0;}

/* ---------- Quote banner (rotating, same crossfade as the hero) ---------- */
.quote-banner{position:relative;width:100%;min-height:clamp(340px,38vw,520px);overflow:hidden;isolation:isolate;background:var(--navy-950);}
.quote-slides{position:absolute;inset:0;}
.quote-slide{position:absolute;inset:0;opacity:0;z-index:1;transition:opacity 3.5s ease;}
.quote-slide.is-active{opacity:1;z-index:2;}
.quote-photo{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:saturate(.85) brightness(.7);animation:heroKenBurns 9s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){.quote-photo{animation:none;}.quote-slide{transition:opacity 1.2s ease;}}
.quote-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,10,20,.35) 0%, rgba(5,10,20,.3) 45%, rgba(5,10,20,.65) 100%);
}
.quote-content{position:relative;z-index:3;min-height:clamp(340px,38vw,520px);display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 24px;}
.quote-text{
  font-family:var(--serif);font-style:italic;color:#fff;font-size:clamp(1.4rem,3.4vw,2.3rem);
  line-height:1.45;max-width:820px;margin:0;text-shadow:0 4px 26px rgba(0,0,0,.65);
}

/* ---------- Offices ---------- */
.offices{padding:110px 0;background:var(--white);}
.offices-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.office-card{
  padding:40px;border-radius:var(--radius);background:var(--cream);position:relative;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:center 30%;isolation:isolate;color:#fff;
  transition:transform .35s ease;
}
.office-card h3{font-size:2rem;margin-bottom:12px;color:#fff;}
.office-card p{margin:0;color:rgba(255,255,255,.9);font-size:1.05rem;max-width:360px;}
.office-card .section-kicker{color:var(--gold-400);}
.office-card::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius);z-index:-1;
  background:linear-gradient(180deg, rgba(5,14,32,.1) 0%, rgba(5,10,20,.28) 55%, rgba(5,10,20,.9) 100%);
}
.office-card::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius);z-index:-1;
  border:1px solid rgba(194,146,78,.3);
}
/* Offices was the one section with no trace of the seal motif that ties
   together the trust bar, process steps, FAQ and About watermark elsewhere
   on the site. A small stamped ring in the corner — "this location is the
   real thing" — closes that gap without adding a new decorative idea. */
.office-seal{
  position:absolute;top:24px;right:24px;width:34px;height:34px;
  border:1.5px solid rgba(255,255,255,.7);border-radius:50%;
}
.office-seal::before{border-color:rgba(255,255,255,.4);}
.office-fl{transform:translateY(-22px);}
.office-dc{transform:translateY(22px);}
.office-fl:hover{transform:translateY(-30px);}
.office-dc:hover{transform:translateY(14px);}

/* ---------- FAQ ---------- */
.faq{padding:110px 0;}
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:none;text-align:left;padding:24px 4px;cursor:pointer;
  font-family:var(--serif);font-size:1.08rem;color:var(--navy-900);font-weight:600;
}
.faq-icon{
  flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold-700);
  color:var(--gold-700);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;transition:transform .25s ease;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
/* max-height:220px was tight enough that a longer English translation, a
   larger system font, or extra browser zoom could clip an answer with no
   warning. 600px comfortably clears every current answer at any of those
   (this was measured directly), with enough headroom that a future answer
   would have to run to real paragraph length before it became a risk again. */
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 22px;margin:0;text-align:justify;}
.faq-item.open .faq-a{max-height:600px;}

/* ---------- Contact ---------- */
.contact{padding:110px 0;background:var(--navy-950);}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;}
.contact-info{text-align:center;}
.contact-info h2{color:var(--white);}
.contact-info p{color:rgba(255,255,255,.75);}
.contact-list{margin:30px 0;display:flex;flex-direction:column;align-items:center;gap:20px;}
.contact-list li{display:flex;flex-direction:column;align-items:center;gap:2px;}
.contact-label{font-family:var(--mono);color:var(--gold-500);font-size:.88rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.contact-list a, .contact-list span{color:#fff;font-size:1.05rem;}
.contact-list a:hover{color:var(--gold-400);}
.social-links{display:flex;flex-direction:column;align-items:center;gap:14px;}
.social-links a{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);}
.social-links a:hover{color:var(--gold-400);}

.contact-form{background:var(--white);border-radius:var(--radius);padding:38px;box-shadow:var(--shadow);}
.form-row{margin-bottom:18px;display:flex;flex-direction:column;gap:6px;}
.form-row label{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.03em;color:var(--navy-800);text-transform:uppercase;text-align:center;}
.form-row input, .form-row select, .form-row textarea{
  border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-family:var(--sans);
  font-size:.95rem;color:var(--ink);background:var(--cream);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--gold-400);outline-offset:1px;background:var(--white);
}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;text-align:center;}

.form-consent .consent-label{
  flex-direction:row;align-items:flex-start;gap:10px;text-align:left;
  font-family:var(--sans);font-size:.85rem;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--ink-soft);cursor:pointer;
}
.form-consent input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--gold-500);cursor:pointer;
}
.form-consent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--gold-400);outline-offset:2px;
}
.form-consent a{color:var(--navy-800);text-decoration:underline;}
.form-consent a:hover{color:var(--gold-500);}

/* ---------- Footer ---------- */
.site-footer{background:#050d1c;padding:70px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;}
.footer-brand{display:flex;flex-direction:column;align-items:center;}
.footer-logo-img{height:38px;width:auto;display:block;margin:0 auto;color:var(--gold-500);}
.footer-brand p{color:rgba(255,255,255,.6);margin-top:14px;font-size:.9rem;max-width:220px;}
.footer-col h4{font-family:var(--mono);font-weight:600;color:var(--gold-500);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.footer-col{display:flex;flex-direction:column;align-items:center;gap:10px;}
.footer-col a, .footer-col span{color:rgba(255,255,255,.68);font-size:.9rem;}
.footer-col a:hover{color:var(--gold-400);}
.footer-bottom{padding:24px 0;}
.footer-bottom p{color:rgba(255,255,255,.45);font-size:.82rem;margin:0;text-align:center;}

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width:1280px) and (min-width:1001px){
  .main-nav{gap:20px;}
  .main-nav a{font-size:.82rem;}
  .header-actions{gap:12px;}
  .header-actions .btn-primary{padding:11px 18px;}
}
@media (max-width: 1000px){
  .nav-indicator{display:none;}
  .hamburger{display:flex;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .mvv-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .offices-grid{grid-template-columns:1fr;gap:40px;}
  .office-fl, .office-dc{transform:none;}
  .office-fl:hover, .office-dc:hover{transform:translateY(-6px);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .intro-grid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}

  /* Mobile nav panel with cascading (staggered) link entrance. The Capitol
     photo is the same one the hero opens on — a fixed, deliberate background
     rather than whatever slide the hero carousel happened to be showing, so
     it looks identical every time the menu opens. The gradient on top is
     nearly opaque so it never fights with the link text for legibility. */
  .main-nav{
    display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(180deg, rgba(5,10,20,.88) 0%, rgba(5,10,20,.8) 55%, rgba(5,10,20,.94) 100%),
      url('https://images.unsplash.com/photo-1594581979864-36977b15d0dc?auto=format&fit=crop&w=1200&q=70');
    background-size:cover;background-position:center 25%;
    padding:110px 32px 40px;gap:22px;z-index:9999;
    transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.6,0,.2,1), visibility 0s linear .4s;
  }
  .main-nav.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.6,0,.2,1), visibility 0s linear 0s;}
  .main-nav a{font-size:1.25rem;padding:8px 0;opacity:0;transform:translateY(16px);transition:opacity .4s ease, transform .4s ease;}
  .main-nav.open a{opacity:1;transform:translateY(0);}
  .main-nav.open a:nth-of-type(1){transition-delay:.08s;}
  .main-nav.open a:nth-of-type(2){transition-delay:.14s;}
  .main-nav.open a:nth-of-type(3){transition-delay:.20s;}
  .main-nav.open a:nth-of-type(4){transition-delay:.26s;}
  .main-nav.open a:nth-of-type(5){transition-delay:.32s;}
  .main-nav.open a:nth-of-type(6){transition-delay:.38s;}
}

@media (max-width: 1000px){
  .hero{min-height:100vh;padding:120px 0 80px;}
  .hero-content{max-width:100%;padding-top:0;}
  .scroll-cue{display:none;}
  .method{clip-path:none;margin:0;padding:80px 0;}
  /* Every other section shared the same ~110px top+bottom padding, so two
     sections back to back added up to 220px+ of dead space — proportionally
     huge on a phone screen. Consistent, smaller padding on mobile everywhere. */
  .trust-bar{padding:32px 0;}
  .intro, .services, .about, .offices, .faq, .contact{padding:80px 0;}
}

@media (max-width: 640px){
  .service-grid, .steps, .values-grid, .footer-grid{grid-template-columns:1fr;}
  .founder{grid-template-columns:1fr;text-align:center;}
  .founder-photo{margin:0 auto;}
  .header-actions .btn-primary{display:none;}
  .header-inner{gap:12px;}
  .logo-full{display:none;}
  .logo-compact{display:block;height:38px;}
}

/* ---------- Floating WhatsApp button ----------
   --cookie-bar-offset is kept in sync by script.js with the cookie bar's
   real height while it's visible, so the button rises above it instead of
   being hidden underneath (the cookie bar has a higher z-index because it
   needs to sit on top of everything on first visit). It settles back to
   24px the moment the bar is dismissed. */
.whatsapp-float{
  position:fixed;right:24px;bottom:calc(24px + var(--cookie-bar-offset, 0px));z-index:500;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, bottom .3s ease;
}
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(0,0,0,.45);}
@media (max-width:640px){
  .whatsapp-float{right:16px;bottom:calc(16px + var(--cookie-bar-offset, 0px));width:52px;height:52px;}
}

/* ---------- Cookie consent bar ----------
   Sits below everything else (including the WhatsApp button's z-index:500)
   so it reads as the topmost, most urgent thing on first visit. Reuses the
   existing .btn-gold / .btn-outline pair instead of inventing new button
   styles — the bar already sits on the same navy-950 the hero uses, so the
   outline button's white-on-dark styling already has the contrast it needs. */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:700;
  background:var(--navy-950);border-top:1px solid rgba(194,146,78,.35);
  padding:22px 24px;box-shadow:0 -10px 30px rgba(0,0,0,.25);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.6,0,.2,1);
}
.cookie-bar.is-visible{transform:translateY(0);}
.cookie-bar-inner{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.cookie-bar p{margin:0;color:rgba(255,255,255,.82);font-size:.9rem;max-width:640px;}
.cookie-bar a{color:var(--gold-400);text-decoration:underline;text-underline-offset:2px;}
.cookie-bar a:hover{color:var(--gold-500);}
.cookie-actions{display:flex;gap:12px;flex:none;}
.cookie-actions .btn{padding:11px 24px;font-size:.76rem;}
@media (max-width:640px){
  .cookie-bar{padding:20px 18px;}
  .cookie-bar-inner{flex-direction:column;align-items:stretch;text-align:center;gap:18px;}
  .cookie-actions{justify-content:center;}
}

/* ---------- Reduced motion, the rest of it ----------
   The hero/quote carousels already stop their Ken Burns zoom and speed up
   their cross-fade. Everything else that moves on its own or on interaction
   — the bouncing scroll cue, the FAQ icon's rotate, the mobile menu's
   staggered link entrance, the hover-lift on cards — settles instantly here
   too, so "reduce motion" actually means all of the site, not just the hero. */
@media (prefers-reduced-motion: reduce){
  .scroll-cue span::before{animation:none;opacity:1;top:14px;}
  .faq-icon{transition:none;}
  .main-nav a{transition:none;}
  .main-nav.open a{transition-delay:0s !important;}
  /* Only the hover states lose their transform — office-fl/office-dc's own
     translateY is a permanent staggered layout, not an animation, and must
     stay untouched here. */
  .service-card:hover, .value-item:hover, .btn-gold:hover, .whatsapp-float:hover,
  .office-fl:hover, .office-dc:hover{
    transform:none;
  }
  .cookie-bar{transition:none;}
  /* Sin movimiento, el contenido simplemente ya esta ahi: nunca se queda
     invisible esperando un IntersectionObserver que no va a animar nada. */
  [data-reveal]{opacity:1;transform:none;transition:none;}
}


/* ---------- Revelado al hacer scroll ----------
   Lo unico que se le suma al lenguaje de movimiento del sitio: cada bloque
   entra una sola vez, con un desplazamiento corto (18px) y una curva de
   salida suave. Es deliberadamente discreto — el hero ya tiene el Ken Burns
   y la barra de progreso, asi que esto acompana la lectura en vez de
   competir con ella.

   La clase .reveal-ready la pone el JS: sin JS (o si algo falla antes de
   registrar el observer) el contenido nunca llega a ocultarse, que es el
   comportamiento correcto para un sitio cuyo contenido es el producto. */
.reveal-ready [data-reveal]:not(.office-card){
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal-ready [data-reveal]:not(.office-card).is-visible{opacity:1;transform:none;will-change:auto;}

/* Las tarjetas de oficina llevan un translateY permanente de maquetacion
   (el escalonado FL/DC, y su version en hover). Si el revelado tocara
   transform aqui, esa maquetacion se aplanaria al entrar en pantalla, asi
   que estas entran solo con opacidad y su transform queda intacto. */
.reveal-ready .office-card[data-reveal]{
  opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .35s ease;
}
.reveal-ready .office-card[data-reveal].is-visible{opacity:1;}

/* Escalonado dentro de una misma fila: las tarjetas de servicio, los pasos
   del proceso, los valores y las estadisticas entran una detras de otra en
   vez de todas de golpe. */
.reveal-ready .service-card:nth-child(2),
.reveal-ready .step:nth-child(2),
.reveal-ready .value-item:nth-child(2),
.reveal-ready .trust-item:nth-child(2){transition-delay:.08s;}
.reveal-ready .service-card:nth-child(3),
.reveal-ready .step:nth-child(3),
.reveal-ready .value-item:nth-child(3),
.reveal-ready .trust-item:nth-child(3){transition-delay:.16s;}
.reveal-ready .service-card:nth-child(4),
.reveal-ready .step:nth-child(4),
.reveal-ready .value-item:nth-child(4),
.reveal-ready .trust-item:nth-child(4){transition-delay:.24s;}
.reveal-ready .office-card:nth-child(2),
.reveal-ready .mvv-card:nth-child(2),
.reveal-ready .faq-item:nth-child(2){transition-delay:.06s;}
.reveal-ready .faq-item:nth-child(3){transition-delay:.12s;}
.reveal-ready .faq-item:nth-child(4){transition-delay:.18s;}
.reveal-ready .faq-item:nth-child(5){transition-delay:.24s;}

/* ---------- Aviso legal del pie ---------- */
.footer-disclaimer{
  max-width:720px;margin:10px auto 0;font-size:.74rem;line-height:1.5;
  color:rgba(255,255,255,.35);
}