/*
 * Escala tipografica fluida da LP de Sites e Hosting.
 * Carregada depois dos estilos compartilhados e especificos da pagina.
 */

@media (min-width: 681px) {
  .sites-page .section-intro.centered > .eyebrow {
    width: 100%;
    max-width: none;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  :root {
    --content: 1320px;
    --sites-text-xs: clamp(0.6875rem, 0.58rem + 0.18vw, 0.8125rem);
    --sites-text-sm: clamp(0.8125rem, 0.68rem + 0.22vw, 0.9375rem);
    --sites-text-base: clamp(0.9375rem, 0.8rem + 0.22vw, 1.0625rem);
    --sites-text-md: clamp(1rem, 0.75rem + 0.4vw, 1.25rem);
    --sites-text-lg: clamp(1.125rem, 0.84rem + 0.42vw, 1.4375rem);
    --sites-ui-xs: clamp(0.5625rem, 0.48rem + 0.14vw, 0.6875rem);
    --sites-ui-sm: clamp(0.6875rem, 0.58rem + 0.18vw, 0.8125rem);
  }

  .sites-page {
    font-size: var(--sites-text-base);
  }

  .sites-page h2 {
    font-size: clamp(2.25rem, 1.9rem + 0.7vw, 3rem);
  }

  .sites-page .sites-hero h1 {
    font-size: clamp(3rem, 1.5rem + 3.4vw, 5.5rem);
  }

  .sites-page h3 {
    font-size: var(--sites-text-lg);
  }

  .sites-page .section-intro > p,
  .sites-page .section-intro > div > p:not(.eyebrow) {
    max-width: 38rem;
    font-size: var(--sites-text-base);
    line-height: 1.8;
  }

  .sites-page .eyebrow,
  .sites-page .hero .eyebrow {
    font-size: var(--sites-text-xs);
  }

  .sites-page .header-nav a,
  .sites-page .header-inner > .button,
  .sites-page .button,
  .sites-page .text-link {
    font-size: var(--sites-text-sm);
  }

  .sites-page .header-inner > .button {
    min-height: 48px;
    padding-inline: 20px;
  }

  .sites-page .button {
    min-height: 54px;
    padding: 15px 24px;
  }

  .sites-page .button i {
    font-size: 0.875em;
  }

  .sites-page .hero-lead {
    max-width: 40rem;
    font-size: var(--sites-text-md);
    line-height: 1.75;
  }

  .sites-page .hero-detail {
    max-width: 38rem;
    font-size: var(--sites-text-base);
    line-height: 1.75;
  }

  .sites-page .hero-actions > .button,
  .sites-page .hero-secondary {
    font-size: var(--sites-text-sm);
  }

  .sites-page .microcopy,
  .sites-page .hero-footer > .container > span,
  .sites-page .hero-footer > .container > div {
    font-size: var(--sites-text-xs);
  }

  .sites-page .browser-bar,
  .sites-page .website-demo figcaption,
  .sites-page .mock-proof span {
    font-size: var(--sites-ui-sm);
  }

  .sites-page .mock-nav-cta,
  .sites-page .mock-copy > span,
  .sites-page .mock-copy i,
  .sites-page .mock-mobile-nav,
  .sites-page .mock-mobile-copy small,
  .sites-page .mock-mobile-copy i {
    font-size: var(--sites-ui-xs);
  }

  .sites-page .mock-brand {
    font-size: var(--sites-text-sm);
  }

  .sites-page .mock-copy strong {
    font-size: clamp(1.5rem, 1.28rem + 0.38vw, 1.875rem);
  }

  .sites-page .mock-copy p {
    font-size: var(--sites-ui-sm);
  }

  .sites-page .mock-proof b {
    font-size: var(--sites-text-sm);
  }

  .sites-page .pillar-grid h3,
  .sites-page .solution-card h3,
  .sites-page .format-grid h3,
  .sites-page .hosting-grid h3,
  .sites-page .included-grid h3,
  .sites-page .scope-grid h3 {
    font-size: var(--sites-text-lg);
  }

  .sites-page .pillar-grid p,
  .sites-page .solution-card p,
  .sites-page .custom-solution p,
  .sites-page .experience-copy > p,
  .sites-page .format-best,
  .sites-page .format-edit p,
  .sites-page .hosting-grid p,
  .sites-page .included-grid p,
  .sites-page .scope-grid p,
  .sites-page .faq-intro > p:not(.eyebrow),
  .sites-page .faq-list details > p,
  .sites-page .contact-copy > p:not(.eyebrow),
  .sites-page .form-success > p {
    font-size: var(--sites-text-sm);
    line-height: 1.8;
  }

  .sites-page .pillar-index,
  .sites-page .item-index,
  .sites-page .solution-tag,
  .sites-page .format-number,
  .sites-page .format-edit span,
  .sites-page .format-grid article.featured::before,
  .sites-page .client-history > div span,
  .sites-page .portfolio-frame figcaption,
  .sites-page .client-history figcaption,
  .sites-page .scope-grid article > span {
    font-size: var(--sites-text-xs);
  }

  .sites-page .custom-solution h3,
  .sites-page .client-history > div strong {
    font-size: var(--sites-text-md);
  }

  .sites-page .custom-solution > .button,
  .sites-page .section-closing p,
  .sites-page .process-closing p,
  .sites-page .check-list li,
  .sites-page .technical-note {
    font-size: var(--sites-text-sm);
  }

  .sites-page .process-timeline h3 {
    font-size: var(--sites-text-base);
  }

  .sites-page .process-timeline p {
    font-size: var(--sites-text-sm);
  }

  .sites-page .step-number {
    font-size: var(--sites-text-xs);
  }

  .sites-page .faq-intro h2,
  .sites-page .contact-copy h2 {
    font-size: clamp(2.25rem, 1.95rem + 0.6vw, 2.9375rem);
  }

  .sites-page .experience-copy h2 {
    font-size: clamp(2.75rem, 2rem + 1.3vw, 3.875rem);
  }

  .sites-page .hosting-heading h2 {
    font-size: clamp(3rem, 2rem + 1.7vw, 4.375rem);
  }

  .sites-page .hosting-heading > p,
  .sites-page .hosting-cta p,
  .sites-page .scope-note p {
    font-size: var(--sites-text-base);
    line-height: 1.75;
  }

  .sites-page .faq-list summary {
    font-size: var(--sites-text-base);
  }

  .sites-page .contact-note p,
  .sites-page .form-intro > p,
  .sites-page .form-panel label,
  .sites-page .form-footnote,
  .sites-page .form-error,
  .sites-page .form-success pre,
  .sites-page .edit-form {
    font-size: var(--sites-text-sm);
  }

  .sites-page .form-label {
    font-size: var(--sites-text-xs);
  }

  .sites-page .form-intro h3,
  .sites-page .form-success h3 {
    font-size: clamp(1.5rem, 1.28rem + 0.38vw, 1.875rem);
  }

  .sites-page .form-panel input,
  .sites-page .form-panel select,
  .sites-page .form-panel textarea {
    min-height: 48px;
    font-size: var(--sites-text-base);
  }

  .sites-page .footer-main p,
  .sites-page .footer-main a:not(.brand-link),
  .sites-page .footer-contact > span,
  .sites-page .footer-contact .text-link,
  .sites-page .whatsapp-float {
    font-size: var(--sites-text-sm);
  }

  .sites-page .footer-bottom {
    font-size: var(--sites-text-xs);
  }
}

@media (min-width: 1500px) {
  :root {
    --content: 1380px;
    --section-space: 112px;
  }

  .sites-page .sites-hero .hero-inner {
    gap: 86px;
    padding-block: 110px 100px;
  }

  .sites-page .section-intro {
    margin-bottom: 56px;
  }

  .sites-page .form-panel {
    padding: 38px;
  }
}

@media (min-width: 1900px) {
  :root {
    --content: 1440px;
    --section-space: 120px;
  }
}

/*
 * Escala mobile voltada à leitura. Os títulos mantêm as medidas originais;
 * apenas textos, controles e metadados recebem mínimos mais confortáveis.
 */
@media (max-width: 680px) {
  :root {
    --sites-mobile-copy: 0.9375rem;
    --sites-mobile-control: 0.875rem;
    --sites-mobile-small: 0.78125rem;
    --sites-mobile-meta: 0.75rem;
  }

  .sites-page {
    font-size: 1rem;
    line-height: 1.7;
  }

  .sites-page .sites-hero h1 {
    font-size: clamp(2.55rem, 12vw, 3.75rem);
  }

  .sites-page h2,
  .sites-page .faq-intro h2 {
    font-size: 1.6875rem;
  }

  .sites-page .contact-copy h2 {
    font-size: 1.875rem;
  }

  .sites-page .experience-copy h2 {
    font-size: 2rem;
  }

  .sites-page .hosting-heading h2 {
    font-size: 2.25rem;
  }

  .sites-page .hero-lead {
    font-size: 1rem;
    line-height: 1.75;
  }

  .sites-page .hero-detail,
  .sites-page .section-intro > p,
  .sites-page .section-intro > div > p:not(.eyebrow),
  .sites-page .section-intro.centered > p:not(.eyebrow),
  .sites-page .pillar-grid p,
  .sites-page .solution-card p,
  .sites-page .custom-solution p,
  .sites-page .experience-copy > p,
  .sites-page .format-best,
  .sites-page .format-edit p,
  .sites-page .hosting-grid p,
  .sites-page .included-grid p,
  .sites-page .scope-grid p,
  .sites-page .hosting-heading > p,
  .sites-page .hosting-cta p,
  .sites-page .scope-note p,
  .sites-page .process-timeline p,
  .sites-page .section-closing p,
  .sites-page .process-closing p,
  .sites-page .faq-intro > p:not(.eyebrow),
  .sites-page .faq-list details > p,
  .sites-page .contact-copy > p:not(.eyebrow),
  .sites-page .form-success > p {
    font-size: var(--sites-mobile-copy);
    line-height: 1.75;
  }

  .sites-page .header-nav a,
  .sites-page .button,
  .sites-page .hero-actions > .button,
  .sites-page .hero-secondary,
  .sites-page .text-link,
  .sites-page .custom-solution > .button,
  .sites-page .experience-section .button,
  .sites-page .hosting-cta .button,
  .sites-page .process-closing > .button,
  .sites-page .contact-copy > .button,
  .sites-page .form-success .button,
  .sites-page .edit-form {
    font-size: var(--sites-mobile-control);
  }

  .sites-page .header-inner > .button {
    font-size: var(--sites-mobile-meta);
  }

  .sites-page .eyebrow,
  .sites-page .hero .eyebrow,
  .sites-page .microcopy,
  .sites-page .hero-footer > .container > span,
  .sites-page .hero-footer > .container > div,
  .sites-page .pillar-index,
  .sites-page .item-index,
  .sites-page .solution-tag,
  .sites-page .format-number,
  .sites-page .format-edit span,
  .sites-page .format-grid article.featured::before,
  .sites-page .client-history > div span,
  .sites-page .portfolio-frame figcaption,
  .sites-page .client-history figcaption,
  .sites-page .scope-grid article > span,
  .sites-page .step-number {
    font-size: var(--sites-mobile-meta);
    line-height: 1.65;
  }

  .sites-page .check-list li,
  .sites-page .technical-note,
  .sites-page .faq-list summary {
    font-size: var(--sites-mobile-control);
    line-height: 1.65;
  }

  .sites-page .form-intro > p,
  .sites-page .form-panel label,
  .sites-page .form-error,
  .sites-page .form-success pre,
  .sites-page .contact-note p {
    font-size: var(--sites-mobile-control);
    line-height: 1.7;
  }

  .sites-page .form-label,
  .sites-page .form-footnote {
    font-size: var(--sites-mobile-small);
    line-height: 1.65;
  }

  .sites-page .form-panel input,
  .sites-page .form-panel select,
  .sites-page .form-panel textarea {
    font-size: 1rem !important;
  }

  .sites-page .footer-main p,
  .sites-page .footer-main a:not(.brand-link),
  .sites-page .footer-contact > span,
  .sites-page .footer-contact .text-link {
    font-size: var(--sites-mobile-control);
    line-height: 1.7;
  }

  .sites-page .footer-bottom {
    font-size: var(--sites-mobile-small);
    line-height: 1.65;
  }

  .sites-page .browser-bar,
  .sites-page .website-demo figcaption,
  .sites-page .mock-copy p,
  .sites-page .mock-proof span {
    font-size: 0.625rem;
    line-height: 1.5;
  }

  .sites-page .mock-nav-cta,
  .sites-page .mock-copy > span,
  .sites-page .mock-copy i,
  .sites-page .mock-mobile-nav,
  .sites-page .mock-mobile-copy small,
  .sites-page .mock-mobile-copy i {
    font-size: 0.5rem;
  }
}

/* Experiência digital: leitura e contraste sobre o fundo roxo. */
.sites-page .experience-copy > p {
  color: rgba(255, 255, 255, 0.9);
}

.sites-page .experience-list {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sites-page .experience-list li {
  gap: 12px;
  margin: 0;
  padding: 12px 0 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  font-weight: 600;
  line-height: 1.55;
}

.sites-page .experience-list li:last-child {
  border-bottom: 0;
}

.sites-page .experience-list i {
  flex: 0 0 auto;
  color: var(--modu-yellow);
  font-size: 0.875rem;
}

.sites-page .turnstile-widget {
  width: 100%;
  min-height: 65px;
  margin: 4px 0 16px;
}

.sites-page .turnstile-widget iframe {
  max-width: 100%;
}