/*
  FERNANDO — Home / Design System do Manual do Usuário

  CDD / intenção:
  1. Este arquivo é a ÚNICA fonte de verdade visual da Home.
  2. Preservar o mesmo mapa espacial em desktop, MacBook e telefone horizontal.
  3. Manter hierarquia tipográfica clara e previsível.
  4. Evitar regras duplicadas e breakpoints que desmontem o layout.
  5. A frase principal deve permanecer em uma única linha; o JS complementa o CSS
     reduzindo a fonte apenas quando necessário.
*/

:root{
  --home-navy:#08294d;
  --home-navy-2:#0d3d73;
  --home-green:#6e8b7e;
  --home-green-soft:#dfe9e4;
  --home-terra:#b65a38;
  --home-terra-dark:#a54e32;
  --home-paper:#fbfaf7;
  --home-cream:#f5f3ef;
  --home-ink:#102f55;
  --home-body:#465d76;
  --home-line:#d4ddd8;
  --home-gray-chip:#e9eeec;
  --home-shadow:0 14px 30px rgba(8,41,77,.12);
}

body.home-view{
  margin:0;
  overflow:hidden;
  color:var(--home-ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(110,139,126,.13), transparent 24%),
    radial-gradient(circle at 7% 92%, rgba(182,90,56,.08), transparent 25%),
    var(--home-cream);
}

body.home-view .shell-app{
  max-width:1500px;
  min-height:100dvh;
  margin:0 auto;
  padding:8px 14px;
}

.manual-home,
.manual-home *{
  font-family:"Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.manual-home{
  height:calc(100dvh - 16px);
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:9px;
  overflow:hidden;
}

/* -------------------------------------------------------------------------
   TOPO INSTITUCIONAL
   ------------------------------------------------------------------------- */
.manual-home-top{
  position:relative;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 18px;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(90deg,var(--home-navy) 0%,#0d4684 62%,#b9c4d0 100%);
  box-shadow:0 13px 28px rgba(8,41,77,.19);
}

.manual-top-wave{
  position:absolute;
  right:-90px;
  bottom:-82px;
  width:40%;
  min-width:300px;
  height:170px;
  border-radius:64% 0 0 0 / 100% 0 0 0;
  background:linear-gradient(180deg,rgba(236,240,244,.72),rgba(195,204,215,.92));
  pointer-events:none;
}

.manual-institutional-logo-shell{
  position:relative;
  z-index:1;
  width:min(430px,30vw);
  aspect-ratio:2030 / 650;
  flex:0 1 auto;
  overflow:hidden;
  border-radius:21px;
  border:1px solid rgba(255,255,255,.18);
  background:#0e6ca9;
  box-shadow:0 8px 19px rgba(0,0,0,.16);
}
.manual-institutional-logo-shell::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  pointer-events:none;
}
.manual-institutional-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.manual-profile-pill{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:6px 12px;
  color:var(--home-navy);
  background:rgba(251,250,247,.96);
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  box-shadow:0 8px 19px rgba(0,0,0,.14);
}
.manual-profile-avatar{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  flex:0 0 32px;
  border-radius:50%;
  color:#fff;
  background:var(--home-terra);
  font-size:.84rem;
  font-weight:800;
}
.manual-profile-copy{display:grid;line-height:1.08;text-align:left}
.manual-profile-copy strong{font-size:.86rem;color:var(--home-navy)}
.manual-profile-copy small{font-size:.68rem;color:#687689}

/* -------------------------------------------------------------------------
   ESTRUTURA PRINCIPAL
   desktop: Fernando à esquerda / Equipe e Construção empilhadas à direita.
   ------------------------------------------------------------------------- */
.manual-home-grid{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.47fr) minmax(315px,.73fr);
  gap:10px;
  align-items:start;
}

.manual-home-side{
  min-width:0;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  gap:10px;
  align-content:start;
}
.manual-team-card{order:1}
.manual-build-card{order:2}

/* -------------------------------------------------------------------------
   JANELA FERNANDO
   ------------------------------------------------------------------------- */
.manual-home-hero,
.manual-info-card{
  color:var(--home-ink);
  background:var(--home-paper);
  border:1px solid rgba(8,41,77,.09);
  box-shadow:var(--home-shadow);
}

.manual-home-hero{
  container-type:inline-size;
  position:relative;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  padding:18px 20px;
  overflow:hidden;
  isolation:isolate;
  border-radius:26px;
}

/* arte sutil inspirada na capa: curvas e linhas, sem poluir o conteúdo */
.manual-home-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-145px;
  top:-120px;
  width:390px;
  height:310px;
  border:34px solid rgba(13,61,115,.055);
  border-radius:50%;
  transform:rotate(-18deg);
}
.manual-home-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-115px;
  bottom:-110px;
  width:270px;
  height:220px;
  border:24px solid rgba(182,90,56,.07);
  border-radius:50%;
  transform:rotate(24deg);
}

/* Nível 1: marca FERNANDO */
.manual-fernando-lockup{
  display:flex;
  align-items:center;
  gap:14px;
  width:min(590px,88%);
  max-width:100%;
}
.manual-fernando-mark{
  width:66px;
  height:66px;
  flex:0 0 66px;
  display:grid;
  place-items:center;
}
.manual-fernando-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.manual-fernando-word{
  min-width:0;
  color:var(--home-navy);
  font-size:clamp(2.55rem,7.3cqw,4.7rem);
  line-height:.94;
  letter-spacing:.01em;
  font-weight:800;
}

/* Nível 4: dois selos de apoio — mesmo formato e mesma cor */
.manual-home-meta-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.manual-home-kicker,
.manual-home-support-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border:1px solid rgba(8,41,77,.08);
  border-radius:999px;
  color:var(--home-navy);
  background:var(--home-gray-chip);
  box-shadow:0 3px 9px rgba(8,41,77,.05);
  font-size:clamp(.72rem,1.05cqw,.84rem);
  line-height:1.18;
  font-weight:800;
}

/* Nível 2: chamada — JS garante que nunca quebre a linha */
.manual-home-lead{
  width:100%;
  max-width:100%;
  margin:1px 0 0;
  overflow:hidden;
  white-space:nowrap;
  color:var(--home-navy);
  font-size:clamp(1.15rem,5.8cqw,3.45rem);
  line-height:.98;
  letter-spacing:-.025em;
  font-weight:800;
}
.manual-home-lead::after{
  content:"";
  display:block;
  width:min(175px,32%);
  height:4px;
  margin-top:7px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--home-green),rgba(110,139,126,.05));
}

/* Nível 4: descrição principal */
.manual-home-description{
  max-width:76ch;
  margin:0;
  color:var(--home-body);
  font-size:clamp(.88rem,1.35cqw,1rem);
  line-height:1.5;
}
.manual-home-description-strong{
  color:#203f62;
  font-weight:700;
}
.manual-home-tribute,
.manual-build-card .compact-info-summary{
  padding:7px 0 7px 12px;
  border-left:4px solid var(--home-terra);
  border-radius:0 11px 11px 0;
  background:linear-gradient(90deg,rgba(182,90,56,.075),transparent 78%);
}

/* -------------------------------------------------------------------------
   BOTÕES PRINCIPAIS
   ------------------------------------------------------------------------- */
.manual-home-actions{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.91fr) minmax(0,.91fr);
  gap:8px;
  margin-top:0;
}
.manual-home-actions-secondary{display:contents}
.manual-main-btn{
  min-width:0;
  min-height:66px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:0;
  border-radius:19px;
  color:#fff;
  text-align:left;
  box-shadow:0 7px 17px rgba(8,41,77,.11);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.manual-main-btn:hover,
.manual-main-btn:focus-visible,
.manual-main-btn.is-beating{
  transform:translateY(-2px);
  filter:brightness(1.025);
  box-shadow:0 12px 23px rgba(8,41,77,.16);
}
.manual-main-btn-primary{background:linear-gradient(180deg,#124a80,var(--home-navy))}
.manual-main-btn-secondary{background:linear-gradient(180deg,#84a998,var(--home-green))}
.manual-main-btn-tertiary{background:linear-gradient(180deg,#c66945,var(--home-terra))}
.manual-main-btn-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
}
.manual-main-btn-icon svg{width:25px;height:25px;display:block}
.manual-main-btn-primary .manual-main-btn-icon{color:var(--home-navy)}
.manual-main-btn-secondary .manual-main-btn-icon{color:var(--home-green)}
.manual-main-btn-tertiary .manual-main-btn-icon{color:var(--home-terra)}
.manual-main-btn-copy{min-width:0;display:grid;gap:2px}
.manual-btn-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:nowrap;
  white-space:nowrap;
  font-size:.91rem;
  line-height:1.1;
  font-weight:800;
}
.manual-main-btn-copy small{
  font-size:.66rem;
  line-height:1.22;
  font-weight:700;
  opacity:.94;
}

/* ECG decorativo do hover: espaço reservado, sem mudar a altura do botão */
.btn-heartbeat{
  width:78px;
  min-width:78px;
  height:14px;
  flex:0 0 78px;
  display:inline-flex;
  align-items:center;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
.btn-heartbeat svg{width:78px;height:14px;display:block}
.btn-heartbeat svg path{
  opacity:0;
  stroke-dasharray:0 240;
  stroke-dashoffset:0;
  animation:none;
}
.manual-main-btn:hover .btn-heartbeat,
.manual-main-btn:focus-visible .btn-heartbeat,
.manual-main-btn.is-beating .btn-heartbeat{opacity:.95}
.manual-main-btn:hover .btn-heartbeat svg path,
.manual-main-btn:focus-visible .btn-heartbeat svg path,
.manual-main-btn.is-beating .btn-heartbeat svg path{animation:homeHeartbeat 1.45s linear infinite}
.manual-main-btn:not(:hover):not(:focus-visible):not(.is-beating) .btn-heartbeat svg path{
  opacity:0 !important;
  animation:none !important;
  stroke-dasharray:0 240 !important;
  stroke-dashoffset:0 !important;
}
@keyframes homeHeartbeat{
  0%{opacity:0;stroke-dasharray:0 240;stroke-dashoffset:0}
  10%{opacity:.9;stroke-dasharray:38 240;stroke-dashoffset:0}
  28%{opacity:1;stroke-dasharray:64 240;stroke-dashoffset:-22}
  46%{opacity:.64;stroke-dasharray:32 240;stroke-dashoffset:-53}
  60%{opacity:.95;stroke-dasharray:52 240;stroke-dashoffset:-68}
  78%{opacity:1;stroke-dasharray:70 240;stroke-dashoffset:-95}
  100%{opacity:0;stroke-dasharray:0 240;stroke-dashoffset:-148}
}

/* -------------------------------------------------------------------------
   CARDS DA DIREITA
   ------------------------------------------------------------------------- */
.manual-info-card{
  min-width:0;
  height:auto;
  display:grid;
  align-content:start;
  gap:10px;
  padding:13px 14px;
  border-radius:22px;
}
.manual-card-title-row{display:flex;align-items:center;gap:9px}
.manual-card-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:var(--home-navy);
}
.manual-card-icon-terra{background:var(--home-terra)}
.manual-card-icon svg{width:23px;height:23px}
.manual-section-chip{
  display:block;
  color:var(--home-green);
  font-size:.84rem;
  line-height:1.05;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.065em;
}
.manual-section-chip-terra{color:var(--home-terra)}
.manual-card-title-row h2{
  margin:2px 0 0;
  color:var(--home-navy);
  font-size:1.06rem;
  line-height:1.08;
}
.manual-people-columns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.manual-people-group{
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--home-line);
  border-radius:13px;
  background:#fff;
}
.manual-group-label{
  display:block;
  margin-bottom:4px;
  color:var(--home-green);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.manual-people-group ul{
  margin:0;
  padding-left:15px;
  display:grid;
  gap:2px;
  color:var(--home-body);
  font-size:.8rem;
  line-height:1.34;
}
.compact-info-summary{
  margin:0;
  color:var(--home-body);
  font-size:.86rem;
  line-height:1.42;
}
.compact-info-points{display:flex;flex-wrap:wrap;gap:5px}
.compact-info-points span{
  padding:4px 7px;
  border-radius:999px;
  color:#49695d;
  background:var(--home-green-soft);
  font-size:.69rem;
  line-height:1.15;
  font-weight:700;
}
.mini-info-btn{
  justify-self:start;
  min-height:31px;
  padding:5px 10px;
  border:0;
  border-radius:11px;
  color:#fff;
  background:var(--home-navy);
  box-shadow:none;
  font-size:.68rem;
  font-weight:800;
}

/* -------------------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------------------- */
.manual-home-footer{
  min-height:23px;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:3px 15px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--home-navy);
  background:rgba(251,250,247,.88);
  border:1px solid rgba(8,41,77,.08);
  border-radius:999px;
  box-shadow:0 4px 12px rgba(8,41,77,.05);
  font-size:.68rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.045em;
  text-align:center;
}
.manual-home-footer span{color:var(--home-terra);font-size:.8rem}

/* -------------------------------------------------------------------------
   MODAL "COMO FOI CONSTRUÍDO"
   ------------------------------------------------------------------------- */
.build-info-modal-card{
  width:min(850px,95vw);
  max-height:min(86dvh,760px);
  overflow:auto;
  padding:22px;
  color:var(--home-ink);
  background:var(--home-paper);
  border:1px solid rgba(8,41,77,.12);
}
.build-info-modal-card h2{margin:0;color:var(--home-navy);font-size:1.45rem}
.build-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.build-info-grid article{padding:14px;border-radius:17px;background:#fff;border:1px solid var(--home-line)}
.build-info-grid h3{margin:0 0 7px;color:var(--home-navy);font-size:.96rem}
.build-info-grid p{margin:0;color:var(--home-body);font-size:.86rem;line-height:1.55}
.build-info-close{background:var(--home-terra)}

/* -------------------------------------------------------------------------
   MACBOOK / NOTEBOOK BAIXO
   Mantém a composição, reduzindo espaços antes de reduzir textos.
   ------------------------------------------------------------------------- */
@media (min-width:1001px) and (max-height:860px){
  body.home-view .shell-app{padding:6px 11px}
  .manual-home{height:calc(100dvh - 12px);gap:7px}
  .manual-home-top{min-height:69px;padding:7px 13px;border-radius:21px}
  .manual-institutional-logo-shell{width:min(330px,27vw);border-radius:16px}
  .manual-profile-pill{min-height:40px;padding:5px 9px}
  .manual-profile-avatar{width:29px;height:29px;flex-basis:29px}
  .manual-home-grid{grid-template-columns:minmax(0,1.42fr) minmax(285px,.74fr);gap:8px}
  .manual-home-hero{padding:12px 16px;gap:6px;border-radius:21px}
  .manual-fernando-lockup{width:min(490px,80%);gap:11px}
  .manual-fernando-mark{width:53px;height:53px;flex-basis:53px}
  .manual-fernando-word{font-size:clamp(2rem,6.8cqw,3.7rem)}
  .manual-home-kicker,.manual-home-support-badge{font-size:clamp(.64rem,.9cqw,.74rem);padding:4px 8px}
  .manual-home-lead{font-size:clamp(.95rem,5.5cqw,2.65rem)}
  .manual-home-lead::after{height:3px;margin-top:5px}
  .manual-home-description{font-size:clamp(.74rem,1.08cqw,.84rem);line-height:1.36}
  .manual-home-tribute{padding:5px 0 5px 9px;border-left-width:3px}
  .manual-home-actions{gap:6px}
  .manual-main-btn{min-height:52px;padding:7px 9px;border-radius:16px;gap:7px}
  .manual-main-btn-icon{width:31px;height:31px;flex-basis:31px}
  .manual-main-btn-icon svg{width:20px;height:20px}
  .manual-btn-title{font-size:.73rem}
  .manual-main-btn-copy small{font-size:.55rem;line-height:1.16}
  .btn-heartbeat{width:53px;min-width:53px;flex-basis:53px;height:11px}
  .btn-heartbeat svg{width:53px;height:11px}
  .manual-home-side{gap:7px}
  .manual-info-card{padding:9px 10px;gap:6px;border-radius:17px}
  .manual-card-icon{width:31px;height:31px;flex-basis:31px;border-radius:9px}
  .manual-card-icon svg{width:20px;height:20px}
  .manual-section-chip{font-size:.64rem}
  .manual-card-title-row h2{font-size:.82rem}
  .manual-people-group{padding:6px 7px;border-radius:10px}
  .manual-group-label{font-size:.62rem;margin-bottom:2px}
  .manual-people-group ul{font-size:.65rem;line-height:1.22;padding-left:12px}
  .compact-info-summary{font-size:.67rem;line-height:1.28}
  .manual-build-card .compact-info-summary{padding:5px 6px 5px 8px;border-left-width:3px}
  .compact-info-points{gap:3px}
  .compact-info-points span{font-size:.58rem;padding:3px 5px}
  .mini-info-btn{min-height:27px;padding:4px 8px;font-size:.57rem}
  .manual-home-footer{min-height:19px;padding:2px 11px 3px;font-size:.57rem;gap:6px}
}

/* -------------------------------------------------------------------------
   TELEFONE EM PAISAGEM
   Preserva o mapa espacial do desktop em miniatura: esquerda + direita empilhada.
   ------------------------------------------------------------------------- */
@media (orientation:landscape) and (max-width:1000px) and (max-height:620px){
  body.home-view{overflow:auto}
  body.home-view .shell-app{
    min-width:740px;
    min-height:100dvh;
    padding:6px 8px calc(7px + env(safe-area-inset-bottom,0px));
  }
  .manual-home{
    width:100%;
    min-height:calc(100dvh - 12px);
    height:auto;
    gap:6px;
    overflow:visible;
  }
  .manual-home-top{min-height:57px;padding:6px 9px;border-radius:17px;gap:8px}
  .manual-top-wave{min-width:210px;height:115px;right:-55px;bottom:-58px}
  .manual-institutional-logo-shell{width:min(270px,34vw);border-radius:13px}
  .manual-profile-pill{min-height:37px;padding:4px 7px}
  .manual-profile-avatar{width:27px;height:27px;flex-basis:27px;font-size:.7rem}
  .manual-profile-copy strong{font-size:.73rem}
  .manual-profile-copy small{display:none}

  .manual-home-grid{
    grid-template-columns:minmax(0,1.42fr) minmax(220px,.72fr);
    gap:6px;
  }
  .manual-home-side{grid-template-columns:1fr;grid-template-rows:auto auto;gap:6px}
  .manual-home-hero{padding:10px 11px;gap:5px;border-radius:17px}
  .manual-fernando-lockup{width:min(380px,80%);gap:8px}
  .manual-fernando-mark{width:45px;height:45px;flex-basis:45px}
  .manual-fernando-word{font-size:clamp(1.55rem,6.7cqw,2.45rem)}
  .manual-home-meta-row{gap:4px}
  .manual-home-kicker,.manual-home-support-badge{font-size:clamp(.54rem,.86cqw,.64rem);padding:3px 6px}
  .manual-home-lead{font-size:clamp(.78rem,5.35cqw,1.9rem)}
  .manual-home-lead::after{height:3px;margin-top:4px}
  .manual-home-description{font-size:clamp(.64rem,1.02cqw,.73rem);line-height:1.3}
  .manual-home-tribute{padding:4px 0 4px 7px;border-left-width:3px}

  .manual-home-actions{grid-template-columns:minmax(0,1.18fr) minmax(0,.91fr) minmax(0,.91fr);gap:5px}
  .manual-home-actions-secondary{display:contents}
  .manual-main-btn{min-height:47px;padding:6px 7px;border-radius:14px;gap:5px}
  .manual-main-btn-icon{width:27px;height:27px;flex-basis:27px}
  .manual-main-btn-icon svg{width:18px;height:18px}
  .manual-btn-title{font-size:.64rem;gap:3px}
  .manual-main-btn-copy small{font-size:.48rem;line-height:1.1}
  .btn-heartbeat{width:38px;min-width:38px;flex-basis:38px;height:10px}
  .btn-heartbeat svg{width:38px;height:10px}

  .manual-info-card{padding:7px 8px;gap:5px;border-radius:15px}
  .manual-card-title-row{gap:6px}
  .manual-card-icon{width:27px;height:27px;flex-basis:27px;border-radius:8px}
  .manual-card-icon svg{width:18px;height:18px}
  .manual-section-chip{font-size:.56rem}
  .manual-card-title-row h2{font-size:.72rem;margin-top:1px}
  .manual-people-columns{gap:4px}
  .manual-people-group{padding:5px 6px;border-radius:8px}
  .manual-group-label{font-size:.53rem;margin-bottom:1px}
  .manual-people-group ul{font-size:.55rem;line-height:1.18;padding-left:10px;gap:0}
  .compact-info-summary{font-size:.58rem;line-height:1.23}
  .manual-build-card .compact-info-summary{padding:4px 5px 4px 7px;border-left-width:3px}
  .compact-info-points{gap:3px}
  .compact-info-points span{font-size:.5rem;padding:3px 4px}
  .mini-info-btn{min-height:24px;padding:3px 7px;font-size:.5rem}
  .manual-home-footer{display:none}
}

/* retrato: o usuário vê a tela de orientação, não uma Home comprimida */
@media (max-width:960px) and (orientation:portrait){
  .manual-home-grid{grid-template-columns:1fr}
  .manual-home-side{grid-template-columns:1fr}
  .manual-home-actions{grid-template-columns:1fr}
  .manual-home-actions-secondary{display:grid;grid-template-columns:1fr}
  .manual-people-columns{grid-template-columns:1fr}
  .build-info-grid{grid-template-columns:1fr}
}

/* Tema da tela "Gire o telefone" */
body.home-view #orientationGate{
  font-family:"Open Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media (max-width:960px) and (orientation:portrait) and (hover:none) and (pointer:coarse){
  body.home-view #orientationGate{
    background:
      radial-gradient(circle at 8% 8%,rgba(60,134,205,.24),transparent 31%),
      radial-gradient(circle at 92% 92%,rgba(182,90,56,.16),transparent 29%),
      linear-gradient(155deg,var(--home-navy) 0%,var(--home-navy-2) 58%,#172739 100%);
  }
  body.home-view .orientation-card{
    width:min(430px,100%);
    padding:29px 23px;
    border-radius:26px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 20px 44px rgba(0,0,0,.27);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  body.home-view .orientation-phone{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    border-radius:20px;
    color:#fff;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
  }
  body.home-view .orientation-card h2{color:#fff;font-size:1.55rem}
  body.home-view .orientation-card p{color:#dce8f5;font-size:.96rem}
}

@media (prefers-reduced-motion:reduce){
  .manual-main-btn,.btn-heartbeat{transition:none}
  .manual-main-btn:hover .btn-heartbeat svg path,
  .manual-main-btn:focus-visible .btn-heartbeat svg path,
  .manual-main-btn.is-beating .btn-heartbeat svg path{
    animation:none;
    opacity:1;
    stroke-dasharray:none;
  }
}


/* ========================================================================
   Alpha 0.0.9 · v44 — polimento da HOME
   foco: aproveitar melhor a altura, aumentar hierarquia tipográfica e
   aproximar o fundo da janela FERNANDO da linguagem da capa do manual.
   ======================================================================== */

/* usar melhor a área vertical central */
.manual-home-grid{
  align-items:stretch;
}
.manual-home-hero{
  justify-content:space-between;
  padding:20px 22px;
  background:
    linear-gradient(180deg, rgba(252,251,248,.98) 0%, rgba(247,248,249,.98) 100%),
    radial-gradient(circle at 82% 20%, rgba(13,61,115,.085), transparent 30%),
    radial-gradient(circle at 16% 86%, rgba(182,90,56,.06), transparent 26%),
    linear-gradient(135deg, rgba(8,41,77,.02), rgba(13,61,115,.045) 52%, rgba(182,90,56,.03) 100%);
}
.manual-home-hero::before{
  right:-120px;
  top:-88px;
  width:400px;
  height:285px;
  border:40px solid rgba(13,61,115,.07);
  border-radius:50%;
  transform:rotate(-16deg);
}
.manual-home-hero::after{
  left:-108px;
  bottom:-100px;
  width:265px;
  height:205px;
  border:28px solid rgba(182,90,56,.085);
  border-radius:50%;
  transform:rotate(22deg);
}

/* hierarquia: FERNANDO é o título máximo */
.manual-fernando-lockup{
  width:min(640px, 92%);
  gap:16px;
}
.manual-fernando-mark{
  width:74px;
  height:74px;
  flex-basis:74px;
}
.manual-fernando-word{
  font-size:clamp(3rem, 8.8cqw, 5.8rem);
  letter-spacing:.014em;
}

/* a chamada pode crescer, mas sempre cabe na mesma linha */
.manual-home-lead{
  font-size:clamp(1.35rem, 6.35cqw, 4.05rem);
  line-height:.96;
}
.manual-home-lead::after{
  width:min(210px, 34%);
  height:5px;
  margin-top:8px;
}

/* textos de apoio um pouco maiores para usar melhor o espaço disponível */
.manual-home-description{
  font-size:clamp(.96rem, 1.5cqw, 1.12rem);
  line-height:1.52;
}
.manual-home-tribute,
.manual-build-card .compact-info-summary{
  padding:9px 0 9px 13px;
}
.manual-main-btn{
  min-height:72px;
}
.manual-btn-title{
  font-size:.95rem;
}
.manual-main-btn-copy small{
  font-size:.69rem;
}

/* MacBook / notebook: mantém a composição e só reduz suavemente */
@media (min-width:1001px) and (max-height:860px){
  .manual-home-hero{
    padding:16px 18px;
  }
  .manual-fernando-lockup{
    width:min(560px, 86%);
    gap:13px;
  }
  .manual-fernando-mark{
    width:62px;
    height:62px;
    flex-basis:62px;
  }
  .manual-fernando-word{
    font-size:clamp(2.4rem, 8.2cqw, 4.5rem);
  }
  .manual-home-lead{
    font-size:clamp(1.08rem, 6.0cqw, 3.3rem);
  }
  .manual-home-description{
    font-size:clamp(.8rem, 1.15cqw, .92rem);
  }
}

/* Telefone horizontal: preserva layout do desktop, porém com ganho de escala */
@media (orientation:landscape) and (max-width:1000px) and (max-height:620px){
  .manual-home-grid{
    align-items:stretch;
  }
  .manual-home-hero{
    justify-content:space-between;
    padding:11px 12px;
  }
  .manual-fernando-lockup{
    width:min(410px, 88%);
    gap:9px;
  }
  .manual-fernando-mark{
    width:48px;
    height:48px;
    flex-basis:48px;
  }
  .manual-fernando-word{
    font-size:clamp(1.7rem, 7.2cqw, 2.55rem);
  }
  .manual-home-lead{
    font-size:clamp(.92rem, 5.95cqw, 2.2rem);
  }
  .manual-home-description{
    font-size:clamp(.68rem, 1.06cqw, .78rem);
  }
}