@charset "UTF-8";
/* ===========================================================================
   ajustes.css — ajustes de layout do site (celular + desktop)
   Criado em 20/08/2026.  (substitui o antigo mobile.css)

   Carregado DEPOIS do bundle do React, então vence por ordem de cascata.
   Editar este arquivo NÃO exige rebuild do React.

   Organização:
     A. COMUM     — vale em qualquer largura
     B. DESKTOP   — @media (min-width: 769px)
     C. CELULAR   — @media (max-width: 768px)
     D. LETRAS    — @media (hover: hover) — efeito nos botões do hero,
                    depende de /js/hero-letras.js
     E. BOTÕES    — formato de pílula dos botões do hero (qualquer largura)
     F. RODAPÉ    — 4 colunas + ícones sociais,
                    depende de /js/navegacao.js
     G. HOME      — esconde a seção de contato (virou página /contato).
                    NÃO usar sem /js/navegacao.js: ele é quem redireciona os
                    5 links da home que apontavam para a seção.

   ---------------------------------------------------------------------------
   ARMADILHA DO TAILWIND DESTE BUNDLE
   As utilitárias de escala e deslocamento compilam para as propriedades
   INDEPENDENTES `scale` e `translate` (ex.: `scale: 1.25`, `translate: 0 -50%`),
   e NÃO para `transform: scale()/translate()`. Consequências verificadas no site:
     - `transform: none` NÃO anula `scale-125`; é preciso `scale: 1 !important`
     - usar `scale` no hover das setas é seguro: não mexe no `-translate-y-1/2`
   =========================================================================== */


/* ===========================================================================
   A. COMUM
   =========================================================================== */

/* ---------------------------------------------------------------------------
   A1. Indicador de progresso do carrossel (estilo "framer-carousel")
   ---------------------------------------------------------------------------
   Adaptado do modelo de referência: a bolinha ativa vira pílula alongada, as
   inativas ficam pequenas, tudo dentro de uma caixa translúcida com borda.

   O React não foi tocado — o estado ativo é lido pela classe `scale-125` que
   o próprio componente já aplica na bolinha atual.

   Medidas do modelo: ativa w-8 (32px), inativa w-2 (8px), altura h-2 (8px),
   gap-2 (8px), p-2 (8px), rounded-xl.

   `:has()` não existe em Safari < 15.4; nesses navegadores a caixa fica sem o
   fundo translúcido, mas as pílulas e a navegação continuam funcionando.      */

#inicio div:has(> button[aria-label^="Slide"]) {
  gap: .5rem !important;
  padding: .5rem !important;
  background: rgba(255, 255, 255, .20) !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  border-radius: .75rem !important;
  backdrop-filter: blur(4px);
}

#inicio button[aria-label^="Slide"] {
  height: 8px !important;
  border-radius: 9999px !important;
  transform: none !important;
  scale: 1 !important;          /* ver "ARMADILHA DO TAILWIND" no topo */
  transition: width .45s cubic-bezier(.34, 1.56, .64, 1),
              background-color .3s ease !important;
}

#inicio button[aria-label^="Slide"].scale-125 {          /* ativa    */
  width: 32px !important;
  background: #fff !important;
}

#inicio button[aria-label^="Slide"]:not(.scale-125) {    /* inativas */
  width: 8px !important;
  background: rgba(255, 255, 255, .5) !important;
}


/* ===========================================================================
   B. DESKTOP
   =========================================================================== */

@media (min-width: 769px) {

  /* -------------------------------------------------------------------------
     B1. Setas do carrossel
     -------------------------------------------------------------------------
     Estilo do modelo de referência: círculo branco, ícone escuro, sombra,
     70% de opacidade que sobe pra 100% com leve ampliação no hover.

     O site tinha `hover:bg-brand-gold/80` (seta ficava dourada no hover). Foi
     sobrescrito pra seguir a referência; pra voltar ao dourado, remover o
     `background` da regra :hover abaixo.

     No desktop as setas NÃO colidem com o título (medido) — por isso aqui elas
     continuam visíveis, ao contrário do celular.                              */

  #inicio button[aria-label="Anterior"],
  #inicio button[aria-label="Próximo"] {
    background: #fff !important;
    color: #1f2937 !important;          /* o svg usa stroke="currentColor" */
    opacity: .7;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .18),
                0 4px 6px -4px rgba(0, 0, 0, .12) !important;
    transition: opacity .3s ease, scale .3s ease !important;
  }

  #inicio button[aria-label="Anterior"]:hover,
  #inicio button[aria-label="Próximo"]:hover {
    background: #fff !important;
    opacity: 1;
    scale: 1.1;                         /* seguro: não afeta o translate */
  }

  #inicio button[aria-label="Anterior"] svg,
  #inicio button[aria-label="Próximo"] svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* -------------------------------------------------------------------------
     B2. Recuo do conteúdo do hero (evita o texto passar sob as setas)
     -------------------------------------------------------------------------
     O container tem max-width por breakpoint e padding de 32px. Nas larguras em
     que ele ENCOSTA na borda (1024, 1280, 1536...) o texto começa em x=32 e a
     seta esquerda ocupa 16–56 — colisão. Nas larguras em que ele centraliza
     (ex.: 1440) o texto começa em 112 e fica livre.

     Ou seja: a colisão acontece em cima de cada breakpoint, não numa faixa
     contínua — e CSS não consegue condicionar à posição calculada. Por isso o
     recuo é uniforme: 5rem garante folga em qualquer largura.

     Os DOIS lados são necessários: só com padding-left, o bloco de texto
     (max-w-3xl) passou a alcançar a seta direita a 800px (medido: -20px).

     Folgas verificadas (esquerda / direita):
       800px -> 36 / 36     1024px -> 24 / 112
      1280px -> 24 / 368    1920px -> 212 / 820                                */

  #inicio > div.relative.container {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
  }
}


/* ===========================================================================
   C. CELULAR
   =========================================================================== */

@media (max-width: 768px) {

  /* -------------------------------------------------------------------------
     C1. HERO — enquadramento das fotos
     -------------------------------------------------------------------------
     As fotos do carrossel são 16:9 (1600x900, paisagem) e a caixa do hero no
     celular é retrato. Com object-fit:cover o navegador pega a fatia CENTRAL
     da foto, que nas duas imagens cai na parte errada:

       slide 1 -> pegava só as lâminas da persiana (parecia listra abstrata)
       slide 2 -> cortava a persiana ao meio e mostrava a estante escura

     object-position escolhe QUAL trecho sobrevive ao corte. Valores calculados
     a partir do recorte definido olhando cada foto:

       slide 1  x 400..1021 (de 1672)  ->  38%   cortina voil + persiana + jardim
       slide 2  x 790..1411 (de 1672)  ->  75%   persiana horizontal inteira

     A porcentagem independe da altura da tela, então vale pra qualquer celular
     enquanto o hero estiver em 70vh.

     Slide novo cadastrado no admin não casa com estes seletores e volta ao
     comportamento padrão (centro) — degrada sem quebrar.                      */

  #inicio img[src*="hero_car_7fe4bbf3"] { object-position: 38% center !important; }
  #inicio img[src*="gal_0ca7fb865"]     { object-position: 75% center !important; }

  /* -------------------------------------------------------------------------
     C2. HERO — altura
     -------------------------------------------------------------------------
     ALTURA: tela cheia (decidido em 21/08/2026)
     Chegou-se aqui em duas etapas. Primeiro o hero foi reduzido a 70% porque,
     em tela cheia, o corte lateral engolia a foto e sobrava só uma tira das
     lâminas — parecia listra abstrata. Depois o `object-position` (C1) passou a
     escolher QUAL trecho sobrevive, e aí a tela cheia voltou a funcionar: o
     corte é mais fechado, mas cai na persiana, na janela e no jardim.

     Medido em tela de 390px:
       70svh  -> hero 532px, 41,2% da largura da foto visível
      100svh  -> hero 760px, 28,9% visível
     Perde-se foto, ganha-se impacto. Sem o C1 esta troca seria ruim.

     PARA VOLTAR AOS 70%: troque os dois 100 por 70 abaixo. O espaçamento do
     conteúdo (C3) funciona nas duas alturas — conferido: botões terminam em 692
     e o indicador ocupa 724-750, 32px de folga, igual ao que havia em 70svh.

     UNIDADE: `vh`, a MESMA que o resto do site (corrigido em 21/08/2026)
     As outras páginas (Lojas, Persianas Externas) usam a classe `h-screen` do
     Tailwind, que neste bundle compila para `height: 100vh` — conferido lendo o
     CSS do próprio site.

     Houve uma tentativa de usar `100svh` aqui, para tentar resolver um relato de
     "zoom ao rolar" no celular. Foi um erro, por dois motivos:

       1. No aparelho real o hero da Home passou a ficar MENOR que o de Lojas e
          não preenchia a tela. `svh` é a tela no tamanho MÍNIMO (todas as barras
          do navegador visíveis); `vh` é a tela no tamanho MÁXIMO. Escolher `svh`
          era escolher a menor das duas.

       2. O diagnóstico que motivou a troca não se sustentava. Ele foi feito
          redimensionando a janela do navegador no desktop, o que NÃO reproduz a
          barra do celular aparecendo e sumindo. Prova: num navegador sem barra
          retrátil, `vh`, `svh`, `lvh` e `dvh` dão todos o mesmo valor.

     Ou seja: se o "zoom ao rolar" voltar a aparecer, a causa é OUTRA e precisa
     ser investigada no aparelho de verdade — não é esta unidade.               */

  #inicio {
    height: 100vh !important;   /* igual ao h-screen das outras páginas */
    min-height: 0 !important;
  }

  /* -------------------------------------------------------------------------
     C3. HERO — espaçamento do conteúdo
     -------------------------------------------------------------------------
     Com o hero mais baixo, os espaçamentos originais (feitos pra 100vh)
     espremiam o título contra o cabeçalho.

     padding-bottom 4.25rem reserva a faixa do indicador pra os botões não
     colidirem com ele. Medido: botões terminam em 500, indicador ocupa
     532-558, hero termina em 568.                                             */

  /* POSIÇÃO VERTICAL DO BLOCO DE TEXTO (ajustado em 21/08/2026)
     O hero do React usa `flex items-end`: o conteúdo nasce colado no rodapé da
     seção. Isso funcionava no hero de 532px, mas em tela cheia (760px) sobravam
     240px de foto vazia em cima e o texto ficava afundado.

     Como o alinhamento é ao rodapé, aumentar o padding-bottom EMPURRA o bloco
     para cima — é o jeito de subir o texto sem mexer no alinhamento do React.

     Medido em 390x844 com 8.5rem: 146px acima do bloco, 136px abaixo. O bloco
     fica opticamente centrado, com leve viés para cima.

     Se voltar o hero para 70%, este valor precisa cair para ~4.25rem — senão o
     conteúdo sobe demais e encosta no cabeçalho. */

  #inicio > div.relative.container { padding-bottom: 8.5rem !important; }
  #inicio .w-16.h-\[2px\]          { margin-bottom: 1.5rem !important; }

  /* Tipografia reajustada em 21/08/2026, ao hero voltar para a tela cheia.
     Os valores anteriores (título 2rem, parágrafo .95rem) foram feitos para o
     hero de 532px e ficaram pequenos demais nos 760px — sobrava espaço e o
     título perdia presença.

     Estes valores são praticamente os originais do site (o React usa `text-4xl`
     = 36px no título e `text-lg` = 18px no parágrafo). O parágrafo ficou em
     17px em vez de 18 para não passar de 3 linhas em telas de 390px.

     Encaixe conferido em tela de 390x844: título 322-440 (3 linhas), parágrafo
     460-542, último botão termina em 692, indicador em 724-750 — 32px de folga,
     a mesma que havia na versão de 70%. */

  #inicio h1 {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
    margin-bottom: 1.25rem !important;
  }

  #inicio p {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }

  /* O padding vertical dos botões saiu daqui: agora é o bloco E (pílula) que
     manda, em qualquer largura. */

  /* -------------------------------------------------------------------------
     C4. HERO — setas escondidas (navegação por arrasto)
     -------------------------------------------------------------------------
     No celular as setas caíam em cima do título (colisão medida: retângulo das
     duas dentro do bloco do h1). Ficam escondidas e a troca de slide acontece
     por ARRASTO — implementado em /js/hero-swipe.js.

     Os botões continuam no DOM (só `display:none`), porque é neles que o
     hero-swipe.js dispara o clique. NÃO trocar por `visibility` nem remover.  */

  #inicio button[aria-label="Anterior"],
  #inicio button[aria-label="Próximo"] { display: none !important; }

  /* Indicador colado no rodapé do hero (ver C3) */
  #inicio div:has(> button[aria-label^="Slide"]) { bottom: 10px !important; }


  /* =========================================================================
     C5. OPCIONAL — alvos de toque
     -------------------------------------------------------------------------
     Pontos levantados na medição de acessibilidade (mínimo recomendado 44x44).
     Pode apagar este bloco inteiro sem afetar nada acima.
     ========================================================================= */

  /* Área de toque das pílulas SEM mudar o tamanho visual.
     width:100% acompanha a pílula ativa (32px); min-width cobre a inativa.    */
  #inicio button[aria-label^="Slide"] { position: relative; }
  #inicio button[aria-label^="Slide"]::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; min-width: 28px; height: 44px;
    transform: translate(-50%, -50%);
  }

  header button[aria-label="Menu"] {          /* 40x40 -> 44x44 */
    min-width: 44px !important;
    min-height: 44px !important;
  }

  header nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}


/* ===========================================================================
   D. EFEITO DE LETRAS NOS BOTÕES DO HERO  (só onde existe mouse)
   ---------------------------------------------------------------------------
   Adaptado do modelo "RandomLetterSwap". O DOM é preparado por
   /js/hero-letras.js: cada letra vira `.hl` com duas cópias `.hl-i` empilhadas.
   Aqui só mora a animação.

   `(hover: hover) and (pointer: fine)` mantém isto fora de celular e tablet —
   e o próprio JS já não fatia nada nesses aparelhos, então nada disso chega a
   existir lá.

   A altura da caixa é 1.25em (17.5px sobre fonte de 14px). Esse valor foi
   MEDIDO, não deduzido: com 1.25em o botão fica em 52px, idêntico à altura
   reconstituída sem fatiar (padding 16+16 + line-height 20 = 52). Com 1.4em ele
   ia a 54px — a caixa inline-block cresce a linha. Não trocar sem remedir.
   O "Ç" de CONHEÇA cabe na caixa sem cortar a cedilha (conferido em tela).

   Nenhuma regra define `color`: as letras herdam a cor do <a>, então o preview
   de cor de botão do editor visual (data-evbtn) continua funcionando.
   =========================================================================== */

/* --- Estrutura: SEM media query, de propósito ------------------------------
   Estas regras NÃO podem ficar dentro do @media de hover. Se ficarem e a
   capacidade de hover sumir depois que o JS já fatiou (tablet ou notebook
   2-em-1 com o mouse desconectado), o CSS para de valer, os spans continuam no
   DOM e, sem `overflow:hidden`, as DUAS cópias de cada letra aparecem lado a
   lado — o botão vira "CCOONNHHEEÇÇAA". Bug observado em teste.

   Sem o JS, nada disso tem alvo: em aparelho de toque o script nem fatia, e
   estas regras ficam inertes.                                                */

#inicio a.inline-flex .hl-wrap { display: inline-flex; }

#inicio a.inline-flex .hl {
  display: inline-block;
  overflow: hidden;              /* esconde a segunda cópia */
  height: 1.25em;                /* medido: mantém o botão em 52px */
  line-height: 1.25em;
  vertical-align: bottom;
}

#inicio a.inline-flex .hl-esp { width: .35em; }   /* espaço entre palavras */

#inicio a.inline-flex .hl-i { display: block; }

/* --- Animação: só onde existe mouse --------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  #inicio a.inline-flex .hl-i {
    transition: transform .65s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--d, 0s);                /* atraso sorteado no JS */
  }

  #inicio a.inline-flex:hover .hl-i { transform: translateY(-100%); }

  /* Quem pediu menos animação no sistema não recebe o efeito. */
  @media (prefers-reduced-motion: reduce) {
    #inicio a.inline-flex:hover .hl-i { transform: none; }
  }
}


/* ===========================================================================
   E. BOTÕES DO HERO — formato de pílula
   ---------------------------------------------------------------------------
   Vem do mesmo modelo de referência: botões arredondados (rounded-full), um
   preenchido e outro só com contorno, padding px-7/py-3, texto 16px semibold.

   É SÓ APARÊNCIA. As cores continuam vindo do React (style inline, uma por
   slide do carrossel), então o preview de cor do editor visual segue
   funcionando — nenhuma regra aqui define `background`, `border-color` ou
   `color`.

   Altura vai de 52px para 46px. No celular isso SOBRA espaço, não falta: os
   botões terminavam em 500 e o indicador começa em 532 (ver C3).

   Este bloco fica DEPOIS do bloco C de propósito: o padding daqui vale também
   no celular, substituindo o ajuste vertical que o C3 fazia antes.

   MANTIDO do site: `uppercase` e `tracking-[0.15em]`. O modelo original usa
   caixa normal, sem espaçamento entre letras — mudar isso altera a identidade
   visual do site, então preferi não mexer. Para seguir o modelo à risca,
   acrescentar às regras abaixo:
       text-transform: none !important;
       letter-spacing: normal !important;
   =========================================================================== */

#inicio a.inline-flex {
  border-radius: 9999px !important;
  padding: .75rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}


/* ===========================================================================
   F. RODAPÉ — quatro colunas + ícones sociais
   ---------------------------------------------------------------------------
   Layout inspirado na imagem de referência (4 colunas, sendo a última as redes
   sociais em círculos), mas nas CORES DO SITE: o rodapé continua escuro. A
   referência era clara, o que destoaria do cabeçalho e do hero.

   NÃO foram feitos, por decisão consciente:
     - campo de newsletter: exigiria endpoint PHP + tabela no banco
     - botão claro/escuro: o site não tem tema claro, não haveria o que alternar
     - links Privacy/Terms/Cookies: essas páginas não existem

   A quarta coluna é criada por /js/navegacao.js — sem ele, nada aqui tem efeito e
   o rodapé segue com as 3 colunas originais. Esse mesmo script também completa
   a lista de Navegação (Lojas e Persianas Externas faltavam) e conserta o link
   de Empresa, que apontava para uma âncora inexistente.

   Divisão das colunas (grid de 12): 3 / 2 / 4 / 3.
   Foi MEDIDO: com a social em 2 (119px) os três ícones não cabiam numa linha
   (3x40px + 2x12px de gap = 144px) e quebravam em duas. Em 3 dá 202px e cabem.
   =========================================================================== */

@media (min-width: 768px) {
  footer .grid > div:nth-child(1) { grid-column: span 3 / span 3 !important; }
  footer .grid > div:nth-child(2) { grid-column: span 2 / span 2 !important; }
  footer .grid > div:nth-child(3) { grid-column: span 4 / span 4 !important; }
  footer .grid > div.rp-social    { grid-column: span 3 / span 3 !important; }
}

.rp-icones {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.rp-icone {
  width: 40px;                 /* também serve de alvo de toque adequado */
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rp-icone svg {
  width: 18px;
  height: 18px;
  fill: currentColor;          /* herda a cor do link, inclusive no hover */
}

.rp-icone:hover { border-color: currentColor; }

/* ---------------------------------------------------------------------------
   F1. Rodapé — esconder o endereço da coluna Contato
   ---------------------------------------------------------------------------
   Na coluna Contato, telefone e e-mail são <a> e o endereço é a única <div>.
   Por isso `> div` acerta só o endereço — conferido: o seletor casa com 1
   elemento e não pega telefone nem e-mail.

   O endereço NÃO some do site: continua na seção "Contato" da página, em
   LOCALIZAÇÃO. Aqui é só o rodapé.

   Se um dia o admin acrescentar outro item sem link nessa coluna, ele também
   ficaria escondido — nesse caso, trocar por `> div:last-child`.              */

footer .grid .space-y-4 > div { display: none !important; }


/* ===========================================================================
   G. HOME — seção de contato removida da página inicial
   ---------------------------------------------------------------------------
   O contato virou página própria (/contato, servida por pagina-contato.php).
   Deixar a mesma seção também na home significaria a pessoa preencher o
   formulário em dois lugares diferentes e o conteúdo duplicado.

   Escondido por CSS, não removido do HTML: quem monta a seção é o React, e
   arrancar o elemento dele brigaria com o próprio React a cada redesenho.
   Esconder é estável e reversível — para trazer a seção de volta, basta apagar
   este bloco.

   IMPORTANTE — não fazer isto sozinho. Cinco links da home apontavam para esta
   seção ("Fale Conosco" do topo, três "Saiba Mais" dos produtos e "Solicitar
   Orçamento"). O /js/navegacao.js manda todos para /contato. Se este bloco for
   aplicado SEM aquele script, os cinco viram botões mortos.

   O seletor não afeta a página /contato: lá a seção não tem id="contato".
   =========================================================================== */

#contato { display: none !important; }