/* teste.css — HOME portada do design (Tailwind) para CSS puro (seq35).
   Visual: nav de vidro, hero dark com carrossel, barra de conformidade,
   serviços em linha com caixa de ícone + ponto de cor, cards institucionais,
   marquee de clientes, rodapé slate. Dados/links reais, sem CDN externo.
   Carrega DEPOIS de organic.css. Revert: voltar.ps1. */

/* Paleta = identidade visual da Medical Save (amostrada do logo oficial e da
   capa da Apresentacao 01/2026): azul marinho + vermelho. Os nomes das
   variaveis sao herdados da versao anterior; os VALORES sao os da marca. */
:root{
  --terra:#E30016; --terra-d:#B00013;   /* vermelho da marca */
  --slate:#102A83;                      /* azul marinho da marca */
  --base:#f5f5f7;
  --ink:#111111; --muted:#6e6e73; --hair:rgba(0,0,0,.06);

  /* Remapeia os tokens do organic.css (que eram terracota + slate teal ESVERDEADO).
     Isto precisa viver AQUI, e nao so no internas.css, porque a home nao carrega
     o internas.css — sem isto, componentes como o .btn-ghost saiam esverdeados. */
  --red:#E30016; --red-dark:#B00013;
  --navy:#102A83; --navy-2:#2743A5;

  /* Verde OFICIAL do WhatsApp. Nao e cor da Medical Save: e convencao de
     reconhecimento do canal. Substitui o verde-musgo da paleta reprovada. */
  --wa:#0E7A6D; --wa-dark:#0A5F55;   /* escurecido p/ passar 4.5:1 com texto branco */
}

/* ── Base + arquitetura larga ─────────────────────────────────────── */
html{ overflow-x:clip; }
body{ background:var(--base); color:var(--ink); font-family:'Inter',system-ui,sans-serif; overflow-x:clip; }
.container{ width:min(1400px, 92%); }
/* ═══ IDENTIDADE TIPOGRÁFICA ÚNICA (24/07) ═══════════════════════════
   O titulo do hero (Satoshi, peso 300 fino, MAIUSCULAS) passa a valer para
   TODOS os titulos do site, em todas as paginas. Escrito com !important
   porque style.css/organic.css definem h1..h4 depois por especificidade. */
h1,h2,h3,h4,
.svc-head h2, .inst-card h3, .ds-h, .page-hero h1, .bloco > h2, .site-footer h3, .cine-title{
  font-family:'Satoshi','Inter',sans-serif !important;
  font-weight:300 !important;
  text-transform:uppercase !important;
  letter-spacing:.01em !important;
}
/* Titulos pequenos precisam de mais corpo: no peso 300 em tamanho reduzido a
   letra desaparece. 400 mantem o mesmo caractere sem perder legibilidade. */
h3, h4, .inst-card h3, .site-footer h3{ font-weight:400 !important; letter-spacing:.045em !important; }

/* ── NAV de vidro ─────────────────────────────────────────────────── */
.topbar{ display:none; }
/* TESTE 22/07: cabecalho no azul marinho da marca (era vidro claro).
   Tudo que vive dentro dele precisa inverter para tom claro — ver bloco abaixo. */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(16,42,131,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.10); }
/* O main.js poe .scrolled ao rolar e o organic.css pintava esse estado de bege claro,
   fazendo o cabecalho "perder" o azul no meio da pagina. Aqui o navy fica firme. */
.site-header.scrolled{ background:rgba(11,29,92,.97); border-color:rgba(255,255,255,.12); box-shadow:0 10px 30px -18px rgba(0,0,0,.5); }
.site-header .logo .logo-sub{ color:rgba(255,255,255,.72); }
.site-header .site-nav a{ color:rgba(255,255,255,.88); }
.site-header .site-nav a:hover{ color:#ffffff; }
.site-header .site-nav a::after{ background:#FF5A66; }
.site-header .nav-phone span{ color:rgba(255,255,255,.62); }
.site-header .nav-phone a{ color:#ffffff; }
.site-header .nav-phone a:hover{ color:#FF5A66; }
.site-header .menu-toggle{ color:#ffffff; border-color:rgba(255,255,255,.35); }
.site-header .container{ padding-top:14px; padding-bottom:14px; }

/* Logo REAL da marca (23/07): antes usavamos um simbolo inventado por nos (tres barras
   giratorias + linha de pulso), que nunca foi a logo de verdade da Medical Save — por
   isso ninguem reconhecia o site como sendo deles. Trocado pela logo oficial extraida
   da apresentacao do cliente (assets/img/logo-oficial.png).
   Ela e uma imagem colorida (vermelho + azul marinho fixos), entao vive dentro de um
   CHIP BRANCO sempre — assim a cor sai correta em cima de qualquer fundo (navy, foto
   escura do hero etc.), sem precisar reconstruir a arte para cada contexto. */
/* Pedido Luiza 23/07: logo SO no cabecalho, sem placa branca. A variante
   logo-branca.png tem azul<->branco trocados no vetor: estrela e barra brancas,
   pulso e subtitulo em azul, vermelho intacto — legivel direto sobre o navy. */
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo .logo-img{ display:block; height:70px; width:auto; }   /* aumentada 24/07 (54 -> 70) */
@media(max-width:600px){ .logo .logo-img{ height:46px; } }
.site-nav ul{ display:flex; gap:30px; margin:0; padding:0; list-style:none; }
.site-nav a{ font-family:'Inter',sans-serif; font-weight:600; font-size:15px; color:var(--slate); white-space:nowrap; text-decoration:none; position:relative; padding:4px 0; transition:color .2s; }
.site-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--terra); transition:right .28s ease; }
.site-nav a:hover{ color:var(--terra); }
.site-nav a:hover::after{ right:0; }
.header-cta{ gap:16px; }
.nav-phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.nav-phone span{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:#8a8a8f; }
.nav-phone a{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:15px; color:var(--slate); text-decoration:none; }
.nav-phone a:hover{ color:var(--terra); }
.btn.btn-red{ background:var(--terra); border-radius:99px; text-transform:none; letter-spacing:0; font-family:'Inter',sans-serif; font-weight:500; box-shadow:0 4px 14px -6px rgba(180,81,46,.5); }
.btn.btn-red:hover{ background:var(--terra-d); }
@media(max-width:900px){ .nav-phone{ display:none; } }

/* ── HERO: slideshow de ambulancias reais (pedido Luiza 23/07) ─────
   Trocou o video de carros genericos por fotos da propria frota, em
   cross-fade LENTO e calmo (8s por foto) para dar tempo de ver a imagem. */
.hero-cine{ min-height:82vh; }
.hero-cine .hc-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#0B1D5C; }
.hc-show{ position:absolute; inset:0; }
/* Cross-fade guiado por JS (troca a classe .is-on a cada 8s). Uso transition de
   opacidade, nao @keyframes: animacao CSS e congelada por prefers-reduced-motion
   (ativo no Windows da Luiza), mas o setInterval do JS roda sempre. */
.hc-frame{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; }
.hc-frame.is-on{ opacity:1; }
.hero-cine .hc-overlay{ background:linear-gradient(100deg, rgba(6,15,50,.93) 0%, rgba(16,42,131,.78) 48%, rgba(16,42,131,.34) 100%); }

/* ═══ HERO LIVERY (direcao de arte "faixa diagonal", 23/07) ══════════════
   A faixa vermelha da lataria da ambulancia vira a ASSINATURA: um painel
   navy inclinado, com a borda vermelha diagonal, e a foto da frota atras.
   Ousadia concentrada num lugar so; o resto do hero fica disciplinado.
   Regras com .hero-livery (2 classes) sobrepoem as .hero-cine antigas. */
.hero-livery{ position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden; background:#0A1A54; }
.hero-livery .hc-media{ z-index:0; }
/* video de fundo MESCLADO com as fotos: lento (0.4x via main.js), bem escurecido
   e desfocado, para virar movimento ambiente e nao "carros genericos". */
.hero-livery .bgvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:brightness(.48) saturate(.82) blur(2px); }
.hero-livery .hc-show{ z-index:1; }
.hero-livery .hc-frame.is-on{ opacity:.9; }   /* .9 deixa o movimento do video vazar por baixo da foto */
.hero-livery .hc-media::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(10,26,84,.5) 0%, rgba(10,26,84,.12) 64%, rgba(10,26,84,.4) 100%); }
/* painel navy inclinado, com a faixa vermelha na borda diagonal (desktop) */
.hero-livery .hc-panel{ position:absolute; top:-4%; bottom:-4%; left:-10%; width:74%; z-index:3;
  background:linear-gradient(148deg,#0A1A54 0%, #163b9e 100%);
  transform:skewX(-9deg); transform-origin:top left;
  border-right:20px solid #E30016;
  box-shadow:34px 0 80px -28px rgba(0,0,0,.65); }
.hero-livery > .container{ position:relative; z-index:4; }
/* eyebrow com a estrela da vida */
.hero-livery .seal{ display:inline-flex; align-items:center; gap:9px; margin:0; padding:0; background:none; border:0;
  color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.hero-livery .seal-star{ width:16px; height:16px; flex:none; }
/* headline com escala e tensao de verdade */
.hero-livery .hero-title{ font-family:'Satoshi',sans-serif; font-weight:900; color:#fff; max-width:15ch;
  font-size:clamp(2.6rem, 5.6vw, 4.6rem); line-height:.96; letter-spacing:-.035em; margin:20px 0 0; }
.hero-livery .hero-title .hl{ position:relative; color:#fff; white-space:nowrap; }
.hero-livery .hero-title .hl::after{ content:""; position:absolute; left:-.02em; right:-.06em; bottom:.05em;
  height:.15em; background:#E30016; transform:skewX(-14deg); }
.hero-livery .hc-lead{ color:rgba(255,255,255,.85); font-weight:300; max-width:42ch; margin-top:22px; }
.hero-livery .cta-row{ margin-top:30px; }
.hero-livery .hc-seals{ margin-top:36px; border-top:1px solid rgba(255,255,255,.16); padding-top:20px; max-width:640px; }
.hero-livery .hc-seals .it{ color:rgba(255,255,255,.9); }
/* ── MOBILE-FIRST: a maioria vai ver no celular ──────────────────────
   Midia full-bleed (video + foto mesclados), conteudo ancorado embaixo
   (zona do polegar), "Ligar 24h" protagonista e largo, selos compactos.
   A diagonal vira uma faixa vermelha reta na base do hero. */
@media(max-width:820px){
  .hero-livery{ min-height:90vh; align-items:flex-end; }
  .hero-livery .bgvid{ filter:brightness(.55) saturate(.85) blur(1.5px); }
  .hero-livery .hc-frame.is-on{ opacity:1; }                 /* no celular a foto manda */
  .hero-livery .hc-media::after{ z-index:2;
    background:linear-gradient(to top, rgba(6,16,54,.97) 24%, rgba(8,21,65,.55) 54%, rgba(10,26,84,.1) 100%); }
  .hero-livery .hc-panel{ inset:auto 0 0 0; top:auto; height:8px; width:100%; left:0;
    transform:none; border:0; box-shadow:none; background:#E30016; }   /* faixa vermelha na base */
  .hero-livery > .container{ padding-top:40px; padding-bottom:40px; }
  .hero-livery .seal{ font-size:11px; letter-spacing:.14em; }
  .hero-livery .hero-title{ font-size:clamp(2.2rem,8.6vw,3rem); max-width:none; margin-top:14px; }
  .hero-livery .hc-lead{ font-size:15px; margin-top:14px; max-width:none; }
  .hero-livery .cta-row{ margin-top:22px; flex-direction:column; align-items:stretch; gap:10px; }
  .hero-livery .cta-row .btn{ width:100%; justify-content:center; font-size:16px; padding:16px 20px; }
  .hero-livery .cta-row .btn-red{ order:-1; box-shadow:0 8px 24px -8px rgba(227,0,22,.6); }  /* Ligar 24h primeiro, destacado */
  .hero-livery .hc-seals{ margin-top:22px; padding-top:16px; display:flex; flex-wrap:wrap; gap:8px 16px; }
  .hero-livery .hc-seals .it{ font-size:12px; }
}
.hero-cine .seal{ border-radius:99px; font-family:'Inter',sans-serif; letter-spacing:.1em; }
.hero-cine h1{ font-weight:900; letter-spacing:-.032em; }
.hero-cine h1 .hl{ font-style:normal; color:#FF5A66; }
.hero-cine .hc-lead{ font-family:'Inter',sans-serif; font-weight:300; }

/* ═══ ESTÉTICA CINEMATOGRÁFICA (referencia Facury 23/07) ══════════════
   Foto dramatica em duotone vermelho/navy (cores REAIS da marca, nao o
   turquesa da referencia), titulo FINO gigante em maiuscula, cabecalho
   com status operacional. Tudo escopado em .hero-cinema (2 classes) para
   vencer as regras .hero-cine antigas. */

/* ── Header cinematografico (todas as paginas) ── */
.site-header{ background:rgba(6,14,38,.82); border-bottom:1px solid rgba(255,255,255,.08); }
.site-header.scrolled{ background:rgba(4,10,28,.96); }
.site-header .site-nav a{ text-transform:uppercase; font-weight:400; font-size:12.5px; letter-spacing:.13em; color:rgba(255,255,255,.82); }
.site-header .site-nav a::after{ background:#E30016; }
.op-status{ display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.op-status i{ width:7px; height:7px; border-radius:50%; background:#E30016; animation:opPulse 2.4s infinite; }
@keyframes opPulse{ 0%{box-shadow:0 0 0 0 rgba(227,0,22,.6)} 70%{box-shadow:0 0 0 8px rgba(227,0,22,0)} 100%{box-shadow:0 0 0 0 rgba(227,0,22,0)} }
.op-call{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:#E30016; color:#fff; flex:none; text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 8px 22px -8px rgba(227,0,22,.7); transition:transform .2s, box-shadow .2s; }
.op-call svg{ width:20px; height:20px; }
.op-call:hover{ transform:scale(1.06); box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 10px 30px -8px rgba(227,0,22,.9); }

/* ── Hero cinematografico ── */
.hero-cinema{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; background:#0E0E11; }
.hero-cinema .hc-media{ position:absolute; inset:0; z-index:0; }
/* VIDEO PROTAGONISTA (24/07): as fotos saiam por cima e tapavam o video.
   Agora o video aparece limpo, so com o tratamento de cor (menos azul). */
.hero-cinema .bgvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:brightness(.62) saturate(.5) sepia(.12); }  /* saturate baixo + sepia leve tira o azulado do video */
/* grade duotone: navy denso a esquerda, brilho vermelho a direita (com as cores da marca) */
/* Tonalidade MENOS AZUL (24/07): o navy denso deu lugar a um carvao neutro,
   mantendo so o brilho vermelho da marca. A imagem fica mais natural. */
.hero-cinema .hc-grade{ position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, rgba(14,14,17,.94) 0%, rgba(22,22,26,.68) 38%, rgba(26,26,30,.2) 62%, rgba(227,0,22,.26) 100%),
    radial-gradient(120% 92% at 86% 42%, rgba(227,0,22,.28) 0%, transparent 56%); }
.hero-cinema > .container{ position:relative; z-index:4; }
.hero-cinema .cine-eye{ display:inline-flex; align-items:center; gap:11px; color:#ff2b3d;
  font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; }
.hero-cinema .cine-eye .dot{ width:6px; height:6px; border-radius:50%; background:#E30016; box-shadow:0 0 10px #E30016; flex:none; }
.hero-cinema .cine-title{ font-family:'Satoshi',sans-serif; font-weight:300; text-transform:uppercase; color:#fff;
  font-size:clamp(3rem, 8vw, 6.4rem); line-height:.92; letter-spacing:.005em; margin:22px 0 0; }
.hero-cinema .cine-title .dim{ color:rgba(255,255,255,.42); font-weight:300; }
/* "hora exata" com o risco vermelho da marca (frase oficial do hero, 24/07) */
.hero-cinema .cine-title .hl{ position:relative; color:#fff; white-space:nowrap; }
.hero-cinema .cine-title .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.02em;
  height:.09em; background:#E30016; }
.hero-cinema .cine-lead{ color:rgba(255,255,255,.72); font-family:'Inter',sans-serif; font-weight:300;
  font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.65; max-width:46ch; margin-top:24px; }
.hero-cinema .cta-row{ margin-top:36px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.hero-cinema .cine-dots{ position:absolute; right:30px; top:50%; transform:translateY(-50%); z-index:5; display:flex; flex-direction:column; gap:12px; }
.hero-cinema .cine-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.3); }
.hero-cinema .cine-dots span.on{ background:#E30016; box-shadow:0 0 10px #E30016; }

/* ── Cinema MOBILE-FIRST ── */
@media(max-width:820px){
  .hero-cinema{ min-height:92vh; align-items:flex-end; }
  .hero-cinema .bgvid{ filter:brightness(.6) saturate(.5) sepia(.12); }
  .hero-cinema .hc-grade{ background:linear-gradient(to top, rgba(12,12,15,.96) 26%, rgba(22,22,26,.58) 56%, rgba(26,26,30,.14) 80%, rgba(227,0,22,.18) 100%); }
  .hero-cinema > .container{ padding-top:40px; padding-bottom:46px; }
  .hero-cinema .cine-eye{ font-size:11px; letter-spacing:.2em; }
  .hero-cinema .cine-title{ font-size:clamp(2.6rem,12vw,3.6rem); margin-top:16px; }
  .hero-cinema .cine-lead{ font-size:15px; margin-top:16px; max-width:none; }
  .hero-cinema .cta-row{ margin-top:24px; flex-direction:column; align-items:stretch; gap:14px; }
  .hero-cinema .cta-row .btn-red{ width:100%; justify-content:center; font-size:16px; padding:16px 20px; box-shadow:0 8px 24px -8px rgba(227,0,22,.6); }
    .hero-cinema .cine-dots{ display:none; }
  .op-status{ display:none; }
}
/* Botao secundario SOBRE o hero escuro: contorno e texto claros.
   O .btn-ghost padrao usa a cor escura da marca, que sumia no fundo do video. */
.hero-cine .btn-ghost{ border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.hero-cine .btn-ghost:hover{ background:#fff; color:var(--slate); border-color:#fff; }

/* Carrossel */
.hero-carousel{ display:grid; margin:0; }
.hero-carousel .hc-slide{ grid-area:1 / 1; opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.hero-carousel .hc-slide.is-active{ opacity:1; transform:none; }
.hc-dots{ display:flex; gap:10px; margin:22px 0 2px; }
.hc-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.38); cursor:pointer; transition:background .3s, transform .3s; }
.hc-dot:hover{ background:rgba(255,255,255,.7); }
.hc-dot.is-on{ background:#FF5A66; transform:scale(1.3); }

/* ── Barra de conformidade / prova ────────────────────────────────── */
.conform{ background:#fff; border-bottom:1px solid var(--hair); position:relative; z-index:20; }
.conform .grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.conform .item{ padding:26px 26px; border-left:1px solid #f0f0f2; }
.conform .item:first-child{ border-left:0; }
.conform .n{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:30px; color:var(--ink); display:flex; align-items:center; gap:8px; line-height:1; }
.conform .n.sm{ font-size:19px; }
.conform .n svg{ width:22px; height:22px; color:#2e8b57; flex:none; }
.conform .lbl{ font-size:13.5px; color:var(--muted); margin-top:8px; }
@media(max-width:760px){ .conform .grid{ grid-template-columns:repeat(2,1fr); } .conform .item:nth-child(3){ border-left:0; } }

/* ── SERVIÇOS: linhas com caixa de ícone + ponto de cor ───────────── */
.svc-list-sec{ padding:96px 0; background:var(--base); }
.svc-head{ max-width:52ch; margin-bottom:56px; }
.svc-head h2::before{ content:""; display:block; width:40px; height:5px; background:#E30016; transform:skewX(-18deg); margin:0 0 18px 3px; }  /* diagonal livery em miniatura */
.svc-head h2{ font-size:clamp(30px,4vw,44px); font-weight:700; color:var(--ink); margin:0 0 14px; }
.svc-head p{ font-family:'Inter',sans-serif; font-weight:300; font-size:18px; color:var(--muted); margin:0; max-width:60ch; }
/* ═══ SERVIÇOS: índice tipográfico + ícone sólido (opção C com ícones da B) ═══
   Escolha do cliente 24/07. SEM cor de fundo: em repouso a lista é branca e
   silenciosa, com o nome grande em preto e a descricao esmaecida. A cor mora
   no icone solido (vermelho na urgencia, navy no resto) e no hover, quando o
   nome fica vermelho e desliza. O destaque vem da interacao, nao do fundo. */
.svc-list{ border-top:1px solid rgba(0,0,0,.13); }
.svc-row{
  display:grid; grid-template-columns:64px minmax(0,1fr); align-items:start; gap:6px 22px;
  padding:24px 8px; border-bottom:1px solid rgba(0,0,0,.09); text-decoration:none;
  background:transparent; transition:padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.svc-row:hover{ background:transparent; padding-left:16px; }
.svc-row-l{ display:contents; }   /* icone e nome viram itens diretos da grade */
/* Icone SOLIDO na cor do servico (padrao da opcao B) */
.svc-ic{ position:relative; grid-row:span 2; width:60px; height:60px; border-radius:15px;
  background:var(--svc); border:0; display:flex; align-items:center; justify-content:center; flex:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.svc-ic svg{ width:27px; height:27px; color:#ffffff; }
.svc-ic .dot{ display:none; }   /* o ponto era do padrao antigo */
.svc-row:hover .svc-ic{ transform:translateY(-3px); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--svc) 75%, transparent); }
/* Nome grande, preto em repouso; vermelho da marca e deslizando no hover */
.svc-row-name{ font-family:'Satoshi',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(19px,2.5vw,29px);
  color:var(--ink); line-height:1.2; padding-bottom:.1em; letter-spacing:.012em;
  white-space:normal; overflow:visible;
  transition:color .25s ease, transform .3s cubic-bezier(.22,.61,.36,1); }
.svc-row:hover .svc-row-name{ color:#B00013; transform:translateX(10px); }  /* vermelho escuro da marca: 4.51 -> 6.5 de contraste */
/* Descricao esmaecida que acende na interacao */
.svc-desc{ font-family:'Inter',sans-serif; font-weight:400; font-size:15px; color:#3b3b42; line-height:1.55;
  max-width:74ch; opacity:.6; transition:opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1); }
.svc-row:hover .svc-desc{ opacity:1; transform:translateX(10px); }
.svc-go{ display:none; }   /* a seta some: o proprio deslize ja indica a acao */
@media(max-width:820px){
  /* icone menor ao lado do nome; descricao desce ocupando a largura toda */
  .svc-row{ grid-template-columns:48px minmax(0,1fr); gap:4px 14px; padding:20px 4px; }
  .svc-row:hover{ padding-left:4px; }              /* sem deslize lateral no toque */
  .svc-ic{ width:48px; height:48px; border-radius:12px; }
  .svc-ic svg{ width:22px; height:22px; }
  .svc-row-name{ font-size:20px; align-self:center; }
  .svc-desc{ grid-column:1 / -1; opacity:.72; margin-top:6px; }
  .svc-row:hover .svc-row-name,
  .svc-row:hover .svc-desc{ transform:none; }      /* no celular nao ha hover real */
}

/* ── INSTITUCIONAL: 3 cards ───────────────────────────────────────── */
.inst3{ padding:96px 0; background:#fff; border-top:1px solid var(--hair); }
.inst3 .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.inst-card{
  display:flex; flex-direction:column; background:var(--base); border:1px solid #ececee; border-radius:26px; padding:40px;
  text-decoration:none; transition:box-shadow .3s ease, transform .3s ease;
}
.inst-card:hover{ box-shadow:0 24px 50px -24px rgba(30,59,56,.22); transform:translateY(-3px); }
.inst-card .ic{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:24px; }
.inst-card .ic svg{ width:26px; height:26px; }
.inst-card h3{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:24px; color:var(--ink); margin:0 0 14px; }
.inst-card p{ font-family:'Inter',sans-serif; font-size:15.5px; color:#555; margin:0 0 26px; flex:1; line-height:1.6; }
.inst-card .more{ display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:500; font-size:15px; color:var(--terra); }
.inst-card .more svg{ width:16px; height:16px; transition:transform .25s; }
.inst-card:hover .more svg{ transform:translateX(4px); }
@media(max-width:900px){ .inst3 .grid{ grid-template-columns:1fr; } }

/* ── CLIENTES: fileira estática centralizada (sem overflow) ───────── */
.clients{ padding:80px 0; background:var(--base); border-top:1px solid var(--hair); }
.clients .head{ text-align:center; margin-bottom:40px; }
.clients .head p{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0; }
.clients .logo-wall{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px 26px; align-items:center; justify-items:center; max-width:1080px; margin:0 auto; }
.clients .logo-cell{ display:flex; align-items:center; justify-content:center; width:100%; height:66px; padding:6px 12px; }
/* Logos dos clientes COM COR (teste 22/07). O cinza escondia marcas fortes
   como Globo, Cruzeiro e Unimed, que valem mais reconheciveis. */
.clients .logo-cell img{ max-width:100%; max-height:100%; object-fit:contain; opacity:.95; transition:opacity .3s ease, transform .3s ease; }
.clients .logo-cell:hover img{ opacity:1; transform:scale(1.06); }
@media(max-width:820px){ .clients .logo-wall{ grid-template-columns:repeat(3,1fr); gap:24px 18px; } }
@media(max-width:480px){ .clients .logo-wall{ grid-template-columns:repeat(2,1fr); } .clients .logo-cell{ height:54px; } }

/* ── RODAPÉ slate ─────────────────────────────────────────────────── */
.site-footer{ position:relative; background:var(--slate); }
/* Livery no rodape: cunha vermelha diagonal no topo-esquerdo (nod a lataria). */
.site-footer::before{ content:""; position:absolute; top:0; left:0; height:7px; width:200px;
  background:#E30016; clip-path:polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
.site-footer .cols{ grid-template-columns:1.4fr 1fr 1fr 1fr; padding-top:80px; }
.site-footer h3{ font-family:'Satoshi',sans-serif; font-weight:700; font-size:17px; text-transform:none; letter-spacing:0; color:#fff; }
.site-footer p, .site-footer li{ color:rgba(255,255,255,.62); font-weight:300; }
.f-ct{ display:flex; gap:12px; }
.f-ct .ic{ color:var(--terra); flex:none; margin-top:2px; }
.f-ct .ic svg{ width:18px; height:18px; }
.f-ct strong{ color:#fff; display:block; margin-bottom:2px; font-weight:500; }
.f-bottom{ color:rgba(255,255,255,.4); }

/* ── Rodapé responsivo (evita transbordo no mobile) ───────────────── */
@media(max-width:760px){
  .site-footer .cols{ grid-template-columns:1fr 1fr; gap:32px; padding-top:56px; }
  .conform .item{ padding:18px 16px; }
}
@media(max-width:480px){
  .site-footer .cols{ grid-template-columns:1fr; }
}

/* ── Rodape: identidade textual (logo vive so no cabecalho) ───────── */
.f-logo{ display:flex; align-items:center; margin-bottom:14px; }
.f-logo .f-name{ font-family:'Satoshi','Inter',sans-serif; font-weight:900; font-size:19px; letter-spacing:.02em; color:#ffffff; }

/* ── Menu mobile do header novo (site-nav vira dropdown) ──────────── */
@media(max-width:960px){
  .site-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair); box-shadow:0 22px 44px -26px rgba(0,0,0,.35);
  }
  .site-nav.open{ display:block; }
  .site-nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:8px 5%; }
  .site-nav li{ border-bottom:1px solid var(--hair); }
  .site-nav li:last-child{ border-bottom:0; }
  .site-nav a{ display:block; padding:15px 6px; font-size:16px; color:var(--ink); }
  .site-nav a::after{ display:none; }
  .nav-phone{ display:none; }
}

/* ── Ajustes finos de mobile (hero) ───────────────────────────────── */
@media(max-width:600px){
  .hc-brand-mark{ width:44px; height:44px; }
  .hc-brand-name{ font-size:22px; }
  .hero-cine{ min-height:auto; }
  .hero-cine .container{ padding-top:42px; padding-bottom:52px; }
  .hc-seals{ flex-wrap:wrap; gap:10px 18px; }
  .cta-row{ flex-wrap:wrap; }
  .cta-row .btn{ width:100%; justify-content:center; }
}