/* ============================================================
   MR Abogados — Servicios Jurídicos · La Paz, B.C.S.
   Design system: Dorado antiguo + carbón + marfil · EB Garamond + Lato
   Basado en identidad real del cliente: logo monograma "MR" blanco sobre
   fondo dorado/tan, wordmark serif con tracking amplio.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Lato:wght@300;400;700;900&display=swap');

:root{
  --font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

  --gold:#B9884B;
  --gold-dark:#9C6F38;
  --gold-light:#D4B37C;
  --gold-pale:#EFE3C8;
  --gold-glow: 0 8px 30px -8px rgba(185,136,75,0.55);

  --ink:#1B1712;
  --charcoal:#211D17;
  --charcoal-2:#2B261E;
  --taupe:#6B6152;
  --taupe-soft:#948B78;

  --cream:#FAF6EE;
  --cream-2:#F2EAD8;
  --ink-muted:#54493A;
  --ink-soft:#7A6F5D;
  --line:#E3D8BF;
  --line-dark:rgba(185,136,75,0.24);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--gold); color:#fff; }

h1,h2,h3,h4,.font-display{ font-family:var(--font-display); font-weight:600; }

.text-balance{ text-wrap:balance; }

/* Minimal Preflight-equivalent resets — the Tailwind Play CDN used to
   provide these; now that it's gone (static utilities only, see
   tw-utilities.css) they need to be explicit or default UA styles
   (underlined links, baseline gaps under images) leak through. */
a{ color:inherit; text-decoration:none; }
img, svg{ display:block; max-width:100%; }
button, input, textarea, select{ font:inherit; color:inherit; }
button{ font-family:inherit; }

/* ---------- layout helpers ---------- */
.container-px{ padding-left:1.25rem; padding-right:1.25rem; }
@media (min-width:768px){ .container-px{ padding-left:2.5rem; padding-right:2.5rem; } }

.section-eyebrow{
  font-family:var(--font-sans);
  font-size:0.76rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
}
.section-eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow-light{ color:var(--gold-light); }
.eyebrow-light::before{ background:var(--gold-light); }

/* ---------- gold rule divider ---------- */
.rule-strip{
  height:3px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent);
}

/* ---------- monogram lines motif (watermark) ---------- */
.mono-lines{
  position:absolute; inset:0;
  width:100%; height:100%;
  color:#fff;
  opacity:0.05;
  pointer-events:none;
}

/* ---------- header ---------- */
#site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:14px 16px 0;
  transition:padding .35s var(--ease);
}
@media (min-width:768px){ #site-header{ padding:18px 24px 0; } }

.header-bar{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:rgba(27,23,18,0.85);
  border:1px solid rgba(185,136,75,0.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:12px;
  padding:8px 12px;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
@media (min-width:768px){ .header-bar{ padding:9px 16px 9px 12px; } }

#site-header.is-scrolled .header-bar{
  background:rgba(27,23,18,0.97);
  box-shadow:0 12px 40px -16px rgba(0,0,0,0.55);
  border-color:rgba(185,136,75,0.5);
}

/* Native show/hide for the header's responsive pieces — written as plain
   CSS (not Tailwind's "hidden md:flex" utilities) so the correct layout
   applies on first paint. Tailwind's CDN runtime injects those utility
   classes via JS after parsing, so on a real phone there's a window where
   the desktop nav, mobile toggle and CTA button all render at once,
   overlapping — this rule removes that dependency entirely. */
.header-bar nav{ display:none !important; }
@media (min-width:768px){ .header-bar nav{ display:flex !important; align-items:center; gap:0.25rem; } }
.header-cta{ display:none !important; }
@media (min-width:640px){ .header-cta{ display:inline-flex !important; } }
@media (min-width:768px){ .menu-toggle{ display:none !important; } }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; cursor:pointer; }
.brand-mark{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:linear-gradient(155deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  box-shadow:0 4px 14px -4px rgba(185,136,75,0.6);
}
@media (min-width:768px){ .brand-mark{ width:42px; height:42px; } }
.brand-mark img{ width:72%; height:72%; object-fit:contain; display:block; }
.brand-word{ display:flex; flex-direction:column; line-height:1.15; }
.brand-word strong{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.04em;
  color:#F7F1E3;
}
.brand-word span{
  font-size:0.62rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:700;
}

.nav-link{
  font-family:var(--font-sans);
  font-size:0.83rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:#DCD3C0;
  text-decoration:none;
  padding:9px 12px;
  border-radius:7px;
  cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover{ color:#fff; background:rgba(255,255,255,0.08); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans);
  font-weight:700; font-size:0.85rem;
  letter-spacing:0.02em;
  padding:11px 20px;
  border-radius:7px;
  cursor:pointer;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#241C10;
  box-shadow:var(--gold-glow);
}
.btn-gold:hover{ background:linear-gradient(135deg, var(--gold), var(--gold-dark)); box-shadow:0 12px 34px -6px rgba(185,136,75,0.65); transform:translateY(-1px); color:#1A140B; }
.btn-ghost-dark{
  background:transparent;
  color:#F4EEDE;
  border-color:rgba(244,238,222,0.3);
}
.btn-ghost-dark:hover{ border-color:var(--gold-light); color:#fff; background:rgba(255,255,255,0.05); }
.btn-ink{
  background:var(--ink);
  color:#F4EEDE;
  border-color:var(--ink);
}
.btn-ink:hover{ background:#000; transform:translateY(-1px); }
.btn-lg{ padding:15px 28px; font-size:0.95rem; border-radius:9px; }

.btn-icon{ width:1.05em; height:1.05em; flex-shrink:0; }

/* mobile menu */
.menu-toggle{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  color:#F4EEDE;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(244,238,222,0.16);
  border-radius:8px;
  cursor:pointer;
}
#mobile-menu{
  position:fixed; inset:0; z-index:49;
  background:var(--ink);
  display:flex; flex-direction:column;
  padding:96px 28px 40px;
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
#mobile-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
#mobile-menu a.nav-link{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  color:#F4EEDE;
  padding:14px 4px;
  border-bottom:1px solid rgba(244,238,222,0.1);
  border-radius:0;
}
#mobile-menu a.nav-link:hover{ background:transparent; color:var(--gold-light); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  color:#fff;
  overflow:hidden;
  padding-top:150px;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(185,136,75,0.22), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--charcoal) 55%, var(--ink));
}
@media (min-width:768px){ .hero{ padding-top:186px; } }
.hero > *{ position:relative; z-index:1; }
/* Higher specificity than ".hero > *" above so this always wins regardless
   of source order — otherwise the equal-specificity rule flips this to
   position:relative, pulling the 640px watermark into document flow and
   pushing all hero text down by its full height (the exact "blank hero"
   bug this once caused in production). */
div.hero-bg{
  position:absolute !important;
  right:-6%; top:6%;
  width:680px; height:680px;
  color:var(--gold-light);
  pointer-events:none;
  z-index:0;
}
.hero-rings{ position:absolute; inset:0; width:100%; height:100%; opacity:0.14; }
.hero-mark{
  position:absolute; left:50%; top:53%;
  transform:translate(-50%,-50%);
  width:60%; height:auto;
  opacity:0.14;
  filter:drop-shadow(0 0 50px rgba(212,179,124,0.3));
}

.stat-strip{
  border-top:1px solid rgba(244,238,222,0.12);
  background:rgba(0,0,0,0.18);
}
.stat-item{ border-left:1px solid rgba(244,238,222,0.12); }
.stat-item:first-child{ border-left:none; }
.stat-num{ font-family:var(--font-display); color:var(--gold-light); font-size:clamp(1.7rem,3.4vw,2.3rem); font-weight:700; line-height:1; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(38px) scale(0.985); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 150ms); }

/* Hero content: pure-CSS entrance, never gated behind JS/IntersectionObserver
   timing (Tailwind CDN can delay script execution enough to leave the hero
   blank on first paint if it depended on the .reveal/is-visible JS toggle). */
@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
.hero-in{ opacity:0; animation:heroFadeUp .8s var(--ease) both; }

/* ---------- section chrome ---------- */
.section-dark{ background:var(--ink); color:#F4EEDE; }
.section-charcoal{ background:var(--charcoal); color:#F4EEDE; }
.section-paper{ background:var(--cream); }
.section-paper-2{ background:var(--cream-2); }

/* ---------- practice area cards ---------- */
.service-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--ink);
  border-radius:4px;
  padding:30px 26px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 50px -20px rgba(27,23,18,0.18);
  border-top-color:var(--gold);
}
.service-icon{
  width:48px; height:48px;
  border-radius:6px;
  background:var(--ink);
  color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.service-num{
  position:absolute; top:24px; right:26px;
  font-family:var(--font-display);
  font-size:0.86rem;
  color:var(--line);
  font-weight:700;
}
.service-list{ margin-top:14px; padding-left:0; list-style:none; }
.service-list li{
  position:relative;
  padding-left:15px;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-bottom:6px;
  line-height:1.4;
}
.service-list li::before{
  content:"";
  position:absolute; left:0; top:0.5em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold);
}

/* ---------- credential card (about) ---------- */
.credential-card{
  position:relative;
  background:linear-gradient(165deg, var(--charcoal-2), var(--ink));
  border:1px solid var(--line-dark);
  border-radius:10px;
  padding:44px 32px;
  overflow:hidden;
}
.credential-card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
}
.credential-bg{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-6deg);
  width:78%; max-width:none;
  opacity:0.05;
  pointer-events:none;
}
.credential-content{ position:relative; z-index:1; }
.credential-badge{
  width:84px; height:84px;
  border-radius:50%;
  margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  box-shadow:0 10px 30px -8px rgba(185,136,75,0.55);
}
.credential-badge svg{ width:50%; height:50%; }
.credential-tag{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.03em;
  padding:6px 12px;
  border-radius:100px;
  border:1px solid rgba(212,179,124,0.4);
  color:var(--gold-light);
  background:rgba(212,179,124,0.08);
}

.diff-row{
  border-top:1px solid rgba(244,238,222,0.12);
  border-left:2px solid transparent;
  padding-left:10px; margin-left:-12px;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.diff-row:last-child{ border-bottom:1px solid rgba(244,238,222,0.12); }
.diff-row:hover{
  background-color:rgba(212,179,124,0.06);
  border-left-color:var(--gold);
  padding-left:16px;
}
.diff-num{ font-family:var(--font-display); color:var(--gold-light); font-size:1.15rem; font-weight:700; display:inline-block; }
/* Neutralize the generic .reveal fade on this wrapper so only the rows
   themselves (below) animate — otherwise the two opacity curves would
   compound and blur the one-by-one timing. */
.diff-track{ opacity:1 !important; transform:none !important; transition:none !important; }
/* Each row slides in from the left, one at a time, then its number flashes
   gold — a clearly sequential reveal instead of the whole block fading
   together. */
@keyframes rowSlideIn{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:translateX(0); } }
.reveal .diff-row{ opacity:0; }
.reveal.is-visible .diff-row:nth-child(1){ animation:rowSlideIn .65s var(--ease) .05s both; }
.reveal.is-visible .diff-row:nth-child(2){ animation:rowSlideIn .65s var(--ease) .23s both; }
.reveal.is-visible .diff-row:nth-child(3){ animation:rowSlideIn .65s var(--ease) .41s both; }
.reveal.is-visible .diff-row:nth-child(4){ animation:rowSlideIn .65s var(--ease) .59s both; }
@keyframes numGlow{
  0%{ text-shadow:0 0 0 rgba(212,179,124,0); }
  50%{ text-shadow:0 0 8px rgba(212,179,124,0.7); }
  100%{ text-shadow:0 0 3px rgba(212,179,124,0.25); }
}
.reveal.is-visible .diff-row:nth-child(1) .diff-num{ animation:numGlow 1.2s var(--ease) .3s both; }
.reveal.is-visible .diff-row:nth-child(2) .diff-num{ animation:numGlow 1.2s var(--ease) .48s both; }
.reveal.is-visible .diff-row:nth-child(3) .diff-num{ animation:numGlow 1.2s var(--ease) .66s both; }
.reveal.is-visible .diff-row:nth-child(4) .diff-num{ animation:numGlow 1.2s var(--ease) .84s both; }

/* ---------- process ---------- */
.process-track{ opacity:1 !important; transform:none !important; transition:none !important; }
.process-line{
  position:absolute;
  left:23px; top:8px; bottom:8px;
  width:1px;
  background:linear-gradient(180deg,var(--gold),var(--line) 90%);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1s var(--ease) .1s;
}
.process-track.is-visible .process-line{ transform:scaleY(1); }
@media (min-width:768px){ .process-line{ display:none; } }
.process-line-desktop{ display:none; }
@media (min-width:768px){
  .process-line-desktop{
    display:block;
    position:absolute;
    left:12.5%; right:12.5%; top:24px;
    height:2px;
    background:linear-gradient(90deg, var(--gold-dark), var(--gold-light) 50%, var(--gold-dark));
    box-shadow:0 0 12px rgba(212,179,124,0.5);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.2s var(--ease) .15s;
    z-index:0;
  }
  .process-track.is-visible .process-line-desktop{ transform:scaleX(1); }
}
/* A longer, more deliberate stagger than the site-wide default so the 4
   steps clearly reveal one at a time rather than nearly together. */
.process-stagger > *{ transition-delay:calc(var(--i,0) * 220ms); }

.process-dot{
  width:48px; height:48px;
  border-radius:4px;
  background:var(--ink);
  color:var(--gold-light);
  font-family:var(--font-display);
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  border:1px solid var(--line-dark);
  position:relative; z-index:1;
  transform:scale(0.6);
  opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
  transition-delay:calc(var(--i,0) * 220ms);
}
@keyframes dotGlow{
  0%{ box-shadow:0 0 0 rgba(212,179,124,0); }
  50%{ box-shadow:0 0 14px 1px rgba(212,179,124,0.55); }
  100%{ box-shadow:0 0 0 3px rgba(212,179,124,0.18); }
}
.reveal.is-visible .process-dot{
  opacity:1;
  transform:scale(1);
  border-color:var(--gold-light);
  animation:dotGlow 1.3s var(--ease) both;
  animation-delay:calc(var(--i,0) * 220ms);
}

/* ---------- testimonials ---------- */
.quote-card{
  background:var(--charcoal);
  border:1px solid rgba(244,238,222,0.1);
  border-radius:4px;
  padding:30px;
  color:#EAE3D3;
}
.quote-mark{ font-family:var(--font-display); color:var(--gold-light); font-size:3rem; line-height:0.5; display:block; margin-bottom:14px; font-style:italic; }
.quote-attr{ font-size:0.82rem; color:var(--gold-light); font-weight:700; letter-spacing:0.02em; }
.quote-attr-role{ font-size:0.78rem; color:#B0A691; }

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;
  background:var(--ink);
  color:#fff;
  overflow:hidden;
}
.cta-banner .mono-lines{ color:#fff; opacity:0.06; }

/* ---------- contact ---------- */
.field-label{ font-family:var(--font-sans); font-size:0.76rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-light); margin-bottom:8px; display:block; }
.field-input{
  width:100%;
  background:rgba(244,238,222,0.05);
  border:1px solid rgba(244,238,222,0.18);
  border-radius:6px;
  padding:13px 15px;
  color:#F4EEDE;
  font-family:var(--font-sans);
  font-size:0.95rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field-input::placeholder{ color:rgba(244,238,222,0.35); }
.field-input:focus{ outline:none; border-color:var(--gold-light); background:rgba(244,238,222,0.08); }
textarea.field-input{ resize:vertical; min-height:110px; }
select.field-input{ cursor:pointer; }
select.field-input option{ color:#0f172a; }

.contact-icon{
  width:44px; height:44px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:rgba(185,136,75,0.16); color:var(--gold-light);
}

.social-icon{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,238,222,0.22);
  color:#DCD3C0;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.social-icon:hover{ border-color:var(--gold-light); color:var(--gold-light); background:rgba(185,136,75,0.1); }
.social-icon svg{ width:16px; height:16px; }

/* ---------- floating whatsapp ---------- */
#wa-float{
  position:fixed;
  bottom:22px; right:22px;
  z-index:45;
  width:58px; height:58px;
  border-radius:50%;
  background:#1fae5a;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.5);
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
#wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 34px -8px rgba(0,0,0,0.55); }
#wa-float svg{ width:28px; height:28px; }

/* ---------- footer ---------- */
footer{ background:#0F0C08; color:#948B78; }
.footer-link{ color:#C9BFA8; text-decoration:none; font-size:0.9rem; transition:color .2s; }
.footer-link:hover{ color:var(--gold-light); }

/* ---------- focus states (a11y) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:6px;
}

/* toast */
#form-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#F4EEDE; border:1px solid var(--line-dark);
  padding:14px 22px; border-radius:8px; font-size:0.9rem; font-weight:600;
  box-shadow:0 20px 40px -12px rgba(0,0,0,0.55);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  z-index:60; display:flex; align-items:center; gap:10px;
}
#form-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }