/*
  TAVO UX/UI audit — mobile-first refinements, November 2026.
  Design additions only: preserve site structure, original illustrations, official
  blue #12B4FF, content and desktop grid. Start with the smallest viewport and
  progressively enhance for tablets and desktop.
*/
:root {
  --touch-target: 44px;
}

/* Identidade visual aprovada: botões, títulos e detalhes azuis
   herdam as cores exatas do styles.css original.
   Azul principal #12B4FF, texto branco nos botões preenchidos;
   o título e os links mantêm o azul previamente aprovado. */
.button-blue:active {transform:translateY(0)}

/* Visible focus, without altering the approved resting design. */
:where(a,button,summary):focus-visible {
  outline: 3px solid #006B93;
  outline-offset: 4px;
  border-radius: 7px;
}
.button:focus-visible {outline-offset: 3px;border-radius:999px}
.mobile-menu-trigger:focus-visible {outline-offset: 2px}

/* Mobile is the starting point for the refined page. */
.mobile-menu-trigger {width:var(--touch-target);height:var(--touch-target)}
.mobile-nav:not([hidden]) {max-height: min(75vh, 600px);overflow-y:auto;overscroll-behavior:contain}
.mobile-nav a {display:flex;align-items:center;min-height:48px;padding-block:12px;font-size:15px}

.hero-description {font-size:15.5px;line-height:1.78}
.hero-buttons {display:grid;grid-template-columns:minmax(0,1fr);max-width:340px;gap:12px}
.hero-buttons .button {white-space:normal;min-height:50px;text-align:center;font-size:14px;line-height:1.4;padding:12px 16px}
.hero-highlights {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 16px}
.hero-highlights > div {flex-direction:row;align-items:flex-start;gap:10px;font-size:12.3px;line-height:1.52;font-weight:600;min-width:0}
.hero-highlights > div:not(:last-child) {padding-right:0;border-right:0}
.hero-highlights > div:last-child {grid-column:1 / -1}
.hero-highlights .icon {margin-top:1px;min-width:21px}

.how-section {padding-top:85px;padding-bottom:95px}
.section-intro.centered {margin-bottom:37px}
.section-intro p {font-size:15px;line-height:1.7}
.steps-grid {grid-template-columns:minmax(0,1fr);gap:18px}
.step-card {display:flex;flex-direction:column;border-radius:23px;min-height:0}
.step-art {height:164px;flex:none}
.step-body {min-height:0;padding:22px 23px 26px}
.step-label {font-size:11px;margin-bottom:12px;letter-spacing:.1em}
.step-body h3 {font-size:20px;line-height:1.4;margin-bottom:8px}
.step-body p {font-size:14px;line-height:1.7}

.clients-section,.pros-section {padding-top:94px;padding-bottom:102px}
.editorial-intro,.pro-intro {margin-bottom:38px}
.editorial-copy p {font-size:15.2px;line-height:1.8}
.editorial-illustration {max-width:100%}
.client-benefits,.professional-benefits {grid-template-columns:minmax(0,1fr);gap:15px}
.client-benefit,.professional-benefit {transition:transform .2s,box-shadow .2s}
.client-benefit {min-height:132px;padding:18px;gap:16px;flex-direction:row;align-items:center}
.client-artwork {flex:0 0 94px;width:94px;height:94px}
.client-body h3 {font-size:16.8px;line-height:1.4;margin-bottom:6px}
.client-body p {font-size:14px;line-height:1.65}
.professional-benefit {grid-template-columns:94px minmax(0,1fr);min-height:146px;gap:16px;padding:18px}
.professional-artwork {width:94px;height:98px}
.professional-benefit h3 {font-size:16.6px;line-height:1.42;margin-bottom:7px}
.professional-benefit p {font-size:14px;line-height:1.62}
.pro-footnote {gap:14px}
.pro-footnote strong {font-size:14px;line-height:1.5}
.pro-footnote p {font-size:13.8px;line-height:1.7}
.text-link {min-height:44px;align-items:center;font-size:13.7px}

.about-text p {font-size:14.7px;line-height:1.85}
.faq-copy p {font-size:15px;line-height:1.75}
.faq-questions summary {min-height:60px;font-size:15px;line-height:1.55;padding:17px 4px}
.faq-questions details p {font-size:14.5px;line-height:1.75}
.contact-box p {font-size:14.6px;line-height:1.75}
.footer-main nav a {display:inline-flex;align-items:center;min-height:40px;font-size:13.2px}
.footer-brand p {font-size:12.5px}
.footer-bottom p,.footer-privacy {font-size:12.3px;line-height:1.8}
.footer-privacy {scroll-margin-top:calc(var(--header) + 22px)}

/* Extra-small phones: preserve room for descriptions, not ornamental chrome. */
@media (max-width: 359px) {
  .shell {width:calc(100% - 32px)}
  .hero h1 {font-size:clamp(34px,10vw,38px)}
  .hero-highlights {gap:14px 11px}
  .hero-highlights > div {font-size:11.9px}
  .client-artwork {width:80px;flex-basis:80px;height:83px}
  .client-benefit {gap:13px;padding:16px}
  .client-body h3 {font-size:16px}
  .professional-benefit {grid-template-columns:80px minmax(0,1fr);gap:13px;padding:16px}
  .professional-artwork {width:80px;height:86px}
  .professional-benefit h3 {font-size:16px}
}

/* Larger phones: maintain a visual rhythm without tiny side-by-side descriptions. */
@media (min-width: 480px) {
  .hero-buttons {grid-template-columns:auto auto;max-width:none;justify-content:start}
  .hero-buttons .button {font-size:13.5px}
  .hero-highlights {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .hero-highlights > div:last-child {grid-column:auto}
}

/* Tablet: enhance the layout progressively while retaining readable cards. */
@media (min-width: 721px) {
  .hero-description {font-size:16px;line-height:1.9}
  .hero-buttons {display:flex;flex-wrap:wrap;max-width:none;gap:12px}
  .hero-buttons .button {min-height:56px;white-space:nowrap;font-size:13.5px}
  .hero-highlights {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .hero-highlights > div {flex-direction:row;font-size:12px}
  .hero-highlights > div:last-child {grid-column:auto}
  .steps-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .step-card {display:block;border-radius:26px}
  .step-art {height:155px}
  .step-body {padding:23px 20px 28px;min-height:220px}
  .step-body p {font-size:13.5px}
  .how-section {padding:115px 0 145px}
  .section-intro.centered {margin-bottom:62px}
  .clients-section,.pros-section {padding:135px 0 145px}
  .editorial-intro,.pro-intro {margin-bottom:70px}
  .client-benefits {grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
  .client-benefit {flex-direction:column;align-items:flex-start;min-height:225px;padding:20px;gap:14px}
  .client-artwork {width:112px;height:85px;flex-basis:auto}
  .client-body p {font-size:13.5px}
  .professional-benefits {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .professional-benefit {grid-template-columns:95px minmax(0,1fr);min-height:174px;padding:20px;gap:15px}
  .professional-artwork {width:95px;height:95px}
  .professional-benefit p {font-size:13.7px}
  .faq-questions summary {font-size:15px}
}

/* Desktop refinements only; preserve the approved artwork sizes and grids. */
@media (min-width: 1024px) {
  .steps-grid {gap:26px}
  .step-art {height:197px}
  .step-body {padding:29px 29px 34px}
  .step-body p {font-size:14px}
  .client-benefits {gap:25px}
  .client-benefit {flex-direction:row;align-items:center;min-height:158px;padding:23px;gap:18px}
  .client-artwork {flex:0 0 100px;width:100px;height:100px}
  .client-body p {font-size:13.8px}
  .professional-benefits {gap:23px}
  .professional-benefit {grid-template-columns:124px minmax(0,1fr);gap:22px;min-height:174px;padding:22px 27px 22px 22px}
  .professional-artwork {width:122px;height:112px}
  .professional-benefit p {font-size:14px}
  .about-text p {font-size:14.7px}
}

/* Respect touch interaction and reduced-motion preferences. */
@media (hover: none) {
  .step-card:hover,.client-benefit:hover,.professional-benefit:hover,.button:hover {transform:none}
}
@media (prefers-reduced-motion: reduce) {
  .button,.step-card,.client-benefit,.professional-benefit {transition:none}
}

/* Final touch-target pass. The original top navigation used 21px-high links. */
.desktop-nav a {
  display:inline-flex;
  align-items:center;
  min-height:42px;
  font-size:13px;
}
.desktop-nav a.current::after {bottom:2px}
.footer-brand a {display:inline-flex;align-items:center;min-height:44px}
@media (max-width:720px) {
  .footer-main nav a {min-height:44px}
  .footer-bottom p,.footer-privacy {font-size:13px}
  .footer-brand p {font-size:13px}
  .hero-highlights > div {font-size:12.6px}
}

/* Text legibility refinements that do not change brand/control colors. */
.footer-bottom p,.footer-privacy {color:#52647D}


/* TAVO | Enquadramento das ilustrações originais (sem filtros, geração ou reamostragem).
   Ajuste exclusivo nos 10 cards ilustrados, em mobile, tablet e desktop. */
/* Na trilha Como funciona, a imagem determina sua altura na proporção nativa.
   Assim não se perde parte do rosto, do calendário, das estrelas ou do ambiente. */
.step-art {
  display:block;
  height:auto;
  aspect-ratio:626 / 328;
  overflow:hidden;
}
.step-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:626 / 328;
  object-fit:contain;
  object-position:center;
  max-width:100%;
  filter:none;
}
/* As miniaturas de Clientes e Profissionais têm composição mais larga que seus
   porta-imagens. contain preserva tudo; branco evita retângulo azulado artificial. */
.client-artwork,.professional-artwork {
  background:#fff;
  overflow:hidden;
}
.client-artwork img,.professional-artwork img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:none;
  transform:none;
}