/* Novo site do IOG — estilos da v1. Origem: mockup "Página inicial do IOG_ Cuidado em Movimento.png" (2026-11-14). */
:root{
  --verde:#17703a; --verde-esc:#0f5a2e; --verde-logo:#33bb6f; --verde-cl:#eaf5ee;
  --vermelho:#e52421; --tinta:#1d2b24; --cinza:#55605a; --borda:#e3ebe6;
  --sombra:0 6px 20px rgba(15,90,46,.08);
}
*{box-sizing:border-box;margin:0}
body{font-family:Lexend,system-ui,sans-serif;color:var(--tinta);background:#fff;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
em{font-style:normal;color:var(--verde)}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}

.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--g{width:34px;height:34px;color:var(--verde);stroke-width:1.5}
.ic-sol{width:16px;height:16px;fill:currentColor;flex:none}

/* faixa de topo */
.topo{background:var(--verde-cl);font-size:14px;font-weight:500}
.topo__in{display:flex;justify-content:space-between;padding:8px 0}
.topo a{display:flex;gap:8px;align-items:center}
.topo .ic-sol{color:var(--verde)}

/* cabeçalho */
.cab{background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 1px 0 var(--borda)}
.cab__in{display:flex;align-items:center;gap:32px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo__marca{height:44px;width:auto}
.logo__nome{height:40px;width:auto;padding-left:12px;border-left:1px solid #c9d2cc}
.nav{display:flex;gap:32px;margin-left:auto;font-size:15px;font-weight:500}
.nav a:hover{color:var(--verde)}
.menu-btn{display:none}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;font:600 15px Lexend,sans-serif;border:1.5px solid var(--verde);transition:.15s}
.btn--p{padding:10px 18px;border-radius:8px;font-size:14px}
.btn--cheio{background:var(--verde);color:#fff;box-shadow:0 6px 16px rgba(23,112,58,.25)}
.btn--cheio:hover{background:var(--verde-esc)}
.btn--linha{color:var(--tinta)}
.btn--linha:hover{background:var(--verde-cl)}
.btn--linha.btn--p{border-radius:999px;padding:10px 24px}

/* hero */
.hero{position:relative;background:linear-gradient(90deg,#f1f8f3 0%,#f6faf7 45%,#fff 100%);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;min-height:440px}
.hero__txt{padding:36px 0 60px}
.sobretitulo{color:var(--verde);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.sobretitulo::after,.secao__cab h2::before,.porque__txt h2::before,.novidades__cab h2::after{content:"";display:block;width:36px;height:3px;background:var(--vermelho);border-radius:2px;margin:12px 0 18px}
h1{font-size:clamp(34px,3.9vw,46px);line-height:1.08;font-weight:600;letter-spacing:-.02em;max-width:15ch}
.lead{font-size:18px;font-weight:300;color:var(--cinza);margin:14px 0 30px;max-width:34ch}
.acoes{display:flex;gap:16px;flex-wrap:wrap}
.hero__foto{align-self:stretch;margin-right:calc((100vw - min(1180px,100vw - 32px)) / -2)}
.hero__foto img{width:100%;height:100%;object-fit:cover;border-radius:180px 0 0 0;clip-path:ellipse(100% 100% at 100% 50%)}
.hero__onda{position:absolute;bottom:-1px;left:0;width:100%;height:60px}

/* atalhos (cartões de ação) */
.atalhos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.atalho{display:flex;align-items:center;gap:18px;padding:18px 22px;background:#fff;border:1px solid var(--borda);border-radius:10px;box-shadow:var(--sombra);font-weight:500;font-size:15px;transition:.15s}
.atalho span{flex:1}
.atalho:hover{border-color:var(--verde-logo);transform:translateY(-2px)}
.atalho--destaque{background:var(--verde-cl);border-color:transparent}
.seta{width:18px;height:18px}

/* seções */
.secao{margin-top:64px}
h2{font-size:clamp(28px,3vw,34px);line-height:1.1;font-weight:600;letter-spacing:-.02em}
.secao__cab p,.porque__txt p{color:var(--cinza);font-weight:300;margin:12px 0 20px;max-width:34ch}

.espec{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.espec__grade{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:12px}
.cartao-esp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:150px;padding:20px 12px;background:#fafcfb;border:1px solid var(--borda);border-radius:10px;text-align:center;font-weight:500;font-size:16px;box-shadow:var(--sombra);transition:.15s}
.cartao-esp:hover{border-color:var(--verde-logo);transform:translateY(-2px)}
.ic-esp{width:64px;height:64px;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* por que */
.porque{margin-top:64px;background:linear-gradient(90deg,#f1f8f3,#f7fbf8);border-radius:0 40px 40px 0;overflow:hidden}
.porque__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr);gap:40px;align-items:center;padding-left:max(16px,(100vw - 1180px) / 2)}
.porque__txt{padding:44px 0}
.porque__lista{list-style:none;padding:0}
.porque__lista li{display:flex;align-items:center;gap:18px;padding:12px 0;font-size:14px;font-weight:500;border-bottom:1px solid var(--borda)}
.porque__lista li:last-child{border:0}
.porque__lista .ic--g{width:30px;height:30px}
.porque__foto{align-self:stretch}
.porque__foto img{width:100%;height:100%;min-height:240px;object-fit:cover;border-radius:120px 0 0 0}

/* informações */
.info{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center}
.info__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.info .atalho{font-size:14px}

/* novidades */
.novidades__cab{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.novidades__cab h2::before{content:"";display:block;width:36px;height:3px;background:var(--vermelho);border-radius:2px;margin-bottom:14px}
.novidades__cab h2::after{margin:10px 0 0}
.link-seta{display:flex;align-items:center;gap:8px;color:var(--verde);font-weight:500;font-size:14px}
.novidades__grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.noticia{background:#fff;border:1px solid var(--borda);border-radius:10px;overflow:hidden;box-shadow:var(--sombra);transition:.15s}
.noticia:hover{transform:translateY(-3px)}
.noticia img{width:100%;aspect-ratio:3/1;object-fit:cover}
.noticia__corpo{position:relative;padding:14px 56px 18px 16px}
.noticia time{font-size:12px;color:var(--cinza)}
.noticia h3{font-size:16px;font-weight:600;margin:4px 0}
.noticia p{font-size:13px;color:var(--cinza);font-weight:300}
.noticia .seta{position:absolute;right:18px;top:50%;translate:0 -50%;color:var(--verde);width:22px;height:22px}

/* rodapé */
.rod{margin-top:56px}
.rod__onda{display:block;width:100%;height:50px}
.rod__fundo{background:var(--verde-esc);color:#fff}
.rod__in{display:grid;grid-template-columns:auto auto repeat(3,auto) auto;gap:28px;align-items:start;padding:22px 0 18px;font-size:12.5px}
.logo--rod .logo__marca{height:38px}
.logo--rod .logo__nome{height:34px;border-color:rgba(255,255,255,.35);filter:brightness(0) invert(1)}
.rod__contato{display:grid;gap:10px;padding-left:28px;border-left:1px solid rgba(255,255,255,.25)}
.rod__contato a{display:flex;gap:10px}
.rod__col{display:grid;gap:4px;padding-left:24px;border-left:1px solid rgba(255,255,255,.25)}
.rod__col strong{font-weight:600;margin-bottom:2px}
.rod__col a{opacity:.85}
.rod__col a:hover,.rod__base a:hover{opacity:1;text-decoration:underline}
.rod__redes{display:flex;gap:16px;align-self:center}
.rod__redes .ic,.rod__redes .ic-sol{width:24px;height:24px}
.rod__base{border-top:1px solid rgba(255,255,255,.15);padding:12px 0 16px;font-size:11.5px;opacity:.75}

/* responsivo */
@media (max-width:1000px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;box-shadow:var(--sombra)}
  .nav a{padding:14px 16px;border-top:1px solid var(--borda)}
  .menu-aberto .nav{display:flex}
  .menu-btn{display:block;margin-left:auto;font:500 15px Lexend,sans-serif;background:none;border:1.5px solid var(--borda);border-radius:8px;padding:8px 14px}
  .cab .btn--cheio{display:none}
  .hero__in{grid-template-columns:1fr}
  .hero__foto{margin:0 -16px;height:280px}
  .hero__foto img{border-radius:80px 0 0 0;clip-path:none}
  .atalhos{grid-template-columns:repeat(2,1fr)}
  .espec,.info{grid-template-columns:1fr;gap:20px}
  .porque__in{grid-template-columns:1fr;padding:0 16px}
  .porque{border-radius:0}
  .porque__foto{margin:0 -16px}
  .novidades__grade{grid-template-columns:1fr}
  .rod__in{grid-template-columns:1fr 1fr}
  .rod__contato,.rod__col{border:0;padding:0}
}
@media (max-width:600px){
  .atalhos,.espec__grade,.info__grade{grid-template-columns:1fr 1fr}
  .logo__nome{display:none}
}

/* ---- v1.1: achados da comparação cega com o mockup (2026-11-14) ---- */
.btn{padding:10px 22px;font-size:14.5px}
.cab .btn--p{padding:8px 16px}
.btn--linha.btn--p{padding:7px 26px}
.cab__in{padding:12px 0}
.nav{gap:30px;font-size:14.5px}
.logo__marca{height:46px}

h1{font-size:clamp(32px,3.4vw,42px);line-height:1.06}
.sobretitulo{letter-spacing:0;font-size:16px}
.hero__in{min-height:400px}
.hero__txt{padding:28px 0 56px}
.hero__foto img{border-radius:0;clip-path:none;-webkit-mask:none;
  border-top-left-radius:48% 100%;border-bottom-left-radius:22% 40%}
.hero__onda{height:70px}

.atalho{gap:14px;padding:16px 18px;font-size:14.5px;box-shadow:0 8px 24px rgba(15,90,46,.10)}
.atalho .ic--g{width:36px;height:36px}
.atalho span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atalho .ic--g, .porque__lista .ic--g{stroke-width:1.7}

.secao{margin-top:52px}
.cartao-esp{min-height:170px;font-size:16.5px}
.cartao-esp span{max-width:13ch}
.cartao-esp img{width:72px;height:72px;object-fit:contain;mix-blend-mode:multiply}

.porque{margin-top:52px;margin-left:max(0px,(100vw - 1240px) / 2);border-radius:48px 0 0 48px}
.porque__in{padding-left:max(16px,(100vw - 1180px) / 2 - max(0px,(100vw - 1240px) / 2))}
.porque__foto img{border-radius:0;border-top-left-radius:42% 100%;border-bottom-left-radius:14% 30%}
.porque__lista .ic--g{width:32px;height:32px}

.info{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr)}
.info h2{white-space:nowrap}
.info .atalho span{white-space:normal}

.novidades__cab{align-items:center}
.noticia{box-shadow:0 10px 28px rgba(15,90,46,.12);border-color:#edf2ee}
.noticia time{display:flex;align-items:center;gap:6px}
.noticia time .ic{width:14px;height:14px;color:var(--verde)}
.noticia h3{font-size:16.5px}
.noticia p{font-size:13.5px;color:#4a554f}
.noticia .seta{width:26px;height:26px}

.rod__onda{height:64px}

/* grids que não estouram no celular */
.atalhos,.espec__grade,.info__grade,.novidades__grade{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.atalhos,.espec__grade{--cols:4}.info__grade,.novidades__grade{--cols:3}
.menu-btn svg{width:20px;height:20px;vertical-align:-4px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media (max-width:1000px){
  .atalhos{--cols:2}.novidades__grade{--cols:1}
  .info h2{white-space:normal}
  .porque{margin-left:0;border-radius:0}
  .porque__txt{padding:32px 0 0}
  .porque__txt p{margin-bottom:0}
  .hero__foto img{border-top-left-radius:60px;border-bottom-left-radius:0}
  .novidades__cab{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:600px){
  .atalhos,.espec__grade{--cols:2}.info__grade{--cols:1}
  .logo__marca{height:38px}
  .atalho span{white-space:normal}
}
.cartao-esp img{mix-blend-mode:normal}
.ic-img{width:40px;height:40px;flex:none}
@media (max-width:1000px){ .info{grid-template-columns:1fr} }
@media (max-width:600px){ .atalhos{--cols:1} .atalho span{overflow:visible} }

/* ---- motion (pedido do dono 2026-11-14): entrada do hero, revelação ao rolar, onda que se desenha ---- */
@media (prefers-reduced-motion:no-preference){
  @keyframes sobe{from{opacity:0;transform:translateY(24px)}}
  @keyframes desenha{from{stroke-dashoffset:1}}
  @keyframes flutua{50%{transform:translateY(-4px)}}
  .hero__txt>*{animation:sobe .8s cubic-bezier(.2,.7,.2,1) both}
  .hero__txt>:nth-child(2){animation-delay:.1s}.hero__txt>:nth-child(3){animation-delay:.2s}.hero__txt>:nth-child(4){animation-delay:.3s}
  .hero__foto{overflow:hidden}
  .hero__onda path[stroke],.rod__onda path[stroke]{stroke-dasharray:1;stroke-dashoffset:0;animation:desenha 1.6s ease-out both .5s}
  .sobretitulo::after{animation:cresce .6s ease-out both .5s;transform-origin:left}
  @keyframes cresce{from{transform:scaleX(0)}}

  .js .rev{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
  .js .rev.visto{opacity:1;transform:none}

  .atalho:hover .seta,.noticia:hover .seta,.btn:hover .ic{transform:translateX(4px)}
  .seta,.btn .ic{transition:transform .2s}
  .cartao-esp:hover img{animation:flutua 1.2s ease-in-out infinite}
  .noticia img{transition:transform .5s}
  .noticia:hover img{transform:scale(1.05)}
  .porque__foto img{transition:transform 6s ease-out}
  .porque:hover .porque__foto img{transform:scale(1.04)}
}

h1{max-width:17ch}

/* ---- v1.2: 2ª comparação cega + hero 25% mais baixo (pedido do dono 2026-11-14) ---- */
h1,h2{font-weight:700;letter-spacing:-.035em}
.hero__in{min-height:350px}
.hero__txt{padding:22px 0 44px}
.sobretitulo::after{margin:8px 0 12px}
h1{font-size:clamp(30px,3.1vw,39px);line-height:1.04}
.lead{font-size:16.5px;margin:10px 0 20px}
.btn{padding:9px 24px}

/* curva em S da foto (máscara SVG esticada, acompanha qualquer tamanho) */
.hero__foto img{border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M24 0H100V100H6C1 82 3 62 10 44C16 28 15 10 24 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M24 0H100V100H6C1 82 3 62 10 44C16 28 15 10 24 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.porque__foto img{border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M20 0H100V100H3C0 76 6 52 12 34C16 20 15 8 20 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M20 0H100V100H3C0 76 6 52 12 34C16 20 15 8 20 0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

.cab__in{padding:18px 0}
.logo__marca{height:52px}.logo__nome{height:44px}
.nav{font-size:15.5px}
.cab .btn--cheio{box-shadow:none}
.topo{font-size:14.5px}

.secao{margin-top:40px}
.porque{margin-top:40px;margin-left:0;border-radius:0 48px 48px 0}
.porque__in{padding-left:max(16px,(100vw - 1180px) / 2)}
.porque__txt{padding:30px 0}
.novidades{margin-top:36px}
.rod{margin-top:40px}

.secao__cab p,.porque__txt p,.lead,.noticia p{color:#444c47;font-weight:400}
.espec{grid-template-columns:270px 1fr}
.porque__in{grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.3fr)}
.porque__txt p{max-width:28ch}
.info .secao__cab p{max-width:44ch}

.atalho,.cartao-esp,.noticia h3,.porque__lista li{font-weight:600}
.atalho{min-height:76px}
.atalho .ic--g,.ic-img{width:40px;height:40px}
.porque__lista .ic--g{width:30px;height:30px;stroke-width:2}
.cartao-esp{background:#fff;min-height:180px}
.noticia img{aspect-ratio:2.8/1}
.noticia__corpo{padding:12px 56px 14px 16px}

@media (prefers-reduced-motion:no-preference){
  @keyframes varre{from{clip-path:inset(0 0 0 100%)}}
  .hero__onda .verm{animation:varre 1.1s cubic-bezier(.2,.7,.2,1) both .6s}
}
@media (max-width:1000px){
  .hero__foto img{-webkit-mask:none;mask:none;border-top-left-radius:60px}
  .porque__foto img{-webkit-mask:none;mask:none}
  .espec{grid-template-columns:1fr}
  .porque__in{grid-template-columns:1fr}
  .porque{border-radius:0}
  .rod__contato{grid-column:1/-1}
}
@media (max-width:600px){
  .atalhos{--cols:2}
  .atalho{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;position:relative}
  .atalho .seta{position:absolute;right:14px;top:16px}
  .acoes .btn{flex:1;justify-content:center}
  .rod__redes{grid-column:1/-1}
}

/* chips com as demais especialidades (decisão do dono 2026-11-14: nenhuma fica de fora) */
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.chips__rot{font-size:13px;font-weight:600;color:var(--cinza);margin-right:4px}
.chips a{font-size:13px;font-weight:500;padding:6px 13px;border:1px solid var(--borda);border-radius:999px;background:#fff;transition:.15s}
.chips a:hover{border-color:var(--verde-logo);background:var(--verde-cl);color:var(--verde)}
@media (max-width:600px){.chips__rot{flex-basis:100%}}

/* alvo de toque de 24px no rodapé (Lighthouse target-size) */
.rod__col{gap:0}.rod__col a{padding:3px 0;min-height:24px}

/* hero 25% mais baixo de verdade: a altura vem do texto, a foto só preenche (pedido do dono 2026-11-14) */
.hero__foto{position:relative}
.hero__foto img{position:absolute;inset:0}
.atalho{gap:12px;padding:16px 16px;font-size:14px}
.atalho span{white-space:normal}
.secao__cab .btn{white-space:nowrap;padding:7px 18px}
@media (max-width:1000px){ .hero__foto{height:260px} }
@media (max-width:600px){ .acoes{flex-direction:column} .acoes .btn{white-space:nowrap} }

/* ---- revisão quadro a quadro do hero (2026-11-14) ---- */
/* fonte própria; a reserva tem métricas ajustadas para a troca não mexer no layout */
@font-face{font-family:Lexend;src:url(assets/fonts/lexend-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend reserva";src:local("Arial");size-adjust:112%;ascent-override:90%;descent-override:22%}
body{font-family:Lexend,"Lexend reserva",system-ui,sans-serif}
/* a foto não abre por recorte reto: um véu da cor do fundo se desfaz por cima (a foto segue pintada, o LCP não espera) */
@media (prefers-reduced-motion:no-preference){
  .hero__foto img{animation:aproxima 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes aproxima{from{transform:scale(1.05)}}
  .hero__foto::after{content:"";position:absolute;inset:0;background:#f3f9f5;pointer-events:none;animation:veu 1s ease-out .1s both}
  @keyframes veu{to{opacity:0;visibility:hidden}}
}