/* PÁGINA SOBRE NÓS — carregado condicionalmente em functions.php */

/* Fundos alternados: why off-white · testimonials bg · vida-empat off-white
   · onde-estamos bg. Ficam aqui e não no main.css porque #why e
   #testimonials também servem a página de Carreiras, que não deve mudar. */
#testimonials {
  background: var(--bg, #f7f5f2);
}
#vida-empat {
  background: var(--off-white, #fafaf8);
}
#onde-estamos {
  background: var(--bg, #f7f5f2);
}

/* Cabeçalhos centrados das duas secções que vieram da Equipa. Lá estavam
   em style=" " repetido em três elementos; o text-align desce por herança,
   por isso basta no pai. */
.why-header,
.testi-header {
  text-align: center;
  margin: 0 auto 52px;
}
.why-header {
  max-width: 560px;
}
.testi-header {
  max-width: 540px;
}

/* ── Valores de destaque — Quem Somos ── */
.quem-valores{
  list-style:none;
  margin:32px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(195px, 1fr));
  gap:10px;
}
.quem-valor{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  background:#fff;
  border:1px solid var(--border, #E8E2DC);
  border-radius:100px;
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  color:var(--red-dark, #8A2222);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.quem-valor-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange, #EF7A0D);
  flex-shrink:0;
}
@media (hover: hover) {
  .quem-valor:hover {
  border-color:var(--orange, #EF7A0D);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(173,48,48,.10);
  transition-delay:0s;
}
}

/* Entrada das pills em cascata. O atraso soma --reveal-i (posição da <ul>
   no .reveal-group) e --pill-i (posição da pill, posta pelo sobre-nos.js). */
.quem-valores .quem-valor{
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:
    opacity .5s var(--ease, cubic-bezier(.22,1,.36,1)),
    transform .5s var(--ease, cubic-bezier(.22,1,.36,1)),
    border-color .25s ease,
    box-shadow .25s ease;
  transition-delay:calc(var(--reveal-i, 0) * 90ms + var(--pill-i, 0) * 55ms);
}
.quem-valores.visible .quem-valor{
  opacity:1;
  transform:none;
}
/* Terminada a entrada, o atraso sai da frente — senão o hover ficava à
   espera meio segundo antes de responder. */
.reveal-group.reveal-done .quem-valor{
  transition-delay:0s;
}

/* A <ul> só serve de gatilho: quem anima são as pills. */
.quem-valores.reveal{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .quem-valores .quem-valor{
    opacity:1;
    transform:none;
    transition-delay:0s;
  }
}

@media (max-width:600px){
  .quem-valores{grid-template-columns:1fr;}
  .quem-valor{font-size:13px;padding:10px 16px;}
}

/* ── Missão & Visão ── */
.mvv-icon-svg{
  width:46px;height:46px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
}
.mvv-icon-svg svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.6;}

/* ── Valores ── */
.mvv-valores-flex{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:20px;
}
.valor-card{
  flex:1 1 300px;
  max-width:calc(33.333% - 11px);
  background:#fff;
  border:1px solid var(--border, #E8E2DC);
  border-radius:16px;
  padding:26px 26px 28px;
  text-align:left;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
@media (hover: hover) {
  .valor-card:hover {
  transform:translateY(-4px);
  border-color:var(--salmon, #F6B383);
  box-shadow:0 12px 32px rgba(173,48,48,.10);
}
}
.valor-head{display:flex;align-items:center;gap:13px;margin-bottom:12px;}
.valor-icon{
  width:40px;height:40px;
  border-radius:11px;
  background:var(--peach, #FDE6D3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.valor-icon svg{width:20px;height:20px;stroke:var(--red, #AD3030);fill:none;stroke-width:1.8;}
.valor-name{
  font-family:var(--font-d, 'Plus Jakarta Sans', sans-serif);
  font-size:17px;font-weight:700;line-height:1.25;
  color:var(--text, #1A1A1A);
}
.valor-desc{
  font-size:14.5px;line-height:1.7;
  color:var(--text-muted, #6B6B6B);
  margin:0;
}
@media (max-width:900px){
  .valor-card{max-width:calc(50% - 8px);}
}
@media (max-width:600px){
  .valor-card{max-width:100%;flex-basis:100%;}
}

/* Vida na Empa-T. O mosaico (.life-*) vive no main.css e é partilhado com
   a página da Equipa. Aqui fica só o que esta secção tem a mais. */

/* Texto e botao no canto superior direito do cabecalho. */
.vida-intro {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.65;
}
/* "Ver mais momentos", centrado por baixo da grelha. */
.vida-mais {
  text-align: center;
  margin-top: 32px;
}

.vida-item {
  /* Reset: o cartao e um <button> para o lightbox ser alcancavel por teclado.
     A forma (raio, recorte, position) vem toda do .life-card. */
  padding: 0;
  border: none;
  background: var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vida-item[hidden] { display: none; }
.vida-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .vida-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
}
@media (hover: hover) {
  .vida-item:hover img { transform: scale(1.06); }
}
.vida-item:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* fotos reveladas pelo "Ver mais" */
.vida-item.just-revealed { animation: vidaFadeUp .45s var(--ease) both; }
@keyframes vidaFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vida-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(120,25,20,.88) 0%, rgba(173,48,48,.42) 55%, rgba(239,122,13,.18) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 16px;
  color: #fff;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.vida-item:focus-visible .vida-overlay { opacity: 1; }
@media (hover: hover) {
  .vida-item:hover .vida-overlay { opacity: 1; }
}

.vida-zoom-icon {
  margin: auto auto 0;
  opacity: .9;
  transform: translateY(6px);
  transition: transform .35s var(--ease) .05s;
}
@media (hover: hover) {
  .vida-item:hover .vida-zoom-icon { transform: translateY(0); }
}

.vida-titulo {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transform: translateY(8px);
  transition: transform .35s var(--ease) .05s;
}
@media (hover: hover) {
  .vida-item:hover .vida-titulo { transform: translateY(0); }
}

/* ── Lightbox ── */
.vida-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,6,6,.94);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 72px;
  opacity: 0;
  transition: opacity .28s ease;
}
.vida-lightbox[hidden] { display: none; }
.vida-lightbox.is-open { opacity: 1; }

.vida-lb-figure {
  margin: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.vida-lb-imgwrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.vida-lb-figure img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: 14px;
  display: block;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  animation: vidaZoomIn .32s var(--ease) both;
}
.vida-lb-figure img.is-loading { opacity: 0; }
@keyframes vidaZoomIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

.vida-lb-spinner {
  position: absolute;
  width: 34px; height: 34px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: #EF7A0D;
  border-radius: 50%;
  animation: vidaSpin .7s linear infinite;
  opacity: 0;
  transition: opacity .2s;
}
.vida-lb-spinner.is-visible { opacity: 1; }
@keyframes vidaSpin { to { transform: rotate(360deg); } }

.vida-lb-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 640px;
}
.vida-lb-titulo  { font-family: var(--font-d); font-size: 18px; font-weight: 700; color: #fff; }
.vida-lb-legenda { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); }
.vida-lb-counter {
  font-family: var(--font-d);
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: rgba(255,255,255,.4); margin-top: 4px;
}

.vida-lb-close,
.vida-lb-nav {
  position: absolute;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.vida-lb-close { top: 24px; right: 24px; width: 46px; height: 46px; }
.vida-lb-nav   { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.vida-lb-nav.prev { left: 20px; }
.vida-lb-nav.next { right: 20px; }
@media (hover: hover) {
  .vida-lb-close:hover,
  .vida-lb-nav:hover { background: rgba(239,122,13,.35); border-color: rgba(239,122,13,.6); }
}
@media (hover: hover) {
  .vida-lb-nav:hover { transform: translateY(-50%) scale(1.06); }
}

/* ── Responsive ── */
@media (max-width: 1024px) { .vida-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .vida-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vida-titulo { font-size: 12px; }
  .vida-lightbox { padding: 20px 12px; }
  .vida-lb-titulo { font-size: 16px; }
  .vida-lb-nav { width: 42px; height: 42px; }
  .vida-lb-nav.prev { left: 8px; }
  .vida-lb-nav.next { right: 8px; }
  .vida-lb-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}


/* ── Carrossel de frases ──
   Estava no main.css, mas a secção só existe nesta página.
   Os dots passaram de <div> a <button> para serem alcançáveis
   por teclado, daí o reset de borda/padding que vem a seguir. */

#frase-carousel {
  background: var(--grad);
  padding: 72px 0;
  overflow: hidden;
}
/* O recorte tem de ser AQUI, e não no #frase-carousel.
   A secção é full-bleed, ocupa a largura toda do ecrã; a track vive dentro
   do .container, que tem max-width:1200px. Com o overflow só na secção, o
   recorte dava-se na borda do ecrã: num monitor largo via-se o slide
   anterior e o seguinte a espreitar dos dois lados. O .carousel-wrap tem a
   largura do container, que é a janela que queremos de facto. */
.carousel-wrap {
  position: relative;
  overflow: hidden;
  /* Folga para o contorno de foco do último dot, que fica encostado à borda
     de baixo e sem isto seria cortado pelo overflow. */
  padding-bottom: 8px;
}
.carousel-track {
  display: flex;
  transition: transform 0.6s var(--ease);
}
.carousel-slide {
  /* flex-basis explícito em vez de width: garante os 100% mesmo que o
     conteúdo de um slide seja mais largo do que a janela. */
  flex: 0 0 100%;
  min-width: 100%;
  text-align: center;
  padding: 0 120px;
}
.carousel-quote {
  font-family: var(--font-d);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 24px;
}
.carousel-quote em {
  font-style: normal;
  color: var(--salmon);
}
.carousel-author {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.c-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all var(--t);
}
.c-dot.active {
  width: 24px;
  border-radius: 3px;
  background: var(--salmon);
}

@media (max-width: 768px) {
  .carousel-slide {
    padding: 0 24px;
  }
  .carousel-quote {
    font-size: clamp(18px, 5vw, 24px);
  }
}


/* Reset por o dot ser agora um <button>, e foco visível para quem navega
   por teclado (o :focus-visible só aparece com Tab, não com o rato). */
.c-dot {
  border: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.c-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Vida na Empa-T: carrossel em telemóvel ─────────────────────────────
   Em coluna única, as fotografias faziam uma pilha longa até ao botão.
   Passa a deslizar de lado, com encaixe nativo do browser — sem JS. */
@media (max-width: 768px) {
  .life-grid {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    /* Declarar o eixo vertical: com overflow-x definido, o browser assume
       overflow-y:auto e a caixa passa a ter scroll vertical proprio — as
       fotografias deslizavam para cima e para baixo dentro dela. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .life-grid::-webkit-scrollbar {
    display: none;
  }

  .life-grid .life-card {
    display: block;
    flex: 0 0 82%;
    height: 240px;
    min-height: 240px;
    scroll-snap-align: center;
  }

  /* A animação de entrada arranca com translateY(32px). Num carrossel isso
     tem duas consequências: corta 32px em baixo, e as fotografias que estão
     fora do ecrã nunca chegam a disparar o observador — ficavam invisíveis
     e deslocadas ao arrastar. Aqui entram já colocadas. */
  .life-grid .life-card.reveal {
    opacity: 1;
    transform: none;
  }

  /* No carrossel estão todas, por isso o "Ver mais" deixa de fazer sentido. */
  .life-grid .vida-item[hidden] {
    display: block;
  }
  .vida-mais {
    display: none;
  }
}