html, body {
  height: 1%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}


.whatsapp-btn {
  position: fixed;           /* fixa na tela */
  bottom: 10px;              /* NUNCA negativo */
  right: 10px;
 left: 10px;
  width: 50px;
  height: 50px;

  background-color: #ffffff;
  border-radius: 95%;        /* botão redondo */

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 100;
}

html {
  scroll-behavior: smooth;
}


.whatsapp-btn img {
  width: 32px;
  height: 32px;
}

/* RESET + VARIÁVEIS */
*{
  box-sizing:border-box;
  transition:background .3s,color .3s,transform .2s
}
:root{
  --bg-1:#635da0;--bg-2:#0699f4;--bg-3:#e6e6e680;
  --card-bg:#fff;--text-color:#000;--input-bg:#f4f6fb;
  --border-color:#000;--sidebar-bg:#fff
}
body.dark{
  --bg-1:#0f2027;--bg-2:#203a43;--bg-3:#2c5364;
  --card-bg:#1f1f1f;--text-color:#fff;
  --input-bg:#2a2a2a;--border-color:#444;--sidebar-bg:#1c1c1c
}

/* BODY */
body{
  font-family:Arial,sans-serif;
  margin:0;min-height:100vh;
  padding:80px 0 40px;
  display:flex;flex-direction:column;align-items:center;
  color:var(--text-color);
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2),var(--bg-3));
  background-size:400% 400%;
  animation:gradientMove 9s ease infinite
}
@keyframes gradientMove{
  0%{background-position:0 50%}
  50%{background-position:100% 50%}
  100%{background-position:0 50%}
}
.hidden{display:none}

/* TOPO */
body.dark .app-header{background:#000}
body.dark .topo-app h1 span{color:#ff3c00}

/* LOGO */
.logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:32px;font-weight:900;
  letter-spacing:3px;text-transform:uppercase;
  color:#fff
}
.logo span{color:#ff031c}
.sublogo{font-size:12px;letter-spacing:3px;color:#4cf603}
.logo-img{width:60px;height:auto}

/* BOTÕES */
.icon-btn,.btn-admin,.btn-theme{
  border:none;border-radius:10px;
  color:#fff;cursor:pointer
}
.icon-btn{
  width:40px;height:40px;
  background:#1f1f1f;font-size:18px
}
.icon-btn:hover{background:#2a2a2a}
.header-actions{display:flex;gap:8px}

.btn-admin,.btn-theme{
  position:fixed;right:12px;
  width:42px;height:42px;
  font-size:18px;z-index:9999
}
.btn-admin{top:12px;background:#111;font-size:22px}
.btn-admin:hover{background:#333}
.btn-theme{top:60px;background:#555}

.btn-musica{
  position:fixed;top:12px;left:12px;
  width:70px;height:52px;
  background:#a7e894;color:#fff;
  border:none;border-radius:12px;
  font-size:14px;cursor:pointer;z-index:9999
}

/* CONTAINER / FORM */
.container{
  width:100%;
  padding:110px 16px 0;
  display:flex;
  justify-content:center
}

.form-box{
  width:100%;max-width:420px;
  background:var(--card-bg);
  padding:25px;border-radius:18px;
  box-shadow:0 10px 20px rgba(0,0,0,.15)
}
label{display:block;margin-top:10px;font-size:14px}
input,select,textarea{
  width:100%;padding:10px;margin-top:6px;
  border-radius:8px;
  border:1px solid var(--border-color);
  background:var(--input-bg);
  color:var(--text-color);font-size:14px
}
textarea{resize:none}

/* BOTÃO PADRÃO */
button{
  width:100%;margin-top:15px;padding:12px;
  border:none;border-radius:10px;
  background:#25D366;color:#fff;
  font-weight:700;cursor:pointer;
  touch-action:manipulation
}
button:hover{opacity:.85}
button:active{transform:scale(.97)}
input,textarea,select,button{-webkit-tap-highlight-color:transparent}

/* SIDEBAR ADMIN */
.admin-sidebar{
  position:fixed;top:0;right:-100%;
  width:340px;max-width:100%;height:100vh;
  background:var(--sidebar-bg);
  box-shadow:-5px 0 60px rgba(0,0,0,.25);
  padding:30px;
  transition:right .35s ease;
  z-index:9998;overflow-y:auto
}
.admin-sidebar.active{right:0}
.admin-wrapper{max-width:300px;margin:0 auto}
.admin-header{
  display:flex;justify-content:space-between;align-items:center
}
.close-admin{background:none;border:none;font-size:20px;cursor:pointer}

/* ADMIN */
.stats-container,#adminList>div{
  background:var(--card-bg);
  padding:15px;border-radius:14px;
  margin-bottom:15px
}
.stats-container{box-shadow:0 6px 15px rgba(0,0,0,.1)}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px
}
.stat-card{
  background:linear-gradient(135deg,#ff7eb3,#ff758c);
  color:#fff;padding:14px;border-radius:14px;text-align:center
}
.stat-card span{font-size:13px}
.stat-card strong{display:block;font-size:22px;margin-top:4px}

.logout{background:#e73c3c;margin-bottom:30px}

/* AÇÕES */
#btnLimparHistorico{
  position:absolute;bottom:-50px;right:20px;
  width:40px;height:40px;
  border-radius:40%;border:none;
  background:#030fe8;color:#fff;
  cursor:pointer;z-index:9999
}
.btn-remove-mes{
  position:absolute;top:28px;right:12px;
  width:20px;height:12px;
  border:none;border-radius:35%;
  background:#ff758c;color:#fff;
  font-size:18px;cursor:pointer;line-height:12px
}
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 15px;
}

.onfire {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #f00000;
}

.logo-inline {
  width: 60px;   /* controla o tamanho da logo */
  height: auto;
}

.conteudo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  min-height: 80vh;
}

.frase {
  position: absolute;
  top: 175%;                /* meio da tela */
  transform: translateY(-45%);
  max-width: 400px;
  font-size: 28px;
  color: #fff;
  opacity: 0.9;
  line-height: 1.9;
  text-align: left;
}

.frase {
  margin-top: 450px;   /* distância das imagens */
  margin-bottom: 90px;
}

.frase {
  max-width: 1100px;   /* aumenta a largura do texto */
font-size: 40px; /* tamanho da letra */
}


@media (max-width: 768px) {
  .conteudo {
    flex-direction: column;
    align-items: center;
  }

  .frase {
    margin-top: 120px;
    font-size: 22px;
    max-width: 90%;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .frase {
    position: static;   /* só no mobile */
    margin-top: 30px;
    text-align: center;
    max-width: 90%;
    font-size: 22px;
  }
}
/* ===== CORREÇÃO APENAS DAS FRASES EM TELAS MENORES ===== */
@media (max-width: 900px) {

  .frase {
    position: static;      /* tira o absolute */
    transform: none;
    margin: 30px auto;
    max-width: 90%;
    text-align: center;
    font-size: 22px;
  }

}
/* ===== TÓPICOS ACIMA DO FORMULÁRIO ===== */
.topicos {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 140px;
  flex-wrap: wrap;
}

.topicos span {
  color: rgb(0, 0, 0);
  font-weight: 600;
  font-size: 35px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .2s, transform .2s;
}

.topicos span:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 768px) {
  .topicos {
    gap: 15px;
    font-size: 14px;
  }
}
/* ===== GALERIA ABAIXO DO FORMULÁRIO ===== */
.cabelos {
   background: #ffffff;    /* fundo do card */
   padding: 20px;
     border-radius: 30px;
     box-shadow: 0 10px 40px rgb(8, 7, 7); /* sombra suave */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 180px));
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: nowrap; /* mantém uma ao lado da outra */
 box-shadow: 0 20px 85px rgb(37, 36, 36); /* sombra suave */
}

.cabelos img {
   box-shadow: 0 20px 85px rgba(0,0,0,1.05); /* sombra suave */
  width: 100%;
  aspect-ratio: 1 / 1;   /* todas quadradas */
  object-fit: cover;     /* corta sem distorcer */
  border-radius: 12px;
}

/* Tablet */
@media (max-width: 900px) {
  .cabelos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .cabelos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cortes{
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 1000;   /* espessura da letra */
  color: #cc0606;
  background-color: #ffffff;    /* fundo do card */
   padding: 15px;
     border-radius: 15px;
}


/* ===== GALERIA ABAIXO DO FORMULÁRIO ===== */
.unhass {
  background: #ffffff;    /* fundo do card */
   padding: 20px;
     border-radius: 30px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 180px));
  gap: 20px;
  margin-top: 25px;
  justify-content: center;

}

.unhass img {
   box-shadow: 0 20px 85px rgb(216, 52, 52); /* sombra suave */
  width: 100%;
  aspect-ratio: 1 / 1;   /* todas quadradas */
  object-fit: cover;     /* corta sem distorcer */
  border-radius: 12px;
}

/* Tablet */
@media (max-width: 900px) {
  .unhass {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .unhass {
    grid-template-columns: repeat(2, 1fr);
  }
}

.unhaa{
  font-family: cursive;
   font-weight: 200;   /* espessura da letra */
   color: #cc0606;
  background-color: #ffffff;    /* fundo do card */
   padding: 15px;
     border-radius: 15px;
}
a {
  color: inherit;          /* herda a cor do texto pai */
  text-decoration: none;   /* tira o sublinhado */
}

.fundo-animado {
  min-height: 100vh;

  background: linear-gradient(
    270deg,
    #1e88e5,
    #42a5f5,
    #26c6da,
    #66bb6a
  );

  background-size: 800% 800%;
  animation: fundoAnimado 15s ease infinite;
}
@keyframes fundoAnimado {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.rodape {
  width: 100%;
  background: #0f172a;
  color: #fff;
  padding: 40px 0;
}

.rodape-conteudo {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.rodape-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.rodape-item strong {
  display: block;
  margin-bottom: 5px;
}

.rodape-item p {
  margin: 0;
  font-size: 14px;
}

.rodape-item a {
  color: #38bdf8;
  text-decoration: none;
}