/* ============================================
   VICTOR FLORES 70007 — folha de estilo final
   Cores e fontes oficiais do manual
   ============================================ */

/* ===== FONTES LOCAIS ===== */
@font-face {
  font-family: 'OfertaDoDia';
  src: url('../srt/ofertadodiavictorflores.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/REM-bolditalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'rem';
  src: url('../srt/rem-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root{
  --laranja:#FE6A00;
  --laranja-escuro:#e65f00;
  --roxo:#6F0072;
  --roxo-escuro:#5a005c;
  --verde:#3EBA82;
  --amarelo:#f5c518;
  --fonte-display:"OfertaDoDia","Anton","Arial Narrow",sans-serif;
  --fonte-corpo:"REM",system-ui,sans-serif;
}

body{
  font-family:var(--fonte-corpo);
  background-color:var(--laranja);
  color:#000;
  overflow-x:hidden;
}

/* ===== utilitarios de cor ===== */
.bg-laranja{background-color:var(--laranja)!important}
.bg-roxo{background-color:var(--roxo)!important}
.bg-verde{background-color:var(--verde)!important}
.bg-amarelo{background-color:var(--amarelo)!important}
.text-laranja{color:var(--laranja)!important}
.text-roxo{color:var(--roxo)!important}
.text-verde{color:var(--verde)!important}

/* ===== tipografia ===== */
.titulo-display{
  font-family:var(--fonte-display);
  text-transform:uppercase;
  font-style:italic;
  letter-spacing:.01em;
  line-height:.95;
}

.texto-pequeno{font-size:.875rem;line-height:1.6}

/* ===== linha pontilhada branca ===== */
.linha-pontilhada{
  border:0;
  border-top:3px dotted #fff;
  opacity:.9;
  margin:0;
}

/* ===== botoes da marca — SEM BORDA ===== */
.btn-marca{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--fonte-display);
  font-style:italic;
  text-transform:uppercase;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:.7rem 1.6rem;
  border-radius:999px;
  border:none;
  text-decoration:none;
  transition:transform .15s ease,filter .15s ease;
}
.btn-marca:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-marca.bg-roxo{color:#fff}
.btn-marca.bg-verde{color:var(--roxo)}
.btn-marca.bg-white{color:var(--roxo)}
.btn-marca.bg-white .estrela-btn{color:var(--roxo);fill:var(--roxo)}
.btn-marca.bg-laranja{color:#fff}

/* ===== marca / header ===== */
.marca-linha1{
  display:block;
  font-size:.5rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--roxo);
}
.marca-linha2{
  display:block;
  font-family:var(--fonte-display);
  font-style:italic;
  text-transform:uppercase;
  font-size:1.75rem;
  line-height:.95;
  color:var(--roxo);
}
@media (min-width:576px){.marca-linha2{font-size:2rem}}
.cabecalho{position:sticky;top:0;z-index:1030}

/* ===== MENU BRANCO ===== */
.menu-link{
  font-family:var(--fonte-display);
  text-transform:uppercase;
  font-size:1.05rem;
  color:#fff;
  text-decoration:none;
  transition:opacity .15s ease;
}
.menu-link:hover{opacity:.8}

/* ===== estrela / grafismos ===== */
.estrela{display:inline-block;fill:currentColor}
.divisoria-estrela{display:flex;align-items:center;gap:.5rem}
.divisoria-estrela .traco{height:2px;flex:1;background:currentColor;opacity:.6}

/* ===== icones com starburst ===== */
.icone-starburst{position:relative;width:96px;height:96px;margin:0 auto}
.icone-starburst svg.raio{position:absolute;inset:0;width:100%;height:100%;fill:#fff}
.icone-starburst .glifo{position:absolute;inset:0;color:var(--roxo);
  display:grid;place-items:center}

/* ===== HERO — FOTO COLADA NO CANTO DIREITO ===== */
.hero-texto{
  position:relative;
  z-index:2;
}
.hero-titulo-img{
  max-width:95%;
  height:auto;
  display:block;
}
@media (min-width:992px){
  .hero-titulo-img{max-width:100%}
}

/* Nome Victor Flores — BRANCO e GRANDE */
.nome-hero{
  font-family:var(--fonte-display);
  text-transform:uppercase;
  font-style:italic;
  font-size:clamp(2.2rem, 4vw, 3.6rem);
  color:#fff;
  line-height:.95;
  letter-spacing:.01em;
}
.nome-hero span{
  font-family:var(--fonte-corpo);
  text-transform:none;
  font-style:normal;
  font-size:1rem;
  color:var(--roxo);
  vertical-align:middle;
}

/* Foto do hero — COLADA NA DIREITA, SEM ESPAÇO */
.hero-foto-wrap{
  position:relative;
  min-height:50vh;
  padding-right:0 !important;
  margin-right:0 !important;
}
.hero-foto-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
@media (min-width:992px){
  .hero-foto-wrap{
    min-height:100vh;
  }
}
@media (max-width:991px){
  .hero-foto-wrap{
    min-height:45vh;
  }
}

/* ===== BLOCO PROPÓSITO (ROXO) ===== */
.bloco-proposito{
  background-color:var(--roxo);
  position:relative;
  overflow:hidden;
  padding:0;
}

/* Cacto no canto INFERIOR DIREITO */
.bloco-proposito .grafismo-cacto{
  position:absolute;
  right:-2%;
  bottom:-6%;
  width:280px;
  height:460px;
  background:url('../img/elementos/3bloco2/grafismo.png') no-repeat center/contain;
  opacity:.95;
  pointer-events:none;
  z-index:1;
}
@media (min-width:992px){
  .bloco-proposito .grafismo-cacto{
    right:0%;
    bottom:-8%;
    width:340px;
    height:560px;
  }
}

/* Foto do propósito — COLADA NO CANTO ESQUERDO, ALTURA NATURAL */
.proposito-foto{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding-left:0;
  margin-left:0;
  padding-bottom:0;
}
.proposito-foto-img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  margin-left:0;
  margin-right:auto;
  object-fit:contain;
  object-position:bottom left;
}
@media (max-width:991px){
  .proposito-foto{
    justify-content:center;
  }
  .proposito-foto-img{
    max-height:55vh;
  }
}

/* Texto do propósito — PUXADO PARA O CENTRO */
.proposito-texto{
  position:relative;
  z-index:2;
  padding:1rem 2rem 2rem 0.5rem;
}
@media (min-width:992px){
  .proposito-texto{
    padding:3rem 4rem 3rem 3rem;
  }
}
@media (max-width:991px){
  .proposito-texto{
    padding:2rem 1.5rem;
    text-align:center;
  }
}

/* ===== BLOCO 3 — CARDS MANDATO (ÍCONES ALINHADOS) ===== */
.card-mandato{
  text-align:center;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.card-mandato .icone-mandato{
  width:140px;
  height:140px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.card-mandato .titulo-mandato{
  font-family:var(--fonte-display);
  font-style:italic;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(1rem, 2vw, 1.25rem);
  line-height:1.1;
  margin-top:1rem;
  margin-bottom:.5rem;
  letter-spacing:.01em;
}
.card-mandato .texto-mandato{
  color:var(--roxo);
  font-size:.82rem;
  line-height:1.5;
  margin:0;
  padding:0 .25rem;
}

/* ===== BLOCO 5 — AMBIENTE (ROXO) COM GRAFISMOS ===== */
.bloco-ambiente{
  background-color:var(--roxo);
  position:relative;
  overflow:hidden;
}

/* CACTO CENTRAL — entre as colunas, no fundo, transparente */
.grafismo-cacto5{
  position:absolute;
  left:50%;
  bottom:-2%;
  transform:translateX(-50%);
  width:240px;
  height:auto;
  opacity:.35;
  pointer-events:none;
  z-index:1;
}
@media (min-width:992px){
  .grafismo-cacto5{
    width:280px;
    bottom:-4%;
    opacity:.30;
  }
}

/* Flor — canto superior direito */
.grafismo-flor5{
  position:absolute;
  right:-2%;
  top:-4%;
  width:200px;
  height:auto;
  opacity:.95;
  pointer-events:none;
  z-index:1;
}
@media (min-width:992px){
  .grafismo-flor5{
    right:0%;
    top:-6%;
    width:260px;
  }
}

/* Títulos do bloco 5 em PNG */
.titulo-bloco{
  max-width:100%;
  height:auto;
}
@media (min-width:992px){
  .titulo-bloco{
    max-width:90%;
  }
}

.titulo-bloco-direita{
  max-width:100%;
  height:auto;
}
@media (min-width:992px){
  .titulo-bloco-direita{
    max-width:95%;
  }
}

/* Texto do bloco ambiente */
.texto-ambiente p{
  margin-bottom:.75rem;
}
.texto-ambiente p:last-child{
  margin-bottom:0;
}

/* Lista do bloco ambiente */
.lista-ambiente{
  margin-bottom:.75rem;
}

/* ===== galeria ===== */
.galeria{background:#000;overflow:hidden}
.galeria-faixa{display:flex;width:max-content;animation:desliza 30s linear infinite}
.galeria-faixa img{height:260px;width:auto;object-fit:cover;display:block}
@media (min-width:768px){.galeria-faixa img{height:320px}}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.galeria-faixa{animation:none}}

/* ===== BLOCO 4 — HOMENAGENS COM ÍCONES REAIS ===== */
.homenagem-card{
  text-align:center;
  padding:1rem .5rem;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.homenagem-card img{
  width:100%;
  max-width:110px;
  height:auto;
  margin-bottom:1rem;
  display:block;
}
.homenagem-card h3{
  font-family:var(--fonte-display);
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(.85rem, 1.5vw, 1.05rem);
  line-height:1.2;
  margin:0;
}
@media (min-width:992px){
  .homenagem-card + .homenagem-card{
    border-left:1px solid rgba(255,255,255,.25);
  }
}

/* ===== formulario ===== */
.campo-marca{
  width:100%;
  border:2px solid rgba(111,0,114,.3);
  border-radius:.75rem;
  padding:.75rem 1rem;
  font-size:.875rem;
  color:var(--roxo);
  outline:none;
  transition:border-color .15s ease;
}
.campo-marca:focus{border-color:var(--laranja)}
.aviso{border:2px solid #000;border-radius:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:700}
.aviso-ok{background:var(--verde);color:var(--roxo)}
.aviso-erro{background:var(--laranja);color:#fff}

/* ===== RESPONSIVO BLOCO 5 ===== */
@media (max-width:991px){
  .grafismo-cacto5{
    width:180px;
    opacity:.25;
    bottom:-1%;
  }
  .grafismo-flor5{
    width:140px;
    top:-2%;
  }
}


/* ----- Botões do Hero com estrela ----- */
.hero-botoes .btn-marca{
  gap:.6rem;
  padding:.7rem 1.4rem;
}
.hero-botoes .btn-marca .estrela-btn{
  flex-shrink:0;
  width:14px;
  height:14px;
}

/* ===== RODAPÉ ===== */
footer .marca-linha2{
  color:var(--laranja);
}
footer a:hover{
  opacity:.8;
}

/* ============================================
   CORREÇÕES FINAIS — BLOCO 6 + RODAPÉ
   ============================================ */


/* ============================================
   BLOCO 6 + RODAPÉ — VERSÃO FINAL (igual ao modelo)
   ============================================ */

/* ----- Foto do chapéu: COLADA no canto inferior direito da seção ----- */
#propostas{
  position:relative;
  overflow:hidden;
}
/* a coluna deixa de ser referência de posicionamento: a foto se ancora na SEÇÃO */
#propostas > .container-xxl > .row > .col-lg-6.position-relative{
  position:static !important;
}
.foto-chapeu-wrap{
  position:absolute;
  right:0;
  bottom:0;
  z-index:1;
  pointer-events:none;
  line-height:0;
  margin:0;
  padding:0;
}
.foto-chapeu{
  width:auto;
  height:auto;
  max-width:360px;
  display:block;
  margin:0;
  object-fit:contain;
  opacity:1;
}
@media (min-width:1200px){
  .foto-chapeu{max-width:430px}
}
@media (max-width:991px){
  /* no celular a foto fica centralizada e colada na base da seção */
  #propostas{padding-bottom:0 !important}
  .foto-chapeu-wrap{
    position:static;
    text-align:center;
    margin-top:2rem;
    line-height:0;
  }
  .foto-chapeu{
    max-width:min(320px,80%);
    margin:0 auto;
    display:block;
  }
}

/* ----- Texto e botões do bloco 6 — sempre acima da foto ----- */
.bloco6-texto{position:relative;z-index:2}
.botoes-bloco6 .btn-marca{
  width:100%;
  max-width:22rem;
  justify-content:space-between;
  padding:.75rem 1.6rem;
  font-size:1.05rem;
  font-style:normal;
}
.botoes-bloco6 .btn-marca.bg-white{color:var(--laranja)}

/* ----- Lista de propostas (coluna esquerda) ----- */
.lista-propostas li{color:#fff}
.lista-propostas .estrela{fill:#fff;color:#fff}

/* ----- Estrela nos botões ----- */
.estrela-btn{flex-shrink:0;margin-left:.5rem}


/* ----- Botões do Hero com estrela ----- */
.hero-botoes .btn-marca{
  gap:.6rem;
  padding:.7rem 1.4rem;
}
.hero-botoes .btn-marca .estrela-btn{
  flex-shrink:0;
  width:14px;
  height:14px;
}

/* ===== RODAPÉ ===== */
footer.rodape{background-color:var(--roxo)}
.rodape-frase{
  font-family:var(--fonte-display);
  font-style:italic;
  text-transform:uppercase;
  color:#fff;
  font-size:1.5rem;
  line-height:1.05;
  margin:0;
}
.rodape-marca-linha1{
  display:block;
  font-family:var(--fonte-corpo);
  font-weight:700;
  text-transform:uppercase;
  font-size:.5rem;
  letter-spacing:.2em;
  color:var(--laranja);
}
.rodape-marca-linha2{
  display:block;
  font-family:var(--fonte-display);
  font-style:italic;
  text-transform:uppercase;
  font-size:1.9rem;
  line-height:1;
  color:var(--laranja);
}
.rodape-marca-linha2 .numero{color:#fff}
.rodape-marca-linha2 .estrela-marca{color:var(--verde)}
.lista-rodape{
  list-style:none;
  padding:0;
  margin:.25rem 0 0;
  display:flex;
  flex-wrap:nowrap;
  gap:.35rem;
  font-family:var(--fonte-corpo);
  font-weight:500;
  font-size:.8rem;
  color:#fff;
}
.lista-rodape li{display:inline;color:#fff}
.lista-rodape li:not(:last-child)::after{
  content:'\2726';
  color:var(--laranja);
  margin-left:.35rem;
}
.rodape-sociais a{color:#fff;text-decoration:none}
footer a:hover{opacity:.8}
@media (max-width:767px){
  .rodape-frase{font-size:1.15rem;text-align:center}
  .lista-rodape{justify-content:center}
}


/* ===== GRAFISMO PASSARINHO — BLOCO 4 (RECONHECIMENTO) ===== */
.grafismo-passo{
  position:absolute;
  left:-2%;
  top:-6%;
  width:220px;
  height:auto;
  opacity:.95;
  pointer-events:none;
  z-index:1;
}
@media (min-width:992px){
  .grafismo-passo{
    left:0%;
    top:-10%;
    width:280px;
  }
}
@media (max-width:991px){
  .grafismo-passo{
    left:-5%;
    top:-4%;
    width:160px;
    opacity:.85;
  }
}
@media (max-width:576px){
  .grafismo-passo{
    width:120px;
    top:-2%;
    opacity:.75;
  }
}


/* ===== TEXTO DO BLOCO 4 — ALINHADO COM OS ÍCONES ===== */
.texto-reconhecimento{
  padding-top: 5rem;
}
@media (max-width:991px){
  .texto-reconhecimento{
    padding-top:1rem;
    text-align:center;
  }
}