/* ==========================================================================
IPIZ Nº 3047 — responsive.css (v2)
Carregar DEPOIS do home.css:
Escrito sobre os seletores reais do home.css: mesma especificidade,
por isso ganha só por vir depois (sem !important).
Breakpoints: 1600 · 1180 · 1080 · 1040 · 900 · 820 · 760 · 560 · 480 · 360
========================================================================== */
:root{
--safe-t: env(safe-area-inset-top, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
}
/* ---------- Base ---------- */
html{ scroll-padding-top: 76px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ min-width:320px; }
.container{
padding-left: max(var(--gutter), var(--safe-l));
padding-right: max(var(--gutter), var(--safe-r));
}
h1, h2, h3{ text-wrap: balance; }
p{ text-wrap: pretty; }
a, .val, .course-name, .news-title{ overflow-wrap: anywhere; }
/* Fallback para browsers sem svh/dvh */
.hero{ height:100vh; height:100svh; }
.tp-stage{ height:100vh; height:100svh; }
.mobile-menu-panel{ height:100vh; height:100dvh; }
/* ============================================================
NAVBAR
============================================================ */
.navbar{ padding-top:max(22px, var(--safe-t)); }
.navbar.solid{ padding-top:max(14px, var(--safe-t)); }
/* 901–1180px: links + botão não cabiam numa linha */
@media (max-width:1180px){
.nav-inner{ gap:16px; }
.nav-links{ gap:20px; }
.nav-link{ font-size:13.5px; }
.nav-cta{ padding:9px 14px; font-size:13px; }
.brand-name{ font-size:12.5px; max-width:170px; }
}
@media (max-width:1040px){
.nav-cta{ display:none; } /* o Portal continua no menu móvel, secção Portal e rodapé */
.nav-links{ gap:18px; }
}
/* Painel do menu móvel */
.mobile-menu-panel{ padding-bottom:max(32px, calc(var(--safe-b) + 20px)); overflow-y:auto; }
@media (max-width:480px){
.brand{ gap:8px; }
.brand-mark{ width:30px; height:30px; }
.brand-name{ font-size:11.5px; max-width:150px; letter-spacing:0; }
}
@media (max-width:340px){
.brand-name{ font-size:10.5px; max-width:128px; }
}
/* ============================================================
HERO
============================================================ */
@media (max-width:900px){
.hero-content{ padding-bottom:56px; padding-left:max(var(--gutter), var(--safe-l)); padding-right:max(var(--gutter), var(--safe-r)); }
}
@media (max-width:560px){
.hero-content{ padding-bottom:36px; }
.hero-title{ max-width:20ch; }
.hero-sub{ font-size:15px; margin-top:16px; }
.hero-actions{ flex-direction:column; align-items:stretch; gap:10px; margin-top:26px; }
.hero-actions .btn{ justify-content:center; white-space:normal; text-align:center; }
.hero-footline{ padding-bottom:max(22px, var(--safe-b)); }
}
/* ============================================================
CABEÇALHOS DE SECÇÃO
============================================================ */
@media (max-width:760px){
.section-head{ align-items:flex-start; gap:14px; margin-bottom:36px; }
.section-title{ max-width:20ch; }
.section-kicker{ max-width:52ch; }
}
/* ============================================================
SOBRE
============================================================ */
@media (max-width:900px){
.about-grid{ gap:36px; }
.about-photo{ aspect-ratio:16/10; max-height:440px; }
}
@media (max-width:640px){
.pillars{ grid-template-columns:1fr; gap:24px; margin-top:36px; }
}
/* ============================================================
NÚMEROS
============================================================ */
@media (max-width:820px){
.numbers-strip{ column-gap:20px; }
.number-cell:last-child:nth-child(odd){ grid-column:1 / -1; } /* 5 itens: o último ocupa a linha toda */
}
/* ============================================================
TEORIA → PRÁTICA
============================================================ */
@media (max-width:1024px){
.tp-img{ width:clamp(96px,17vw,170px); min-width:0; }
}
@media (max-width:760px){
.tp{ height:150vh; }
.tp-images{ display:block; } /* antes: escondido; agora aparecem em tamanho reduzido */
.tp-img{ width:26vw; max-width:120px; aspect-ratio:3/4; }
.tp-img.i1{ top:11%; left:5%; }
.tp-img.i3{ top:9%; right:5%; }
.tp-img.i2{ bottom:21%; left:7%; }
.tp-img.i4{ bottom:19%; right:6%; }
.tp-word{ font-size:clamp(44px, 17vw, 120px); }
.tp-note{ bottom:max(28px, calc(var(--safe-b) + 20px)); font-size:14px; }
.tp-grid{ background-size:44px 44px; }
}
/* ============================================================
ÁREAS
============================================================ */
@media (max-width:760px){
.area-row{ padding:22px 0; }
}
/* Touch: sem "hover" preso após o toque */
@media (hover:none){
.area-row:hover{ padding-left:0; }
.area-row:hover .area-arrow{ transform:none; }
}
/* Tablets touch (761px+): mostrar miniatura fixa em vez de depender do hover */
@media (hover:none) and (min-width:761px){
.area-preview{ position:static; transform:none; opacity:1; width:160px; height:106px; flex:none; }
.area-arrow{ order:3; }
}
/* ============================================================
CURSOS
============================================================ */
@media (max-width:1080px) and (min-width:881px){
.course{ grid-template-columns:48px 1fr auto; gap:8px 20px; }
.course-area{ grid-column:2; grid-row:2; }
.course-btn{ grid-column:3; grid-row:1 / span 2; align-self:center; }
}
@media (max-width:880px){
.course{ grid-template-columns:1fr; gap:10px; padding:22px 0; }
.course-num, .course-area, .course-btn{ grid-column:auto; grid-row:auto; }
.course-btn{ justify-self:start; }
}
/* ============================================================
FEIRA TECNOLÓGICA (vídeo vertical)
============================================================ */
@media (max-width:1080px){
.reel{ margin-left:auto; margin-right:auto; } /* margin-left:auto empurrava o vídeo para a direita */
}
@media (max-width:880px){
.reel{
height:auto;
width:min(420px, 92vw);
width:min(420px, 92vw, max(46svh, 220px)); /* nunca mais alto do que o ecrã */
max-width:none;
}
}
/* Touch: o botão pause deixava de existir (só aparecia em hover) */
@media (hover:none){
.reel-sound{ width:44px; height:44px; top:44px; right:12px; }
.reel.playing .reel-play,
.reel.playing:hover .reel-play{
opacity:1; inset:44px auto auto 12px; margin:0; width:44px; height:44px;
background:rgba(9,25,33,.55);
}
}
/* ============================================================
PROJECTOS · BIBLIOTECA · WORKSHOPS
============================================================ */
@media (max-width:600px){
.project-card{ padding:20px; }
}
@media (max-width:820px){
.split-photo{ min-height:260px; }
}
.workshops a{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color:var(--terracota); }
/* ============================================================
FESTIVAL DAS CORES — faixa deslizante (5 fotos em 3 colunas deixavam um buraco)
============================================================ */
@media (max-width:760px){
.festival-strip{
display:flex; gap:2px;
height:min(56svh, 420px); min-height:260px;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.festival-strip::-webkit-scrollbar{ display:none; }
.festival-strip .fcell{ flex:0 0 72%; scroll-snap-align:center; }
.festival-caption{ flex-direction:column; align-items:flex-start; padding-left:max(var(--gutter), var(--safe-l)); padding-right:max(var(--gutter), var(--safe-r)); }
}
/* ============================================================
FORMATURAS
============================================================ */
@media (max-width:760px){
.grad-grid{ grid-template-columns:1fr 1fr; }
.grad-grid .g1{ grid-column:1 / -1; height:min(60vw, 340px); }
.grad-grid .g2, .grad-grid .g3{ height:min(44vw, 240px); }
}
/* ============================================================
GALERIA
============================================================ */
@media (max-width:760px){
.gal-filters{
flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1);
padding:0 var(--gutter) 6px; margin-bottom:28px;
}
.gal-filters::-webkit-scrollbar{ display:none; }
.gal-filter{ flex:none; white-space:nowrap; }
}
@media (max-width:520px){
.gal-masonry{ column-count:2; column-gap:10px; } /* antes: 1 coluna = scroll interminável */
.gal-item{ margin-bottom:10px; }
.gal-item .photo{ max-height:240px; }
}
@media (max-width:340px){
.gal-masonry{ column-count:1; }
}
/* Lightbox: mostrar a foto inteira, sem cortar */
.lightbox-inner{ background:#0d1b23; max-height:calc(100dvh - 120px); }
.lightbox-inner img{ object-fit:contain; }
.lightbox-close{ min-height:44px; top:max(16px, var(--safe-t)); right:max(16px, var(--safe-r)); }
@media (max-width:760px){
.lightbox{ padding:max(56px, calc(var(--safe-t) + 44px)) 12px max(16px, var(--safe-b)); }
.lightbox-inner{ aspect-ratio:auto; height:min(74dvh, 140vw); }
}
/* ============================================================
NOTÍCIAS · PORTAL
============================================================ */
@media (max-width:760px){
.news-row{ padding:22px 0; }
}
@media (max-width:560px){
.portal{ padding:64px 0; }
}
@media (max-width:480px){
.portal .btn{ display:flex; justify-content:center; max-width:320px; margin-left:auto; margin-right:auto; }
}
/* ============================================================
CONTACTOS
============================================================ */
.contact-item .val{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:820px){
.map-ph{ min-height:280px; aspect-ratio:4/3; }
}
@media (max-width:560px){
.contact-item{ gap:4px 18px; }
.contact-item .lbl{ width:100%; }
}
/* ============================================================
RODAPÉ
============================================================ */
@media (max-width:900px){
.footer-top > div:first-child{ grid-column:1 / -1; }
.footer-top > .footer-col:last-child{ grid-column:1 / -1; }
}
@media (max-width:560px){
.footer-top{ row-gap:36px; padding-bottom:44px; }
.footer-bottom{ flex-direction:column; gap:8px; }
footer{ padding-bottom:max(24px, calc(var(--safe-b) + 16px)); }
}
/* ============================================================
TOQUE: alvos de 44px
============================================================ */
@media (pointer:coarse){
.btn, .nav-cta, .course-btn, .news-link, .gal-filter, .social a, .mobile-menu-link{ min-height:44px; }
.footer-col a{ display:inline-block; padding-block:6px; }
.mobile-menu-close{ width:44px; height:44px; }
}
/* ============================================================
ECRÃS GRANDES
============================================================ */
@media (min-width:1600px){
:root{ --container:1400px; --gutter:72px; }
}
@media (min-width:2200px){
:root{ --container:1600px; }
body{ font-size:18px; }
}
/* ============================================================
TELEMÓVEL EM PAISAGEM (altura pequena) — mantém-se depois das regras acima
============================================================ */
@media (max-height:560px) and (orientation:landscape){
.hero{ height:auto; min-height:100svh; padding-top:84px; }
.hero-content{ padding-bottom:28px; }
.hero-title{ font-size:clamp(24px, 4.4vw, 40px); }
.hero-sub{ margin-top:12px; font-size:14px; }
.hero-actions{ margin-top:18px; }
.tp-images{ display:none; }
.tp-word{ font-size:clamp(44px, 14vh, 120px); }
.section-pad{ padding:56px 0; }
.section-pad-sm{ padding:40px 0; }
.mobile-menu-link{ padding-top:8px; padding-bottom:8px; }
}
/* ============================================================
MOVIMENTO REDUZIDO — o home.css não anula os atrasos (delay),
por isso o hero demorava ~2s a aparecer
============================================================ */
@media (prefers-reduced-motion: reduce){
.hero-media{ clip-path:none; animation:none; }
.hero-logo-intro{ display:none; }
.hero-eyebrow, .hero-title, .hero-sub, .hero-actions, .hero-footline{ animation:none; opacity:1; transform:none; }
.reveal, .reveal[data-fx], .reel{ opacity:1; transform:none; clip-path:none; }
}