/* =========================================================
       Vitrine de Formações — v5 (WCAG-friendly)
       - Landmarks (header/main/footer)
       - Skip link
       - Foco visível (:focus-visible)
       - Equivalência hover/focus (focus-within)
       - Alvos grandes (≥ 44px recomendado; ≥ 24px mínimo)
       - Redução de movimento (prefers-reduced-motion)
       ========================================================= */

    :root{
      --bg: #F0F2F5;
      --text: #212121;
      --muted: #555;
      --brand-blue: #003DA5;
      --brand-yellow: #FFD100;
      --card: #FFFFFF;
      --border: #E0E0E0;
      --focus: #0B63CE;
      --focus-outline: 3px solid var(--focus);
      --focus-offset: 3px;
    }

    *{ box-sizing:border-box; margin:0; padding:0; }

    body{
      font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    a{ color: inherit; }

    a:hover{ text-decoration-thickness: 2px; }

    a:focus-visible{
      outline: var(--focus-outline);
      outline-offset: var(--focus-offset);
      border-radius: 10px;
    }

    /* Skip link (teclado) */
    .skip-link{
      position:absolute;
      left:12px;
      top:12px;
      padding:10px 12px;
      background:#FFFFFF;
      color:#000;
      border:2px solid var(--focus);
      border-radius:12px;
      z-index:9999;
      transform:translateY(-220%);
      transition:transform .2s ease;
      text-decoration:none;
      font-weight:800;
    }
    .skip-link:focus{ transform:translateY(0); }

    /* Container */
    .lc{ max-width:1200px; margin:0 auto; padding:24px 16px; }

    /* Banner (mais estreito) */
    .banner{
      border-radius:20px;
      overflow:hidden;
      margin-bottom:28px;
      box-shadow:0 4px 20px rgba(0,0,0,.12);
      background:#3B4A6B;
      position:relative;
      min-height:128px;
    }

    .banner svg{
      display:block;
      width:100%;
      height:140px; /* controla a altura (estreiteza) */
    }

    /* Título real em HTML (melhor para leitores de tela/SEO) */
    .banner-title{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:12px 16px;
      text-align:center;
      pointer-events:none; /* evita interceptar clique/seleção */
    }

    .banner-title h1{
      font-size:clamp(1.4rem, 2.2vw + 1rem, 2.4rem);
      font-weight:800;
      letter-spacing:-0.5px;
      color:#FFFFFF;
      text-shadow:0 2px 10px rgba(0,0,0,.25);
    }
    .banner-title h1 span{ color: var(--brand-yellow); }

    #barra {
      background: url(https://unico-storage.correios.com.br/custom/correios.svg) no-repeat top left #FFE600;
      height: 5vh;
      margin: 0 0 1rem;
      position: relative;
    }

    footer.teco_pagina {
      background: url(https://unico-storage.correios.com.br/univirtual/paginas/home/bg-amarelo.svg) no-repeat right bottom #ffe600;
      bottom: 0;
      display: flex;
      font-size: 1.1vw;
      margin: 1rem 0 0;
      padding: .5rem 4rem 2rem;
      position: relative;
      width: unset;
    }

    /* Intro */
    .intro{
      background:var(--card);
      border-radius:16px;
      padding:24px 28px;
      box-shadow:0 2px 14px rgba(0,0,0,.05);
      margin-bottom:28px;
      border-left:6px solid var(--brand-blue);
    }
    .intro p{
      font-size:0.95rem;
      color:var(--muted);
      line-height:1.75;
    }
    .intro strong{ color:var(--brand-blue); }

    /* Grid de cards em lista semântica */
    .fg{
      list-style:none;
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
      gap:22px;
      margin:0 0 32px 0;
      padding:0;
    }

    .fc{
      background:var(--card);
      border-radius:18px;
      box-shadow:0 2px 16px rgba(0,0,0,.06);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      position:relative;
      border:1px solid rgba(0,0,0,.04);
      transition:transform .25s ease, box-shadow .25s ease;
    }

    /* Hover e equivalência no foco via :focus-within */
    .fc:hover,
    .fc:focus-within{
      transform:translateY(-4px);
      box-shadow:0 10px 36px rgba(0,0,0,.12);
    }

    .fc-top{
      padding:22px 22px 14px;
      display:flex;
      align-items:flex-start;
      gap:16px;
    }

    .fc-icon{
      width:72px;
      height:72px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }

    .fc-icon svg{ width:56px; height:56px; }

    .fc-info{ flex:1; }

    .fc-tag{
      display:inline-block;
      padding:4px 10px;
      border-radius:8px;
      font-size:.75rem;
      font-weight:800;
      letter-spacing:.3px;
      margin-bottom:8px;
      border:1px solid rgba(0,0,0,.08);
    }

    .fc-info h2{
      font-size:1.05rem;
      font-weight:800;
      margin:0;
      line-height:1.35;
    }

    .fc-desc{
      padding:0 22px 18px;
      font-size:.92rem;
      color:var(--muted);
      line-height:1.65;
      flex-grow:1;
    }

    /* Botão/link: alvo grande + foco visível + não só cor */
    .fc-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:14px 22px;
      min-height:44px;
      font-size:.95rem;
      font-weight:900;
      text-decoration:none;
      text-align:center;
      border-radius:0 0 18px 18px;
      border-top:1px solid rgba(0,0,0,.06);
      transition:filter .2s ease;
    }

    .fc-btn:hover{ filter:brightness(1.08); text-decoration:underline; }

    /* Badge nova (sem animação para evitar desconforto) */
    .badge-new{
      position:absolute;
      top:12px;
      right:12px;
      background:#1E7F3C;
      color:#fff;
      padding:4px 10px;
      border-radius:10px;
      font-size:.75rem;
      font-weight:900;
      letter-spacing:.4px;
      border:1px solid rgba(0,0,0,.15);
    }

    /* Rodapé */
    footer.ft{
      text-align:center;
      padding:24px 16px;
      color:#707070;
      font-size:.9rem;
      border-top:2px solid var(--border);
      margin-top:8px;
      line-height:1.7;
      background:transparent;
    }
    footer.ft strong{ color:var(--brand-blue); }
    footer.ft em{ color:#606060; }

    /* Conteúdo apenas para leitores de tela */
    .sr-only{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    /* Responsivo */
    @media (max-width:768px){
      .fg{ grid-template-columns:1fr; }
      .banner svg{ height:120px; }
      .intro{ padding:20px; }
      .fc-top{ padding:20px 18px 12px; }
      .fc-desc{ padding:0 18px 16px; }
      .fc-btn{ padding:14px 18px; }
    }

    /* Respeita reduzir movimento */
    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
      .fc:hover, .fc:focus-within{ transform:none; }
    }