/* blog.css: the blog's layout, its shared parts and the modules of the first five guides. Reads tokens.css first.
   - Nothing under 16px; labels are 16px/600 in sentence case, with no letter-spacing and no capitals.
   - Every target is at least 44 x 44px.
   - Kit colours only: no tints, no shadows, no rotation.
   - Text sits on cream; on honey (ink or brick); on brick or ink (cream or honey); on white or grey (ink only).
   - Headings are brick; blue is for labels and for the things a reader checks. */

*{box-sizing:border-box}
html,body{margin:0;min-width:0}
body{background:var(--cream);color:var(--ink);font:400 var(--text)/1.5 var(--body);overflow-wrap:break-word}
@media(min-width:900px){body{line-height:1.55}}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
/* Headings break only between words; addresses and code may break anywhere */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:var(--track);text-wrap:balance;color:var(--brick);overflow-wrap:break-word}
h1{font-size:var(--h1);line-height:1.08}
h2{font-size:var(--h2);line-height:1.12}
h3,h4{font-size:var(--h3);line-height:1.16}
p+p{margin-top:1rem}
b,strong{font-weight:600}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{text-decoration-thickness:2px}
a,button,summary,input,textarea,select{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.person-card :focus-visible,.site-footer :focus-visible{outline-color:var(--honey)}
img,svg{max-width:100%}
img{height:auto}
[hidden]{display:none!important}
.url,.sources a{overflow-wrap:anywhere}

.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:32px;height:32px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* Layout: 20px gutters on phones, 24px at 380px and below, 32px from 600px */
.wrap{width:min(100% - var(--gutter) * 2,1120px);margin-inline:auto}
@media(min-width:1200px){.article-page .wrap{width:min(100% - 64px,1024px)}}

.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:var(--cream);color:var(--brick);padding:12px 18px;transform:translateY(-160%);border:2px solid var(--brick);min-height:48px}
.skip-link:focus{transform:translateY(0)}

/* ---- Header: the site's header, as on the home and /sob-medida/. The lockup, «Site de uma página · Site sob medida
   · Blog» with the current page underlined, and the action to the home's contact section.
   Phones and tablets: the lockup and the action on the first row, the three pages on the second (no menu hides the
   two offers). From 1040px: one row. */
.site-header{border-bottom:1px solid var(--brick)}
.header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "nav nav";column-gap:12px;align-items:center}
.brand{grid-area:brand;justify-self:start;display:flex;align-items:center;min-height:72px;flex-shrink:0}
.brand picture{display:block}
.brand img{display:block;width:154px;height:64px;object-fit:contain;object-position:left center}
.header-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.header-action{display:inline-flex;align-items:center;gap:6px;min-height:var(--target);padding:8px 14px;border:1px solid var(--brick);border-radius:var(--radius-s);color:var(--brick);font-weight:600;font-size:1rem;line-height:1.3;text-decoration:none;white-space:nowrap}
.header-action:hover{border-width:2px;padding:7px 13px}
.header-action .short{display:none}
.site-nav{grid-area:nav;display:flex;justify-content:space-between;align-items:stretch;gap:8px;border-top:1px solid var(--grey)}
.site-nav a{display:flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:var(--target);min-height:var(--target);padding:4px 2px;border-bottom:3px solid transparent;color:var(--brick);font-weight:600;font-size:1rem;line-height:1.2;text-align:center;text-decoration:none;text-wrap:balance}
.site-nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.site-nav a[aria-current]{border-bottom-color:var(--brick)}
/* «Vamos conversar →» from 541px, «Conversar →» at 540px and below: both are real text; one is shown */
@media(max-width:540px){.header-action .long{display:none}.header-action .short{display:inline}}
@media(min-width:600px){.brand{min-height:80px}.brand img{width:280px;height:62px}.site-nav{justify-content:flex-start;gap:30px}.site-nav a{padding-inline:4px}}
@media(min-width:900px){.brand img{width:280px}}
@media(min-width:1040px){
  .header-inner{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav actions";column-gap:28px}
  .brand{min-height:94px}
  .site-nav{border-top:0;justify-content:flex-end;gap:6px;align-self:stretch}
  .site-nav a{padding:4px 16px;min-height:0}
}
@media(min-width:1200px){.brand img{width:280px}}
@media(max-width:359px){.brand img{width:138px}.header-action{padding-inline:10px}.header-action:hover{padding-inline:9px}}

/* ---- Footer: the site's footer, as on the home and /sob-medida/ */
.site-footer{background:var(--ink);color:var(--cream);padding:44px 0;margin-top:64px}
.footer-top{padding-bottom:30px;border-bottom:1px solid var(--cream);display:grid;gap:20px}
.footer-brand{display:flex;align-items:center;min-height:var(--target);width:280px;max-width:100%}
.footer-brand img{width:100%;height:auto}
.footer-top>p{font-size:1.25rem}
.footer-bottom{display:grid;gap:28px;padding-top:28px;font-size:1rem}
.legal-id p+p{margin-top:8px}
.legal-id>a{display:flex;align-items:center;min-height:var(--target);overflow-wrap:anywhere;margin-top:8px}
.footer-links summary{font-size:1rem;gap:12px;padding-block:6px}
.footer-links details p{margin:10px 0 20px}
.footer-links nav{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:14px}
.footer-links nav a{min-width:var(--target);min-height:var(--target);display:inline-flex;align-items:center;gap:8px}
@media(min-width:900px){.footer-top{display:flex;align-items:center;justify-content:space-between}.footer-bottom{grid-template-columns:1fr 1fr;gap:80px}}
@media(max-width:540px){.site-footer{margin-top:48px}}

/* ---- Open and closed blocks: a plus or a minus drawn as two bars, on a 52px target */
summary{cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;font-weight:600}
summary::-webkit-details-marker{display:none}
summary::after{content:'';width:16px;height:16px;flex-shrink:0;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
details[open]>summary::after{background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}

/* ---- Labels: 16px/600, sentence case, no letter-spacing; blue on cream */
.eyebrow,.mini-label,.person-label{font:600 1rem/1.4 var(--body);letter-spacing:0;text-transform:none}
.eyebrow,.mini-label{color:var(--blue)}
.eyebrow{margin-bottom:12px}

/* ---- Breadcrumbs and the position line
   The crumbs end on the guide's stage («Etapa 2 de 3: Na hora de montar», a link to its group on the index);
   «Guia 06 de 10» marks the current page. The ten dots (one group per stage) are decoration: hidden from screen
   readers, and the current one is bigger as well as filled, so nothing rests on colour alone. */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:24px;margin:8px 0 12px;font-size:1rem}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;margin:0 0 0 -6px}
.crumb-next{display:inline-flex;align-items:center;gap:2px;min-width:0}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);min-width:var(--target);padding-inline:6px;color:var(--brick)}
.crumbs span[aria-hidden]{color:var(--ink)}
.trail-pos{display:flex;align-items:center;gap:12px;min-height:var(--target);margin:0 0 0 -6px;padding-inline:6px}
.trail-pos [aria-current]{font-weight:600}
.trail-dots{display:inline-flex;align-items:center;gap:10px}
.trail-dots>span{display:inline-flex;align-items:center;gap:4px}
.trail-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--brick)}
.trail-dot.is-here{width:16px;height:16px;background:var(--honey)}

/* ---- The opening of a guide: eyebrow, title, the short answer, the byline; the guide's line icon from 900px */
.article-hero{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:28px;border-bottom:1px solid var(--brick)}
.article-hero h1{max-width:18ch}
.intro{font-size:var(--lead);line-height:1.4;margin-top:20px;max-width:66ch}
.hero-mark{display:none;width:144px;height:144px;border-radius:50%;background:var(--honey);color:var(--brick);align-items:center;justify-content:center}
.hero-mark .icon{width:64px;height:64px}
.byline{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;column-gap:14px;row-gap:12px;margin-top:24px}
.byline img{width:56px;height:56px;flex-shrink:0;border-radius:50%;object-fit:cover;border:1px solid var(--brick)}
.byline p{font-size:var(--small);line-height:1.4;margin:0}
.byline .text-size{grid-column:2;justify-self:start}
@media(min-width:600px){.byline{grid-template-columns:56px minmax(0,1fr) auto}.byline .text-size{grid-column:3;grid-row:1}}

/* «Texto maior»: a real button with aria-pressed, hidden in the HTML and shown by texto-maior.js.
   The kit's outlined small action; when pressed, filled brick with a 2px border. */
.text-size{display:inline-flex;align-items:center;gap:10px;min-height:var(--target);padding:6px 14px;border:1px solid var(--brick);border-radius:var(--radius-s);background:var(--cream);color:var(--brick);font:600 1rem/1.2 var(--body);letter-spacing:0;cursor:pointer}
.text-size .aa{font:600 1rem/1 var(--body)}
.text-size .aa span{font-size:1.375rem}
.text-size:hover,.text-size[aria-pressed="true"]{border-width:2px;padding:5px 13px}
.text-size[aria-pressed="true"]{background:var(--brick);color:var(--cream)}
.byline-name a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--brick);font-weight:600}
.byline-meta{margin-top:0}
/* Publication, update and reading time on three short lines at every width, so no separator is left at a line's end;
   the dots between them read only where the page has no style */
.byline-meta span{display:block}
.byline-meta .dot{display:none}
@media(min-width:600px){.article-hero h1{max-width:20ch}}
@media(min-width:900px){
  .article-hero{grid-template-columns:minmax(0,1fr) 144px;gap:48px;align-items:center;padding-bottom:36px}
  .intro{line-height:1.35}
  .hero-mark{display:flex}
}

/* ---- The author's note after the opening, in his own words: the note's brick rule, with its label */

/* ---- Article body: 18px text on phones and 20px from 900px, prose at 66 characters, headings in the prose column */
.article-body{--prose:41.25rem;margin:32px 0}
.article-body>section{margin-top:44px}
.article-body>section:first-child{margin-top:0}
.article-body :is(p,ul,ol,h2,h3,details,blockquote,.note){max-width:var(--prose)}
.content-section>*+*{margin-top:18px}
.article-body h2+p{margin-top:16px}
.article-body :where(ul,ol):not([class]){padding-left:24px}
.article-body :where(ul,ol):not([class])>li+li{margin-top:8px}
.article-body p.mini-label+h2{margin-top:6px}
/* A link inside a sentence keeps the line's spacing; padding above and below gives it a target 44px tall */
.article-body p a:not([class]){padding-block:11px}
@media(min-width:900px){.article-body{margin:40px 0}.article-body>section{margin-top:56px}}

/* Notes: cream, with a 3px brick rule on the left */
.note{padding:4px 0 4px 20px;border-left:3px solid var(--brick);margin-top:20px}
details.note>summary{padding:0;min-height:var(--target);color:var(--brick)}
details.note[open]>summary{margin-bottom:8px}
details.note>p{margin-top:0}

/* Code and addresses: ink on white with a blue rule (on white, text is only ink). Inside a sentence they keep the
   sentence's size; a step that shows a whole address gives it a strip of its own (batch2.css). */
code{padding:0 .3em;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:4px;font-family:var(--body);font-weight:600;font-size:1em;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- An example picture with its notes: the picture left and the notes right from 900px; on phones the picture
   first. The picture sits in the home's phone frame, with honey pins that match the numbered notes. */
.annotated-layout{display:grid;gap:28px;margin-top:20px}
.example-preview{max-width:340px;margin-inline:auto;width:100%}
.phone-frame{position:relative;border:8px solid var(--brick);border-radius:26px;background:var(--brick)}
.phone-frame>a{display:block;border-radius:18px}
.phone-frame>a:focus-visible{outline-offset:12px}
.phone-frame img{display:block;width:100%;height:auto;border-radius:18px}
/* A picture without the phone frame gets the same frame on the image */
.example-preview>a{display:block;border-radius:26px}
.example-preview>a>img{display:block;width:100%;height:auto;border:8px solid var(--brick);border-radius:26px}
.pin{position:absolute;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--brick);border-radius:50%;background:var(--honey);color:var(--brick);font:600 1rem/1 var(--body);transform:translate(-50%,-50%)}
/* Where each pin sits, as a share of the picture: a default set, then one set per example picture */
.pin-1{left:-4px;top:30%}
.pin-2{left:-4px;top:50%}
.pin-3{left:-4px;top:70%}
.pin-4{left:calc(100% + 4px);top:30%}
.example-preview.example-pousada .pin-1{left:-6px;top:34%}
.example-preview.example-pousada .pin-2{left:-6px;top:18.6%}
.example-preview.example-pousada .pin-3{left:calc(100% + 6px);top:46.8%}
.example-preview.example-pousada .pin-4{left:-6px;top:55.8%}
.example-preview.example-salao .pin-1{left:-6px;top:35%}
.example-preview.example-salao .pin-2{left:-6px;top:22.6%}
.example-preview.example-salao .pin-3{left:calc(100% + 6px);top:51%}
.example-preview.example-salao .pin-4{left:-6px;top:59%}
.example-preview figcaption,.example-preview>p{margin-top:14px;font-size:var(--small);line-height:1.45}
.example-preview :is(figcaption,p) a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--brick);font-weight:600}
.pill{display:inline-block;background:var(--honey);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.35;padding:2px 14px;border-radius:24px;margin-right:6px}
@media(min-width:760px){.example-preview{margin-inline:0}}
@media(min-width:900px){
  .annotated-layout{grid-template-columns:340px minmax(0,1fr);gap:48px;align-items:start}
  .annotated-layout .example-preview{position:sticky;top:24px}
}

/* ---- Numbered cards: the pousada's four decisions and the notes beside an example picture.
   The home's honey circle with a brick numeral; the card has the kit's bubble corner. */
.stay-journey,.annotation-list{display:grid;gap:20px;list-style:none;padding:0;margin:0;counter-reset:step}
.stay-journey>li,.annotation-list>li{margin:0}
.stay-step,.annotation{counter-increment:step;display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:22px 20px 14px;border:1px solid var(--brick);border-radius:var(--radius-card)}
.stay-step::before,.annotation::before{content:counter(step);content:counter(step) / '';display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;background:var(--honey);color:var(--brick);font:600 1rem/1 var(--body)}
.annotation .step-number{display:none}
.stay-step h3,.annotation h3{font-size:1.5rem;line-height:1.2;margin-bottom:10px}
.stay-step .question{font-size:1.25rem;line-height:1.35;font-weight:600;color:var(--blue);margin:0 0 4px}
/* «O hóspede pergunta:» before each guest question, on a line of its own */
.question-label{display:block;font-size:1rem;line-height:1.4}
.stay-step p+p,.annotation p+p{margin-top:12px}
.stay-step .question+p{margin-top:8px}
.stay-step .confirm{font-weight:600;color:var(--blue)}
.stay-step>a,.annotation>a{display:inline-flex;align-items:center;min-height:var(--target);margin-top:8px;color:var(--brick);font-weight:600}
@media(min-width:600px){
  .stay-step,.annotation{grid-template-columns:40px minmax(0,1fr);column-gap:18px;padding:24px 26px 16px}
  .stay-step::before,.annotation::before{grid-row:1 / span 6;margin-bottom:0}
  .stay-step>*,.annotation>*{grid-column:2}
}

/* Message example: the brick bubble of a message sent, with cream text */
.message-example{max-width:var(--prose);margin-top:24px;padding:22px 24px;background:var(--brick);color:var(--cream);border-radius:var(--bubble-out)}
.message-example .mini-label{color:var(--honey);margin-bottom:8px}
.message-example>p+p{margin-top:0}

/* Checklists: a drawn check mark before each item */
.checklist{list-style:none;padding:0;margin:20px 0}
.checklist li{position:relative;max-width:var(--prose);margin:0;padding:12px 0 12px 46px;border-bottom:1px solid var(--brick)}
.checklist li:first-child{border-top:1px solid var(--brick)}
.checklist li::before{content:'\2713';content:'\2713' / '';position:absolute;left:0;top:12px;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--brick);border-radius:50%;color:var(--brick);font:600 1rem/1 var(--body)}

/* ---- Cost cards: other companies' prices are neutral, never in the brand's style.
   White ground with a 1px blue rule and a plain 6px corner (not the bubble corner). On white only ink text is used,
   so the vendor's name, the label, the total, the dated line and the link are all ink; the name and the total are
   SNC Texto 600. A dashed blue line holds the sum. */
.cost-grid{display:grid;gap:24px;margin-top:24px}
.cost-card{min-width:0;padding:24px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:6px}
.cost-card h3{margin:0;font:600 1.375rem/1.25 var(--body);letter-spacing:0;color:var(--ink)}
.cost-card .mini-label{margin-top:4px;color:var(--ink)}
.cost-card .price{font:600 1.75rem/1.15 var(--body);letter-spacing:0;color:var(--ink);margin:18px 0 6px}
.billing-period{display:block;margin-top:6px;font:600 1rem/1.3 var(--body);letter-spacing:0;color:var(--ink)}
.cost-card .price-period{margin-top:10px}
.cost-line{padding:12px 0;border-top:1px dashed var(--blue);border-bottom:1px dashed var(--blue);margin-top:16px;font-weight:600;font-variant-numeric:tabular-nums}
.cost-card p+p{margin-top:12px}
.cost-card .source-date{margin-top:16px;padding-top:12px;border-top:1px solid var(--blue);font-weight:600}
.cost-card>a{display:inline-flex;align-items:center;min-height:var(--target);margin-top:8px;color:var(--ink);font-weight:600}
.cost-card :focus-visible{outline-color:var(--ink)}
.nowrap{white-space:nowrap}
.cost-formula{max-width:var(--prose);padding:14px 0;border-top:1px solid var(--brick);border-bottom:1px solid var(--brick)}
@media(min-width:600px){.cost-card .price{font-size:2rem}}
@media(min-width:760px){.cost-grid{grid-template-columns:1fr 1fr;align-items:start}}
.content-section>p+.cost-grid{margin-top:24px}
.cost-grid+p{margin-top:24px}

/* ---- Tables: brick rules, row headings in brick. At 540px and below, a table whose cells carry their column's
   name (.cell-label) becomes one block per row; any other table stays a table and keeps a horizontal scroll area. */
.table-scroll{max-width:100%;overflow-x:auto}
.comparison-table{border-collapse:collapse;width:100%}
.comparison-table th,.comparison-table td{text-align:left;vertical-align:top;padding:14px 18px 14px 0;border-bottom:1px solid var(--brick)}
.comparison-table thead th{padding-top:0;font-weight:600;color:var(--brick);border-bottom:2px solid var(--brick)}
.comparison-table tbody th{font-weight:600;color:var(--brick)}
.comparison-table :is(th,td):last-child{padding-right:0}
.cell-label{display:none}
@media(max-width:540px){
  .comparison-table th,.comparison-table td{padding:12px 10px 12px 0}
  .comparison-table:has(.cell-label),.comparison-table:has(.cell-label) :is(tbody,tr,th,td){display:block;width:100%}
  .comparison-table:has(.cell-label) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .comparison-table:has(.cell-label) tbody tr{padding:16px 0;border-bottom:1px solid var(--brick)}
  .comparison-table:has(.cell-label) tbody tr:first-child{border-top:1px solid var(--brick)}
  .comparison-table:has(.cell-label) :is(th,td){padding:0;border:0}
  .comparison-table:has(.cell-label) tbody th{font-size:1.25rem;margin-bottom:6px}
  .comparison-table:has(.cell-label) td+td{margin-top:6px}
  .cell-label{display:inline;font-weight:600;color:var(--blue)}
}

/* ---- Domain, DNS and hosting: three boxes on a white diagram ground with a blue rule. The boxes are cream, so
   their labels and headings keep the kit's colours. Side by side with arrows from 760px; stacked below, joined by
   a short blue line. */
.domain-map{display:grid;gap:14px;margin-top:20px;padding:20px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:6px}
.map-node{position:relative;min-width:0;padding:16px 18px;background:var(--cream);color:var(--ink);border:1px solid var(--blue);border-radius:var(--radius-s)}
.map-node .mini-label{margin-bottom:4px}
.map-node h3{font-size:1.5rem;line-height:1.2}
.map-node h3+p{margin-top:8px}
.map-arrow{display:none}
.map-arrow+.map-node::before{content:'';position:absolute;left:28px;top:-15px;width:2px;height:14px;background:var(--blue)}
/* The map's last row, across its whole width: what the files are, below the three steps. */
.map-note{margin:0;padding-top:12px;border-top:1px dashed var(--blue);color:var(--ink);font-weight:400}
.map-note strong{font-weight:600}
@media(min-width:760px){
  .domain-map{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;padding:24px}
  .map-note{flex:1 1 100%}
  .map-node{flex:1 1 0}
  .map-arrow{display:flex;align-items:center;flex:0 0 auto;color:var(--ink);font-size:1.5rem;line-height:1;font-weight:600}
  .map-arrow+.map-node::before{content:none}
}

/* ---- The worksheet: one labelled field per subject, two columns from 760px (the last one across both).
   Each field has its name, then a visible hint tied to it; fields are white with a blue rule and what you type is
   SNC Texto 600. */
.control-grid{display:grid;gap:0 28px;margin-top:18px;border-top:1px solid var(--brick)}
.control-field{display:block;min-width:0;padding:16px 0;border-bottom:1px solid var(--brick)}
.control-field>label{display:block;margin-bottom:4px;font-weight:600;color:var(--blue)}
.control-field>small{display:block;margin-bottom:8px;font-size:var(--small);line-height:1.4;color:var(--ink)}
@media(min-width:760px){.control-grid{grid-template-columns:1fr 1fr}.control-field:last-child{grid-column:1 / -1}}
textarea{display:block;width:100%;min-height:80px;margin:0;padding:12px;background:var(--white);color:var(--ink);border:1px solid var(--blue);border-radius:var(--radius-s);font:600 1rem/1.45 var(--body);resize:vertical}
textarea:focus-visible{outline-offset:3px}
/* The printed copy of each answer, filled in by blog.js; shown only on paper */
.print-answer{display:none}
/* «Imprimir só a ficha», shown by blog.js: the kit's outlined action */
.print-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;background:var(--cream);color:var(--brick);border:1px solid var(--brick);border-radius:var(--radius-s);font:600 1rem/1.3 var(--body);cursor:pointer}
.print-button:hover{border-width:2px;padding:9px 17px}
.content-section>.print-button{margin-top:20px}

/* ---- The diagnostic: three closed cards with a brick rule; each opens to its advice.
   The hint under each title shows only while the card is closed. */
.diagnostic-tree{display:grid;gap:12px;max-width:var(--prose)}
.diagnostic-branch{border:1px solid var(--brick);border-radius:var(--radius-s)}
.diagnostic-branch>summary{display:block;position:relative;padding:14px 56px 14px 20px;color:var(--brick);font:600 1.25rem/1.3 var(--body)}
.diagnostic-branch>summary::after{position:absolute;right:20px;top:50%;margin-top:-8px}
.diagnostic-branch>summary:focus-visible{outline-offset:2px}
.branch-hint{display:block;margin-top:4px;font:400 var(--small)/1.4 var(--body);color:var(--ink)}
.diagnostic-branch[open]>summary{border-bottom:1px solid var(--brick)}
.diagnostic-branch[open] .branch-hint{display:none}
.diagnostic-branch>:not(summary){margin:16px 20px 0}
.diagnostic-branch>:last-child{margin-bottom:20px}

/* ---- A case in steps: the honey circle with a brick numeral, brick rules between the steps */
.case-steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:case}
.case-steps>li{counter-increment:case;position:relative;max-width:var(--prose);margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--brick)}
.case-steps>li:last-child{margin-bottom:0}
.case-steps>li::before{content:counter(case);content:counter(case) / '';display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:50%;background:var(--honey);color:var(--brick);font:600 1rem/1 var(--body)}
.case-steps .step-number{display:none}
.case-steps h3{font-size:1.5rem;line-height:1.2;margin:0 0 10px}
@media(min-width:600px){.case-steps>li{padding-left:64px}.case-steps>li::before{position:absolute;left:0;top:2px;margin-bottom:0}}

/* ---- Sources: 44px targets, 16px */
.sources{margin-top:32px;border-top:1px solid var(--brick)}
.sources summary{color:var(--brick)}
.sources ul{padding-left:20px;margin:0 0 8px}
.sources li{max-width:none}
.sources li+li{margin-top:2px}
.sources a{display:inline-flex;align-items:center;min-height:var(--target)}
.sources>p{font-size:var(--small);margin-top:4px}

/* ---- Person card: the end card of every guide and the author box of the index.
   Brick, cream text, the 240px face crop in a circle, the bubble corner. */
.person-card{margin-top:48px;padding:24px;background:var(--brick);color:var(--cream);border-radius:var(--radius-card)}
.person-card h2,.person-card h3{color:var(--cream)}
.person-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center}
.person-head img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--honey)}
.person-label{color:var(--cream);margin-bottom:6px}
.person-name{font:700 1.625rem/1.15 var(--display);letter-spacing:var(--track);color:var(--cream);text-wrap:balance}
.person-card p{margin-top:12px}
.person-head h2+p{margin-top:10px}
.person-head+p{margin-top:20px}
.person-card .person-why{margin-top:24px;padding:4px 0 4px 20px;border-left:3px solid var(--honey)}
.person-card .person-why p{margin-top:0}
.person-card .person-promise{margin-top:24px;font:700 1.625rem/1.2 var(--display);letter-spacing:var(--track);text-wrap:balance}
.person-promise span{display:block;margin-top:8px;font:400 1.25rem/1.4 var(--body);letter-spacing:0}
.person-card .person-links{display:flex;flex-direction:column;margin-top:20px}
.person-links a{display:inline-flex;align-items:center;gap:8px;min-height:52px;font-size:1.125rem;font-weight:600;text-decoration-thickness:2px;text-underline-offset:6px}
.person-links a:hover{text-decoration-thickness:3px}

/* The end card's one main action: the home's honey button, with «Ver o preço →» and «Vamos conversar →» under it
   as text links */
.button{display:inline-flex;min-height:56px;align-items:center;justify-content:center;gap:14px;padding:14px 20px;border:2px solid var(--brick);border-radius:var(--radius-s);background:var(--brick);color:var(--cream);font:600 1.125rem/1.35 var(--body);letter-spacing:0;text-align:center;text-decoration:none;transition:transform .24s cubic-bezier(.22,1,.36,1);overflow-wrap:anywhere}
.button:hover{transform:translateY(-2px)}
.button>span[aria-hidden]{font-size:1.4rem;line-height:1}
.button-honey{background:var(--honey);color:var(--ink);border-color:var(--honey)}
.person-actions{margin-top:24px}
.person-actions .button{width:100%}
.person-card .person-actions .person-links{margin-top:10px}
/* A guide that has a further question for bigger businesses ends with it: one line and its link, a 44px target */
.person-more{margin-top:24px;padding-top:20px;border-top:1px solid var(--cream)}
.person-card .person-more p{margin-top:0}
.person-more a{display:inline-flex;align-items:center;gap:8px;min-height:var(--target);margin-top:6px;font-weight:600;text-decoration-thickness:2px;text-underline-offset:6px}
.person-more a:hover{text-decoration-thickness:3px}
@media(min-width:361px){.person-head{grid-template-columns:96px minmax(0,1fr)}}
@media(min-width:600px){
  .person-card{padding:32px}
  .person-head{grid-template-columns:120px minmax(0,1fr);gap:24px}
  .person-head img{width:120px;height:120px}
  .person-card .person-links{flex-direction:row;flex-wrap:wrap;gap:0 36px}
  .person-actions .button{width:auto}
}
@media(min-width:900px){.person-card{padding:36px 40px}.person-name{font-size:2rem}.person-card .person-promise{font-size:2rem}.person-promise span{font-size:1.5rem}}

/* ---- «A próxima pergunta.»: the next guide along the trail, in the kit's card shape, then «Ver a trilha inteira →»
   to the list on the index. After the last guide, the end of the trail in one line. */
.related{margin-top:48px;padding-top:28px;border-top:2px solid var(--brick);display:grid;gap:16px}
.related h2{font-size:var(--h3)}
.related-body{display:grid;gap:8px;min-width:0}
.next-card{display:grid;gap:8px;min-width:0;padding:20px;border:1px solid var(--brick);border-radius:var(--radius-card);color:var(--ink);text-decoration:none}
.next-card:hover{border-width:2px;padding:19px}
.next-meta{font:600 1rem/1.4 var(--body);color:var(--blue)}
.next-title{font:700 var(--h3)/1.16 var(--display);letter-spacing:var(--track);color:var(--brick);text-wrap:balance;overflow-wrap:anywhere}
.next-summary{font-size:var(--small);line-height:1.5}
.next-go{display:inline-flex;align-items:center;gap:8px;min-height:var(--target);font-weight:600;color:var(--brick)}
.next-card:hover .next-go{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.trail-end{max-width:34rem}
.trail-link{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-height:var(--target);font-weight:600;color:var(--brick)}
@media(min-width:600px){.next-card{padding:24px 28px}.next-card:hover{padding:23px 27px}}
@media(min-width:760px){.related{grid-template-columns:1fr 1.3fr;gap:32px;margin-top:56px;padding-top:32px}}

/* ---- Index. The masthead and «O que você quer resolver agora?» share the first screen: on a 360x672 phone the
   question and its first answers show. The four answers are plain #anchors that work without JavaScript: two open
   a stage (#antes, #montar), two a guide (#guia-N); the target then lights up in honey through :target. */
.index-hero{display:grid;gap:20px;padding:14px 0 40px}
.index-hero>*{min-width:0}
.index-hero .eyebrow{margin-bottom:6px}
.index-hero h1{font-size:min(4.7rem,14.5vw);line-height:.98;max-width:none}
.index-hero em{font-style:normal;position:relative;z-index:0;display:inline-block}
.index-hero em::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.1em;background:var(--honey);z-index:-1}
.index-intro{font-size:var(--lead);line-height:1.35;margin-top:12px}
.masthead-note{margin-top:8px;font-size:var(--small);line-height:1.5;max-width:34rem}
.resolver h2{font-size:1.75rem;line-height:1.12;margin-bottom:12px}
.answers{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.answer{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:60px;padding:9px 12px;border:1px solid var(--brick);border-radius:6px 6px 24px 6px;color:var(--brick);text-decoration:none}
.answer .icon{width:28px;height:28px}
.answer-text{min-width:0}
.answer-title{display:block;font:600 1.125rem/1.3 var(--body)}
.answer-dest{display:block;margin-top:2px;font-size:1rem;line-height:1.35;color:var(--ink)}
.answer-arrow{font-size:1.5rem;line-height:1;font-weight:600}
.answer:hover{border-width:2px;padding:8px 11px}
.answer:hover .answer-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media(min-width:541px){
  .index-hero h1{font-size:clamp(4.5rem,8vw,7.2rem)}
  .answers{grid-template-columns:1fr 1fr}
  .answer{grid-template-columns:32px minmax(0,1fr) auto;column-gap:14px;min-height:64px;padding:10px 16px}
  .answer .icon{width:32px;height:32px}
  .answer:hover{padding:9px 15px}
}
@media(min-width:760px){
  .index-hero{grid-template-columns:1.25fr 1fr;align-items:center;gap:48px;padding:56px 0 48px}
  .answers{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:900px){.resolver h2{font-size:2.125rem}}
.list-heading{padding-bottom:20px;border-bottom:2px solid var(--brick)}
.list-heading p{margin-top:8px}
.list-heading .eyebrow{margin:0 0 6px}
.list-heading .text-size{margin-top:16px}
.list-lead{max-width:40rem}
.guide-group{margin-top:32px}
.guide-group>h3{font:600 1.25rem/1.3 var(--body);letter-spacing:0;color:var(--blue);margin:0 0 4px}
/* «Etapa 1 de 3» above each stage's name, where a guide's stage link («Etapa 2 de 3: Na hora de montar») lands */
.group-step{display:block;font-size:1rem;line-height:1.4}
/* A jump from the answers, or from a guide's stage link, lands here: ink on honey, with no layout shift */
.guide-group:target>h3{margin-inline:-12px;padding:6px 12px;border-radius:var(--radius-s);background:var(--honey);color:var(--ink)}
.guide-row:target{margin-inline:-12px;padding-inline:12px;background:var(--honey)}
.guide-row:target .mini-label{color:var(--ink)}
/* Arriving by #guia-N focuses the row: on honey the ring is ink, drawn inside the block */
.guide-row:target:focus-visible{outline-color:var(--ink);outline-offset:-3px}
.guide-rows{list-style:none;padding:0;margin:0}
.guide-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:center;padding:22px 0;border-top:1px solid var(--brick);text-decoration:none}
.guide-rows li:last-child .guide-row{border-bottom:1px solid var(--brick)}
.guide-number{grid-column:1;grid-row:1;font:700 1.625rem/1 var(--display);letter-spacing:var(--track);color:var(--brick);white-space:nowrap;overflow-wrap:normal}
.guide-text{display:contents}
.guide-text .mini-label{grid-column:2;grid-row:1}
.guide-text h4{grid-column:1 / -1;grid-row:2}
.guide-description{grid-column:1 / -1;grid-row:3;font-size:var(--small);line-height:1.5;max-width:65ch}
.guide-arrow{grid-column:3;grid-row:1;font-size:1.5rem;line-height:1;font-weight:600;color:var(--brick)}
.guide-row:hover h4{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media(min-width:600px){
  .guide-row{grid-template-columns:64px minmax(0,1fr) 48px;column-gap:24px;padding:28px 0;align-items:start}
  .guide-text{display:block}
  .guide-text h4{margin:6px 0 8px}
  .guide-number{align-self:start;font-size:2.25rem}
  .guide-arrow{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--brick);border-radius:50%;align-self:center}
}
.index-page .person-card{margin-top:56px}
.index-page .person-card .person-label{margin-bottom:10px}

/* The modules of the other five guides and the laboratory are in batch2.css */

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.button:hover{transform:none}}

/* ---- The privacy card. Until the reader chooses, it is docked at the bottom of the screen; while it shows, the page
   keeps that much room at its end and below the element that has keyboard focus, so nothing stays behind it. The card
   sets its height on <html> (--snc-consent-h) and removes it when it closes, sits at the top of the page or is hidden,
   so both reserves fall back to 0. The room kept at the top (tokens.css) stays as it is. */
@media screen{
  :root{scroll-padding-bottom:var(--snc-consent-h,0px)}
  body:has(>.snc-consent-banner:not([hidden])){padding-bottom:var(--snc-consent-h,0px)}
}

/* ---- Paper. The site's frame and its privacy card, the end cards, the pins and the buttons stay off the page;
   closed blocks print open. «Imprimir só a ficha» prints the domain guide's worksheet alone, with each answer written
   out. */
@media print{
  .site-header,.site-footer,.related,.person-card,.hero-mark,.skip-link,.pin,.text-size,.trail-dots,.print-button,body>.snc-consent-banner{display:none}
  .wrap{width:100%}
  body{font-size:11pt;background:var(--white)}
  details:not([open])>*:not(summary){display:block}
  .cost-card,.stay-step,.annotation,.map-node,.diagnostic-branch,.case-steps>li{break-inside:avoid}
  .control-field{break-inside:auto}
  .print-answer{display:block;white-space:pre-wrap;overflow-wrap:anywhere;min-height:3em;margin:0;padding:8px 0;border-bottom:1px solid var(--ink)}
  .control-field:has(.print-answer) textarea{display:none}
  textarea{height:auto;min-height:100px;overflow:visible}
  .print-sheet .breadcrumbs,.print-sheet .article-hero,.print-sheet .sources,.print-sheet .article-body>.content-section:not(:has(#ficha)){display:none}
  .print-sheet .article-body,.print-sheet .content-section{margin:0}
  .print-sheet .control-grid{display:block}
}