/* Ribertec Hospitalar — design system v2 */

:root{
  --tinta:#0C1A24;
  --tinta-2:#13252F;
  --papel:#F4F7F8;
  --papel-2:#E9EFF1;
  --carta:#FFFFFF;
  --texto:#16242C;
  --suave:#596B75;
  --sinal:#0E8C7C;
  --sinal-forte:#0A6E62;
  --linha:#D2DDE1;
  --atencao:#B0432C;
  --sombra:0 1px 2px rgba(12,26,36,.05);
  --sombra-alta:0 2px 4px rgba(12,26,36,.06),0 12px 28px -14px rgba(12,26,36,.28);

  --titulo:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --corpo:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --dado:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --leitura:min(68ch,92vw);
  --larga:min(1240px,94vw);
  --curva:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--corpo);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sinal-forte);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--titulo);font-weight:600;line-height:1.14;margin:0;text-wrap:balance;letter-spacing:-.018em}
h1{font-size:clamp(2rem,1.35rem+2.7vw,3rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.45rem,1.15rem+1.2vw,2.05rem)}
h3{font-size:1.08rem;letter-spacing:-.008em}
p{margin:0}
ul{margin:0}
:focus-visible{outline:2.5px solid var(--sinal);outline-offset:3px;border-radius:2px}
::selection{background:rgba(14,140,124,.2)}

.env{width:var(--larga);margin-inline:auto}
.env-leitura{width:var(--leitura);margin-inline:auto}
.pular{position:absolute;left:-9999px}
.pular:focus{left:1rem;top:1rem;z-index:200;background:var(--carta);padding:.7rem 1rem;border-radius:3px;box-shadow:var(--sombra-alta)}

.rotulo{font-family:var(--dado);font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sinal-forte)}
.dado{font-family:var(--dado);font-variant-numeric:tabular-nums}
.suave{color:var(--suave)}

/* ---------------- navegação ---------------- */
.topo{position:sticky;top:0;z-index:60;background:rgba(12,26,36,.97);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.09)}
.topo .env{display:flex;align-items:center;gap:1.4rem;min-height:66px}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex-shrink:0}
.logo .nome{font-family:var(--titulo);font-weight:700;font-size:1.06rem;color:#F2F8F9;letter-spacing:-.02em;line-height:1}
.logo .sub{font-family:var(--dado);font-size:.56rem;letter-spacing:.26em;color:#7FA8AE;text-transform:uppercase;display:block;margin-top:3px}
.logo .anos{font-family:var(--dado);font-size:.58rem;letter-spacing:.12em;color:#0C1A24;background:#5AD9C7;padding:.2rem .38rem;border-radius:2px;line-height:1}
.menu{display:flex;gap:1.35rem;list-style:none;padding:0;margin:0 0 0 auto;align-items:center}
.menu a{color:#CBDBE0;text-decoration:none;font-size:.9rem;padding:.4rem 0;border-bottom:1.5px solid transparent;transition:color .16s var(--curva),border-color .16s var(--curva)}
.menu a:hover,.menu a:focus-visible,.menu a[aria-current=page]{color:#fff;border-bottom-color:var(--sinal)}
.tel-topo{display:flex;align-items:center;gap:.55rem;color:#CBDBE0;text-decoration:none;font-size:.9rem;white-space:nowrap}
.tel-topo b{color:#fff;font-weight:600}
.tel-topo span{font-family:var(--dado);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7FA8AE;display:block;line-height:1.3}
@media (max-width:1080px){.menu{display:none}}
.abrir-menu{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.22);color:#E7F0F2;border-radius:3px;padding:.55rem .7rem;font-size:.85rem;cursor:pointer;font-family:var(--corpo)}
@media (max-width:1080px){.abrir-menu{display:block}.tel-topo span{display:none}}
.menu-movel{display:none;background:var(--tinta-2);border-bottom:1px solid rgba(255,255,255,.09)}
.menu-movel.aberto{display:block}
.menu-movel ul{list-style:none;padding:.6rem 0;margin:0}
.menu-movel a{display:block;padding:.75rem 0;color:#CBDBE0;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}

/* ---------------- botões ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.35rem;border-radius:3px;text-decoration:none;
  font-family:var(--corpo);font-weight:600;font-size:.94rem;border:1px solid transparent;
  cursor:pointer;transition:background .16s var(--curva),border-color .16s var(--curva),color .16s var(--curva);
}
.btn-1{background:var(--sinal);color:#fff}
.btn-1:hover{background:var(--sinal-forte)}
.btn-2{border-color:var(--linha);color:var(--texto);background:var(--carta)}
.btn-2:hover{border-color:var(--sinal);color:var(--sinal-forte)}
.btn-claro{border-color:rgba(255,255,255,.3);color:#E7F0F2;background:transparent}
.btn-claro:hover{border-color:var(--sinal);color:#5AD9C7}
.btn-txt{color:var(--sinal-forte);font-weight:600;font-size:.92rem;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.btn-txt:hover{gap:.6rem}

/* ---------------- herói ---------------- */
.heroi{background:var(--tinta);color:#E7F0F2;padding:clamp(2.6rem,5vw,4.4rem) 0}
.heroi .env{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:940px){.heroi .env{grid-template-columns:1.05fr .95fr}}
.heroi h1{color:#F5FAFB;margin:.85rem 0 0}
.heroi p.lede{color:#B3C6CD;max-width:54ch;margin-top:1.1rem;font-size:1.05rem}
.heroi-acoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}
.credencial{
  font-family:var(--dado);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#7FA8AE;
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:.4rem 1.3rem
}
.heroi-img{border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#fff;aspect-ratio:16/11;display:block;position:relative}
.heroi-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------------- cabeçalho de página ---------------- */
.capa{background:var(--tinta);color:#E7F0F2;padding:clamp(2rem,4vw,3rem) 0}
.capa h1{color:#F5FAFB;margin-top:.7rem}
.capa p{color:#B3C6CD;max-width:58ch;margin-top:.9rem}
.capa .credencial{margin-top:1.5rem}
.trilha{font-size:.82rem;color:#7FA8AE;display:flex;flex-wrap:wrap;gap:.4rem}
.trilha a{color:#9DBAC1;text-decoration:none}
.trilha a:hover{color:#fff}
.trilha span[aria-current]{color:#CBDBE0}

/* ---------------- seções ---------------- */
.secao{padding:clamp(2.8rem,5.5vw,4.8rem) 0}
.secao-alt{background:var(--papel-2)}
.secao-escura{background:var(--tinta);color:#E7F0F2}
.secao-escura h2{color:#F5FAFB}
.cabeca{max-width:60ch;margin-bottom:2.2rem}
.cabeca h2{margin-top:.55rem}
.cabeca p{color:var(--suave);margin-top:.8rem}
.secao-escura .cabeca p{color:#B3C6CD}

/* ---------------- ambientes ---------------- */
.ambientes{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:600px){.ambientes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.ambientes{grid-template-columns:repeat(3,1fr)}}
.ambiente{
  background:var(--carta);border:1px solid var(--linha);border-radius:3px;padding:1.4rem 1.35rem;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.55rem;
  transition:border-color .18s var(--curva),box-shadow .18s var(--curva),transform .18s var(--curva)
}
.ambiente:hover{border-color:var(--sinal);box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.ambiente .qtd{font-family:var(--dado);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sinal-forte)}
.ambiente h3{margin:0}
.ambiente p{color:var(--suave);font-size:.9rem;line-height:1.55}
.ambiente .ir{margin-top:auto;padding-top:.7rem;color:var(--sinal-forte);font-size:.88rem;font-weight:600}

/* ---------------- marcas ---------------- */
.marcas{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:3px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.marca{background:var(--carta);padding:1.3rem 1.25rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.3rem;transition:background .16s var(--curva)}
.marca:hover{background:var(--papel-2)}
.marca b{font-family:var(--titulo);font-size:1.12rem;font-weight:600}
.marca .qtd{font-family:var(--dado);font-size:.76rem;color:var(--suave)}
.marca .tipo{font-size:.86rem;color:var(--suave);margin-top:.3rem}

/* ---------------- cards de produto ---------------- */
.grade{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(264px,1fr))}
.card{
  background:var(--carta);border:1px solid var(--linha);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .18s var(--curva),box-shadow .18s var(--curva)
}
.card:hover{border-color:var(--sinal);box-shadow:var(--sombra-alta)}
.card .foto{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:.55rem;border-bottom:1px solid var(--linha);overflow:hidden}
.card .foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s var(--curva)}
.card:hover .foto img{transform:scale(1.04)}
.card .txt{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card .cat{font-family:var(--dado);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--suave)}
.card h3{font-size:.99rem;line-height:1.3;min-height:2.6em;display:flex;align-items:flex-start}
.card .marca-nome{font-size:.82rem;color:var(--sinal-forte);font-weight:600}
.card .preco{font-family:var(--dado);font-size:.76rem;color:var(--suave);margin-top:auto;padding-top:.6rem}

/* ---------------- serviços ---------------- */
.servicos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.servico{background:var(--carta);border:1px solid var(--linha);border-radius:3px;padding:1.4rem 1.35rem;display:flex;flex-direction:column;gap:.6rem}
.servico h3{margin:0}
.servico p{color:var(--suave);font-size:.92rem}
.servico ul{padding-left:1.05rem;color:var(--suave);font-size:.9rem;display:flex;flex-direction:column;gap:.32rem;margin-top:.3rem}

/* ---------------- números ---------------- */
.numeros{display:grid;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:3px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.numero{background:var(--tinta);padding:1.5rem 1.3rem}
.numero b{display:block;font-family:var(--titulo);font-size:2.3rem;font-weight:700;color:#5AD9C7;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.numero span{display:block;font-family:var(--dado);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#93AEB6;margin-top:.6rem;line-height:1.5}

/* ---------------- ficha de produto ---------------- */
.ficha{display:grid;gap:clamp(1.8rem,3.5vw,3rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.ficha{grid-template-columns:1fr 1fr}}
.ficha-foto{background:#fff;border:1px solid var(--linha);border-radius:3px;aspect-ratio:4/3;display:grid;place-items:center;padding:1rem}
.ficha-foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ficha-info h1{margin:.6rem 0 0;font-size:clamp(1.6rem,1.25rem+1.5vw,2.3rem)}
.ficha-info .resumo{color:var(--suave);margin-top:.9rem;font-size:1.02rem}
.preco-bloco{margin-top:1.5rem;padding:1.05rem 1.15rem;background:var(--papel-2);border:1px solid var(--linha);border-radius:3px}
.preco-bloco b{font-family:var(--titulo);font-size:1.24rem;font-weight:600;display:block}
.preco-bloco p{font-size:.87rem;color:var(--suave);margin-top:.4rem}
.ficha-acoes{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}
.selo{
  margin-top:1.4rem;padding:.95rem 1.05rem;border:1px solid var(--linha);border-radius:3px;background:var(--carta);
  font-family:var(--dado);font-size:.74rem;color:var(--suave);display:flex;flex-direction:column;gap:.38rem;line-height:1.5
}
.selo b{color:var(--texto);font-weight:500}

.specs{width:100%;border-collapse:collapse;font-size:.93rem}
.specs-caixa{border:1px solid var(--linha);border-radius:3px;overflow:hidden;background:var(--carta);margin-top:1.5rem}
.specs th,.specs td{text-align:left;padding:.78rem 1rem;border-bottom:1px solid var(--linha);vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:none}
.specs th{width:40%;font-weight:400;color:var(--suave);font-size:.88rem;background:var(--papel-2)}
.specs td{font-family:var(--dado);font-size:.87rem;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .specs,.specs tbody,.specs tr,.specs th,.specs td{display:block;width:100%}
  .specs th{background:none;padding-bottom:.15rem;border-bottom:none;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
  .specs td{padding-top:0}
}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip{
  font-family:var(--dado);font-size:.74rem;padding:.42rem .7rem;border:1px solid var(--linha);
  border-radius:2px;background:var(--carta);color:var(--texto);text-decoration:none
}
.chip:hover{border-color:var(--sinal);color:var(--sinal-forte)}
.chip[aria-pressed=true],.chip.ativo{background:var(--sinal);border-color:var(--sinal);color:#fff}

/* ---------------- catálogo ---------------- */
.catalogo{display:grid;gap:2rem;grid-template-columns:1fr;align-items:start}
@media (min-width:1000px){.catalogo{grid-template-columns:246px 1fr}}
.filtros{position:sticky;top:82px;display:flex;flex-direction:column;gap:1.5rem}
@media (max-width:999px){.filtros{position:static}}
.filtro-grupo h3{font-family:var(--dado);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);font-weight:500;margin-bottom:.65rem}
.filtro-lista{list-style:none;padding:0;display:flex;flex-direction:column;gap:.1rem;max-height:270px;overflow-y:auto}
.filtro-lista button{
  width:100%;text-align:left;background:none;border:none;padding:.42rem .55rem;border-radius:2px;cursor:pointer;
  font-family:var(--corpo);font-size:.89rem;color:var(--texto);display:flex;justify-content:space-between;gap:.6rem;
  transition:background .14s var(--curva)
}
.filtro-lista button:hover{background:var(--papel-2)}
.filtro-lista button[aria-pressed=true]{background:var(--sinal);color:#fff}
.filtro-lista button[aria-pressed=true] i{color:rgba(255,255,255,.8)}
.filtro-lista i{font-style:normal;font-family:var(--dado);font-size:.74rem;color:var(--suave)}
.busca{width:100%;padding:.8rem .95rem;border:1px solid var(--linha);border-radius:3px;font-family:var(--corpo);font-size:.95rem;background:var(--carta);color:var(--texto);min-height:48px}
.busca:focus{border-color:var(--sinal)}
.barra-result{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--linha)}
.barra-result .cont{font-family:var(--dado);font-size:.84rem;color:var(--suave)}
.vazio{padding:3rem 1rem;text-align:center;color:var(--suave)}
.abrir-filtros{display:none}
@media (max-width:999px){
  .abrir-filtros{display:inline-flex;margin-bottom:1rem}
  .filtros{display:none}
  .filtros.aberto{display:flex}
}

/* ---------------- formulário ---------------- */
.form{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-top:1.6rem}
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo.largo{grid-column:1/-1}
.campo label{font-size:.85rem;font-weight:600;color:var(--texto)}
.campo input,.campo textarea,.campo select{
  padding:.72rem .85rem;border:1px solid var(--linha);border-radius:3px;min-height:48px;
  font-family:var(--corpo);font-size:.95rem;background:var(--carta);color:var(--texto);width:100%
}
.campo textarea{min-height:112px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--sinal)}
.form-nota{font-size:.84rem;color:var(--suave);grid-column:1/-1}

/* ---------------- rodapé ---------------- */
.rodape{background:var(--tinta);color:#9DBAC1;padding:clamp(2.4rem,4vw,3.4rem) 0 0;font-size:.9rem}
.rodape-grade{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding-bottom:2.2rem}
.rodape h4{font-family:var(--dado);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7FA8AE;font-weight:500;margin-bottom:.85rem}
.rodape ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}
.rodape a{color:#CBDBE0;text-decoration:none}
.rodape a:hover{color:#5AD9C7}
.rodape-legal{
  border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0;font-family:var(--dado);font-size:.72rem;color:#6E8B94;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;line-height:1.7
}

/* ---------------- flutuante ---------------- */
.zap{
  position:fixed;right:1rem;bottom:1rem;z-index:70;background:var(--sinal);color:#fff;
  border-radius:50px;padding:.85rem 1.2rem;text-decoration:none;font-weight:600;font-size:.92rem;
  box-shadow:var(--sombra-alta);display:inline-flex;align-items:center;gap:.5rem;min-height:48px
}
.zap:hover{background:var(--sinal-forte)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#0D181E;--papel-2:#132229;--carta:#132229;--texto:#DFE9ED;--suave:#93A6B0;
    --sinal:#2CC0AC;--sinal-forte:#5AD9C7;--linha:#22343D;--atencao:#E4785C;
    --sombra-alta:0 2px 4px rgba(0,0,0,.4),0 12px 28px -14px rgba(0,0,0,.7);
  }
  :root:not([data-theme="light"]) .card .foto,
  :root:not([data-theme="light"]) .ficha-foto,
  :root:not([data-theme="light"]) .heroi-img{background:#fff}
}

/* ---------------- descrição de produto ---------------- */
.lista-spec{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.lista-spec li{padding-left:1.35rem;position:relative;color:var(--texto)}
.lista-spec li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--sinal);border-radius:1px
}
.env-leitura p+p{margin-top:1rem}
.env-leitura p+.lista-spec{margin-top:1rem}
.lista-spec+p{margin-top:1.1rem}
