/* ==========================================================
   AJUSTE PREMIUM DE LEGIBILIDADE + HOME COM FOTO PESSOAL
   Raphael Jardim Italiano
   Objetivo: ampliar a escala tipográfica sem perder sofisticação.
   ========================================================== */

:root{
  --readable-body: 18px;
  --readable-body-mobile: 17px;
}

/* Escala base */
html{
  font-size: var(--readable-body) !important;
  -webkit-text-size-adjust: 100% !important;
}

body{
  font-size: 1rem !important;
  line-height: 1.78 !important;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Textos corridos: maior e mais confortável */
p,
li,
td,
blockquote,
.card p,
.card li,
.step p,
.section-head p,
.hero p,
.notice,
.table td,
.bloco-texto,
.texto,
.lead-text,
.product-copy,
.page p,
main p,
main li{
  font-size: 1.05rem !important;
  line-height: 1.78 !important;
}

/* Textos auxiliares que estavam pequenos demais */
.eyebrow,
.kicker,
.level,
.badge,
.pill,
.tag,
.capa-label,
.bloco-label,
.alerta-label,
.section-num,
.section-number,
.card .eyebrow{
  font-size: .86rem !important;
  line-height: 1.35 !important;
  letter-spacing: .13em !important;
}

/* Botões e navegação com mais presença e leitura */
.btn,
button,
input,
select,
textarea{
  font-size: .98rem !important;
  line-height: 1.25 !important;
}

.site-header .site-nav a:not(.nav-cta):not(.btn-ouro),
.nav-links,
.nav-links a,
.site-header .nav-cta,
.site-header .btn-ouro,
.nav-cta{
  font-size: .82rem !important;
  line-height: 1.2 !important;
}

/* Marca no header mais legível */
.brand,
.site-header .brand-name{
  font-size: 1.36rem !important;
}

.brand small,
.site-header .brand-method{
  font-size: .68rem !important;
}

/* Títulos com escala generosa, sem exagerar */
h2,
.section-head h2{
  font-size: clamp(2.55rem, 4.8vw, 4.45rem) !important;
  line-height: 1.02 !important;
}

h3,
.card h3,
.step h3{
  font-size: clamp(1.65rem, 2.25vw, 2.15rem) !important;
  line-height: 1.08 !important;
}

.hero h1{
  font-size: clamp(3.35rem, 6.8vw, 7.2rem) !important;
  line-height: .98 !important;
}

.hero .lead{
  font-size: clamp(1.45rem, 2.45vw, 2rem) !important;
  line-height: 1.34 !important;
}

/* Mais respiro em cards e seções */
.card,
.step,
.notice,
.table th,
.table td{
  padding-top: 1.15em !important;
  padding-bottom: 1.15em !important;
}

.card{
  padding: 30px !important;
}

.section-head{
  margin-bottom: 36px !important;
}

/* Home: composição premium com foto pessoal */
.home-hero-card{
  padding: 30px !important;
}

.home-hero-media{
  position: relative;
  padding-bottom: 58px;
  margin-bottom: 18px;
}

.home-hero-main img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.20);
  margin-bottom: 0 !important;
}

.home-hero-portrait{
  position: absolute;
  right: 24px;
  bottom: 0;
  width: min(38%, 190px);
  min-width: 138px;
  display: block;
}

.home-hero-portrait img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(200,169,106,.70);
  background: #0e2c26;
  box-shadow: 0 24px 58px rgba(0,0,0,.34);
  margin: 0 !important;
}

.home-hero-card p{
  margin-top: 0 !important;
  padding-right: 2px;
}

.home-hero-card strong{
  font-size: 1.02em;
}

@media (max-width: 960px){
  .home-hero-media{
    max-width: 680px;
  }
}

@media (max-width: 700px){
  html{
    font-size: var(--readable-body-mobile) !important;
  }

  p,
  li,
  td,
  blockquote,
  .card p,
  .card li,
  .step p,
  .section-head p,
  .hero p,
  main p,
  main li{
    font-size: 1.03rem !important;
    line-height: 1.74 !important;
  }

  .hero h1{
    font-size: clamp(3rem, 15vw, 5.15rem) !important;
    line-height: 1.01 !important;
  }

  h2,
  .section-head h2{
    font-size: clamp(2.2rem, 10vw, 3.35rem) !important;
  }

  .card{
    padding: 26px !important;
  }

  .home-hero-card{
    padding: 24px !important;
  }

  .home-hero-media{
    padding-bottom: 48px;
  }

  .home-hero-portrait{
    right: 16px;
    width: min(42%, 160px);
    min-width: 122px;
  }

  .site-header .site-nav a:not(.nav-cta):not(.btn-ouro),
  .site-header.menu-open .site-nav a,
  .site-header.menu-open nav.site-nav a{
    font-size: .82rem !important;
    letter-spacing: .10em !important;
  }
}

@media (max-width: 430px){
  .brand,
  .site-header .brand-name{
    font-size: 1.16rem !important;
  }

  .brand small,
  .site-header .brand-method{
    font-size: .58rem !important;
  }

  .hero h1{
    font-size: clamp(2.75rem, 14.5vw, 4.45rem) !important;
  }

  .hero .lead{
    font-size: 1.32rem !important;
  }
}