/* ==========================================================================
   Serenitech DS v1.0 — institutional design system (serenitech.services + Mon*)
   Structure derived from the Padrão Digital de Governo (gov.br/ds) anatomy,
   recoloured: ONLY white, Monaco flag red #CE1126 and a greyscale.
   Typeface: Raleway (OFL). 8px grid · 12 col · max 1280px · WCAG 2.1 AA.
   ========================================================================== */
:root{
  --red:#CE1126; --red-60:#A50E1F; --red-70:#7A0A17; --red-5:#FBE9EB;
  --white:#FFFFFF;
  --g2:#F8F8F8; --g5:#EDEDED; --g10:#E0E0E0; --g20:#CCCCCC; --g40:#888888;
  --g60:#555555; --g80:#333333; --g90:#1B1B1B; --black:#0B0B0B;
  --surface:var(--white); --surface-alt:var(--g2); --surface-dark:var(--g90);
  --text:var(--g90); --text-2:var(--g60); --line:var(--g10);
  --shadow:0 1px 6px rgba(27,27,27,.16); --shadow-h:0 3px 12px rgba(27,27,27,.20);
  --radius:4px; --pill:100em;
  --font:"Raleway",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  --fs-nano:.694rem; --fs-micro:.833rem; --fs-base:1rem; --fs-1:1.2rem; --fs-2:1.4375rem;
  --fs-3:1.725rem; --fs-4:2.075rem; --fs-5:2.4875rem; --fs-6:2.9875rem;
  --container:1280px;
}
html{font-size:var(--root-fs,16px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font);line-height:1.45;
  font-variant-numeric:lining-nums tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%}
a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:4px dashed var(--red);outline-offset:4px}
::selection{background:var(--red-5);color:var(--g90)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* high contrast (toggled by the family bar) */
html.ds-contrast{--white:#000;--g2:#000;--g5:#111;--g10:#666;--g20:#888;--g40:#aaa;--g60:#e6e6e6;--g80:#fff;--g90:#000;
  --red:#FF6B78;--red-60:#FF8F99;--red-70:#FFB3BA;--red-5:#1a0509;--surface:#000;--surface-alt:#000;--surface-dark:#000;
  --text:#fff;--text-2:#e6e6e6;--line:#666;--shadow:0 0 0 1px #666;--shadow-h:0 0 0 2px #fff}
html.ds-contrast img.ds-logo-light{filter:invert(1) hue-rotate(180deg)}
html.ds-contrast .ds-btn-primary,html.ds-contrast .ds-step-n,html.ds-contrast .ds-skip{color:#000}
html.ds-contrast .ds-btn-inverse{background:#000;color:#FF6B78;border-color:#FF6B78}

/* layout */
.ds-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.ds-container{padding-inline:24px}}
.ds-section{padding-block:56px}
@media (min-width:768px){.ds-section{padding-block:80px}}
.ds-surface{background:var(--surface)} .ds-surface-alt{background:var(--surface-alt)}
.ds-surface-dark{background:var(--surface-dark);color:#fff}
.ds-grid{display:grid;gap:24px}
@media (min-width:768px){.ds-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ds-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ds-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ds-split{display:grid;gap:40px;align-items:start}
@media (min-width:1024px){.ds-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}

/* typography */
.ds-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.ds-eyebrow::before{content:"";width:8px;height:8px;background:var(--red);flex:none}
.ds-h1{margin:0 0 16px;font-size:var(--fs-5);line-height:1.15;font-weight:300;letter-spacing:-.01em;color:var(--text)}
@media (min-width:768px){.ds-h1{font-size:var(--fs-6)}}
.ds-h1 em,.ds-h1 strong,.ds-h2 em{font-style:normal;font-weight:600;color:var(--red)}
.ds-h2{margin:0 0 20px;font-size:var(--fs-3);line-height:1.2;font-weight:300;color:var(--text);max-width:34ch}
@media (min-width:768px){.ds-h2{font-size:var(--fs-4)}}
.ds-h2--wide{max-width:none}
.ds-h3{margin:32px 0 12px;font-size:var(--fs-2);line-height:1.25;font-weight:600;color:var(--text)}
.ds-h4{margin:0 0 8px;font-size:var(--fs-1);line-height:1.3;font-weight:600;color:var(--text)}
.ds-lead{margin:0 0 16px;font-size:var(--fs-1);line-height:1.45;color:var(--text-2)}
@media (min-width:768px){.ds-lead{font-size:var(--fs-2);font-weight:300}}
.ds-sub{margin:0 0 12px;font-size:var(--fs-1);color:var(--text-2);font-weight:500}
.ds-prose{max-width:72ch;color:var(--text-2);font-size:var(--fs-1)}
.ds-prose p{margin:0 0 16px} .ds-prose strong{color:var(--text);font-weight:600}
.ds-small{font-size:var(--fs-micro);color:var(--text-2)}
.ds-mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.9em;background:var(--g5);padding:1px 6px;border-radius:3px;color:var(--g80)}

/* buttons */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:var(--pill);
  font:600 16px/1 var(--font);cursor:pointer;white-space:nowrap;border:1px solid transparent;text-decoration:none!important;
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.ds-btn-sm{height:32px;padding:0 16px;font-size:14px} .ds-btn-lg{height:48px;padding:0 32px}
.ds-btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.ds-btn-primary:hover{background:var(--red-60);border-color:var(--red-60)} .ds-btn-primary:active{background:var(--red-70)}
.ds-btn-secondary{background:transparent;color:var(--red);border-color:var(--red)}
.ds-btn-secondary:hover{background:var(--red-5);color:var(--red-60);border-color:var(--red-60)}
.ds-btn-tertiary{background:transparent;color:var(--red)} .ds-btn-tertiary:hover{background:var(--red-5)}
.ds-btn-inverse{background:#fff;color:var(--red);border-color:#fff} .ds-btn-inverse:hover{background:var(--red-5)}
.ds-btn[disabled]{background:var(--g20);border-color:var(--g20);color:var(--g60);cursor:not-allowed}
.ds-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 8px}

/* tags, cards, quotes, alerts */
.ds-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.ds-tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 12px;border-radius:var(--pill);background:var(--g5);color:var(--g80);font-size:12px;font-weight:600;letter-spacing:.02em}
.ds-tag-active{background:var(--red-5);color:var(--red)}
.ds-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;transition:box-shadow .15s ease-out}
.ds-card:hover{box-shadow:var(--shadow-h)}
.ds-card--featured{border-top:4px solid var(--red)}
.ds-card p{margin:0;color:var(--text-2)}
.ds-quote{margin:32px 0;padding:8px 0 8px 24px;border-left:4px solid var(--red)}
.ds-quote p{margin:0 0 12px;font-size:var(--fs-2);font-weight:300;font-style:italic;line-height:1.4;color:var(--text)}
.ds-quote cite{font-style:normal;font-size:var(--fs-micro);color:var(--text-2);font-weight:600;letter-spacing:.04em}
.ds-msg{display:flex;gap:16px;padding:16px 20px;background:var(--g2);border-left:8px solid var(--g80);border-radius:var(--radius);margin:0 0 12px}
.ds-msg--important{border-left-color:var(--red);background:var(--red-5)}
.ds-msg p{margin:0;color:var(--text)}

/* timeline & stepper */
.ds-timeline{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:24px}
@media (min-width:1024px){.ds-timeline{grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:20px}}
.ds-timeline li{position:relative;padding-top:48px}
.ds-timeline li::before{content:"";position:absolute;left:36px;right:-20px;top:17px;height:1px;background:var(--g10)}
.ds-timeline li:last-child::before{display:none}
@media (max-width:1023px){.ds-timeline li{padding:0 0 0 56px}.ds-timeline li::before{left:17px;top:36px;bottom:-24px;width:1px;height:auto;right:auto}}
.ds-step-n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.ds-step-when{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.ds-timeline h4{margin:0 0 6px;font-size:var(--fs-1);font-weight:600}
.ds-timeline p{margin:0;color:var(--text-2);font-size:15px}

/* selos (standards badges) */
.ds-selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding:0;list-style:none}
.ds-selo{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--g20);border-radius:var(--pill);font-size:14px;font-weight:600;color:var(--g80);background:var(--white)}
.ds-selo::before{content:"";width:14px;height:14px;flex:none;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* forms */
.ds-form{display:grid;gap:16px}
.ds-form-row{display:grid;gap:16px} @media (min-width:640px){.ds-form-row{grid-template-columns:1fr 1fr}}
.ds-label{display:block;margin:0 0 8px;font-size:13px;font-weight:600;color:var(--text)}
.ds-input,.ds-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.ds-form select,.ds-form textarea{
  display:block;width:100%;height:40px;padding:0 12px;border:1px solid var(--g40);border-radius:var(--radius);background:var(--surface);
  color:var(--text);font:16px var(--font)}
.ds-form textarea{height:auto;min-height:112px;padding:10px 12px;resize:vertical}
.ds-form input:hover,.ds-form select:hover,.ds-form textarea:hover{border-color:var(--g60)}

/* media frames & video */
.ds-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--g90);box-shadow:var(--shadow)}
.ds-media video,.ds-media img{display:block;width:100%;height:100%;object-fit:cover}
.ds-media--hero{aspect-ratio:4/3} @media (min-width:1024px){.ds-media--hero{aspect-ratio:auto;height:100%;min-height:420px}}
.ds-media--wide{aspect-ratio:16/9}
.ds-media-caption{position:absolute;left:16px;bottom:16px;right:16px;max-width:360px;background:var(--white);color:var(--g80);padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow);font-size:13px;line-height:1.4}
.ds-media .ds-vctl{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(11,11,11,.55);color:#fff;cursor:pointer;display:grid;place-items:center}

/* ---------------- family bar (gov.br-style top bar) ---------------- */
.ds-familybar{background:var(--g90);color:#fff;font:500 12px/1 var(--font);position:relative;z-index:60}
html.ds-contrast .ds-familybar{background:#000;border-bottom:1px solid #666}
.ds-familybar .ds-container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:32px}
.ds-familybar nav{display:flex;align-items:center;gap:18px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;min-width:0}
.ds-familybar nav::-webkit-scrollbar{display:none}
.ds-familybar b{font-weight:700;color:#fff;margin-right:2px}
.ds-familybar a{color:#cfcfcf;padding:9px 0 7px;border-bottom:2px solid transparent;text-decoration:none}
.ds-familybar a:hover{color:#fff;text-decoration:none}
.ds-familybar a[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}
.ds-familybar .ds-tools{display:flex;align-items:center;gap:14px;flex:none}
.ds-familybar button{background:none;border:0;color:#cfcfcf;font:inherit;cursor:pointer;padding:6px 2px;display:inline-flex;align-items:center;gap:6px}
.ds-familybar button:hover{color:#fff}
@media (max-width:767px){.ds-familybar .ds-tools .ds-hide-sm{display:none}}

/* ---------------- institutional header ---------------- */
.ds-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .15s}
.ds-header.is-scrolled{box-shadow:0 2px 10px rgba(27,27,27,.10)}
.ds-header .ds-container{display:flex;align-items:center;gap:16px;min-height:72px}
.ds-burger{flex:none;width:40px;height:40px;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--g80);display:grid;place-items:center}
.ds-burger:hover{background:var(--g5)}
.ds-brand{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto;color:inherit;text-decoration:none!important}
.ds-brand img{height:32px;width:auto;display:block;flex:none} @media (max-width:767px){.ds-brand img{height:26px}}
.ds-brand-sig{display:none;border-left:1px solid var(--line);padding-left:16px;min-width:0}
.ds-brand-sig strong{display:block;font-size:14px;font-weight:600;color:var(--g90);white-space:nowrap}
.ds-brand-sig span{display:block;font-size:12px;color:var(--g60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1500px){.ds-brand-sig{display:block}}
.ds-nav{display:none;align-items:center;gap:24px;flex:none}
.ds-nav a{color:var(--g80);font-size:15px;font-weight:500;white-space:nowrap}
.ds-nav a:hover{color:var(--red);text-decoration:none}
@media (min-width:1180px){.ds-nav{display:flex}}
.ds-header-actions{display:flex;align-items:center;gap:10px;flex:none}
@media (max-width:767px){.ds-header-actions .ds-btn-secondary{display:none}.ds-header-actions .ds-btn{height:36px;padding:0 16px;font-size:14px}}
.ds-header-actions .ds-lang{position:relative}

/* drawer "menu principal" */
.ds-drawer-backdrop{position:fixed;inset:0;background:rgba(11,11,11,.45);z-index:80;opacity:0;pointer-events:none;transition:opacity .15s}
.ds-drawer{position:fixed;top:0;left:0;bottom:0;width:min(360px,88vw);background:var(--white);z-index:81;transform:translateX(-100%);transition:transform .2s ease-out,visibility .2s;visibility:hidden;display:flex;flex-direction:column}
body.ds-drawer-open .ds-drawer{transform:none;visibility:visible;box-shadow:4px 0 24px rgba(0,0,0,.2)} body.ds-drawer-open .ds-drawer-backdrop{opacity:1;pointer-events:auto}
.ds-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 16px 24px;border-bottom:1px solid var(--line)}
.ds-drawer-head img{height:28px;width:auto}
.ds-drawer nav{padding:8px 0;overflow:auto}
.ds-drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;color:var(--g80);font-weight:500;border-bottom:1px solid var(--g5)}
.ds-drawer nav a::after{content:"›";color:var(--g40);font-size:20px;line-height:1}
.ds-drawer nav a:hover{background:var(--g2);color:var(--red);text-decoration:none}
.ds-drawer-label{padding:16px 24px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g40)}

/* breadcrumb */
.ds-breadcrumb{background:var(--g2);border-bottom:1px solid var(--line);font-size:13px}
.ds-breadcrumb ol{display:flex;gap:8px;list-style:none;margin:0;padding:10px 0}
.ds-breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--g40)}
.ds-breadcrumb [aria-current]{color:var(--g80);font-weight:600}

/* hero (service landing) */
.ds-hero{background:linear-gradient(180deg,var(--white),var(--g2));padding-block:40px 56px}
@media (min-width:1024px){.ds-hero{padding-block:56px 72px}}
.ds-hero .ds-split{align-items:stretch}

/* family strip */
.ds-family{background:var(--g2);padding-block:0 48px}
.ds-family-grid{display:grid;gap:12px}
@media (min-width:640px){.ds-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ds-family-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ds-fcard{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);color:var(--g80);text-decoration:none!important;transition:box-shadow .15s,border-color .15s}
.ds-fcard:hover{box-shadow:var(--shadow);border-color:var(--g20)}
.ds-fcard img{height:22px;width:auto;align-self:flex-start}
.ds-fcard img.is-serif{height:30px;margin-top:-4px}
.ds-fcard span{font-size:14px;line-height:1.4;color:var(--g60)}
.ds-fcard[aria-current="page"]{border-color:var(--red);background:var(--red-5)}
.ds-fcard .ds-here{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}

/* footer */
.ds-footer{background:var(--g90);color:#cfcfcf;font-size:14px}
.ds-footer a{color:#e6e6e6} .ds-footer a:hover{color:#fff}
.ds-footer .ds-container{padding-block:56px 32px}
.ds-footer-grid{display:grid;gap:32px}
@media (min-width:768px){.ds-footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ds-footer h5{margin:0 0 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:700}
.ds-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ds-footer .ds-footer-logo{height:30px;width:auto;margin-bottom:16px}
.ds-footer-bottom{border-top:1px solid #333;margin-top:40px;padding-top:20px;font-size:12px;color:#9a9a9a;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.ds-subfooter{background:var(--black);padding-block:14px}
.ds-subfooter .ds-container{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:0}
.ds-subfooter span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;font-weight:700}
.ds-subfooter img{height:18px;width:auto;opacity:.9} .ds-subfooter img.is-serif{height:24px}
.ds-subfooter a:hover img{opacity:1}

/* skip link */
.ds-skip{position:absolute;left:8px;top:-64px;z-index:100;background:var(--red);color:#fff;padding:8px 16px;border-radius:4px;font-weight:600}
.ds-skip:focus{top:8px}