/*
  style.css — Versão limpa e sequencial
  Ordem: header (logo) → hero → formulário (seções) → footer
  Notas curtas em PT-BR; cores explícitas (hex) onde aplicável.
*/

/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body
{width:100%;height:100%;overflow-x:hidden}

/* Variáveis auxiliares (sombras / efeitos não-cor) */
:root{
  --shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);
  --glow-blue: 0 0 20px rgba(43, 43, 43, 0.274);
}

/* Animações */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@keyframes glow{0%,100%{box-shadow:var(--glow-blue)}50%{box-shadow:var(--glow-blue),0 0 30px rgba(41,98,255,0.8)}}
@keyframes bg-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Body / fundo */
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#000000;
  background:#ffffff;
  line-height:1.6;
  position:relative
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(0,0,0,0.03)"/></svg>') repeat;
  animation:float 10s ease-in-out infinite;
  pointer-events:none;
  z-index:-1
}

/* Container central (mobile-first) */
.mobile-container{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:20px
}

/* Header (logo) */
.header{
  position:
  relative;display:
  flex;align-items:
  center;justify-content:
  center;padding:18px 0 14px;
  backdrop-filter:blur(10px);
  background:#ffffff;
  border-bottom:1px solid #cccccc
}

.logo{
  max-height:110px;
  width:auto;
  object-fit:contain
}

/* HERO (título e botões principais) */
.hero{
  padding:24px 16px 16px;
  text-align:center;
  background:#ffffff
}
.hero-inner{
  position:relative;
  z-index:1
}
.hero h1{
  font-weight:900;
  font-size:clamp(1.4rem,1.1rem+1.2vw,2.2rem);
  background:linear-gradient(135deg,#0e004e,#0400ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px
}
.hero h1 span{
  display:block;
  font-size:1rem;
  font-weight:900;
  color:linear-gradient(135deg,#0e004e,#0400ff);
  margin-top:5px
}
.hero p{
  color:#000;
  margin-top:10px;
  font-size:0.9rem;
  max-width:700px;
  margin-left:auto;
  margin-right:auto
}
.hero-highlights{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px
}
.hero-highlights li{
  display:block;
  width:100%;
  background:linear-gradient(135deg,#0e004e,#0400ff);
  padding:14px 18px;
  border-radius:14px;
  border-left:6px solid rgba(0, 0, 0, 0.06);
  font-weight:800;
  color:#ffffff;
  font-size:1rem;
  text-align:center;
  animation:float 6s ease-in-out infinite
}
.hero-highlights li:nth-child(2){
  animation-delay:2s}.hero-highlights li:nth-child(3){animation-delay:4s}

/* Formulário: cards sequenciais (cada seção corresponde a bloco no HTML) */
.form-container{
  display:flex;
  flex-direction:column;
  gap:20px;
  background:transparent;
  flex:1
}
.form-section{
  background:linear-gradient(180deg,rgba(0, 0, 0, 0.05),rgba(0,0,0,0.02));
  border:1px solid #cccccc;
  border-radius:16px;
  padding:16px 16px 18px;
  box-shadow:var(--shadow-strong);
  transition:transform .3s ease,box-shadow .3s ease
}
.form-section:hover{
  transform:translateY(-2px);
  box-shadow:0 25px 60px rgba(0, 0, 0, 0.1)
}
.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:7px /* <-- espaçamento extra */
}
.label-title{
  display:inline-flex;
  align-items:center;
  gap:8px;padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:0.9rem;
  background:linear-gradient(90deg,#ffe881,#ffae00);
  color:#0e004e;
  border:1px solid rgba(0,0,0,0.15)
}
.label-question{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:0.85rem;
  background:#0e004e;
  color:#ffffff;
  border:1px solid rgba(0,0,0,0.06)
}

/* Modelos (vídeo e seleção) */
.modelo-section{
  padding:0!important
}
.modelo-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;margin-bottom:12px
}
.modelo-card-mobile{
  display:grid;
  width:max-content;
  margin:0 auto;
  grid-template-columns:auto auto;
  justify-content:center;
  align-items:center;
  column-gap:16px;
  row-gap:12px
}
.modelo-image-small{
  width:200px
}
.modelo-buttons{
  display:grid;
  align-content:flex-start;
  grid-template-columns:1fr
}
@media (max-width:599px){
.modelo-card-mobile{
  grid-template-columns:auto auto;
  justify-content:space-between;
  align-items:center
}
.modelo-image-small{
  width:160px
}
.modelo-video-small{
  max-width:160px
}
.modelo-buttons{
  max-width:160px
}}
.modelo-label{
  display:block;
  cursor:pointer;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #cccccc;
  transition:all .25s ease;
  background:rgba(0,0,0,0.05)
}
.modelo-input{
  display:none
}
input[name="modelo"]:checked + video,.modelo-input:checked + .modelo-label{
  outline:3px solid #ff0000;
  box-shadow:0 0 0 10px rgb(209, 0, 0),0 30px 40px rgb(255, 213, 0)
}
.modelo-video-small{
  width:100%;
  max-width:190px;
  display:block;
  object-fit:cover;
  background:#ffffff;
  aspect-ratio:9/16;
  border-radius:10px
}

/* Duração (badges) */
.duration-option-inline{
  position:relative
}
.duration-input{
  display:none
}
.duration-badge-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:44px;
  padding:8px;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.3px;
  font-size:.84rem;
  background:#0e004e;
  border:1px solid #cccccc;
  color:#ffffff;
  box-shadow:var(--shadow-soft);
  transition:transform .12s ease,filter .2s ease,box-shadow .2s ease,border-color .2s ease
}
.duration-badge-inline:hover{
  filter:brightness(1.05)
}
.duration-input:checked + .duration-badge-inline{
  background:linear-gradient(135deg,#ffae00,#ffe881);
  color:#050035;
  border-color:rgba(110, 110, 110, 0);
  box-shadow:0 12px 28px rgba(0, 0, 0, 0.3)
}

/* Informações do modelo */
.modelo-info{
  background:#ffffff;
  padding:12px 14px;
  border-radius:12px;
  font-size:0.8rem;
  line-height:1.5;
  color:#000000;
  border-left:4px solid #ffae00;
  margin-top:8px
}
.modelo-info strong{
  color:#2106bb;
  font-weight:800;
  margin-right:4px
}

/* Grade de cores */
.color-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}
@media(min-width:520px){.color-grid{grid-template-columns:repeat(6,1fr)}}
@media(min-width:820px){.color-grid{grid-template-columns:repeat(8,1fr)}}
.color-option{
  width:100%;
  aspect-ratio:1;
  border-radius:12px;
  cursor:pointer;
  border:2px solid rgba(0,0,0,0.15);
  transition:transform .15s ease,box-shadow .15s ease,border-color .2s ease;
  position:relative;
  box-shadow:var(--shadow-soft)
}
.color-option:hover{
  transform:translateY(-2px)
}
.color-option:active{
  transform:scale(.97)
}
.color-option.selected{
  border-color:#ff0000;
  box-shadow:0 12px 26px rgba(0, 0, 0, 0.164)
}
.color-option.selected::after{
  content:'👍';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
  text-shadow:0 0 6px rgba(0, 0, 0, 0.45)
}
.cores-display{
  padding:7px;
  background:#fff;
  border:1px solid #cccccc;
  border-radius:12px;
  font-weight:800;
  color:#ff0000;
  font-size:.70rem;
  text-align:center;
  margin-top:14px; /* 👈 controla o espaço */
}

/* Inputs */
.form-input,.form-textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #cccccc;
  border-radius:12px;
  font-size:0.8rem;
  font-family:inherit;
  transition:border-color .2s ease,box-shadow .2s ease;
  background:#fff;
  color:#000
}
.form-input:focus,.form-textarea:focus{
  outline:none;
  border-color:rgb(255, 0, 0);
  box-shadow:0 0 0 3px rgba(61,90,254,0.18)
}
.form-textarea{
  min-height:130px;
  resize:vertical
}

/* VT Type */
.vt-type-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.vt-type-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid #cccccc;
  background:#fff;
  transition:all .2s ease
}
.vt-type-option:hover{
  filter:brightness(.98)
}
.vt-type-input{
  width:20px;
  height:20px;
  cursor:pointer;
  margin-bottom:6px;
  accent-color:#ff0000
}
.vt-type-input:checked ~ .vt-type-badge{
  color:#0c0074;
  background:linear-gradient(135deg,#ffae00,#ffe881);
  border-color:rgba(0,0,0,0.22)
}
.vt-type-badge{
  font-weight:900;
  background:#100049;
  color:#ffffff;
  padding:6px 12px;
  border-radius:999px;
  font-size:.70rem;
  border:1px solid rgba(0,0,0,0.06)
}
.vt-type-text{
  font-size:.7rem;
  color:#000;
  margin-top:6px;
  text-align:center
}

/* Locutores */
.locutor-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}
@media(min-width:640px){
.locutor-grid{
  grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1024px)
{
.locutor-grid{
  grid-template-columns:repeat(4,1fr)}
}
.locutor-option{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px;
  border-radius:14px;
  border:1px solid #cccccc;
  background:#fff;
  cursor:pointer;
  transition:all .2s ease;
  text-align:center
}
.locutor-option:hover{
  border-color:rgb(255, 0, 0)
}
.locutor-input{
  width:18px;
  height:18px;
  cursor:pointer;
  margin-bottom:6px;
  accent-color:#ff0000
}
.locutor-input:checked ~ .locutor-name{
  color:#ff0000;
  font-weight:900
}
.locutor-name{
  font-weight:800;
  margin-bottom:8px;
  font-size:.70rem;
  line-height:1.2;
  color:#0c0074
}
.locutor-actions{
  display:flex;
  gap:8px
}
.play-btn,.stop-btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:12px;
  background:#0c0074;
  color:#ffffff;
  cursor:pointer;
  font-size:.9rem;
  transition:transform .15s ease,filter .2s ease;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.1)
}
.play-btn:hover,.stop-btn:hover{
  filter:brightness(1.06)
}
.play-btn:active,.stop-btn:active{
  transform:translateY(1px) scale(.98)
}

.submit-btn{
  display:block;
  width:90%;
  max-width:500px;
  margin:10px auto 0 auto;
  padding:16px;
  background:#007c34;
  color:#ffffff;
  border:none;
  border-radius:14px;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  transition:transform .1s ease,filter .2s ease,box-shadow .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}
.submit-btn:hover{
  filter:brightness(1.06)
}
.submit-btn:active{
  transform:translateY(1px) scale(.99)
}

/* Footer */
.footer{
  background:#ffffff;
  color:#ff0000;
  text-align:center;
  padding:16px 16px;
  font-size:.7rem;
  line-height:1;
  border:1px solid #cccccc;
  border-radius:14px;
  box-shadow:var(--shadow-strong);
  margin-top:16px
}

/* Mobile safe areas */
@supports(padding:max(0px)){.mobile-container{
  padding-top:max(0px,env(safe-area-inset-top));
  padding-bottom:max(0px,env(safe-area-inset-bottom));
  padding-left:max(0px,env(safe-area-inset-left));
  padding-right:max(0px,env(safe-area-inset-right))}
}

/* Acessibilidade / utilitários */
input[type="text"],input[type="email"],textarea{
  font-size:16px
}
button{
  min-height:44px
}
label{
  min-height:36px;
  display:flex;
  align-items:center
}
.fake-button{
  display:block;
  width:90%;
  max-width:500px;
  margin:20px auto 40px auto;
  padding:14px 18px;
  background:linear-gradient(135deg,#ffae00,#ffe881);
  color:#0e004e;
  font-weight:900;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.15);
  font-size:.9rem;
  text-align:center;
  line-height:1.3; /* 👈 controla o espaço entre linhas */
}
video{
  color-scheme:dark
}