/* ============== INICIO ============== */

.inicio-content h1,
.inicio-content p,
.inicio-content .kicker { 
  margin: 0;
}

.section-inicio{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;

  /* imagem de fundo */
  background: url("Assets/Images/default/engineer/maquinas-pesadas-e-trabalhadores-da-construcao-civil-trabalhando-em-um-edificio.jpg") center/cover no-repeat;
  color: #fff;
}

/* overlay escuro por cima da imagem */
.section-inicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70); /* controla a intensidade da escuridão */
  z-index: 0;
}

.inicio-grid{ 
  display: grid; 
  grid-template-columns: 1.1fr .9fr; 
  gap: 2rem; 
  align-items: center; 
  position: relative;
  z-index: 1; /* garante que o conteúdo fica acima do overlay */
}
  
.inicio-title{ 
  font-size: var(--h1-size); 
}

.cta-row{ 
  display: flex; 
  gap: .8rem; 
  flex-wrap: wrap; 
  margin-top: 1.5rem; 
} 

.cta-row.center{ 
  justify-content: center; 
}

.inicio-media{
  aspect-ratio: 10/8; 
  display: flex; 
  align-items: center; 
  justify-content: center;
} 

.inicio-image{ 
  width: 100%;
  height: auto; 
}

.inicio-content{ 
  gap: 16px;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  margin-bottom: 36px;
  position: relative;
  z-index: 1; /* conteúdo sempre acima da imagem e overlay */
}

/* ===== Responsivo ===== */
@media (max-width:900px){
  .inicio-grid{ 
    grid-template-columns: 1fr; 
    text-align: center; 
    justify-items: center;
  }
  .inicio-content{ order: 2; align-items: center; }
  .inicio-media{ order: 1; display: none; }
}

@media (max-width: 900px) {
  .section-inicio{
    min-height: auto;          
    padding: 2rem 0 2.5rem;
  }
  .inicio-title{ margin: 0 0 .75rem; }
  .inicio-subtitle{ max-width: 40ch; }
  .cta-row{ justify-content: center; }
}


.btn-whatsapp img {
  width: 20px;   /* tamanho do ícone */
  height: 20px;
}



/*==================vídeo================

.video-section {
  background-color: var(--cor-azul-claro-background); 
  padding: 2rem 1rem;
  padding-bottom: 5%;
  text-align: center;
}

.video-title {
  margin-bottom: 1.5rem;
}

.video-wrapper {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16 / 9; 
  margin-bottom: 4%;
  margin-top: 4%;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.video-description {
  max-width: 700px;
  margin: 1.5rem auto 0;
  font-size: 1rem;
  color: var(--color-dark, #000);
} */



/* ============== BENEFÍCIOS (v2) ============== */
.section-benefits{
  padding-top: 2%;
  padding-bottom: 3%;
}

.benefits-title{
  text-align: center;
  margin-top: 0;
  padding-top: 2%;
  font-size: var(--h2-size);
}

/* grid principal: cards + imagem */
.benefits-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* lista de cards */
.benefits-list{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* card com coluna para número (esquerda) + conteúdo (direita) */
.benefit-card{
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 4px 15px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.12);

  /* layout interno do card */
  display: grid;
  grid-template-columns: 84px 1fr;   /* largura do bloco do número */
  gap: 14px;
  padding: 18px 18px 18px 12px;
  align-items: center;
}

/* número grande à esquerda */
.benefit-num{
  display: grid;
  place-items: center;
  font-weight: 600;
  line-height: 1;
  /* tamanho adaptativo */
  font-size: clamp(2.5rem, 6.2vw, 3.75rem);
  color: rgba(10,25,41,.18);          /* cinza suave/translúcido */
  user-select: none;
}

/* textos do card */
.benefit-title{
  margin: 0 0 .35rem;
  font-size: var(--h3-size);
}
.benefit-text{
  margin: 0;
  color: var(--color-muted);
}

/* imagem da coluna direita */
.benefits-image{
  display: flex;
  justify-self: center;
}
.benefits-image img{
  max-width: 90%;
  margin-top: 0;
  border-radius: 16px;
}

/* --------- responsivo --------- */
@media (max-width: 900px){
  .benefits-grid{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 1.25rem;
  }

  /* ordem: imagem acima, cards abaixo (opcional) */
  .benefits-image{ order: 1; }
  .benefits-list{  order: 2; }

  .benefits-image img{
    max-width: 100%;
    margin-top: 16px;
    height: auto;
  }

  /* mantém número à esquerda no mobile */
  .benefit-card{
    grid-template-columns: 70px 1fr;
    text-align: left;
  }

  .benefit-text{ line-height: 1.45; }
}



/* =========================
   SECTION 3 — Segmentos
   ========================= */

.section-segments{
  background-color:var(--cor-azul-claro-background);
  padding: 56px 0;

}

.segments-title{
  position: relative; z-index:1;
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.2rem);
}

/* linha (item) */
.segment-item{
  position: relative; z-index:1;
  display: flex; align-items: center; gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 70, .5);
}
.segment-item:last-child{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* inverte a ordem com uma única classe */
.segment-item.is-reverse{ flex-direction: row-reverse; }

/* imagem */
.segment-media{
  flex: 1 1 40%;
  min-width: 0;
}
.segment-media img{
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  object-fit: cover;
  max-height: 300px;
}

/* conteúdo */
.segment-content{
  margin-bottom: 64px;
  flex: 1 1 52%;
  min-width: 0;
}
.segment-subtitle{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--cor-azul-escuro);
}
.segment-text{
  margin: 0 0 16px;
  color: var(--cor-azul-escuro);
  line-height: 1.55;
  font-size: 1.2rem;
  max-width: 56ch;
}
.segment-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* responsivo */
@media (max-width: 960px){
  .segment-item,
  .segment-item.is-reverse{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .segment-media img{ max-height: none; }
}


/* ====================== RECURSOS ====================== */
.features-section{ 
  background:var(--cor-roxo-claro-background);
padding-top: 2%;}


/* Grid base */
.editor, .planta, .checklist, .agenda-container, .ambientes-container{
  display:grid; 
  grid-template-columns:1fr 1fr; 
  align-items:center; 
  max-width: var(--container-width, 1080px); 
  margin:0 auto;
  justify-items:center; 
}

.content-editor, .content-planta, .content-checklist, .agenda-text, .ambientes-content{ 
  text-align:left; 
}

.image-editor, .image-planta, .image-checklist, .agenda-image, .ambientes-image{
  display:flex; 
  justify-content:center; 
  align-items:center; 
  justify-self:center;
}

/* Tamanhos de imagem (ajuste fino por seção) */
.image-editor img{ 
  width:100%; 
  max-width:300px; 
  height:auto; }

.image-planta img{ 
  width:400px; 
  max-width:100%; 
  height:auto; }

.image-checklist img{ 
  width:550px; 
  max-width:100%;
  height:auto; }

.agenda-image img{ 
  max-width:85%; 
  height:auto; }

.ambientes-image img{ 
  max-width:75%; 
  height:auto; }


/* Copys dos recursos */
.content-editor h3,.content-planta h3,.content-checklist h3,.agenda-text h3,.ambientes-content h3{ 
  font-size:2rem;
   margin:0 0 1rem; 
  }

.content-editor p,.content-planta p,.content-checklist p,.agenda-text p,.ambientes-content p{ 
  margin:0 0 1rem; 
  color: var(--color-muted); 
  line-height:1.5; 
}


.ambientes{ padding-bottom: 2%;}


@media (max-width:900px){
  .editor, .planta, .checklist, .agenda-container, .ambientes-container{
    grid-template-columns:1fr; text-align:center;
  }

  /* “Abre” o wrapper de conteúdo para ordenar h3 e p */
  .content-editor, .content-planta, .content-checklist, .agenda-text, .ambientes-content{ display:contents; }

  .content-editor h3, .content-planta h3, .content-checklist h3, .agenda-text h3, .ambientes-content h3{
    order:1; text-align:center; justify-self:center;
  }
  .image-editor, .image-planta, .image-checklist, .agenda-image, .ambientes-image{ order:2; }
  .content-editor p, .content-planta p, .content-checklist p, .agenda-text p, .ambientes-content p{
    order:3; text-align:center;
  }

  /* Limita tamanho das imagens no mobile */
  .image-editor img, .image-planta img, .image-checklist img, .agenda-image img, .ambientes-image img{
    width:100%; max-width:250px; height:auto;
  }
}

@media (max-width:768px){
  .content-editor p, .content-planta p, .content-checklist p, .agenda-text p, .ambientes-content p{
    margin-bottom:10px; line-height:1.3;
  }
}





/* ====== FLUXO DE TRABALHO - horizontal ====== 

.flow-section{
  
  --ft-bg:            #eaf0ff;     
  --ft-title:         #0b1530;     
  --ft-card-bg:       #ffffff;     
  --ft-card-border:   rgba(20, 32, 64, .16);
  --ft-text:          #0b1530;
  --ft-muted:         #1a2544;
  --ft-radius:        18px;        
  --ft-gap:           28px;        
  --ft-container-w:   1200px;      
  --ft-media-aspect:  3 / 2;       
  background: var(--ft-bg);
  padding: 48px 16px 56px;
}

.flow-container{
  width: min(100%, var(--ft-container-w));
  margin-inline: auto;
}


.flow-title{
  margin: 0 0 28px;
  text-align: center;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
  line-height: 1.15;
  color: var(--ft-title);
  font-weight: 800;
}

.flow-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ft-gap);
}


.flow-item{
  display: flex;
  flex-direction: column;
}

.flow-media{
  position: relative;
  border-radius: var(--ft-radius);
  border: 1px solid var(--ft-card-border);
  background: var(--ft-card-bg);
  overflow: hidden;
  aspect-ratio: var(--ft-media-aspect);
  display: grid;
  place-items: center;
}
.flow-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.flow-item__title{
  margin: 16px 0 8px;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.25rem);
  font-weight: 800;
  color: var(--ft-text);
}
.flow-item__text{
  margin: 0;
  color: var(--ft-muted);
  line-height: 1.6;
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
}


@media (max-width: 1024px){
  .flow-grid{ grid-template-columns: 1fr; }
  .flow-section{ padding: 40px 16px; }
  .flow-item + .flow-item{ margin-top: 10px; }
}

*/




/* ============== PLANOS ============== 
.section-plans{ 
  padding:32px 0; 
}

.prices-title{ 
  text-align:center; 
  font-size: var(--h2-size); 
  margin-bottom:8px; 
}


.prices-grid{
  display:grid; 
  grid-template-columns: repeat(3, minmax(250px, 280px));
  gap:24px; 
  justify-content:center;
}

@media (max-width:900px){ .prices-grid{ grid-template-columns:1fr; } }


.price-card{
  background:#fff; 
  border:1px solid #dfe3ff; 
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  padding:16px; 
  display:flex; 
  flex-direction:column; 
  margin-bottom:32px;
}



.card-cover{ border-radius:12px; overflow:hidden; height:160px; }
.card-cover img{ width:100%; height:100%; object-fit:cover; }

.card-name{ font-size: var(--h3-size); margin:14px 0 6px; text-align:center; }
.card-desc{ margin:0 0 16px; color: var(--color-muted); text-align:center; }


.card-list{ list-style:none; padding:0; margin:0 0 14px; }
.card-list li{
  position:relative; margin:10px 0; padding-right:28px; color: var(--color-dark);
}
.card-list li::after{
  content: url(../Assets/Icons/svg/check.svg);
  position:absolute; right:0; top:0;
}


.card-price{ margin:6px 0 10px; margin-top:auto; }
.card-price .old{ color:#8b8fa7; font-size:14px; margin-bottom:4px; }
.card-price .old s{ color:#f06262; }
.card-price .now{ font-size:28px; font-weight:800; color:#11a962; }
.card-price .now.consult{ font-size:32px; font-weight:800; margin-bottom: 10%;}


.is-featured{ 
  border-color: var(--cor-azul-royal); 
  box-shadow:0 4px 24px rgba(69,96,255,.22); 
  transform: translateY(-6px);
}


.prices-note{ 
  text-align:center; 
  color: var(--color-dark); 
  margin:18px 0 75px; 
}
*/