/* ═══════════════════════════════════════════════════
   Interior pages — services & blog.
   Loads AFTER style.css and reuses its tokens.
   ═══════════════════════════════════════════════════ */

/* ── language blocks ───────────────────────────────
   NOTE: uses data-copy, not data-lang — the language toggle buttons
   carry data-lang and would otherwise hide themselves. */
html[lang^="pt"] [data-copy="en"]{ display:none !important; }
html[lang^="en"] [data-copy="pt"]{ display:none !important; }

/* ── page hero ─────────────────────────────────── */
.phero{
  position:relative;
  padding:calc(var(--nav-h) + var(--s6)) var(--pad) var(--s5);
  max-width:var(--maxw); margin-inline:auto;
}
.phero__grid{ display:grid; gap:var(--s4); }
@media (min-width:900px){
  .phero{ padding-top:calc(var(--nav-h) + var(--s7)); }
  .phero__grid{ grid-template-columns:1.05fr .85fr; gap:var(--s6); align-items:center; }
}

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim); margin:0 0 var(--s3); padding:0; list-style:none;
}
.crumbs a{ text-decoration:none; transition:color .3s var(--ease); }
.crumbs a:hover{ color:var(--cream); }
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:.55rem; opacity:.5; }
.crumbs [aria-current]{ color:var(--cream); }

.phero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.3rem, 5.4vw, 4.6rem);
  line-height:1.03; letter-spacing:-.025em;
  margin:0 0 var(--s3); text-wrap:balance;
}
.phero__title em{ font-style:italic; color:var(--sand); }
.phero__lede{
  font-size:clamp(1.05rem, 1.5vw, 1.28rem); line-height:1.6;
  color:var(--cream); max-width:52ch; margin:0;
}
.phero__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
}
.phero__meta{
  display:flex; flex-wrap:wrap; gap:var(--s3);
  margin:var(--s4) 0 0; padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim);
}
.phero__meta strong{ color:var(--cream); font-weight:500; }

/* ── article ───────────────────────────────────── */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad) var(--s7); }
.layout{ display:grid; gap:var(--s5); }
@media (min-width:1000px){
  .layout{ grid-template-columns:minmax(0,1fr) 320px; gap:var(--s6); align-items:start; }
}

.article{ min-width:0; max-width:70ch; }
.article > *:first-child{ margin-top:0; }
.article p{
  color:#BDB4A9; font-size:1.06rem; line-height:1.75;
  margin:0 0 1.35rem; max-width:none;
}
.article p.lead{
  color:var(--cream); font-size:clamp(1.12rem,1.55vw,1.32rem);
  line-height:1.62; margin-bottom:var(--s3);
}
.article h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.65rem, 2.9vw, 2.5rem); line-height:1.14; letter-spacing:-.018em;
  color:var(--cream); margin:var(--s5) 0 var(--s2);
}
.article h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.25rem, 1.9vw, 1.62rem); line-height:1.24;
  color:var(--cream); margin:var(--s4) 0 .7rem;
}
.article h4{
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand); margin:var(--s3) 0 .6rem; font-weight:500;
}
.article strong{ color:var(--cream); font-weight:500; }
.article em{ font-style:italic; }
.article a{ color:var(--sand); text-decoration:underline; text-underline-offset:3px; }
.article a:hover{ color:var(--cream); }
.article ul,.article ol{ margin:0 0 1.35rem; padding-left:1.2rem; color:#BDB4A9; }
.article li{ margin-bottom:.6rem; line-height:1.7; }
.article li::marker{ color:var(--cognac-lt); }
.article blockquote{
  margin:var(--s4) 0; padding:var(--s3) 0 var(--s3) var(--s3);
  border-left:2px solid var(--cognac);
  font-family:var(--serif); font-size:1.3rem; line-height:1.5; color:var(--cream);
}
.article blockquote p{ font-family:inherit; font-size:inherit; color:inherit; margin:0; }
.article figure{ margin:var(--s4) 0; }
.article figure img{ width:100%; object-fit:cover; }
.article figcaption{
  margin-top:.8rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:.76rem; letter-spacing:.1em; color:var(--fg-dim);
}
.article hr{ border:0; border-top:1px solid var(--line); margin:var(--s5) 0; }

/* ── aside ─────────────────────────────────────── */
.aside{ min-width:0; display:grid; gap:var(--s3); }
@media (min-width:1000px){ .aside{ position:sticky; top:calc(var(--nav-h) + 2rem); } }

.panel{
  border:1px solid var(--line); background:var(--ink-2);
  padding:var(--s3);
}
.panel h2{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-dim); margin:0 0 var(--s2); font-family:var(--sans); font-weight:500;
}
.panel dl{ margin:0; display:grid; gap:0; }
.panel dt{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
  padding-top:.85rem; margin-top:.85rem; border-top:1px solid var(--line);
}
.panel dl > dt:first-child{ border-top:0; margin-top:0; padding-top:0; }
.panel dd{
  margin:.35rem 0 0; font-family:var(--serif); font-size:1.1rem;
  line-height:1.4; color:var(--cream);
}
.panel .btn{ width:100%; margin-top:var(--s3); }
.panel p{ font-size:.92rem; margin:0 0 var(--s2); }

/* ── toc ───────────────────────────────────────── */
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:t; }
.toc li{ counter-increment:t; border-top:1px solid var(--line); }
.toc li:first-child{ border-top:0; }
.toc a{
  display:grid; grid-template-columns:1.7rem 1fr; gap:.5rem;
  padding:.7rem 0; text-decoration:none; font-size:.92rem;
  color:var(--fg-dim); transition:color .3s var(--ease);
}
.toc a::before{ content:counter(t,decimal-leading-zero); color:var(--cognac-lt); font-size:.7rem; padding-top:.25rem; }
.toc a:hover, .toc a.is-here{ color:var(--cream); }

/* ── cta band ──────────────────────────────────── */
.band{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2);
  padding:var(--s6) var(--pad);
}
.band__in{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; gap:var(--s3);
}
@media (min-width:820px){
  .band__in{ grid-template-columns:1fr auto; align-items:center; gap:var(--s5); }
}
.band h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 .6rem; max-width:20ch;
}
.band p{ margin:0; max-width:52ch; }
.band__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); }

/* ── related / index cards ─────────────────────── */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s4);
}
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .cards--3{ grid-template-columns:repeat(3,1fr); } }

.tile{ position:relative; display:grid; gap:0; }
.tile a{ text-decoration:none; display:grid; gap:0; }
.tile__img{ overflow:hidden; }
.tile__img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .8s var(--ease);
}
.tile a:hover .tile__img img{ transform:scale(1.04); }
.tile__n{
  font-family:var(--serif); font-size:.85rem; letter-spacing:.1em;
  color:var(--cognac-lt); margin:var(--s2) 0 .35rem;
}
.tile h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.35rem,2.1vw,1.85rem); line-height:1.18; letter-spacing:-.015em;
  color:var(--cream); margin:0 0 .5rem;
  transition:color .3s var(--ease);
}
.tile a:hover h3{ color:var(--sand); }
.tile p{ margin:0 0 .8rem; font-size:.96rem; }
.tile__more{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sand);
}
.tile__date{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim); margin:var(--s2) 0 .35rem;
}

/* ── section heading for interior pages ────────── */
.shead{ margin:0 0 var(--s4); }
.shead h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.1; letter-spacing:-.02em;
  margin:0; text-wrap:balance;
}

/* ── prev / next ───────────────────────────────── */
.pager{
  display:grid; gap:var(--s3);
  border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s5);
}
@media (min-width:700px){ .pager{ grid-template-columns:1fr 1fr; } }
.pager a{
  text-decoration:none; display:grid; gap:.3rem;
  padding:var(--s2) 0;
}
.pager span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); }
.pager strong{
  font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--cream);
  transition:color .3s var(--ease);
}
.pager a:hover strong{ color:var(--sand); }
.pager .is-next{ text-align:right; }

/* ── notice ────────────────────────────────────── */
.notice{
  border:1px solid var(--line); border-left:2px solid var(--cognac);
  background:var(--ink-2);
  padding:var(--s2) var(--s3);
  font-size:.92rem; color:var(--fg-dim);
  margin:0 0 var(--s4);
}

@media (max-width:640px){
  .phero{ padding-top:calc(var(--nav-h) + var(--s5)); }
  .band__cta .btn{ flex:1 1 100%; }
  .pager .is-next{ text-align:left; }
  .article p{ font-size:1.02rem; line-height:1.72; }
  .panel{ padding:var(--s2) var(--s3) var(--s3); }
}

/* breadcrumbs are small by design; on touch they still need a real hit area */
@media (max-width:1080px), (pointer:coarse){
  .crumbs{ gap:.4rem; }
  .crumbs a, .crumbs [aria-current]{
    display:inline-block; padding-block:.7rem;
  }
  .crumbs li:not(:last-child)::after{ margin-left:.4rem; }
  .toc a{ padding-block:.85rem; }
  .article a{ text-underline-offset:4px; }
}