/* ============================================================
   Sinergias Holísticas — camada móvel
   Carregada DEPOIS dos estilos de cada página (ganha na cascata).
   Referência de teste: Redmi Note 8 Pro (393 x 851 CSS px, DPR 2.75)
   Nada aqui afeta o desktop: tudo vive dentro de media queries,
   exceto os elementos novos da "folha" (sheet), escondidos por defeito.
   ============================================================ */

/* Elementos novos — invisíveis fora do modo telemóvel */
.sheet-grip,
/*.sheet-close,*/
.sheet-backdrop{ display:none; }

/* Evita o "font boosting" do Chrome Android, que desalinha grelhas */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ============================================================
   1. TELEMÓVEL E TABLET PEQUENO  (<= 900px)
   ============================================================ */
@media (max-width:900px){

  /* ---- Legibilidade geral ---------------------------------
     O cinzento-lilás original era demasiado apagado num ecrã
     ao ar livre. Sobe o contraste e escurece o fundo estrelado. */
  :root{ --ink-dim:#C6C2D8; }

  /* Em ecrã vertical o fundo é ampliado e a marca de água ficava a
     competir com o texto. Véu mais denso + fundo fixo mais discreto. */
  .starfield{
    background-image:
      linear-gradient(180deg, rgba(5,6,11,0.86) 0%, rgba(5,6,11,0.91) 40%, rgba(5,6,11,0.965) 100%),
      url("../img/starfield.webp");
    /* enquadra uma zona só de estrelas: o logótipo e o texto do banner
       deixam de aparecer gigantes por trás do conteúdo */
    background-size:auto 170%;
    background-position:4% 12%;
  }
  .hero h1, .hero .lede, .hero-tagline,
  .page-head h1, .page-head p, .eyebrow{
    text-shadow:0 2px 12px rgba(5,6,11,.9);
  }
  .hero-emblem{ opacity:.94; }

  body{ font-size:1rem; line-height:1.62; }

  /* ---- Barra superior em duas linhas ----------------------
     Antes: marca + 5 pílulas + PT/EN espremidos em 393px. */
  /* barra quase opaca: com duas linhas, o conteúdo a passar por baixo
     tornava os botões difíceis de ler */
  .topbar{ background:rgba(9,11,20,0.97); }
  .topbar-inner{
    flex-wrap:wrap; row-gap:.5rem; gap:.5rem;
    padding:.55rem 0 .5rem;
  }
  html{ scroll-padding-top:120px; }
  .wordmark{ font-size:.92rem; order:1; min-height:40px; }
  .wordmark img{ width:28px; height:28px; }
  /* display:contents dissolve o contentor para que a navegação possa
     ocupar uma linha inteira e o PT/EN subir para junto da marca */
  .topbar-right{ display:contents; }
  .lang-switch{ order:2; }
  .pillnav{
    order:3; width:100%; flex:1 0 100%; min-width:0; gap:.4rem;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    padding:2px 0;
    /* esbatimento à direita: sinaliza que há mais botões para o lado */
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }
  .pillbtn{
    font-size:.8rem; padding:.5em .95em;
    min-height:40px; display:inline-flex; align-items:center;
  }
  .lang-switch{ flex:none; }
  .lang-switch button{ min-height:40px; min-width:42px; font-size:.74rem; }

  /* ---- Cabeçalho da página -------------------------------- */
  .page-head{ padding:1.7rem 0 1rem; }
  .page-head p{ font-size:.95rem; }
  .eyebrow{ font-size:.68rem; }
  .demo-note{ font-size:.75rem; line-height:1.55; }
  #procurar{ scroll-margin-top:112px; }

  /* ---- Grelha do calendário ------------------------------- */
  .cal-card{ padding:.9rem .8rem 1.1rem; }
  .cal-layout{ gap:1.1rem; margin-top:1.1rem; }
  .weekdays span{ font-size:.66rem; }
  .weekdays, .cal-grid{ gap:.3rem; }

  .day{
    font-size:.98rem; border-radius:10px;
    min-height:42px;                 /* alvo de toque confortável */
    -webkit-tap-highlight-color:rgba(203,161,53,.25);
  }
  .day:disabled{ opacity:1; color:var(--gold-soft); }
  .day.is-outside{ opacity:.2; }
  .day.has-events{ box-shadow:0 2px 10px rgba(193,96,46,.35); }
  .day .count{ font-size:.62rem; top:3px; right:4px; }

  .cal-nav button{ width:44px; height:44px; font-size:1.25rem; }
  .cal-month{ font-size:1.05rem; }
  .cal-hint{ font-size:.78rem; }

  /* ============================================================
     ---- A CORREÇÃO PRINCIPAL: painel do dia como folha inferior
     Antes, o painel ficava por baixo do calendário, fora do ecrã:
     tocar num dia parecia não fazer nada. Agora sobe do fundo,
     por cima de tudo, com fecho por X, por toque fora, por
     arrastar para baixo e pela tecla Esc.
     ============================================================ */
  /* main tem z-index:1 e criava um contexto de empilhamento que prendia
     a folha por baixo do fundo escurecido. Neutralizado no telemóvel. */
  main{ z-index:auto; }

  /* halos e emblemas decorativos transbordavam e criavam scroll lateral */
  main{ overflow-x:clip; }
  .hero-emblem{ width:min(250px,54vw); }

  .sheet-backdrop{
    display:block; position:fixed; inset:0; z-index:65;
    background:rgba(5,6,11,.74); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  body.sheet-open .sheet-backdrop{ opacity:1; pointer-events:auto; }

  .day-card{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; flex-direction:column;
    width:auto; max-width:none;
    max-height:78vh; max-height:78dvh;
    padding:.55rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    border:1px solid var(--panel-line); border-bottom:0;
    border-radius:22px 22px 0 0;
    background:#12162A;                       /* opaco: nada transparece */
    box-shadow:0 -18px 46px rgba(0,0,0,.7);
    transform:translateY(103%); visibility:hidden;
    transition:transform .3s cubic-bezier(.22,.7,.3,1), visibility .3s;
    touch-action:pan-y;
  }
  body.sheet-open .day-card{ transform:none; visibility:visible; }

  /* pega visual de arrastar */
  .sheet-grip{
    display:block; width:44px; height:4px; border-radius:99px;
    background:rgba(203,161,53,.45); margin:.15rem auto .75rem; flex:none;
  }

  /* botão X — o que faltava */
  .sheet-close{
    display:grid; place-items:center; position:absolute;
    top:.55rem; right:.7rem; width:42px; height:42px;
    border-radius:50%; border:1px solid var(--panel-line);
    background:rgba(255,255,255,.05); color:var(--gold-soft);
    font-size:1.5rem; line-height:1; cursor:pointer; padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .sheet-close:active{ background:rgba(203,161,53,.2); }

  .day-card h2{ font-size:1.05rem; padding-right:3.2rem; }
  .day-card .sub{ font-size:.7rem; }
  .day-list{
    margin-top:.85rem; overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; padding-right:.1rem;
  }

  /* ---- Itens de sessão em coluna única --------------------- */
  .session-item{
    grid-template-columns:1fr; gap:.18rem;
    padding:.85rem .9rem; border-radius:14px;
  }
  .session-item .hora{ font-size:.8rem; }
  .session-item .titulo{ font-size:1rem; line-height:1.35; }
  .session-item .meta{ grid-column:1; font-size:.84rem; line-height:1.45; }
  .session-item:active{ background:rgba(203,161,53,.12); }

  /* ---- Procura -------------------------------------------- */
  .search-card{ padding:1rem; }
  .chip{ font-size:.72rem; padding:.55em .95em; min-height:38px; display:inline-flex; align-items:center; }
  .search-row{ gap:.5rem; }
  .search-row input{ flex:1 1 100%; font-size:1rem; padding:.85em 1.1em; }  /* 16px evita zoom automático no foco */
  .search-row .btn{ flex:1 1 100%; }
  .result-count{ font-size:.78rem; }

  /* ---- Modais (detalhe da sessão / conta) ------------------ */
  .modal-backdrop{ z-index:100; padding:.8rem; align-items:flex-end; }
  .modal{
    max-height:88vh; max-height:88dvh;
    padding:1.3rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
    border-radius:20px; overscroll-behavior:contain;
  }
  .modal-close{
    top:.5rem; right:.5rem; width:42px; height:42px;
    display:grid; place-items:center; border-radius:50%;
    border:1px solid var(--panel-line); background:rgba(255,255,255,.05);
  }
  .modal h2{ font-size:1.15rem; padding-right:3rem; }
  .modal .desc{ font-size:.95rem; }
  .detail-row{ grid-template-columns:1fr; gap:.2rem; }
  .detail-row dt{ font-size:.66rem; }
  .modal-actions{ gap:.5rem; }
  .modal-actions .btn{ flex:1 1 100%; }
  .modal-note{ font-size:.8rem; }
  .links-row a{ font-size:.88rem; padding:.15em 0; }

  /* ---- Rodapé --------------------------------------------- */
  footer p, footer li{ font-size:.9rem; }
  footer ul{ gap:.7rem; }                 /* links mais fáceis de acertar */
  .foot-bottom{ font-size:.78rem; }

  /* ---- Páginas de área / índice --------------------------- */
  .kpi-grid{ grid-template-columns:1fr 1fr !important; }
  .btn{ font-size:.92rem; }
}

/* ============================================================
   2. ECRÃS ESTREITOS  (<= 480px — inclui o Redmi Note 8 Pro)
   ============================================================ */
@media (max-width:480px){
  .areas-grid{ grid-template-columns:1fr !important; }
  .partners-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .kpi-grid{ grid-template-columns:1fr !important; }
  .hero-ctas .btn{ flex:1 1 100%; }
  .day-card{ max-height:82vh; max-height:82dvh; }
}

/* ============================================================
   3. ECRÃ BAIXO EM PAISAGEM
   ============================================================ */
@media (max-width:900px) and (max-height:520px){
  .day-card{ max-height:92vh; max-height:92dvh; }
  .modal{ max-height:94vh; max-height:94dvh; }
}

/* ============================================================
   4. MENOS MOVIMENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .day-card, .sheet-backdrop{ transition:none !important; }
}