/*-----------SEÇÃO HERO-----------*/
.hero {
  position: relative;
  height: 100vh;
  background: linear-gradient(
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0.55)
    ),
    url('../images/fundo.jpg') center/cover no-repeat; /* 👈 Ajuste aqui */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0 1rem;
}


.hero h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.5rem;
  max-width: 700px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.hero a {

    padding: 1rem 2.5rem;
    font-size: 1.15rem;


  background-color: #046b5b;
  color: white;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  font-weight: 600;
  transition: background-color 0.3s ease;

background-image: linear-gradient(to bottom, #054d4d 0%, #287272 100%);


transition: 
        background-color 0.3s ease, 
        transform 0.3s ease;

transform: scale(1);

}

.hero a:hover {
  background-color: #029b82;
  transform: scale(1.1); /* 👈 Aumenta o botão em 10% */
}


/*-----------------------------------------------------------------*/

.products-section {
    width: 90%; 
    max-width: 1200px; 
    margin: 50px auto; 
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ---------------------------------- */
/* ESTILOS GERAIS DO CARD (Featurette) */
/* ---------------------------------- */
.products-section .row.featurette {
    width: 100%; 
    margin: 0; 
    
    display: flex;
    align-items: stretch;
    /* ❌ REMOVENDO background-color: #fff; */ 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
    min-height: 250px;
    
    opacity: 0; 
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, opacity 0.4s ease-out;
    transform: scale(1); 
}

/* Efeito de Zoom no Hover */
.products-section .row.featurette:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------- */
/* BLOCO DE TEXTO (PARTE VERDE COM DEGRADÊ) */
/* ---------------------------------- */
.products-section .text-block {
    padding: 30px;
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    color: white;
    
    background: #046b5b; 
    background-image: linear-gradient(135deg, #028071 0%, #06a390 100%);
}

.products-section .text-block h2 {
    font-size: 2.4rem; 
    font-weight: 700;
    margin-bottom: 15px;
}

.products-section .text-block p.lead {
    font-size: 1.15rem; 
    line-height: 1.7;
}

/* ---------------------------------- */
/* BLOCO DA IMAGEM E AJUSTES DE BORDAS */
/* ---------------------------------- */
.products-section .image-block {
    padding: 0; 
    display: flex;
}

.products-section .image-block img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* AJUSTES DE BORDAS ARREDONDADAS */

/* Item 1 e Item 3 (Padrão: Texto Esq, Imagem Dir) */
.products-section .item-1 .text-block,
.products-section .item-3 .text-block {
    border-radius: 15px 0 0 15px; 
}
.products-section .item-1 .image-block img,
.products-section .item-3 .image-block img {
    border-radius: 0 15px 15px 0; 
}

/* Item 2 (INVERTIDO: Imagem Esq, Texto Dir) */
.products-section .item-2 .text-block {
    /* Como o texto está à direita, arredonda os cantos diretos */
    border-radius: 0 15px 15px 0; 
}
.products-section .item-2 .image-block img {
    /* Como a imagem está à esquerda, arredonda os cantos esquerdos */
    border-radius: 15px 0 0 15px; 
}

/* ---------------------------------- */
/* ANIMAÇÃO DE ENTRADA */
/* ---------------------------------- */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px) scale(0.98); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px) scale(0.98); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.products-section .item-1 { animation: slideInLeft 0.8s ease-out forwards; animation-delay: 0.2s; }
.products-section .item-2 { animation: slideInRight 0.8s ease-out forwards; animation-delay: 0.4s; }
.products-section .item-3 { animation: slideInLeft 0.8s ease-out forwards; animation-delay: 0.6s; }

/* ---------------------------------- */
/* RESPONSIVIDADE (Para telas menores) */
/* ---------------------------------- */
@media (max-width: 768px) {
    /* Garante que todos os itens empilhem verticalmente */
    .products-section .row.featurette {
        flex-direction: column !important; 
    }

    /* Redefine as bordas e ordem para mobile (Texto no topo, Imagem na base) */
    .products-section .row.featurette .text-block {
        border-radius: 15px 15px 0 0 !important;
        order: -1 !important; /* Força o texto para o topo */
    }
    .products-section .row.featurette .image-block img {
        border-radius: 0 0 15px 15px !important;
        order: 0 !important;
    }
}


/*----------------------------seção 4----------------------------*/
 /* ============================== */
/*         ESTILO GERAL          */
/* ============================== */
/* ============================== */
/*         ESTILO GERAL          */
/* ============================== */
:root {
    --bg-color: #054d4d;
    --list-bg-color: #67aca1;
    --text-color: #fff;
}

  .stakes-section-v2 {
      background: #054d4d;  /* Cor sólida verde escuro */
      /* Remova as linhas de linear-gradient e url se quiser só cor sólida */
  }

.stakes-section-v2 .stakes-content-v2 {
    display: grid;
    grid-template-columns: 38% 32% 30%;  
    align-items: center;
    max-width: 1600px;
    width: 100%;
    margin: auto;
}

.stakes-section-v2 .wood-logs-column {
    position: relative;
    height: 480px;
    width: 100%;
}

.stakes-section-v2 .wood-log {
    position: absolute;
    left: -150px; 
}

.stakes-section-v2 .wood-log.log-1 { top: 0; height: 70px; }
.stakes-section-v2 .wood-log.log-2 { top: 90px; height: 80px; }
.stakes-section-v2 .wood-log.log-3 { top: 190px; height: 90px; }
.stakes-section-v2 .wood-log.log-4 { top: 300px; height: 100px; }
.stakes-section-v2 .wood-log.log-5 { top: 420px; height: 110px; }

.stakes-section-v2 .wood-log img {
    height: 100%;
    width: auto;
}

.stakes-section-v2 .info-block-column {
    display: flex;
    justify-content: center;
}

.stakes-section-v2 .info-block-column ul,
.stakes-section-v2 .info-block-column li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stakes-section-v2 .text-block {
    background-color: var(--list-bg-color);
    color: var(--text-color);
    padding: 30px 40px;
    margin-top: 40px;
    width: 380px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.stakes-section-v2 .text-block h1 {
    font-size: 2.6em;
    margin-bottom: 10px;
}

.stakes-section-v2 .text-block .subtitle {
    font-size: 1.3em;
    margin-bottom: 20px;
}

.stakes-section-v2 .gauge-list li {
    font-size: 1.6em;
    margin-bottom: 5px;
    font-weight: 600;
}

.stakes-section-v2 .diameter-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.stakes-section-v2 .diameter-circle {
    width: 200px;
    height: 200px;
    background-image: url('../images/Bitola.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stakes-section-v2 .diameter-circle::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border: 4px solid #ffffff;
    border-radius: 50%;
}

.stakes-section-v2 .diameter-text {
    color: #fff;
    font-weight: 700;
    position: relative;
    z-index: 3;
    font-size: 22px;
    text-shadow: 0 0 5px #000;
    margin: 0 20px;
}

.stakes-section-v2 .arrow {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    z-index: 3;
    text-shadow: 0 0 5px #000;
    position: relative;
    top: -2px;
}

.stakes-section-v2 .arrow.left { margin-right: 5px; }
.stakes-section-v2 .arrow.right { margin-left: 5px; }


@media (max-width: 768px) {
    .stakes-section-v2 {
        display: none !important;
    }
}


/*----------------------------seção 5----------------------------*/

/* ===== estilos completos para esta seção ===== */
.contact-section {
  background: #054d4d;
  padding: 80px 0;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 50px;
}
.contact-section h2 {
  text-align: center;
  font-size: 40px;
  margin-bottom: 50px;
}
.contact-section h2 span { font-weight: 600; }

.contact-container {
  width: 92%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  box-sizing: border-box;
}

/* FORM */
.form-box {
  width: 35%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-box input,
.form-box textarea {
  width: 100%;
  padding: 18px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}
.form-box textarea { height: 160px; resize: none; }
.btn-send {
  width: 150px;
  padding: 14px 0;
  background: #111;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

/* MAP BOX: força o iframe a preencher a coluna */
/* Ajuste min-height para o tamanho desejado (desktop grande) */
.map-box {
  flex: 1;
  height: 400px;    /* <<-- tamanho vertical grande (padrão) */
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* iframe sem atributos de width/height no HTML - CSS controla tudo */
.map-box iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* pequeno crédito (opcional) */
.embed-credit {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  z-index: 2;
}

/* ===== Responsividade ===== */
@media (max-width: 1100px) {
  .contact-container { gap: 20px; }
  .form-box { width: 40%; min-width: 260px; }
  .map-box { min-height: 350px; }
}
@media (max-width: 800px) {
  .contact-container {
    flex-direction: column;
    align-items: stretch;
  }
  .form-box { width: 100%; order: 1; }
  .map-box { width: 100%; order: 2; min-height: 600px; margin-top: 20px; }
}


/*--------------------secao 6--------------------*/

.hero-euca {
    background: #ffffff;
    padding: 80px 0;
    border-radius: 14px;
    width: 95%;
    margin: 40px auto;
    font-family: 'Poppins', sans-serif;
}

.hero-euca .hero-content {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.hero-euca h1 {
    font-size: 64px;
    font-weight: 700;
    color: #67aca1;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-euca p {
    font-size: 20px;
    color: #67aca1 ;
    margin-bottom: 40px;
    max-width: 750px;
}

.btn-hero {
    background: #67aca1;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    padding: 18px 45px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: .3s;
}

.btn-hero:hover {
    opacity: .8;
}

/*------------------seção 7------------------*/

/*------------------SEÇÃO 7: TEXTO ANIMADO (CORRIGIDO - Direita para Esquerda)------------------*/

/* CONTAINER PRINCIPAL PARA CENTRALIZAÇÃO */
.texto-animado {
    font-size: 45px;
    font-weight: 300;
    color: rgb(0, 0, 0); 
    
    /* 1. CENTRALIZAÇÃO HORIZONTAL */
    display: flex;
    justify-content: center; 
    width: 100%; 
    
    /* 2. CENTRALIZAÇÃO VERTICAL (ADICIONE ISTO) */
    padding: 80px 0; /* 80px de espaçamento no topo e na base */
    /* ou use: padding-top: 80px; e padding-bottom: 80px; */
}

/* Adicione este bloco no seu CSS: */
.texto-animado .texto-fixo {
    margin-right: 15px; /* Adiciona espaço após a palavra "Você" */
}
/* ... o restante do CSS permanece o mesmo ... */

/* Garante que o span que contém o texto animado tenha o comportamento correto */
.texto-animado .palavras-rotativas {
    font-size: 45px;
    font-weight: 600;
    position: relative;
    display: inline-flex;
    width: max-content; /* Ajuste para caber a frase mais longa (ex: "vai se impressionar") */ 
    height: 1.5em; /* Altura para garantir que o cursor apareça */
    /* Adicione overflow: hidden; para garantir que o ::after não ultrapasse o limite do span */
    overflow: hidden; 
    white-space: nowrap;
}

/* O ::before insere o texto dinâmico */
.texto-animado .palavras-rotativas::before {
    content: "";
    color: #67aca1; 
    font-weight: 600; 
    animation: palavras 20s infinite;
}

/* O ::after cria o efeito de 'cobrir/revelar' e o cursor */
.texto-animado .palavras-rotativas::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    right: -2px; 
    
    /* Fundo que COBRE: Deve ser a cor exata do fundo da sua seção (BRANCO) */
    background-color: white; 
    
    /* 1. MUDANÇA CRÍTICA: Remova border-right. O cursor será o left. */
    
    /* 2. ADICIONA border-left: Este será o cursor na ponta esquerda (móvel) */
    border-left: 2px solid #67aca1; 
    
    /* Aplicar a animação de digitação e a de piscar */
    /* A animação 'cursor' agora aplica o piscar no border-left */
    animation: 
        digita 8s steps(25) infinite,
        cursor .8s infinite;
}

/*------------------@keyframes cursor CORRIGIDO------------------*/
/* A animação do cursor agora mexe no border-left *//* Cursor piscando no border-left */
/* Cursor piscando */
@keyframes cursor {
    0%, 100% { border-left-color: #67aca1; }
    50% { border-left-color: transparent; }
}

/* Animação de digitação SINCRONIZADA */
@keyframes digita {
    0%   { width: 100%; }   /* totalmente coberto */
    10%  { width: 0%; }     /* revela */
    40%  { width: 0%; }     /* visível */
    50%  { width: 100%; }   /* cobre novamente */
    100% { width: 100%; }   /* aguardando troca */
}

/* Troca exata — SÓ muda quando digita() está em 50% */
@keyframes palavras {
    0%, 49% {
        content: "já é nosso cliente ?";
    }
    50%, 74% {
        content: "não pode perder";
    }
    75%, 99% {
        content: "vai se impressionar";
    }
    100% {
        content: "na melhor";
    }
}