/* ============================================================
   Clínica de Fisioterapia Rafael Atencia — Sistema de diseño
   Rediseño 2026 · DonDigital
   Paleta clínica refinada (teal de marca, profundizado y armonizado)
   ============================================================ */
:root{
  /* — Neutros cálidos (blanco arena suavísimo, estilo Sandstone) — */
  --ink:        #1b1813;   /* near-black cálido */
  --ink-soft:   #3a352d;
  --muted:      #6b6358;   /* gris cálido */
  --muted-2:    #9a9183;
  --line:       #e8e2d6;
  --line-2:     #ded5c5;
  --bg:         #ffffff;
  --paper:      #faf7f1;   /* fondo de página, cálido sutil */
  --sand:       #f4ede1;   /* sección cálida */
  --sand-2:     #ece2d1;
  --bg-soft:    #f6f1e8;   /* off-white cálido */
  --bg-soft-2:  #efe7da;

  /* — Teal de marca (refinado) — */
  --teal-50:    #e8f3f1;
  --teal-100:   #cfe7e3;
  --teal-200:   #a8d3cd;
  --teal-300:   #6fb3ab;
  --teal-400:   #3f968d;
  --teal-500:   #1f7d74;   /* primario */
  --teal-600:   #166a62;
  --teal-700:   #0f534d;
  --teal-800:   #0c413c;
  --teal-900:   #0a322f;   /* secciones oscuras */

  /* — Acentos armónicos (misma L/C, hue variado) en oklch — */
  --accent-sand:  oklch(0.86 0.045 75);   /* arena cálida, humaniza */
  --accent-sand-soft: oklch(0.94 0.025 80);
  --accent-clay:  oklch(0.70 0.09 45);    /* terracota suave */
  --whatsapp:     #1fae54;
  --star:         #f2b705;

  /* — Tipografía — */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-display: "Hanken Grotesk", sans-serif;

  /* — Radios — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* — Sombras (finas, cálidas) — */
  --sh-sm: 0 1px 2px rgba(40,33,22,.05), 0 2px 8px rgba(40,33,22,.04);
  --sh-md: 0 4px 14px rgba(40,33,22,.07), 0 2px 6px rgba(40,33,22,.04);
  --sh-lg: 0 18px 50px -12px rgba(40,33,22,.16), 0 6px 18px rgba(40,33,22,.06);
  --sh-teal: 0 14px 34px -10px rgba(31,125,116,.4);

  /* — Layout (base 1920, secciones full-width, padding lateral 2%) — */
  --maxw: none;
  --gutter: max(16px, 2vw);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-size:18px; line-height:1.6;
  font-weight:400; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:800;
  line-height:1.04; letter-spacing:-0.025em; text-wrap:balance; color:var(--ink); }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--teal-200); color:var(--teal-900); }

/* — Contenedor — */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container-wide{ max-width:none; }

/* — Eyebrow — */
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-600); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow--serif{ font-family:var(--font-serif); font-style:italic; font-weight:500;
  text-transform:none; letter-spacing:0; font-size:19px; }

/* — Botones — */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; white-space:nowrap;
  font-weight:700; font-size:16px; line-height:1; padding:16px 26px; border-radius:var(--r-pill);
  border:1.5px solid transparent; transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s; }
.btn svg{ width:19px; height:19px; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--teal-500); color:#fff; box-shadow:var(--sh-teal); }
.btn--primary:hover{ background:var(--teal-600); transform:translateY(-2px); }
.btn--wa{ background:var(--whatsapp); color:#fff; box-shadow:0 14px 30px -10px rgba(31,174,84,.5); }
.btn--wa:hover{ filter:brightness(1.04); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--teal-400); color:var(--teal-700); background:var(--teal-50); }
.btn--light{ background:#fff; color:var(--teal-700); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--sh-lg); }
.btn--lg{ padding:19px 32px; font-size:17px; }

/* — Estrellas Google — */
.stars{ display:inline-flex; gap:2px; color:var(--star); }
.stars svg{ width:18px; height:18px; }

/* — Reveal on scroll — */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.shown{ opacity:1 !important; transform:none !important; transition:none !important; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }

/* — Imagen placeholder (cuando no hay foto real) — */
.ph{ position:relative; background:
    repeating-linear-gradient(135deg, var(--bg-soft) 0 12px, var(--bg-soft-2) 12px 24px);
  display:grid; place-items:center; color:var(--muted-2);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:12px; letter-spacing:.04em; text-align:center; }

.fade-edges{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }