:root {
    color-scheme: light;
    --cream: #effbfa;
    --ink: #122d35;
    --muted: #486064;
    --sea: #076d72;
    --line: #c0e9e6;
    --gradient: linear-gradient(125deg,#087e71,#087a90 62%,#07516d);
    --shadow: 0 18px 52px rgba(7,52,66,.11);
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;color:var(--ink);background:var(--cream);font:1rem/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;isolation:isolate}
body::before {content:"";position:fixed;inset:0 auto auto 0;width:min(100vw,1000px);height:min(70vw,700px);z-index:-1;pointer-events:none;background:#05aeb8 url("fond-sanaia.jpg") left top / min(100vw,1000px) auto no-repeat;background-blend-mode:screen;opacity:.68;mask-image:radial-gradient(ellipse at 0 0,#000 12%,transparent 73%)}
a {color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible {outline:2px solid #0a6771;outline-offset:5px}
img {max-width:100%;height:auto;display:block}
.skip {position:absolute;top:8px;left:8px;transform:translateY(-150%);padding:8px 15px;background:white;z-index:10}
.skip:focus {transform:none}
.site-head,.site-footer,.shell {width:min(1160px,calc(100% - 48px));margin-inline:auto}
.site-head {min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid rgba(10,72,81,.15)}
.brand {display:inline-flex;align-items:center;gap:9px;font-size:1.16rem;font-weight:700;letter-spacing:-.03em}
.site-head nav,.actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.site-head nav {gap:clamp(9px,2.2vw,23px)}
.overview,.site-footer a {font-size:.9rem}
.overview:hover,.site-footer a:hover,.text-link:hover,.crumbs a:hover {color:var(--sea)}
.button {display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:45px;border-radius:999px;padding:9px 19px;border:1px solid transparent;background:#faffff;color:var(--ink);font-weight:650;font-size:.9rem;text-align:center;transition:transform .18s ease,box-shadow .18s ease}
.button:hover {transform:translateY(-2px);box-shadow:0 8px 22px rgba(9,71,80,.16)}
.primary {background:var(--gradient);color:#fff}
.secondary {border-color:var(--line);background:rgba(250,255,255,.83)}
.crumbs {margin-top:21px;color:#415b61;font-size:.82rem}
.crumbs ol {display:flex;flex-wrap:wrap;gap:4px 9px;padding:0;margin:0;list-style:none}
.crumbs li+li::before {content:"/";margin-right:9px;color:#718682}
.crumbs [aria-current] {font-weight:650}
.hero {display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(22px,5vw,74px);align-items:center;padding-block:clamp(55px,8vw,106px)}
.hero-index {grid-template-columns:minmax(0,730px);padding-bottom:clamp(26px,4vw,55px)}
.eyebrow {color:var(--sea);margin:0 0 12px;font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
h1,h2 {margin:0;color:var(--ink);font:400 clamp(2.1rem,4.6vw,4.1rem)/1.06 Georgia,"Times New Roman",serif;letter-spacing:-.045em;text-wrap:balance}
h2 {font-size:clamp(1.85rem,3.35vw,2.85rem)}
.hero h1 {color:#07566b}
.site-head {border-color:#a9dedb}
.cta {background:linear-gradient(125deg,#076254,#08798a 66%,#07536f)}
.lead {font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.65;color:var(--muted);max-width:52ch;margin:18px 0 24px}
.scene,.card-art {background:#e2f8f6}
.scene {margin:0;border:1px solid #a5e2df;border-radius:25px;overflow:hidden;box-shadow:0 23px 62px rgba(6,74,86,.19)}
.scene img {width:100%;aspect-ratio:3/2;object-fit:cover}
.scene-anatomy img,.card-anatomy img {object-fit:contain;padding:6px}
.scene figcaption {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 17px;color:#fff;font-size:.78rem;background:linear-gradient(105deg,#08786d,#086477)}
.scene figcaption span {color:#d7ffff}
.panel {border:1px solid var(--line);border-radius:24px;background:#faffff;box-shadow:var(--shadow);padding:clamp(20px,4.4vw,48px)}
.practical,.faq {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(22px,5vw,65px);align-items:start}
.practical p:last-child,.faq details p,.cta p:last-child {color:var(--muted);margin-bottom:0}
.practical ul {list-style:none;display:grid;gap:9px;margin:0;padding:0;align-self:center}
.practical li {padding:11px 13px;border-radius:12px;background:#e3f7f5;display:flex;gap:9px;align-items:baseline;font-size:.93rem}
.practical li span {font-weight:750;color:#076673}
.faq,.related {padding-top:clamp(48px,7vw,88px);scroll-margin-top:20px}
.faq {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.text-link {display:inline-block;margin-top:14px;color:var(--sea);font-size:.88rem}
.answers {display:grid;gap:10px}
.answers details {background:#faffff;border:1px solid var(--line);border-radius:15px;padding:14px 17px}
.answers summary {cursor:pointer;font-weight:650}
.answers p {margin-top:10px}
.cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.card {overflow:hidden;display:block;border:1px solid var(--line);border-radius:18px;background:#faffff;transition:transform .18s ease,box-shadow .18s ease}
.card:hover {transform:translateY(-3px);box-shadow:var(--shadow)}
.card-art {overflow:hidden}
.card-art img {width:100%;aspect-ratio:3/2;object-fit:cover}
.card-anatomy img {object-fit:contain}
.card-copy {padding:15px 16px 18px}
.card-copy>span {color:var(--sea);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:650}
.card h3 {font-size:1rem;line-height:1.4;margin:5px 0 0;font-weight:650}
.card h3 span {color:var(--sea)}
.cta {display:flex;justify-content:space-between;align-items:center;gap:18px;margin:clamp(45px,7vw,85px) 0 28px;padding:clamp(22px,4vw,46px);border-radius:24px;background:var(--gradient);color:#fff}
.cta .eyebrow,.cta h2,.cta p:last-child {color:#fff}
.cta .button {flex:0 0 auto}
.site-footer {display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:16px 0 34px;color:#3c5559}
.site-footer .brand {font-size:1rem}
@media(max-width:760px) {
    .site-head,.site-footer,.shell {width:calc(100% - 32px)}
    .hero,.practical,.faq {grid-template-columns:1fr}
    .hero {padding-top:42px}
    .scene {max-width:520px}
    .cards {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:440px) {
    .site-head nav .overview {display:none}
    .cards,.cta {display:grid;grid-template-columns:1fr}
    .cta .button {justify-self:start}
}
@media(prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto}
    .button,.card {transition:none}
    .button:hover,.card:hover {transform:none}
}