/* -----------------------------------------
   corpo.css — Apresentação Korina (desktop/tablet)
   Mantém cor natural do ícone quando usado como <img>.
   ----------------------------------------- */

/* variáveis utilitárias */
:root{
  --font-sans: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* IMPORT (se já carregado globalmente pode remover) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

/* Container externo */
.corpo-site{
  background: transparent;
  color: #ffffff;
  font-family: var(--font-sans);
  padding: 24px 24px 0px 24px;
  overflow: visible; /* permitir sobreposição visível */
}

/* inner wrapper para centralizar e controlar largura */
.corpo-inner{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* esquerda / direita */
  align-items: center;
  gap: 2rem;
  position: relative;
  min-height: 520px;
  overflow: visible; /* importante para que o .corpo-left sobreponha a imagem */
}

/* LEFT (dados) — este bloco sobrepõe parcialmente a imagem
   Usamos transform + variável (--overlap) para controle responsivo */
.corpo-left{
  z-index: 3; /* acima da imagem */
  align-self: center;
  padding: 24px;
  max-width: 70ch;
  --overlap: 13vw;          /* valor padrão — ajustável por media queries */
  transform: translateX(var(--overlap));
  transition: transform .18s ease;
  backdrop-filter: none;
  /* opcional: aumentar contraste quando sobreposto (descomente se quiser)
     box-shadow: 0 6px 20px rgba(0,0,0,0.25); */
}

/* TITULO principal */
.cs-title{
  margin: 0 0 18px 0;
  line-height: 0.85;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(56px, 8vw, 128px);
  letter-spacing: -1px;
}

/* cada "linha" para controle visual */
.cs-title-line{ display: block; }

/* cor da barra "/" */
.cs-slash{ color: #F51919; margin-right: 6px; }

/* resto do texto em branco */
.cs-dev,
.cs-secops{
  color: #ffffff;
}

/* Subtexto (20px regular) */
.cs-sub{
  margin: 0 0 22px 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
}

/* palavras em destaque */
.cs-sub .accent{
  color: #F51919;
  font-weight: 700;
}

/* Ações / Botão */
.cs-actions{ margin-top: 6px; }

/* Botão sem preenchimento, borda branca 1px, bordas bem arredondadas */
.cs-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px; /* bem redondo */
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;

}

/* Texto dentro do botão */
.cs-btn-text{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  margin-right: 30px;
}

/* "Solicitar" regular / "Proposta" bold */
.cs-btn-text .cs-regular{ font-weight: 300; }
.cs-btn-text .cs-bold{ font-weight: 700; }

/* Hover/focus states */
.cs-btn:hover,
.cs-btn:focus{
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
  outline: none;
}

/* Ícone: NÃO aplicar cor, fill, stroke ou filtros — preserva cor natural do ficheiro SVG/PNG.
   Use <img class="cs-btn-icon" src="..."> para manter as cores internas do SVG. */
.cs-btn-icon{
  width: 40px;
  height: 40px;
  display: inline-block;
  object-fit: contain;
  margin: 10px;
  

  /* evitar qualquer override de cor */
  color: unset;
  fill: unset;
  stroke: unset;
  filter: none;
  background: transparent;
}

/* Se usa <img class="cs-btn-icon" src="..."> garantir que a imagem ocupe o espaço */
.cs-btn-icon[src],
.cs-btn-icon img{

  display: block;
  object-fit: contain;
  -webkit-filter: none;
  filter: none;
}

/* RIGHT: imagem (fundo) */
.corpo-right{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
  overflow: visible;
}

/* imagem: ocupa 100% da coluna direita, altura controlada */
.cs-image{
  width: 115%;
  max-width: 820px;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;

}

/* ----- RESPONSIVIDADE: ajustes finos ----- */

/* telas bem grandes (mais overlap) */
@media (min-width: 1600px){
  .corpo-left{ --overlap: 10vw; }
}

/* laptops médios */
@media (max-width: 1400px){
  .corpo-inner{ gap: 1.25rem; }
  .corpo-left{ --overlap: 13vw; padding: 18px; }
  .cs-image{ max-width: 640px; }
}

/* laptops menores / tablets landscape */
@media (max-width: 1100px){
  .corpo-inner{
    grid-template-columns: 1fr 1fr;
    min-height: 760px;
    
  }
  .corpo-left{ --overlap: 10vw; max-width: 65ch; padding: 18px; }
  .cs-title{ font-size: clamp(48px, 9.2vw, 96px); }
  .cs-image{ max-width: 560px; }
}

/* se a tela ficar estreita (ex.: 900px) — empilha e remove sobreposição */
@media (max-width: 900px){
  .corpo-inner{
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 18px;
  }
  .corpo-left{
    order: 1;
    transform: none; /* sem sobreposição em telas pequenas */
    --overlap: 0;
    margin-right: 0;
    padding: 12px 8px;
    text-align: left;
  }
  .corpo-right{ order: 2; display: block; }
  .cs-image{ width: 100%; max-width: 100%; border-radius: 6px; }
  .cs-title{ font-size: clamp(40px, 13vw, 80px); }
  .cs-sub{ font-size: 18px; }
  .cs-btn{ font-size: 18px; }
}

/* telas muito pequenas */
@media (max-width: 560px){
  .cs-title{ font-size: 36px; }
  .cs-sub{ font-size: 16px; }
  .cs-btn{ font-size: 16px; padding: 8px 14px; }
  .cs-btn-icon{ width: 1em; height: 1em; }
}