/* Sites reuses the project hub cards, navigation and spacing. */
.site-card-kind{color:var(--muted);line-height:1.6;font-size:.61rem}
.site-tags{display:flex;gap:.45rem;flex-wrap:wrap;list-style:none;padding:.4rem 0 0}
.site-tags li{font-size:.72rem;line-height:1.4;color:var(--soft);border:1px solid var(--line);border-radius:99px;padding:.45rem .65rem}
.site-card .pcard-desc{max-width:48ch}
.site-intro{padding-top:clamp(8rem,13vw,11rem);padding-bottom:5rem}
.site-intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:4rem;align-items:end;margin-bottom:3rem}
.site-case-title{font-size:clamp(3.25rem,7vw,7rem);font-weight:600;letter-spacing:-.06em;line-height:1;max-width:12ch;margin:1.2rem 0}
.site-lead{font-size:clamp(1.2rem,2.2vw,1.8rem);line-height:1.35;color:var(--soft)}
.site-intro-side{display:grid;justify-items:start;gap:1.5rem;min-width:0}
.site-intro-side p{color:var(--soft);line-height:1.7;max-width:42ch}
.site-address{font-size:.6rem;letter-spacing:.06em;text-transform:none;overflow-wrap:anywhere;color:var(--muted)}
.site-showcase{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--chip)}
.site-showcase img{display:block;width:100%;height:auto}
.site-showcase figcaption{padding:1rem 1.5rem;color:var(--muted);font-size:.75rem}
.site-section-title{font-size:clamp(1.8rem,3.8vw,3.5rem);letter-spacing:-.045em;line-height:1.1;max-width:20ch;margin:1.2rem 0 2.5rem}
.site-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.site-features article{padding:2rem;border:1px solid var(--line);border-radius:14px;background:var(--chip)}
.site-features .mono{color:var(--muted)}
.site-features h3{font-size:1.5rem;font-weight:500;letter-spacing:-.025em;margin:2rem 0 .75rem}
.site-features p{font-size:.95rem;line-height:1.65;color:var(--soft)}
.site-next{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding-block:4rem}
.site-next .mono{color:var(--muted);margin-bottom:1rem}
.site-next h2{font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.04em}
.site-next-link{display:grid;grid-template-columns:100px 1fr auto;gap:1.25rem;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:14px;color:var(--fg);text-decoration:none;transition:background .2s}
.site-next-link:hover{background:var(--chip)}
.site-next-link img{width:100%;height:auto;border-radius:6px}
.site-next-link span{font-size:1.1rem}
@media(max-width:760px){.site-intro-grid,.site-next{grid-template-columns:1fr;gap:2rem}.site-intro{padding-top:7rem;padding-bottom:3rem}.site-intro .case-back-link{margin-bottom:2rem}.site-case-title{font-size:clamp(3rem,12vw,5.3rem)}.site-features{grid-template-columns:1fr}.site-features article{padding:1.5rem}.site-features h3{margin-top:1.25rem}.site-showcase figcaption{padding:.8rem 1rem}.site-next{padding-block:3rem}.site-next-link{grid-template-columns:72px minmax(0,1fr) auto;gap:.75rem}}
/* Leitura no mobile */
@media(max-width:760px){.site-card-kind{font-size:.68rem}.site-address{font-size:.68rem}}
/* Ficha técnica no celular: rótulo acima do valor ("Desenvolvimento" não cabe na coluna fixa) */
@media(max-width:760px){.site-case .case-meta-item{grid-template-columns:1fr;gap:.35rem}.site-case .case-meta{gap:1.1rem}}
/* Índice de sites: três por linha no desktop, com cards mais compactos */
.hub-grid--sites{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media(max-width:900px){.hub-grid--sites{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hub-grid--sites .pcard-body{gap:.55rem;padding:1.25rem 1.25rem 1.35rem}
.hub-grid--sites .pcard-title{font-size:clamp(1.25rem,1.55vw,1.5rem);letter-spacing:-.025em}
.hub-grid--sites .pcard-desc{font-size:.88rem;line-height:1.5}
.hub-grid--sites .site-tags li{font-size:.68rem;padding:.35rem .55rem}
@media(max-width:560px){.hub-grid--sites{grid-template-columns:1fr}}
/* Telas do site em sequência (seção "O site em telas") */
.site-screens{display:grid;gap:1.25rem;margin-top:2.5rem}
.site-screens figure{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--chip)}
.site-screens img{display:block;width:100%;height:auto}
.site-screens figcaption{padding:.8rem 1.25rem;color:var(--muted);font-size:.75rem}
.site-screens-mobile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem}
.site-screens-mobile figure{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--chip)}
.site-screens-mobile img{display:block;width:100%;height:auto}
.site-screens-mobile figcaption{padding:.7rem 1rem;color:var(--muted);font-size:.72rem;text-align:center}
@media(max-width:760px){.site-screens figure,.site-screens-mobile figure{border-radius:14px}.site-screens-mobile{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.site-screens-mobile figcaption{padding:.5rem .4rem;font-size:.62rem}}
/* ---------- Style guide do site (tipografia, cores, componentes) ---------- */
/* Três colunas da mesma altura sobre o fundo da marca, como uma prancha de style guide */
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem;padding:1.5rem;border-radius:22px;background:var(--sg-board,#ece9e1);color:var(--sg-ink,#1a1a1a);font-family:var(--sg-font-body,inherit)}
.sg-col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.sg-panel{display:flex;flex-direction:column;padding:1.5rem;border-radius:16px;background:var(--sg-surface,#fff);min-width:0}
.sg-panel.is-fill{flex:1}
.sg-panel>h3{margin:0 0 1.2rem;font-family:var(--sg-font-body,inherit);font-size:1.1rem;font-weight:500;letter-spacing:-.01em;color:var(--sg-ink,#1a1a1a)}
.sg-font{display:flex;align-items:center;justify-content:center;min-height:3rem;margin-bottom:.6rem;border-radius:8px;background:var(--sg-primary,#222);color:var(--sg-on-primary,#fff);font-family:var(--sg-font-display,inherit);font-size:1.3rem;font-weight:600}
.sg-font.is-body{background:var(--sg-paper,#f6f5f1);color:var(--sg-ink,#1a1a1a);font-family:var(--sg-font-body,inherit);font-weight:500}
.sg-type{display:flex;flex-direction:column;flex:1;justify-content:space-between;margin-top:.6rem}
.sg-type-row{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--sg-line,rgba(0,0,0,.08))}
.sg-type-row dl{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .5rem;margin:0;font-size:.55rem;line-height:1.3;color:var(--sg-muted,#777)}
.sg-type-row dl div{min-width:0}
.sg-type-row dl dt{font-size:.48rem;letter-spacing:.05em;text-transform:uppercase}
.sg-type-row dl dd{margin:0;color:var(--sg-ink,#1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-type-row>p{margin:0;padding:.7rem .9rem;border-radius:8px;background:var(--sg-paper,#f6f5f1);font-family:var(--sg-font-display,inherit);font-weight:var(--sg-display-weight,600);line-height:1.08;letter-spacing:-.02em;color:var(--sg-ink,#1a1a1a);text-align:center;overflow-wrap:anywhere}
.sg-type-row.is-body>p{font-family:var(--sg-font-body,inherit);font-weight:400;line-height:1.5;letter-spacing:0;text-align:left}
.sg-colors{display:grid;gap:1.1rem}
.sg-colors h4{margin:0 0 .5rem;font-size:.82rem;font-weight:400;color:var(--sg-muted,#777)}
.sg-swatches{display:flex;overflow:hidden;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sg-swatches span{flex:1;min-width:0;height:3rem}
.sg-brand{display:flex;align-items:center;justify-content:space-around;gap:1rem;min-height:5.5rem}
.sg-brand img{display:block;height:2.4rem;width:auto}
.sg-brand span{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;border-radius:8px;font-family:var(--sg-font-display,inherit);font-size:1.1rem;font-weight:700}
.sg-comp{display:flex;flex-direction:column;flex:1;justify-content:space-between;gap:1rem}
.sg-group{display:grid;gap:.5rem;padding:.9rem;border:1px dashed color-mix(in srgb,var(--sg-primary,#222) 35%,transparent);border-radius:10px}
.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.sg-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .9rem;border-radius:var(--sg-btn-radius,var(--sg-radius,10px));font-size:.7rem;font-weight:600;line-height:1;white-space:nowrap}
.sg-btn.is-primary{background:var(--sg-primary,#222);color:var(--sg-on-primary,#fff)}
.sg-btn.is-secondary{background:var(--sg-secondary,var(--sg-ink,#1a1a1a));color:var(--sg-on-secondary,#fff)}
.sg-btn.is-outline{box-shadow:inset 0 0 0 1.5px var(--sg-primary,#222);color:var(--sg-link,var(--sg-primary,#222))}
.sg-btn.is-soft{background:color-mix(in srgb,var(--sg-primary,#222) 14%,transparent);color:var(--sg-link,var(--sg-primary,#222))}
.sg-btn.is-ghost{color:var(--sg-link,var(--sg-primary,#222));text-decoration:underline;text-underline-offset:3px;padding-inline:.2rem}
.sg-btn.is-disabled{background:var(--sg-paper,#f6f5f1);color:var(--sg-muted,#777)}
.sg-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.sg-field{display:grid;gap:.25rem;font-size:.6rem;color:var(--sg-muted,#777);min-width:0}
.sg-field>span{display:block;padding:.5rem .65rem;border-radius:var(--sg-radius,10px);border:1px solid var(--sg-line,rgba(0,0,0,.14));background:var(--sg-surface,#fff);color:var(--sg-muted,#777);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-field>span.is-focus{border-color:var(--sg-primary,#222);box-shadow:0 0 0 3px color-mix(in srgb,var(--sg-primary,#222) 18%,transparent);color:var(--sg-ink,#1a1a1a)}
.sg-field>span.is-select{position:relative;padding-right:1.6rem;color:var(--sg-ink,#1a1a1a)}
.sg-field>span.is-select::after{content:"";position:absolute;right:.7rem;top:50%;width:.35rem;height:.35rem;margin-top:-.28rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.sg-field>span.is-error{border-color:var(--sg-error,#c0392b);color:var(--sg-ink,#1a1a1a)}
.sg-field>em{font-style:normal;font-size:.54rem;color:var(--sg-error,#c0392b)}
.sg-chip{padding:.33rem .62rem;border-radius:999px;border:1px solid var(--sg-line,rgba(0,0,0,.14));background:var(--sg-surface,#fff);font-size:.6rem;color:var(--sg-ink,#1a1a1a)}
.sg-chip.is-on{background:var(--sg-chip-on,var(--sg-ink,#1a1a1a));color:var(--sg-on-chip-on,#fff);border-color:transparent}
.sg-check{display:inline-flex;align-items:center;gap:.35rem;font-size:.64rem;color:var(--sg-ink,#1a1a1a)}
.sg-check i{width:.85rem;height:.85rem;border-radius:4px;border:1.5px solid var(--sg-line,rgba(0,0,0,.3));background:var(--sg-surface,#fff)}
.sg-check i.is-on{background-color:var(--sg-primary,#222);border-color:var(--sg-primary,#222);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:70%;background-position:center;background-repeat:no-repeat}
.sg-check.is-radio i{border-radius:50%}
.sg-check.is-radio i.is-on{background-image:none;box-shadow:inset 0 0 0 3px var(--sg-surface,#fff)}
.sg-toggle{width:1.9rem;height:1.1rem;border-radius:999px;background:var(--sg-primary,#222);position:relative}
.sg-toggle::after{content:"";position:absolute;top:.14rem;right:.14rem;width:.82rem;height:.82rem;border-radius:50%;background:#fff}
.sg-toggle.is-off{background:var(--sg-line,rgba(0,0,0,.2))}
.sg-toggle.is-off::after{right:auto;left:.14rem}
.sg-pager{display:inline-flex;gap:.3rem}
.sg-pager i{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--sg-line,rgba(0,0,0,.14));color:var(--sg-ink,#1a1a1a);font-style:normal;font-size:.66rem}
.sg-pager i.is-on{background:var(--sg-primary,#222);color:var(--sg-on-primary,#fff);border-color:transparent}
.sg-tag{padding:.24rem .48rem;border-radius:5px;font-size:.52rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sg-tag.is-brand{background:color-mix(in srgb,var(--sg-primary,#222) 16%,transparent);color:var(--sg-link,var(--sg-primary,#222))}
.sg-tag.is-ok{background:#e3f6e8;color:#1d6b3a}
.sg-tag.is-warn{background:#fdf1d0;color:#8a5a00}
.sg-tag.is-dark{background:var(--sg-ink,#1a1a1a);color:var(--sg-surface,#fff)}
.sg-card{padding:.8rem .9rem;border-radius:var(--sg-radius,10px);background:var(--sg-paper,#f6f5f1);font-size:.64rem;color:var(--sg-muted,#777)}
.sg-card b{display:block;margin-bottom:.15rem;font-family:var(--sg-font-display,inherit);font-size:.88rem;font-weight:600;color:var(--sg-ink,#1a1a1a)}
@media(max-width:900px){.sg{grid-template-columns:1fr;padding:1rem}}
/* ---------- Design final: composições das telas ---------- */
.site-design{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem}
.site-design figure{margin:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:var(--chip)}
.site-design img{display:block;width:100%;height:auto}
.site-design figcaption{padding:.75rem 1rem;color:var(--muted);font-size:.72rem}
.site-design figure.is-wide{grid-column:1/-1}
@media(max-width:760px){.site-design{grid-template-columns:1fr;gap:.9rem}.site-design figure{border-radius:12px}}
/* Style guide: ajustes finos */
.sg-type-row{grid-template-columns:8.2rem minmax(0,1fr)}
.sg-type-row dl dd{white-space:normal;overflow:visible}
.sg-swatches span{box-shadow:inset 0 0 0 1px rgba(127,127,127,.18)}
.sg-panel.is-fill .sg-colors{flex:1;align-content:space-around}
.sg-comp{justify-content:flex-start}
.sg-group{flex:1;align-content:center}
.sg-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.sg-marks>span{display:flex;align-items:center;justify-content:center;min-width:0;height:4.2rem;padding:0 .5rem;border-radius:10px;overflow:hidden;white-space:nowrap}
.sg-marks img{height:1.35rem!important;width:auto;max-width:100%}
.sg-marks>span>span{font-size:.82rem!important;gap:.3rem!important}
.sg-marks>span>span b{width:1.15rem!important;height:1.15rem!important;font-size:.7rem!important}
.sg-type-row{grid-template-columns:7.2rem minmax(0,1fr)}
.sg-type-row>p{overflow-wrap:normal;hyphens:none}
.sg-panel.is-fill .sg-colors{flex:0;align-content:start}
.sg-col>.sg-panel:has(.sg-marks){flex:1}
.sg-col>.sg-panel.is-fill:has(.sg-colors){flex:0}
.sg-marks{flex:1;align-content:center}
.sg-marks>span>span{font-size:.72rem!important}
.sg-comp{justify-content:space-between}
.sg-group{flex:0 0 auto}
.sg-marks{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(3.6rem,1fr);gap:.5rem;flex:1}
.sg-marks>span{height:auto}
.sg-marks img{height:1.7rem!important}
.sg-marks>span>span{font-size:1.05rem!important;gap:.45rem!important}
.sg-marks>span>span b{width:1.5rem!important;height:1.5rem!important;font-size:.9rem!important}
.sg-col>.sg-panel:has(.sg-marks){display:flex;flex-direction:column}
@media(max-width:560px){.sg-type-row{grid-template-columns:1fr;gap:.5rem}.sg-type-row dl{grid-template-columns:repeat(4,minmax(0,1fr))}.sg-marks{grid-auto-rows:3.4rem}}
/* escala de texto: parágrafos maiores (variáveis em hub.css) */
.site-intro-side p{font-size:var(--fs-body)}
.site-features p{font-size:var(--fs-small)}
.hub-grid--sites .pcard-desc,.site-card .pcard-desc{font-size:var(--fs-small);line-height:1.55}
/* Link para a página de serviços, abaixo do botão de contato (cases e índice de sites) */
.cta-service-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:.75rem;color:var(--soft);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:color .2s}
.cta-service-link:hover{color:var(--fg)}
.cta-service-link i{transition:transform .3s var(--ease-out,ease)}
.cta-service-link:hover i{transform:translateX(3px)}