/* Dimensional: blue light, measured depth and a natural editorial rhythm. */
.motion-word { display: inline-block; }
.section-progress { display: none; }
/* Partner motion loops only while the section is visible; reduced-motion disables it. */
.hero-orbit, .scroll-cue span, .moment-halo, .moment-icon, .route-scroll span { animation-iteration-count: 1; }
.partner-symbols::before, .partner-symbols::after, .partner-emblem-glow,
.partner-emblem, .partner-plus, .partner-dollar { animation-iteration-count: infinite; }
.hero-orbit, .moment-halo, .moment-icon, .partner-symbols::before,
.partner-symbols::after, .partner-emblem-glow, .partner-emblem, .partner-plus, .partner-dollar { animation-duration: 5.8s; animation-play-state: paused; }
.motion-visible :is(.hero-orbit, .moment-halo, .moment-icon, .partner-emblem-glow, .partner-emblem, .partner-plus, .partner-dollar),
.motion-visible .partner-symbols::before, .motion-visible .partner-symbols::after { animation-play-state: running; }
.motion-suspended *, .motion-suspended *::before, .motion-suspended *::after { animation-play-state: paused !important; }
/* Headings remain real text; no duplicated accessible labels or line measurements. */
.reveal:focus-within { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; }
@media (min-width: 960px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  .section-progress { position: fixed; z-index: 12; right: 7px; top: 50%; transform: translateY(-42%); display: grid; gap: 1px; padding: 6px 0; border: 1px solid #04b5d93d; border-radius: 22px; background: #e0f6fbeb; }
  .section-progress a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; color: #023c89; }
  .section-progress a::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #00aed5; transition: transform .3s, background .3s; }
  .section-progress a[aria-current]::after { background: #0162a6; transform: scale(1.5); box-shadow: 0 0 0 3px #34c4e043; }
  .section-progress a span { position: absolute; right: 37px; padding: 7px 11px; border-radius: 8px; background: #022577; color: white; white-space: nowrap; font-size: .875rem; opacity: 0; visibility: hidden; pointer-events: none; }
  .section-progress a:hover span, .section-progress a:focus-visible span { opacity: 1; visibility: visible; }
  .section-progress a:focus-visible { outline: 2px solid #006bad; outline-offset: 2px; border-radius: 50%; }
  .dimensional-motion .hero-media { transform: translateY(var(--hero-drift, 0px)); }
  .dimensional-motion .hero-content { translate: 0 var(--hero-copy-drift, 0px); opacity: var(--hero-presence, 1); }
  .hero-content:focus-within { opacity: 1 !important; }
  .dimensional-motion .hero-shade::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 64% 36%, #93e1ef30, transparent 50%); animation: dimensional-light 1.8s ease-out both; }
  .dimensional-motion .history-archive > a { transform-origin: 50% 70%; }
  .dimensional-motion .history-archive img { filter: sepia(.08) drop-shadow(0 16px 15px #02348324); }
  /* Local sticky pause, bounded by the existing story; never a fixed full-screen scene. */
  .dimensional-motion .history-layout { align-items: start; }
  .dimensional-motion .history-archive { position: sticky; top: 144px; align-self: start; }
  .dimensional-motion .history-archive.motion-too-tall { position: relative; top: auto; }
  .dimensional-motion .motion-act { position: relative; isolation: isolate; }
  .dimensional-motion .motion-act::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 18% 50%, #85dded80, transparent 68%); opacity: var(--act-light, 0); }
  .dimensional-motion #consorcios.motion-act::before { background: radial-gradient(ellipse at 82% 50%, #d9ba7940, transparent 68%); }
  .dimensional-motion #energia-solar.motion-act::before { background: radial-gradient(ellipse at 20% 50%, #47cae34d, transparent 68%); }
  .dimensional-motion .motion-act .topic-image { translate: 0 var(--act-drift, 0px); }
  /* An overlay mask slides away using only transform; the existing image crop is preserved. */
  .dimensional-motion .motion-act .topic-image::after { content: ''; position: absolute; inset: -1px; background: #bcecf6; pointer-events: none; transform: scaleX(1); transform-origin: right; transition: transform 1.1s cubic-bezier(.2,.75,.25,1); }
  .dimensional-motion #consorcios .topic-image::after { background: #eee9df; transform-origin: left; }
  .dimensional-motion .motion-act .topic-image.in-view::after { transform: scaleX(0); }
  .dimensional-motion .motion-act .topic-copy.reveal { transform: translateX(calc(var(--act-direction) * 24px)); transition-duration: 1s; }
  .dimensional-motion .motion-act .topic-copy.in-view { transform: none; }
  .dimensional-motion :is(.directory-card, .insurance-card, .feature-card).reveal { transition-delay: calc(var(--card-order,0) * 90ms) !important; }
  .dimensional-motion :is(.directory-card, .insurance-card, .feature-card).in-view:hover,
  .dimensional-motion :is(.directory-card, .insurance-card, .feature-card).in-view:focus-within { transform: perspective(1100px) translateY(-7px) scale(1.015); transition-delay: 0ms !important; }
  .dimensional-motion .quotation-shortcut { transition: transform .55s var(--ease); }
  .dimensional-motion .quotation-shortcut:hover { transform: translateY(-4px); }
  .dimensional-motion .partner-symbols { transition: translate .35s ease-out, rotate .35s ease-out; }
  .dimensional-motion .partner-emblem-glow { scale: 1.15; }
}
@keyframes dimensional-light { from { opacity: 0; transform: translateX(-3%); } to { opacity: 1; transform: none; } }
@media (max-width: 959px), (max-height: 479px) {
  .reveal { transition-duration: .45s; transform: translateY(12px); }
  .reveal.in-view { transform: none; }
  .hero-orbit, .moment-halo, .moment-icon { animation: none; }
  .cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal, .reveal-image, .motion-word { opacity: 1 !important; transform: none !important; }
  .hero-media, .hero-content, .history-archive > a, .partner-symbols, .topic-image { transform: none !important; translate: none !important; rotate: none !important; opacity: 1 !important; }
  .history-archive { position: relative !important; top: auto !important; }
}

/* Gentle entrances: content is readable before the first intersection callback. */
.reveal, .history-archive.reveal { opacity: .9; transform: translateY(7px); transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: 0ms !important; }
.reveal.in-view, .history-archive.reveal.in-view { opacity: 1; transform: none; }
.dimensional-motion .motion-act .topic-copy.reveal { transform: translateX(calc(var(--act-direction) * 7px)); transition-duration: .65s; }
.dimensional-motion .motion-act .topic-copy.in-view { transform: none; }
.dimensional-motion .motion-act .topic-image::after { opacity: .12; transition-duration: .7s; }
.dimensional-motion :is(.directory-card, .insurance-card, .feature-card).reveal { transition-delay: calc(var(--card-order,0) * 40ms) !important; }
.protection-context { display: none; }
/* Vertical, complete content is the no-JS, touch, reduced-motion and zoom fallback. */
@media (min-width: 600px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  .carousel-enabled { position: relative; background: transparent; }
  .carousel-enabled .protection-stage { position: sticky; top: 118px; height: auto; padding: clamp(24px, 3vh, 36px) 0 30px; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(8px, 1.5vh, 14px); }
  .carousel-enabled .protection-context { display: flex; align-items: center; gap: 24px; margin: 0 64px; min-height: 34px; color: #a3e5f2; }
  .protection-context a { padding: 8px 0; border-bottom: 2px solid transparent; font-size: 1rem; text-decoration: none; transition: color .35s, border-color .35s; }
  .protection-context a[aria-current] { color: white; border-color: #51cde5; }
  .protection-count { margin-left: auto; font-variant-numeric: tabular-nums; font-size: .9375rem; letter-spacing: .09em; }
  .carousel-enabled .protection-viewport { overflow: clip; flex: none; padding: 0 0 0 64px; }
  .carousel-enabled .protection-track { display: flex; gap: 28px; width: 100%; will-change: transform; }
  .carousel-enabled .topic-section { flex: 0 0 calc(100% - 116px); min-width: 0; height: var(--carousel-panel-height, clamp(330px, calc(100vh - 210px), 520px)); padding: 30px 24px; border: 1px solid #78d9eb3d; border-radius: 26px; background: #d9f4fa; }
  .carousel-enabled #consorcios { background: #f4f5f3; }
  .carousel-enabled #energia-solar { background: #cef1f9; }
  .carousel-enabled .topic-grid { width: 100%; height: 100%; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(24px,3vw,48px); align-items: center; }
  .carousel-enabled .topic-image { width: 100%; max-height: 100%; aspect-ratio: 3/2; order: 0; border-radius: 18px 58px 18px 18px; box-shadow: none; }
  .carousel-enabled .topic-copy h2 { font-size: clamp(1.7rem,2.7vw,2.7rem); }
  .carousel-enabled .topic-copy > p:not(.eyebrow) { margin: 12px 0 18px; font-size: clamp(.9375rem,1.3vw,1rem); }
  .carousel-enabled .topic-copy .eyebrow { margin-bottom: 12px; }
  .carousel-enabled .reveal, .dimensional-motion .carousel-enabled .topic-copy.reveal { opacity: 1; transform: none; translate: none; transition: none; }
  .dimensional-motion .carousel-enabled .topic-image { translate: none; }
  .dimensional-motion .carousel-enabled .topic-image::after { display: none; }
  .carousel-enabled .topic-section:focus-visible { outline: 3px solid #7fdbec; outline-offset: -5px; }
  .protection-context a:focus-visible { outline: 2px solid #7fdbec; outline-offset: 4px; }
}
@media (min-width: 600px) and (max-width: 959px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  .section-progress { display: none; }
  .carousel-enabled .protection-stage { top: 80px; padding: 18px 0 20px; gap: 6px; }
  .carousel-enabled .protection-context { gap: 14px; margin-inline: 20px; min-height: 30px; }
  .carousel-enabled .protection-context a { padding: 6px 0; font-size: .75rem; }
  .carousel-enabled .protection-count { font-size: .75rem; }
  .carousel-enabled .protection-viewport { padding-left: 20px; }
  .carousel-enabled .protection-track { gap: 14px; }
  .carousel-enabled .topic-section { flex-basis: calc(100% - 40px); height: var(--carousel-panel-height, clamp(330px, calc(100vh - 190px), 410px)); padding: 18px; }
  .carousel-enabled .topic-grid { grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 18px; }
  .carousel-enabled .topic-image { border-radius: 14px 42px 14px 14px; }
  .carousel-enabled .topic-copy h2 { font-size: clamp(1.4rem, 3.8vw, 1.75rem); }
  .carousel-enabled .topic-copy .eyebrow { margin-bottom: 6px; font-size: .6875rem; }
  .carousel-enabled .topic-copy > p:not(.eyebrow) { margin: 8px 0 12px; font-size: .875rem; line-height: 1.45; }
}
@media (min-width: 960px) and (max-width: 1180px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  .section-progress { display: none; }
  .carousel-enabled .protection-stage { top: 80px; }
  .carousel-enabled .protection-context { margin-inline: 40px; }
  .carousel-enabled .protection-viewport { padding-left: 40px; }
  .carousel-enabled .topic-section { flex-basis: calc(100% - 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .protection-journey { height: auto !important; }
  .protection-stage { position: static !important; height: auto !important; }
  .protection-track { display: block !important; transform: none !important; }
  .protection-context { display: none !important; }
  .reveal, .history-archive.reveal { opacity: 1; transform: none; }
}


/* History has its own image/text observers; generic subtle reveals no longer mask it. */
.history-section .reveal, .history-section .reveal.in-view { opacity: 1; transform: none; transition: none; }
.history-archive > a { position: relative; isolation: isolate; }
.history-archive .history-pieces { position: absolute; inset: 0; display: block; pointer-events: none; }
.history-archive .history-piece { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
.dimensional-motion .history-archive img, .history-archive .history-piece { filter: none; }
.history-archive > a { filter: drop-shadow(0 12px 12px #02348324); }
@media (prefers-reduced-motion: reduce) {
  .history-pieces { display: none !important; }
  .history-archive > a > img { opacity: 1 !important; }
}
/* Medium blue glass is scoped to the three existing solution panels. */
.protection-journey { background: radial-gradient(ellipse at 20% 25%, #008dc2 0, transparent 55%), radial-gradient(ellipse at 85% 80%, #006bad 0, transparent 50%), #022577; }
.protection-track > .topic-section { background: #007bb8; border: 1px solid #caf0f852; box-shadow: inset 0 1px 0 #ffffff35, inset 0 -1px 0 #03176c2b, 0 14px 28px #03045e30; }
.protection-track > #consorcios { background: #007bb8; }
.protection-track > #energia-solar { background: #0070b1; }
.protection-track .topic-copy h2 { color: #fff; }
.protection-track .topic-copy h2 em { color: #c8eff8; }
.protection-track .topic-copy > p:not(.eyebrow) { color: #e5f7fc; }
.protection-track .topic-copy .eyebrow { color: #e5f7fc; }
.dimensional-motion .protection-track .motion-act::before { display: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .protection-track > .topic-section { background: linear-gradient(135deg,#ffffff0a,transparent 60%), rgba(0,124,185,.9); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
  .protection-track > #consorcios { background: linear-gradient(135deg,#ffffff0a,transparent 60%), rgba(0,126,186,.9); }
  .protection-track > #energia-solar { background: linear-gradient(135deg,#ffffff0a,transparent 60%), rgba(0,117,180,.9); }
}
/* Assembly is independent of sticky height; one accessible base, seven permanent masks. */
.dimensional-motion .history-archive,
.dimensional-motion .history-archive.motion-too-tall { position: relative; top: auto; }
.history-photo-layers { position: absolute; inset: 0; display: block; pointer-events: none; }
.history-photo-piece { position: absolute; inset: 0; display: block; opacity: 0; clip-path: var(--piece-clip); background: url('/images/nossa-historia.svg') center / 100% 100% no-repeat; transform-origin: center; }
.history-ready > img,
.history-assembling > img { opacity: 0; transition: opacity .35s ease; }
.history-assembled > img { opacity: 1; }
.history-assembling .history-photo-piece { animation: history-photo-arrive 2400ms cubic-bezier(.16,.74,.18,1) var(--piece-delay) both; }
.history-assembling > img { animation: history-photo-base 3600ms ease both; }
@keyframes history-photo-arrive {
  0% { opacity: 0; transform: translate(var(--piece-x),var(--piece-y)) rotate(var(--piece-rotation)) scale(.88); filter: blur(14px); }
  24% { opacity: .08; }
  56% { opacity: .44; filter: blur(7px); }
  82% { opacity: .84; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes history-photo-base {
  0%,92% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 900px), (pointer: coarse) {
  .history-assembling .history-photo-piece { animation-name: history-photo-arrive-mobile; }
  @keyframes history-photo-arrive-mobile {
    0% { opacity: 0; transform: translate(calc(var(--piece-x) * .45),calc(var(--piece-y) * .45)) rotate(calc(var(--piece-rotation) * .5)) scale(.94); filter: blur(9px); }
    30% { opacity: .12; }
    65% { opacity: .56; filter: blur(4px); }
    100% { opacity: 1; transform: none; filter: blur(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .history-photo-layers { display: none !important; }
  .history-photo-piece, .history-ready > img, .history-assembling > img { animation: none !important; opacity: 1 !important; }
  .history-archive > a > img { opacity: 1 !important; }
}

@media (min-width: 600px) and (min-height: 480px) and (prefers-reduced-motion: no-preference) {
  /* The wrapper is only scroll distance; the compact stage owns the visible surface. */
  .protection-journey.carousel-enabled { background: transparent; }
  .carousel-enabled .protection-stage { background: radial-gradient(ellipse at 20% 25%, #008dc2 0, transparent 55%), radial-gradient(ellipse at 85% 80%, #006bad 0, transparent 50%), #022577; }
  .carousel-enabled .protection-context { flex: none; }
}
