/* RembraNext 2027 — landing page
   Layout em "unidades de prancheta": desktop = 1920, mobile = 1080 (ver --u).
   Cada bloco .a recebe coordenadas da prancheta: --x --y --w --h --f --l (desktop)
   e --X --Y --W --H --F --L (mobile). */
:root{
  --navy:#1A2E66;--green:#278B4D;--lime:#7ABA50;--wa:#64FF00;--wa-ink:#0F3E1E;
  --ice:#EDEDED;--graphite:#2D2D2D;--card-line:#F2F2F2;
  --u:min(1px,calc(100vw / 1920));
  --ph:8307;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font);font-weight:500;color:#000;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{position:relative;margin:0 auto;width:calc(1920 * var(--u));height:calc(var(--ph) * var(--u));overflow:visible}
.a{position:absolute;left:calc(var(--x,0) * var(--u));top:calc(var(--y,0) * var(--u));
   width:calc(var(--w,0) * var(--u));height:calc(var(--h,0) * var(--u));
   font-size:calc(var(--f,16) * var(--u));line-height:calc(var(--l,20) * var(--u))}
.t{height:auto;white-space:nowrap;z-index:3}
.bg{left:0;width:100%}
.bleed{left:calc(50% - 50vw);width:100vw}
br.m,.m-only{display:none}

/* cores e pesos */
.w{color:#fff}.nv{color:var(--navy)}.g{color:var(--green)}.ice{color:var(--ice)}
.b{font-weight:700}.k{font-weight:900}.c{text-align:center}
.navy-bg{background:var(--navy)}

/* ===== topo ===== */
.hero-bg{background:var(--navy) url("../img/hero-bg.webp") center top/cover no-repeat}
.m-bar{background:var(--navy);box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,0,0,.25);z-index:3}
.logo-mark img,.imgfill{width:100%;height:100%;object-fit:contain}
.nav-pill{background:var(--green);border-radius:0 0 calc(40*var(--u)) calc(40*var(--u));
  box-shadow:0 calc(8*var(--u)) calc(18*var(--u)) rgba(10,20,50,.45);z-index:3}
.nav a{color:#fff;z-index:4}
.nav a:hover,.nav a:focus-visible{text-decoration:underline;text-underline-offset:.25em}
.btn{display:flex;align-items:center;justify-content:center;background:var(--lime);color:#fff;border-radius:999px;z-index:4;
  box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,0,0,.28);white-space:nowrap;transition:filter .15s}
.btn:hover,.wa-btn:hover{filter:brightness(1.07)}
.burger{display:none;background:none;border:0;padding:0;cursor:pointer;z-index:5}
.burger span{position:absolute;left:0;width:100%;height:calc(13*var(--u));background:var(--green);border-radius:calc(2*var(--u))}
.wordmark{z-index:4}
.rembrandt{z-index:2;pointer-events:none}
.hero-txt{z-index:2}

/* ===== seções ===== */
.photo{object-fit:cover;border-radius:calc(45*var(--u));z-index:2}
.band{background:var(--navy);z-index:3}
.cap{z-index:4}
.swoosh{z-index:1;pointer-events:none}
.puzzle{z-index:1}
.ico{z-index:2;display:flex;align-items:center;justify-content:center}
.ico svg{width:100%;height:100%;fill:#fff}
.card-t,.card-p{z-index:2}
.bul li{position:relative;padding-left:calc(18*var(--u));margin-top:calc(10*var(--u))}
.bul li:first-child{margin-top:0!important}
.bul li::before{content:"\2022";position:absolute;left:0}
.bul.ia li{margin-top:calc(20*var(--u))}
.vestbox{overflow:hidden;z-index:2}
.vestbox .card{position:absolute;left:calc(38*var(--u));top:calc(78*var(--u));width:calc(513*var(--u));height:calc(603*var(--u));
  background:#fff;border-radius:calc(36*var(--u))}
.vestbox img{position:absolute;left:0;top:calc(-19*var(--u));width:calc(598*var(--u));height:calc(983*var(--u))}
.ia-bg{background:#0f2a66 url("../img/ia-bg.webp") center/cover no-repeat;border-bottom:calc(6*var(--u)) solid #16296a}
.hl{background:var(--lime);border-radius:calc(8*var(--u));padding:0 calc(10*var(--u));-webkit-box-decoration-break:clone;box-decoration-break:clone}
.conh-band{background:var(--lime);border-radius:calc(14*var(--u))}

/* carrossel */
.slot{border-radius:calc(32*var(--u));overflow:hidden;z-index:2;background:#223a7a}
.slot img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.arrow{z-index:4;border:0;padding:0;border-radius:50%;background:var(--green);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 calc(3*var(--u)) calc(8*var(--u)) rgba(0,0,0,.3)}
.arrow svg{width:40%;height:40%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.arrow:focus-visible,.btn:focus-visible,.wa-btn:focus-visible,.faq summary:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* FAQ */
.ice-bg{background:var(--ice)}
.faq details{margin:0}
.faq details+details{margin-top:calc(72*var(--u))}
.faq details p{margin-top:calc(10*var(--u))}
.faq summary{list-style:none;cursor:pointer;white-space:nowrap;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.chev{display:inline-block;vertical-align:middle;width:calc(36*var(--u));height:calc(36*var(--u));margin-left:calc(20*var(--u));margin-top:calc(-6*var(--u));
  border-radius:50%;background:var(--green);position:relative;transition:transform .2s}
.chev::after{content:"";position:absolute;left:50%;top:44%;width:26%;height:26%;border:solid #fff;border-width:0 calc(3*var(--u)) calc(3*var(--u)) 0;transform:translate(-50%,-50%) rotate(45deg)}
.faq details:not([open]) .chev{transform:rotate(-90deg)}
.faq p{white-space:nowrap}

/* contato */
.green-bg{background:var(--green)}
.talk{background:var(--navy);border-radius:calc(30*var(--u));display:flex;align-items:center;justify-content:center;z-index:3;white-space:nowrap}
.wa-btn{z-index:3;display:block}
.wa-pill{position:absolute;background:var(--wa);border-radius:calc(22*var(--u))}
.wa-ico{position:absolute;filter:drop-shadow(0 calc(4*var(--u)) calc(6*var(--u)) rgba(0,0,0,.25))}
.wa-num{position:absolute;color:var(--wa-ink);font-weight:700;white-space:nowrap}
.foot-bg{background:var(--graphite)}
.divider{background:var(--ice)}
.fi{z-index:2}
.foot a:hover{text-decoration:underline}
.phone-ico svg{width:100%;height:100%;fill:var(--ice)}

/* menu mobile */
.mnav{display:none}

/* ============ MOBILE (prancheta 1080) ============ */
@media (max-width:899px){
  :root{--u:calc(100vw / 1080);--ph:11932.7}
  .page{width:calc(1080 * var(--u));overflow:hidden}
  .a{left:calc(var(--X,0) * var(--u));top:calc(var(--Y,0) * var(--u));
     width:calc(var(--W,0) * var(--u));height:calc(var(--H,0) * var(--u));
     font-size:calc(var(--F,16) * var(--u));line-height:calc(var(--L,20) * var(--u))}
  .t{height:auto}
  .bg{left:0;width:100%}
  .bleed{left:0;width:100%}
  br.d,.d-only{display:none}
  br.m{display:inline}
  .m-only{display:block}
  .hero-bg{background-image:url("../img/hero-bg-m.webp")}
  .photo.em{border-radius:calc(72*var(--u));box-shadow:0 calc(6*var(--u)) calc(14*var(--u)) rgba(0,0,0,.18)}
  .burger{display:block}
  .bul li{margin-top:calc(30*var(--u))}
  .bul.ia li{margin-top:calc(60*var(--u))}
  .vestbox .card{left:calc(29.5*var(--u));top:calc(96*var(--u));width:calc(585*var(--u));height:calc(652.5*var(--u));border-radius:calc(45*var(--u))}
  .vestbox img{top:calc(-20.6*var(--u));width:calc(655.8*var(--u));height:calc(1076.8*var(--u))}
  .slot{border-radius:calc(40*var(--u))}
  .hl{border-radius:calc(10*var(--u));padding:calc(2*var(--u)) calc(12*var(--u))}
  .faq details+details{margin-top:calc(61.3*var(--u))}
  .faq details p{margin-top:calc(8.4*var(--u))}
  .chev{width:calc(30*var(--u));height:calc(30*var(--u));margin-left:calc(14*var(--u));margin-top:calc(-4*var(--u))}
  .talk{border-radius:calc(34*var(--u))}
  .wa-pill{border-radius:calc(18*var(--u))}
  .mnav{display:block;position:absolute;left:0;top:calc(170*var(--u));width:100%;z-index:6;background:var(--navy);
    padding:calc(20*var(--u)) calc(94*var(--u)) calc(50*var(--u));box-shadow:0 calc(12*var(--u)) calc(24*var(--u)) rgba(0,0,0,.35);
    transform-origin:top;transition:opacity .2s,transform .2s}
  .mnav[hidden]{display:none}
  .mnav a{display:block;color:#fff;font-size:calc(46*var(--u));line-height:calc(110*var(--u));border-bottom:1px solid rgba(255,255,255,.15)}
  .mnav a.go{margin-top:calc(40*var(--u));border:0;background:var(--lime);border-radius:999px;text-align:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* topo: logo do colégio (link p/ site) + voltar ao topo */
.logo-colegio-top img{width:100%;height:100%;object-fit:contain;display:block}
.logo-link{cursor:pointer}
.totop{display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));z-index:5;
  font-size:calc(18*var(--u));line-height:1;font-weight:700;color:#fff;background:var(--green);border-radius:999px;
  box-shadow:0 calc(3*var(--u)) calc(10*var(--u)) rgba(0,0,0,.18);transition:transform .15s,background .15s}
.totop span{font-size:1.25em;line-height:1}
.totop.on-dark{background:var(--lime);color:#0F3E1E}
.totop:hover,.totop:focus-visible{transform:translateY(-2px);background:var(--navy);color:#fff}
.totop.on-dark:hover,.totop.on-dark:focus-visible{background:#fff;color:var(--navy)}
@media (max-width:899px){.totop{font-size:calc(26*var(--u))}}