/* ---------- Scandinavian token system: warm off-white, one soft wood tone, one muted accent ---------- */
:root{
  --bg:#F7F5EF; --surface:#FFFFFF; --wood:#C9A876; --ink:#2B2A28;
  --ink-soft:rgba(43,42,40,0.62); --accent:#4C6B72; --line:rgba(43,42,40,0.12);
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{height:-webkit-fill-available;}
body{font-family:'Inter', sans-serif; background:var(--ink); color:var(--ink); overflow:hidden; height:100vh; height:-webkit-fill-available;}

/* ---------- KriolHub logo mark — small, corner of every nav ---------- */
.cv-flag{flex-shrink:0; display:block; border-radius:4px; overflow:hidden; object-fit:contain;}

/* ---------- Cover / homepage: full-bleed background video ("movement") ---------- */
#coverScreen{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; overflow:hidden; transition:opacity 0.8s ease, visibility 0.8s;}
#coverScreen.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.cover-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cover-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(200deg, rgba(43,42,40,0.2), rgba(43,42,40,0.72));}
.cover-content{position:relative; z-index:2; color:#fff; padding:0 6vw calc(8vh + env(safe-area-inset-bottom)); max-width:900px;}
.cover-content .eyebrow{font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--wood); display:block; margin-bottom:16px;}
.cover-content h1{font-size:clamp(2.1rem, 6vw, 4.2rem); font-weight:600; line-height:1.05; margin-bottom:20px;}
.cover-content p{font-size:1rem; color:rgba(255,255,255,0.82); max-width:46ch; margin-bottom:30px;}
.enter-btn{background:#fff; color:var(--ink); border:none; padding:14px 28px; border-radius:2px; font-weight:600; font-size:0.95rem; cursor:pointer; font-family:inherit;}
.enter-btn:hover{background:var(--wood);}

/* ---------- Nav — z-index raised above the cover (200) so the bar + hamburger show on the
   homepage too, at the same position as on every other page, not hidden underneath it ---------- */
.toc{position:fixed; top:0; left:0; right:0; z-index:210; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px max(22px, env(safe-area-inset-left)) 16px max(22px, env(safe-area-inset-right)); background:linear-gradient(180deg, var(--ink) 0%, transparent 100%);}
/* toc-left is now a single button wrapping both the icon and the wordmark, so clicking
   either one returns home — previously only the text was clickable */
.toc-left{display:flex; align-items:center; gap:12px; flex-shrink:0; background:none; border:none; padding:0; cursor:pointer;}
.home-link{color:#fff; font-size:0.92rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; line-height:1;}
.tab-group{display:flex; gap:2px;}
.tab-group.desktop-only{display:flex;}
.toc button.tab{font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase; background:none; border:none; color:rgba(255,255,255,0.55); padding:8px 12px; cursor:pointer; border-bottom:1px solid transparent; white-space:nowrap; font-family:inherit;}
.toc button.tab.active{color:#fff; border-color:var(--wood);}
.toc button.tab:hover{color:#fff;}
.hamburger{display:none; background:none; border:none; color:#fff; font-size:1.3rem; padding:4px 6px;}
/* Both raised above the cover's z-index (200) as well, for the same reason as .toc */
.mobile-menu{position:fixed; top:0; right:0; bottom:0; width:min(78vw,300px); background:var(--ink); transform:translateX(100%); transition:transform 0.3s ease; z-index:230; padding:calc(80px + env(safe-area-inset-top)) 26px 26px;}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu button{display:block; width:100%; text-align:left; background:none; border:none; color:rgba(255,255,255,0.7); font-size:1rem; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.1); font-family:inherit;}
.mobile-menu button.active{color:#fff;}
.menu-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:220; display:none;}
.menu-backdrop.show{display:block;}

.book-stage{perspective:2400px; width:100%; height:100vh; height:-webkit-fill-available; position:relative; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.6s ease 0.2s;}
.book-stage.visible{opacity:1;}

/* ---------- .page is now a flex column: a scrollable content area + a footer index row
   that never overlaps content, fixing the page-index-over-thumbnail bug ---------- */
.page{
  position:absolute; width:min(860px, 90vw); height:min(620px, 82vh); background:var(--surface);
  box-shadow:0 24px 60px rgba(0,0,0,0.35); border-radius:2px; overflow:hidden;
  transform-style:preserve-3d; backface-visibility:hidden;
  transition:transform 0.85s cubic-bezier(.4,0,.2,1), opacity 0.5s ease; transform-origin:left center;
  display:flex; flex-direction:column;
}
.page.state-current{transform:rotateY(0deg); opacity:1; z-index:5; pointer-events:auto;}
.page.state-next{transform:rotateY(-140deg); opacity:0; z-index:1; pointer-events:none;}
.page.state-prev{transform:rotateY(140deg); opacity:0; z-index:1; pointer-events:none;}
.page-scroll{flex:1; overflow-y:auto; padding:56px clamp(24px, 6vw, 64px) 8px;}
.page-index{
  flex-shrink:0; padding:12px clamp(24px, 6vw, 64px) 16px; text-align:right;
  font-size:0.76rem; color:var(--ink-soft); border-top:1px solid var(--line);
}

.eyebrow{font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;}
.page h2{font-size:clamp(1.5rem, 4vw, 2rem); font-weight:600; margin:0 0 6px;}
.rule{width:36px; height:3px; background:var(--wood); border:none; margin:16px 0 20px;}
.page p{font-size:0.98rem; color:var(--ink-soft); max-width:56ch; margin-bottom:14px;}

.fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:20px; border-top:1px solid var(--line);}
.fact-grid div{padding:14px 0; border-bottom:1px solid var(--line); font-size:0.9rem;}
.fact-grid div b{display:block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}

/* ---------- Sobre: Parceiros — same visual language as the media thumbnails, but logo/name placeholders ---------- */
.partners-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:18px;}
.partner-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;}
.partner-logo{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.92rem;}
.partner-item span{font-size:0.74rem; color:var(--ink-soft); line-height:1.3;}

/* ---------- Visita Virtual: 3 video tiles, click to play in a lightbox ---------- */
.video-tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:20px;}
.video-tile{aspect-ratio:4/3; border-radius:4px; position:relative; cursor:pointer; overflow:hidden; background:linear-gradient(160deg, var(--wood), var(--accent)); border:none; padding:0; display:flex; align-items:flex-end; font-family:inherit;}
.video-tile:hover .play-ring{background:#fff; color:var(--ink);}
.tile-label{position:relative; z-index:2; color:#fff; font-size:0.82rem; font-weight:600; padding:12px; text-align:left;}
.play-ring{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; transition:background 0.2s ease, color 0.2s ease;}

.video-lightbox{position:fixed; inset:0; z-index:300; background:rgba(20,19,17,0.92); display:none; align-items:center; justify-content:center; padding:24px;}
.video-lightbox.show{display:flex;}
.video-lightbox video{width:100%; max-width:900px; max-height:80vh; border-radius:4px; background:#000;}
.lightbox-close{position:absolute; top:calc(20px + env(safe-area-inset-top)); right:calc(20px + env(safe-area-inset-right)); background:rgba(255,255,255,0.12); color:#fff; border:none; width:40px; height:40px; border-radius:50%; font-size:1.2rem; cursor:pointer;}
.custom-video-wrap{position:relative; width:100%; max-width:900px;}
.lightbox-playpause{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,0.45); color:#fff; border:2px solid rgba(255,255,255,0.7); font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;}
.lightbox-playpause:hover{background:var(--accent); border-color:var(--accent);}

/* ---------- Vídeos e Fotos: 2 inner sub-tabs (Diário de Obra / Plano Final), reusing the
   same rotateY flip mechanic as the main book, at a smaller nested scale ---------- */
.subtab-nav{display:flex; gap:22px; margin-bottom:18px; border-bottom:1px solid var(--line);}
.subtab{background:none; border:none; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); padding:8px 2px; border-bottom:2px solid transparent; cursor:pointer; font-family:inherit;}
.subtab.active{color:var(--ink); border-color:var(--wood);}
.subtab-stage{perspective:1600px; position:relative; min-height:460px;}
.subpage{position:absolute; inset:0; transform-style:preserve-3d; backface-visibility:hidden; transition:transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.4s ease; transform-origin:left center;}
.subpage.substate-current{transform:rotateY(0deg); opacity:1; z-index:5; pointer-events:auto;}
.subpage.substate-next{transform:rotateY(-140deg); opacity:0; z-index:1; pointer-events:none;}
.subpage.substate-prev{transform:rotateY(140deg); opacity:0; z-index:1; pointer-events:none;}

.media-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.media-item{background:none; border:none; padding:0; text-align:left; font-family:inherit; cursor:pointer; display:flex; flex-direction:column; gap:6px;}
.media-thumb{aspect-ratio:4/3; border-radius:4px; background:linear-gradient(160deg, var(--wood), var(--accent)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.media-item:hover .play-ring{background:#fff; color:var(--ink);}
.media-date{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); font-weight:600;}
.media-title{font-size:0.86rem; font-weight:600; color:var(--ink); line-height:1.3;}

table.units{width:100%; border-collapse:collapse; margin-top:18px; font-size:0.85rem;}
table.units th, table.units td{text-align:left; padding:10px 6px; border-bottom:1px solid var(--line);}
table.units th{font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); font-weight:600;}
.status{font-size:0.72rem; padding:2px 9px; border-radius:10px; white-space:nowrap;}
.status.free{background:#E7EEE7; color:#3E6B4A;}
.status.taken{background:#F1E4DC; color:var(--accent);}

form{display:flex; flex-direction:column; gap:12px; max-width:400px; margin-top:18px;}
input, textarea{padding:12px; border:1px solid var(--line); border-radius:2px; font-family:inherit; font-size:1rem; background:var(--bg);}
.send-btn{background:var(--ink); color:#fff; border:none; padding:12px 20px; border-radius:2px; font-weight:600; cursor:pointer; align-self:flex-start; font-family:inherit;}
.send-btn:hover{background:var(--accent);}

.page-nav-arrows{position:fixed; right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); z-index:120; display:flex; gap:10px; opacity:0; pointer-events:none; transition:opacity 0.3s ease;}

/* ---------- Send-confirmation animation: an envelope with a small Cabo Verde flag stamp
   flies a loop around the message field, then shrinks and fades away. No backdrop. ---------- */
form{position:relative;} /* anchors the envelope's flight path to the form itself */
.envelope-anim{
  position:absolute; left:16px; top:6px; width:58px; height:41px;
  pointer-events:none; opacity:0; z-index:50;
}
.envelope-anim.show{animation:envelopeFly 1.9s cubic-bezier(.4,0,.2,1) forwards;}
.envelope-anim svg{width:100%; height:100%; overflow:visible;}
.env-body{fill:var(--surface); stroke:var(--ink); stroke-width:2;}
.env-flap{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round;}
/* Flag stamp in the corner — blue, white, red, white, blue, same proportions as the
   brush-stroke version, just shrunk down to stamp size. */
.stamp-outline{fill:none; stroke:var(--ink); stroke-width:1.2; opacity:0.55;}
.stamp-blue-top{fill:#003893;}
.stamp-white{fill:#FFFFFF;}
.stamp-red{fill:#CF2027;}
.stamp-blue-bottom{fill:#003893;}
@keyframes envelopeFly{
  0%{ opacity:0; transform:translate(0, 0) rotate(-6deg) scale(0.55); }
  10%{ opacity:1; transform:translate(8px, 4px) rotate(-3deg) scale(0.8); }
  30%{ transform:translate(150px, -2px) rotate(4deg) scale(0.88); }
  50%{ transform:translate(230px, 60px) rotate(9deg) scale(0.82); }
  70%{ transform:translate(150px, 130px) rotate(-2deg) scale(0.75); }
  88%{ opacity:1; transform:translate(40px, 110px) rotate(-8deg) scale(0.55); }
  100%{ opacity:0; transform:translate(90px, 80px) rotate(0deg) scale(0.2); }
}
@media(prefers-reduced-motion:reduce){
  .envelope-anim.show{animation:none; opacity:1; transform:translate(90px, 40px) scale(0.8);}
}
.page-nav-arrows.visible{opacity:1; pointer-events:auto;}
.arrow-btn{width:48px; height:48px; border-radius:50%; background:var(--ink); color:#fff; border:none; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.28); cursor:pointer; font-family:inherit;}
.arrow-btn:hover{background:var(--accent);}
.arrow-btn.hidden{display:none;}

@media(max-width:760px){
  .tab-group.desktop-only{display:none;}
  .hamburger{display:block;}
  .page-scroll{padding:44px 26px 8px;}
  .page-index{padding:12px 26px 16px;}
  .video-tiles{grid-template-columns:1fr;}
  .partners-grid{grid-template-columns:repeat(2, 1fr);}
}