/* Extraido de themes/huayra/sections/_footer_site.php */

    .huayra-footer {
      position: relative;
      background: #04042a;
      color: #c5ccd8;
      font-family: "Open Sans", sans-serif;
      /* o padding-bottom reserva o espaco da bottom-nav: o fundo do rodape
         preenche ate a nav, emendando sem faixa do body entre eles */
      padding: 0 0 calc(84px + env(safe-area-inset-bottom));
    }

    /* Loja: no desktop nao ha barra fixa, entao o espaco reservado viraria um
       vao vazio. No mobile (<=768px) a loja tem a PROPRIA tab bar fixa
       (.loja-tabbar, 62px + safe-area no loja.css) - ali o reservado continua
       valendo, senao o rodape fica encoberto. A casca da loja tambem nao
       carrega o Bootstrap, entao .container fica sem largura e o grid do
       rodape encostaria na borda. Regras so valem na loja. */
    .huayra-footer.hf-sem-nav { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    @media (max-width: 768px) {
      .huayra-footer.hf-sem-nav { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
    }
    .huayra-footer.hf-sem-nav .container {
      width: 100%;
      max-width: 1140px;
      margin-inline: auto;
      padding-left: 15px;
      padding-right: 15px;
    }

    .huayra-footer .hf-accent {
      position: relative;
      z-index: 2;
      height: 3px;
      width: 100%;
      background: linear-gradient(90deg, #1f5fff 0%, #00e0a0 50%, #02fd01 100%);
    }
    /* conteudo do rodape acima dos cometas */
    .huayra-footer > .container { position: relative; z-index: 2; }

    .huayra-footer .container { padding-top: 55px; }

    .huayra-footer .hf-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
    }

    /* ---- Marca ---- */
    .huayra-footer .hf-logo { max-height: 54px; width: auto; margin-bottom: 18px; }

    .huayra-footer .hf-about {
      font-size: 14px;
      line-height: 1.7;
      color: #98a2b8;
      max-width: 340px;
      margin: 0 0 20px;
    }

    .huayra-footer .hf-insta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #02fd01;
      font-weight: 700;
      text-decoration: none;
      transition: 0.25s;
    }
    /* color: inherit vence a regra global .bx{color:#020041} (azul) da home;
       o icone fica na mesma cor do texto @copahuayra (verde, e #00ffa6 no hover) */
    .huayra-footer .hf-insta i { font-size: 20px; color: inherit; }
    .huayra-footer .hf-insta:hover { color: #00ffa6; text-shadow: 0 0 12px rgba(2, 253, 1, 0.6); }

    /* ---- Colunas ---- */
    .huayra-footer .hf-col h4 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: #6b7896;
      margin: 0 0 22px;
    }

    .huayra-footer ul { list-style: none; margin: 0; padding: 0; }

    /* ---- Navegacao ---- */
    .huayra-footer .hf-nav li { margin-bottom: 13px; }
    .huayra-footer .hf-nav a {
      color: #c5ccd8;
      font-size: 15px;
      text-decoration: none;
      transition: 0.25s;
    }
    .huayra-footer .hf-nav a:hover { color: #02fd01; padding-left: 4px; }

    /* ---- Contato ---- */
    .huayra-footer .hf-contacts li { margin-bottom: 16px; }
    .huayra-footer .hf-contacts a {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .huayra-footer .hf-wpp {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0c8f5a 0%, #02c44f 100%);
      color: #fff;
      font-size: 20px;
      transition: 0.25s;
    }
    .huayra-footer .hf-wpp i { color: #fff; }
    .huayra-footer .hf-contacts a:hover .hf-wpp {
      box-shadow: 0 0 16px rgba(2, 253, 1, 0.5);
      transform: translateY(-2px);
    }
    .huayra-footer .hf-contact-info { display: flex; flex-direction: column; line-height: 1.3; }
    .huayra-footer .hf-contact-info strong { color: #fff; font-size: 15px; }
    .huayra-footer .hf-contact-info small { color: #8893ab; font-size: 13px; }

    /* ---- Barra inferior ---- */
    .huayra-footer .hf-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .huayra-footer .hf-bottom p { margin: 0; font-size: 13px; color: #6b7896; }
    /* extras da Loja (CNPJ, Termos) na mesma linha do copyright */
    .huayra-footer .hf-extra { margin-left: 6px; }
    .huayra-footer .hf-extra a { color: #9fb0cc; text-decoration: underline; }
    .huayra-footer .hf-extra a:hover { color: #fff; }
    @media (max-width: 575px) { .huayra-footer .hf-extra { display: block; margin: 4px 0 0; } }
    .huayra-footer .hf-powered a { color: #02fd01; text-decoration: none; transition: 0.25s; }
    .huayra-footer .hf-powered a:hover { color: #00ffa6; text-shadow: 0 0 12px rgba(2, 253, 1, 0.6); }

    /* ---- Responsivo ---- */
    /* O espaco para a bottom-nav (sempre visivel) vem do padding-bottom no body,
       definido junto da nav em casca/menu.php. */
    @media (max-width: 992px) {
      .huayra-footer .hf-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .huayra-footer .hf-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 575px) {
      .huayra-footer .container { padding-top: 40px; }
      .huayra-footer .hf-grid { grid-template-columns: 1fr; gap: 30px; }
      .huayra-footer .hf-about { max-width: 100%; }
      .huayra-footer .hf-bottom { justify-content: center; text-align: center; }
    }