/* =================================================================
   MM Distressed — styles.css
   Identity: navy + white · blue accent · Jost typography.
   Mobile-first. Container max 1200px. 12-column mental grid.
   ================================================================= */

/* ---------- Brand tokens ---------- */
:root{
  --navy:        #0F2140; /* navy blue — primary / dark background */
  --navy-deep:   #0A1018; /* near black, base of gradients */
  --navy-mid:    #1C3D6E; /* middle of the gradient */
  --azul:        #2F5C97; /* blue — accent on light backgrounds */
  --azul-light:  #5483C4; /* light blue — accent on dark backgrounds */
  --graphite:    #33415A; /* secondary text on light background */
  --white:       #F4F7FC; /* slightly cool white */
  --muted:       #8893A8; /* supporting text on dark */
  --line:        #244270; /* lines/dividers on dark */

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Lean reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Jost",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
  line-height:1.6;
  color:var(--white);
  background:var(--navy);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* Accessibility: visible focus and screen-reader-only content. */
:focus-visible{ outline:2px solid var(--azul-light); outline-offset:3px; border-radius:2px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Base layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(4rem,9vw,7.5rem) 0; }
.only-desktop{ display:none; }
@media(min-width:768px){ .only-desktop{ display:inline; } }

/* Eyebrow / descriptors in uppercase with generous tracking. */
.eyebrow{
  font-weight:300; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.28em; color:var(--azul-light); margin:0 0 1rem;
}
.eyebrow--dark{ color:var(--azul); }

.section__head{ max-width:46rem; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.section__title{ font-size:clamp(1.9rem,4.5vw,2.9rem); }
.section__title--light{ color:var(--white); }

/* ---------- Logo ---------- */
.logo{
  font-family:"Jost",sans-serif; font-weight:600; font-size:1.4rem;
  letter-spacing:.04em; text-decoration:none; display:inline-flex; gap:.4ch;
  align-items:baseline;
}
.logo__mm{ color:var(--azul-light); }
.logo__word{ color:var(--white); font-weight:500; }
.logo--dark .logo__mm{ color:var(--azul); }
.logo--dark .logo__word{ color:var(--navy); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  font-family:inherit; font-weight:500; font-size:.95rem; letter-spacing:.02em;
  padding:.85rem 1.6rem; border-radius:var(--radius); text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--sm{ padding:.55rem 1.1rem; font-size:.85rem; }
.btn--primary{ background:var(--azul); color:#fff; }
.btn--primary:hover{ background:var(--azul-light); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--white); border-color:var(--white); }
.btn--ghost:hover{ border-color:var(--azul-light); color:var(--azul-light); }

/* =================================================================
   FIXED HEADER
   ================================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; }
.site-header.is-scrolled{
  background:var(--navy);
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  border-bottom-color:var(--line);
}

.nav{ display:flex; align-items:center; }
.nav__menu{ display:flex; align-items:center; gap:clamp(1.2rem,2.5vw,2.2rem); }
.nav__menu a{
  text-decoration:none; color:var(--white); font-weight:400; font-size:.95rem;
  letter-spacing:.01em; position:relative; padding:.25rem .25rem;
}
.nav__menu a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--azul-light); transition:width .3s var(--ease);
}
.nav__menu a:not(.btn):hover::after{ width:100%; }
.nav__cta a{ color:#fff; }

/* Hamburger */
.nav__toggle{
  display:none; flex-direction:column; gap:5px; width:42px; height:42px;
  background:none; border:0; cursor:pointer; padding:9px; z-index:120;
}
.nav__toggle span{ height:2px; width:100%; background:var(--white); border-radius:2px; transition:.3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:900px){
  .nav__toggle{ display:flex; }
  .nav__menu{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:2rem var(--gutter);
    background:var(--navy-deep); border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .nav__menu.is-open{ transform:translateX(0); }
  .nav__menu a{ font-size:1.15rem; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative; overflow:hidden;
  min-height:100svh; display:flex; align-items:center;
  padding:120px 0 4rem;
  background:
    radial-gradient(60% 80% at 22% 80%, rgba(84,131,196,.28), transparent 70%),
    linear-gradient(120deg, #0E2A52 0%, #0D1A30 45%, #0A1018 100%);
}
/* Center-aligned hero content. */
.hero__inner{ position:relative; z-index:2; max-width:62rem; margin-inline:auto; text-align:center; }
.hero__title{
  font-size:clamp(2.4rem,6.5vw,4.6rem); font-weight:600; line-height:1.05;
  margin:0 auto 1.5rem; max-width:18ch;
}
.hero__sub{
  font-size:clamp(1.05rem,2vw,1.3rem); color:#cdd6e6; font-weight:300;
  max-width:54ch; margin:0 auto 2.5rem;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.5rem; justify-content:center; }

.hero__credibility{
  display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,4vw,3rem);
  flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--white);
}
.hero__credibility li{ display:flex; flex-direction:column; }
.hero__credibility strong{ font-size:1.7rem; font-weight:600; color:var(--white); }
.hero__credibility span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); }
.hero__sep{ width:1px; height:38px; background:var(--line); }

/* Background skyline: revealed only at the base, under the brand gradient. */
.hero__city{
  position:absolute; inset:auto 0 0 0; height:55%; z-index:0; pointer-events:none;
  background:url("../img/skyline.jpg") center bottom / cover no-repeat;
  opacity:.22;
  /* Fade the top of the image to blend with the navy gradient. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 55%, #000 100%);
}

/* Decorative outlined "M" bleeding off the right edge. */
.hero__graphic{
  position:absolute; right:-6%; bottom:-8%; width:min(60vw,640px);
  color:var(--azul-light); opacity:.10; z-index:1; pointer-events:none;
}

/* =================================================================
   SEGMENTS (light background)
   ================================================================= */
.segments{ background:var(--white); color:var(--graphite); }
.segments .section__title{ color:var(--navy); }

.cards{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .cards{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.card{
  background:#fff; border:1px solid #e2e8f3; border-radius:var(--radius);
  padding:2rem 1.75rem; transition:transform .3s var(--ease),
            box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{
  transform:translateY(-4px); border-color:var(--azul);
  box-shadow:0 18px 40px rgba(15,33,64,.10);
}
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(47,92,151,.08); color:var(--azul); margin-bottom:1.25rem;
}
.card:hover .card__icon{ background:var(--azul); color:#fff; }
.card__title{ font-size:1.2rem; color:var(--navy); margin-bottom:.5rem; }
.card__desc{ font-size:.95rem; color:var(--graphite); line-height:1.6; }

/* =================================================================
   STATS / TRACK RECORD — elevated "ledger" band
   Bridges two dark sections (segments → stats) with a tonal step:
   a lighter navy gradient, framing hairlines and a centered seam.
   ================================================================= */
.stats{
  position:relative;
  background:linear-gradient(180deg, #182c4e 0%, #13243f 100%);
  padding:clamp(3rem,6vw,4.75rem) 0;
}
/* Top + bottom hairlines, brighter than a plain border, to read as a band. */
.stats::before,.stats::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--azul-light), transparent); opacity:.5;
}
.stats::before{ top:0; }
.stats::after{ bottom:0; }
.stats__grid{
  display:grid; grid-template-columns:1fr; gap:0; text-align:center;
  max-width:760px; margin-inline:auto;
}
/* Vertical seam between the two figures on wider screens. */
@media(min-width:640px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stats__grid .stat + .stat{ border-left:1px solid var(--line); }
}
@media(max-width:639px){
  .stats__grid .stat + .stat{ border-top:1px solid var(--line); padding-top:2rem; margin-top:2rem; }
}
.stat{ padding-inline:clamp(1rem,4vw,2.5rem); }
.stat__value{
  display:flex; align-items:baseline; justify-content:center; gap:.4ch;
  font-size:clamp(2.6rem,7vw,4rem); font-weight:600; color:var(--white);
}
.stat__prefix,.stat__suffix{ font-size:.42em; color:var(--azul-light); font-weight:500; }
.stat__suffix{ letter-spacing:.02em; }
.stat__label{
  display:block; margin-top:.5rem; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.22em; color:var(--muted);
}

/* =================================================================
   ABOUT (light background)
   ================================================================= */
.about{ background:var(--white); color:var(--graphite); }
.about .section__title{ color:var(--navy); }
.about__text{ max-width:70ch; display:grid; gap:1.25rem; font-size:1.08rem; }
.about__text em{ color:var(--azul); font-style:italic; }

.values{
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; margin-top:2.75rem;
  padding-top:2rem; border-top:1px solid #e2e8f3;
}
.values li{
  position:relative; font-weight:500; color:var(--navy);
  text-transform:uppercase; letter-spacing:.18em; font-size:.95rem;
  padding-left:1.4rem;
}
.values li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:var(--azul); border-radius:50%;
}

/* =================================================================
   VISUAL BAND — CITY (San Francisco) with navy overlay
   ================================================================= */
.city-band{
  position:relative; isolation:isolate;
  min-height:clamp(220px,38vw,420px);
  display:flex; align-items:center;
  background:url("../img/cidade-empresa.jpg") center 35% / cover no-repeat fixed;
}
.city-band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(10,16,24,.92) 0%, rgba(15,33,64,.78) 50%, rgba(13,26,48,.86) 100%);
}
.city-band__quote{
  font-size:clamp(1.4rem,3.2vw,2.4rem); font-weight:300; color:var(--white);
  max-width:24ch; line-height:1.25; letter-spacing:-.01em;
}
.city-band__quote::before{
  content:""; display:block; width:48px; height:2px; background:var(--azul-light); margin-bottom:1.5rem;
}
/* Avoid the fixed-background "jump" on small/touch screens. */
@media(max-width:900px){ .city-band{ background-attachment:scroll; } }

/* =================================================================
   FOUNDER (highlight, navy background)
   ================================================================= */
.founder{
  background:
    radial-gradient(50% 60% at 85% 10%, rgba(84,131,196,.18), transparent 70%),
    var(--navy);
  padding:clamp(4rem,9vw,7.5rem) 0;
}
.founder__inner{
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,4rem);
}
@media(min-width:1024px){
  .founder__inner{ grid-template-columns:340px 1fr; align-items:start; }
}

.portrait{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius);
  overflow:hidden; background:linear-gradient(160deg,var(--navy-mid),var(--navy-deep));
  border:1px solid var(--line);
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait__placeholder{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  font-size:5rem; font-weight:600; letter-spacing:.05em; color:var(--azul-light); opacity:.5;
}
.portrait--empty .portrait__placeholder{ display:flex; }
@media(min-width:1024px){ .portrait{ position:sticky; top:100px; } }

.founder__role{
  color:var(--azul-light); font-weight:500; letter-spacing:.04em; margin-top:.4rem;
}
.founder__bio{
  color:#cdd6e6; font-weight:300; font-size:1.1rem; max-width:64ch;
  margin-bottom:3rem;
}

.founder__cols{ display:grid; grid-template-columns:1fr; gap:3rem; }
@media(min-width:768px){ .founder__cols{ grid-template-columns:1.2fr 1fr; gap:3.5rem; } }

.block__title{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.24em;
  color:var(--azul-light); font-weight:500; margin-bottom:1.75rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--line);
}

/* Expertise — areas of mastery */
.expertise__list{ display:grid; gap:1rem; }
.expertise__list li{
  position:relative; padding-left:1.5rem; color:#dbe3f0;
  font-weight:400; font-size:1.05rem; letter-spacing:.005em;
}
.expertise__list li::before{
  content:""; position:absolute; left:0; top:.72em; width:14px; height:1px; background:var(--azul-light);
}

/* Education */
.education__list{ display:grid; gap:1.4rem; }
.education__list li{ display:grid; gap:.2rem; }
.education__list strong{ color:var(--white); font-weight:500; }
.education__list span{ color:#aeb9cd; font-weight:300; font-size:.92rem; }

/* Institutions — houses where his trajectory was built */
.institutions{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.institutions .block__title{ border-bottom:0; padding-bottom:0; margin-bottom:1.25rem; }
.institutions__list{ display:flex; flex-wrap:wrap; gap:1rem 2.25rem; }
.institutions__list li{
  position:relative; padding-left:1.25rem; color:var(--white);
  font-weight:400; font-size:1.02rem; letter-spacing:.01em;
}
.institutions__list li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--azul-light);
}

/* =================================================================
   CONTACT (light background)
   ================================================================= */
.contact{ background:var(--white); color:var(--graphite); }
.contact .section__title{ color:var(--navy); }
.contact__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.5rem); }
@media(min-width:900px){ .contact__grid{ grid-template-columns:1.1fr .9fr; } }

/* Form */
.form{ display:grid; gap:1.25rem; }
.form__field{ display:grid; gap:.45rem; }
.form__field label{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--graphite); font-weight:500;
}
.form__field input,.form__field textarea{
  font-family:inherit; font-size:1rem; color:var(--navy);
  padding:.85rem 1rem; border:1px solid #cdd6e6; border-radius:var(--radius);
  background:#fff; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  width:100%;
}
.form__field input:focus,.form__field textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(47,92,151,.12);
}
.form__field textarea{ resize:vertical; min-height:120px; }
.form__field input.is-invalid,.form__field textarea.is-invalid{ border-color:#c0392b; }

/* Honeypot hidden without display:none (some bots ignore it). */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__submit{ justify-self:start; position:relative; min-width:150px; }
.form__spinner{
  display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}
.form.is-sending .form__spinner{ display:inline-block; }
.form.is-sending .form__submit{ opacity:.85; pointer-events:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form__feedback{ font-size:.95rem; min-height:1.4em; margin-top:.25rem; }
.form__feedback.is-ok{ color:#1e7e4f; }
.form__feedback.is-err{ color:#c0392b; }

/* Contact details */
.details{ display:grid; gap:1.5rem; margin-bottom:2rem; }
.details li{ display:grid; gap:.2rem; }
.details__label{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--azul); font-weight:500;
}
.details a{ color:var(--navy); text-decoration:none; font-size:1.05rem; }
.details a:hover{ color:var(--azul); }
.details address{ font-style:normal; color:var(--graphite); line-height:1.7; }

.map{
  border-radius:var(--radius); overflow:hidden; border:1px solid #cdd6e6;
  line-height:0;
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{ background:var(--navy-deep); color:var(--muted); }
.site-footer__inner{
  display:grid; grid-template-columns:1fr; gap:2rem;
  padding-block:clamp(3rem,6vw,4.5rem);
}
@media(min-width:768px){ .site-footer__inner{ grid-template-columns:1fr 1fr; align-items:start; } }
.site-footer__tagline{
  margin-top:.75rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--muted);
}
.site-footer__contacts{ display:grid; gap:.75rem; }
.site-footer__contacts a{ color:#cdd6e6; text-decoration:none; }
.site-footer__contacts a:hover{ color:var(--azul-light); }
.site-footer__contacts address{ font-style:normal; line-height:1.7; }
.site-footer__base{ border-top:1px solid var(--line); padding-block:1.5rem; }
.site-footer__base p{ font-size:.82rem; color:var(--muted); }

/* =================================================================
   BACK-TO-TOP BUTTON (with scroll-progress ring)
   ================================================================= */
.back-to-top{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy); color:var(--white);
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.30);
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             visibility .3s var(--ease), background .25s var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--azul); }
.back-to-top i{ position:relative; z-index:1; font-size:1rem; }
/* Progress ring rotated so it fills clockwise from the top. */
.back-to-top__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.back-to-top__track{ fill:none; stroke:var(--line); stroke-width:2; }
.back-to-top__progress{
  fill:none; stroke:var(--azul-light); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:125.664;   /* circumference of r=20 circle (2·π·20) */
  stroke-dashoffset:125.664;  /* starts empty; JS reduces it as you scroll */
  transition:stroke-dashoffset .1s linear;
}

/* =================================================================
   ENTRANCE ANIMATIONS (reveal via IntersectionObserver)
   ================================================================= */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =================================================================
   v2 ADDITIONS — brand emphasis, segments redesign, blog & books
   ================================================================= */

/* ---------- Stronger brand presence ---------- */
.logo--lg{ font-size:2.5rem; letter-spacing:.05em; }
.logo--lg .logo__mm{ font-weight:600; }
/* Smaller on phones so it doesn't crowd the header. */
@media(max-width:600px){ .logo--lg{ font-size:2rem; } }

/* Hero brand lockup — large, prominent wordmark above the headline. */
.hero__brand{
  display:flex; align-items:baseline; justify-content:center; gap:.5ch;
  font-weight:600; line-height:1; margin:0 0 1.4rem;
  font-size:clamp(2.4rem,8vw,5.2rem); letter-spacing:.02em;
}
.hero__brand-mm{ color:var(--azul-light); }
.hero__brand-word{
  color:var(--white); font-weight:500; letter-spacing:.06em;
  -webkit-text-stroke:0;
}
@media(min-width:768px){ .hero__brand-word{ letter-spacing:.1em; } }

/* Section lead paragraph (intro under a title). */
.section__lead{
  margin-top:1rem; color:#cdd6e6; font-weight:300;
  font-size:clamp(1.02rem,1.6vw,1.18rem); max-width:52ch;
}

/* =================================================================
   SEGMENTS — navy, card grid with hover micro-interaction
   ================================================================= */
.segments{
  background:
    radial-gradient(55% 65% at 88% 6%, rgba(84,131,196,.16), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#cdd6e6;
  border-top:1px solid var(--line);
  /* No bottom border: the stats band carries the seam (see below). */
}
.segments .section__title{ color:var(--white); }

.seg-cards{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:600px){ .seg-cards{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .seg-cards{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }

.seg-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,2.6vw,2.1rem);
  background:linear-gradient(165deg, rgba(28,61,110,.28), rgba(10,16,24,.30));
  border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Accent bar that grows from the top-left on hover. */
.seg-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--azul-light), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.seg-card:hover,.seg-card:focus-within{
  transform:translateY(-6px); border-color:var(--azul);
  box-shadow:0 22px 48px rgba(0,0,0,.40);
}
.seg-card:hover::before{ transform:scaleX(1); }

.seg-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.seg-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:rgba(84,131,196,.10); color:var(--azul-light);
  border:1px solid var(--line);
  transition:background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.seg-card:hover .seg-card__icon{ background:var(--azul); color:#fff; transform:rotate(-6deg) scale(1.06); }
.seg-card__num{
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; line-height:1; letter-spacing:-.02em;
  color:var(--azul-light); opacity:.30; transition:opacity .4s var(--ease);
}
.seg-card:hover .seg-card__num{ opacity:.8; }

.seg-card__title{ font-size:clamp(1.15rem,1.8vw,1.4rem); color:var(--white); margin-bottom:.55rem; }
.seg-card__desc{ font-size:.95rem; color:#aeb9cd; font-weight:300; line-height:1.6; flex:1; }

.seg-card__arrow{
  display:inline-flex; align-items:center; margin-top:1.4rem; color:var(--azul-light);
  opacity:0; transform:translateX(-10px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.seg-card:hover .seg-card__arrow{ opacity:1; transform:none; }

/* =================================================================
   INNER PAGES (blog, post, books) — shared chrome
   ================================================================= */
body.page--inner{ padding-top:72px; }     /* clear the fixed header */
.page{ min-height:60vh; }

.page-hero{
  position:relative;
  background:
    radial-gradient(55% 70% at 20% 110%, rgba(84,131,196,.20), transparent 70%),
    linear-gradient(120deg, #0E2A52 0%, #0D1A30 50%, #0A1018 100%);
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--line);
}
.page-hero__title{ font-size:clamp(2rem,5vw,3.4rem); color:var(--white); margin-bottom:1rem; }
.page-hero__sub{ color:#cdd6e6; font-weight:300; max-width:60ch; font-size:clamp(1.02rem,1.8vw,1.2rem); }

.empty-state{ color:var(--muted); text-align:center; padding:4rem 0; font-size:1.05rem; }

/* ---------- Category filter chips ---------- */
.cat-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,4vw,3rem); }
.cat-chip{
  display:inline-flex; align-items:center; gap:.5ch; text-decoration:none;
  padding:.5rem 1rem; border:1px solid var(--line); border-radius:999px;
  font-size:.9rem; color:#cdd6e6; transition:.25s var(--ease);
}
.cat-chip:hover{ border-color:var(--azul-light); color:var(--white); }
.cat-chip.is-active{ background:var(--azul); border-color:var(--azul); color:#fff; }
.cat-chip__count{ font-size:.72rem; opacity:.7; }
.blog-section__filtered{ color:var(--muted); margin-bottom:1.5rem; font-size:.95rem; }
.blog-section__filtered strong{ color:var(--azul-light); }

/* ---------- Post cards grid ---------- */
.post-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:640px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .post-grid{ grid-template-columns:repeat(3,1fr); } }

.post-card{
  display:flex; flex-direction:column; background:#0e1c34;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.post-card:hover{ transform:translateY(-4px); border-color:var(--azul); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.post-card__media{
  display:block; aspect-ratio:16/9; background:linear-gradient(150deg,var(--navy-mid),var(--navy-deep));
  position:relative; overflow:hidden;
}
.post-card__media img{ width:100%; height:100%; object-fit:cover; }
.post-card__placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:600; color:var(--azul-light); opacity:.35; letter-spacing:.1em;
}
.post-card__body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card__cat{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:var(--azul-light); font-weight:500;
}
.post-card__title{ font-size:1.2rem; line-height:1.25; }
.post-card__title a{ color:var(--white); text-decoration:none; }
.post-card__title a:hover{ color:var(--azul-light); }
.post-card__excerpt{ font-size:.95rem; color:#aeb9cd; font-weight:300; line-height:1.55; flex:1; }
.post-card__meta{ font-size:.8rem; color:var(--muted); display:flex; gap:.5ch; align-items:center; }

/* =================================================================
   SINGLE POST
   ================================================================= */
.post__hero{
  background:linear-gradient(180deg,#0d1a30,var(--navy));
  padding:clamp(3rem,7vw,5rem) 0 clamp(2rem,4vw,3rem); border-bottom:1px solid var(--line);
}
.post__hero-inner{ max-width:50rem; }
.breadcrumb{ display:flex; gap:.6ch; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin-bottom:1.5rem; }
.breadcrumb a{ color:var(--azul-light); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.post__title{ font-size:clamp(1.9rem,4.5vw,3rem); color:var(--white); line-height:1.12; margin-bottom:1.2rem; }
.post__meta{ display:flex; flex-wrap:wrap; gap:.6ch; align-items:center; font-size:.88rem; color:var(--muted); }

.post__cover{ margin:clamp(2rem,4vw,3rem) auto 0; max-width:50rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.post__cover img{ width:100%; height:auto; }

.post__body{
  max-width:44rem; margin:clamp(2.5rem,5vw,3.5rem) auto 0;
  font-family:"Fraunces",Georgia,serif; font-size:1.18rem; line-height:1.75; color:#dbe3f0; font-weight:400;
}
.post__body > * + *{ margin-top:1.35rem; }
.post__body h2{ font-family:"Jost",sans-serif; font-size:1.6rem; color:var(--white); margin-top:2.5rem; }
.post__body h3{ font-family:"Jost",sans-serif; font-size:1.3rem; color:var(--white); margin-top:2rem; }
.post__body a{ color:var(--azul-light); text-decoration:underline; text-underline-offset:3px; }
.post__body blockquote{
  border-left:2px solid var(--azul-light); padding-left:1.25rem; color:#aeb9cd; font-style:italic;
}
.post__body ul,.post__body ol{ padding-left:1.4rem; list-style:revert; display:grid; gap:.5rem; }
.post__body img{ border-radius:var(--radius); border:1px solid var(--line); }
.post__body em{ font-style:italic; color:var(--azul-light); }
.post__footer{ max-width:44rem; margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding-bottom:1rem; }

/* Related (light) + Recent (dark) sections reuse .section */
.related{ background:var(--white); color:var(--graphite); }
.related .section__title{ color:var(--navy); }
.related .post-card{ background:#fff; border-color:#e2e8f3; }
.related .post-card__media{ background:linear-gradient(150deg,#dbe3f0,#cdd6e6); }
.related .post-card__title a{ color:var(--navy); }
.related .post-card__title a:hover{ color:var(--azul); }
.related .post-card__excerpt{ color:var(--graphite); }
.related .post-card:hover{ box-shadow:0 18px 40px rgba(15,33,64,.12); }

.recent{ background:linear-gradient(180deg,var(--navy-deep),#0c1830); border-top:1px solid var(--line); }
.recent-list{ display:grid; gap:0; border-top:1px solid var(--line); max-width:52rem; }
.recent-item{ border-bottom:1px solid var(--line); }
.recent-item__link{
  display:flex; align-items:baseline; gap:1.25rem; padding:1.4rem .25rem; text-decoration:none;
  transition:padding-left .3s var(--ease), background .3s var(--ease);
}
.recent-item__link:hover{ padding-left:.75rem; background:rgba(84,131,196,.06); }
.recent-item__num{ font-size:1.4rem; font-weight:600; color:var(--azul-light); opacity:.5; }
.recent-item__body{ display:grid; gap:.25rem; }
.recent-item__cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--azul-light); }
.recent-item__title{ font-size:1.1rem; color:var(--white); font-weight:500; }
.recent-item__date{ font-size:.8rem; color:var(--muted); }

/* =================================================================
   BOOKS
   ================================================================= */
.books-section{ background:var(--white); color:var(--graphite); }
.book-grid{ display:grid; grid-template-columns:1fr; gap:1.75rem; }
@media(min-width:640px){ .book-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .book-grid{ grid-template-columns:repeat(2,1fr); gap:2.5rem; } }

.book-card{
  display:grid; grid-template-columns:120px 1fr; gap:1.5rem; align-items:start;
  background:#fff; border:1px solid #e2e8f3; border-radius:var(--radius); padding:1.75rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.book-card:hover{ transform:translateY(-4px); border-color:var(--azul); box-shadow:0 18px 40px rgba(15,33,64,.10); }
.book-card__cover{ aspect-ratio:2/3; border-radius:3px; overflow:hidden; box-shadow:0 10px 24px rgba(15,33,64,.18); }
.book-card__cover img{ width:100%; height:100%; object-fit:cover; }
.book-card__spine{
  display:flex; align-items:center; justify-content:center; height:100%; padding:.75rem;
  background:linear-gradient(155deg,var(--navy-mid),var(--navy-deep)); position:relative;
}
.book-card__spine::before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:rgba(84,131,196,.5); }
.book-card__spine-title{ color:var(--white); font-size:.8rem; font-weight:500; text-align:center; line-height:1.3; }
.book-card__title{ font-size:1.3rem; color:var(--navy); line-height:1.2; }
.book-card__author{ font-size:.9rem; color:var(--azul); margin-top:.25rem; font-weight:500; }
.book-card__stars{ display:inline-flex; gap:.15rem; color:#e0a83a; margin-top:.6rem; font-size:.85rem; }
.book-card__desc{ font-size:.97rem; color:var(--graphite); line-height:1.6; margin-top:.85rem; }
.book-card__link{
  display:inline-flex; align-items:center; gap:.5ch; margin-top:1rem; font-size:.9rem; font-weight:500;
  color:var(--azul); text-decoration:none;
}
.book-card__link:hover{ color:var(--navy); text-decoration:underline; }
@media(max-width:480px){ .book-card{ grid-template-columns:90px 1fr; gap:1rem; padding:1.25rem; } }

/* Footer nav links */
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:1.25rem; }
.site-footer__nav a{ color:#cdd6e6; text-decoration:none; font-size:.9rem; }
.site-footer__nav a:hover{ color:var(--azul-light); }

.error-page{ min-height:55vh; display:flex; align-items:center; }

/* =================================================================
   v3 — post two-column layout, AJAX states, book CTA
   ================================================================= */

/* ---------- Single post: main + right sidebar ---------- */
.post__layout{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); padding-block:clamp(2.5rem,5vw,3.5rem); }
@media(min-width:1000px){ .post__layout{ grid-template-columns:minmax(0,1fr) 320px; align-items:start; } }

/* In the two-column layout the body fills its column (no centering). */
.post__main .post__cover{ margin:0 0 clamp(1.5rem,3vw,2.25rem); max-width:none; }
.post__main .post__body{ max-width:46rem; margin:0; }
.post__main .post__footer{ max-width:none; margin:clamp(2rem,4vw,3rem) 0 0; }

.post__aside{ display:grid; gap:2rem; }
@media(min-width:1000px){ .post__aside{ position:sticky; top:96px; } }

.aside-widget__title{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.2em; color:var(--azul-light);
  font-weight:500; margin-bottom:1.1rem; padding-bottom:.75rem; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5ch;
}
.aside-widget__title span{ color:var(--muted); text-transform:none; letter-spacing:0; font-size:.82rem; font-weight:300; }

.aside-list{ display:grid; gap:.35rem; }
.aside-item__link{
  display:grid; grid-template-columns:64px 1fr; gap:.9rem; align-items:center;
  text-decoration:none; padding:.6rem; margin:-.6rem; border-radius:var(--radius);
  transition:background .25s var(--ease);
}
.aside-item__link:hover{ background:rgba(84,131,196,.08); }
.aside-item__thumb{
  aspect-ratio:1; border-radius:4px; overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--navy-mid),var(--navy-deep)); border:1px solid var(--line);
}
.aside-item__thumb img{ width:100%; height:100%; object-fit:cover; }
.aside-item__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:600; color:var(--azul-light); opacity:.4; letter-spacing:.08em; }
.aside-item__text{ display:grid; gap:.2rem; min-width:0; }
.aside-item__cat{ font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; color:var(--azul-light); }
.aside-item__title{ font-size:.95rem; color:var(--white); font-weight:400; line-height:1.3; }
.aside-item__link:hover .aside-item__title{ color:var(--azul-light); }
.aside-item__date{ font-size:.74rem; color:var(--muted); }

.aside-cta{
  background:linear-gradient(160deg, rgba(28,61,110,.4), rgba(10,16,24,.4));
  border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; text-align:left;
}
.aside-cta p{ color:#cdd6e6; font-weight:300; margin-bottom:1rem; }

/* ---------- Blog AJAX results: fade while loading ---------- */
.post-results{ transition:opacity .25s var(--ease); position:relative; min-height:140px; }
.post-results.is-loading{ opacity:.35; pointer-events:none; }
.post-results.is-loading::after{
  content:""; position:absolute; left:50%; top:48px; width:30px; height:30px; margin-left:-15px;
  border:3px solid var(--line); border-top-color:var(--azul-light); border-radius:50%;
  animation:spin .8s linear infinite;
}
.cat-chip{ cursor:pointer; }

/* ---------- Books "Ver livro" button ---------- */
.book-card__cta{ margin-top:1.1rem; align-self:flex-start; }
.book-card__body{ display:flex; flex-direction:column; align-items:flex-start; }

/* =================================================================
   v4 — blog toolbar (categories + live search)
   ================================================================= */
.blog-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem; margin-bottom:clamp(2rem,4vw,3rem);
}
.blog-toolbar .cat-filter{ margin-bottom:0; flex:1 1 auto; }

.post-search{ position:relative; flex:0 0 auto; width:min(290px,100%); }
.post-search__icon{
  position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.post-search input{
  width:100%; font-family:inherit; font-size:.92rem; color:var(--white);
  background:#0e1c34; border:1px solid var(--line); border-radius:999px;
  padding:.62rem 1.1rem .62rem 2.7rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.post-search input::placeholder{ color:var(--muted); }
.post-search input:focus{
  outline:none; border-color:var(--azul-light); box-shadow:0 0 0 3px rgba(84,131,196,.15);
}
.post-search input:focus + .post-search__icon,
.post-search:focus-within .post-search__icon{ color:var(--azul-light); }

@media(max-width:680px){
  .blog-toolbar{ flex-direction:column; align-items:stretch; }
  .post-search{ width:100%; }
}

/* ---------- Blog: load-more button ---------- */
.load-more{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3rem); }
/* Class selectors outrank the UA [hidden] rule — re-assert it so the wrapper
   and grid actually disappear when marked hidden (e.g. no more posts). */
.load-more[hidden]{ display:none; }
.post-grid[hidden]{ display:none; }
.load-more__btn{ position:relative; min-width:190px; }
.load-more__btn[hidden]{ display:none; }
.load-more__spinner{
  display:none; width:16px; height:16px; margin-left:.2rem;
  border:2px solid rgba(244,247,252,.35); border-top-color:var(--white);
  border-radius:50%; animation:spin .7s linear infinite;
}
.load-more__btn.is-loading{ pointer-events:none; }
.load-more__btn.is-loading .load-more__label{ opacity:.55; }
.load-more__btn.is-loading .load-more__spinner{ display:inline-block; }