/* =========================================================
   ClinicCard — theme tokens + base
   Rules: flat colour only (no gradients), single-stroke icons,
   green only on WhatsApp / primary action, no dot decoration.
========================================================= */
:root{
  /* colour */
  --page:      #F2F5FA;
  --paper:     #FFFFFF;
  --paper-2:   #F7F9FD;
  --navy:      #0A2A51;
  --navy-deep: #071D39;
  --navy-soft: #1C4E82;
  --ink:       #0C2244;
  --body:      #3B4B67;
  --muted:     #62728F;
  --line:      #E1E8F2;
  --line-2:    #EDF1F7;
  --cyan:      #06B6D4;
  --cyan-ink:  #06707F;
  --cyan-soft: #E1F6FB;
  --green:     #25D366;
  --green-ink: #063A1C;
  --green-coin:#0C6B33;
  --ok-soft:   #DFF6E7;

  /* type */
  --fd: 'Space Grotesk', system-ui, sans-serif;
  --fb: 'Inter', system-ui, sans-serif;

  --t-hero: clamp(42px, 6.4vw, 92px);
  --t-h2:   clamp(32px, 4.4vw, 60px);
  --t-h3:   clamp(20px, 1.9vw, 26px);
  --t-lead: clamp(16px, 1.35vw, 19px);
  --t-body: 16px;
  --t-sm:   14px;

  /* space + shape */
  --wrap: 1200px;
  --gut:  clamp(20px, 4vw, 40px);
  --sec:  clamp(88px, 12vw, 168px);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow-card: 0 30px 60px -36px rgba(10,42,81,.45);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--fb); font-size:var(--t-body); line-height:1.6;
  color:var(--body); background:var(--page);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

h1,h2,h3{ font-family:var(--fd); color:var(--ink); font-weight:700; letter-spacing:-.035em; line-height:1.02; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.15; font-weight:600; }
p{ max-width:62ch; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-family:var(--fd); font-weight:600; }
.skip:focus{ top:12px; }

/* ---------------------------------------------------------
   Buttons — tactile hard-shadow, inset icon coin
--------------------------------------------------------- */
.btn{
  --sh: var(--navy);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:56px; border-radius:16px; padding:0 22px;
  font-family:var(--fd); font-weight:600; font-size:16px; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:5px 5px 0 var(--sh);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--sh); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--sh); }

.btn-coin{
  order:2; width:44px; height:44px; border-radius:12px; margin-left:14px;
  display:flex; align-items:center; justify-content:center; flex:none;
  color:#fff; transition:transform .2s var(--ease);
}
.btn-coin svg{ width:20px; height:20px; fill:currentColor; }
.btn:hover .btn-coin{ transform:rotate(-10deg) scale(1.05); }
.btn:has(.btn-coin){ padding:0 6px 0 22px; }

.btn-wa{ background:var(--green); color:var(--green-ink); --sh:var(--navy); }
.btn-wa .btn-coin{ background:var(--green-coin); }

.btn-line{ background:var(--paper); color:var(--navy); border:2px solid var(--navy); --sh:var(--cyan); }

.btn-sm{ height:46px; font-size:14.5px; border-radius:13px; padding:0 16px; box-shadow:4px 4px 0 var(--sh); }
.btn-sm:has(.btn-coin){ padding:0 5px 0 16px; }
.btn-sm .btn-coin{ width:36px; height:36px; border-radius:10px; margin-left:10px; }
.btn-sm .btn-coin svg{ width:17px; height:17px; }

.btn-lg{ height:72px; font-size:clamp(17px,1.6vw,21px); border-radius:20px; padding:0 30px; box-shadow:7px 7px 0 var(--sh); }
.btn-lg:has(.btn-coin){ padding:0 7px 0 30px; }
.btn-lg .btn-coin{ width:58px; height:58px; border-radius:15px; margin-left:18px; }
.btn-lg .btn-coin svg{ width:26px; height:26px; }
.btn-lg:hover{ box-shadow:4px 4px 0 var(--sh); transform:translate(3px,3px); }

.btn-block{ width:100%; }

/* ---------------------------------------------------------
   QR (drawn by JS into svg[data-qr])
--------------------------------------------------------- */
.qr{ width:100%; height:100%; }
.qr rect{ fill:currentColor; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}