/* Zhilian Abogados brand system: teal, mineral blue and warm brass. */
:root {
  --brand:#176B73;
  --brand-dark:#0D4F58;
  --brand-deep:#082F36;
  --brand-soft:#E7F3F1;
  --accent:#D2A85A;
  --accent-soft:#F7EEDC;
  --ink:#102A2F;
  --copy:#5F7074;
  --page:#FDFEFE;
  --section:#F2F7F6;
  --line:#DCE7E5;
  --wine:var(--brand);
  --gold:var(--accent);
}

html,body { overflow-x:clip; }
body { background:var(--page); color:var(--ink); }
::selection { color:#FFF; background:var(--brand); }

.brand-network { color:var(--brand); filter:drop-shadow(0 5px 9px rgba(23,107,115,.18)); }
.site-header { border-color:var(--line); background:rgba(253,254,254,.96); }
.site-header > .language-mobile { display:none; }
.site-header .brand-wordmark b { color:var(--ink); letter-spacing:-.055em; }
.site-header .brand-wordmark em { color:#557379; letter-spacing:.075em; }
.site-header nav > a:not(.nav-contact) { color:#304C51; }
.site-header .language { color:#244449; border-color:#D4E3E1; background:#FFF; }
.site-header .nav-contact { color:#FFF; background:var(--brand); box-shadow:0 9px 20px rgba(23,107,115,.22); }
.menu-button span { background:var(--ink); }

.hero {
  background-color:#F8FBFA;
  background-image:linear-gradient(rgba(23,107,115,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,107,115,.055) 1px,transparent 1px);
}
.hero .eyebrow,.hero h1 strong { color:var(--brand); }
.hero .eyebrow span { background:var(--accent); }
.hero h1 { color:var(--ink); }
.hero .lede { color:var(--copy); }
.hero-actions .button-primary,.contact-form .button { color:#FFF; background:var(--brand); box-shadow:0 12px 22px rgba(23,107,115,.24); }
.hero-actions .button-secondary { color:var(--brand-dark); border-color:#BED3D0; background:rgba(255,255,255,.88); }
.hero-meta .rating { color:var(--accent); }
.hero-image {
  background-image:url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1400&q=88');
  background-position:center;
  box-shadow:0 26px 54px rgba(8,47,54,.16);
}
.place-icon { background:var(--accent); }
.hero-experience { color:var(--brand); }

.about-image {
  background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1400&q=88');
  background-position:center;
  box-shadow:0 22px 44px rgba(8,47,54,.12);
}
.about-float { color:var(--brand); border:1px solid rgba(23,107,115,.08); }
.about-copy .eyebrow,.services .eyebrow,.contact-heading .eyebrow { color:var(--brand); }
.about h2,.services h2,.contact h2,.contact-copy h3 { color:var(--ink); }
.section-rule { background:var(--accent); }
.about-copy>p:not(.eyebrow) { color:var(--copy); }
.about li:before { color:var(--brand); background:var(--brand-soft); }

.services { background:var(--section); }
.service-card { border-color:#E2ECEA; box-shadow:0 9px 24px rgba(8,47,54,.055); }
.service-media:after { background:linear-gradient(180deg,transparent 42%,rgba(8,47,54,.27)); }
.service-icon {
  width:46px;
  height:46px;
  color:var(--brand);
  border:1px solid rgba(23,107,115,.12);
  background:#FFF;
  box-shadow:0 8px 18px rgba(8,47,54,.13);
}
.service-icon svg { width:28px; height:28px; overflow:visible; }
.service-icon .icon-primary { fill:currentColor; }
.service-icon .icon-accent { fill:var(--accent); }
.service-icon .icon-cutout { fill:var(--brand-soft); }
.service-card h3 { color:var(--ink); }
.service-card p { color:#627479; }
.service-card button { color:var(--brand); }

.metrics {
  background-image:linear-gradient(rgba(8,47,54,.91),rgba(8,47,54,.91)),url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=84');
}
.metrics-title p { color:#BCE0DC; }
.metric-values span { color:#C9E4E1; }
.metric-values b { text-shadow:0 5px 18px rgba(0,0,0,.18); }

.contact-copy { background:#F2F7F6; }
.contact-list b { color:var(--brand); }
.contact-list i { color:var(--brand); background:var(--brand-soft); }
.contact-social span { color:var(--brand-dark); border-color:#D8E5E3; }
.contact-form { box-shadow:0 16px 36px rgba(8,47,54,.10); }
.contact-form input:focus,.contact-form textarea:focus { outline:3px solid rgba(23,107,115,.12); border-color:var(--brand); }

footer { color:#D0DFE1; background:var(--brand-deep); }
footer .brand-network { color:#35A2A5; }
footer .brand-wordmark em,.footer-brand>p,.footer-column>a,.footer-column>div>a { color:#9FBCC0; }
.social-links a { color:#E8F2F2; background:#12424A; }
.footer-contact>a span { color:var(--accent); }
.footer-bottom { border-color:rgba(255,255,255,.11); }
.footer-bottom p,.footer-bottom>a { color:#87A8AD; }

.dialog-kicker,.dialog-title { color:var(--brand); }
.button:focus-visible,.language:focus-visible,.menu-button:focus-visible,.service-card:focus-within { outline:3px solid rgba(23,107,115,.28); outline-offset:3px; }

@media (hover:hover) and (pointer:fine) {
  .site-header nav>a:not(.nav-contact):hover,.language:hover { color:var(--brand); }
  .site-header .nav-contact:hover,.hero-actions .button-primary:hover,.contact-form .button:hover { color:#FFF; background:var(--brand-dark); box-shadow:0 15px 27px rgba(13,79,88,.28); }
  .hero-actions .button-secondary:hover { color:var(--brand); border-color:var(--brand); }
  .service-card:hover { border-color:#BFD9D5; box-shadow:0 22px 46px rgba(8,47,54,.13); }
  .service-card:hover .service-icon { color:#FFF; background:var(--brand); transform:translateY(-2px) rotate(-3deg); }
  .service-card:hover .service-icon .icon-cutout { fill:var(--brand); }
  .service-card:hover button { color:var(--brand-dark); }
  .contact-list a:hover,.footer-column>a:hover,.footer-column>div>a:hover,.footer-bottom>a:hover { color:#E5BE70; }
  .social-links a:hover { color:#FFF; background:var(--brand); }
}

.service-icon { transition:transform 360ms cubic-bezier(.22,1,.36,1),color 260ms ease,background 260ms ease; }
.reveal { opacity:0; transform:translate3d(0,34px,0); transition:opacity 720ms ease var(--reveal-delay,0ms),transform 820ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); }
.reveal.is-visible { opacity:1; transform:translate3d(0,0,0); }
.service-card.reveal.is-visible { transition:transform 360ms cubic-bezier(.22,1,.36,1),box-shadow 360ms cubic-bezier(.22,1,.36,1),border-color 260ms ease; }
.has-js .site-header,.has-js .hero-copy .eyebrow,.has-js .hero-copy h1,.has-js .hero-copy .lede,.has-js .hero-actions,.has-js .hero-meta,.has-js .hero-image { opacity:0; }
body.is-ready .site-header { animation:brandDrop 620ms cubic-bezier(.22,1,.36,1) both; }
body.is-ready .hero-copy .eyebrow { animation:brandRise 680ms 90ms cubic-bezier(.22,1,.36,1) both; }
body.is-ready .hero-copy h1 { animation:brandRise 780ms 170ms cubic-bezier(.22,1,.36,1) both; }
body.is-ready .hero-copy .lede { animation:brandRise 740ms 260ms cubic-bezier(.22,1,.36,1) both; }
body.is-ready .hero-actions { animation:brandRise 720ms 340ms cubic-bezier(.22,1,.36,1) both; }
body.is-ready .hero-meta { animation:brandRise 700ms 420ms cubic-bezier(.22,1,.36,1) both; }
body.is-ready .hero-image { animation:brandImageIn 920ms 190ms cubic-bezier(.16,1,.3,1) both; }
.hero-floating { animation:brandFloat 4.6s ease-in-out infinite; }
.hero-experience { animation-delay:-2.2s; }
@keyframes brandDrop { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:none} }
@keyframes brandRise { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes brandImageIn { from{opacity:0;transform:translateX(34px) scale(.97)} to{opacity:1;transform:none} }
@keyframes brandFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

@media (max-width:760px) {
  .site-header > .language-mobile { display:inline-flex; }
  .site-header nav { background:#FDFEFE; border-color:var(--line); }
  .site-header .language-mobile { color:var(--brand-dark); border-color:#D4E3E1; }
  .site-header nav .nav-contact,
  .site-header nav .nav-contact:hover { color:var(--brand); background:transparent; box-shadow:none; }
  .whatsapp-float { bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
  .hero-image { background-position:58% center; }
  .about-image { background-position:52% center; }
  .service-icon { width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce) {
  .has-js .site-header,.has-js .hero-copy .eyebrow,.has-js .hero-copy h1,.has-js .hero-copy .lede,.has-js .hero-actions,.has-js .hero-meta,.has-js .hero-image,.reveal { opacity:1; transform:none; animation:none !important; transition:none !important; }
  .hero-floating { animation:none; }
}