/* v31 — with gallery and updated Localização */
:root{
  --bg-light:#f5f5f5;
  --ink-light:#111111;
  --bg-dark:#121212;
  --ink-dark:#f2f2f2;
  --maxw: 960px;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{font-family:var(--font-ui);line-height:1.65;color:var(--ink-dark);background:var(--bg-dark);}
a{color:inherit;text-decoration:underline}
ul{margin:0;padding-left:1.2rem}
li{margin:.25rem 0}

.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}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:8px 12px;background:#fff;color:#000;border:1px solid #000}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:var(--bg-dark);color:var(--ink-dark);border-bottom:none;
}
.site-nav{display:flex;gap:12px;flex-wrap:wrap}
.site-nav a{padding:8px 10px;text-decoration:none;color:var(--ink-dark)}
.site-nav a:focus,.site-nav a:hover{outline:2px solid var(--ink-dark);outline-offset:2px}
.site-nav a:first-child span[aria-hidden="true"]{font-size:1.6em;font-weight:700;line-height:1}
.ui-tools{display:flex;gap:8px}
.ui-tools button{border:none;background:var(--ink-dark);color:var(--bg-dark);padding:8px 12px;border-radius:999px;font-weight:600}

/* Sections */
.section{padding: clamp(36px, 6vw, 64px) 18px}
.section.light{background:var(--bg-light);color:var(--ink-light)}
.section.dark{background:var(--bg-dark);color:var(--ink-dark)}

.hero{display:grid;place-items:center;min-height:52vh;
  padding: clamp(24px, 5vw, 48px) 18px clamp(20px, 4vw, 40px);
  background:var(--bg-dark);color:var(--ink-dark);
}
.hero .hero-inner{max-width:var(--maxw);text-align:center}
.hero-logo{
  width: clamp(311px, 55.2vw, 588px);
  height: clamp(48px, 9.6vw, 115px);
  margin: 0 auto clamp(16px,3vw,24px);
  background-color: var(--ink-dark);
  -webkit-mask: url('assets/miro-logo-horizontal.svg') no-repeat center / contain;
          mask: url('assets/miro-logo-horizontal.svg') no-repeat center / contain;
}
.hero h1{font-size:clamp(26px, 5.5vw, 42px);line-height:1.15;margin:0 0 1em;font-weight:400;letter-spacing:-0.01em}
.hero .tagline{margin:0 0 1.2em;font-size:clamp(18px, 2.6vw, 22px);font-style:normal}

/* Typography */
.container{max-width:var(--maxw);margin:0 auto}
h2{font-size:clamp(22px, 4vw, 34px);margin:0 0 .6em;font-weight:700;letter-spacing:-0.01em}
h3{font-size:clamp(18px, 3vw, 24px);margin:.8em 0 .4em}

/* About */
.about{max-width:var(--maxw);margin:0 auto;position:relative}
.about::after{content:"";display:block;clear:both}
.about .profile{float:right;margin:0 0 14px 22px}

  
.dark .btn.invert{background:var(--bg-light);color:var(--ink-light)}
.light .btn.invert{background:var(--bg-dark);color:var(--ink-dark)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0}
.btn-row.left{justify-content:flex-start}

/* Sessões gallery */
.sessao-galeria{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.sessao-galeria .gal-thumb{display:inline-block;line-height:0;border-radius:8px;overflow:hidden}
.sessao-galeria img{
  display:block;
  height:auto;
  max-height:200px;
  width:auto;
  max-width:min(100%, 320px);
  border-radius:8px;
}
@media (max-width:700px){
  .sessao-galeria{justify-content:center}
  .sessao-galeria img{max-height:300px;max-width:100%}
}

/* Lightbox modal */
.lb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:999}
.lb-backdrop.open{display:flex}
.lb-backdrop img{max-width:90vw;max-height:90vh;border-radius:8px}
.lb-backdrop button{position:absolute;top:14px;right:14px;border:none;border-radius:999px;padding:10px 12px;background:#fff;color:#000;font-weight:700;cursor:pointer}

/* Anchor offset */
section[id]{ scroll-margin-top: 80px }

/* Footer */
.site-footer{padding:20px 18px;text-align:center;border-top:2px solid currentColor}
.privacy-note{max-width:960px;margin:8px auto 0;font-size:.95rem;line-height:1.5}

/* Qualificações */
#q-heading{font-size:clamp(22px, 4vw, 34px);font-weight:700;letter-spacing:-0.01em;margin:0 0 .6em}
.section.dark h2{font-size:clamp(22px, 4vw, 34px)}
.section.dark h3{font-size:clamp(16px, 2.6vw, 20px);font-weight:600}


/* v33 — Sessões gallery floats right like 'Sobre' photo, text wraps around */
.section.dark .sessao-galeria{
  float: right;
  display: block;
  margin: 0 0 14px 22px; /* space to the left for text */
  max-width: 340px;
}
.section.dark .sessao-galeria .gal-thumb{display:block; margin:0 0 12px 0; border-radius:8px; overflow:hidden}
.section.dark .sessao-galeria img{display:block; border-radius:8px; max-height:220px; height:auto; width:auto; max-width:100%}

/* Clear float at end of container to avoid layout bleed */
#sessoes .container::after{content:""; display:block; clear:both}

@media (max-width: 700px){
  .section.dark .sessao-galeria{float:none; margin:12px 0; max-width:none}
  .section.dark .sessao-galeria .gal-thumb{display:inline-block; margin:0 8px 8px 0}
  .section.dark .sessao-galeria img{max-height:300px; width:auto; max-width:min(100%, 320px)}
}


/* v34 — Sessões gallery horizontal, aligned right with wrap */
.section.dark .sessao-galeria{
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 14px 22px; /* space to the left for body text */
  max-width: 520px;      /* fits 2–3 thumbs per row depending on viewport */
}
.section.dark .sessao-galeria .gal-thumb{
  display:inline-block;
  border-radius:8px;
  overflow:hidden;
  line-height:0;
}
.section.dark .sessao-galeria img{
  display:block;
  border-radius:8px;
  max-height:220px;
  height:auto;
  width:auto;
  max-width:calc((520px - 12px) / 2); /* roughly two per row at max width */
}

#sessoes .container::after{content:""; display:block; clear:both}

@media (max-width: 900px){
  .section.dark .sessao-galeria{max-width:440px}
  .section.dark .sessao-galeria img{max-width:calc((440px - 12px) / 2)}
}
@media (max-width: 700px){
  .section.dark .sessao-galeria{
    float:none;
    margin:12px 0;
    max-width:none;
    justify-content:center;
  }
  .section.dark .sessao-galeria img{
    max-height:280px;
    max-width: 48%;
  }
}


/* v35 — Responsive map embed */
.map-embed{
  width:100%;
  height: clamp(220px, 38vw, 360px);
  border:0;
  border-radius:8px;
  margin-top:16px;
}
@media (max-width:700px){
  .map-embed{ height: clamp(220px, 56vw, 320px); }
}


/* v37 buttons */
.btn{display:inline-block;padding:12px 20px;text-decoration:none;font-weight:700;border-radius:999px;border:none}
.btn:hover,.btn:focus{outline:2px solid currentColor;outline-offset:2px;text-decoration:none}
.dark .btn.invert{background:var(--bg-light);color:var(--ink-light)}
.light .btn.invert{background:var(--bg-dark);color:var(--ink-dark)}


/* v39 Sobre image fixes */
.about .profile img{
  width:220px;
  height:auto;
  border-radius:12px;
}
@media (max-width:700px){
  .about .profile img{
    width:280px;
    height:auto;
    border-radius:12px;
  }
}