/* ============================================================
   Thiago Liguori — Portfolio site (custom layout on top of DS)
   Only layout/composition here; all colors/type/spacing via tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--muted { background: var(--surface-muted); }
.section--soft  { background: var(--gray-50); }
.section--blue  { background: var(--surface-accent); color: var(--text-on-primary); }
.section--navy  { background: var(--wash-navy); color: var(--text-on-dark); }

/* ---------- Shared bits ---------- */
.eyebrow {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-overline);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
}
.eyebrow::before {
  content: '●';
  font-size: 0.45em;
  color: var(--color-primary);
  flex-shrink: 0;
}
.section--blue .eyebrow,
.section--navy .eyebrow { color: var(--blue-200); }
.section--blue .eyebrow::before,
.section--navy .eyebrow::before { color: var(--blue-200); }

.section-head { max-width: 760px; margin-bottom: var(--space-12); }
.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--text-ink);
  margin: 0;
  text-wrap: balance;
}
.section--blue .section-title,
.section--navy .section-title { color: var(--white); }
.section-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin: var(--space-5) 0 0;
  max-width: 60ch;
}
.section--navy .section-sub { color: var(--text-on-dark-muted); }

.text-blue { color: var(--color-primary); }

/* ---------- Header — floating pill ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: var(--space-3) var(--space-5);
  background: transparent;
}
.site-header .tl-nav {
  max-width: var(--container-max); margin-inline: auto;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: 0 4px 24px rgba(0,14,51,0.09);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-stuck .tl-nav {
  box-shadow: 0 6px 32px rgba(0,14,51,0.16);
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--wash-hero); }
/* dot-grid texture */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(37,99,235,0.14) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16);
  align-items: center; padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--text-ink);
  margin: var(--space-5) 0 0;
}
.hero__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  margin: var(--space-6) 0 0;
  max-width: 46ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* italic accent word in title */
.hero__title-em { font-style: italic; color: var(--color-primary); }

/* stats bar in hero */
.hero__stats-bar {
  display: inline-flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-8);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(37,99,235,0.13);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-6);
  box-shadow: 0 2px 14px rgba(0,14,51,0.07);
}
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat-num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3); line-height: 1;
  color: var(--color-primary); letter-spacing: var(--ls-tight);
}
.hero__stat-label {
  font-size: var(--fs-caption); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
.hero__stat-divider {
  width: 1px; height: 36px; background: var(--border-subtle); flex-shrink: 0;
}

/* portrait — bleeds into the bottom edge of the hero.
   The negative bottom margin cancels the grid's bottom padding so the
   image runs past the section boundary and is clipped by .hero's
   overflow:hidden. The crop then reads as intentional framing instead
   of a cut-off body floating in empty space. */
.portrait {
  position: relative; justify-self: center;
  width: 100%; max-width: 530px;
  align-self: end;
  margin-bottom: calc(-1 * clamp(2.5rem, 1rem + 6vw, 5.5rem));
}
.portrait__glow {
  position: absolute; inset: -10% -6% -4% -6%;
  background: radial-gradient(58% 56% at 56% 42%, var(--blue-300) 0%, rgba(126,169,230,0) 70%);
  filter: blur(10px); z-index: 0;
}
.portrait__frame {
  position: relative; z-index: 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
  background: var(--navy-800);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* cut-out (transparent bg) treatment: figure floats on the glow */
.portrait--cutout .portrait__img {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto;
  /* softer, wider shadow: seats the figure on the background instead of
     making it read as a sticker pasted on top */
  filter: drop-shadow(0 20px 38px rgba(0, 14, 51, 0.20));
}
.portrait__badge { position: absolute; z-index: 2; left: -14px; bottom: 26px; }
/* badge sits above the bleed line so it is never clipped */
.portrait--cutout .portrait__badge { left: -8px; bottom: 20%; }
.portrait__name {
  position: absolute; z-index: 2; right: -10px; top: 22px; white-space: nowrap;
  background: var(--white); color: var(--text-ink);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  padding: .55em 1em; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}

/* ---------- Stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
.stat__num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--ls-tight);
  color: var(--color-primary);
}
.stat__label { font-family: var(--font-serif); font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-2); }

/* ---------- Perfil ---------- */
.perfil__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.creds li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-strong);
  line-height: var(--lh-snug);
}
.creds__dot {
  width: 22px; height: 22px; border-radius: 999px; margin-top: 1px;
  background: var(--blue-50); color: var(--color-primary);
  display: grid; place-items: center; flex: none;
}
.creds__dot svg { width: 13px; height: 13px; }
.creds strong { font-weight: var(--fw-bold); color: var(--text-ink); }
.creds li:nth-child(-n+3) strong { color: var(--color-primary); }
.creds li:nth-child(-n+3) .creds__dot { background: var(--blue-100); }

/* ---------- Press ---------- */
.press { text-align: center; }
.press__label { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-8); }
.press__logos { max-width: 720px; margin-inline: auto; }
.press__logos img { width: 100%; height: auto; opacity: .72; }

/* ---------- Clientes ---------- */
.logos {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
}
.logo-cell {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; padding: var(--space-6);
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.logo-cell:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.logo-cell img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.logo-cell:hover img { filter: grayscale(0); opacity: 1; }

/* ---------- Eventos gallery ---------- */
.gallery { columns: 3; column-gap: var(--space-5); }
.gallery__item {
  break-inside: avoid; margin-bottom: var(--space-5);
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--navy-900);
}
.gallery__item img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-8) var(--space-4) var(--space-4);
  background: linear-gradient(to top, rgba(0,10,38,.86) 0%, rgba(0,10,38,0) 100%);
  color: var(--white); font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm); letter-spacing: var(--ls-tight);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }

/* ---------- Temas ---------- */
.temas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.temas__grid > * {
  box-shadow: 0 8px 32px rgba(0,14,51,0.22);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.temas__grid > *:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,14,51,0.32);
}
/* hover micro-animations inside the card: index pops, underline sweeps in */
.temas__grid .tl-numcard__index {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.temas__grid > *:hover .tl-numcard__index {
  transform: translateX(4px) scale(1.18);
  opacity: 1;
}
.temas__grid .tl-numcard__title {
  display: inline-block; position: relative; padding-bottom: 2px;
}
.temas__grid .tl-numcard__title::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .85;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.temas__grid > *:hover .tl-numcard__title::after { transform: scaleX(1); }

/* ---------- Contato ---------- */
.contato__card {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center;
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl); padding: clamp(2rem, 1rem + 4vw, 4rem);
  box-shadow: var(--shadow-lg);
}
.contato__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.contato__email {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h4); color: var(--text-ink); text-decoration: none;
  word-break: break-all;
}

/* ---------- Newsletter ---------- */
.news__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-16); align-items: center; }
.news__form-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.news__meta { font-family: var(--font-serif); font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: var(--text-on-dark-muted); padding-block: var(--space-12); }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.footer__links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer__links a { color: var(--text-on-dark-muted); text-decoration: none; font-size: var(--fs-body-sm); transition: color var(--dur-fast) var(--ease-out); }
.footer__links a:hover { color: var(--white); }
.footer__legal { font-size: var(--fs-caption); color: rgba(255,255,255,.5); margin-top: var(--space-6); }

/* ---------- Reveal animation ----------
   Content is visible by default (no-JS safe, reduced-motion safe).
   JS "arms" only below-the-fold elements (adds .armed) to hide them,
   then adds .in on scroll to transition them into view. Above-the-fold
   content is never armed, so it shows instantly. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.armed {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal.armed.in { opacity: 1; transform: none; }

  /* ----- entrance: hero children rise in staggered on page load.
     Above-the-fold elements are never .armed, so keyframes don't
     conflict with the reveal transition. ----- */
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .hero__badges    { animation: rise-in .55s var(--ease-out) both; }
  .hero__title     { animation: rise-in .55s var(--ease-out) .08s both; }
  .hero__lead      { animation: rise-in .55s var(--ease-out) .16s both; }
  .hero__cta       { animation: rise-in .55s var(--ease-out) .24s both; }
  .hero__stats-bar { animation: rise-in .55s var(--ease-out) .34s both; }
  .portrait        { animation: rise-in .7s  var(--ease-out) .12s both; }

  /* soft breathing glow behind the portrait */
  @keyframes glow-pulse {
    0%, 100% { opacity: .8; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.035); }
  }
  .portrait__glow { animation: glow-pulse 7s ease-in-out infinite; }

  /* staggered reveal for credential rows and stat blocks
     (no hover transitions on these, so transition-delay is safe) */
  .creds.armed li,
  .stats.armed .stat {
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .creds.armed.in li,
  .stats.armed.in .stat { opacity: 1; transform: none; }
  .creds.armed.in li:nth-child(2), .stats.armed.in .stat:nth-child(2) { transition-delay: .07s; }
  .creds.armed.in li:nth-child(3), .stats.armed.in .stat:nth-child(3) { transition-delay: .14s; }
  .creds.armed.in li:nth-child(4), .stats.armed.in .stat:nth-child(4) { transition-delay: .21s; }
  .creds.armed.in li:nth-child(5) { transition-delay: .28s; }
  .creds.armed.in li:nth-child(6) { transition-delay: .35s; }
  .creds.armed.in li:nth-child(7) { transition-delay: .42s; }
  .creds.armed.in li:nth-child(8) { transition-delay: .49s; }

  /* buttons: gentle lift on hover */
  .tl-btn {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }
  .tl-btn:hover { transform: translateY(-2px); }
  .tl-btn:active { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* touch devices have no hover (and small screens generally):
   keep gallery captions always visible */
@media (hover: none), (max-width: 560px) {
  .gallery__cap { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */

/* Desktop: the photo column was too narrow (the figure filled 100% of it
   and still read small against the 80px headline). Even out the columns
   and let the portrait reach into the page margin — clipped by .hero —
   so the figure gains presence without stealing width from the copy. */
@media (min-width: 981px) {
  .hero__grid { grid-template-columns: 1fr 1fr; }

  /* The 80px headline set a min-content floor on the text column that no
     amount of fr could shrink, so the photo could never grow — and the
     size gap itself was what made the figure read small. */
  .hero__title { font-size: clamp(3.75rem, 5.2vw, 4.5rem); }

  .portrait {
    max-width: 640px;
    justify-self: end;
    margin-right: clamp(-4.5rem, -3.5vw, -1rem);
  }
}

/* Narrow desktop: the stats bar's nowrap labels were the other floor on
   the text column, squeezing the photo. Compact it (still one line —
   letting it wrap instead made the bar 140px tall and inflated the hero)
   and tighten the column gap so the width goes to the figure. */
@media (min-width: 981px) and (max-width: 1279px) {
  .hero__grid { gap: var(--space-8); }
  .hero__stats-bar { gap: var(--space-4); padding: var(--space-3) var(--space-4); }
  .hero__stat-num { font-size: var(--fs-h4); }
  .hero__stat-label { font-size: .625rem; }
}

/* Hide nav links below 900px: logo + 4 links + full CTA don't fit the pill
   in the tablet range and overflow the page. Logo + CTA alone fit easily. */
@media (max-width: 900px) {
  .tl-nav__links { display: none !important; }
}
@media (max-width: 980px) {
  /* minmax(0, 1fr) prevents grid blowout: lets the track shrink below
     the min-content of wide children (stats bar, large title) instead of
     forcing the whole page wider than the viewport. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-bottom: 0; }
  .hero__copy { min-width: 0; }
  /* single column: photo goes last and bleeds off the bottom of the hero,
     same as desktop — never a floating cut in the middle of the flow */
  .portrait { order: 0; max-width: 380px; align-self: end; margin-bottom: 0; }
  .perfil__grid, .news__grid, .contato__card { grid-template-columns: 1fr; gap: var(--space-10); }
  .temas__grid { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .gallery { columns: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
@media (max-width: 560px) {
  .logos { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 1; }
  .hero__cta .tl-btn { width: 100%; }

  /* ----- mobile hero: content first, photo last -----
     The pitch (badge → title → lead → CTAs → stats) fills the first
     screen; the portrait closes the section instead of pushing the
     headline below the fold. */
  .portrait { order: 0; max-width: 320px; width: 100%; margin-top: var(--space-2); margin-bottom: 0; }
  .hero__grid { gap: var(--space-6); padding-block: 2rem 0; }

  /* hide the LinkedIn badge up top: on mobile it triples with the
     photo badge (Top Voice · 53.000) and the stats bar (53K) */
  .hero__badges .tl-badge--brand { display: none; }

  /* hero title scales down so the longest word never overflows */
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.25rem); }

  /* tighter vertical rhythm on small screens */
  .section { padding-block: 3.75rem; }
  .section-title { font-size: clamp(1.7rem, 7.5vw, 2.15rem); }
  .section-head { margin-bottom: var(--space-8); }
  .stat__num { font-size: 2rem; }
  .contato__email { font-size: var(--fs-body); }

  /* stats bar becomes a full-width, evenly-spaced row; labels wrap,
     dividers hide — no more nowrap blowout */
  .hero__stats-bar {
    display: flex; width: 100%; gap: var(--space-2);
    justify-content: space-between; padding: var(--space-4);
  }
  .hero__stat { flex: 1; align-items: flex-start; }
  .hero__stat-divider { display: none; }
  .hero__stat-num { font-size: var(--fs-h4); }
  .hero__stat-label { font-size: .6rem; white-space: normal; line-height: 1.25; }

  /* navbar: shrink wordmark + CTA so both fit the pill at 375px */
  .site-header { padding: var(--space-3) var(--space-3); }
  .site-header .tl-nav { padding-left: var(--space-4); padding-right: var(--space-3); }
  .tl-wordmark--md { font-size: 13px; letter-spacing: 1.5px; }
  .tl-nav__right .tl-btn { font-size: 13px; padding: .55em .9em; white-space: nowrap; }
}