/* Magister Abogados — One page site
   Palette inspired by deep navy, coral and warm cream; accessible contrast. */
:root{
  --navy:#0f2a36;
  --navy-2:#1f3a47;
  --cream:#f4f2ee;
  --ink:#0c1a20;
  --coral:#f25c4c;
  --teal:#14b8a6;
  --gold:#caa85b;
  --muted:#87929a;
  --shadow: 0 8px 24px rgba(15,42,54,.18);
  --radius: 16px;
  --max: 1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#22323a;
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--cream);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--max);margin:auto;padding:0 20px}
.section{padding: clamp(48px, 8vw, 96px) 0}
h1,h2,h3{margin:0 0 .5em}
h1{font: 900 clamp(40px, 7vw, 72px) /1.02 "Bebas Neue", "Impact", system-ui, sans-serif; letter-spacing:.02em; color:var(--cream)}
h2{font: 800 clamp(26px, 4vw, 40px) /1.1 "Merriweather", Georgia, serif; color:var(--navy)}
h3{font: 700 clamp(18px, 3vw, 24px) /1.2 "Merriweather", Georgia, serif; color:var(--navy)}

.badge{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; background:#0f2a360f; border:1px solid #0f2a3630; border-radius:999px; color:var(--navy)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:999px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; border:0; cursor:pointer; transition:transform .05s ease, filter .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--coral); color:white; box-shadow: var(--shadow)}
.btn-outline{background:transparent; color:var(--cream); border:2px solid rgba(255,255,255,.7)}
.btn-dark{background:var(--navy); color:var(--cream)}
.btn-ghost{background:transparent; border:2px solid var(--navy); color:var(--navy)}

/* Header with centered banner logo */
.header{
  position:sticky; top:0; z-index:999;
  background:var(--navy);
  color:var(--cream);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 18px; font-size:14px; background:#0a1e28}
.topbar a{color:#e3e8eb}
.nav{
  display:flex; align-items:center; justify-content:center; gap:22px;
  padding: 14px 18px; position:relative;
}
.nav a{color:#dfe5e7; font-weight:600}
.nav .group{display:flex; gap:22px; align-items:center}
.brand{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  width:min(420px, 72vw); height:150px;
  pointer-events:none;
}
.brand img{width:100%; height:100%; object-fit:contain; pointer-events:auto}
.nav .cta{margin-left:auto}
.nav-toggle{display:none}

/* Hero */
.hero{
  position:relative; min-height: clamp(560px, 90vh, 760px);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(242,92,76,.35), transparent),
              linear-gradient(180deg, #112c39 0%, #0f2a36 50%, #0f2a36 100%);
  color:var(--cream); overflow:hidden;
}

.hero::before{
  content:""; position:absolute; inset:0;
  background: url("../assets/mobile-fallback.svg") center/cover no-repeat;
  opacity:.18; pointer-events:none;
}
.hero-media{
  position:absolute; inset:0; z-index:0; opacity:.72;
  mix-blend-mode:normal;
}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 35%}
.hero .container{position:relative; z-index:1; display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:end; height:100%}
.hero-copy{padding: 80px 0 40px}
.hero ul{list-style:none; padding:0; margin:18px 0 26px; display:grid; gap:12px}
.hero li{display:flex; align-items:center; gap:10px}
.hero li::before{content:"✦"; color:var(--coral); font-size:20px; line-height:1}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-card{
  background:#0f2a36ee; border:1px solid #ffffff1a; border-radius: var(--radius); padding:18px; margin-bottom:20px;
  color:#d9e2e6;
}
.hero-card h3{color:#fff; margin-bottom:8px}

@media (max-width: 960px){
  .nav .group{display:none}
  .nav-toggle{display:inline-flex; margin-left:8px; border:0; background:transparent; color:#dfe5e7; font-size:28px}
  .brand{position:relative; transform:none; left:auto; margin:0 auto; height:130px}
  .hero .container{grid-template-columns: 1fr; align-items:center}
  .hero-media{opacity:.25}
  .hero-copy{padding: 40px 0}
}

/* Sections */
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-4{grid-template-columns: repeat(4, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 960px){.grid-4,.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  background:white; border:1px solid #e8e3dc; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.card h3{margin-bottom:8px}
.muted{color:#5b6972}

/* “Resultados” style numbers */
.result{
  text-align:center; padding:28px; background:white; border:1px solid #e8e3dc; border-radius:18px; box-shadow:var(--shadow);
}
.result small{color:#f25c4c; font-weight:800; text-transform:uppercase; letter-spacing:.08em}
.result .money{font: 900 clamp(28px, 5vw, 44px) /1 "Bebas Neue", system-ui, sans-serif; letter-spacing:.02em; color:var(--navy)}
.result p{margin:10px 0 0; color:#2c3c44}

/* Fees tiles */
.fees{display:grid; grid-template-columns: repeat(4, 1fr); gap:18px}
@media (max-width: 960px){.fees{grid-template-columns:1fr 1fr}}
.fees .tile{background:#122b37; color:#dfe5e7; border-radius:14px; padding:18px; border:1px solid #ffffff22}
.fees .tile h4{margin:0 0 6px; color:#fff}
.fees .tile p{margin:0; color:#b2c1c9}

/* Testimonials carousel (CSS scroll-snap) */
.testis{display:flex; gap:18px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.testis .t{flex:0 0 80%; scroll-snap-align:center; background:white; border:1px solid #e8e3dc; border-radius:16px; padding:18px; box-shadow:var(--shadow)}
@media (min-width: 900px){.testis .t{flex-basis:32%}}

/* Footer */
.footer{
  background: #0a1e28; color:#d1dbe0; padding-top:48px;
}
.footer a{color:#e9eff2}
.footer .cols{display:grid; gap:22px; grid-template-columns: 2fr 1fr 1fr}
@media (max-width: 900px){.footer .cols{grid-template-columns: 1fr 1fr}}
@media (max-width: 640px){.footer .cols{grid-template-columns:1fr}}
.copy{background:#07151d; padding:16px; text-align:center; font-size:14px; color:#8fa4af}

/* Sticky phone button for mobile */
.call-fab{
  position:fixed; right:14px; bottom:14px; z-index:888;
  background:var(--coral); color:white; border-radius:999px; padding:12px 16px; box-shadow:var(--shadow);
  display:none; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
@media (max-width: 820px){.call-fab{display:inline-flex}}

/* Utility */
.kpis{display:flex; gap:18px; flex-wrap:wrap}
.kpi{background:white; border:1px solid #e8e3dc; padding:12px 18px; border-radius:12px; font-weight:700}
.hr{height:1px;background:linear-gradient(90deg, transparent, #d9d4cc, transparent); margin:28px 0}
.small{font-size:14px}