/* Hubs de serviços — mobile-first, premium B2B (servicos/*.html) */

.service-page {
    --pillar-accent: var(--color-primary);
    --service-section-gap: clamp(1.5rem, 4vw, 2.75rem);
    --service-readable: min(60ch, 100%);
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
}

.service-page,
.service-page .container {
    max-width: 100%;
}

.service-page .seo-hero h1,
.service-page .pillar-title {
    transform: none;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.service-page .seo-breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    margin-left: calc(-1 * var(--space-s));
    margin-right: calc(-1 * var(--space-s));
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

.service-page .seo-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.service-page .seo-breadcrumbs a,
.service-page .seo-breadcrumbs span {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* —— Hero com visual —— */
.service-hero {
    margin-bottom: var(--space-s);
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--color-border);
}

.service-hero .seo-lead {
    max-width: var(--service-readable);
    line-height: 1.6;
    margin-bottom: var(--space-s);
}

.service-hero-highlights {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 var(--space-s);
    padding: 0;
    list-style: none;
    max-width: var(--service-readable);
}

.service-hero-highlights li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.45;
}

.service-hero-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.service-hero-price {
    margin: 0 0 var(--space-s);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.service-hero-price strong {
    color: var(--color-primary);
    font-size: 1.125rem;
}

.service-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 22rem;
}

.service-hero-actions .btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
}

/* —— Barra de confiança —— */
.service-trust-bar {
    margin-bottom: var(--service-section-gap);
    padding: var(--space-s) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}

.service-trust-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-trust-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.35;
}

.service-trust-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.85;
    mask: 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'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat;
    -webkit-mask: 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'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* —— Seções —— */
.service-page .pillar-block,
.service-page .pillar-split,
.service-page .pillar-metrics,
.service-page .service-portfolio,
.service-page .service-mid-cta,
.service-page .pillar-callout,
.service-page .service-steps {
    margin-bottom: var(--service-section-gap);
}

.service-page .pillar-title {
    margin-bottom: var(--space-s);
    line-height: 1.25;
}

.service-page .pillar-intro {
    max-width: var(--service-readable);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.service-page .pillar-split-copy p {
    max-width: var(--service-readable);
    line-height: 1.65;
}

.service-hero--has-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.service-hero-inner {
    flex: 1;
    min-width: 0;
}

.service-hero-visual {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-primary-subtle);
}

.service-hero-visual-img {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    object-fit: cover;
}

.service-hero-visual-img--wide {
    max-width: 640px;
    aspect-ratio: 640 / 280;
}

.service-hero-visual-img--accent {
    max-width: 360px;
    aspect-ratio: 360 / 240;
}

.service-hero-visual--compact .service-hero-visual-img,
.service-picture--hero .service-hero-visual-img {
    max-width: 100%;
    aspect-ratio: 480 / 320;
}

.service-picture {
    display: block;
    margin: 0;
    max-width: 100%;
}

.service-picture--hero {
    width: 100%;
}

.service-visual-wide-img,
.pillar-visual-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.service-visual-wide .service-visual-wide-img {
    max-width: 640px;
    aspect-ratio: 640 / 280;
}

.service-visual-accent .pillar-visual-img {
    max-width: 360px;
    aspect-ratio: 360 / 240;
}

.service-portfolio-img {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

.service-visual-wide,
.service-visual-accent {
    margin: 0 0 var(--space-m);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-primary-wash);
}

.service-visual-wide .service-visual-wide-img,
.service-visual-wide .pillar-visual-img {
    aspect-ratio: 640 / 280;
}

.service-visual-accent .pillar-visual-img {
    aspect-ratio: 360 / 240;
}

/* —— Benefícios —— */
.service-benefits-grid {
    display: grid;
    gap: var(--space-s);
}

.service-benefit-card {
    padding: var(--space-s) 0;
    padding-left: calc(var(--space-s) + 2rem);
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    position: relative;
}

/* Bolinha marcador elegante para cards e itens sem ícone definido */
.service-benefit-card::before {
    content: "";
    position: absolute;
    left: var(--space-s);
    top: calc(var(--space-s) + 0.25rem);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-primary, #2563EB);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    border: none;
}

/* Quando houver ícone SVG definido (ex: shield), exibe o ícone */
.service-benefit-card[data-icon="shield"]::before {
    top: var(--space-s);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    box-shadow: none;
    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='2'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 9-8 9s-8-4-8-9V7l8-4z'/%3E%3C/svg%3E") center / 65% no-repeat;
    -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='2'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 9-8 9s-8-4-8-9V7l8-4z'/%3E%3C/svg%3E") center / 65% no-repeat;
    background: var(--color-primary, #2563EB);
}

/* Nos locais que pedem ícones que não têm (chart, bolt, device), garante a bolinha marcador */
.service-benefit-card[data-icon="chart"]::before,
.service-benefit-card[data-icon="bolt"]::before,
.service-benefit-card[data-icon="device"]::before {
    content: "";
    top: calc(var(--space-s) + 0.25rem);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-primary, #2563EB);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    border: none;
    mask: none;
    -webkit-mask: none;
}

.service-benefits-grid h3,
.service-benefit-card h3 {
    font-size: 1rem;
    margin: 0 0 0.35rem;
    color: var(--color-primary);
}

.service-benefits-grid p,
.service-benefit-card p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

/* —— Setores —— */
.service-sector-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-sector-tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
}

/* —— Tecnologias —— */
.service-tech-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-tech-list li {
    padding: 0.65rem 0;
    border-left: 2px solid var(--color-primary);
    padding-left: 0.85rem;
    background: transparent;
    font-size: 0.9375rem;
}

/* —— Depoimentos —— */
.service-testimonials-grid {
    display: grid;
    gap: var(--space-s);
}

.service-testimonial {
    margin: 0;
    padding: var(--space-m);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-left: 4px solid var(--color-primary);
}

.service-stars {
    display: block;
    margin-bottom: 0.5rem;
    color: #D97706;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
}

.service-testimonial p {
    margin: 0 0 var(--space-s);
    font-size: 1rem;
    line-height: 1.6;
    font-style: normal;
}

.service-testimonial footer {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
}

.service-testimonial cite {
    font-style: normal;
    font-weight: 700;
    color: var(--color-primary);
}

.service-testimonial span {
    color: var(--color-text-muted);
}

/* —— EEAT —— */
.service-eeat-grid {
    display: grid;
    gap: var(--space-m);
}

.service-eeat-item {
    padding: 0;
}

.service-eeat-item h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.service-eeat-item p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: var(--service-readable);
}

/* —— Links internos —— */
.service-related-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-related-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface, #fff);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.service-related-nav a:hover {
    background: var(--color-primary-subtle);
    border-color: var(--color-primary);
}

/* —— Portfólio —— */
.service-portfolio {
    margin-bottom: var(--space-m);
}

.service-portfolio-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

.service-portfolio-grid,
.service-portfolio-cards {
    display: grid;
    gap: var(--space-m);
}

.service-portfolio-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-surface, #fff);
}

.service-portfolio-media {
    margin: 0;
    background: var(--color-primary-wash);
}

.service-portfolio-body {
    padding: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.service-portfolio-body h3 {
    margin: 0;
    font-size: 1.125rem;
}

.service-portfolio-body p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.service-portfolio-result {
    font-size: 0.875rem !important;
}

.service-portfolio-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
}

.service-portfolio-link--muted {
    color: var(--color-text-muted);
    font-weight: 500;
}

.service-portfolio-scroll {
    display: flex;
    gap: var(--space-s);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    margin-left: calc(-1 * var(--space-s));
    margin-right: calc(-1 * var(--space-s));
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

.service-portfolio-slide {
    flex: 0 0 min(85vw, 320px);
    scroll-snap-align: start;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    background: var(--color-surface, #fff);
}

.service-portfolio-slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.service-portfolio-slide-copy {
    padding: var(--space-s);
}

.service-portfolio-slide-copy h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.service-portfolio-slide-copy p {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.service-portfolio-slide-copy a {
    font-weight: 600;
    font-size: 0.875rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.service-case-grid {
    display: grid;
    gap: var(--space-s);
}

.service-case-card {
    padding: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-primary-subtle);
}

.service-case-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
}

.service-case-card p {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.service-before-after-list {
    display: grid;
    gap: var(--space-m);
}

.service-before-after {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.service-before-after-copy {
    padding: var(--space-s);
}

.service-before-after-copy h3 {
    margin: 0 0 var(--space-s);
}

.service-before-after-cols {
    display: grid;
    gap: var(--space-s);
    margin-bottom: var(--space-s);
}

.service-before-after-cols h4 {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.service-before-after-cols p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

/* —— Blocos pillar (processo, dor, timeline, etc.) —— */
.service-page .pillar-kicker {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.service-page .pillar-block,
.service-page .pillar-split,
.service-page .service-timeline,
.service-page .service-facts,
.service-page .service-compare,
.service-page .service-sectors,
.service-page .service-examples,
.service-page .service-results,
.service-page .service-related,
.service-page .service-eeat,
.service-page .service-cities,
.service-page .pillar-details {
    margin-bottom: var(--service-section-gap);
}

.service-page .pillar-process-cards,
.service-page .pillar-pain-grid,
.service-page .pillar-deliver-grid,
.service-page .cluster-compare-grid,
.service-page .cluster-facts-list {
    display: grid;
    gap: 0.5rem;
}

.service-page .pillar-process-cards article,
.service-page .pillar-pain-card,
.service-page .pillar-deliver-item,
.service-page .cluster-compare-card,
.service-page .cluster-facts-row {
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-background);
}

.service-page .pillar-process-cards article span,
.service-page .pillar-pain-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 1.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border-radius: 4px;
}

.service-page .pillar-process-cards h3,
.service-page .pillar-pain-card h3,
.service-page .pillar-deliver-item strong,
.service-page .cluster-compare-card h3 {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--color-primary);
}

.service-page .pillar-process-cards p,
.service-page .pillar-pain-card p,
.service-page .pillar-deliver-item span,
.service-page .cluster-compare-card li,
.service-page .cluster-facts-row dd {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.service-page .pillar-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.service-page .pillar-timeline li {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7rem) 1fr;
    gap: 0.65rem;
    align-items: start;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-subtle);
    border-radius: 0 4px 4px 0;
}

.service-page .pillar-timeline strong {
    font-size: 0.75rem;
    color: var(--color-primary);
}

.service-page .pillar-timeline span {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.service-page .pillar-checklist {
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.service-page .pillar-checklist li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text);
}

.service-page .pillar-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.service-page .pillar-callout {
    margin-bottom: var(--service-section-gap);
    padding: 0.75rem 0.85rem;
    border-left: 3px solid var(--color-primary);
    background: var(--color-primary-subtle);
    border-radius: 0 4px 4px 0;
}

.service-page .pillar-callout p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text);
}

.service-page .pillar-steps-compact {
    display: grid;
    gap: 0.5rem;
    margin-bottom: var(--service-section-gap);
}

.service-page .pillar-steps-compact article {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.service-page .pillar-steps-compact strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.875rem;
    color: var(--color-primary);
}

.service-page .pillar-steps-compact p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.service-page .cluster-facts-row {
    display: grid;
    gap: 0.15rem;
}

.service-page .cluster-facts-row dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
}

.service-page .cluster-compare-grid {
    grid-template-columns: 1fr;
}

.service-page .cluster-compare-card--highlight {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}

.service-page .pillar-path-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-dim);
}

.service-page .pillar-path-list {
    margin: 0 0 0.65rem;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.service-page .pillar-cluster-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.25rem;
    margin-inline: calc(-1 * var(--space-s));
    padding-inline: var(--space-s);
}

.service-page .pillar-cluster-pill {
    flex: 0 0 min(78vw, 260px);
    scroll-snap-align: start;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-background);
}

.service-page .pillar-cluster-pill h3 {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
}

.service-page .pillar-cluster-pill p {
    margin: 0 0 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.service-page .pillar-cluster-pill a {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.service-page .pillar-details {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-background);
}

.service-page .pillar-details summary {
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.service-page .pillar-details-body {
    padding: 0 0.85rem 0.85rem;
}

.service-page .pillar-details-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.service-page .pillar-details-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary);
}

.service-page .seo-tx-card {
    margin-bottom: var(--space-s);
}

.service-page .seo-tx-card__footer {
    padding: 0.55rem 0.65rem;
}

.service-page .seo-virtual-banner--micro {
    margin-bottom: var(--space-s);
}

/* —— Blocos existentes —— */
.service-metrics,
.service-split,
.service-callout,
.service-steps,
.service-process {
    margin-bottom: var(--space-m);
}

.service-kit-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-s);
    padding: var(--space-m);
    margin: var(--space-m) 0;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-primary-subtle);
    text-align: center;
}

.service-kit-cta p {
    margin: 0;
    font-weight: 600;
}

.service-kit-cta .btn,
.service-kit-cta .pillar-cta-wa {
    width: 100%;
    min-height: 44px;
}

.service-kit-cta .pillar-cta-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.service-cities .pillar-intro {
    margin-bottom: var(--space-s);
    color: var(--color-text-muted);
}

.service-city-grid {
    gap: var(--space-s);
}

.service-city-card .seo-card-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.service-faq details {
    min-height: 44px;
}

.service-faq summary {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.service-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* —— CTA intermediário e final —— */
.service-mid-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-m);
    border-radius: 4px;
    border: 2px solid var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary-subtle) 0%, var(--color-background) 100%);
}

.service-mid-cta-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    line-height: 1.3;
    color: var(--color-text);
}

.service-mid-cta-copy p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    max-width: var(--service-readable);
}

.service-mid-cta-actions,
.service-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-mid-cta-actions .btn,
.service-cta-actions .btn {
    min-height: 48px;
    justify-content: center;
}

/* —— BLOCO COMPLETO E DEFINITIVO PARA .service-cta-final (TODAS AS PÁGINAS DE SERVIÇOS) —— */
div.seo-cta[class*="service-cta-final"],
.service-page .service-cta-final,
.seo-cta.service-cta-final {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: var(--service-section-gap, 2.5rem) !important;
    margin-bottom: var(--service-section-gap, 2.5rem) !important;
    padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem) !important;
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border: 2px solid #2563EB !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

div.seo-cta[class*="service-cta-final"] h2,
.service-page .service-cta-final h2,
.seo-cta.service-cta-final h2 {
    color: #0F172A !important;
    font-size: clamp(1.25rem, 4.5vw, 1.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 0 0.75rem 0 !important;
    max-width: 28ch !important;
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
}

div.seo-cta[class*="service-cta-final"] > p:not(.service-cta-note),
.service-page .service-cta-final > p:not(.service-cta-note),
.seo-cta.service-cta-final > p:not(.service-cta-note) {
    color: #334155 !important;
    font-size: clamp(0.9375rem, 3vw, 1.0625rem) !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem 0 !important;
    max-width: 50ch !important;
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
}

div.seo-cta[class*="service-cta-final"] .service-cta-actions,
.service-page .service-cta-final .service-cta-actions,
.seo-cta.service-cta-final .service-cta-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    flex: none !important;
}

@media (min-width: 640px) {
    div.seo-cta[class*="service-cta-final"] .service-cta-actions,
    .service-page .service-cta-final .service-cta-actions,
    .seo-cta.service-cta-final .service-cta-actions {
        flex-direction: row !important;
        align-items: center !important;
        max-width: none !important;
        width: auto !important;
        gap: 1rem !important;
    }
}

div.seo-cta[class*="service-cta-final"] .service-cta-actions .btn,
.service-page .service-cta-final .service-cta-actions .btn,
.seo-cta.service-cta-final .service-cta-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    margin: 0 !important;
    flex: none !important;
}

div.seo-cta[class*="service-cta-final"] .service-cta-actions .btn-primary,
.service-page .service-cta-final .service-cta-actions .btn-primary,
.seo-cta.service-cta-final .service-cta-actions .btn-primary {
    background: #2563EB !important;
    background-color: #2563EB !important;
    color: #FFFFFF !important;
    border: 2px solid #2563EB !important;
}

div.seo-cta[class*="service-cta-final"] .service-cta-actions .btn-primary:hover,
.service-page .service-cta-final .service-cta-actions .btn-primary:hover,
.seo-cta.service-cta-final .service-cta-actions .btn-primary:hover {
    background: #1D4ED8 !important;
    background-color: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #FFFFFF !important;
}

div.seo-cta[class*="service-cta-final"] .service-cta-actions .btn-secondary,
.service-page .service-cta-final .service-cta-actions .btn-secondary,
.seo-cta.service-cta-final .service-cta-actions .btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #2563EB !important;
    color: #2563EB !important;
}

div.seo-cta[class*="service-cta-final"] .service-cta-actions .btn-secondary:hover,
.service-page .service-cta-final .service-cta-actions .btn-secondary:hover,
.seo-cta.service-cta-final .service-cta-actions .btn-secondary:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

div.seo-cta[class*="service-cta-final"] .service-cta-note,
.service-page .service-cta-final .service-cta-note,
.seo-cta.service-cta-final .service-cta-note {
    color: #64748B !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin: 1.25rem 0 0 0 !important;
    max-width: none !important;
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
}

/* Sticky mobile CTA — substituído por css/components/mobile-wa-dropup.css */

/* —— FAQ escaneável —— */
.service-faq h2 {
    margin-bottom: var(--space-s);
}

.service-faq details {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 0.5rem;
    background: var(--color-surface, #fff);
}

.service-faq details[open] {
    border-color: var(--color-primary);
}

.service-faq summary {
    padding: 0 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.service-faq details p {
    margin: 0;
    padding: 0 0.85rem 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: var(--service-readable);
}

/* —— Métricas no topo —— */
.service-page .service-metrics {
    padding: var(--space-s);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface, #fff);
}

.service-page .pillar-metric strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-primary);
}

.service-page .pillar-metric span {
    font-size: 0.8125rem;
    line-height: 1.4;
}

@media (min-width: 640px) {
    .service-page .cluster-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-page .pillar-process-cards,
    .service-page .pillar-pain-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
    }

    .service-hero-actions .btn {
        width: auto;
        flex: 0 1 auto;
    }

    .service-trust-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-mid-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .service-mid-cta-actions,
    .service-cta-actions {
        flex-direction: row;
        flex-shrink: 0;
    }

    .service-hero--has-visual {
        flex-direction: row;
        align-items: center;
    }

    .service-hero-visual--compact {
        flex: 0 0 min(42%, 280px);
    }

    .service-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-before-after-cols {
        grid-template-columns: 1fr 1fr;
    }

    .service-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-kit-cta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .service-kit-cta p {
        flex: 1 1 100%;
        text-align: center;
    }

    .service-kit-cta .btn,
    .service-kit-cta .pillar-cta-wa {
        width: auto;
    }
}

@media (min-width: 768px) {
    .service-eeat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-l);
    }

    .service-trust-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .service-page {
        padding-bottom: calc(var(--space-m) + env(safe-area-inset-bottom, 0px));
    }

    .service-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-before-after {
        flex-direction: row;
    }

    .service-before-after .service-portfolio-media {
        flex: 0 0 45%;
    }

    .service-before-after-copy {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .service-city-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.service-hero--stacked {
    flex-direction: column;
}

.service-hero--stacked .service-hero-visual {
    width: 100%;
    margin-top: var(--space-s);
}

.service-hero--text-only .service-hero-inner {
    max-width: 48rem;
}

.service-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 var(--space-s);
    max-width: 28rem;
}

.service-hero-metric {
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-primary-subtle);
}

.service-hero-metric strong {
    display: block;
    font-size: 1rem;
    color: var(--color-primary);
}

.service-hero-metric span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.service-examples-grid {
    display: grid;
    gap: var(--space-s);
}

.service-examples-grid article {
    padding: var(--space-s);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface, #fff);
    border-radius: 0 4px 4px 0;
}

.service-examples-grid h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: var(--color-primary);
}

.service-examples-grid p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.service-cta-final--presenca-digital {
    border-color: var(--color-primary);
}

@media (min-width: 640px) {
    .service-hero-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: none;
    }

    .service-examples-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .service-examples-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .service-hero--has-visual {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-l);
    }

    .service-hero-visual {
        flex: 0 1 42%;
        max-width: 640px;
    }

    .service-hero-visual-img,
    .service-picture--hero .service-hero-visual-img {
        max-width: 100%;
    }
}

/* —— Mobile first: 360px a 480px —— */
@media (max-width: 479px) {
    .service-page {
        --service-section-gap: 1.25rem;
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }

    .service-page .seo-tx-card__visual {
        display: none;
    }

    .service-page .seo-tx-card {
        border-radius: 4px;
    }

    .service-page .seo-tx-card__headline {
        font-size: 0.8125rem;
    }

    .service-page .seo-tx-card__price {
        font-size: 0.9375rem;
    }

    .service-page .seo-tx-card__wa,
    .service-page .seo-tx-card__detail {
        font-size: 0.6875rem;
        padding: 0.45rem 0.55rem;
        min-height: 40px;
    }

    .service-page .container {
        padding-inline: clamp(0.875rem, 4.2vw, 1.125rem);
    }

    .service-hero {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .service-hero-highlights {
        gap: 0.3rem;
        margin-bottom: 0.65rem;
    }

    .service-hero-highlights li {
        font-size: 0.875rem;
    }

    .service-hero-price {
        margin-bottom: 0.65rem;
    }

    .service-trust-bar {
        margin-bottom: var(--service-section-gap);
        padding: 0.5rem 0;
    }

    .service-hero h1 {
        font-size: clamp(1.3125rem, 5.8vw, 1.75rem);
        line-height: 1.18;
        margin-bottom: 0.75rem;
        max-width: 100%;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .service-hero .seo-lead {
        font-size: clamp(0.9375rem, 3.4vw, 1rem);
        line-height: 1.62;
    }

    .service-page .pillar-title {
        font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
        line-height: 1.28;
    }

    .service-page .pillar-intro,
    .service-page .pillar-split-copy p {
        font-size: 0.9375rem;
    }

    .service-page .pillar-block,
    .service-page .pillar-split,
    .service-page .service-portfolio {
        margin-bottom: var(--service-section-gap);
    }

    .service-benefit-card {
        padding: 0.65rem 0;
        padding-left: calc(0.65rem + 1.75rem);
    }

    .service-testimonial {
        padding: 0.75rem;
    }

    .service-portfolio-body {
        padding: 0.65rem;
    }

    .service-portfolio-grid,
    .service-portfolio-cards {
        gap: 0.65rem;
    }

    .service-hero-actions {
        max-width: none;
        width: 100%;
    }

    .service-hero-actions .btn {
        min-height: 48px;
        font-size: 0.9375rem;
    }

    .service-mid-cta {
        padding: var(--space-s);
        border-width: 1px;
        background: var(--color-background);
        gap: 0.65rem;
    }

    /* override consolidado nas regras principais */

    .service-process .pillar-process-cards {
        gap: 0.5rem;
    }

    .service-process .pillar-process-cards article {
        padding: 0.75rem;
    }

    .service-pain .pillar-pain-grid {
        gap: 0.5rem;
    }

    .service-pain .pillar-pain-card {
        padding: 0.75rem;
    }

    .service-hero-metrics {
        gap: 0.4rem;
    }

    .service-hero-metric {
        padding: 0.45rem 0.55rem;
    }

    .service-trust-list {
        gap: 0.35rem;
    }

    .service-trust-list li {
        font-size: 0.75rem;
    }

    .service-portfolio-slide {
        flex: 0 0 min(88vw, 300px);
    }
}

/* —— Acessibilidade —— */
.service-page :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.service-page .btn:focus-visible,
.service-related-nav a:focus-visible,
.service-faq summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .service-page * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    .service-trust-bar,
    .service-mid-cta,
    .service-page .service-cta-final,
    .service-faq details {
        border-width: 2px;
    }
}

@media (min-width: 992px) {
    .service-page {
        --service-section-gap: 5rem;
    }

    .service-page .container {
        max-width: 1440px;
        margin: 0 auto;
        padding-inline: var(--space-m);
    }
}