/* laraap.com.br — folha de estilo */

/* ---------- Cores: dia (areia + petróleo) ---------- */
:root{
  --bg:#E4E0D8; --surface:#EEEBE5; --ink:#222322; --muted:#5B5C5A; --line:#CFCAC0; --ph:#D4D0C7;
  --head:#0E5E6A;          /* títulos, logo, detalhes */
  --deep:#0A3F48;          /* manchetes */
  --fine:#5B5C5A;          /* linha fina */
  --sec:#9A4A2A;           /* terracota: metadados, links, botões */
  --on-sec:#FFFFFF;
  --navon:#0E5E6A; --pagetitle:#0E5E6A; --logo:#0E5E6A; --footer:#5B5C5A;
  --f-head:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Crimson Pro",Georgia,"Times New Roman",serif;
  --radius:10px;
  color-scheme:light;
}
/* ---------- Cores: noite (petróleo profundo) ---------- */
:root[data-theme="dark"]{
  --bg:#0F2A2F; --surface:#143439; --ink:#EDE7DC; --muted:#A9B8B6; --line:#1F4248; --ph:#1A3A40;
  --head:#E4C9A0; --deep:#E4C9A0; --fine:#E4C9A0;
  --sec:#E39A78; --on-sec:#0F2A2F;
  --navon:#EDE7DC; --pagetitle:#EDE7DC; --logo:#EDE7DC; --footer:#EDE7DC;
  color-scheme:dark;
}

/* ---------- Base ---------- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;}
*,*::before,*::after{box-sizing:inherit;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.15rem;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--sec);outline-offset:3px;}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.12;margin:0;color:var(--head);}
h1,h2,h3,h4,p,li{text-wrap:pretty;}
.wrap{max-width:1180px;margin:0 auto;padding-left:clamp(1.1rem,4vw,2.5rem);padding-right:clamp(1.1rem,4vw,2.5rem);}
.skip{position:absolute;left:-999px;top:0;background:var(--sec);color:var(--on-sec);padding:.5rem 1rem;z-index:30;}
.skip:focus{left:1rem;top:1rem;}

/* ---------- Cabeçalho ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:68px;}
.brand{display:inline-flex;align-items:center;text-decoration:none;}
.logo{height:44px;width:auto;display:block;}
.logo .lg-ast{fill:var(--sec);}
.logo .lg-let{fill:var(--logo);}
.right{display:flex;align-items:center;gap:clamp(1rem,2.5vw,1.8rem);min-width:0;}
.nav{display:flex;gap:clamp(.8rem,2.2vw,1.8rem);overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{font-family:var(--f-head);font-weight:500;font-size:.97rem;text-decoration:none;color:var(--muted);padding:.35rem 0;border-bottom:2px solid transparent;white-space:nowrap;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--navon);border-bottom-color:var(--navon);}
.nightbtn{font-family:var(--f-head);font-size:.82rem;font-weight:500;border:1px solid color-mix(in srgb,var(--sec) 45%,transparent);background:transparent;color:var(--sec);border-radius:999px;padding:.28rem .75rem;cursor:pointer;flex:none;}
.lang{display:flex;border:1px solid color-mix(in srgb,var(--sec) 45%,transparent);border-radius:999px;padding:2px;flex:none;}
.lang a,.lang span{font-family:var(--f-head);font-size:.82rem;font-weight:500;text-decoration:none;color:var(--sec);padding:.25rem .6rem;border-radius:999px;}
.lang span{background:var(--sec);color:var(--on-sec);}
@media (max-width:720px){
  .bar{flex-wrap:wrap;gap:.6rem .8rem;padding-top:.8rem;padding-bottom:.3rem;}
  .right{display:contents;}
  .nightbtn{order:1;margin-left:auto;}
  .lang{order:2;}
  .nav{order:3;width:100%;gap:1.1rem;padding-bottom:.2rem;}
}

/* ---------- Páginas ---------- */
main{padding-top:clamp(2.5rem,7vw,4.5rem);padding-bottom:clamp(4rem,9vw,7rem);}
.page-head{margin-bottom:clamp(2rem,5vw,3.5rem);}
.title{font-size:clamp(2.8rem,7vw,5.4rem);letter-spacing:-.03em;line-height:1.02;color:var(--pagetitle);max-width:16ch;}
.lede{font-size:clamp(1.15rem,1.8vw,1.3rem);color:var(--muted);max-width:56ch;margin:1.2rem 0 0;}
.sec-title{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 1.6rem;color:var(--pagetitle);}
.crumb{font-family:var(--f-head);font-size:.9rem;color:var(--muted);margin:0 0 1rem;}
.crumb a{color:var(--sec);}
.more{display:inline-block;margin-top:2rem;font-family:var(--f-head);font-weight:500;color:var(--sec);text-underline-offset:4px;}
.hero{padding-bottom:clamp(2.5rem,6vw,4.5rem);border-bottom:1px solid var(--line);margin-bottom:clamp(2.5rem,6vw,4rem);}
.buttons{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}
.btn{display:inline-flex;align-items:center;font-family:var(--f-body);font-size:1.02rem;padding:.7rem 1.35rem;border-radius:999px;border:1px solid var(--sec);background:var(--sec);color:var(--on-sec);text-decoration:none;cursor:pointer;}
.btn.ghost{background:transparent;color:var(--sec);}
.btn:hover{filter:brightness(1.07);}
.justify p,.lede.justify{text-align:justify;hyphens:auto;-webkit-hyphens:auto;}

/* ---------- Imagem de cartão ---------- */
.ph{position:relative;background:var(--ph);border-radius:var(--radius);overflow:hidden;}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- Textos ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.2rem;}
.filters button{font-family:var(--f-head);font-size:.9rem;padding:.4rem .95rem;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;cursor:pointer;}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3rem) clamp(1.2rem,2.5vw,2rem);}
.card{display:block;text-decoration:none;color:inherit;}
.card .ph{aspect-ratio:16/10;margin-bottom:.9rem;}
.card .cr{font-family:var(--f-head);font-size:.72rem;color:var(--muted);margin:-.55rem 0 .6rem;}
.card .meta{font-family:var(--f-head);font-size:.8rem;font-weight:500;color:var(--sec);margin:0 0 .35rem;}
.card h3{font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.01em;color:var(--deep);}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;}
.card .fine{color:var(--fine);margin:.6rem 0 0;max-width:50ch;}
.card .co{font-size:.9rem;color:var(--muted);font-style:italic;margin:.35rem 0 0;}
.tag{display:inline-block;font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:0 .5rem;margin-left:.4rem;color:var(--muted);vertical-align:1px;}
.card[hidden]{display:none;}
.empty{color:var(--muted);}
@media (max-width:640px){.grid{grid-template-columns:1fr;}}

/* ---------- Sobre ---------- */
.about{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.about .photo{max-width:260px;aspect-ratio:4/5;}
.about .text{max-width:40rem;}
.about p{margin:0 0 1.1rem;}
.about .buttons{margin-bottom:clamp(1rem,4vw,2rem);}
@media (max-width:760px){.about{grid-template-columns:1fr;}.about .photo{max-width:200px;}}

/* ---------- Serviços ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);}
.svc > *{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem);}
.svc h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.8rem;}
.svc p{color:var(--muted);margin:0 0 1.2rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto;}
.svc .go{font-family:var(--f-head);font-weight:500;color:var(--sec);}
.svc a:hover h2{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
@media (max-width:700px){.svc{grid-template-columns:1fr;}}

/* ---------- Case ---------- */
.case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line);}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--surface);padding:10px;border:1px solid var(--line);border-radius:calc(var(--radius) * 1.5);}
.feed img{aspect-ratio:3/4;width:100%;object-fit:cover;}
.case .meta{font-family:var(--f-head);font-size:.85rem;font-weight:500;color:var(--sec);margin:0 0 .4rem;}
.case h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:1rem;}
.case p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;}
.kpis{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1.2rem 0 .6rem;}
.kpis div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1.1rem;min-width:9rem;}
.kpis b{display:block;font-family:var(--f-head);font-size:1.8rem;line-height:1;color:var(--deep);}
.kpis span{display:block;font-size:.95rem;color:var(--muted);margin-top:.25rem;}
.kpis em{font-style:normal;font-family:var(--f-head);font-size:.85rem;font-weight:600;color:var(--sec);}
.note{font-size:.9rem;color:var(--muted);}
@media (max-width:760px){.case{grid-template-columns:1fr;}}

/* ---------- Clipping ---------- */
.clip-group{margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.clip-group h2{font-size:1.6rem;}
.clipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.6rem 1.4rem;margin-top:1.2rem;}
.clipcard{display:block;text-decoration:none;color:inherit;}
.clipimg{aspect-ratio:3/4;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.7rem;overflow:hidden;}
.clipimg img{width:100%;height:100%;object-fit:contain;}
.clipcard .art{font-family:var(--f-head);font-size:.82rem;font-weight:600;margin:0 0 .15rem;}
.clipcard .meta{font-family:var(--f-head);font-size:.78rem;font-weight:500;color:var(--sec);margin:0 0 .3rem;}
.clipcard h3{font-size:1.02rem;line-height:1.22;color:var(--deep);}
.clipcard:hover h3{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Currículo ---------- */
.cv{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:1.5rem clamp(1.5rem,4vw,3rem);}
.cv h2{font-size:1.3rem;padding-top:.15rem;}
.cv ol{list-style:none;margin:0;padding:0;}
.cv li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:0 0 1.3rem;}
.cv .yr{color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums;padding-top:.1rem;}
.cv .role{font-weight:600;}
.cv .org{color:var(--muted);}
.cv .desc{font-size:1rem;color:var(--muted);margin-top:.2rem;max-width:62ch;}
.cv hr{grid-column:1/-1;border:0;border-top:1px solid var(--line);margin:.2rem 0 1rem;width:100%;}
.cv ol.two{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;padding-left:9rem;}
.cv ol.two li{grid-template-columns:1fr;}
@media (max-width:700px){.cv{grid-template-columns:1fr;}.cv li{grid-template-columns:6rem minmax(0,1fr);}.cv ol.two{padding-left:7rem;}}

/* ---------- Contato ---------- */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,4rem);}
.channels{list-style:none;margin:0;padding:0;}
.channels li{padding:.9rem 0;border-bottom:1px solid var(--line);}
.channels span{display:block;font-family:var(--f-head);color:var(--muted);font-size:.85rem;}
.channels a{color:var(--sec);}
@media (max-width:760px){.contact{grid-template-columns:1fr;}}

/* ---------- Rodapé ---------- */
.site-footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--footer);font-size:.95rem;}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important;}}