/* Extra styles loaded after theme.css: mobile sticky CTA, mobile language selector,
   footer titles and the 404 page. Uses the variables defined in theme.css. */

/* Footer titles: <p> instead of <h5> (keeps the heading order), same look as before */
.footer-title {
  font-family: 'Neutral Face', 'Manrope', Arial, sans-serif;
  line-height: 1.2;
}

/* Language selector inside the collapsed menu (< 992px).
   theme.css hides .language-switcher below 768px with !important; the extra class wins. */
@media (max-width: 991.98px) {
  .language-switcher.language-switcher-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 0 1rem;
  }
}

/* Clients marquee: the gap between items is a margin, so the track period is
   exactly half of its width and the loop has no jump at the seam */
.clients-marquee-track {
  gap: 0;
}

.client-name {
  margin-right: 4rem;
}

/* Solutions section: base styles for .solutions-section and its cards.
   theme.css never carried them (only .solution-result), so the cards rendered
   unstyled. Same anatomy as .case-card, taken from the website UI kit. */
.solutions-section {
  background: linear-gradient(180deg, var(--bs-secondary-color) 0%, var(--bs-primary-color) 100%);
  position: relative;
}

.solutions-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bs-text-primary-color), transparent);
  opacity: 0.2;
}

.solution-card {
  height: 100%;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.4) 0%, rgba(18, 18, 18, 0.4) 100%);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.solution-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.7) 0%, rgba(18, 18, 18, 0.7) 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(239, 241, 255, 0.08);
}

.solution-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: rgba(239, 241, 255, 0.1);
  color: var(--bs-text-secondary-color);
  border: 1px solid rgba(239, 241, 255, 0.2);
  letter-spacing: 0.5px;
}

.solution-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}

.solution-description {
  font-size: 0.95rem;
  color: var(--bs-text-primary-color);
  line-height: 1.6;
  flex-grow: 1;
}

/* Result line sits at the bottom of the card; cards without one just end after the description */
.solution-result {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
  font-weight: 500;
  color: #eff1ff;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .solution-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .solution-card {
    padding: 1.25rem;
  }
}

/* Services: featured full-width card (Applied Legal AI).
   Same anatomy as .service-card; scale, a radial light behind the icon and a
   two-column body set it apart as the lead offer. The head wrapper is
   display: contents so icon, title and subtitle sit on the card grid and the
   body column starts on the same line as the title; the icon is anchored
   at the base of the left column. */
.service-card-featured {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 3rem;
  row-gap: 1.25rem;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  padding: 3rem;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(ellipse 55% 130% at 10% 35%, rgba(239, 241, 255, 0.1) 0%, transparent 70%),
    linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(18, 18, 18, 0.6) 100%);
}

.service-card-featured:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(ellipse 55% 130% at 10% 35%, rgba(239, 241, 255, 0.14) 0%, transparent 70%),
    linear-gradient(135deg, rgba(30, 30, 30, 0.8) 0%, rgba(18, 18, 18, 0.8) 100%);
}

.service-featured-head {
  display: contents;
}

.service-card-featured .service-icon {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  width: 96px;
  height: 96px;
  position: relative;
  z-index: 1;
}

.service-card-featured .service-title {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
}

.service-card-featured .service-subtitle {
  grid-column: 1;
  grid-row: 2;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-top: -0.5rem;
  padding-right: 1rem;
  opacity: 0.85;
}

.service-featured-body {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  position: relative;
  z-index: 1;
  padding-left: 3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.service-featured-body .service-description {
  font-size: 1rem;
  line-height: 1.75;
}

.service-milestones {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
}

.service-milestones li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.milestone-num {
  font-family: 'Neutral Face', 'Manrope', Arial, sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  color: #eff1ff;
  opacity: 0.85;
}

.milestone-label {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bs-text-secondary-color);
}

@media (max-width: 991.98px) {
  .service-card-featured {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: 2rem 1.5rem;
  }

  .service-card-featured .service-icon {
    align-self: start;
  }

  .service-card-featured .service-icon,
  .service-card-featured .service-title,
  .service-card-featured .service-subtitle,
  .service-featured-body {
    grid-column: 1;
    grid-row: auto;
  }

  .service-featured-body {
    margin-top: 0.75rem;
    padding-left: 0;
    padding-top: 1.75rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 575.98px) {
  .service-milestones {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .service-card-featured {
    padding: 1.5rem 1.25rem;
  }

  .service-card-featured .service-title {
    font-size: 1.75rem;
  }

  .service-card-featured .service-icon {
    width: 80px;
    height: 80px;
  }
}

/* About: founder block (the glow is switched on by main.js once the image has loaded). The portrait is the dominant element (about 40% of the
   block), tonal emphasis only, a radial light behind it. Raised to #121212 in
   the image itself, so it has no edge on the page background. */
.founder-block {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  column-gap: 4rem;
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.founder-portrait {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}

.founder-portrait::before {
  content: '';
  opacity: 0;
  transition: opacity 0.8s ease;
  position: absolute;
  inset: -12% -18% -4% -18%;
  background: radial-gradient(ellipse 50% 50% at 58% 38%, rgba(239, 241, 255, 0.14) 0%, transparent 72%);
  pointer-events: none;
}

.founder-portrait.is-loaded::before {
  opacity: 1;
}

.founder-portrait picture {
  position: relative;
  display: block;
}

.founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* the photo's floor is #121212, so lighten lets the glow behind it show through */
  mix-blend-mode: lighten;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 60%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 60%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 16%);
  mask-composite: intersect;
}

.founder-text {
  position: relative;
}

.founder-name {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bs-text-secondary-color);
}

.founder-role {
  font-weight: 400;
  color: #8a8a8a;
}

.founder-bio {
  max-width: 34em;
  margin-top: 1.75rem;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--bs-text-primary-color);
}

.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-text-primary-color);
}

.founder-link:hover {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--bs-text-secondary-color);
}

.founder-link .arrow-icon {
  rotate: -45deg;
  transition: rotate 0.3s ease;
}

.founder-link:hover .arrow-icon {
  rotate: 0deg;
}

@media (max-width: 991.98px) {
  .founder-block {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    margin-top: 3.5rem;
    padding-top: 3rem;
  }

  .founder-portrait {
    max-width: 340px;
    justify-self: start;
  }

  /* keep the light inside the viewport: a wider glow would add horizontal scroll */
  .founder-portrait::before {
    inset: -10% -4% -4% -10%;
  }
}

/* Mobile sticky CTA (< 576px; hidden at 576px+ by d-sm-none) */
.mobile-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1025;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background-color: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-sticky-cta .btn {
  justify-content: center;
}

.mobile-sticky-cta.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Keep the end of the page clear of the fixed button */
@media (max-width: 575.98px) {
  body.has-sticky-cta {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

/* 404 page */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

.error-page .error-logo {
  max-width: 100px;
  height: auto;
  margin-bottom: 3rem;
}

.error-page .error-code {
  font-family: 'Neutral Face', 'Manrope', Arial, sans-serif;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--bs-text-secondary-color);
  opacity: 0.9;
}

.error-page .error-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin: 2.5rem 0;
  max-width: 760px;
  width: 100%;
}

.error-page .error-title {
  font-family: 'Neutral Face', 'Manrope', Arial, sans-serif;
  font-size: 1.25rem;
  color: var(--bs-text-secondary-color);
  margin-bottom: 0.75rem;
}

.error-page .error-text {
  font-size: 0.95rem;
  color: var(--bs-text-primary-color);
}

.error-page .error-text + .error-text {
  margin-top: 0.5rem;
}

@media (max-width: 575.98px) {
  .error-page .error-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Stat cards: equal height per row */
.stats-grid .col-md-6 {
  display: flex;
}

.stat-item {
  flex: 1;
}

/* Cases: numeral as a system, anchored at the base of each card (the description grows, so cards of equal height end on the numeral instead of on empty space) */
.case-num {
  align-self: flex-start;
  font-family: 'Neutral Face', 'Manrope', Arial, sans-serif;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(239, 241, 255, 0.3);
  transition: var(--transition-smooth);
}

.case-card:hover .case-num {
  color: rgba(239, 241, 255, 0.55);
}

/* Type: Neutral Face is unicase and drops accents (Í, Ã, Ç), so every text that
   carries PT-BR copy is set in Manrope. Neutral Face stays on numerals and logos.
   Uppercase titles keep their case through text-transform; card titles go mixed case. */
.section-heading h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 3rem;
  /* wider glyphs than Neutral Face: the fade ends on a lighter grey so the last word stays readable */
  background-image: linear-gradient(130deg, #eff1ff 35%, #7b7b84 85%);
}

.nav-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.client-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.14em;
}

.service-title,
.solution-title,
.case-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
}

.service-subtitle {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.about-icon text {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .hero-heading {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .hero-heading {
    font-size: 1.35rem;
  }
}

/* Hero below the sticky navbar (64px on desktop): the fold no longer cuts the scroll hint */
@media (min-width: 992px) {
  .hero-section {
    height: calc(100vh - 64px);
    height: calc(100svh - 64px);
  }
}

/* Phones: the sticky booking bar is the call to action, the scroll hint would sit under it */
@media (max-width: 575.98px) {
  .scroll-down {
    display: none;
  }
}

/* Short phones: theme.css clips the hero title block at 25vh. Unclip it and drop the second
   subtitle line, which would cross the logo in the photo (it repeats the #sobre heading anyway) */
@media (max-width: 575.98px) and (max-height: 760px) {
  .hero-title {
    max-height: none;
  }

  .hero-subtitle .hero-subheading + .hero-subheading {
    display: none;
  }
}

/* Wide desktops: theme.css zeroes this padding; Manrope accents need the room */
@media (min-aspect-ratio: 16/10) and (min-width: 992px) {
  .hero-section .hero-title.pt-5 {
    padding-top: 1.5rem !important;
  }
}

.hero-subheading {
  text-wrap: balance;
}

/* Privacy modal headings: Manrope keeps PT accents */
.modal-title,
.privacy-policy h6 {
  font-family: 'Manrope', sans-serif;
}

/* Smallest phones (360x640): lift the title block so the subtitle clears the logo in the photo */
@media (max-width: 575.98px) and (max-height: 660px) {
  .hero-section .hero-title.pt-5 {
    padding-top: 2rem !important;
  }
}

/* Fenalaw 2026 promo (temporary, remove after 2026-10-31)
   Bar above the navbar (>= 992px only) and highlight section after the hero.
   Both ship with the hidden attribute; initFenalawPromo() in main.js lifts it
   until 2026-10-27 18:00 (end of the masterclass) and adds body.has-promo-bar while the bar is shown. */
:root {
  --promo-bar-h: 36px;
}

.promo-bar[hidden],
.fenalaw-section[hidden] {
  display: none !important;
}

/* Bar: in flow above the sticky navbar, so it scrolls away and the navbar still sticks at top: 0 */
.promo-bar {
  display: none;
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .promo-bar {
    display: block;
    height: var(--promo-bar-h);
    background: linear-gradient(90deg, rgba(239, 241, 255, 0.03), rgba(239, 241, 255, 0.1), rgba(239, 241, 255, 0.03));
    background-color: #181819;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Keep first screen = bar + navbar + hero: the hero gives up the bar's height */
  body.has-promo-bar .hero-section {
    height: calc(100vh - 64px - var(--promo-bar-h));
    height: calc(100svh - 64px - var(--promo-bar-h));
  }
}

.promo-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 100%;
  padding: 0 1.5rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bs-text-secondary-color);
}

.promo-bar-link .arrow-icon {
  flex: none;
  rotate: -45deg;
  transition: rotate 0.3s ease;
}

.promo-bar-link:hover .arrow-icon {
  rotate: 0deg;
}

/* Section: same family as .solutions-section (dark gradient, 1px top rule), with a
   radial light behind the headline, which is the dominant element */
.fenalaw-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 22% 45%, rgba(239, 241, 255, 0.09) 0%, transparent 70%),
    linear-gradient(180deg, var(--bs-secondary-color) 0%, var(--bs-primary-color) 100%);
}

.fenalaw-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bs-text-primary-color), transparent);
  opacity: 0.2;
}

.fenalaw-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 4rem;
  align-items: center;
}

.fenalaw-main {
  position: relative;
}

.fenalaw-badge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.fenalaw-badge img {
  display: block;
  width: clamp(170px, 20vw, 250px);
  height: auto;
}

/* The rule separates the label from the seal, so it is structure */
.fenalaw-kicker {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 1;
}

/* Manrope keeps PT accents; tonal emphasis only (TLW has no accent colour) */
.fenalaw-headline {
  margin-top: 2.5rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: none;
  text-wrap: balance;
}

.fenalaw-line {
  display: block;
  color: var(--bs-text-secondary-color);
}

.fenalaw-line-soft {
  color: #8a8a8a;
}

.fenalaw-theme {
  max-width: 30em;
  margin-top: 2rem;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--bs-text-primary-color);
}

/* Fact sheet: facts divided by rules, the date leads */
.fenalaw-panel {
  position: relative;
  padding: 0.5rem 2rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(18, 18, 18, 0.6) 100%);
}

.fenalaw-fact {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fenalaw-fact p {
  text-wrap: balance;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--bs-text-secondary-color);
}

.fenalaw-fact-when p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fenalaw-icon {
  flex: none;
  margin-top: 0.1rem;
  color: var(--bs-text-primary-color);
}

.fenalaw-fact-when .fenalaw-icon {
  margin-top: 0.2rem;
}

.fenalaw-action {
  margin-top: 1.75rem;
}

.fenalaw-offer {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(239, 241, 255, 0.2);
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--bs-text-secondary-color);
}

.fenalaw-cta {
  width: 100%;
  margin-top: 1rem;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .fenalaw-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }

  .fenalaw-headline {
    margin-top: 2rem;
    font-size: clamp(2.25rem, 10vw, 3.5rem);
  }

  .fenalaw-theme {
    margin-top: 1.5rem;
    font-size: 1.05rem;
  }

  .fenalaw-panel {
    padding: 0.25rem 1.5rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .fenalaw-badge {
    gap: 1rem;
  }

  .fenalaw-badge img {
    width: 150px;
  }

  .fenalaw-fact-when p {
    font-size: 1.3rem;
  }
}