/* =====================================================================
   Eurohidra · ajustes responsive / mobile
   Carregado em todas as páginas DEPOIS do <style> inline, por isso as
   regras aqui ganham às equivalentes do bloco inline. Os !important são
   necessários para vencer os estilos inline (style="...").
   ===================================================================== */

/* ---------- formulários: 16px evita o zoom automático do iOS ---------- */
@media (max-width:1024px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select,
  textarea{font-family:inherit;font-size:16px!important}
}
input[type=checkbox]{accent-color:#0E4174}

/* ---------- hover só em dispositivos com hover real ----------
   Em ecrãs táteis o :hover fica "preso" depois do toque. */
@media (hover:none){
  .btn:hover{transform:none;box-shadow:none}
  .card:hover{transform:none}
  .photo:hover img{transform:none}
  .lnk:hover::after{width:0}
}

/* ---------- altura de ecrã dinâmica (barra de endereço móvel) ---------- */
@supports (height:100svh){
  [style*="min-height:100vh"]{min-height:100svh!important}
  .stage>div[style*="height:100vh"]{height:100svh!important}
}

/* ---------- menu móvel (gaveta) ---------- */
@media (max-width:1280px){
  .nt:checked~.nav{max-height:calc(100vh - 170px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  @supports (height:100dvh){.nt:checked~.nav{max-height:calc(100dvh - 170px)}}
  html.nav-open,html.nav-open body{overflow:hidden}
  .nb{-webkit-tap-highlight-color:transparent}
}

/* =====================================================================
   TELEMÓVEL (≤ 760px)
   ===================================================================== */
@media (max-width:760px){

  /* --- tipografia mínima legível --- */
  [style*="font-size:11px"]{font-size:12px!important}

  /* --- hero da home: indicador "Deslize" (barra animada riscava o texto) --- */
  [style*="left:48px;top:42%"]{display:none!important}

  /* --- formas decorativas que tapavam texto: reduzidas a uma faixa no fundo --- */
  [style*="right:0;bottom:0;width:30%;height:120px"]{height:20px!important}
  [style*="right:-60px;bottom:0;width:44%;height:180px"]{right:0!important;height:28px!important}
  [style*="right:0;bottom:0;width:16%;height:96px"]{height:14px!important}
  [style*="left:0;bottom:0;width:36%;height:140px"]{height:24px!important}
  /* faixa diagonal escura dos CTAs e faixa clara: atrás do texto em ecrã estreito */
  [style*="right:0;top:0;width:320px;height:100%"],
  [style*="right:0;top:0;width:34%;height:100%"]{display:none!important}

  /* --- home · bloco "Competências" (símbolo a montar-se) ---
     O conteúdo sticky não cabia no ecrã: ficava cortado e com um ecrã vazio.
     No telemóvel passa a estático, sem animação ligada ao scroll. */
  .stage{height:auto!important}
  .stage>div{position:static!important;height:auto!important;min-height:0!important;overflow:visible!important}
  .stage>div>div{padding:0!important;gap:32px!important}
  .stage svg{max-width:200px!important;margin:0 auto}
  .stage .pc,.stage .stage-text,.stage .stage-sub{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}

  /* --- home · lista 01–05: a seta fica na mesma linha (antes caía sozinha) --- */
  [style*="grid-template-columns:72px 1fr auto"],
  [style*="grid-template-columns:64px 1fr auto"]{grid-template-columns:36px minmax(0,1fr) 18px!important;gap:12px!important;min-height:0!important;padding:18px 0!important}
  [style*="grid-template-columns:64px 1fr auto"]>span:first-child{font-size:22px!important}
  [style*="grid-template-columns:64px 1fr auto"]>svg{width:18px;height:18px}

  /* --- formulários --- */
  form[data-form]{padding:24px 18px!important}
  form[data-form] input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  form[data-form] select{min-height:48px!important}
  form[data-form] input[type=checkbox]{width:22px!important;height:22px!important}
  form[data-form] button[type=submit]{align-self:stretch!important;width:100%}
  form[data-form] label a{padding:12px 0}

  /* --- alvos de toque: pills/filtros e links "Ver todas…" com seta --- */
  main a[style*="border-radius:999px"]{display:inline-flex;align-items:center;min-height:44px}
  main a[style*="display:inline-flex;align-items:center;gap:8px"]{min-height:44px}
  main a[href*="maps.app.goo.gl"]{display:inline-flex;align-items:center;min-height:44px}

  /* --- alvos de toque: breadcrumbs --- */
  nav[aria-label="Caminho"]{flex-wrap:wrap;align-items:center;row-gap:0!important}
  nav[aria-label="Caminho"] a{display:inline-flex;align-items:center;min-height:44px}

  /* --- alvos de toque: rodapé --- */
  footer nav[aria-label="Rodapé"]{gap:24px!important}
  footer nav[aria-label="Rodapé"]>div{gap:0!important}
  footer nav[aria-label="Rodapé"]>div>span:first-child{margin-bottom:4px}
  footer nav[aria-label="Rodapé"] a,
  footer nav[aria-label="Rodapé"]>div>span:not(:first-child){display:flex;align-items:center;min-height:44px}
  footer a[style*="color:#D9E1E2"]:not([aria-label]){display:inline-flex;align-items:center;min-height:44px}
  footer div[style*="gap:24px"]{row-gap:0!important}
  footer a[aria-label][style*="width:20px;height:20px"]{width:44px!important;height:44px!important;padding:12px;margin:-12px 0}
  footer a[aria-label][style*="width:20px;height:20px"]:first-of-type{margin-left:-12px}
  footer p a[href^="tel:"],footer p a[href^="mailto:"]{padding:12px 0}
}

/* ---------- ecrãs muito estreitos (≤ 360px) ---------- */
@media (max-width:360px){
  header,section,footer{padding-left:16px!important;padding-right:16px!important}
  h1{font-size:30px!important}
  h2{font-size:25px!important}
  [style*="font-size:64px"],[style*="font-size:56px"],[style*="font-size:48px"],[style*="font-size:44px"],[style*="font-size:40px"]{font-size:32px!important}
}

/* ---------- iconografia dos menus (mega menu + dropdowns) ---------- */
.sub .mic{flex-shrink:0;color:#6B8299;transition:color .2s,transform .25s}
.mg4 .col a:not(.ct),.drop a:not(.all){gap:10px}
.mg4 .col a:not(.ct):hover .mic,.drop a:hover .mic{color:#307FE2}
.mg4 .ct{gap:10px}
.mg4 .ct .mic{width:30px;height:30px;padding:6px;border-radius:6px;background:#EAF2FC;color:#307FE2}
.mg4 .ct:hover .mic{background:#307FE2;color:#FFFFFF;transform:none}
@media (max-width:1280px){
  .sub .mic{color:inherit;opacity:.7}
  .mg4 .ct .mic{display:inline-block!important;width:20px;height:20px;padding:0;background:none;color:inherit}
}