/* ============================================================
   Clínica Dental Dra. Lidia Ferrandis — Design System
   Type: Hanken Grotesk · Palette: teal / ink / mint on cool white
   ============================================================ */


:root{
  /* palette */
  --ink:#0b1f42;            /* deep navy text */
  --ink-soft:#42577a;       /* secondary text */
  --teal:#0954cd;           /* primary (brand blue) */
  --teal-700:#0743a3;       /* hover / darker */
  --mint:#6f9bef;           /* light accent (on dark) */
  --mint-soft:#dde7fb;      /* tints */
  --sand:#f0ece3;           /* warm section tint */
  --bg:#f4f6fb;             /* page background (cool) */
  --surface:#ffffff;        /* cards */
  --surface-2:#eef2f9;      /* subtle panels */
  --line:rgba(11,31,66,.10);
  --line-strong:rgba(11,31,66,.16);
  --shadow-sm:0 1px 2px rgba(11,31,66,.05), 0 2px 8px rgba(11,31,66,.04);
  --shadow-md:0 8px 30px rgba(11,31,66,.09), 0 2px 8px rgba(11,31,66,.05);
  --shadow-lg:0 24px 60px rgba(11,31,66,.15);

  /* shape */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  /* layout */
  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);

  /* accent hook (overridable by Tweaks) */
  --accent:var(--teal);
  --accent-700:var(--teal-700);
  --accent-tint:var(--mint-soft);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- typography ---------- */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--ink-soft);line-height:1.55;text-wrap:pretty}
.section-title{font-size:clamp(30px,4.6vw,52px)}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
.section-pad{padding-block:clamp(64px,9vw,128px)}
.center{text-align:center}
.muted{color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:15px 26px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:16px;letter-spacing:-.01em;
  background:var(--bg);color:#fff;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:var(--shadow-sm);white-space:nowrap;
}
.btn:hover{background:var(--accent-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--surface);border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm)}
.btn--light{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn--light:hover{background:#fff;color:var(--accent)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- placeholder media ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--surface-2);
  background-image:repeating-linear-gradient(135deg,rgba(9,84,205,.07) 0 12px,transparent 12px 24px);
  border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;align-items:flex-end;color:var(--ink-soft);
}
.ph::after{
  content:attr(data-label);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;letter-spacing:.02em;
  margin:12px;padding:5px 10px;background:rgba(255,255,255,.82);border:1px solid var(--line);
  border-radius:999px;backdrop-filter:blur(4px);color:var(--ink-soft);
}
/* filled placeholders = real photos */
.ph.filled{background:var(--surface-2);background-image:none}
.ph.filled::after{display:none}
.ph.filled>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- reveal animation ---------- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){html.js .reveal,html.js .reveal.in{opacity:1;transform:none;transition:none}}