@charset "UTF-8";
/* sosradiadores.com.br  --  acabamento e responsividade
 * 23/08/2026
 *
 * O QUE ESTE ARQUIVO E, E O QUE ELE NAO E.
 *
 * O site e de 2013, feito no Dreamweaver com layout de IMAGEM FATIADA dentro de
 * uma tabela de 950px, com uma grade de spacer.gif travando as larguras
 * (170/142/357/142/169/1) e o menu feito de GIF, um por item. Responsividade de
 * verdade nisso exige refazer a pagina, porque a diagramacao E a imagem.
 *
 * Entao aqui nao ha redesenho: ha acabamento. Tudo por CSS, sobre os seletores
 * que a pagina ja tem, sem tocar uma linha das tabelas. Reverter e apagar a
 * linha do <link> de cada pagina.
 *
 * DUAS COISAS QUE EU TENTEI E TIREI, e o motivo importa mais que o codigo:
 *
 * 1) `img { height: auto }` global. O spacer.gif e um gif de 1x1 REAL, esticado
 *    pelos atributos width/height do HTML. Com height:auto o navegador recalcula
 *    a altura pela proporcao 1:1, e o spacer de width="340" height="1" virou
 *    340px de altura: abriu um buraco branco de ~330px no topo do desktop, e a
 *    altura do buraco era exatamente a largura do maior spacer. Spacer NAO
 *    recebe regra de dimensao: ele E a grade. Dai o :not() abaixo.
 *
 * 2) fundo branco mais sombra na tabela de 950, para ela ler como uma folha.
 *    Ficou bonito isolado e ERRADO no conjunto: o fundo do site (imagens/
 *    fundo.jpg, 11x1500) e branco com UMA faixa bege perto do topo, feita para
 *    atravessar a tela inteira por tras do cabecalho. A folha branca cortava
 *    essa faixa com um retangulo no meio. O desenho e de faixa corrida, nao de
 *    cartao, e quem tem de mudar sou eu, nao o desenho.
 */

/* ---------------------------------------------------------------- desktop */

body {
  /* o repeat-x (o padrao era repeat) evita que a faixa bege se repita a cada
     1500px numa pagina longa, o que pareceria defeito. A cor de fundo e a do
     proprio jpeg (254,254,254 medido no canvas), para nao haver emenda visivel
     onde a imagem termina. */
  background-repeat: repeat-x;
  background-color: #fefefe;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

table[width="950"] { max-width: 950px; width: 100%; }

img { border: 0; }

/* imagem nunca passa da largura disponivel, e o height:auto tem de vir junto,
   senao ela encolhe na largura mantendo a altura e distorce.
   O :not(spacer) e obrigatorio: veja a armadilha 1 no cabecalho do arquivo. */
img:not([src*="spacer"]) { max-width: 100%; height: auto; }

/* o mapa da localizacao vem com width="950" no atributo do iframe */
iframe { max-width: 100%; }

/* os campos do formulario ficavam com largura fixa em pixel e estouravam a
   caixa no celular. O box-sizing e o que faz o padding caber DENTRO da
   largura, em vez de somar por fora. */
input, textarea, select { max-width: 100%; box-sizing: border-box; }

/* a saudacao e a data ficavam do mesmo tamanho do telefone e competiam com ele.
   Numero de oficina e o que o visitante procura primeiro: a data recua. */
div[align="left"] font[size="4"] { font-size: 14px; line-height: 1.6; }
#Clock { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
#Clock b { font-weight: 600; color: #444; }

/* o telefone mantem o tamanho que tinha, ganha entrelinha e um cinza com
   contraste de verdade sobre branco (#666 dava 5,7:1, este da 8,6:1) */
td div[align="right"] font[size="4"] { line-height: 1.65; color: #4a4a4a !important; }

/* A BARRA DO MENU, o unico gesto de desenho deste arquivo.
 *
 * Como era: o menu de seis GIF ficava num tabuleiro de fatias, com
 * index_r2_c1.jpg e index_r2_c5.jpg (170x55, BRANCAS) nas pontas e
 * index_r3_c2.jpg (611x15, branca) por baixo. Na tela isso lia como duas
 * caixas brancas soltas ao lado dos botoes: a barra parecia quebrada.
 *
 * A medicao no canvas decidiu o desenho: o fundo do GIF de cada botao em
 * repouso e rgb(229,228,150) chapado, sem borda desenhada, e o rollover que o
 * JavaScript do proprio site ja troca (mb_*_1.gif) e um bloco verde
 * rgb(3,103,25) com texto branco. Entao a faixa inteira recebe EXATAMENTE a
 * cor do fundo dos botoes: eles derretem nela e sobram seis rotulos sobre uma
 * faixa creme com a regua verde da casa em cima. O hover verde, que ja era do
 * site, vira o unico destaque. E o mesmo desenho que o celular ja usa.
 *
 * As fatias brancas somem tambem no desktop. Os seletores :has() apontam a
 * CELULA pela fatia que ela contem (a celula nao tem id nem classe); navegador
 * sem :has() simplesmente mantem o visual antigo, que e o de hoje.
 */
ul.mbmenuebul_menulist { margin: 0; padding: 0; list-style: none; }
ul.mbmenuebul_menulist li a { display: inline-block; line-height: 0; }
ul.mbmenuebul_menulist li a img { display: block; }

img[src*="index_r2_c1"], img[src*="index_r2_c5"], img[src*="index_r3_c2"] { display: none; }

/* as tres celulas da fileira de cima da faixa: pontas (rowspan=2) e o menu */
td:has(> img[src*="index_r2_c1"]),
td:has(> img[src*="index_r2_c5"]),
td:has(> div > ul.mbmenuebul_menulist),
td:has(> img[src*="spacer"][height="40"]) {
  background: rgb(229, 228, 150);
  border-top: 3px solid #006600;
}
/* a fileira de baixo (a antiga barra branca de 15px) fecha a faixa, SEM
   regua propria: regua no meio da faixa leria como defeito */
td:has(> img[src*="index_r3_c2"]),
td:has(> img[src*="spacer"][height="15"]) {
  background: rgb(229, 228, 150);
}

/* foco visivel pelo teclado: o menu e todo imagem e nao tinha indicacao
   nenhuma para quem navega sem mouse */
a:focus-visible img { outline: 2px solid #006600; outline-offset: 1px; }
a:focus-visible { outline: 2px solid #006600; outline-offset: 2px; }

/* o rodape verde: o endereco vinha encostado na borda */
td[background*="rodape"], td[bgcolor="#006600"], td[bgcolor="#006619"] { padding: 5px 12px; }

/* o credito do webdesigner era #009933 sobre branco: 2,6:1, ilegivel. Mesma
   familia de verde da casa, escuro o suficiente para ler (5,9:1). */
font[color="#009933"] { color: #006600 !important; }

/* A galeria da pagina Empresa tem TRES fotos e DOZE celulas cinza vazias,
   `<th width="70" height="70" bgcolor="#CCCCCC">` sem nada dentro, deixadas
   pelo Dreamweaver em 2013 e nunca preenchidas. Somam 864px de cinza medidos, e
   no celular viram uma grade de quatro fileiras que le como pagina quebrada.
   O `:empty` e de proposito e nao economia: no dia em que alguem puser uma foto
   ali, a celula volta a aparecer sozinha, sem ninguem precisar mexer no CSS. E
   a caixa que as continha tinha height:400px fixo, o que deixaria 330px de
   branco depois que o cinza sai. */
th[bgcolor="#CCCCCC"]:empty { display: none; }
#quadro_igual_iframe { height: auto !important; max-height: 400px; }

/* selecao de texto na cor da casa */
::selection { background: #006600; color: #fff; }

/* ------------------------------------------------- telas de tablete e celular
 * Abaixo de 980px a tabela de 950 nao cabe mais. Aqui a diagramacao passa a
 * empilhar: cada linha e cada celula da tabela MESTRA viram bloco, a grade de
 * spacer sai de cena, e as pontas decorativas do menu (index_r2_c1/c5 e a barra
 * r3_c2) tambem, porque sao pedacos de uma imagem que so faz sentido montada.
 */
@media (max-width: 980px) {

  table[width="950"] > tbody > tr,
  table[width="950"] > tbody > tr > td {
    display: block;
    width: auto !important;
    height: auto !important;
  }

  /* AQUI o spacer pode sair, porque a grade de largura nao vale mais nada
     depois que as celulas viraram bloco */
  img[src*="spacer"] { display: none; }
  img[src*="index_r2_c1"], img[src*="index_r2_c5"], img[src*="index_r3_c2"] { display: none; }

  /* cabecalho empilhado e centrado: data acima, marca no meio, telefone abaixo */
  td > div[align="left"], td > div[align="right"] { text-align: center !important; }
  img[src*="logo_topo"] { width: 260px; margin: 6px auto 2px; display: block; }
  td div[align="right"] font[size="4"] { font-size: 16px; }

  /* O menu vira grade que empacota quantos GIF couberem na linha, CENTRADOS e
     no tamanho natural de 101x40. Esticar o botao seria esticar imagem de
     texto; e deixar um por linha, como a minha primeira versao fazia, abria uma
     vala branca no meio da tela com dois botoes perdidos nas pontas. Assim sao
     6 por linha no tablete, 3 no celular e 2 num aparelho estreito, sem uma
     unica linha de HTML mudada. */
  ul.mbmenuebul_menulist {
    width: auto !important;
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, 101px);
    justify-content: center;
    gap: 8px;
    padding: 10px;
    background: #f6f6ec;
    border-top: 3px solid #006600;
  }
  ul.mbmenuebul_menulist li { display: block; float: none; }
  ul.mbmenuebul_menulist li a { display: block; }
  ul.mbmenuebul_menulist li a img { display: block; width: 101px; height: 40px; }

  /* A faixa de fotos tem 950x270 escritos no JavaScript (new fadeshow(..., 950,
     270, ...)), que sai como style INLINE nos divs, e por isso cada regra aqui
     precisa de !important. Os dois canvas sao absolutos dentro do master, logo
     o master nao tem altura propria: sem o aspect-ratio ele fica com a altura
     fixa de 270px enquanto a foto encolhe, e sobra um buraco branco embaixo. */
  div[id^="master"], div[id^="master"] > div,
  div[id^="fadeshow"], div[id*="canvas"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  div[id^="master"] { height: auto !important; aspect-ratio: 950 / 270; }
  div[id*="canvas"] { height: 100% !important; }
  div[id^="master"] img { width: 100%; height: 100%; object-fit: cover; }

  /* As outras fatias de fundo do site, esticadas para a celula em vez de
     repetidas. Isso so e seguro porque eu medi as quatro no canvas e TODAS sao
     preenchimento, sem nada fotografico: produtos-1 (936x22) e um chapado
     #e5e399; empresa-6 (356x287) e contato-2 (247x452) sao degrades verticais
     de branco para #e5e399; contato-4 (247x452) e um degrade HORIZONTAL de
     #eaeab4 para branco, e e por isso que o painel de texto do contato clareia
     para a direita. Esticar degrade nao perde nada; se alguma delas fosse foto,
     esta regra a distorceria e eu teria de nomear a excecao. */
  td[background] { background-size: 100% 100%; }

  /* as tabelas internas de conteudo, que usam width=980 e width=100% */
  table[width="980"], table[width="100%"] { width: 100% !important; max-width: 100%; }
  td[width="980"] { width: auto !important; }

  /* o mapa do Google na localizacao vem com width="950" height="475" nos
     ATRIBUTOS do iframe, que so cedem com !important. O aspect-ratio mantem a
     proporcao original; o min-height e a rede de seguranca para o caso de o
     navegador nao honrar aspect-ratio em elemento substituido, porque iframe
     com height:auto e sem proporcao colapsa para os 150px do padrao. */
  iframe[src*="maps"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 950 / 475;
    min-height: 260px;
    display: block;
  }
  #todoform { width: 100% !important; max-width: 420px; }
  /* 4px e nao 6px: com 6px o conteudo fechava em 453px dentro dos 452px do
     iframe, e o ultimo pixel do texto do e-mail ficava cortado. Um pixel nao
     atrapalha ninguem, mas medida que passa do limite por um pixel passa por
     dez na proxima mudanca de fonte. */
  #todoform p { margin: 4px 0; }
  /* quando a pagina do formulario e aberta direto, e nao pelo iframe */
  iframe[src*="formulario_contato"] { width: 100% !important; }

  /* A FAIXA BEGE DO MEIO, e uma armadilha que eu mesmo criei aqui.
   *
   * Ela e feita de seis fatias: home_meio2 (980x15) em cima, home_meio8
   * (980x15) embaixo, e no meio home_meio3/4/6/7 com 175px de altura fixa.
   * Medido no canvas, o conjunto e um degrade vertical continuo de
   * rgb(243,242,211) para rgb(229,227,152).
   *
   * Minha primeira versao escreveu `td[background*="home_meio"] { height: 8px
   * !important }` querendo achatar so as duas fatias FINAS, e o seletor pegou
   * tambem as tres celulas de CONTEUDO: o bege passou a cobrir 72px sob um
   * texto de 90px, e apareceram calhas brancas no meio da faixa. Mesmo erro de
   * familia do spacer: seletor que casa mais do que eu apontei.
   *
   * Agora as finas sao nomeadas uma a uma, e as de conteudo trocam a fatia de
   * 175px fixos pelo degrade em CSS, que acompanha QUALQUER altura de texto.
   */
  td[background*="home_meio2"], td[background*="home_meio8"] {
    background-size: 100% 100%;
    height: 10px !important;
  }
  td[background*="home_meio3"], td[background*="home_meio4"],
  td[background*="home_meio6"], td[background*="home_meio7"] {
    background-image: linear-gradient(rgb(243,242,211), rgb(229,227,152)) !important;
    background-size: 100% 100%;
    height: auto !important;
  }

  body { font-size: 16px; }
  td { word-break: break-word; }
}

/* --------------------------------------------------------- celular estreito
 * Abaixo de 700px os tres blocos do meio (300 / 350 / 300, com calhas de 15px)
 * ficam ribbons de tres ou quatro palavras. Aqui eles empilham, e as calhas de
 * 15px somem porque calha vertical nao existe.
 */
@media (max-width: 700px) {
  /* Vale para QUALQUER tabela de diagramacao interna, e nao para uma lista de
     larguras magicas: o site tem doze `table width="100%"` que o Dreamweaver
     usou como grade, e no celular todas elas tem de empilhar. Enumerar
     width=300, 350, 247, 420 funcionaria hoje e falharia na proxima pagina. */
  table[width="100%"] > tbody > tr > td {
    display: block;
    width: auto !important;
    height: auto !important;
  }
  td[valign="top"] > div[align="center"] { padding: 4px 0; }

  /* Coluna estreita e calha, nao conteudo: a largura do proprio TD e o sinal
     honesto disso. Some com a calha e com a fatia decorativa dentro dela
     (imagens/contato-3.jpg, 22x452, e as barras de 15px do meio da home). */
  td[width="1"], td[width="15"], td[width="20"], td[width="22"], td[width="25"] {
    display: none !important;
  }

  /* O !important acima nao e enfeite: sem ele esta regra PERDE. A de empilhar
     e `table[width="100%"] > tbody > tr > td`, que tem especificidade (0,1,4)
     contra (0,1,1) daqui, entao o display:block ganhava por especificidade e a
     ordem no arquivo nao mudava nada. A tira continuava na tela.
     Junto com a calha vai a fatia que mora dentro dela: contato-1.jpg,
     contato-3.jpg e contato-5.jpg tem 22x452, e empilhadas viravam tres vazios
     de 452px de altura, um deles no meio do texto. Largura de atributo ate
     25px e enfeite de diagramacao, nao conteudo. */
  img[width="1"], img[width="8"], img[width="10"], img[width="15"],
  img[width="20"], img[width="22"], img[width="25"] { display: none !important; }

  /* O FORMULARIO, e a razao de ele continuar com duas colunas.
   *
   * A tabela e rotulo (92px) mais campo (275px) e nao encolhia: os
   * `input size="43"` impoem largura PROPRIA de ~320px, entao a largura minima
   * da tabela ja passava da tela e o max-width:100% nao resolvia sozinho.
   *
   * Minha primeira tentativa foi empilhar, rotulo em cima do campo, que e o
   * padrao de formulario em telefone. Estava errado por um motivo que so a
   * medicao mostrou: o contato.htm embute este arquivo num
   * `<iframe width="400" height="452" scrolling="no">`. A janela DE DENTRO do
   * iframe tem 400px, ou seja cai nesta media query TAMBEM no desktop de
   * 1366px. Empilhado, o formulario passou a pedir 737px dentro de uma caixa de
   * 452px sem rolagem: o botao de enviar ficou inalcancavel no desktop, que era
   * justamente o caso que funcionava antes.
   *
   * Entao a regra e caber em 452px de altura com 400px de largura, e as duas
   * colunas ficam. O min-width:0 e o que solta o campo da largura ditada pelo
   * atributo size, e o box-sizing faz o padding caber dentro. */
  #todoform { width: 100% !important; max-width: 100%; }
  #todoform input[type="text"], #todoform textarea {
    width: 100%;
    min-width: 0;
    font-size: 16px; /* abaixo de 16px o iOS da zoom sozinho ao focar o campo */
  }
  #todoform td:first-child { width: 80px !important; }
  #todoform td > div[align="right"] { padding-right: 4px; }

  /* o texto que sobrou coladao na borda depois de empilhar */
  table[width="100%"] > tbody > tr > td > font,
  table[width="100%"] > tbody > tr > td > div > font { display: block; padding: 0 10px; }

  /* Empilhados, tres degrades verticais em sequencia dariam um efeito de
     sanfona: cada bloco recomecando claro depois de terminar escuro. Aqui a
     faixa passa a ser um bege chapado, o tom medio do proprio degrade
     (236,234,182), e vale tambem para os invólucros de 300 e 350, senao a
     folga entre um bloco e o outro aparece branca. A imagem do globo tem o
     bege dela embutido e assenta dentro desse campo.

     O involucro NAO e selecionado por `td[width="300"]`: esse numero tambem
     aparece em celulas de CONTEUDO de outras paginas, que ficariam bege por
     acidente. O :has() descreve o que a celula CONTEM, que e o sinal certo, e
     em navegador velho sem :has() a regra simplesmente nao entra e a folga fica
     branca, que e o que ja acontece hoje. */
  td:has(> table td[background*="home_meio"]),
  td:has(> table td > div > img[src*="experiencia_internacional"]),
  td[background*="home_meio3"], td[background*="home_meio4"],
  td[background*="home_meio6"], td[background*="home_meio7"] {
    background-image: none !important;
    background-color: rgb(236, 234, 182) !important;
  }
  td[background*="home_meio2"], td[background*="home_meio8"] {
    background-image: none !important;
    background-color: rgb(236, 234, 182) !important;
    height: 8px !important;
  }
}

@media (max-width: 560px) {
  img[src*="logo_topo"] { width: 220px; }
  div[align="left"] font[size="4"] { font-size: 13px; }
}

/* impressao: o visitante de oficina imprime o endereco e o telefone */
@media print {
  body { background: none; }
  table[width="950"] { max-width: none; }
  ul.mbmenuebul_menulist { display: none; }
}