/* =========================================================
   bread&beans — recreated from BNB DESIGN.fig
   Design system
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400..800;1,400..700&display=swap');

/* Bodoni Moda — 18pt optical size (uploaded static cuts).
   The 18pt opsz keeps hairlines robust for better legibility. */
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:400; font-display:swap; src:url('../uploads/BodoniModa_18pt-Regular.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:400; font-display:swap; src:url('../uploads/BodoniModa_18pt-Italic.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:500; font-display:swap; src:url('../uploads/BodoniModa_18pt-Medium.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:500; font-display:swap; src:url('../uploads/BodoniModa_18pt-MediumItalic.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:600; font-display:swap; src:url('../uploads/BodoniModa_18pt-SemiBold.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:600; font-display:swap; src:url('../uploads/BodoniModa_18pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:700; font-display:swap; src:url('../uploads/BodoniModa_18pt-Bold.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:700; font-display:swap; src:url('../uploads/BodoniModa_18pt-BoldItalic.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:800; font-display:swap; src:url('../uploads/BodoniModa_18pt-ExtraBold.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:800; font-display:swap; src:url('../uploads/BodoniModa_18pt-ExtraBoldItalic.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:normal; font-weight:900; font-display:swap; src:url('../uploads/BodoniModa_18pt-Black.ttf') format('truetype'); }
@font-face{ font-family:"Bodoni Moda"; font-style:italic; font-weight:900; font-display:swap; src:url('../uploads/BodoniModa_18pt-BlackItalic.ttf') format('truetype'); }

:root{
  --burgundy:#4C1512;
  --orange:#F9480B;
  --off-white:#EFEFEF;
  --off-white-2:#F2F2F2;
  --ink:#333333;
  --salmon:#F29494;
  --dark-card:#2B100D;

  --display:"Bodoni Moda", serif;   /* 18pt optical size — robust hairlines for legibility */
  --sans:"Plus Jakarta Sans", system-ui, sans-serif;

  --maxw:1280px;
  --pad:clamp(22px, 6vw, 152px);
  --pad-sm:clamp(20px, 4vw, 80px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.35;
  letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--orange); color:#fff; }

/* font gate — Bodoni hero rule: show nothing rather than substitute */
.fonts-pending .display, .fonts-pending .jk-hero, .fonts-pending .sec-head{ visibility:hidden; }

/* ---------- TYPE PRIMITIVES ---------- */

/* Bodoni Moda Black Italic — short words & buttons. opsz lowered (≈34) so
   the thin strokes stay robust and legible at display sizes. */
.display{
  font-family:var(--display);
  font-style:italic;
  font-weight:900;
  font-variation-settings:"opsz" 34;
  line-height:1.05;
}

/* Plus Jakarta Sans ExtraBold — long hero titles */
.jk-hero{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:1.0;
}

.hero .jk-hero{ letter-spacing:-1.7px; }

/* Section kicker-heads — Jakarta Bold 32 */
.sec-head{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(24px, 2.4vw, 32px);
  letter-spacing:-0.05em;
  line-height:1.09;
}

.body{ font-size:clamp(16px,1.2vw,18px); line-height:1.35; letter-spacing:-0.02em; color:var(--ink); }
.kicker-sm{ font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:-0.02em; color:var(--orange); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:60; background:var(--burgundy); border-bottom:1px solid rgba(255,255,255,.14); }
.nav-inner{
  max-width:1280px; margin:0 auto;
  padding:16px clamp(22px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo img{ height:24px; width:auto; }
.nav-right{ display:flex; align-items:center; gap:clamp(20px,3vw,40px); }
.nav-links{ display:flex; align-items:center; gap:clamp(20px,2.6vw,37px); }
.nav-links a{
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:-0.03em;
  color:var(--off-white); transition:color .2s;
}
.nav-links a:hover{ color:var(--orange); }
.nav-links a.active{ color:var(--orange); }

.lang{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:0.02em; }
.lang button{ background:none; border:0; padding:0; cursor:pointer; font:inherit; letter-spacing:inherit; color:rgba(255,255,255,.6); transition:color .2s; }
.lang button.active{ color:var(--orange); }
.lang button:hover{ color:var(--orange); }
.lang span{ color:rgba(255,255,255,.35); }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--off-white); margin:5px 0; transition:.25s; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-variation-settings:"opsz" 20;
  font-size:18px; letter-spacing:-0.02em;
  padding:18px 24px; border-radius:500px; border:1px solid transparent;
  cursor:pointer; transition:transform .2s, background .25s, color .25s, border-color .25s;
}
.btn-dark{ background:var(--orange); color:var(--off-white); }
.btn-dark:hover{ transform:translateY(-2px); background:#e23f06; }
.btn-light{ background:var(--off-white); color:var(--burgundy); }
.btn-light:hover{ transform:translateY(-2px); background:#fff; }
.btn-burgundy{ background:var(--burgundy); color:var(--off-white); }
.btn-burgundy:hover{ transform:translateY(-2px); background:#5e1a16; }

/* text link with arrow (Saiba mais ↗) */
.saiba{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:-0.03em; color:var(--orange); transition:gap .2s; }
.saiba:hover{ gap:11px; }

/* ---------- SECTIONS ---------- */
.full-img{ width:100%; background-position:center; background-size:cover; background-repeat:no-repeat; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--off-white); padding:clamp(48px,6vw,68px) var(--pad); }
.footer-inner{ max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:32px; align-items:center; }
.footer-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.footer-logo img{ height:82px; width:auto; }
.footer-tagline{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.4vw,32px); letter-spacing:-0.05em; line-height:1.09; color:var(--orange); text-align:right; max-width:335px; }
.footer-contact{ width:100%; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-col{ font-size:14px; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); display:flex; flex-direction:column; gap:2px; }
.footer-col a{ transition:color .2s; }
.footer-col a:hover{ color:var(--orange); }
.footer-sub{ font-family:var(--sans); font-weight:700; font-size:clamp(19px,2vw,24px); letter-spacing:-0.05em; line-height:1.09; color:var(--ink); text-align:center; }
.footer-copy{ font-size:14px; line-height:1.4; text-align:center; color:var(--ink); }

/* ---------- REVEAL ---------- */
.js-anim .reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.js-anim .reveal.in{ opacity:1; transform:none; }
.js-anim .reveal.d1{ transition-delay:.08s; }
.js-anim .reveal.d2{ transition-delay:.16s; }
.js-anim .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ .js-anim .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- ARTICLE CARD (glassmorphism caption) ---------- */
.card{ position:relative; border-radius:8px; overflow:hidden; }
.card image-slot{ display:block; width:100%; height:100%; }
.card .cap{
  position:absolute; left:10px; right:10px; bottom:10px;
  border-radius:6px;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
  pointer-events:none;
}
.card .cap .t{ font-family:var(--sans); font-weight:700; font-size:clamp(15px,1.3vw,20px); line-height:1.25; letter-spacing:-0.02em; color:#F6F8FB; text-wrap:pretty; }
.card .cap .m{ font-size:13px; letter-spacing:-0.01em; color:rgba(246,248,251,.85); }
.card .cap::before{ content:""; position:absolute; inset:0; border-radius:6px; box-shadow:0 1px 0 rgba(255,255,255,.18) inset; pointer-events:none; }

/* gradient scrim so caption is readable even before user drops an image */
.card .scrim{ position:absolute; left:0; right:0; bottom:0; height:45%; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 100%); pointer-events:none; }

/* ---------- EDITORIAL ARTICLE CARDS (print vibe) ---------- */
.ed-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--sans); font-weight:600; letter-spacing:-0.01em; }
.ed-meta .cat{ color:var(--orange); }
.ed-meta .dot{ color:rgba(51,51,51,.4); }
.ed-meta .min, .ed-meta .by{ color:rgba(51,51,51,.78); }

/* vertical card: image on top, then meta, title, optional excerpt */
.acard{ display:flex; flex-direction:column; gap:16px; }
.acard image-slot{ display:block; width:100%; border-radius:12px; overflow:hidden; }
.acard .ed-meta{ font-size:15px; }
.acard .at{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-0.04em; line-height:1.08; color:var(--ink); font-size:clamp(20px,1.7vw,24px); text-wrap:pretty; transition:color .2s; }
.acard:hover .at{ color:var(--orange); }
.acard .ax{ margin:0; color:rgba(51,51,51,.7); font-size:clamp(15px,1.2vw,18px); line-height:1.4; text-wrap:pretty; }

/* featured (big) variant */
.acard-feat .at{ font-size:clamp(30px,3.6vw,52px); letter-spacing:-0.05em; line-height:1.02; }
.acard-feat .ed-meta{ font-size:clamp(15px,1.3vw,17px); }
.acard-feat .ax{ font-size:clamp(17px,1.4vw,21px); }
.acard-feat image-slot{ aspect-ratio:3/2; }

/* small horizontal card: square image left, text right */
.acard-sm{ flex-direction:row; align-items:center; gap:clamp(18px,2vw,30px); }
.acard-sm image-slot{ flex:none; width:clamp(110px,16vw,200px); aspect-ratio:1/1; }
.acard-sm .ed-meta{ font-size:clamp(13px,1vw,15px); }
.acard-sm .at{ font-size:clamp(18px,1.6vw,26px); letter-spacing:-0.045em; }
.acard-sm .body-r{ display:flex; flex-direction:column; gap:10px; min-width:0; }

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width: 820px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:58px 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--burgundy); padding:6px clamp(22px,4vw,32px) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ width:100%; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:16px; }
}