/* ========================================
   RESET E LAYOUT BASE - SEM ESPAÇO ABAIXO DO FOOTER
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Dancing%20Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM%20Sans:ital,wght@0,400;0,700;1,400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;           /* 👈 adiciona */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', sans-serif;
}

/* MAIN - flex:1 empurra footer para baixo */
main {
  flex: 1;                /* 👈 empurra footer pro fim */
  margin-top: 2rem;       /* 👈 DISTÂNCIA do header */
  margin-bottom: 0;       /* 👈 remove o 4rem que estava */
  padding-top: 1rem;
  padding-bottom: 1rem;   /* só um pouco */
}

/*AJUSTA DISTÂNCIA TÍTULO H2 E PARÁGRAFO */
main h2 {
  margin-bottom: 2rem;    /* 👈 Espaço ABAIXO do h2 */
}

main p {
  margin-top: 1rem;       /* 👈 Espaço ACIMA do p */
}

/* ========================================
   HEADER
   ======================================== */
.header {
  background: linear-gradient(135deg, white 25%, #aecd2636 48%); /* Azul claro como site inspiração */
  padding: 1rem 0;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

.header-container {
  max-width: 1200px; margin: 0 auto; 
  display: flex; align-items: center; justify-content: space-between; padding: 0 2rem;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 2rem;                /* ← AUMENTE gap para afastar */
}

.logo-img {
  height: 90px;             /* 50% MAIOR que antes */
  width: auto;
  min-width: 90px;
}

.logo-text h1 {
  font-size: 1.8rem;
  margin: 0;
  color: #1D361F;
  font-weight: 700;
  margin-left: 20px;        /* ← AFasta texto para ESQUERDA */
}

.logo-text p {
  margin: 0;
  color: #3e3a19;
  font-size: 1rem;
  margin-left: 20px;        /* ← AFasta texto para ESQUERDA */
}

/* CSS BASE (SEMPRE ATIVO - DESKTOP) */
.nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin-left: 40px;
}

/* Remove o sublinhado e define a cor para os links normais e já visitados */
.nav a, 
.nav a:visited {
  text-decoration: none;
  color: #564f0f; /* Substitua pela cor que você deseja no menu */
  font-weight: bold;
}

/* Opcional: define a cor para quando o usuário passar o mouse por cima */
.nav a:hover {
  color: #555555; /* Cor ao passar o mouse */
}

/* ========================================
   RESPONSIVO HEADER
   ======================================== */
@media (max-width: 768px) {
  /* ... seus códigos anteriores de formulário, checkbox e hero ... */

  /* Ajusta o container do topo para empilhar os elementos centralizados */
  .header-container {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  /* Organiza a logo e os textos em coluna no celular */
  .logo-section {
    flex-direction: column;
    gap: 0.5rem; /* Reduz o espaço gigante do computador */
    text-align: center;
  }

  /* Diminui a imagem da logo para não ocupar o topo inteiro */
  .logo-img {
    height: 60px;
    min-width: 60px;
  }

  /* Remove os recuos (margins) que jogavam o texto para o lado */
  .logo-text h1, 
  .logo-text p {
    margin-left: 0;
  }

  /* Diminui os tamanhos dos textos da logo */
  .logo-text h1 {
    font-size: 1.4rem;
  }
  
  .logo-text p {
    font-size: 0.9rem;
  }

  /* Centraliza a lista de links do menu */
  .nav ul {
    margin-left: 0;   /* Remove o recuo do computador */
    gap: 1.2rem;      /* Diminui o espaço entre os links para caberem na tela */
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;  /* Se os links forem grandes, eles quebram linha suavemente */
  }

  /* Aumenta a área de toque dos links para facilitar o clique com o dedo */
  .nav a {
    font-size: 1rem;
    padding: 8px 4px;
    display: inline-block;
  }
}


/* ========================================
   FOOTER COLADO NA BORDA INFERIOR
   ======================================== */
.footer {
  background: #22300bd9;
  color: white;
  padding: 2rem 0 0.5rem;   /* 👈 reduz do 1rem */
  margin-top: 2rem;         /* 👈 reduz do 4rem */
  margin-bottom: 0 !important;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 0 2rem;
}

.footer-column h3 {
  margin-bottom: 1rem;
  color: white;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
}

.footer-column a:hover {
  color: #3498db;
}

.cta-footer {
  display: inline-block;
  background: #3498db;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  margin-bottom: 1rem;
  font-weight: bold;
  text-decoration: none;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.cta-footer:hover {
  background: #2980b9;
}

.social a {
  display: block;
  margin-bottom: 0.5rem;
}

.footer-bottom {
  text-align: center;
  padding: 1rem;            /* 👈 reduz do 1.5rem */
  border-top: 1px solid #34495e;
  margin-top: 1rem;         /* 👈 reduz do 2rem */
  color: #bdc3c7;
}

/* ========================================
   RESPONSIVIDADE - FOOTER COLADO NA BORDA INFERIOR
   ======================================== */
@media (max-width: 768px) {
  /* ... seus outros códigos de formulários, hero, etc. ... */

  /* Centraliza as informações e reduz o recuo do footer no celular */
  .footer {
    margin-top: 1.5rem;    /* Reduz levemente a margem superior */
    padding: 1.5rem 0 0.5rem; /* Ajusta o espaçamento interno superior */
  }

  /* Reduz os espaçamentos laterais e centraliza todo o conteúdo interno */
  .footer-container {
    gap: 1.5rem;           /* Diminui o espaço entre as colunas empilhadas */
    padding: 0 1rem;       /* Margem menor nas laterais para telas estreitas */
    text-align: center;    /* Centraliza os títulos, textos e listas */
  }

  /* Remove recuos padrões que possam desalinhá-la no centro */
  .footer-column ul {
    padding: 0;
    margin: 0;
  }

  /* Aumenta o espaçamento dos links para ficar mais fácil de clicar com o dedo */
  .footer-column ul li {
    margin-bottom: 0.8rem; /* Dá mais espaço vertical entre um link e outro */
  }

  .footer-column a {
    display: inline-block; /* Permite que o link responda melhor ao toque */
    padding: 6px 0;        /* Área de clique vertical maior */
  }

  /* Ajusta o botão de destaque (CTA) para o celular */
  .cta-footer {
    display: block;        /* Transforma em bloco para ocupar a largura necessária */
    max-width: 280px;      /* Limita a largura para o botão não ficar gigante */
    margin: 0 auto 1rem auto; /* Centraliza o botão perfeitamente */
    padding: 1rem 1.5rem;  /* Botão ligeiramente mais alto para clique touch */
  }
}

/* ========================================
   HERO - INDEX
   ======================================== */
.hero {                       /*Foto abaixo do cabeçalho*/
  position: relative;
  width: 100%;
  height: 60vh;              /* 60% da altura da tela */
  overflow: hidden;
  margin-top: 0;             /* Logo após header */
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Mantém proporção, preenche área */
  object-position: center 70%;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #55555552;
  /*Pretasemi-transparente*/color: white;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  max-width: 90%;
  backdrop-filter: blur(5px);
  /*Nítidonasbordas*/-webkit-transform: translate(-50%, -50%);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.hero-text h2 {
  font-size: 2.6rem !important;
  margin-bottom: 1rem;
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
}

.hero-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: 'Jost', sans-serif;
}

/* ========================================
   RESPONSIVO HERO - INDEX
   ======================================== */
@media (max-width: 768px) {
  /* ... seus outros códigos do formulário e checkbox ... */

  .hero {
    height: 50vh;              /* Diminui um pouco a altura do banner no celular */
  }

  .hero-image {
    object-position: center;   /* Centraliza totalmente a imagem no celular */
  }

  .hero-text {
    padding: 1.2rem;           /* Reduz o espaçamento interno para sobrar mais espaço na tela */
    width: 85%;                /* Força uma largura fixa confortável para telas estreitas */
  }

  .hero-text h2 {
    font-size: 1.8rem !important; /* Diminui o título para não quebrar o layout */
    margin-bottom: 0.5rem;
  }

  .hero-text p {
    font-size: 1rem;           /* Diminui levemente o texto de apoio para leitura mobile */
    line-height: 1.4;
  }
}

/* ========================================
   INDEX: TEXTO DE APRESENTAÇÃO da CPT
   ======================================== */
/* --- SEÇÃO DO TEXTO DESCRITIVO --- */
.apresentacao-local {
  width: 90%;               /* Garante margens de segurança em telas médias */
  max-width: 1150px;        /* Sutilmente maior que os 1000px do quadro de baixo */
  margin: 4rem auto 5rem;   /* Centraliza na tela e dá espaço do banner de cima */
}

/* O título principal da seção (Casa Pina Terapias) */
.apresentacao-local h2 {
  font-family: 'Jost', sans-serif;
  font-size: 2.4rem;
  color: #2b3a1a;           /* Use o tom escuro da sua paleta */
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
  text-align: left;
}

/* O parágrafo descritivo */
.apresentacao-local p {
  font-family: 'Jost', sans-serif;
  font-size: 1.25rem;       /* Tamanho confortável para leitura */
  color: #555555;           /* Um cinza escuro/suave para não cansar a vista */
  line-height: 1.8;         /* Espaçamento generoso entre as linhas */
  max-width: 1100px;         
  text-align: left;
  margin: 0 0 1.5rem 0;           
}

/* ========================================
   RESPONSIVO INDEX: TEXTO DE APRESENTAÇÃO da CPT
   ======================================== */
/* --- AJUSTE NA RESPONSIVIDADE (Celular) --- */
@media (max-width: 768px) {
  .apresentacao-local {
    margin: 2.5rem auto 3rem; /* Diminui os espaçamentos no celular */
  }
  
  .apresentacao-local h2 {
    font-size: 1.8rem;      /* Diminui o título para telas menores */
    text-align: left;
  }
  
  .apresentacao-local p {
    font-size: 1.1rem;      /* Ajusta o texto para o celular */
    line-height: 1.6;
    text-align: left;
    margin-bottom: 1.2rem;
  }
}

/* ========================================
   INDEX: QUADRO DE AVISOS - AGENDA ABERTA ~ CONTATO
   ======================================== */
/* Container que junta os dois blocos lado a lado */
.info-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  /*Limitaalarguramáximadoquadrocentralizado*/margin: 2rem auto;
  border-radius: 4px;
  /*Levearredondamentonoscantosexternossedesejar*/overflow: hidden;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

/* Base comum para os dois blocos */
.aviso-box {
  flex: 1; /* Faz os dois lados terem exatamente o mesmo tamanho */
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- BLOCO ESQUERDO (Agenda) --- */
.agenda-box {
  background-color: #d6f0b8; /* Tom de verde claro da imagem */
  text-align: left;
}

.agenda-box h3 {
  font-family: 'Jost', sans-serif; /* Ou sua fonte de preferência */
  font-size: 2.2rem;
  color: #2b3a1a;
  margin-bottom: 1.5rem;
}

.agenda-box .servico-link {
  font-family: 'Jost', sans-serif;
  font-size: 1.4rem;
  color: #4a7a56;
  text-decoration: none;
  text-align: right; /* Alinha o texto do serviço à direita como na foto */
  font-weight: 500;
}

.servico-link:hover {
  color: #d24707;
}

/* --- BLOCO DIREITO (Contato) --- */
.contato-box {
  background-color: #c9cb65; /* Tom de verde oliva/mostarda da imagem */
  text-align: right; /* Alinha os textos à direita */
}

.contato-box h3 {
  font-family: 'Jost', sans-serif;
  font-size: 1.6rem;
  color: #2b3a1a;
  letter-spacing: 1px;
  margin-bottom: 2rem;
}

.contato-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cria o efeito das linhas horizontais embaixo dos links de contato */
/* 1. Estilo para o link em qualquer estado (normal, clicado ou não) */

.link-linha, 
.link-linha:visited {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  color: #2b3a1a !important;      /* O !important força a sua cor mesmo se já foi clicado */
  text-decoration: none !important; /* O !important força a remoção do sublinhado azul */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6); 
  display: block;           
}

/* 2. Opcional: Efeito visual quando o usuário passa o mouse por cima */
.link-linha:hover {
  color: #d24707 !important; /* Escurece levemente a cor ao passar o mouse */
}


/* ========================================
   RESPONSIVIDADE (Celular) INDEX: QUADRO DE AVISOS - AGENDA ABERTA ~ CONTATO
   ======================================== */
@media (max-width: 768px) {
  .info-container {
    flex-direction: column; /* Empilha um bloco embaixo do outro no celular */
  }
  
  .agenda-box, .contato-box {
    text-align: center; /* Centraliza os textos para melhorar o visual no celular */
  }
  
  .agenda-box .servico-link {
    text-align: center;
  }
}

/* ========================================
   PSICOTERAPIA
   ======================================== */
/* --- BLOCO 1: HERO COM FUNDO TRANSPARENTE --- */
.psico-hero {
  background-image: url('paisagem.webp');
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camada-transparente {
  background-color: rgba(244, 245, 200, 0.85);
  /*Suacor#f4f5c8comopacidade*/padding: 3rem;
  max-width: 800px;
  width: 90%;
  text-align: center;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.psico-hero .camada-transparente h2{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2rem;
color: #2b3a1a;
margin-bottom: 1.5rem;
}

.psico-hero .camada-transparente p{
  font-family: 'Dm Sans', sans-serif;
  line-height: 1.6;
}
/* --- BLOCO 2: LADO A LADO --- */
.psico-detalhes {
  display: flex;
  gap: 3rem;
  max-width: 1100px;
  margin: 5rem auto;
  width: 90%;
  font-family: 'Dm Sans', sans-serif;
  line-height: 1.6;
}

.detalhe-coluna {
  flex: 1;
}

.psico-detalhes .detalhe-coluna h3{
  color: #3b3a00;
  font-weight: bold;
  font-weight: 700;
}

.psico-detalhes .detalhe-coluna p{
  color: #403c3c;
}
/* --- BLOCO 3: TERAPEUTA --- */
.psico-terapeuta {
  display: flex;
  align-items: center; /* Alinha o texto no meio vertical da foto */
  gap: 4rem;
  max-width: 1100px;
  margin: 5rem auto;
  width: 90%;
  background: #e7f5f8;
  background-size: cover;
}

.terapeuta-foto img {
  max-width: 350px;
  width: 100%;
  border-radius: 0;
  /*Opcional: deixa a foto quadrada o valor 0 */;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.terapeuta-texto {
  flex: 1;
}

.terapeuta-texto h2{
  color: #3b3a00; 
  font-size: 'Montserrat', sans-serif;
}

.terapeuta-texto p{
  font-size: 'Dm Sans', sans-serif;
  color: #2b3a1a;
  line-height: 1.6;
  
}

/* --- BLOCO 4: FOTO NA BORDA SUPERIOR --- */
/* Container principal da seção */
.psico-secao-banner {
  width: 100%;
  margin-top: 4rem; /* Espaço sutil entre este bloco e o anterior (a parte azul) */
}

/* A foto horizontal panorâmica (Estilo idêntico ao seu print) */
.banner-horizontal {
  width: 100%;             /* Garante que ela ocupe toda a largura da tela */
  height: 250px;           /* Controla a altura para ficar achatada e panorâmica como na foto */
  object-fit: cover;       /* Corta e adapta a imagem proporcionalmente sem distorcer ou esticar */
  display: block;          /* Remove espaços em branco bobos abaixo da imagem */
}

/* Conteúdo abaixo da foto (Título e Texto) */
.banner-conteudo {
  max-width: 1100px;       /* Mantém o mesmo alinhamento horizontal dos blocos de cima */
  margin: 3rem auto;       /* Centraliza o bloco e dá espaço acima e abaixo */
  width: 90%;
  text-align: center;      /* Centraliza o título e o texto como no seu print */
}

/* O título "Encontro Inicial para Psicoterapia" */
.banner-conteudo h2 {
  font-family: 'Jost', sans-serif;
  font-size: 2.4rem;
  color: #2b3a1a;          /* O tom de verde escuro que você está usando */
  margin-bottom: 1.5rem;
  font-weight: 700;
}

/* O parágrafo que vem logo abaixo */
.banner-conteudo p {
  font-family: 'Jost', sans-serif;
  font-size: 1.25rem;
  color: #555555;
  line-height: 1.8;
}

.link-agenda {
  /*Substituapelocódigodasuacorpersonalizada*/color: #464646;
  text-decoration: none;
  transition: color 0.3s ease;
  text-decoration: underline;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

.link-agenda:hover {
  /* Cor diferente para quando o mouse passar por cima */
  color: #578d06;
  text-decoration: underline;
}

/* --- RESPONSIVIDADE PARA CELULAR --- */
@media (max-width: 768px) {
  /* Reduz um pouco a altura do banner no celular */
  .psico-hero {
    min-height: 45vh; /* Diminui de 60vh para 45vh para dar mais leveza */
  }

  /* Ajusta os espaçamentos internos da caixa transparente */
  .camada-transparente {
    padding: 1.5rem; /* Reduz o espaço interno para o texto respirar melhor */
    width: 95%;      /* Alarga ligeiramente para aproveitar melhor a tela do celular */
  }

  /* Ajusta o título que estiver dentro desta camada no celular */
  .psico-hero .camada-transparente h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  /* Ajusta o texto que estiver dentro desta camada no celular */
  .psico-hero .camada-transparente p {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  .psico-detalhes, 
  .psico-terapeuta {
    flex-direction: column; /* Empilha tudo na vertical no celular */
    gap: 2rem;
    text-align: center;
  }
  
  .terapeuta-foto img {
    margin: 0 auto;
  }

  /* Reduz a altura da foto no celular para manter a proporção de "faixa" */
  .banner-horizontal {
    height: 140px; /* Reduzido de 250px para 140px no celular */
  }

  /* Ajusta o tamanho do título para não quebrar em muitas linhas */
  .banner-conteudo h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  /* Ajusta o texto de baixo para a tela menor */
  .banner-conteudo p {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}

/* ========================================
   TERMOS E PRIVACIDADE
   ======================================== */
.site-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

#termos, #privacidade {
  max-width: 95ch;
  margin: 4rem auto;
  padding: 1.5rem;
  text-align: justify;
  line-height: 1.5;
}

#termos {
  margin-top: 2rem;          /* menos topo no primeiro */
}

#privacidade h3 {
  color: #000000;            /* #666 exemplo: cinza na privacidade */
}

/* MARCADOR DOS TERMOS > PRIVACIDADE */
#termos ul,
#privacidade ul {
  margin-left: 2rem;
  padding-left: 1.75rem;
}

/* ========================================
   RESPONSIVIDADE TERMOS E PRIVACIDADE
   ======================================== */
@media (max-width: 768px) {
  /* ... seus outros códigos de formulários, hero, etc. ... */

  /* Ajusta os blocos de texto principais para o celular */
  #termos, #privacidade {
    margin: 1.5rem auto;     /* Reduz a margem gigante de 4rem para 1.5rem */
    padding: 1rem;           /* Reduz levemente o espaçamento interno */
    text-align: left;        /* Alinha à esquerda para evitar espaços brancos bizarros entre as palavras */
  }

  #termos {
    margin-top: 1rem;        /* Deixa o primeiro bloco ainda mais próximo do topo no celular */
  }

  /* Corrige o recuo das listas para o texto não ficar esmagado */
  #termos ul,
  #privacidade ul {
    margin-left: 0.5rem;     /* Reduz drasticamente o recuo lateral esquerdo */
    padding-left: 1.2rem;    /* Mantém apenas o espaço necessário para a bolinha aparecer */
  }
}

/* Rodapé */
/* VOLTAR AO FLEX + TRUQUE FINAL PARA 0 PIXEL */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  margin-bottom: 0;        /* sem margem */
}

footer {
  flex-shrink: 0;          /* footer não encolhe */
  margin-top: 2rem;
  padding-bottom: 0 !important;
}

/* ========================================
   PRIMEIRA PARTE DO "AGENDAR SESSÃO"
   ======================================== */


#agendarSessao2 {
  justify-content: center;
  margin-left: 30%;
  margin-right: 20%;
  background: #dedc90cb;
  padding-left: 20px;
}

#tituloA {
  text-align: center;
  color: #002661;
  font-family: 'Segoe UI';
}

#subtituloA {
  text-align: center;
  color: #59429d;
}

.destaque {
  color: #454a32;
}

.complementar {
  color: #002661;
}

.grupo {
  margin-bottom: 7px;
}

/*ESSA PARTE ESTÁ RELACIONADA AO BOX PARA PREENCHIMENTO */

input[name="nome"], input[placeholder*="Nome"], #nome-input {
    width: 65% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
}

input[name="nomeAtendido"], input[placeholder*="Digite o nome completo de quem será atendido"], #nomeAtendido-input {
    width: 55% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }

input[name="outraRelacao"], input[placeholder*="Ex.: Esposo, Esposa, Cuidador, Madrinha,..."], #outraRelacao-input {
    width: 40% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }

input[name="idade"], #idade-input {
    width: 10% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }   

input[name="cidade"], #cidade-input {
    width: 45% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }   

input[name="outroPais"], input[placeholder*="Digite o nome do país"], #outroPais-input {
    width: 40% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   margin-bottom: 8px;
   }   

select[name="estado"], select[option*="Selecione o Estado"], #estado-select {
    width: 35% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }   

select[name="pais"], select[option*="Selecione o país"], #pais-select {
    width: 30% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }    
  
input[name="telefone"], input[placeholder*="(11) 99999-9999"], #telefone-input {
    width: 30% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }    
   
input[name="email"], input[placeholder*="seunome@exemplo.com"], #email-input {
    width: 45% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }    

input[name="outroContatoTexto"], input[placeholder*="Ex.: outro número, outro email, SMS, etc."], #outroContatoTexto-input {
    width: 40% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
   font-size: 14px;            /* Texto maior se quiser */
   }   

#whatsappPergunta {
  display: none;        /* Começa escondido, o JS vai mudar para flex */
  align-items: center;  /* Alinha o texto e os botões perfeitamente pelo meio */
  gap: 15px;            /* Cria um espaço confortável entre a pergunta e os botões */
  flex-wrap: wrap;      /* Se a tela for muito pequena, os botões descem juntos de forma organizada */
  margin-top: 10px;     /* Afasta o bloco do checkbox anterior */
}
   
/* Essa parte relacionada a caixa de mensagem no AGENDAR SESSÃO */

#mais_informacao {
  width: 100%;           /* Ocupa a largura disponível */
  min-width: 450px;      /* Garante um tamanho mínimo */
  box-sizing: border-box; /* Evita que o padding/borda quebre o layout */
}

/*Botão de ENVIAR do formulário AGENDAR SESSÃO */
/* Seleciona o botão de envio dentro do formulário específico */
#form button[type="submit"] {
    background-color: #007BFF;
    /*Altereparaacorquedesejar*/color: white;
    padding: 12px 24px 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 1em;
    display: block;
    margin: 0 auto 1em auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
}

/* Efeito ao passar o mouse (opcional) */
#form button[type="submit"]:hover {
    background-color: #0056b3;
}

/* ========================================
   RESPONSIVO PRIMEIRA PARTE AGENDAR SESSÃO
   ======================================== */
@media (max-width: 768px) {
  
  /* Remove as margens grandes das laterais para o formulário ocupar a tela toda */
  #agendarSessao2 {
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 15px;
    padding-right: 15px; /* Adicionado para equilibrar as bordas internas */
  }

  /* Força TODOS os boxes de preenchimento a ocuparem a largura total no celular */
  input[name="nome"], input[placeholder*="Nome"], #nome-input,
  input[name="nomeAtendido"], input[placeholder*="Digite o nome completo de quem será atendido"], #nomeAtendido-input,
  input[name="outraRelacao"], input[placeholder*="Ex.: Esposo, Esposa, Cuidador, Madrinha,..."], #outraRelacao-input,
  input[name="idade"], #idade-input,
  input[name="cidade"], #cidade-input,
  input[name="outroPais"], input[placeholder*="Digite o nome do país"], #outroPais-input,
  select[name="estado"], select[option*="Selecione o Estado"], #estado-select,
  select[name="pais"], select[option*="Selecione o país"], #pais-select,
  input[name="telefone"], input[placeholder*="(11) 99999-9999"], #telefone-input,
  input[name="email"], input[placeholder*="seunome@exemplo.com"], #email-input,
  input[name="outroContatoTexto"], input[placeholder*="Ex.: outro número, outro email, SMS, etc."], #outroContatoTexto-input {
    width: 100% !important; /* Sobrescreve as porcentagens pequenas do desktop */
    font-size: 16px;         /* Evita o zoom automático do iPhone ao clicar no campo */
    padding: 10px;           /* Aumenta a área de toque para os dedos */
  }

  /* Corrige a caixa de mensagem para não quebrar a tela do celular */
  #mais_informacao {
    width: 100% !important;
    min-width: 100% !important; /* Remove os 450px fixos que esmagavam o layout */
  }

  /* Ajusta o botão de enviar para ficar um pouco maior e mais fácil de tocar */
  #form button[type="submit"] {
    width: 100%;             /* Faz o botão ocupar a largura total no celular (opcional, mas recomendado) */
    padding: 14px 20px;      /* Botão ligeiramente mais alto para o clique do dedo */
    font-size: 1.1em;
  }
}

/* ========================================
   CHECKBOX PERSONALIZADO AGENDAR SESSAO
   ======================================== */
.radio-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  border: 2px solid #ccc;
  border-radius: 3px;
  background: white;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.radio-checkbox:checked {
  background: #28a745;
  border-color: #28a745;
}

.radio-checkbox:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.termo-concordar,
.termo-discordar {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.termo-concordar label,
.termo-discordar label {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-size: 14px;
}

.termo-concordar label strong,
.termo-discordar label strong {
  color: #333;
}

.social-icon {
  display: flex;
  align-items: center;      /* Alinha verticalmente */
  gap: 8px;                 /* Espaço entre img e texto */
}

.social-icon img {
  height: 18px;             /* Mesmo tamanho do texto */
  width: auto;              /* Mantém proporção */
  vertical-align: middle;   /* Backup para browsers antigos */
}

/* ========================================
   RESPONSIVO
   ======================================== */
@media (max-width: 768px) {
  .logo-section { flex-direction: column; text-align: center; }
  .logo-img { height: 70px; }
  .footer-container { grid-template-columns: 1fr; text-align: center; }
  .hero { height: 50vh; }
  .hero-text h2 { font-size: 1.9rem; }

  /* Aumenta o tamanho do checkbox para facilitar o toque com o dedo */
  .radio-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin-right: 12px; /* Dá um pouco mais de espaço entre o box e o texto */
  }

  /* Ajusta o tamanho e posição do sinal de check (✓) para o novo tamanho */
  .radio-checkbox:checked::after {
    font-size: 16px;
  }

  /* Aumenta o tamanho do texto do termo para melhor leitura no celular */
  .termo-concordar label,
  .termo-discordar label {
    font-size: 16px;
    line-height: 1.4; /* Melhora o espaçamento entre as linhas se o texto quebrar */
  }
}

/* ========================================
   CONTATO
   ======================================== */

#contatoCPT {
  max-width: 95ch;
  margin: 4rem auto;
  padding: 1.5rem;
  text-align: justify;
  line-height: 1.5;
  background-color: #d3d171cb;
  color: #3e3167;
  }

  .noBorda {
  border: none;  
  }

textarea[name="mensagem"], textarea[placeholder*="Deixe aqui sua mensagem..."], #mensagem-textarea {
    width: 100%;     /* Força largura total */
    box-sizing: border-box;
   font-size: 16px;            /* Texto maior se quiser */
   }  
          
input[name="emailContato"], #emailContato-input {
    width: 50% !important;     /* Força largura total */
    box-sizing: border-box;
    padding: 6px;              /* Aumenta altura visual */
    font-size: 14px;            /* Texto maior se quiser */
}  

.tituloContato {
  color: #3e3167;
}

#botao1 {
display: block;
margin: 1em auto 0;  
font-size: 1.2em;
background: #626133d0;
border: 0;
margin-top: 1em;
color: #ffffff;
padding: 0.8em 2em;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

#botao1:hover {
  background: #59429d;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

/* Efeito de sombra no botão "ir para página inicial" da mensagem de envio do formulário CONTATO */   
.box{
  position: relative;
  display: inline-flex;
  border-radius: 8px;
  padding: 2px;
  isolation: isolate;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

.box::before{
  content: "";
  position: absolute;
  inset: -1px;
  background: conic-gradient(        from var(--deg) at center,       #00c3ff,       #4d0199,       #6300c6,       #00c3ff   );
  border-radius: inherit;
  z-index: -1;
  animation: autoRotate 2s linear infinite;
  -webkit-animation: autoRotate 2s linear infinite;
  -webkit-border-radius: inherit;
  -moz-border-radius: inherit;
  -ms-border-radius: inherit;
  -o-border-radius: inherit;
}

.box::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(    from var(--deg) at center,    #00c3ff,    #4d0199,    #6300c6,    #00c3ff  );
  filter: blur(5px);
  z-index: -2;
  -webkit-filter: blur(5px);
  animation: autoRotate 2s linear infinite;
  -webkit-animation: autoRotate 2s linear infinite;
  -webkit-border-radius: inherit;
  -moz-border-radius: inherit;
  -ms-border-radius: inherit;
  -o-border-radius: inherit;
}

@property --deg{
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@keyframes autoRotate {
  to{
    --deg: 360deg;
  }
}

/* ========================================
   RESPONSIVO CONTATO
   ======================================== */
/* ==========================================================================
   REGRAS DE RESPONSIVIDADE PARA O FORMULÁRIO DE CONTATO (Telas até 768px)
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Ajusta o container principal para usar melhor o espaço do celular */
  #contatoCPT {
    margin: 1.5rem 15px; /* Reduz o recuo vertical e fixa 15px nas laterais */
    padding: 1.2rem;     /* Compacta levemente o espaçamento interno */
    text-align: left;    /* Justificar texto em tela pequena costuma deixar espaços em branco feios */
  }

  /* Força o campo de email a ocupar a largura total na tela do celular */
  input[name="emailContato"], #emailContato-input {
    width: 100% !important; /* Substitui os 50% do computador */
    font-size: 16px;         /* Evita o zoom automático do sistema iOS/iPhone */
    padding: 10px;           /* Aumenta a área para o toque dos dedos */
  }

  /* Garante uma boa experiência de digitação na caixa de mensagem */
  textarea[name="mensagem"], textarea[placeholder*="Deixe aqui sua mensagem..."], #mensagem-textarea {
    font-size: 16px;         /* Evita o zoom automático ao clicar */
    padding: 10px;           /* Confortável para digitação mobile */
  }

  /* Deixa o botão principal mais robusto para clique touch */
  #botao1 {
    width: 100%;             /* Opcional: faz o botão ocupar toda a largura (melhor para dedão) */
    padding: 1em 2em;        /* Dá uma altura levemente maior */
    font-size: 1.1em;        /* Ajusta o equilíbrio do texto */
  }

  /* Garante que o container com a animação de borda iluminada se adapte ao celular */
  .box {
    display: flex;           /* Alinha o conteúdo interno perfeitamente */
    width: 100%;             /* Faz a caixinha brilhar acompanhando o botão 100% */
    box-sizing: border-box;
  }
}