/* Sobre a VERI — página em VERI white, acolhedora: serifa nos destaques, polaroides, números,
   história e cultura. Escrito a partir do celular; quebras 621, 981 e 1101px (PADRAO-VISUAL.md). */
.about-page{--paper:var(--white);--paper-tint:#edf3fb;--line:#d9e3f1;overflow:clip;background:var(--paper);color:var(--ink);color-scheme:light}
.about-header{background:var(--page);color:var(--white)}
.about-page>section{position:relative;scroll-margin-top:24px}
.about-page em{color:var(--blue);font:italic 400 1.04em/1 var(--serif);letter-spacing:-.02em;text-shadow:none}
.about-kicker{margin-bottom:18px;display:flex;align-items:center;gap:10px;color:var(--blue);font:600 11px var(--label-font);letter-spacing:.12em}
.about-kicker span{width:6px;height:6px;flex:none;border-radius:50%;background:var(--blue)}
.about-page h2{color:var(--ink);font:600 var(--h2)/1.08 var(--display);letter-spacing:-.04em;text-wrap:balance}
.about-page h2 em{display:inline}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .about-page>section:not(.about-lead) [data-feature-reveal] h2 em{background-image:linear-gradient(90deg,var(--blue) 0 50%,rgba(33,112,237,.24) 50% 100%)}
}
.about-head>p:last-child{max-width:520px;margin-top:18px;color:var(--ink-soft);font-size:16px;line-height:1.65}
.about-link{min-height:44px;display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:600;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size var(--motion-base) var(--ease)}
.about-link:hover,.about-link:focus-visible{background-size:100% 1px}
.about-link-quiet{color:var(--ink-soft)}
.about-page :focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* Topo */
.about-hero{padding:28px 0 clamp(48px,7vw,96px);background:radial-gradient(70% 60% at 85% 0%,rgba(33,112,237,.1),transparent 70%),var(--paper)}
.about-breadcrumb{margin-bottom:28px;display:flex;flex-wrap:wrap;gap:8px;color:#7a8aa3;font-size:12px}
.about-breadcrumb a{margin-block:-12px;padding-block:12px;color:var(--ink-soft)}
.about-breadcrumb a:hover{color:var(--blue)}
.about-hero h1{max-width:none;color:var(--ink);font-size:clamp(34px,9vw,46px);font-weight:600;line-height:1.06;letter-spacing:-.04em}
.about-hero h1 em{margin-top:4px;font-size:1.08em}
.about-lede{max-width:560px;margin-top:22px;color:var(--ink-soft);font-size:16px;line-height:1.7}
.about-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:4px 28px}
.about-album{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-inline:4px}
.about-polaroid{position:relative;margin:0;padding:8px 8px 0;background:#fff;box-shadow:0 18px 40px rgba(11,28,54,.12),0 1px 3px rgba(11,28,54,.1);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease)}
.about-polaroid img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
.about-polaroid figcaption{padding:12px 2px 14px;color:var(--ink-soft);font:italic 13px/1.3 var(--serif)}
.about-photo-one{rotate:-4deg;translate:0 8px}
.about-photo-two{z-index:1;rotate:3deg}
.about-photo-three{grid-column:1 / -1;width:62%;justify-self:center;rotate:-2deg;translate:0 -6px}
.about-polaroid:hover{z-index:2;rotate:0deg;translate:0 -6px;box-shadow:0 28px 60px rgba(11,28,54,.18),0 1px 3px rgba(11,28,54,.1)}

/* Números e selos */
.about-numbers{padding:0 0 clamp(48px,7vw,96px)}
.about-number-grid{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none}
.about-number-grid li{padding:20px 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:0 18px 40px rgba(33,112,237,.06)}
.about-number-grid strong{display:block;color:var(--blue);font:700 clamp(30px,8vw,40px)/1 var(--display);letter-spacing:-.04em}
.about-number-grid span{margin-top:10px;display:block;color:var(--ink-soft);font-size:13px;line-height:1.45}
.about-trust{margin:24px 0 0;padding:20px 0 0;display:grid;gap:16px;border-top:1px solid var(--line);list-style:none}
.about-trust li{display:flex;align-items:center;gap:14px;color:var(--ink-soft);font:600 11px var(--label-font);letter-spacing:.08em;text-transform:uppercase}
.about-trust img{width:auto;height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;box-sizing:content-box;object-fit:contain}
.about-trust a{display:block;flex:none}

/* Perspectiva */
.about-essence{padding:0 0 clamp(48px,7vw,96px)}
.about-essence-card{padding:clamp(28px,5vw,64px) clamp(22px,5vw,72px);border-radius:clamp(22px,2.6vw,36px);background:radial-gradient(60% 80% at 100% 0%,rgba(33,112,237,.14),transparent 70%),var(--paper-tint)}
.about-columns{margin-top:24px;display:grid;gap:16px;color:var(--ink-soft);font-size:16px;line-height:1.7}

/* Princípios */
.about-principles{padding:0 0 clamp(56px,8vw,112px)}
.about-principle-grid{margin:32px 0 0;padding:0;display:grid;gap:12px;list-style:none}
.about-principle-grid li{padding:24px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;transition:translate var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease)}
.about-principle-grid li:hover{translate:0 -4px;box-shadow:0 24px 50px rgba(33,112,237,.1)}
.about-principle-grid span{color:var(--blue);font:600 11px var(--label-font);letter-spacing:.12em}
.about-principle-grid h3{margin:18px 0 10px;color:var(--ink);font:italic 400 32px/1 var(--serif);letter-spacing:-.02em}
.about-principle-grid p{color:var(--ink-soft);font-size:15px;line-height:1.65}

/* História */
.about-history{padding:clamp(56px,8vw,112px) 0;background:linear-gradient(180deg,var(--paper-tint),var(--paper))}
.about-timeline{position:relative;margin:36px 0 0;padding:0 0 0 26px;display:grid;gap:28px;list-style:none}
.about-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--blue),rgba(33,112,237,.15))}
.about-timeline li{position:relative}
.about-timeline li::before{content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border:2px solid var(--blue);border-radius:50%;background:var(--paper);box-shadow:0 0 0 5px rgba(33,112,237,.12)}
.about-time-label span{display:block;color:var(--blue);font:600 11px var(--label-font);letter-spacing:.12em;text-transform:uppercase}
.about-time-label strong{margin-top:6px;display:block;color:var(--ink);font:italic 400 30px/1.1 var(--serif)}
.about-time-content{margin-top:12px}
.about-time-content h3{color:var(--ink);font:600 19px/1.35 var(--display);letter-spacing:-.02em}
.about-time-content p{max-width:560px;margin-top:8px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.about-time-content .about-link{margin-top:6px}

/* Eventos: fotos do estande e a parede de logos dos eventos em que a VERI esteve.
   Celular: fotos em carrossel de arrastar (uma por vez, com a próxima aparecendo) e logos em grade compacta 3×3.
   Computador: mosaico de fotos e grade de logos com nome. */
.about-events{padding:clamp(56px,8vw,112px) 0;background:var(--paper)}
.about-events-grid{margin:28px calc(50% - 50vw) 0;padding:0 calc(50vw - 50%);display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--shell)) / 2);overscroll-behavior-x:contain;scrollbar-width:none}
.about-events-grid::-webkit-scrollbar{display:none}
.about-event-photo{position:relative;flex:0 0 82%;margin:0;overflow:hidden;border-radius:16px;background:var(--paper-tint);aspect-ratio:3/2;scroll-snap-align:start;box-shadow:0 1px 2px rgba(11,28,54,.08)}
.about-event-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease)}
.about-event-photo:hover img{scale:1.05}
.about-event-photo figcaption{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(7,18,38,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 10px var(--label-font);letter-spacing:.12em;text-transform:uppercase}
.about-events-hint{margin-top:12px;color:var(--ink-soft);font:600 11px var(--label-font);letter-spacing:.1em;text-transform:uppercase}
.about-events-hint span{color:var(--blue)}
.about-events-wall{margin-top:28px;padding:20px 14px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--paper-tint),var(--paper))}
.about-events-label{color:var(--ink);font:italic 400 22px/1.15 var(--serif);letter-spacing:-.02em;text-align:center}
.about-events-label small{margin-top:6px;display:block;color:var(--ink-soft);font:400 13px/1.55 var(--body);letter-spacing:0}
.about-events-logos{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.about-events-logos li{min-height:78px;padding:8px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;transition:translate var(--motion-base) var(--ease),box-shadow var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease)}
.about-events-logos li:hover{translate:0 -4px;border-color:rgba(33,112,237,.45);box-shadow:0 18px 40px rgba(11,28,54,.12)}
.about-events-logos img{width:auto;height:auto;max-width:100%;max-height:58px;object-fit:contain}
.about-events-logos span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Cultura: o sino */
.about-bell{padding:clamp(56px,8vw,112px) 0}
.about-bell-layout{display:grid;gap:28px;align-items:center}
.about-bell-copy>p:not(.about-kicker){max-width:420px;margin-top:20px;color:var(--ink-soft);font-size:16px;line-height:1.7}
.about-signature{margin-top:24px;color:var(--ink);font:italic 22px var(--serif)}
.about-bell-photo{margin:0;padding:10px 10px 0;background:#fff;rotate:1.5deg;box-shadow:0 30px 70px rgba(11,28,54,.16),0 1px 3px rgba(11,28,54,.1)}
.about-bell-photo img{display:block;width:100%;height:auto}
.about-bell-photo figcaption{padding:12px 4px 14px;color:var(--ink-soft);font:italic 14px var(--serif);text-align:right}

/* Pedido de demonstração: folha escura comum (.lead-sheet, styles.css) com o formulário comum */
.about-lead{padding:0 0 clamp(24px,4vw,56px)}

@media (min-width:621px){
  .about-hero{padding-top:40px}
  .about-hero h1{font-size:clamp(46px,6.6vw,62px)}
  .about-lede{font-size:17px}
  .about-album{margin-top:56px;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);padding-inline:12px}
  .about-polaroid{padding:12px 12px 0}
  .about-polaroid figcaption{font-size:15px;padding:16px 3px 20px}
  .about-photo-one{rotate:-5deg;translate:0 12px}
  .about-photo-two{rotate:3deg;translate:0 -10px}
  .about-photo-three{grid-column:auto;width:auto;rotate:-3deg;translate:0 16px}
  .about-number-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .about-trust{grid-template-columns:repeat(3,auto);justify-content:start;gap:28px}
  .about-columns{grid-template-columns:1fr 1fr;gap:36px}
  .about-principle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .about-event-photo{flex-basis:46%}
  .about-events-wall{padding:clamp(22px,4vw,40px)}
  .about-events-label{font-size:26px}
  .about-events-logos{gap:14px}
  .about-events-logos li{min-height:150px;padding:18px 12px 14px;grid-template-rows:1fr auto;gap:12px;border-radius:16px}
  .about-events-logos img{max-width:min(100%,150px);max-height:88px}
  .about-events-logos span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;color:var(--ink-soft);font-size:12px;line-height:1.35;text-align:center}
}

@media (min-width:981px){
  .about-hero-copy{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:end}
  .about-breadcrumb,.about-hero-copy .about-kicker,.about-hero h1{grid-column:1}
  .about-lede{grid-column:2;grid-row:3;margin-top:0}
  .about-actions{grid-column:2;grid-row:4}
  .about-hero h1{font-size:clamp(56px,5.4vw,76px)}
  .about-album{max-width:1080px}
  .about-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:end}
  .about-head .about-kicker{grid-column:1 / -1}
  .about-head>p:last-child{margin-top:0}
  .about-timeline{max-width:900px;margin-left:auto;margin-right:auto;padding-left:0;gap:0}
  .about-timeline::before{left:calc(30% + 5px)}
  .about-timeline li{display:grid;grid-template-columns:30% 1fr;column-gap:48px;padding:28px 0}
  .about-timeline li::before{left:calc(30% - 1px);top:34px}
  .about-time-label{padding-right:24px;text-align:right}
  .about-time-content{margin-top:0;padding-left:20px}
  .about-bell-layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px)}
  /* Fotos em linha, nunca maiores que o arquivo (cerca de 450 px): sem ampliar, sem perder nitidez. */
  .about-events-grid{margin:36px 0 0;padding:0;display:grid;overflow:visible;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .about-event-photo{aspect-ratio:3/2}
  .about-events-hint{display:none}
  .about-events-wall{margin-top:clamp(32px,5vw,56px)}
  .about-events-wall{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:center}
  .about-events-label{font-size:34px;text-align:left}
  .about-events-logos{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  .about-polaroid,.about-principle-grid li,.about-event-photo img,.about-events-logos li{transition:none}
  .about-event-photo:hover img{scale:none}
  .about-events-logos li:hover{translate:none}
  .about-polaroid:hover{translate:none;rotate:none}
}
