/* ===== index.css ===== */
/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
body{font-family:'Poppins',sans-serif}

/* Garantir que não haja espaços entre seções */
section{margin:0;padding:0}
footer{margin-top:0!important;padding-top:25px!important;padding-bottom:20px!important}
.about-us + *{margin-top:0!important}

/* ===== SPLASH ===== */
#splash-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:white;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}
.splash-logo{width:300px;max-width:80%;margin-bottom:20px}
.loader{border:8px solid #f3f3f3;border-top:8px solid #4CAF50;border-radius:50%;width:60px;height:60px;animation:spin 1.5s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ===== SEÇÃO PRINCIPAL ===== */
main{margin-top:0;background-image:url('https://firebasestorage.googleapis.com/v0/b/aplicacaobichorural.appspot.com/o/imagens%2Fpaper1.jpg?alt=media&token=5129f414-d136-4553-a6c2-d6e3778f9c0b');background-size:cover;background-position:center;background-repeat:no-repeat}

/* ===== LOGO ===== */
.logo-container{text-align:center;margin-top:20px}
.logo{width:280px;max-width:90%}

/* ===== HERO ===== */
.intro{text-align:center;padding:30px 20px;color:#2b2b2b}
.hero-card{background:#fff;padding:15px 20px;border-radius:10px;display:inline-block;transition:transform .3s ease,box-shadow .3s ease;max-width:90%}
.hero-card:hover{transform:translateY(-5px);box-shadow:0 6px 15px rgba(0,0,0,.2)}
.hero-card h2{font-size:1.5em;margin:0}

/* ===== CTA ===== */
#cta-btn{width:80%;max-width:300px;padding:15px 0;background:#4CAF50;color:#fff;border:none;border-radius:8px;font-size:18px;cursor:pointer;transition:background-color .3s ease;margin:20px auto 0;display:block}
#cta-btn:hover{background:#45a049}

/* ===== CARDS ===== */
.card-navigation{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;padding:15px 15px 30px}
.card{background:#fff;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);width:160px;height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;text-align:center;position:relative;overflow:hidden}
.card:hover{transform:translateY(-10px);box-shadow:0 6px 15px rgba(0,0,0,.2)}
.icon-container{height:60px;display:flex;justify-content:center;align-items:center}
.icon-circle{font-size:2em;background:#4CAF50;color:#fff;border-radius:50%;padding:15px;display:flex;justify-content:center;align-items:center}
.text-container{margin-top:10px}
.card h3{margin:0;font-size:1em;color:#333}

/* ===== SOBRE / TESTEMUNHOS ===== */
.about-us{background:#f5f5f5;padding:40px 20px 30px;text-align:center;border:none;margin-bottom:0}
.about-us .content{max-width:1200px;margin:0 auto}
.about-us h2{font-size:1.8em;margin-bottom:20px;color:#4CAF50}
.about-us p{font-size:1em;color:#333;line-height:1.6;margin-bottom:40px}
.testimonials{margin-top:40px;margin-bottom:30px}
.testimonials h3{font-size:1.5em;color:#333;margin-bottom:20px}
.testimonial-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:20px}
.testimonial-card{background:#fff;border-radius:10px;padding:20px;flex:1 1 250px;max-width:280px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.1);margin:0;transition:transform .3s ease,box-shadow .3s ease}
.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.testimonial-card img{width:70px;height:70px;border-radius:50%;object-fit:cover;margin-bottom:10px}
.testimonial-card h3{font-size:1.1em;color:#333;margin:8px 0 4px}
.testimonial-card h4{font-size:0.9em;color:#666;margin-bottom:8px;font-weight:500}
.testimonial-card p{font-size:.85em;color:#555;line-height:1.5}

/* ===== CTA 2 ===== */
.cta{margin-top:30px;padding-bottom:30px;margin-bottom:0}
.cta p{font-size:1.2em;color:#333;margin-bottom:15px}
.cta-button{display:block;margin:0 auto;padding:12px 20px;background:#4CAF50;color:#fff;border-radius:8px;text-decoration:none;font-size:1em;transition:background-color .3s ease;border:none;cursor:pointer;width:100%;max-width:300px}
.cta-button:hover{background:#45a049}

/* ===== NOTIFICAÇÕES ===== */
.notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#4CAF50;color:#fff;padding:15px 25px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:2000;display:none;text-align:center;max-width:80%;width:fit-content;font-size:1.1em}
.notification.show{display:block;animation:fadeInOut 3s forwards}
@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}

/* ===== CHAT ===== */
.chat-button{position:fixed;bottom:30px;right:30px;background:#4CAF50;color:#fff;width:60px;height:60px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.3);z-index:1002;transition:background-color .3s,transform .2s}
.chat-button:hover{background:#45a049;transform:scale(1.05)}
.chat-button i{font-size:24px}
.chat-window{position:fixed;bottom:100px;right:30px;width:370px;max-width:90%;background:#fff;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.2);overflow:hidden;display:none;flex-direction:column;z-index:1001;max-height:450px}
.chat-window.open{display:flex}
.chat-header{background:#4CAF50;color:#fff;padding:15px;position:relative}
.chat-header h3{margin:0;font-size:18px}
.close-chat{position:absolute;top:10px;right:15px;font-size:28px;cursor:pointer;font-weight:300;line-height:1;transition:transform .2s}
.close-chat:hover{transform:scale(1.1)}
.chat-body{padding:15px;max-height:400px;overflow-y:auto;text-align:justify;word-wrap:break-word;word-break:break-word}
.message{margin-bottom:15px}
.bot-message,.user-message{padding:10px;border-radius:10px}
.bot-message{background:#f1f1f1;text-align:left}
.user-message{background:#dcf8c6;text-align:right}
.message ul{list-style:none;padding:0;margin:10px 0 0 0}
.message ul li{margin-bottom:8px;text-align:justify;display:flex;align-items:center}
.message ul li i{color:#4CAF50;margin-right:8px;min-width:20px;font-size:16px}
.message a{color:#333;text-decoration:none;word-wrap:break-word;word-break:break-word}
.message a:hover{text-decoration:underline;color:#4CAF50}

/* ===== OVERLAY ===== */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;display:none;opacity:0;transition:opacity .3s ease}
.overlay.show{display:block;opacity:1}
.overlay.hide{opacity:0;transition:opacity .3s ease}
body.no-scroll{overflow:hidden}

/* ===== RESPONSIVO ===== */
@media (max-width:768px){
  .logo{width:220px}
  .hero-card h2{font-size:1.3em}
  .card{width:100%;max-width:140px;height:180px}
  #cta-btn{font-size:16px}
  .icon-circle{font-size:1.5em;padding:12px}
  .chat-window{right:10px;width:90%;max-width:350px}
  .chat-button{width:55px;height:55px;bottom:20px;right:20px}
  .chat-button i{font-size:22px}
  .chat-header h3{font-size:16px}
  .close-chat{font-size:25px}
  .chat-body .message{font-size:14px}
  .message ul li{font-size:14px}
  .testimonial-card{flex:1 1 calc(50% - 10px);max-width:calc(50% - 10px);margin:0}
  .intro{display:flex;flex-direction:column;align-items:center}
  .hero-card{width:100%;margin:10px 0}
  .cta-button{width:100%;max-width:300px;margin:0 auto}
  .user-type-selection{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:15px}
  .user-type-card{flex:1 1 45%;max-width:200px}
}
@media (max-width:480px){
  .logo{width:200px}
  .hero-card h2{font-size:1.2em}
  .testimonial-card{flex:1 1 100%;max-width:100%;margin:0 0 15px 0}
  .hero-card{width:100%;margin:10px 0}
  .cta-button{width:100%;max-width:250px;margin:0 auto}
  .user-type-selection{gap:10px;margin-bottom:10px}
  .user-type-card{padding:15px}
  .chat-window{width:calc(100% - 20px);max-width:100%;right:10px;left:10px}
}

/* ===== CARDS DE USUÁRIO NO MODAL ===== */
.user-type-selection{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.user-type-card{flex:1 1 45%;max-width:200px;background:#f9f9f9;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);padding:20px;text-align:center;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;position:relative}
.user-type-card:hover{transform:scale(1.05);box-shadow:0 6px 15px rgba(0,0,0,.2)}
.user-type-card i{font-size:50px;margin-bottom:10px;color:#4CAF50}
.user-type-card label{display:block;font-size:16px;margin-bottom:10px;cursor:pointer}
.user-type-card input[type="radio"]{position:absolute;bottom:15px;left:50%;transform:translateX(-50%)}
.user-type-card.selected{border:2px solid #4CAF50;background:#f0f0f0;box-shadow:0 4px 8px rgba(0,0,0,.1)}

/* ===== Modal seguro (scroll interno) ===== */
#auth-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:16px;overflow-y:auto;z-index:2000}
#auth-modal > *{width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:12px}

/* ===== Campo de senha + Olho + Checklist ===== */
.br-input-wrap{position:relative;display:block;width:100%}
.br-input-wrap > input[type="password"],
.br-input-wrap > input[type="text"]{padding-right:46px;min-height:44px}

/* Olho centralizado */
.br-eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:none; background:transparent; cursor:pointer;
  padding:0; line-height:0; appearance:none; -webkit-appearance:none
}
.br-eye svg{width:20px;height:20px;fill:#777;opacity:.75;transition:opacity .2s,fill .2s}
.br-eye:hover svg,.br-eye.is-open svg{opacity:1;fill:#333}
input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear{display:none}

/* Checklist */
.pw-req{margin:8px 0 12px;font-size:12px;background:#f7fbf7;border:1px dashed #4CAF50;padding:8px 10px;border-radius:6px;color:#333}
.pw-req ul{list-style:none;padding-left:0;line-height:1.45}
.pw-req li.ok{color:#2e7d32;font-weight:600}
.pw-req li.bad{color:#d32f2f;font-weight:500}
.pw-req .br-eye{display:none!important}
.caps-msg{margin-top:6px;font-size:12px;color:#d32f2f;display:none}