/* Marartes - sections.css: layout de cada seção (mobile primeiro) */

/* ---------- Hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;padding-inline:var(--gutter)}
.hero__logo{height:min(21rem,32svh);width:auto;max-width:80vw;filter:drop-shadow(0 .3rem 1.2rem rgba(255,255,255,.55))}
.hero__titulo{font-size:clamp(1.4rem,5vw,2.4rem);color:var(--preto);text-shadow:0 0 .6rem rgba(255,255,255,.95),0 0 1.8rem rgba(255,255,255,.9);max-width:20ch}
/* o conteúdo do hero fica acima do ponto onde o botão flutuante repousa */
.panel--hero{align-items:flex-end;padding-bottom:6.5rem}
@media (min-width:768px){
  .panel--hero{padding-bottom:calc(var(--cta-bottom) + 3.4rem + 1.6rem)}
  .hero__titulo{font-size:clamp(1.4rem,3.2vw,2.4rem)}
}

/* ---------- Estrutura comum dos 4 cards de seção ---------- */
/* Faixa estreita à esquerda (título na vertical) + conteúdo largo à direita.
   Mesma largura, altura, margens e linha de partida em todos. */
.sec{display:grid;gap:1.25rem;padding:1.5rem}
.rail h2{font-size:clamp(1.7rem,6vw,2.2rem)}
.sec__corpo{min-height:0}
@media (min-width:768px){
  .sec{width:var(--larg-secao);height:min(100%,var(--card-max-h));grid-template-columns:5rem minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:1.5rem;padding:var(--pad-card)}
  .rail{writing-mode:vertical-rl;transform:rotate(180deg);text-align:end;align-self:stretch}
  .rail h2{font-size:2.2rem;line-height:1.15}
  .rail .eyebrow{margin-inline-end:.45rem;font-size:.72rem}
  .rail .eyebrow::before{display:none}
  .rail .eyebrow{justify-content:flex-end}
}

/* ---------- Serviços ---------- */
.servicos__lista{display:grid;gap:1rem;grid-template-columns:1fr}
.servicos__lista .tile{min-height:21rem}
@media (min-width:768px){
  .servicos__lista{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:1.25rem}
  .servicos__lista .tile{min-height:0;padding:1.6rem}
  .tile h3{font-size:1.3rem}
}

/* ---------- Portfólio ---------- */
@media (max-width:767px){.carousel__palco{height:22rem}}

/* ---------- Quem somos ---------- */
.quem__corpo{display:grid;gap:1.5rem}
.quem__ilu{display:flex;align-items:flex-end;justify-content:center;gap:1rem}
.quem__ilu .ilu--borboleta{width:52%}
.quem__ilu .ilu--boneca{width:36%}
.quem__texto{display:grid;gap:1rem;align-content:center}
.quem__texto p{font-size:1rem;color:inherit}
.destaque{margin-top:.5rem;padding:.25rem 0 .25rem 1.1rem;border-left:5px solid var(--azul-claro);font-size:1.15rem;font-weight:700;line-height:1.45;color:inherit;max-width:36ch}
@media (min-width:768px){
  .quem__corpo{grid-template-columns:.8fr 1.4fr;gap:2rem;align-items:center}
  .quem__ilu{flex-direction:column;align-items:center;gap:1rem}
  .quem__ilu .ilu--borboleta{width:min(100%,13rem)}
  .quem__ilu .ilu--boneca{width:auto;height:clamp(5.5rem,20svh,10rem)}
}

/* ---------- Contato ---------- */
.contato__grade{display:grid;gap:1.25rem;grid-template-columns:1fr}
.social{display:grid;grid-template-rows:auto 1fr;gap:1.1rem;padding:1.75rem;text-decoration:none;}
.social h3{font-size:1.4rem}
.social p{font-size:.98rem}
.social__texto{display:grid;gap:.5rem;align-content:start}
.social h3,.social p{color:inherit}
.social .icone{color:var(--azul-claro)}
.social>.social__seta{position:absolute;right:1.4rem;bottom:1.3rem;width:1.8rem;height:1.8rem;transition:transform .3s}
.social:hover>.social__seta{transform:translate(.25rem,-.25rem)}
@media (min-width:768px){
  .contato__grade{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);align-items:stretch}
  .social{padding:2rem}
  .icone--grande{width:3.6rem;height:3.6rem}
}
@media (max-width:767px){
  #contato .sec{padding-bottom:6.75rem}   /* espaço para o botão pousar */
}
@media (prefers-reduced-motion:reduce){.social,.social__seta{transition:none}}

/* ---------- Rodapé ---------- */
.rodape{display:grid;gap:1rem;justify-items:center;text-align:center;padding:1.5rem}
.rodape img{width:6.5rem;height:auto}
.rodape p{font-size:.85rem}
.rodape__links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.1rem;font-weight:700}
.rodape__links a{text-decoration:none;color:var(--azul-claro)}
.rodape__links a:hover{text-decoration:underline;color:var(--branco)}
@media (min-width:768px){
  .rodape{width:var(--larg-rodape)}
}