/* ===================================================================
   Daniel 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, #equipo, #servicios, #metodo, #sobre-nosotros, #sede, #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;}}

/* ---------- Team (3D flip cards, below hero) ----------
   The flip itself lives on .flip-card-inner, never on .flip-card — the
   outer element carries [data-reveal] for the scroll-in fade/rise, and the
   generic ".reveal-ready [data-reveal]...is-visible{transform:none}" rule
   further down would silently cancel any transform placed on that same
   element (a real bug hit — and fixed the same way — in the previous
   version of this section). Keeping the rotateY on an un-reveal'd child
   sidesteps the specificity fight entirely instead of re-fighting it.
   Real hover flips it; touch has no reliable hover, so script.js toggles
   .is-active on tap; keyboard uses :focus-within via tabindex="0". Each
   card also flips on its own every few seconds (script.js adds .is-auto)
   so the interaction is discoverable without anyone having to hover or
   tap first — same transform, just a different trigger class. */
.team-flip{padding:96px 0 100px;background:var(--cream);}
.team-flip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:960px;margin:0 auto;
}
.flip-card{aspect-ratio:9/16;perspective:1600px;cursor:pointer;border-radius:var(--radius);}
.flip-card:focus-visible{outline:2px solid var(--gold-500);outline-offset:4px;}
.flip-card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.77,0,.175,1);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
@media (hover:hover) and (pointer:fine){
  .flip-card:hover .flip-card-inner{transform:rotateY(180deg);}
}
.flip-card:focus-within .flip-card-inner,
.flip-card.is-active .flip-card-inner,
.flip-card.is-auto .flip-card-inner{transform:rotateY(180deg);}

.flip-card-front, .flip-card-back{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--border);
}
.flip-card-front img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;}
.flip-card-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,14,32,0) 52%, rgba(5,14,32,.88) 100%);
}
.flip-card-front-info{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;}
.flip-card-front-info h3{color:#fff;font-size:1.15rem;margin:0 0 3px;}
.flip-card-front-info span{
  font-family:var(--mono);color:var(--gold-400);text-transform:uppercase;
  letter-spacing:.06em;font-size:.74rem;font-weight:600;
}

.flip-card-back{
  transform:rotateY(180deg);
  background:linear-gradient(160deg, var(--navy-900), var(--navy-950));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:30px 24px;text-align:center;
}
.flip-back-kicker{
  font-family:var(--mono);color:var(--gold-400);text-transform:uppercase;
  letter-spacing:.06em;font-size:.74rem;font-weight:600;
}
.flip-card-back h3{color:#fff;font-size:1.3rem;margin:0;}
.flip-card-back p{color:rgba(255,255,255,.85);font-size:.88rem;line-height:1.55;margin:0;}

@media (max-width:760px){
  .team-flip{padding:72px 0 76px;}
  .team-flip-grid{grid-template-columns:1fr;max-width:340px;gap: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);
}

/* ---------- Nuestra sede (carrusel a sangre) ----------
   La franja ocupa todo el ancho y una altura de tipo cine, como el hero, en
   vez de una caja centrada: la seccion entera ES la foto. El texto, los
   controles y la barra de avance van superpuestos.

   El scroll horizontal real lo sigue haciendo el navegador (overflow-x +
   scroll-snap) y no un track movido por JS: asi el gesto tactil, la rueda y
   el teclado funcionan solos, y sin JS las cuatro fotos siguen alcanzables.
   Las flechas y las miniaturas son un extra encima, no el unico camino. */
.sede{background:var(--navy-950);}
.sede-stage{position:relative;height:clamp(500px,74vh,780px);overflow:hidden;isolation:isolate;}

.sede-viewport{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  /* La barra se oculta porque las flechas y las miniaturas ya dicen que esto
     se desplaza; el scroll en si sigue funcionando igual. */
  scrollbar-width:none;-ms-overflow-style:none;
}
.sede-viewport::-webkit-scrollbar{display:none;}
.sede-viewport:focus-visible{outline:2px solid var(--gold-500);outline-offset:-4px;}
.sede-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;overflow:hidden;}
.sede-slide img{width:100%;height:100%;object-fit:cover;}
/* Mismo Ken Burns que ya usan el hero y la franja de la frase, pero solo en
   la foto activa y sin repetir: entra con vida y se queda quieta. */
.sede-slide.is-current img{animation:heroKenBurns 11s ease-out forwards;}

/* Doble degradado: uno lateral para que el texto de la izquierda se lea sobre
   cualquier foto, y otro inferior para los controles. */
.sede-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,14,32,.97) 0%, rgba(5,14,32,.93) 28%, rgba(5,14,32,.66) 52%, rgba(5,14,32,.22) 78%, rgba(5,14,32,.06) 100%),
    linear-gradient(180deg, rgba(5,14,32,.5) 0%, rgba(5,14,32,.08) 26%, rgba(5,14,32,.72) 100%);
}

/* La capa de texto no intercepta el gesto: solo sus hijos interactivos
   vuelven a activar pointer-events, para que se pueda seguir deslizando la
   foto con el dedo por encima del texto. */
.sede-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;}
.sede-overlay-inner{
  position:relative;height:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(56px,8vh,92px) 28px clamp(96px,13vh,132px);
  display:flex;flex-direction:column;justify-content:center;
}
.sede-copy{max-width:600px;}
.sede-copy .section-kicker{color:var(--gold-400);}
.sede-copy h2{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);margin-bottom:18px;text-shadow:0 4px 24px rgba(0,0,0,.45);}
.sede-copy p{color:rgba(255,255,255,.94);text-shadow:0 2px 14px rgba(0,0,0,.5);font-size:1.08rem;max-width:460px;margin:0;}

/* HUD inferior: numero + epigrafe a la izquierda, controles a la derecha. */
.sede-hud{
  position:absolute;left:28px;right:28px;bottom:clamp(26px,4.5vh,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.sede-meta{display:flex;flex-direction:column;gap:8px;min-width:0;}
.sede-count{font-family:var(--mono);font-size:.82rem;color:rgba(255,255,255,.55);letter-spacing:.08em;}
.sede-count b{color:var(--gold-400);font-size:1.5rem;font-weight:600;}
.sede-count i{font-style:normal;margin:0 6px;opacity:.5;}
/* Los cuatro epigrafes se apilan en el mismo hueco y solo se ve el actual:
   asi cada uno conserva su data-i18n y el cambio de idioma no se rompe. */
.sede-captions{position:relative;display:block;height:1.5em;}
.sede-caption{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);color:#fff;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.23,1,.32,1);
}
.sede-caption.is-current{opacity:1;transform:translateY(0);}

.sede-controls{display:flex;align-items:center;gap:16px;pointer-events:auto;}
.sede-arrows{display:flex;gap:8px;}
.sede-arrow{
  width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color .25s ease, border-color .25s ease;
}
.sede-arrow:hover{background:rgba(255,255,255,.2);border-color:var(--gold-400);}
.sede-arrow:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;}

.sede-thumbs{display:flex;gap:10px;}
.sede-thumb{
  width:92px;height:58px;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.25);background:none;opacity:.5;
  transition:opacity .3s ease, border-color .3s ease, transform .3s cubic-bezier(.23,1,.32,1);
}
.sede-thumb img{width:100%;height:100%;object-fit:cover;}
.sede-thumb:hover{opacity:.85;}
.sede-thumb.is-current{opacity:1;border-color:var(--gold-400);transform:translateY(-5px);}
.sede-thumb:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;}

/* Barra de avance del automatico: dice, sin texto, que esto se mueve solo y
   cuanto falta para la siguiente. Se anima con scaleX (no con width) para no
   disparar layout en cada fotograma. */
.sede-progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:rgba(255,255,255,.12);}
.sede-progress span{display:block;height:100%;background:var(--gold-400);transform:scaleX(0);transform-origin:left center;}
.sede-progress.is-running span{animation:sedeProgress 6s linear forwards;}
.sede-progress.is-paused span{animation-play-state:paused;}
@keyframes sedeProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}

@media (max-width:900px){
  .sede-thumbs{display:none;}
}
@media (max-width:760px){
  .sede-stage{height:clamp(440px,68vh,620px);}
  .sede-overlay-inner{padding:clamp(40px,7vh,64px) 20px clamp(88px,12vh,110px);}
  .sede-hud{left:20px;right:20px;}
  .sede-copy p{font-size:1rem;}
  .sede-arrow{width:40px;height:40px;}
}

/* El automatico no corre con reduced-motion (lo decide script.js), asi que la
   barra sobra; el Ken Burns tambien se apaga y queda la foto quieta. */
@media (prefers-reduced-motion: reduce){
  .sede-slide.is-current img{animation:none;}
  .sede-progress{display:none;}
  .sede-caption{transition:opacity .3s ease;transform:none;}
  .sede-caption.is-current{transform:none;}
  .sede-thumb.is-current{transform:none;}
}

/* ---------- 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;
  }
  /* A 3D rotateY is exactly the kind of spatial motion prefers-reduced-motion
     exists for. Rather than removing the interaction, it becomes a plain
     crossfade in place: the inner element stops rotating and the back face's
     own 180deg rotation (which would otherwise render it mirrored) is
     cancelled too, so front and back simply fade into and out of the same
     spot on hover/focus/tap. script.js never adds .is-auto when this media
     query matches (no ambient motion nobody asked for), but the override is
     listed anyway so the CSS holds even if that ever changes. */
  .flip-card-inner{transition:none;}
  .flip-card:hover .flip-card-inner,
  .flip-card:focus-within .flip-card-inner,
  .flip-card.is-active .flip-card-inner,
  .flip-card.is-auto .flip-card-inner{transform:none;}
  .flip-card-front, .flip-card-back{transition:opacity .25s ease;transform:none;}
  .flip-card-back{opacity:0;}
  .flip-card:hover .flip-card-front, .flip-card:focus-within .flip-card-front,
  .flip-card.is-active .flip-card-front, .flip-card.is-auto .flip-card-front{opacity:0;}
  .flip-card:hover .flip-card-back, .flip-card:focus-within .flip-card-back,
  .flip-card.is-active .flip-card-back, .flip-card.is-auto .flip-card-back{opacity:1;}
  .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 .flip-card: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 .flip-card: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);
}