/* ---------- Hero ---------- */
/* Video is a permanent full-bleed background — headline overlays its
   top band, CTAs overlay its bottom band, and the brand mark animates
   through the untouched middle. Same structure at every breakpoint. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-height) + var(--space-2));
  padding-bottom: var(--space-4);
  text-align: center;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* On tall/narrow (portrait) viewports, cover crops almost all of the
   video's width to fill the height, zooming and clipping the brand
   mark. The video's own background is white (matching the page), so
   switching to contain here just letterboxes seamlessly instead. */
@media (max-aspect-ratio: 3/4) {
  .hero-video-bg video {
    object-fit: contain;
  }
}

/* Soft top/bottom blend so the video reads as emerging from the header
   and settling into the section below, rather than a hard flat edge. */
.hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(80px, 14vw, 180px);
  pointer-events: none;
}

.hero-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.hero-overlay {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Guarantees the headline and the buttons never sit closer to the
     middle than this, keeping them clear of the brand mark that
     animates in the video's vertical centre — regardless of how much
     (or little) text content there is, and regardless of browser zoom
     shrinking the effective viewport height. justify-content:space-between
     will still use MORE than this whenever the hero is tall enough to
     spare it; this only sets the floor. */
  gap: clamp(140px, 46vh, 520px);
  align-items: center;
}

.hero-top,
.hero-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-headline {
  font-size: var(--fs-hero);
  line-height: 1.2;
  max-width: 38ch;
  margin: 0 auto;
  /* Sits directly on the video with no background of its own — a soft
     white halo keeps it legible if it ever lands over the brand mark
     (a different browser's font metrics, an OS zoom level, a font
     still swapping in) rather than looking broken. */
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 22px rgba(255, 255, 255, 0.85),
    0 0 40px rgba(255, 255, 255, 0.7);
}

.hero-headline em {
  font-style: normal;
  color: var(--color-primary);
  position: relative;
}

.hero .btn-row {
  justify-content: center;
}

.hero-note {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 16px rgba(255, 255, 255, 0.8);
}

/* One-time reveal on load — plays once, then holds its resting state.
   Not scroll-triggered like .reveal-up: the hero is visible immediately. */
.hero-anim {
  animation: hero-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-anim-delay-1 { animation-delay: 200ms; }
.hero-anim-delay-2 { animation-delay: 380ms; }

@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim {
    animation: none;
  }
}

@media (max-width: 560px) {
  .hero .btn-row {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin-top: 160px;
  }

  .hero .btn-row .btn-beam {
    width: 100%;
    overflow: hidden;
  }

  .hero .btn-row .btn-beam::before,
  .hero .btn-row .btn-beam::after {
    inset: 0;
  }

  .hero .btn-row .btn {
    width: 100%;
  }
}

/* ---------- Sobre / Apresentação ---------- */
.about-section .container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: var(--space-16);
  row-gap: var(--space-5);
  align-items: start;
}

.about-copy p + p {
  margin-top: var(--space-5);
}

.about-heading {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  font-size: clamp(1.2rem, 2.4vw, 2.25rem);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}

/* Hand-drawn underline: a filled brush-stroke shape (thick belly,
   tapered pointed ends, gentle upward arc) that wipes in left-to-right
   like a marker, holds, fades out, pauses, then draws again. */
.about-heading-underline {
  position: absolute;
  left: -2%;
  bottom: -10px;
  width: 104%;
  height: 22px;
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  animation: pen-underline 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.about-heading-underline path {
  fill: var(--color-accent);
}

@keyframes pen-underline {
  0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  32%  { clip-path: inset(0 0% 0 0);   opacity: 1; }
  55%  { clip-path: inset(0 0% 0 0);   opacity: 1; }
  70%  { clip-path: inset(0 0% 0 0);   opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-heading-underline {
    animation: none;
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .about-heading {
    white-space: normal;
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .about-heading-underline {
    display: none;
  }
}

.about-cta {
  grid-column: 1 / -1;
  margin-top: 0;
  transition: color var(--transition-base);
}

.about-cta:hover,
.about-cta:focus-visible {
  color: var(--color-primary);
}

.about-checklist {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}

.about-checklist h3 {
  margin-bottom: var(--space-5);
}

.about-checklist ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}

.about-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text);
}

.about-checklist li svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent-dark);
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .about-checklist ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .about-section .container {
    grid-template-columns: 1fr;
  }
}

/* ---------- Diferenciais ---------- */
/* Soft blue rises out of the white sections above/below it instead of
   a hard band edge, so the page reads as one continuous surface. */
.differentials-section {
  padding: var(--space-16) 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    var(--color-primary-light) 15%,
    var(--color-primary-light) 85%,
    var(--color-bg) 100%
  );
}

.differentials-marquee {
  overflow: hidden;
  width: 100%;
  /* Vertical breathing room so the hover lift (translateY) and its
     shadow aren't clipped by overflow:hidden on the row. */
  padding: 12px 0;
  margin: -12px 0;
  /* Fades the row's own left/right edges so cards dissolve in and out
     of view rather than clipping abruptly. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.differentials-track {
  display: flex;
  width: max-content;
  gap: var(--space-5);
  animation: differentials-scroll 38s linear infinite;
}

.differentials-marquee:hover .differentials-track {
  animation-play-state: paused;
}

@keyframes differentials-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.differential-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.differential-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.differential-card .card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}

.differential-card .card-icon svg {
  width: 20px;
  height: 20px;
}

.differential-card p {
  font-size: var(--fs-small);
  color: var(--color-heading);
  line-height: 1.6;
}

@media (max-width: 560px) {
  .differential-card {
    flex: 0 0 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .differentials-track {
    animation: none;
    overflow-x: auto;
  }
}

/* ---------- Serviços em destaque ---------- */
.services-section {
  background: var(--color-bg);
}

.services-section .section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  gap: var(--space-6);
}

.services-section .section-heading .heading-text {
  max-width: 640px;
}

.services-section .section-heading h2 {
  color: var(--color-primary);
}

.services-section .section-heading .heading-text:has(.nowrap-heading) {
  max-width: none;
}

@media (max-width: 700px) {
  .services-section .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

.services-carousel {
  position: relative;
}

.services-carousel-arrow {
  display: none;
}

@media (max-width: 640px) {
  .services-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
  }

  .services-grid::-webkit-scrollbar {
    display: none;
  }

  .services-grid .service-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .services-carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40%;
    right: var(--space-2);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-bg);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    z-index: 2;
  }

  .services-carousel-arrow svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- CTA trio ---------- */
.cta-trio-section {
  background: var(--color-primary-light);
  border-top: 1px solid var(--color-border);
  position: relative;
  padding-bottom: 81.6px;
}

.cta-trio-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
}

.cta-trio-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  box-shadow: var(--shadow-card-hover);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cta-trio-watermark {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  transform-origin: left top;
  font-family: 'Akira Expanded', var(--font-body);
  font-weight: 900;
  font-size: 60px;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-primary-light);
  white-space: nowrap;
}

.cta-trio-watermark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0) 25%
  );
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}

.cta-trio-watermark--cliente { transform: scaleX(1.33); }
.cta-trio-watermark--parceiro { transform: scaleX(1); }
.cta-trio-watermark--estatal { transform: scaleX(1.38); }

.cta-trio-card p {
  font-size: var(--fs-small);
  flex-grow: 1;
  margin: var(--space-16) 0 var(--space-6);
  position: relative;
}

.cta-trio-card .btn {
  position: relative;
}

/* ---------- Fale Conosco ---------- */
.contact-form-section {
  background: var(--color-primary-light);
  padding-top: 81.6px;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: center;
}

.contact-form-info .eyebrow {
  margin-bottom: var(--space-4);
}

.contact-form-info p {
  font-size: var(--fs-lead);
  color: var(--color-heading);
  line-height: 1.6;
}

.contact-form-tagline {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-primary);
}

.contact-form-details {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-form-details li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact-form-details svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact-form-details a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-heading);
  transition: color var(--transition-base);
}

.contact-form-details a:hover {
  color: var(--color-accent-dark);
}

.contact-form-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form-subtitle {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: calc(var(--space-2) * -1);
}

.contact-form-card h3 {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-heading);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(43, 63, 145, 0.12);
}

.form-field .field-error {
  display: none;
  font-size: var(--fs-xs);
  color: #C65454;
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #C65454;
  box-shadow: 0 0 0 3px rgba(198, 84, 84, 0.12);
}

.form-field.has-error .field-error {
  display: block;
}

.contact-form-card .form-status {
  display: none;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
}

.contact-form-card .form-status.is-success {
  display: block;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.contact-form-card .form-status.is-error {
  display: block;
  background: rgba(198, 84, 84, 0.1);
  color: #C65454;
}

.form-submit {
  margin-top: var(--space-2);
  width: 100%;
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

@media (max-width: 900px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-form-card {
    padding: var(--space-8);
  }
}