/* =========================================================
   Clínica Viva — shared styles for the inner pages
   (the Home keeps its own inline system; tokens match it)
   ========================================================= */
:root{
  --green:#17301F; --green-2:#1F3A2E; --green-3:#132A1F;
  --ivory:#F6F1E7; --sand:#EFE7D8; --line:#D9CFBD; --line-d:rgba(246,241,231,0.14);
  --gold:#E2CB98; --gold-d:#7D6030; --ink:#1F3A2E; --muted:#4A5D53; --muted-d:rgba(246,241,231,0.72);
  --serif:'Noto Serif Display',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
  --gut:max(clamp(20px,4.4vw,60px), calc((100% - 1360px) / 2));
}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* skip link */
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--ivory);color:var(--ink);font-weight:600;font-size:14px;transition:top .2s}
.skip:focus{top:12px}

/* layout */
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-top:clamp(80px,9vw,140px);padding-bottom:clamp(80px,9vw,140px)}
.sec-sm{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(56px,6vw,96px)}
.dark{background:var(--green);color:var(--ivory)}
.sand{background:var(--sand)}
.round-top{border-radius:36px 36px 0 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px)}
.split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 64px}

/* type */
.serif{font-family:var(--serif)}
.label{margin:0 0 18px;font-size:13px;color:var(--gold-d)}
.dark .label{color:var(--gold)}
.h1{margin:0;font-family:var(--serif);font-weight:200;font-size:clamp(42px,6vw,92px);line-height:1;letter-spacing:-0.035em}
.h2{margin:0;font-family:var(--serif);font-weight:200;font-size:clamp(34px,4.4vw,66px);line-height:1.04;letter-spacing:-0.03em}
.h3{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.12;letter-spacing:-0.015em}
.lead{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.75;color:var(--muted)}
.dark .lead{color:var(--muted-d)}
.body{margin:0;font-size:16px;line-height:1.75;color:var(--muted)}
.dark .body{color:var(--muted-d)}
.quote{margin:0;font-family:var(--serif);font-weight:200;font-size:clamp(24px,2.4vw,36px);line-height:1.35;letter-spacing:-0.01em}
em.g{font-style:italic;color:var(--gold-d)}
.dark em.g{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 8px 0 26px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.01em;transition:background .3s,color .3s}
.btn .dot{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.btn-dark{background:var(--green-2);color:var(--ivory)}
.btn-dark .dot{background:var(--gold);color:var(--green-3)}
.btn-dark:hover{background:#2A4B3C}
.btn-light{background:var(--ivory);color:#14261E}
.btn-light .dot{background:var(--green-2);color:var(--gold)}
.btn-light:hover{background:#fff}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .3s}
.tlink:hover{color:var(--gold-d)}
.dark .tlink:hover{color:var(--gold)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid #C9BBA0;font-size:13px;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.chip:hover{background:var(--green-2);color:var(--ivory);border-color:var(--green-2)}
.dark .chip{border-color:rgba(246,241,231,0.3)}
.dark .chip:hover{background:var(--ivory);color:#14261E}

/* page hero (inner pages) */
.phero{position:relative;overflow:hidden;background:var(--green);color:var(--ivory);padding:150px var(--gut) clamp(56px,6vw,88px)}
.phero .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(246,241,231,0.6);margin-bottom:clamp(28px,4vw,48px)}
.phero .crumbs a:hover{color:var(--gold)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:end}
.phero-media{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#0F2219}
.phero-media img,.phero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;filter:grayscale(.35) blur(2px);mix-blend-mode:luminosity;pointer-events:none}

/* lists of services */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,56px)}
.svc-group h3{margin:0 0 14px;font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:-0.01em}
.svc-group ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-group li{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--muted)}
.dark .svc-group ul,.dark .svc-group li{border-color:var(--line-d)}
.dark .svc-group li{color:var(--muted-d)}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:24px 2px;font-family:var(--serif);font-weight:200;font-size:clamp(21px,2vw,28px);letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{font-family:var(--sans);font-size:24px;font-weight:200;color:var(--gold-d);transition:transform .3s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq p{margin:0;padding:0 2px 26px;max-width:680px;font-size:16px;line-height:1.75;color:var(--muted)}

/* cards */
.pcard{position:relative;display:block;border-radius:22px;overflow:hidden;background:#0F2219;color:var(--ivory)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.16,.8,.24,1)}
.pcard:hover img{transform:scale(1.05)}
.pcard .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.35) 45%,rgba(10,22,16,0) 70%)}
.pcard .in{position:absolute;left:24px;right:24px;bottom:22px}
.go{width:48px;height:48px;border-radius:999px;border:1px solid rgba(246,241,231,.45);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .5s cubic-bezier(.16,.8,.24,1),background .3s,color .3s}
.pcard:hover .go{transform:rotate(-45deg);background:var(--gold);color:#14261E;border-color:var(--gold)}

/* rows (index lists) */
.row{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);padding:22px 2px;border-top:1px solid var(--line)}
.row .t{flex:1;font-family:var(--serif);font-weight:200;font-size:clamp(24px,2.6vw,38px);line-height:1.1;letter-spacing:-0.02em;transition:transform .6s cubic-bezier(.16,.8,.24,1),color .3s}
.row:hover .t{transform:translateX(10px);color:var(--gold-d);font-style:italic}
.dark .row{border-color:var(--line-d)}
.dark .row:hover .t{color:var(--gold)}

/* closing band */
.closing{padding:clamp(72px,8vw,120px) var(--gut);background:var(--green-3);color:var(--ivory)}
.closing .body,.closing .lead{color:var(--muted-d)}
.closing .label{color:var(--gold)}
.closing em.g{color:var(--gold)}
/* a green closing band that ends the page gets air before the footer */
.closing-light .body,.closing-light .lead{color:var(--muted)}
.closing-light .label,.closing-light em.g{color:var(--gold-d)}
main > .closing:last-child:not(.closing-light){margin-bottom:clamp(40px,5vw,72px);border-radius:0 0 36px 36px}

/* motion */
@keyframes vfade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rise{animation:vfade 1s cubic-bezier(.16,.8,.24,1) both}
.rise2{animation:vfade 1s .12s cubic-bezier(.16,.8,.24,1) both}
@supports (animation-timeline: view()){
  @keyframes vreveal{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}
  .reveal{animation:vreveal linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
}
@media (prefers-reduced-motion: reduce){.rise,.rise2,.reveal{animation:none}}

/* ---------- navigation (component Nav.dc.html) ---------- */
.nv{position:fixed;top:0;left:0;right:0;z-index:50}
.nv-veil{position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;transition:opacity .5s;background:linear-gradient(180deg,rgba(10,22,16,.88) 0%,rgba(10,22,16,.6) 35%,rgba(10,22,16,.25) 65%,rgba(10,22,16,0) 100%)}
.nv-bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:84px;padding:0 max(clamp(16px,2.6vw,40px), calc((100% - 1680px) / 2));transition:background .5s,border-color .5s;border-bottom:1px solid transparent}
.nv-solid .nv-bar{background:rgba(13,28,21,.86);border-color:rgba(246,241,231,.12);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
.nv-solid .nv-veil{opacity:0}
.nl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;border:none;background:transparent;color:rgba(246,241,231,.9);font:inherit;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
.nl:hover,.nl.on{color:var(--gold)}
.nl[aria-expanded="true"]{background:rgba(246,241,231,.1);color:var(--gold)}
.nl svg{transition:transform .4s}
.nl[aria-expanded="true"] svg{transform:rotate(180deg)}
.nv-cta{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 6px 0 22px;border-radius:999px;background:var(--ivory);color:#14261E;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nv-cta .dot{width:40px;height:40px;border-radius:999px;background:var(--green-2);color:var(--gold);display:inline-flex;align-items:center;justify-content:center}
.nv-burger{display:none;width:52px;height:52px;border-radius:999px;border:1px solid rgba(246,241,231,.3);background:rgba(15,32,24,.4);color:var(--ivory);align-items:center;justify-content:center;cursor:pointer}
.mega{background:var(--ivory);color:var(--ink);box-shadow:0 40px 80px -36px rgba(10,22,16,.5);padding:40px max(clamp(16px,2.6vw,40px), calc((100% - 1680px) / 2))}
@keyframes vmega{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mega{animation:vmega .45s cubic-bezier(.16,.8,.24,1) both}
.mega-grid{display:grid;grid-template-columns:240px minmax(0,1fr) 260px;gap:clamp(32px,4vw,64px)}
.mx{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #E3D9C6;font-family:var(--serif);font-weight:300;font-size:21px;color:var(--ink)}
.mx .a{opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .5s;color:var(--gold-d)}
.mx:hover .t{color:var(--gold-d);font-style:italic}
.mx:hover .a{opacity:1;transform:none}
.mx2{display:block;padding:12px 0;border-bottom:1px solid #E3D9C6}
.mx2:hover{color:var(--gold-d)}
.sheet{position:fixed;inset:0;z-index:60;background:var(--green-3);color:var(--ivory);overflow-y:auto;padding:14px 20px 40px}

/* ---------- footer (component Footer.dc.html) ---------- */
.ft{padding:0 14px 14px;background:var(--ivory)}
.ft-in{border-radius:28px;background:var(--green-3);color:var(--ivory);padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px) 36px}
.ft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;max-width:1240px;margin:0 auto}
.ft h4{margin:0 0 12px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ft a:hover{color:var(--gold)}

/* responsive */
@media (max-width: 960px){
  .grid-2,.phero-grid,.mega-grid{grid-template-columns:1fr}
  .nv-bar{grid-template-columns:1fr auto}
  .nv-side{display:none !important}
  .nv-logo{grid-column:1 !important;justify-self:start !important}
  .nv-right{grid-column:2 !important}
  .nv-burger{display:inline-flex}
  .hide-sm{display:none !important}
  .phero{padding-top:120px}
  .phero-media{aspect-ratio:4/3}
}
@media (max-width: 600px){.nv-cta{display:none !important}}

/* ---------- page hero v2: text over the clinic photo (inner pages) ---------- */
.ev-hero{position:relative;overflow:hidden;min-height:min(78svh,780px);display:flex;align-items:flex-end;padding:180px var(--gut) clamp(64px,8vw,104px);background:#132A1F;color:var(--ivory)}
.ev-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;animation:evZoom 18s ease-out both}
@keyframes evZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.ev-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,26,19,.92) 0%,rgba(12,26,19,.78) 40%,rgba(12,26,19,.35) 75%,rgba(12,26,19,.25) 100%),linear-gradient(0deg,rgba(12,26,19,.55) 0%,rgba(12,26,19,0) 45%)}
.ev-crumbs{position:absolute;z-index:2;top:112px;left:var(--gut);display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(246,241,231,.7)}
.ev-crumbs a:hover{color:var(--gold)}
.ev-in{position:relative;z-index:2;width:100%;max-width:1360px}
.ev-in .label{color:var(--gold)}
.ev-lead{margin:28px 0 0;max-width:620px;font-size:clamp(16px,1.25vw,19px);line-height:1.75;color:rgba(246,241,231,.86)}
@media (max-width: 960px){.ev-hero{padding-top:150px}.ev-crumbs{top:100px}}
@media (max-width: 600px){.ev-shade{background:linear-gradient(180deg,rgba(12,26,19,.75) 0%,rgba(12,26,19,.88) 100%)}}
@media (prefers-reduced-motion: reduce){.ev-bg{animation:none}}