/* ===================================================================
   Páginas internas — Colégio Lima Guimarães
   Capa, prosa, listas, tabela, linha do tempo e FAQ.
   =================================================================== */

/* ---------- capa da página ----------
   Texto à esquerda, foto à direita, os dois dentro da faixa azul.
   A foto fica em 4:3, contida, sem vazar a borda: as imagens da escola são
   pequenas e perdiam nitidez esticadas na largura toda. */
.capa-pagina{
  background:linear-gradient(170deg,var(--azul-800) 0%,var(--azul-700) 100%);
  color:var(--branco);padding:clamp(36px,5vw,64px) 0;
}
.capa-pagina .container{
  display:grid;grid-template-columns:1fr;gap:var(--e-8);align-items:center;
}
.capa-pagina.com-foto .container{grid-template-columns:1.1fr .9fr}
.capa-pagina h1{
  color:var(--branco);font-size:clamp(2rem,4.6vw,var(--t-3xl));margin-bottom:var(--e-3);
}
.capa-pagina .chamada{
  color:rgba(255,255,255,.86);font-size:var(--t-md);max-width:46ch;margin:0;
}
.capa-foto{margin:0;justify-self:end;width:100%;max-width:520px}
.capa-foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--raio-lg);
  border:4px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
}
/* arte com texto dentro: vai inteira, sem corte */
.capa-foto.inteira img,.capa-foto.inteira img[width]{aspect-ratio:auto;height:auto}
@media (max-width:860px){
  .capa-pagina.com-foto .container{grid-template-columns:1fr}
  .capa-foto{justify-self:stretch;max-width:none}
  .capa-foto img{aspect-ratio:16/10}
  .capa-foto.inteira img{aspect-ratio:auto}
}

/* capa feita de uma arte só (atividades) */
.capa-banner{background:var(--azul-800);line-height:0}
.capa-banner img{width:100%;height:auto;display:block}

/* ---------- acervo de eventos ---------- */
.acervo{margin-top:var(--e-8)}
.anos-acervo{margin-top:0;text-align:left}
.anos-acervo .grade-anos{justify-content:flex-start}
.acervo-conteudo{margin-top:var(--e-10);min-height:320px}
.acervo-cabeca{margin-bottom:var(--e-6)}
.acervo-cabeca h2{font-size:clamp(1.5rem,3vw,var(--t-2xl));margin:var(--e-2) 0 var(--e-2)}
.acervo-cabeca p{color:var(--tinta-70);margin:0 0 var(--e-1)}
.acervo-cabeca .qtd{font-size:var(--t-sm);color:var(--azul-600);font-weight:var(--peso-forte)}
.acervo-cabeca .voltar{font-size:var(--t-sm)}
.acervo-cabeca .voltar svg{order:-1}
.acervo-cabeca .voltar:hover svg{transform:translateX(-4px)}
.acervo-carregando{color:var(--cinza-600)}
.acervo-cards{grid-template-columns:repeat(4,1fr)}

/* fotos do evento: mosaico em colunas, cada foto no formato em que foi tirada */
.mosaico{columns:4 220px;column-gap:var(--e-4)}
.foto-acervo{
  display:block;width:100%;margin:0 0 var(--e-4);padding:0;border:0;cursor:zoom-in;
  border-radius:var(--raio);overflow:hidden;background:var(--cinza-100);
  box-shadow:var(--sombra-card);break-inside:avoid;
}
.foto-acervo img{width:100%;height:auto;min-height:120px;object-fit:cover;
  transition:transform var(--lento) var(--saida)}
.foto-acervo:hover img{transform:scale(1.04)}

/* foto ampliada */
.luz-aberta,.luz-aberta body{overflow:hidden}
.caixa-luz{
  position:fixed;inset:0;z-index:1000;background:rgba(0,14,32,.94);
  display:grid;place-items:center;padding:56px 64px;
}
.caixa-luz[hidden]{display:none}
.caixa-luz img{max-width:100%;max-height:calc(100vh - 112px);width:auto;height:auto;
  border-radius:var(--raio-sm);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.caixa-luz .contador{position:absolute;top:18px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.8);font-size:var(--t-sm);margin:0;line-height:1.4}
.caixa-luz button{position:absolute;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:var(--branco);border-radius:50%;
  transition:background var(--rapido) var(--entrada)}
.caixa-luz button:hover{background:var(--sol-amarelo);color:var(--azul-800)}
.caixa-luz .fecha{top:10px;right:12px;width:44px;height:44px;font-size:30px;line-height:1}
.caixa-luz .seta-luz{top:50%;transform:translateY(-50%);width:48px;height:48px}
.caixa-luz .seta-luz svg{width:22px;height:22px}
.caixa-luz .ant{left:10px}
.caixa-luz .prox{right:10px}

@media (max-width:1080px){ .acervo-cards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){ .acervo-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){
  .acervo-cards{gap:var(--e-3)}
  .acervo-cards .rot{padding:var(--e-3)}
  .acervo-cards .rot b{font-size:var(--t-sm)}
  .mosaico{columns:2;column-gap:var(--e-3)}
  .foto-acervo{margin-bottom:var(--e-3)}
  .caixa-luz{padding:56px 8px}
  .caixa-luz .seta-luz{top:auto;bottom:14px;transform:none}
  .caixa-luz .ant{left:calc(50% - 60px)}
  .caixa-luz .prox{right:calc(50% - 60px)}
  .caixa-luz img{max-height:calc(100vh - 150px)}
}

/* ---------- corpo de texto ---------- */
.container.estreito{max-width:840px}
.prosa h2{font-size:clamp(1.3rem,2.6vw,var(--t-xl));margin:var(--e-10) 0 var(--e-4)}
.prosa h2:first-child{margin-top:0}
.prosa p{font-size:var(--t-md);color:var(--tinta);max-width:68ch}
.prosa .nota{
  font-size:var(--t-sm);color:var(--cinza-600);
  border-left:3px solid var(--sol-amarelo);padding-left:var(--e-4);
}

.lista-marcada{list-style:none;padding:0;margin:0 0 var(--e-6);
  display:flex;flex-direction:column;gap:var(--e-3)}
.lista-marcada li{display:flex;gap:var(--e-3);font-size:var(--t-md);align-items:flex-start}
.lista-marcada li::before{
  content:"";flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--sol-amarelo);margin-top:10px;
}
.lista-marcada a{color:var(--azul-600);text-decoration:none;font-weight:var(--peso-medio)}
.lista-marcada a:hover{text-decoration:underline}

.lista-chips{list-style:none;padding:0;margin:0 0 var(--e-4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-4)}
.lista-chips li{
  background:var(--azul-050);border:1px solid var(--azul-100);border-radius:var(--raio);
  padding:var(--e-4) var(--e-5);
}
.lista-chips b{display:block;color:var(--azul-800);font-size:var(--t-md)}
.lista-chips span{display:block;font-size:var(--t-sm);color:var(--cinza-600)}

/* ---------- tabela ---------- */
.tabela{width:100%;border-collapse:collapse;margin:var(--e-4) 0 var(--e-6);font-size:var(--t-sm)}
.tabela th,.tabela td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--cinza-100)}
.tabela thead th{
  background:var(--azul-800);color:var(--branco);font-weight:var(--peso-forte);
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;
}
.tabela thead th:first-child{border-radius:var(--raio-sm) 0 0 0}
.tabela thead th:last-child{border-radius:0 var(--raio-sm) 0 0}
.tabela tbody tr:nth-child(even){background:var(--azul-050)}
.tabela td:first-child{font-weight:var(--peso-medio);color:var(--azul-800)}

/* ---------- linha do tempo ---------- */
.linha-tempo{list-style:none;margin:0 0 var(--e-6);padding:0 0 0 var(--e-8);position:relative}
.linha-tempo::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(var(--sol-amarelo),var(--sol-laranja));
}
.linha-tempo li{position:relative;padding-bottom:var(--e-6);display:flex;gap:var(--e-4);
  flex-wrap:wrap;align-items:baseline}
.linha-tempo li::before{
  content:"";position:absolute;left:calc(-1 * var(--e-8) + 1px);top:8px;
  width:17px;height:17px;border-radius:50%;background:var(--branco);
  border:4px solid var(--sol-laranja);
}
.linha-tempo b{font-family:var(--fonte-titulo);font-weight:var(--peso-black);
  font-size:var(--t-lg);color:var(--azul-800);min-width:74px}
.linha-tempo span{flex:1;min-width:240px;font-size:var(--t-md);color:var(--tinta)}

/* ---------- citação ---------- */
.citacao{
  margin:var(--e-8) 0 0;padding:var(--e-6);background:var(--creme);
  border-radius:var(--raio-lg);border-left:5px solid var(--sol-amarelo);
}
.citacao p{font-size:var(--t-md);color:var(--tinta);margin-bottom:var(--e-3)}
.citacao cite{font-style:normal;font-weight:var(--peso-forte);color:var(--azul-800);font-size:var(--t-sm)}

/* ---------- perguntas frequentes ---------- */
.faq{display:flex;flex-direction:column;gap:var(--e-3)}
.faq-item{
  background:var(--branco);border:1px solid var(--cinza-100);border-radius:var(--raio);
  box-shadow:var(--sombra-card);overflow:hidden;
}
.faq-item summary{
  cursor:pointer;padding:var(--e-5) var(--e-6);font-weight:var(--peso-forte);
  color:var(--azul-800);font-size:var(--t-md);list-style:none;
  display:flex;align-items:center;gap:var(--e-4);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:2.5px solid var(--sol-laranja);border-bottom:2.5px solid var(--sol-laranja);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--medio) var(--saida);
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-item summary:hover{background:var(--azul-050)}
.faq-item .resposta{padding:0 var(--e-6) var(--e-5)}
.faq-item .resposta p{margin:0;color:var(--tinta-70);font-size:var(--t-md)}

/* ---------- item de menu da seção atual ---------- */
.menu .ativo > a::after{transform:scaleX(1)}

@media (max-width:700px){
  .lista-chips{grid-template-columns:1fr}
  /* a tabela quebra o texto e cabe na tela, sem rolagem lateral */
  .tabela th,.tabela td{padding:10px 8px}
  .tabela thead th{font-size:11px;letter-spacing:.02em}
}

/* ---------- atividades: coluna do período integral em destaque (22/09) ---------- */
.tabela .destaque{background:rgba(247,211,0,.14)}
.tabela thead th.destaque{background:var(--sol-laranja);color:var(--branco)}
.tabela thead th.destaque small{font-weight:var(--peso-normal);text-transform:none;letter-spacing:0;opacity:.9}
.tabela td.destaque b{color:var(--azul-800)}

/* ---------- estrutura: um botão por espaço, fotos do espaço escolhido (22/09) ---------- */
.ambientes{margin-top:var(--e-6)}
.amb-dica{font-size:var(--t-sm);color:var(--cinza-600);margin:0 0 var(--e-3)}
.amb-opcoes{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-5)}
.amb-opcoes button{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--raio-pill);
  border:1.5px solid var(--cinza-100);background:var(--branco);color:var(--azul-800);
  font:inherit;font-size:var(--t-sm);font-weight:var(--peso-medio);cursor:pointer;
  transition:background var(--rapido) var(--entrada),border-color var(--rapido) var(--entrada);
}
.amb-opcoes button:hover{border-color:var(--azul-500)}
.amb-opcoes button[aria-selected="true"]{background:var(--azul-800);border-color:var(--azul-800);color:var(--branco)}
.amb-qtd{font-size:11px;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;
  background:var(--azul-050);color:var(--azul-800);padding:0 5px}
.amb-opcoes button[aria-selected="true"] .amb-qtd{background:var(--sol-amarelo)}
.amb-foto{margin:0;position:relative;border-radius:var(--raio-lg);overflow:hidden;background:var(--cinza-100);
  box-shadow:var(--sombra-card);aspect-ratio:4/3;max-height:72vh}
.amb-foto img{width:100%;height:100%;object-fit:contain;background:#0c1f36;transition:opacity var(--medio) var(--entrada)}
.amb-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--e-6) var(--e-5) var(--e-4);
  color:var(--branco);font-weight:var(--peso-forte);background:linear-gradient(to top,rgba(0,24,50,.85),transparent)}
.amb-miniaturas{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-3)}
.amb-miniaturas button{padding:0;border:2px solid transparent;border-radius:var(--raio-sm);overflow:hidden;cursor:pointer;
  width:92px;height:69px;background:var(--cinza-100)}
.amb-miniaturas button[aria-current="true"]{border-color:var(--sol-laranja)}
.amb-miniaturas img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){
  .amb-opcoes{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;scrollbar-width:none}
  .amb-opcoes::-webkit-scrollbar{display:none}
  .amb-opcoes button{flex:0 0 auto}
  .amb-miniaturas button{width:72px;height:54px}
  .tabela-integral th,.tabela-integral td{padding:10px 8px}
}