/* ==========================================================================
   Paginas com formulario: Ouvidoria, Seja um fornecedor Y'ALL, Trabalhe conosco
   (template comum: _inc/partials/form-page.php) + aparencia do formulario ".form--yall",
   reaproveitada tambem pela pagina Contato (contato.css e carregado depois deste arquivo).
   Valores copiados do CSS gerado pelo Elementor (post-1760/1917/1943.css e post-1573.css).
   ========================================================================== */

/* Fonte dos campos do formulario no original (Plus Jakarta Sans 500), hospedada localmente */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* velocidade "rapida" das animacoes do Elementor (animated-fast = 0,75s); a "lenta" ja existe no site.css */
[data-anim][data-anim-speed="fast"].is-in { animation-duration: .75s; }

/* ---------- formulario no estilo do original (campos pretos com contorno branco) ---------- */
.form--yall { gap: 10px; --fs-field: 30px; --rows: 6; }
.form--yall.form--rows-4 { --rows: 4; }            /* Contato: textarea com 4 linhas */
.form--yall input,
.form--yall textarea {
  display: block; width: 100%; min-height: 40px; margin: 0;
  padding: 5px 14px; border: 2px solid var(--c-white); border-radius: 14px;
  background: var(--c-black); color: var(--c-white);
  font-family: "Plus Jakarta Sans", var(--font); font-size: var(--fs-field); font-weight: 500; line-height: 1.2;
}
.form--yall input { height: 54px; }
.form--yall textarea { height: calc(var(--rows) * 1.2em + 14px); min-height: 0; resize: vertical; }
.form--yall input::placeholder,
.form--yall textarea::placeholder { color: var(--c-white); opacity: 1; font-family: inherit; }
.form--yall input:focus,
.form--yall textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 2px; border-color: var(--c-white); }
.form--yall [aria-invalid="true"] { border-color: #ff4d4d; }

/* botao "Enviar": contorno branco, seta a direita, efeito "shrink" no hover (igual ao original) */
.form--yall .form__actions { display: flex; flex: 0 0 auto; }
.form--yall .form__submit {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-height: 40px; padding: 5px 120px 5px 80px;
  border: 1px solid var(--c-white); border-radius: 14px;
  background: var(--c-black); color: var(--c-white);
  font-family: var(--font); font-size: var(--fs-btn); font-weight: 700; line-height: 1; text-transform: uppercase;
  transition: transform .3s, background-color .3s;
}
.form--yall .form__submit::after {
  content: ""; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 60%;
  background: url("../uploads/2024/06/Vector-3.svg") no-repeat center / contain;
  filter: brightness(0) invert(1);
}
.form--yall .form__submit:hover,
.form--yall .form__submit:focus-visible { background: var(--c-black); transform: scale(.9); }

/* aviso LGPD e mensagens de retorno (sobre fundo preto) */
.form--yall .form__privacy { flex: 1 1 240px; align-self: center; margin: 0; color: rgba(255, 255, 255, .6); font-size: 12px; }  /* ao lado do botao: nao altera a altura do bloco */
.form--yall .form__privacy a { color: var(--c-white); text-decoration: underline; }
.form--yall .form__privacy a:hover { color: var(--c-accent); }
.form--yall .form__status:empty { display: none; }
.form--yall .form__status p { font-size: 15px; }
.form--yall .form__status .is-ok { background: transparent; color: #03B400; padding: 0; }
.form--yall .form__status .is-err { background: transparent; color: #FF0000; padding: 0; }

@media (max-width: 1366px) { .form--yall { --fs-field: 28px; } }
@media (max-width: 1200px) { .form--yall { --fs-field: 24px; } }
@media (max-width: 880px)  { .form--yall { --fs-field: 18px; } }
@media (max-width: 767px)  { .form--yall { --fs-field: 16px; } }

/* ==========================================================================
   Template: titulo + texto + espiral + bloco preto com formulario
   ========================================================================== */

/* ---------- topo ---------- */
.fpage-hero { position: relative; z-index: 1; padding: 64px 10px 0; }
.fpage-hero__inner { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.fpage-hero__text { width: 72%; padding: 10px; display: flex; flex-direction: column; gap: 20px; }
.fpage-hero__aside { width: 42%; padding: 10px; }  /* coluna "vazia": a espiral e posicionada em relacao a secao */
.fpage-hero__title { font-size: 90px; font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--c-black); }
.fpage-hero__lead { width: 88%; margin: 0; font-size: var(--fs-text); line-height: 1.2; color: var(--c-text); }
.fpage-hero__spiral { position: absolute; right: 0; top: 32%; transform: translateY(-50%); width: 396px; max-width: none; }

/* Trabalhe conosco: titulo e texto maiores */
.fpage--big .fpage-hero__title { font-size: 128px; }
.fpage--big .fpage-hero__lead { font-size: 41px; }

/* ---------- bloco do formulario ---------- */
.fpage-form {
  /* 16% da largura util (no Elementor o padding incide sobre a area interna, 20px mais estreita) */
  margin-top: -56px; padding: calc(16% - 3.2px) 10px 64px; border-radius: 0 0 40px 40px;
  background: var(--c-white) url("../uploads/2024/06/b-ouvidoria.jpg") top center / auto no-repeat;
}
.fpage-form__inner { max-width: var(--container); margin-inline: auto; }

/* ---------- responsivo ---------- */
@media (max-width: 1366px) {
  .fpage-form { background-size: cover; }
  .fpage--big .fpage-hero__title { font-size: 110px; }
  .fpage--big .fpage-hero__lead { font-size: 28px; }
}
@media (max-width: 1200px) {
  .fpage-hero { padding: 48px 0; }
  .fpage-hero__title, .fpage--big .fpage-hero__title { font-size: 60px; }
  .fpage--big .fpage-hero__lead { font-size: 24px; }
  .fpage-hero__spiral { max-width: 76%; }
  .fpage-form { padding: 180px 10px 48px; }
}
@media (max-width: 1024px) {
  .fpage-hero__inner { flex-direction: column; }
  .fpage-hero__text { width: 100%; }
  .fpage-hero__aside { display: none; }          /* espiral oculta em tablet/celular, como no original */
  .fpage-form { margin-top: 0; }
}
@media (max-width: 880px) {
  .fpage-hero { padding: 32px 0 0; }
  .fpage-hero__title, .fpage--big .fpage-hero__title { font-size: 48px; }
  .fpage--big .fpage-hero__lead { font-size: 18px; }
  .fpage-form { padding: 150px 10px 32px; }
}
@media (max-width: 767px) {
  .fpage-hero__inner { gap: 0; }
  .fpage-hero__title, .fpage--big .fpage-hero__title { font-size: 23px; }
  .fpage--big .fpage-hero__lead { font-size: 16px; }
  .fpage-form { padding: 90px 10px 32px; background-image: url("../uploads/2024/06/mob-blackok2.jpg"); }
}