/* ============================================================
   NOSSOCAFE YARA — CORRECOES DE RESPONSIVIDADE MOBILE

   Todas as regras ficam dentro de @media (max-width: 1023px)
   ou @media (max-width: 767px), EXCETO o menu mobile que e
   position:fixed (invisivel no desktop por padrao).

   Desktop >= 1024px: 100% intacto — nenhuma regra aqui o afeta.
   ============================================================ */


/* ============================================================
   MENU HAMBURGER MOBILE
   Estilos globais (fora do media query): o painel e sempre
   position:fixed / visibility:hidden, entao nao impacta desktop.
   ============================================================ */

/* Hamburguer: dimensoes explicitas (classes Tailwind nao geradas no build atual) */
#nca-hamburger {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
#nca-hamburger .nca-ham-line {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nca-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}

.nca-mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nca-mobile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nca-mobile-menu.is-open .nca-mobile-overlay {
  opacity: 1;
}

.nca-mobile-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: #10261E;
  display: flex;
  flex-direction: column;
  padding: 56px 24px 32px;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.nca-mobile-menu.is-open .nca-mobile-panel {
  transform: translateX(0);
}

.nca-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.nca-menu-close:hover { opacity: 1; }

/* Logos dentro do painel mobile: tamanhos explícitos */
.nca-menu-logo svg {
  width: 130px !important;
  height: auto !important;
}
/* Div do logo Yara: empurra para o fundo (mt-auto nao gerado no build) */
.nca-mobile-panel > div:last-child {
  margin-top: auto;
  padding-top: 32px;
}
.nca-mobile-panel > div:last-child svg {
  width: 44px !important;
  height: 44px !important;
}

.nca-menu-link {
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  transition: color 0.2s;
}
.nca-menu-link:hover,
.nca-menu-link--active {
  color: #e3a566;
}


@media (max-width: 1023px) {

  /* ===========================================================
     NAV — todas as paginas
     =========================================================== */

  /* Oculta links de navegacao e logo Yara a direita */
  .nav > div > nav               { display: none; }
  .nav > div > div[style*="width:79px"] { display: none; }

  /* Padding lateral e altura automatica */
  .nav { height: auto; min-height: 64px; }
  .nav > div {
    padding-left: 20px;
    padding-right: 20px;
  }


  /* ===========================================================
     HERO — pagina Sobre o Programa
     =========================================================== */

  /* Remove altura fixa 777px e garante padding lateral */
  .hero .max-w-1217 {
    height: auto !important;
    min-height: 0 !important;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 48px;
  }

  /* Remove whitespace-nowrap do titulo */
  .hero h1 { white-space: normal !important; }

  /* Exibe imagem do grao no mobile: direita, alinhada ao bottom do container */
  .hero .max-w-1217 > div.hidden {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 45% !important;
    height: auto !important;
    pointer-events: none;
  }
  .hero .max-w-1217 > div.hidden img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
  }


  /* ===========================================================
     SOBRE O PROGRAMA
     =========================================================== */

  .sobre-programa > div {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* iframe YouTube: altura minima definida */
  .sobre-programa iframe { height: 220px; }


  /* ===========================================================
     CAFE ARABICA
     =========================================================== */

  .cafe-arabica > div {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Titulo: 71.875px -> 36px */
  .cafe-arabica h2 { font-size: 36px !important; line-height: 1.2; }

  /* Estatisticas */
  .cafe-arabica .text-stat-num      { font-size: 52px !important; }
  .cafe-arabica .text-stat-unit     { font-size: 28px !important; }
  .cafe-arabica .text-stat-asterisk { font-size: 20px !important; }


  /* ===========================================================
     CAFE CONILON
     =========================================================== */

  .cafe-conilon > div {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .cafe-conilon h2 { font-size: 36px !important; line-height: 1.2; }

  .cafe-conilon .text-stat-num      { font-size: 52px !important; }
  .cafe-conilon .text-stat-unit     { font-size: 28px !important; }
  .cafe-conilon .text-stat-asterisk { font-size: 20px !important; }


  /* ===========================================================
     YARA CLIMATE CHOICE
     =========================================================== */

  .climate-choice > div {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* iframe YouTube: altura minima definida */
  .climate-choice iframe { height: 220px; width: 100%; }

  /* Badge de carbono: altura automatica */
  .climate-choice .border-y {
    height: auto;
    padding-top: 24px;
    padding-bottom: 24px;
  }


  /* ===========================================================
     FORMULARIO DE INSCRICAO
     =========================================================== */

  .form-cadastro > div {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Imagem mobile: mostra completa sem cortar */
  .form-cadastro .h-64.overflow-hidden {
    height: auto !important;
    overflow: visible !important;
  }
  .form-cadastro .h-64.overflow-hidden img {
    height: auto !important;
    object-fit: contain !important;
  }


  /* ===========================================================
     FOOTER — todas as paginas
     =========================================================== */

  .footer .max-w-1217 {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Barra de copyright */
  .footer .bg-coffee-dark > div {
    padding-left: 20px;
    padding-right: 20px;
    height: auto;
    padding-top: 16px;
    padding-bottom: 16px;
  }


  /* ===========================================================
     PAGINA CONCURSO (.nca-page-concurso)
     =========================================================== */

  /* --- Hero ------------------------------------------------- */

  /* Padding lateral e remove min-height fixa do container do hero */
  .nca-page-concurso section:first-of-type .max-w-1217 {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0 !important;
  }

  /* Container flex column para reordenar logotipo → imagem → CTA */
  .nca-page-concurso section:first-of-type > div.relative {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Logo/eyebrow: primeira posicao, padding reduzido */
  .nca-page-concurso section:first-of-type .pt-\[140px\] {
    padding-top: 40px !important;
    order: 1;
  }

  /* Imagem do hero (Frame-482310): aparece apos o logotipo */
  .nca-page-concurso section:first-of-type > div.relative > div[style*="width: 624px"] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    order: 2;
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .nca-page-concurso section:first-of-type > div.relative > div[style*="width: 624px"] img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* CTA "Inscreva-se": ultima posicao, com espaco antes dos grafismos */
  .nca-page-concurso section:first-of-type .mt-8 {
    order: 3;
    padding-bottom: 32px;
  }

  /* Logo: width:490px -> responsivo */
  .nca-page-concurso img[style*="width:490px"] {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
  }

  /* Titulo: font-size:91.399px -> responsivo */
  .nca-page-concurso h1[style*="font-size:91"] {
    font-size: clamp(32px, 9vw, 60px) !important;
    line-height: 1.15 !important;
  }

  /* CTA button: min-width:487px -> full width */
  .nca-page-concurso a[style*="min-width:487px"] {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    height: auto !important;
    padding: 16px 24px !important;
    box-sizing: border-box;
  }

  /* --- About ------------------------------------------------ */

  .nca-page-concurso .max-w-\[1202px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Logo BSCA: width inline -> responsivo */
  .nca-page-concurso img[style*="width:282.612px"] {
    width: 100% !important;
    max-width: 200px;
    height: auto !important;
  }

  /* --- Premios ---------------------------------------------- */

  /* Padding lateral no container de premios */
  .nca-page-concurso .max-w-\[1440px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Imagem: 668x650 fixo -> responsiva */
  .nca-page-concurso img[style*="width:668px"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Reduz pb-[123px] excessivo no bloco de texto dos premios */
  .nca-page-concurso .pb-\[123px\] {
    padding-bottom: 40px !important;
  }

  /* --- Como Participar -------------------------------------- */

  .nca-page-concurso .max-w-\[1231px\] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Texto do regulamento: quebra palavras longas sem overflow */
  .nca-page-concurso .prose-participar {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }

  /* Container dos criterios: grid 2 colunas uniforme via display:contents nos rows */
  .nca-page-concurso div:has(> .flex.gap-\[36px\].w-full) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
  }

  /* Row wrappers: transparentes ao layout (filhos vao direto pro grid) */
  .nca-page-concurso .flex.gap-\[36px\].w-full {
    display: contents !important;
  }

  /* Cards de criterio: tamanho automatico no grid */
  .nca-page-concurso .w-\[175px\] {
    width: auto !important;
    flex-shrink: unset;
  }

  /* Labels dos criterios: quebra de linha normal */
  .nca-page-concurso .w-\[175px\] span {
    white-space: normal !important;
  }

  /* Imagem "como participar": 596x344 fixo -> responsiva */
  .nca-page-concurso .w-\[596px\].h-\[344px\] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 596 / 344;
  }

  /* --- Regioes --------------------------------------------- */

  /* Reduz column-gap:118px gigante para 16px */
  .nca-page-concurso div[style*="column-gap:118px"] {
    column-gap: 16px !important;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Imagens das regioes: max-width responsivo */
  .nca-page-concurso .w-\[214px\] {
    width: 100% !important;
    max-width: 140px;
  }

  /* --- Cronograma ------------------------------------------ */

  /* Reduz padding-top excessivo */
  .nca-page-concurso .pt-\[97px\] {
    padding-top: 48px !important;
  }

  /* Container do cronograma: padding lateral */
  .nca-page-concurso .max-w-\[1280px\] {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Tabs: altura automatica e fonte menor */
  .nca-page-concurso .cron-tab {
    height: auto;
    min-height: 70px;
    padding: 12px 8px;
  }
  .nca-page-concurso .cron-tab span.font-yara {
    font-size: 22px !important;
  }

  /* Painel de timeline: padding lateral reduzido */
  .nca-page-concurso [role="tabpanel"] {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Cards de timeline: empilha verticalmente para evitar quebra de texto */
  .nca-page-concurso [role="tabpanel"] > div.border {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px;
    gap: 8px !important;
  }

  /* Icone do timer: garante 58x58 independente do contexto flex */
  .nca-page-concurso [role="tabpanel"] > div.border .w-\[58px\] {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px;
    min-height: 58px;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .nca-page-concurso [role="tabpanel"] > div.border .w-\[58px\] img {
    width: 58px !important;
    height: 58px !important;
  }

  /* Divider vertical: oculto em mobile */
  .nca-page-concurso .w-0.border-l {
    display: none;
  }

  /* Coluna de data: largura automatica */
  .nca-page-concurso .flex-shrink-0.w-\[180px\].p-2 {
    width: auto !important;
    min-width: 0;
    flex-shrink: 0;
  }

  /* Texto da timeline: ocupa toda a largura disponivel */
  .nca-page-concurso [role="tabpanel"] > div.border > .flex-1 {
    max-width: none !important;
    width: 100%;
    min-width: 0;
    word-break: break-word;
  }

  /* --- Boa Colheita ---------------------------------------- */

  .nca-page-concurso .max-w-\[1258px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Cards: remove altura fixa e overflow para exibir imagem do premio */
  .nca-page-concurso .h-\[537px\].overflow-hidden {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 24px;
  }

  /* Imagem do premio: tira do fluxo absoluto e exibe abaixo do texto */
  .nca-page-concurso .h-\[537px\] img.absolute {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 220px;
    margin: 16px auto 0;
    display: block;
  }

  /* Botao do premio: tira do absoluto e exibe abaixo da imagem */
  .nca-page-concurso .h-\[537px\] > div.absolute {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }


  /* ===========================================================
     PAGINA CAMPEOES (.nca-page-campeoes)
     =========================================================== */

  /* --- Hero ------------------------------------------------- */

  /* Padding lateral e remove min-height:694px fixo do hero */
  .nca-page-campeoes section:first-of-type .max-w-1217 {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0 !important;
  }

  /* pt-[259px]: reduz de 259px para 80px */
  .nca-page-campeoes .pt-\[259px\] {
    padding-top: 80px !important;
  }

  /* pb-[80px] no hero: reduz um pouco */
  .nca-page-campeoes .pb-\[80px\] {
    padding-bottom: 40px !important;
  }

  /* Titulo h1: font-size:82.358px -> responsivo */
  .nca-page-campeoes h1[style*="font-size:82"] {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.15 !important;
  }

  /* --- Campeoes Natural e Cereja --------------------------- */

  /* Padding lateral e gap menores nos containers */
  .nca-page-campeoes section > .max-w-\[1440px\] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 48px;
    padding-bottom: 48px;
    gap: 32px !important;
  }

  /* Remove largura fixa 482px do bloco de texto */
  .nca-page-campeoes .w-\[482px\] {
    width: 100% !important;
  }

  /* Titulo da categoria: 48px -> 36px */
  .nca-page-campeoes .text-\[48px\] {
    font-size: 36px !important;
  }

  /* Foto do campeo: 605x426 -> responsiva */
  .nca-page-campeoes img[style*="width:605px"] {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* --- Galeria --------------------------------------------- */

  /* Padding lateral */
  .nca-page-campeoes .max-w-\[1216px\] {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Grid: 3 colunas -> 1 coluna */
  .nca-page-campeoes .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* Fotos com height inline: altura automatica com aspect-ratio */
  .nca-page-campeoes div[style*="height:390px"],
  .nca-page-campeoes div[style*="height:234px"] {
    height: auto !important;
    aspect-ratio: 4 / 3;
  }

}


/* ============================================================
   MAX-WIDTH 767px — TELAS MENORES (smartphones pequenos)
   ============================================================ */
@media (max-width: 767px) {

  /* Form: padding interno mais compacto */
  .form-cadastro .rounded-20 {
    padding: 24px 16px !important;
  }

  /* Stats em telas muito pequenas */
  .cafe-arabica .text-stat-num,
  .cafe-conilon .text-stat-num {
    font-size: 44px !important;
  }

  /* Titulo de secao em telas pequenas */
  .cafe-arabica h2,
  .cafe-conilon h2 {
    font-size: 28px !important;
  }

  /* Concurso: Titulo menor em telas pequenas */
  .nca-page-concurso h1[style*="font-size:91"] {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  /* Campeoes: Titulo menor em telas pequenas */
  .nca-page-campeoes h1[style*="font-size:82"] {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  /* Campeoes: titulo de categoria */
  .nca-page-campeoes .text-\[48px\] {
    font-size: 28px !important;
  }

}