/* ── Base ── */
body{
  font-family:var(--ff-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink);
  background:var(--white);
}

h1,h2,h3,h4,h5,h6{font-family:var(--ff-serif);line-height:var(--lh-tight);font-weight:600;color:var(--navy-950)}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
h5{font-size:var(--fs-md)}
p{max-width:65ch}
a{color:var(--sea-700);transition:color var(--t-fast)}
a:hover{color:var(--coral-600)}
strong{font-weight:700;color:var(--navy-950)}
small{font-size:var(--fs-sm)}
blockquote{border-left:3px solid var(--coral-600);padding-left:var(--sp-6);font-style:italic;color:var(--muted)}
hr{border:none;border-top:1px solid var(--sand-200);margin:var(--sp-8) 0}

/* Container */
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--sp-6)}
.container--narrow{max-width:var(--container-sm)}
.container--wide{max-width:var(--container-2xl)}
@media(min-width:768px){.container{padding:0 var(--sp-8)}}

/* Sections */
.section{padding:var(--sp-16) 0}
.section--sm{padding:var(--sp-10) 0}
.section--lg{padding:var(--sp-24) 0}
.section--bone{background:var(--bone-100)}
.section--navy{background:var(--navy-950);color:var(--bone-100)}
.section--navy h2,.section--navy h3,.section--navy h4{color:var(--white)}
.section--sand{background:var(--sand-200)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:.75rem 1.5rem;font-weight:600;font-size:var(--fs-base);border-radius:var(--r-md);transition:all var(--t-fast);white-space:nowrap;text-align:center;line-height:1.3}
.btn--primary{background:var(--coral-600);color:#fff}
.btn--primary:hover{background:var(--coral-700);color:#fff}
.btn--secondary{background:var(--navy-950);color:#fff}
.btn--secondary:hover{background:var(--navy-900);color:#fff}
.btn--outline{border:2px solid var(--navy-950);color:var(--navy-950);background:transparent}
.btn--outline:hover{background:var(--navy-950);color:#fff}
.btn--ghost{color:var(--navy-950);background:transparent}
.btn--ghost:hover{background:var(--bone-100)}
.btn--whatsapp{background:#25D366;color:#fff;font-weight:600}
.btn--whatsapp:hover{background:#1fb855;color:#fff}
.btn--sm{padding:.5rem 1rem;font-size:var(--fs-sm)}
.btn--lg{padding:1rem 2rem;font-size:var(--fs-md)}
.btn--block{width:100%}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Breadcrumbs */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);padding:var(--sp-4) 0}
.breadcrumb a{color:var(--sea-700)}
.breadcrumb a:hover{color:var(--coral-600)}
.breadcrumb__sep{color:var(--sand-200)}
.breadcrumb__current{color:var(--ink);font-weight:500}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:var(--fs-xs);font-weight:600;border-radius:var(--r-full);letter-spacing:.02em}
.badge--coral{background:rgba(217,101,67,.12);color:var(--coral-700)}
.badge--sea{background:rgba(40,103,122,.12);color:var(--sea-700)}
.badge--navy{background:rgba(10,27,39,.1);color:var(--navy-950)}
.badge--success{background:rgba(38,122,90,.12);color:var(--success)}
.badge--warning{background:rgba(165,106,23,.12);color:var(--warning)}
.badge--danger{background:rgba(179,58,58,.12);color:var(--danger)}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.text-coral{color:var(--coral-600)}
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}
.grid{display:grid;gap:var(--sp-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:767px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
@media(min-width:768px) and (max-width:1023px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
.flex{display:flex}.flex--col{flex-direction:column}.flex--wrap{flex-wrap:wrap}.flex--center{align-items:center;justify-content:center}.flex--between{justify-content:space-between}.flex--gap-2{gap:var(--sp-2)}.flex--gap-4{gap:var(--sp-4)}.flex--gap-6{gap:var(--sp-6)}