/* Customizações Simetria */

/* ========================================
   ANIMAÇÕES OTIMIZADAS DO HEADER
   ======================================== */

/* Animação da Logo - Rápida e Suave */
@keyframes logo-grow {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#header .logo {
  animation: logo-grow 0.6s ease-out !important;
  transform: none !important;
}

/* Remover qualquer rotação da logo */
#header .logo img {
  animation: none !important;
  transform: none !important;
}

body.is-preload #header .logo {
  opacity: 0;
  transform: scale(0.8);
}

/* OTIMIZAÇÃO: Acelerar animação do texto do header */
#header.alt > * {
  transition: opacity 0.8s ease !important;
  transition-delay: 0.2s !important;
}

/* Logo com transição mais rápida */
#header.alt .logo {
  transition: opacity 0.6s ease, transform 0.4s ease !important;
  transition-delay: 0s !important;
}

/* Animação rápida para h1 e p do header */
#header.alt h1,
#header.alt p {
  transition: opacity 0.6s ease !important;
  transition-delay: 0.3s !important;
}

/* Garantir que ícones FontAwesome apareçam */
.icon.major:before {
  display: inline-block;
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Login Link no Header */
.login-link {
  position: absolute;
  top: 2em;
  right: 2em;
  color: #ffffff !important;
  text-decoration: none;
  border: solid 1px rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 0.5em 1.5em;
  font-size: 0.9em;
  transition: all 0.2s ease;
  z-index: 10000;
}

.login-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #00cfdd;
  color: #00cfdd !important;
}

.login-link .icon {
  margin-right: 0.5em;
}

@media screen and (max-width: 736px) {
  .login-link {
    top: 1em;
    right: 1em;
    padding: 0.4em 1em;
    font-size: 0.8em;
  }
}

/* Botão Primário com Cor Destacada */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
  background-color: #00cfdd !important;
  color: #0c0c1b !important;
  font-weight: 400;
  box-shadow: 0 0 0 0 transparent;
  border: none;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
  background-color: #00e5f5 !important;
  box-shadow: 0 4px 12px rgba(0, 207, 221, 0.3);
}

input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
  background-color: #00b8c7 !important;
}

/* Ajustes no formulário da seção CTA */
#cta form {
  max-width: 50em;
  margin: 0 auto;
}

/* Placeholder mais escuro para melhor legibilidade */
#cta form input::placeholder,
#cta form textarea::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

/* Firefox */
#cta form input::-moz-placeholder,
#cta form textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

/* Internet Explorer 10-11 */
#cta form input:-ms-input-placeholder,
#cta form textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Microsoft Edge */
#cta form input::-ms-input-placeholder,
#cta form textarea::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}

/* Select - primeira opção (placeholder) */
#cta form select {
  color: rgba(0, 0, 0, 0.5);
}

#cta form select:valid {
  color: inherit !important;
}

/* Quando uma opção válida é selecionada */
#cta form select:not([value=""]):not(:invalid) {
  color: inherit !important;
}

#cta form select option {
  color: #000000;
}

#cta form select option[value=""] {
  color: rgba(0, 0, 0, 0.5);
}

/* Melhorias de Contraste */
#header p {
  color: rgba(255, 255, 255, 0.75);
}

/* Footer com melhor contraste */
#footer p {
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#footer h2 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#footer a {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#footer .copyright {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Texto da seção spotlight (Por que usar) - melhor contraste */
.spotlight .content p {
  color: rgba(0, 0, 0, 0.75) !important;
}

.spotlight .content ul {
  color: rgba(0, 0, 0, 0.75) !important;
  list-style: none;
  padding-left: 0;
}

.spotlight .content ul li {
  color: rgba(0, 0, 0, 0.85) !important;
  margin-bottom: 1.2em;
  padding-left: 1.5em;
  position: relative;
  text-align: left;
}

.spotlight .content ul li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #00cfdd;
  font-weight: bold;
  font-size: 1.2em;
}

.spotlight .content strong {
  color: rgba(0, 0, 0, 0.95) !important;
  font-weight: 600 !important;
}

/* Correção da imagem deformada no mobile */
.spotlight .image img {
  width: 100% !important;
  height: auto !important;
  max-width: 600px;
}

/* Ajustes responsivos progressivos para a imagem */

/* Desktop grande */
@media screen and (max-width: 1680px) {
  .spotlight .image img {
    max-width: 550px !important;
  }
}

/* Desktop médio */
@media screen and (max-width: 1280px) {
  .spotlight .image img {
    max-width: 480px !important;
  }
}

/* Tablets landscape - limitar a 50% quando imagem fica ao lado */
@media screen and (min-width: 981px) and (max-width: 1680px) {
  .spotlight .image {
    max-width: 50% !important;
  }
  
  .spotlight .image img {
    max-width: 100% !important;
  }
}

/* Tablets landscape */
@media screen and (max-width: 980px) {
  .spotlight .image img {
    max-width: 420px !important;
  }
}

/* Tablets portrait */
@media screen and (max-width: 736px) {
  .spotlight .image img {
    max-width: 340px !important;
  }
}

/* Smartphones landscape */
@media screen and (max-width: 640px) {
  .spotlight .image img {
    max-width: 300px !important;
  }
}

/* Smartphones portrait */
@media screen and (max-width: 480px) {
  .spotlight .image img {
    max-width: 280px !important;
  }
}

/* Smartphones pequenos */
@media screen and (max-width: 360px) {
  .spotlight .image img {
    max-width: 240px !important;
  }
}

/* Correção de contraste para todas as seções com fundo branco */
#intro p,
#intro .content p,
#first p,
#first .major p,
#second p,
#second .major p,
#cta p,
#cta .major p,
.main.special .major p,
.main.special > p {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* Texto content da seção second em coluna única */
#second p.content {
  max-width: 50em;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  -moz-columns: auto !important;
  -webkit-columns: auto !important;
  -ms-columns: auto !important;
  columns: auto !important;
}

/* Títulos das seções também precisam de contraste */
#first h2,
#second h2,
#cta h2,
.main.special h2 {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Subtítulos */
#first .major p,
#second .major p {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* Texto dos recursos - melhor contraste */
.features li h3 {
  color: #555555 !important;
  font-weight: 700 !important;
}

.features li p {
  color: #666666 !important;
}

/* Ajustes nos Ícones */
.icon.major:before {
  font-size: 2.5em;
}

/* Melhorias nos Statistics */
.statistics li strong {
  font-size: 1.5em;
  display: block;
  margin-bottom: 0.25em;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.statistics li small {
  display: block;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-top: 0.5em;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  line-height: 1.4;
}

/* Badge LGPD no CTA */
#cta .major p .icon {
  margin-right: 0.5em;
  font-size: 1.1em;
}

/* Mensagens do formulário */
.form-message {
  padding: 1em 1.5em;
  margin-bottom: 2em;
  border-radius: 8px;
  font-size: 0.95em;
  line-height: 1.6;
  text-align: center;
}

.form-message.success {
  background-color: rgba(0, 207, 221, 0.15);
  border: 2px solid #00cfdd;
  color: #00cfdd;
  font-weight: 500;
}

.form-message.error {
  background-color: rgba(255, 100, 100, 0.15);
  border: 2px solid #ff6464;
  color: #ff6464;
  font-weight: 500;
}

/* Animação suave para mensagens */
.form-message {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ========================================
   MELHORIAS MOBILE - FONTE E CONTRASTE
   ======================================== */

@media screen and (max-width: 736px) {
  
  /* Aumentar tamanho da fonte no header mobile */
  #header p {
    font-size: 1.1em !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  #header h1 {
    font-size: 1.8em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  /* Melhorar contraste e tamanho do texto nas seções */
  .spotlight .content p,
  #intro p,
  #intro .content p {
    font-size: 1.05em !important;
    line-height: 1.75 !important;
    color: rgba(0, 0, 0, 0.9) !important;
  }
  
  .spotlight .content ul {
    padding-left: 0 !important;
    text-align: left !important;
  }
  
  .spotlight .content ul li {
    font-size: 1.05em !important;
    line-height: 1.75 !important;
    color: rgba(0, 0, 0, 0.95) !important;
    margin-bottom: 1.3em !important;
    padding-left: 1.8em !important;
    text-align: left !important;
  }
  
  .spotlight .content ul li:before {
    font-size: 1.3em !important;
    left: 0.2em !important;
  }
  
  .spotlight .content strong {
    color: #000000 !important;
    font-weight: 700 !important;
  }
  
  /* Títulos das seções com melhor contraste */
  #intro h2,
  #first h2,
  #second h2,
  #cta h2,
  .main.special h2 {
    color: #000000 !important;
    font-size: 1.6em !important;
    line-height: 1.4 !important;
  }
  
  /* Subtítulos */
  #first .major p,
  #second .major p,
  #cta .major p {
    font-size: 1.05em !important;
    color: rgba(0, 0, 0, 0.8) !important;
    line-height: 1.6 !important;
  }
  
  /* Cards de recursos */
  .features li h3 {
    color: #000000 !important;
    font-size: 1.2em !important;
    font-weight: 700 !important;
  }
  
  .features li p {
    color: rgba(0, 0, 0, 0.85) !important;
    font-size: 1em !important;
    line-height: 1.65 !important;
  }
  
  /* Estatísticas */
  .statistics li strong {
    font-size: 1.8em !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-weight: 400 !important;
  }
  
  .statistics li small {
    font-size: 0.95em !important;
    color: rgba(255, 255, 255, 0.98) !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  /* Texto geral das seções */
  #second p.content {
    font-size: 1.05em !important;
    color: rgba(0, 0, 0, 0.9) !important;
    line-height: 1.75 !important;
  }
  
  /* Footer */
  #footer p {
    font-size: 1em !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  #footer h2 {
    color: #ffffff !important;
    font-size: 1.4em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  
  #footer a {
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  #footer .copyright {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  /* Formulário */
  #cta form input,
  #cta form select,
  #cta form textarea {
    font-size: 1em !important;
  }
  
  #cta form input[type="submit"] {
    font-size: 1.1em !important;
    padding: 0.9em 2em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
}

/* Melhorias para telas muito pequenas */
@media screen and (max-width: 480px) {
  
  #header p {
    font-size: 1.05em !important;
  }
  
  #header h1 {
    font-size: 1.6em !important;
  }
  
  .spotlight .content p,
  #intro p {
    font-size: 1.02em !important;
  }
  
  #intro h2,
  #first h2,
  #second h2,
  #cta h2 {
    font-size: 1.4em !important;
  }
}