:root{
    --white:#ffffff;
    --black:#111111;
    --cream:#fffcf5;
    --gray:#989797;
    --gray-light:#f2f1f1;
    --gray-line:#e2e0e0;
    --blue:#1d6bf3;
    --blue-dark:#1652b8;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{
    background:var(--white);
    color:var(--black);
    font-family:'Nunito', sans-serif;
    font-weight:500;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  h1,h2,h3{line-height:1.12; font-weight:800; letter-spacing:-0.01em;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 28px;}
  section{padding:96px 0;}
  .eyebrow{
    text-transform:uppercase; font-size:0.82rem; font-weight:700;
    color:var(--blue); letter-spacing:0.06em;
  }

  /* placeholders de imagem — trocar por <img> quando o material chegar */
  .img-ph{
    background:var(--gray-light);
    border:1px dashed var(--gray);
    border-radius:16px;
    color:var(--gray);
    display:flex; align-items:center; justify-content:center;
    text-align:center; font-size:0.85rem; padding:20px;
    overflow:hidden;
  }
  .img-ph.has-photo{border:none; background:transparent;}
  .img-ph.has-photo img{transition:transform .35s ease;}
  .img-ph.has-photo:hover img{transform:scale(1.06);}

  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(17,17,17,0.96);
    backdrop-filter:blur(6px);
    border-bottom:1px solid #000;
  }
  .header-inner{
    max-width:1100px; margin:0 auto; padding:8px 28px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo-box{
    display:flex; align-items:center;
  }
  nav{display:flex; gap:26px; flex-wrap:wrap;}
  nav a{
    font-size:0.82rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--white);
    padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s, color .2s;
  }
  nav a:hover{color:var(--blue); border-color:var(--blue);}
  .nav-stack{display:flex; flex-direction:column; align-items:flex-start;}
  .nav-stack a{padding:0;}
  .nav-stack a:first-child{padding-top:6px;}
  .nav-sub{
    font-size:0.66rem !important; font-weight:700 !important; text-transform:uppercase;
    color:var(--blue) !important; letter-spacing:0.02em; margin-top:2px; border-bottom:none !important;
  }
  .nav-sub:hover{color:#6d9bff !important;}

  /* Hero / Início */
  .hero{background:linear-gradient(90deg, #a3c0dd 0%, #96b1e0 25%, #90a0dd 50%, #918fd6 75%, #947fce 100%); padding:48px 0;}
  .hero h1{color:var(--black); font-size:clamp(1.7rem,3.6vw,2.4rem);}
  .hero .lede{margin-top:10px; font-size:1.08rem; color:var(--black); max-width:42ch;}
  .hero-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
  }

  .destaque-box{
    margin-top:28px; background:var(--black); color:var(--white);
    border:1.5px solid var(--black); border-radius:16px;
    padding:18px 24px; display:block;
    cursor:pointer; transition:background .2s, transform .25s, box-shadow .2s;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
  }
  .destaque-box:hover{background:#3a6bb8; transform:scale(1.04); box-shadow:0 14px 36px rgba(29,107,243,0.4); z-index:5; position:relative;}
  .destaque-box h3{font-size:0.92rem; line-height:1.25; text-transform:uppercase; color:var(--white); font-weight:800; white-space:nowrap;}
  .destaque-box .destaque-meta{margin-top:6px; font-size:0.82rem; font-weight:700; color:rgba(255,255,255,0.9);}

  .experiencia-box{
    margin-top:28px; background:transparent; color:var(--black);
    border:1.5px solid rgba(17,17,17,0.25); border-radius:16px;
    padding:16px 24px; display:block;
    cursor:pointer; transition:background .2s, transform .25s, box-shadow .2s;
    box-shadow:none;
  }
  .experiencia-box:hover{background:transparent; transform:scale(1.04); box-shadow:0 10px 26px rgba(0,0,0,0.15); z-index:5; position:relative;}
  .experiencia-title-row{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;}
  .experiencia-box h3{font-size:0.94rem; line-height:1.2; text-transform:uppercase; color:var(--black); font-weight:800; white-space:nowrap;}
  .experiencia-gratuito{color:var(--blue); font-size:0.74rem; font-weight:700; line-height:1.2;}
  .experiencia-box p{
    margin-top:6px; color:var(--black); font-size:0.88rem; font-weight:700; line-height:1.3;
    max-width:60ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .experiencia-meta{
    margin-top:10px; font-size:0.82rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--black);
  }

  /* Curso teaser */
  .curso-teaser{background:var(--white); border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line);}
  .curso-card{
    max-width:640px; margin:0 auto; background:var(--white);
    border:1px solid var(--gray-line); border-radius:16px; overflow:hidden; text-align:center;
  }
  .curso-card .img-ph{aspect-ratio:16/9; border-radius:0;}
  .curso-photo-wrap img{transition:transform .35s ease;}
  .curso-photo-wrap:hover img{transform:scale(1.08);}

  .curso-card-topbar{
    background:var(--white); padding:22px 24px; font-weight:800; font-size:1.5rem;
    letter-spacing:0.01em; border-bottom:1px solid var(--gray-line);
  }
  .curso-card-bottombar{
    display:block; background:var(--white); padding:28px 32px; cursor:pointer;
    border-top:1px solid var(--gray-line); text-decoration:none; color:inherit;
    transition:background .25s, transform .25s;
  }
  .curso-card-bottombar:hover{background:var(--blue); transform:scale(1.02);}
  .curso-card-bottombar span{display:block; color:var(--black); font-size:1.15rem; font-weight:700; transition:color .25s;}
  .curso-card-bottombar:hover span{color:var(--white);}
  .curso-card-bottombar strong{
    display:block; margin-top:16px; text-transform:uppercase; font-size:1.3rem; font-weight:800; color:var(--blue);
    transition:color .25s;
  }
  .curso-card-bottombar:hover strong{color:var(--white);}

  /* A Academia */
  .academia{background:linear-gradient(90deg, #a3c0dd 0%, #96b1e0 25%, #90a0dd 50%, #918fd6 75%, #947fce 100%); color:var(--black);}
  .academia-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:start;}
  .academia p{font-size:0.86rem; color:#333; font-weight:700; max-width:74ch; margin-top:16px;}

  .academia-mural{position:relative; width:100%; height:480px;}
  .academia-mural img{
    position:absolute; border:6px solid #fff; border-radius:2px;
    box-shadow:0 10px 24px rgba(0,0,0,0.28); object-fit:cover; aspect-ratio:1/1;
    cursor:default; transition:transform .25s, box-shadow .25s, z-index 0s;
  }
  .academia-mural .mural-placeholder{
    position:absolute; aspect-ratio:1/1; border:2px dashed #b8b8b8; border-radius:6px;
    background:var(--gray-light); display:flex; align-items:center; justify-content:center;
    text-align:center; padding:8px; font-size:0.62rem; font-weight:700; color:var(--gray);
    text-transform:uppercase; letter-spacing:0.02em;
    transform:rotate(var(--r)); transition:transform .25s;
  }
  .academia-mural .mural-placeholder:hover{transform:rotate(var(--r)) scale(1.05);}
  .academia-mural img:hover{
    transform:rotate(var(--r)) scale(1.08) !important;
    box-shadow:0 18px 32px rgba(0,0,0,0.34); z-index:50 !important;
  }
  .mural-1{--r:-7deg; top:0%;   left:0%;  width:34%; transform:rotate(var(--r)); z-index:2;}
  .mural-2{--r:5deg;  top:4%;   left:27%; width:30%; transform:rotate(var(--r)); z-index:3;}
  .mural-3{--r:-4deg; top:1%;   left:53%; width:32%; transform:rotate(var(--r)); z-index:1;}
  .mural-4{--r:6deg;  top:31%;  left:1%;  width:30%; transform:rotate(var(--r)); z-index:4;}
  .mural-5{--r:-3deg; top:27%;  left:29%; width:35%; transform:rotate(var(--r)); z-index:6;}
  .mural-6{--r:7deg;  top:33%;  left:59%; width:29%; transform:rotate(var(--r)); z-index:5;}
  .mural-7{--r:-5deg; top:63%;  left:0%;  width:32%; transform:rotate(var(--r)); z-index:7;}
  .mural-8{--r:4deg;  top:59%;  left:28%; width:33%; transform:rotate(var(--r)); z-index:9;}
  .mural-9{--r:-6deg; top:65%;  left:58%; width:29%; transform:rotate(var(--r)); z-index:8;}

  /* Mural específico da Seção 1 (hero): 11 fotos misturadas, mesmo estilo/tamanho da página Academia */
  #hero-mural{height:620px;}
  #hero-mural img:hover{
    transform:rotate(var(--r)) scale(1.35) !important;
  }
  #hero-mural .mural-1{--r:-7deg;  top:0%;  left:0%;  width:32%; z-index:2;}
  #hero-mural .mural-23{--r:4deg;  top:45%; left:27%; width:32%; z-index:9;}
  #hero-mural .mural-2{--r:-4deg;  top:1%;  left:53%; width:31%; z-index:1;}
  #hero-mural .mural-11{--r:6deg;  top:26%; left:1%;  width:29%; z-index:6;}
  #hero-mural .mural-3{--r:-3deg;  top:22%; left:28%; width:33%; z-index:4;}
  #hero-mural .mural-12{--r:-6deg; top:50%; left:57%; width:28%; z-index:5;}
  #hero-mural .mural-5{--r:7deg;   top:27%; left:58%; width:28%; z-index:7;}
  #hero-mural .mural-13{--r:5deg;  top:4%;  left:27%; width:29%; z-index:3;}
  #hero-mural .mural-6{--r:-5deg;  top:49%; left:0%;  width:31%; z-index:8;}
  #hero-mural .mural-7{--r:5deg;   top:71%; left:14%; width:30%; z-index:10;}
  #hero-mural .mural-9{--r:-4deg;  top:69%; left:47%; width:29%; z-index:11;}

  /* Lightbox: abre a foto do mural em tamanho grande */
  .mural-lightbox{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85);
    z-index:1000; align-items:center; justify-content:center; padding:32px; cursor:zoom-out;
  }
  .mural-lightbox.show{display:flex;}
  .mural-lightbox img{
    max-width:min(60vw, 560px); max-height:60vh; border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .mural-lightbox-close{
    position:absolute; top:24px; right:32px; color:var(--white); font-size:2rem;
    font-weight:800; cursor:pointer; line-height:1;
  }
  .academia h2{font-size:2rem;}

  /* Instrutores */
  .instrutores{background:var(--white); border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line);}
  .instrutores h2{font-size:2rem; text-align:center;}
  .instrutores-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:52px;
  }
  .instrutor .img-ph{aspect-ratio:1/1; max-width:77%; margin:0 auto;}
  .instrutor .img-ph.has-photo:hover img{transform:scale(1.15);}
  .instrutor h3{
    margin-top:18px; font-size:1rem; text-transform:uppercase; letter-spacing:0.03em;
    max-width:77%; margin-left:auto; margin-right:auto;
  }
  .instrutor-link{color:var(--black); text-decoration:none; transition:color .2s;}
  .instrutor-link:hover{color:var(--blue); text-decoration:underline;}
  .instrutor p{margin-top:10px; font-size:0.94rem; color:#444; max-width:77%; margin-left:auto; margin-right:auto;}

  /* #criaeletrobase */
  .cria{background:var(--white); color:var(--black); padding:30px 0;}

  .cria-circle{
    position:relative; width:min(620px, 92vw); aspect-ratio:1/1;
    margin:24px auto 0;
  }
  .cria-circle .cria-card{
    position:absolute; transform:translate(-50%,-50%);
    width:92px; text-align:center;
  }
  .cria-circle .cria-card .img-ph{
    width:76px; height:76px; margin:0 auto; border-radius:50%;
    border:3px solid var(--white); box-shadow:0 6px 16px rgba(0,0,0,0.18);
    overflow:hidden; font-size:0.6rem;
  }
  .cria-circle-text{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /* logo + texto centralizados como um bloco só no círculo */
    text-align:center; max-width:52%; z-index:1;
  }
  .cria-circle-text h2{font-size:2.1rem;}
  .cria-circle-text .sub{
    color:#555; font-size:0.94rem; margin-top:2px; text-transform:uppercase;
    letter-spacing:0.02em; line-height:1.4; font-weight:800;
  }
  .cria-circle .cria-card span{
    display:block; margin-top:8px; font-size:0.7rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.03em; color:var(--black);
    line-height:1.2; opacity:0; transform:translateY(-3px);
    transition:opacity .25s ease, transform .25s ease, color .2s;
  }
  .cria-circle .cria-card:hover span{opacity:1; transform:translateY(0); color:var(--black);}

  /* Accordion "Ler" - página do Curso */
  .topic-accordion{
    background:var(--white); border:1px solid var(--gray-line); border-radius:10px;
    margin-top:14px; box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  .topic-accordion:first-child{margin-top:0;}
  .topic-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:none; border:none; padding:20px 24px; cursor:pointer; text-align:left; gap:16px;
  }
  .topic-toggle h2, .topic-toggle h3{
    margin:0; font-size:1.05rem; text-transform:uppercase; letter-spacing:-0.01em;
  }
  .topic-toggle-icon{
    flex-shrink:0; width:14px; height:14px; position:relative;
  }
  .topic-toggle-icon::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:100%;
    border-right:2.5px solid var(--black); border-bottom:2.5px solid var(--black);
    transform:rotate(45deg) translate(-15%,-15%); transition:transform .25s;
  }
  .topic-toggle[aria-expanded="true"] .topic-toggle-icon::before{transform:rotate(225deg) translate(-15%,-15%);}
  .topic-content{overflow:hidden; padding:0 24px 20px;}
  .dj1dia-box{
    max-width:600px; padding:18px 22px; margin-top:8px;
    background:var(--white); border:1.5px solid var(--gray-line); border-radius:10px;
    box-shadow:0 4px 14px rgba(0,0,0,0.08);
  }
  .dj1dia-box p:first-child{margin-top:0 !important;}
  .topic-content ul{margin-top:12px; display:grid; gap:8px;}
  .topic-content ul li{padding-left:18px; position:relative; font-size:0.95rem; color:#333;}
  .topic-content ul li::before{
    content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--blue);
  }

  @keyframes girar-disco{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }
  .cria-circle .cria-card:hover .img-ph.has-photo img{
    animation:girar-disco 1.818s linear infinite; /* 33 RPM = 60/33s por volta */
  }
  @media (prefers-reduced-motion: reduce){
    .cria-circle .cria-card:hover .img-ph.has-photo img{animation:none;}
  }

  /* Eventos */
  .eventos{background:var(--white); border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line); padding:40px 0;}
  .eventos h2{font-size:2rem;}
  .eventos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:44px;}
  .evento-card .img-ph{aspect-ratio:4/3;}
  .evento-card p{margin-top:12px; font-size:0.95rem; color:#444;}

  /* Módulo (página do curso) */
  .modulo{background:var(--gray-light); border-top:1px solid var(--gray-line); padding-top:32px;}
  .modulo-back{font-size:0.88rem; font-weight:600; color:var(--blue); display:inline-block; margin-bottom:18px;}
  .modulo-hero{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
  /* título começa na mesma altura do topo da foto de capa (página do curso) */
  .modulo .modulo-hero h1{margin-top:0; line-height:1; margin-bottom:4px;}
  .modulo-hero .img-ph{aspect-ratio:4/3;}

  .curso-top-grid{display:grid; grid-template-columns:1.4fr 0.8fr; gap:40px; align-items:start;}
  .enroll-box-narrow{max-width:340px; margin-left:auto; margin-top:0;}
  /* card "Vagas limitadas" alinhado ao topo do primeiro tópico (Didática e Dinâmica) */
  .curso-top-grid > .enroll-box-narrow{margin-top:0;}
  .choice-cards-stack{flex-direction:column;}
  .choice-cards-stack .choice-card{min-width:0;}
  #payment-cards.choice-cards{gap:14px;}
  #payment-cards .choice-card{min-width:130px; padding:16px 14px; text-align:center;}
  #payment-cards .choice-card .line1{line-height:1.3;}
  .modulo h1{font-size:clamp(1.5rem,3.4vw,2.3rem); margin-top:14px; white-space:nowrap;}
  .modulo .lede{margin-top:18px; color:#333; font-size:1.02rem;}
  .lede-destaque{font-size:1.2rem; font-weight:700; color:var(--black); line-height:1.35;}

  .turma-list{margin-top:18px; display:grid; gap:12px;}
  .turma-item{
    border:1.5px solid var(--gray-line); border-radius:12px; padding:14px 18px; font-size:0.98rem;
  }
  .turma-item strong{color:var(--blue);}
  .cta-matricula{text-align:center; line-height:1.4; font-size:0.98rem;}

  .enroll-box{
    margin-top:32px; background:var(--white); border:1px solid var(--gray-line);
    border-radius:16px; padding:24px; max-width:640px;
  }
  .enroll-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .field label{display:block; font-size:0.76rem; font-weight:600; color:#555; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.02em;}
  .field select, .field input{
    width:100%; border:1px solid var(--gray-line); border-radius:10px; background:var(--white);
    padding:9px 12px; font-family:'Nunito', sans-serif; font-size:0.92rem; color:var(--black);
  }
  .field select:focus, .field input:focus{outline:2px solid var(--blue); outline-offset:1px;}
  .field-full{grid-column:1/-1;}
  .price-line{
    margin-top:16px; padding-top:14px; border-top:1px solid var(--gray-line);
    display:flex; align-items:baseline; justify-content:flex-start; flex-wrap:wrap; gap:10px;
  }
  .price-line .amount{font-size:1.6rem; font-weight:800; color:var(--blue);}
  .price-line .note{font-size:0.8rem; color:var(--gray); font-weight:700;}
  .price-line .price-or{font-size:0.8rem; color:var(--gray); font-weight:700; margin-right:-4px;}

  .price-block{margin-top:14px; padding-top:12px; border-top:1px solid var(--gray-line);}
  .price-was{font-size:1.05rem; font-weight:700; color:var(--gray);}
  .price-strike{text-decoration:line-through;}
  .price-was-note{font-size:0.8rem; color:var(--gray); font-weight:700; text-decoration:none;}
  .price-now-row{display:flex; align-items:baseline; gap:8px; margin-top:2px; flex-wrap:wrap;}
  .price-now{font-size:1.7rem; font-weight:800; color:var(--blue);}
  .price-discount{font-size:0.8rem; color:var(--gray); font-weight:700;}
  .price-tag{font-size:0.8rem; color:var(--gray); font-weight:700; letter-spacing:0.03em;}
  .price-tag-caps{text-transform:uppercase;}
  /* Cupom de afiliado (matrícula, etapa Pagamento) */
  .cupom-box{margin-top:20px; padding-top:16px; border-top:1px solid var(--gray-line);}
  .cupom-box label{display:block; font-size:0.76rem; font-weight:600; color:#555; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.02em;}
  .cupom-label-sub{text-transform:none; font-weight:600; letter-spacing:0;}
  .cupom-row{display:flex; gap:8px; max-width:330px;}
  .cupom-row input{flex:1; min-width:0; padding:7px 11px; border:1px solid var(--gray-line); border-radius:10px; font-family:'Nunito', sans-serif; font-size:0.86rem; text-transform:uppercase; letter-spacing:0.04em; background:#fff;}
  .cupom-row input:focus{outline:2px solid var(--blue); outline-offset:1px;}
  .cupom-row input:disabled{background:#f2f2f2; color:#555;}
  .cupom-row .btn-outline{margin-top:0; padding:7px 14px; font-size:0.84rem; white-space:nowrap;}
  .cupom-row .btn-outline:disabled{opacity:0.45; cursor:default;}
  .cupom-msg{margin-top:10px; font-size:0.78rem; line-height:1.75; max-width:62ch;}
  .cupom-ok{color:#1e7b3c;}
  .cupom-remover{background:none; border:none; padding:0; margin-left:6px; font:inherit; font-size:0.74rem; color:var(--gray); text-decoration:underline; cursor:pointer;}
  .price-alt{margin-top:6px; font-size:0.8rem; color:var(--gray); font-weight:700;}

  .vagas-note{margin-top:4px; font-size:0.78rem; color:var(--blue); font-weight:600;}
  .enroll-btn{
    display:block; text-align:center; text-decoration:none;
    margin-top:14px; width:100%; background:var(--blue); color:var(--white); border:none;
    border-radius:10px; padding:12px; font-family:'Nunito', sans-serif; font-weight:700; font-size:0.94rem; cursor:pointer;
    transition:background .2s;
  }
  .enroll-btn:hover{background:var(--blue-dark);}
  .confirm-msg{display:none; margin-top:12px; padding:12px 14px; border:1px solid var(--blue); border-radius:10px; font-size:0.86rem;}
  .confirm-msg.show{display:block;}

  /* Seleção de turma / pagamento (cartões clicáveis) */
  .section-title{font-weight:800; text-transform:uppercase; font-size:0.95rem; margin:0;}
  .section-subtext{color:var(--gray); font-size:0.84rem; margin-top:4px;}
  .choice-cards{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
  .choice-card{
    display:block; text-decoration:none; color:inherit;
    border:1.5px solid var(--gray-line); border-radius:14px; padding:13px 16px;
    min-width:150px; cursor:pointer; transition:border-color .2s, background .2s;
  }
  .choice-card:hover{border-color:#9ab6f7;}
  .choice-card.selected{border-color:var(--blue); background:#f2f6ff;}
  .choice-card .line1{font-weight:800; text-transform:uppercase; font-size:0.92rem;}
  .choice-card .line2{font-weight:800; text-transform:uppercase; font-size:0.92rem; margin-top:2px;}
  .choice-card .line3{font-weight:700; margin-top:4px; font-size:0.86rem; color:#555;}
  .choice-card .line4{color:var(--gray); font-weight:700; font-size:0.78rem; margin-top:3px;}

  /* Checkout em etapas (matrícula) */
  .checkout-breadcrumb{font-size:0.85rem; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:0.02em; margin-bottom:18px;}
  .checkout-breadcrumb span{margin-right:6px;}
  .checkout-breadcrumb span.active{color:var(--blue);}
  .checkout-breadcrumb span.sep{color:var(--gray-line); font-weight:400;}
  .checkout-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; margin-top:8px;}
  .checkout-grid.no-sidebar{grid-template-columns:1fr; max-width:640px; margin:0 auto;}
  .checkout-main{background:var(--white); border:1px solid var(--gray-line); border-radius:16px; padding:18px 22px;}
  .checkout-main h1{font-size:1.2rem;}
  .checkout-sidebar{background:var(--gray-light); border:1px solid var(--gray-line); border-radius:16px; padding:16px;}
  .checkout-sidebar h3{
    font-size:0.92rem; text-transform:uppercase; letter-spacing:0.02em;
    padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--gray-line);
  }
  .checkout-sidebar .sidebar-course{font-weight:700;}
  .checkout-sidebar .sidebar-detail{font-size:0.84rem; color:#555; font-weight:700; margin-top:3px;}
  .checkout-sidebar .sidebar-total{
    margin-top:14px; padding-top:12px; border-top:1px solid var(--gray-line);
    display:flex; justify-content:space-between; font-weight:800; font-size:1rem;
  }
  .checkout-sidebar .sidebar-total[hidden]{display:none;}
  .checkout-sidebar .sidebar-total span:last-child{color:var(--blue);}

  .summary-table{border:1px solid var(--gray-line); border-radius:12px; overflow:hidden; margin-top:16px;}
  .summary-table-head, .summary-table-row{
    display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; padding:11px 14px; align-items:center;
  }
  .summary-table-head{font-size:0.78rem; color:var(--gray); text-transform:uppercase; border-bottom:1px solid var(--gray-line);}
  .summary-table-row strong{display:block; font-size:0.94rem;}
  .summary-table-row span.sub{color:var(--gray); font-weight:700; font-size:0.8rem;}

  .terms-check{display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:0.88rem; color:#333;}
  .terms-check[hidden]{display:none;}
  .terms-check input{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    margin-top:3px; width:18px; height:18px; flex-shrink:0;
    border:2px solid var(--blue); border-radius:4px; background:var(--white);
    cursor:pointer; position:relative;
  }
  .terms-check input:checked{background:var(--blue);}
  .terms-check input:checked::after{
    content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
    border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .terms-check input:disabled{cursor:not-allowed;}
  .terms-hint{margin-top:4px; margin-left:24px; font-size:0.76rem; color:var(--gray);}

  .terms-tab-mini{
    display:block; background:#c4c4c4; color:var(--black); border:1px solid transparent;
    border-radius:6px; padding:4px 10px; font-family:'Nunito', sans-serif; font-weight:700;
    font-size:0.68rem; cursor:pointer; margin-top:16px;
    transition:background .2s, transform .2s, color .2s;
  }
  .terms-tab-mini:hover{background:rgba(17,17,17,0.85); color:var(--white); transform:scale(1.05);}
  .terms-tab-mini[data-tab="imagem"]:hover{transform:scale(1.02);}
  .terms-tab-mini.active{background:var(--black); color:var(--white);}
  .terms-tab-opcional{font-weight:600; opacity:0.7; text-transform:none;}
  .terms-tab-mini + .terms-check{margin-top:6px;}

  .dj1dia-tab{
    display:block; width:100%; max-width:600px; aspect-ratio:1830/229;
    border:none; border-radius:10px; padding:0; margin-top:28px;
    background-size:cover; background-position:center; cursor:pointer;
    transition:transform .2s, box-shadow .2s; box-shadow:0 4px 14px rgba(0,0,0,0.15);
  }
  .dj1dia-tab:hover{transform:scale(1.03); box-shadow:0 8px 22px rgba(0,0,0,0.25);}
  .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;
  }

  .terms-list{margin:8px 0 10px; display:grid; gap:6px;}
  .terms-list li{padding-left:16px; position:relative;}
  .terms-list li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--blue);}
  .terms-updated{color:var(--gray); font-size:0.76rem; font-style:italic;}
  .terms-jump{color:var(--blue); text-decoration:underline; cursor:pointer;}

  .terms-box{
    max-height:380px; overflow-y:auto; border:2.5px solid #9a9a9a; border-radius:12px;
    padding:14px 16px; font-size:0.82rem; color:#333; line-height:1.5; margin-top:12px;
  }
  .terms-box p{margin-bottom:10px;}
  /* Barra de rolagem própria nas caixas de termos, sempre visível em qualquer navegador
     (a rodinha do mouse rola a página; o texto rola pela barra ou pelas setas do teclado) */
  .terms-scroll-wrap{position:relative; margin-top:12px;}
  .terms-scroll-wrap:has(> .terms-box[hidden]){display:none;}
  .terms-scroll-wrap > .terms-box{margin-top:0; padding-right:34px; scrollbar-width:none;}
  .terms-scroll-wrap > .terms-box::-webkit-scrollbar{display:none;}
  .terms-trilho{position:absolute; top:10px; bottom:10px; right:9px; width:12px; background:#e6e6e6; border-radius:6px; cursor:pointer; touch-action:none;}
  .terms-polegar{position:absolute; top:0; left:0; width:100%; background:#8f8f8f; border-radius:6px; cursor:grab; touch-action:none;}
  .terms-polegar:hover, .terms-polegar.ativo{background:#555;}
  .terms-polegar.ativo{cursor:grabbing;}
  .terms-box:focus{outline:2px solid var(--blue); outline-offset:2px;}

  .btn-row{display:flex; gap:10px; margin-top:14px;}
  .btn-outline{
    background:var(--white); color:var(--black); border:1.5px solid var(--gray-line); border-radius:10px;
    padding:11px 18px; font-family:'Nunito', sans-serif; font-weight:700; font-size:0.92rem; cursor:pointer;
  }
  .btn-outline:hover{border-color:var(--black);}
  .enroll-btn:disabled{background:var(--gray-line); color:var(--gray); cursor:not-allowed;}


  .levels{margin-top:80px;}
  .levels h2{font-size:1.6rem;}
  .level-card{margin-top:36px; padding-top:36px; border-top:1px solid var(--gray-line);}
  .level-card h3{font-size:1.25rem;}
  .level-card p{margin-top:12px; color:#333; max-width:70ch;}
  .level-card ul{margin-top:16px; display:grid; gap:8px;}
  .level-card ul li{
    padding-left:18px; position:relative; font-size:0.96rem; color:#333;
  }
  .level-card ul li::before{
    content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--blue);
  }

  .extra-grid{margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:48px;}
  .extra-grid h3{font-size:1.1rem;}
  .extra-grid ul{margin-top:14px; display:grid; gap:8px;}
  .extra-grid ul li{padding-left:18px; position:relative; font-size:0.95rem; color:#333;}
  .extra-grid ul li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--blue);}

  footer{background:var(--black); color:var(--white); padding:36px 0; font-size:0.85rem;}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  footer .footer-inner{align-items:center;}
  .footer-contact{display:flex; align-items:center; gap:16px;}
  /* Destaque da área de contatos ao clicar em "Contato" no menu (some sozinho em ~3s) */
  .footer-contact{border-radius:14px; outline:3px solid transparent; outline-offset:14px;}
  .footer-contact.destaque-contato{animation:destaque-contato 3.2s ease forwards;}
  @keyframes destaque-contato{
    0%{outline-color:transparent;}
    10%{outline-color:var(--blue);}
    25%{outline-color:rgba(29,107,243,0.25);}
    40%{outline-color:var(--blue);}
    80%{outline-color:var(--blue);}
    100%{outline-color:transparent;}
  }
  @media (prefers-reduced-motion: reduce){
    .footer-contact.destaque-contato{animation:none; outline-color:var(--blue);}
  }
  .footer-ig-icon{color:var(--white); display:flex; transition:color .2s;}
  .footer-ig-icon:hover{color:var(--blue);}
  .footer-dm-link{color:var(--white); font-weight:700; text-decoration:underline; text-transform:uppercase; font-size:0.82rem; letter-spacing:0.02em;}
  .footer-email-link{
    position:relative; display:inline-block; color:var(--white); font-size:0.8rem;
    opacity:0.85; cursor:pointer; user-select:all;
  }
  .footer-email-link::after{
    content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); right:0;
    background:var(--white); color:var(--black); font-size:0.72rem; font-weight:700;
    padding:6px 10px; border-radius:6px; white-space:nowrap;
    opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; pointer-events:none;
  }
  .footer-email-link:hover{opacity:1;}
  .footer-email-link:hover::after{opacity:1; visibility:visible;}
  .footer-dm-link:hover{color:var(--blue);}

  /* Habla DJ */
  .habladj{background:var(--white); border-top:1px solid var(--gray-line); border-bottom:1px solid var(--gray-line);}
  .habladj h2{font-size:2rem; text-align:center;}
  .habladj-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:36px; align-items:center;
    margin-top:36px;
  }
  .video-embed{aspect-ratio:16/9; border-radius:16px; width:100%;}
  .video-embed iframe{width:100%; height:100%; border:0; border-radius:16px;}
  .habladj-text{max-width:420px; width:100%; color:#333; font-size:0.86rem; line-height:1.6;}
  .habladj-text p{margin-top:14px;}
  .habladj-text p:first-child{margin-top:0;}
  .habladj-text .habladj-guests{font-size:0.8rem; color:#555;}
  .habladj-text .habladj-guests strong{color:var(--black);}

  @media (max-width:800px){
    section{padding:64px 0;}
    .cria{padding:48px 0;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-grid .academia-mural{order:-1;}
    .cria-circle{
      position:static; width:100%; height:auto; aspect-ratio:auto;
      display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:28px;
    }
    .cria-circle .cria-card{position:static; transform:none; width:76px;}
    .cria-circle-text{
      position:static; transform:none; max-width:100%; order:-1;
      flex-basis:100%; margin-bottom:8px;
    }
    .cria-circle .cria-card .img-ph{width:60px; height:60px;}
    .habladj-grid{grid-template-columns:1fr;}
    .video-embed{max-width:100%; margin:0 auto;}
    .habladj-text{max-width:100%; margin:0 auto;}
    .academia-grid{grid-template-columns:1fr;}
    .academia-mural{
      height:auto; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px;
    }
    .academia-mural img{
      position:static; width:100px; height:100px; transform:none !important; z-index:1 !important;
      box-shadow:0 4px 10px rgba(0,0,0,0.2);
    }
    .academia-mural img:hover{transform:none !important; box-shadow:0 4px 10px rgba(0,0,0,0.2);}
    #dj1dia-mural{display:flex; flex-wrap:wrap; gap:10px; position:static; height:auto !important;}
    #dj1dia-mural .mural-placeholder{position:static; width:100px; transform:none !important;}
    .instrutores-grid{grid-template-columns:1fr;}
    .eventos-grid{grid-template-columns:1fr;}
    .modulo-hero{grid-template-columns:1fr;}
    .curso-top-grid{grid-template-columns:1fr;}
    .enroll-box-narrow{max-width:100%; margin-left:0;}
    .modulo h1{white-space:normal; font-size:1.9rem;}
    .enroll-row{grid-template-columns:1fr;}
    .extra-grid{grid-template-columns:1fr;}
    nav{gap:14px;}
    nav a{font-size:0.72rem;}
  }

  /* Campo de data de nascimento (Dados) */
  .field-error{margin-top:6px; font-size:0.82rem; color:#c0392b; font-weight:600;}
  .field-note{margin-top:8px; font-size:0.82rem; color:var(--blue); font-weight:600; background:#f2f6ff; border-radius:10px; padding:10px 14px;}

  .dob-group{display:flex; align-items:center; gap:6px;}
  .dob-group .dob-input{
    width:46px; text-align:center; border:1px solid var(--gray-line); border-radius:10px;
    padding:9px 0; font-family:'Nunito', sans-serif; font-size:0.92rem; color:var(--black);
  }
  .dob-group .dob-input.dob-year{width:68px;}
  .dob-group .dob-input:focus{outline:2px solid var(--blue); outline-offset:1px;}
  .dob-sep{color:var(--gray); font-weight:700;}
  .dob-calendar-btn{
    margin-left:6px; border:1px solid var(--gray-line); border-radius:10px; background:var(--white);
    width:38px; height:38px; font-size:1rem; cursor:pointer; transition:border-color .2s;
  }
  .dob-calendar-btn:hover{border-color:var(--blue);}
  .dob-group .dob-picker{
    position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0;
  }

  .checkout-sidebar-col[hidden]{display:none;}

  /* Timer de conclusão */
  .checkout-timer{
    display:inline-block; margin-top:16px; padding:10px 18px; border-radius:10px;
    background:var(--gray-light); border:1px solid var(--gray-line); color:var(--black); font-size:0.88rem; font-weight:700;
  }
  .checkout-timer.checkout-timer-urgente{background:#fdeaea; color:#a12626; border-color:#fdeaea;}

  /* Aviso de vagas esgotadas (lista de espera) */
  .turma-esgotada{
    display:block; margin-top:8px; color:#c0392b; font-size:0.76rem; font-weight:700;
    text-decoration:underline;
  }
  .turma-esgotada[hidden]{display:none;}
  .choice-card.cheia{cursor:default;}
  .choice-card.cheia:hover{border-color:var(--gray-line);}

  /* Relógio da matrícula: texto de apoio e aviso do último minuto */
  .checkout-timer[hidden]{display:none;}
  .checkout-timer{font-weight:600;}
  .checkout-timer-aviso{display:block; margin-top:6px; font-size:0.8rem; font-weight:600;}
  .checkout-timer-aviso[hidden]{display:none;}

  /* Turma esgotada já aparece marcada ao carregar a página */
  .choice-card.cheia{background:var(--gray-light);}
  .choice-card.cheia .line1, .choice-card.cheia .line3, .choice-card.cheia .line4{color:#888;}

  /* Campo Mensagem (lista de espera) */
  .field textarea{
    width:100%; border:1px solid var(--gray-line); border-radius:10px; padding:9px 12px;
    font-family:'Nunito', sans-serif; font-size:0.92rem; color:var(--black); resize:vertical; min-height:96px;
  }
  .field textarea:focus{outline:2px solid var(--blue); outline-offset:1px;}

  /* DJ Por 1 Dia/Noite: botão de orçamento dentro das caixas */
  .orcamento-cta-wrap{margin-top:20px; padding-top:16px; border-top:1px solid var(--gray-line);}
  .orcamento-cta{margin-top:0; letter-spacing:0.02em;}
  .orcamento-direto{
    display:block; text-align:center; margin-top:10px; font-size:0.84rem; font-weight:700;
    color:var(--blue); text-decoration:underline;
  }

  /* Ficha de orçamento (popup) */
  .orcamento-modal{
    position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.6);
    display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
  }
  .orcamento-modal[hidden]{display:none;}
  .orcamento-dialog{
    position:relative; width:100%; max-width:560px; background:var(--white);
    border-radius:16px; padding:28px 28px 24px; box-shadow:0 20px 60px rgba(0,0,0,0.35);
  }
  .orcamento-dialog h2{font-size:1.35rem; text-transform:uppercase; padding-right:32px;}
  .orcamento-fechar{
    position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.8rem;
    line-height:1; cursor:pointer; color:#555;
  }
  .orcamento-tipo{display:flex; gap:18px; flex-wrap:wrap; font-size:0.92rem; font-weight:600;}
  .orcamento-tipo label{display:flex; align-items:center; gap:6px; text-transform:none; font-size:0.92rem; color:var(--black); margin:0; cursor:pointer;}
  .orcamento-opc{text-transform:none; font-weight:500; color:#888;}
  .orcamento-tipo input[type="radio"]{width:auto; padding:0; margin:0; accent-color:var(--blue);}

  /* Perguntas frequentes (página do curso) */
  .faq-curso{margin-top:12px; max-width:760px;}
  .faq-curso h2{font-size:1.5rem; text-transform:uppercase; margin-bottom:16px;}
  .faq-curso .topic-accordion{margin-top:8px; border-radius:8px;}
  .faq-curso .topic-toggle{padding:12px 18px;}
  .faq-curso .topic-toggle h3{font-size:0.84rem; letter-spacing:0;}
  .faq-curso .topic-toggle-icon{width:10px; height:10px;}
  .faq-curso .topic-toggle-icon::before{border-width:0 2px 2px 0;}
  .faq-curso .topic-content{padding:0 18px 14px;}
  .faq-curso .topic-content p{font-size:0.88rem; margin-top:4px !important;}
  /* mesma largura da coluna de tópicos acima (grid 1.4fr / 0.8fr com 40px de espaço) */
  .faq-curso{max-width:none; width:calc((100% - 40px) * 1.4 / 2.2);}
  @media (max-width:800px){ .faq-curso{width:100%;} }

  /* DJ Por 1 Dia/Noite: foto do canto superior direito fica à frente das vizinhas, mas atrás da foto central */
  #dj1dia-mural .mural-3{z-index:6;}
  #dj1dia-mural .mural-5{z-index:7;}
  #dj1dia-mural .mural-2{top:-2%; left:23%; width:34%;} /* foto central de cima: um pouco maior e afastada das vizinhas */

  /* #criaeletrobase: o card com o mouse em cima fica à frente, pra o nome (inclusive em 2 linhas) não ficar escondido atrás do vizinho */
  .cria-circle .cria-card:hover{z-index:20;}

  /* #criaeletrobase: nome posicionado pelo JS sempre do lado de fora do círculo (só no computador) */
  @media (min-width:801px){
    .cria-circle .cria-card span{
      position:absolute; margin-top:0; white-space:nowrap; pointer-events:none;
      opacity:1; color:var(--gray); font-size:0.64rem; font-weight:700;
      transition:color .2s ease, font-size .2s ease;
    }
    /* Mouse em cima: nome em destaque (preto e um pouco maior) */
    .cria-circle .cria-card:hover span{color:var(--black); font-size:0.74rem; font-weight:800;}
    /* Mais altura na seção pra os nomes de cima e de baixo caberem com folga */
    .cria{padding:70px 0 80px;}
    .cria-circle{margin:40px auto 30px;}
  }

  /* Rodapé: botão discreto "Mande sua mensagem" + popup do formulário */
  .footer-msg-btn{
    background:none; border:1px solid rgba(255,255,255,0.55); color:var(--white); border-radius:999px;
    padding:5px 14px; font-family:'Nunito', sans-serif; font-weight:700; font-size:0.72rem;
    letter-spacing:0.03em; text-transform:uppercase; cursor:pointer; transition:border-color .2s, color .2s;
  }
  .footer-msg-btn:hover{border-color:var(--blue); color:var(--blue);}
  /* "Mande sua mensagem" + e-mail numa caixa só (o e-mail aparece como descrição) */
  .footer-msg-btn{display:flex; flex-direction:column; align-items:center; gap:2px; border-radius:12px; padding:7px 16px;}
  .footer-msg-email{font-weight:700; font-size:0.78rem; text-transform:none; letter-spacing:0.01em;}
  .mensagem-dialog{max-width:440px; padding:24px 24px 20px;}
  .mensagem-dialog h2{font-size:1.15rem;}
  .mensagem-dialog .field{margin-top:10px;}
  .mensagem-dialog .field:first-child{margin-top:0;}
  .mensagem-dialog textarea{min-height:90px;}
  .mensagem-dialog .terms-check{font-size:0.8rem;}
  .mensagem-dialog .enroll-btn{margin-top:14px;}
  .msg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  /* Página Política de Privacidade */
  .politica-texto{margin-top:18px; font-size:0.92rem; color:#333; line-height:1.65;}
  .politica-texto p{margin-top:12px;}
  .politica-texto .terms-updated{font-size:0.8rem; color:#888; font-style:italic;}
  .msg-link-politica{color:var(--blue); font-weight:700; text-decoration:underline;}

  /* Rodapé: link da Política de Privacidade */
  .footer-left{display:flex; flex-direction:column; gap:4px;}
  .footer-politica{color:var(--white); opacity:0.6; font-size:0.72rem; text-decoration:underline;}
  .footer-politica:hover{opacity:1; color:var(--blue);}

  /* Horário de atendimento (rodapé e popup "Mande sua mensagem") */
  .footer-horario{margin-top:4px; max-width:300px; text-align:right; font-size:0.7rem; line-height:1.4; color:var(--white); opacity:0.6;}
  .msg-horario{margin-top:8px; font-size:0.78rem; line-height:1.45; color:#555; background:var(--gray-light); border-radius:8px; padding:8px 12px;}

/* DJ Por 1 Dia/Noite: chamada "Uma proposta, dois formatos" abaixo do mural, com setas que descem até os formatos */
.formatos-chamada{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:22px;}
.formatos-chamada h2{text-transform:uppercase; font-size:1.4rem; text-align:center; margin:0;}
.formatos-seta{background:none; border:none; padding:4px; cursor:pointer; color:var(--blue); line-height:0; animation:formatos-pulo 1.8s ease-in-out infinite;}
.formatos-seta svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
.formatos-seta:hover{color:var(--black);}
@keyframes formatos-pulo{0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);}}
@media (prefers-reduced-motion: reduce){ .formatos-seta{animation:none;} }

/* ================== VERSÃO DE CELULAR (chat do celular, 09/10/2026) ==================
   Tudo aqui vale só para telas de até 800px. Não altera a versão de computador. */
@media (max-width:800px){
  /* 1. Nada vazando para os lados */
  body{overflow-x:clip;}
  .destaque-box h3, .experiencia-box h3{white-space:normal;}
  footer .wrap{flex-direction:column; align-items:flex-start; gap:18px;}
  .footer-contact{flex-wrap:wrap; gap:14px 18px; width:100%;}
  .footer-contact > div{align-items:flex-start !important; flex-basis:100%; min-width:0;}
  .footer-msg-btn{max-width:100%; align-items:flex-start;}
  .footer-msg-email{overflow-wrap:anywhere;}
  .footer-horario{text-align:left; max-width:none;}
}

/* 2. Menu ☰ (o botão é criado pelo menu-celular.js e só existe visível no celular) */
.menu-btn{display:none;}
@media (max-width:800px){
  .header-inner{position:relative; padding:8px 18px;}
  .logo-box img{height:46px !important;}
  .menu-btn{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:46px; height:46px; padding:0 11px; background:none; border:none; cursor:pointer;
  }
  .menu-btn span{display:block; height:2.5px; width:100%; background:var(--white); border-radius:2px; transition:transform .25s, opacity .2s;}
  header.menu-aberto .menu-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  header.menu-aberto .menu-btn span:nth-child(2){opacity:0;}
  header.menu-aberto .menu-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  header nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; flex-wrap:nowrap; gap:0;
    background:#111; padding:6px 18px 14px;
    border-bottom:1px solid #000; box-shadow:0 14px 28px rgba(0,0,0,0.35);
    max-height:calc(100vh - 62px); overflow-y:auto;
  }
  header.menu-aberto nav{display:flex;}
  header nav > a, header nav .nav-stack{border-bottom:1px solid rgba(255,255,255,0.12);}
  header nav a{font-size:0.98rem; padding:14px 2px; border-bottom-width:0;}
  header nav > a{border-bottom:1px solid rgba(255,255,255,0.12);}
  header nav > a:last-child{border-bottom:none;}
  header nav .nav-stack{padding:14px 2px;}
  header nav .nav-stack a, header nav .nav-stack a:first-child{padding:0;}
  header nav .nav-sub{font-size:0.78rem !important; margin-top:6px; padding:4px 0 !important;}
}

/* 3. Início: logo e frase primeiro, depois as caixas, e o mural numa faixa que desliza */
@media (max-width:800px){
  .hero{padding:28px 0 32px;}
  .hero-grid{gap:26px;}
  .hero-grid .academia-mural#hero-mural{order:0;}
  #hero-mural{
    display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:14px;
    width:auto; height:auto; margin:0 -28px; padding:6px 28px 18px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #hero-mural::-webkit-scrollbar{display:none;}
  #hero-mural img{
    flex:0 0 auto; width:58vw !important; max-width:240px; height:auto; aspect-ratio:1/1;
    scroll-snap-align:center; border-width:5px;
  }
  #hero-mural img:hover{transform:none !important;}
  /* ordem das fotos na faixa (só no celular; pedidos de 09/10/2026): 4, 3, 2, 6, 5, as demais e, por último, a 1 */
  #hero-mural img{order:7;}
  #hero-mural .mural-11{order:1;}
  #hero-mural .mural-2{order:2;}
  #hero-mural .mural-1{order:20;}
  #hero-mural .mural-23{order:4;}
  #hero-mural .mural-12{order:5;}
  #hero-mural .mural-3{order:6;}
}

/* 4. Instrutores: 3 fotos lado a lado; o texto abre num popup (criado pelo menu-celular.js) */
.instr-modal{display:none;}
@media (max-width:800px){
  .instrutores-grid{grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px;}
  .instrutor{text-align:center;}
  .instrutor .img-ph{max-width:100%; border-radius:14px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.12);}
  .instrutor .img-ph.has-photo:hover img{transform:none;}
  .instrutor h3{max-width:100%; margin-top:10px; font-size:0.8rem; letter-spacing:0.02em;}
  .instrutor h3 a{display:inline-block; padding:4px 0;}
  .instrutor p{display:none;}
  .instr-modal{
    display:flex; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.6);
    align-items:flex-start; justify-content:center; padding:56px 16px 24px; overflow-y:auto;
  }
  .instr-modal[hidden]{display:none;}
  .instr-dialog{
    position:relative; width:100%; max-width:440px; background:var(--white);
    border-radius:16px; padding:22px 20px 20px; box-shadow:0 20px 60px rgba(0,0,0,0.35); text-align:center;
  }
  .instr-fechar{
    position:absolute; top:6px; right:8px; width:44px; height:44px; background:none; border:none;
    font-size:1.9rem; line-height:1; color:#555; cursor:pointer;
  }
  .instr-foto{display:block; width:60%; max-width:220px; aspect-ratio:1/1; object-fit:cover; border-radius:14px; margin:6px auto 0;}
  .instr-dialog h3{margin-top:14px; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.03em;}
  .instr-texto{margin-top:10px; font-size:0.95rem; line-height:1.6; color:#444; text-align:left;}
  .instr-insta{
    display:inline-block; margin-top:16px; padding:10px 18px; border:1.5px solid var(--gray-line);
    border-radius:10px; font-weight:700; font-size:0.9rem; color:var(--blue);
  }
}

/* 5. #criaeletrobase: grade de 4 avatares redondos por linha, nome sempre visível, sem o giro.
   A troca de lugar ("avatar que caminha", a cada 3s) é feita pelo menu-celular.js. */
@media (max-width:800px){
  .cria-circle{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 6px;
    justify-items:center; align-items:start; margin-top:20px;
  }
  .cria-circle-text{grid-column:1 / -1; margin-bottom:6px;}
  .cria-circle-text .sub{font-size:0.86rem;}
  .cria-circle .cria-card{width:100%; max-width:84px;}
  .cria-circle .cria-card .img-ph{width:64px; height:64px;}
  /* sem giro e sem o "scratch" (arrastar a foto) no celular: o toque abre o Instagram */
  .cria-circle .cria-card .img-ph.has-photo img,
  .cria-circle .cria-card:hover .img-ph.has-photo img{animation:none !important; transform:none !important; pointer-events:none;}
  .cria-circle .cria-card span{
    position:static; opacity:1; transform:none !important; margin-top:7px; /* ignora o posicionamento do giro do computador */
    font-size:0.62rem; font-weight:700; color:var(--gray); letter-spacing:0.02em;
  }
  .cria-circle .cria-card:hover span{color:var(--gray);}
}

/* 6. Página do curso: caixa de matrícula logo depois da apresentação, antes dos tópicos */
@media (max-width:800px){
  .curso-top-grid{margin-top:32px !important; gap:32px;}
  .curso-top-grid > .enroll-box-narrow{order:-1; box-shadow:0 8px 24px rgba(0,0,0,0.08);}
}

/* 7. Matrícula (e lista de espera): campos grandes, botões largos e resumo da compra no topo */
@media (max-width:800px){
  /* etapas no topo, numa linha só */
  .checkout-breadcrumb{font-size:0.68rem; letter-spacing:0; margin-bottom:14px; flex-wrap:nowrap; gap:4px; white-space:nowrap; overflow:hidden;}
  .checkout-breadcrumb span{margin-right:3px;}
  .checkout-main{padding:18px 16px;}
  .checkout-main h1{font-size:1.3rem;}

  /* resumo do pedido acima do formulário; "Confira seus dados" continua embaixo */
  .checkout-grid{grid-template-columns:1fr; gap:16px;}
  .checkout-sidebar-col{display:contents;}
  .checkout-sidebar-col > .checkout-sidebar:first-child{order:-1; padding:14px 16px;}
  .checkout-sidebar-col > .checkout-sidebar:first-child .sidebar-detail:nth-child(n+5){display:none;}
  .checkout-sidebar-col > .checkout-sidebar + .checkout-sidebar{order:1; margin-top:0 !important;}

  /* campos grandes (16px evita o zoom automático do iPhone ao tocar no campo) */
  .field label{font-size:0.8rem; margin-bottom:6px;}
  .field select, .field input, .field textarea{font-size:16px; padding:13px 14px; min-height:50px;}
  .dob-group{gap:8px;}
  .dob-group .dob-input{width:58px; font-size:16px; padding:13px 0; min-height:50px;}
  .dob-group .dob-input.dob-year{width:84px;}
  .dob-calendar-btn{width:50px; height:50px;}
  .cupom-row{max-width:none;}
  .cupom-row input{font-size:16px; padding:11px 12px; min-height:48px;}
  .cupom-row .btn-outline{padding:11px 16px; min-height:48px;}
  .terms-check{font-size:0.92rem; gap:10px;}
  .terms-check input{width:22px; height:22px; margin-top:1px;}
  .terms-check input:checked::after{left:6px; top:2px; width:6px; height:11px;}
  .terms-hint{margin-left:32px;}
  .terms-tab-mini{font-size:0.78rem; padding:8px 12px;}

  /* cartões de turma e de pagamento, um embaixo do outro */
  .choice-cards{flex-direction:column;}
  .choice-card, #payment-cards .choice-card{min-width:0; width:100%; padding:16px 18px; text-align:left;}

  /* botões largos; o principal fica em cima e o "Voltar" embaixo */
  .btn-row{flex-direction:column-reverse; gap:10px;}
  .btn-row .enroll-btn, .btn-row .btn-outline{width:100%; padding:15px; font-size:1rem; min-height:52px;}
  .enroll-btn{font-size:1rem; padding:15px;}
}

/* 8. A Academia (página e seção temporária do início) e DJ Por 1 Dia/Noite: texto primeiro, fotos em faixa deslizante */
@media (max-width:800px){
  .academia-grid{gap:0;}
  #academia-mural, #academia-mural-temp, #dj1dia-mural{
    order:1; display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:14px;
    position:relative; width:auto; height:auto !important;
    margin:24px -20px 0; padding:6px 20px 18px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #academia-mural::-webkit-scrollbar, #academia-mural-temp::-webkit-scrollbar, #dj1dia-mural::-webkit-scrollbar{display:none;}
  #academia-mural img, #academia-mural-temp img, #dj1dia-mural img{
    position:static; flex:0 0 auto; width:58vw !important; max-width:240px; height:auto !important;
    aspect-ratio:1/1; scroll-snap-align:center; border-width:5px; cursor:zoom-in;
  }
  /* foto aberta (popup) maior no celular */
  .mural-lightbox{padding:16px;}
  .mural-lightbox img{max-width:94vw; max-height:78vh;}
  .mural-lightbox-close{top:14px; right:18px; font-size:2.4rem; padding:6px;}
}

/* 9. Botão fixo "INSCREVA-SE" (criado pelo menu-celular.js em todas as páginas, menos na matrícula) */
.inscreva-fixo{display:none;}
@media (max-width:800px){
  .inscreva-fixo{
    display:block; position:fixed; left:16px; right:16px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:900;
    background:var(--blue); color:var(--white); text-align:center; font-weight:800; font-size:1rem;
    letter-spacing:0.06em; padding:15px 18px; border-radius:12px; box-shadow:0 10px 26px rgba(0,0,0,0.3);
  }
  .inscreva-fixo:active{background:var(--blue-dark);}
  /* espaço no fim do rodapé para o botão não cobrir os contatos */
  body.tem-inscreva-fixo footer{padding-bottom:calc(36px + 76px + env(safe-area-inset-bottom, 0px));}
}

/* 10. Acabamento: margens, letras e espaçamentos para o toque */
@media (max-width:800px){
  .wrap{padding:0 20px;}
  .header-inner{padding:8px 16px;}
  #hero-mural{margin:0 -20px; padding:6px 20px 18px;}
  section{padding:48px 0;}
  .hero{padding:28px 0 32px;}
  .modulo{padding-top:20px;}
  .instrutores h2, .habladj h2, .eventos h2, .academia h2{font-size:1.6rem;}
  .academia p{font-size:0.95rem; line-height:1.6;}
  .eventos .academia-grid h2{font-size:1.2rem !important; line-height:1.25;}
  .eventos .academia-grid p{font-size:0.95rem;}
  .formatos-chamada{gap:10px; margin-top:8px;}
  .formatos-chamada h2{font-size:1.05rem;}
  .formatos-seta svg{width:26px; height:26px;}
  .curso-card-topbar{font-size:1.25rem; padding:18px;}
  .curso-card-bottombar{padding:22px 20px;}
  .modulo-back{padding:8px 0; margin-bottom:10px;}
  .topic-toggle{padding:18px;}
  .faq-curso .topic-toggle{padding:15px 16px;}
  .faq-curso .topic-toggle h3{font-size:0.86rem;}
  .faq-curso .topic-content p{font-size:0.95rem;}
  .topic-content ul li{font-size:0.95rem;}
  .orcamento-dialog{padding:24px 18px 20px;}
  .footer-dm-link, .footer-politica{display:inline-block; padding:6px 0;}
  .footer-msg-btn{padding:10px 16px;}
  .politica-texto{font-size:0.95rem;}
}

/* 11. Revisão final do celular (09/10/2026) */
/* iPhones com iOS anterior ao 16 não entendem "overflow-x:clip": usam esta reserva */
@supports not (overflow-x:clip){
  @media (max-width:800px){ html{overflow-x:hidden;} }
}
@media (max-width:800px){
  /* faixas de fotos: cada foto encaixa alinhada à esquerda, igual em todos os celulares */
  #hero-mural, #academia-mural, #academia-mural-temp, #dj1dia-mural{scroll-padding-inline:20px;}
  #hero-mural img, #academia-mural img, #academia-mural-temp img, #dj1dia-mural img{scroll-snap-align:start;}
  /* Experiência Eletrobase: no celular o convite aparece inteiro (sem "...") */
  .experiencia-box p{display:block; -webkit-line-clamp:unset; overflow:visible;}
  /* links do menu (#curso, #instrutores...): a seção para logo abaixo do cabeçalho fixo, sem ficar escondida atrás dele */
  section[id]{scroll-margin-top:62px;}
  /* "Contato": contorno de destaque mais justo, para não sair da tela */
  .footer-contact{outline-offset:8px;}
  /* tablets em pé (até 800px): blocos centralizados com largura confortável */
  .instrutores-grid{max-width:560px; margin-left:auto; margin-right:auto;}
  .cria-circle{max-width:460px; margin-left:auto; margin-right:auto;}
  .inscreva-fixo{max-width:480px; margin:0 auto;}
}
/* celulares bem estreitos (iPhone SE de 1ª geração): as etapas da matrícula podem ir para 2 linhas */
@media (max-width:380px){
  .checkout-breadcrumb{flex-wrap:wrap; row-gap:2px;}
}

/* 12. Ajustes depois dos testes no iPhone (09/10/2026) */
@media (max-width:800px){
  /* botão fixo INSCREVA-SE mais discreto: só o terço direito inferior da tela */
  .inscreva-fixo{
    left:auto; right:14px; width:calc(33.333vw - 14px); min-width:118px; max-width:190px; margin:0;
    font-size:0.78rem; letter-spacing:0.03em; padding:11px 8px; border-radius:999px;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
  }
  body.tem-inscreva-fixo footer{padding-bottom:calc(36px + 56px + env(safe-area-inset-bottom, 0px));}
  /* Perguntas frequentes: título bem menor e um pouco mais afastado do bloco de cima */
  .faq-curso{margin-top:44px;}
  .faq-curso h2{font-size:1.05rem; margin-bottom:12px;}
}

/* 13. Matrícula, etapa de pagamento (12/10/2026) */
@media (max-width:800px){
  /* o campo do cupom tinha uma largura mínima própria e alargava a etapa de pagamento em telas
     de até ~390px (a página ficava mais larga que a tela); agora ele só ocupa o espaço que sobra */
  .checkout-grid > *{min-width:0;}
  .cupom-row input{width:0; flex:1 1 auto;}
  /* preço e frase ao lado: quebram de linha equilibradas, sem deixar o "(-20%)" sozinho */
  .price-line{row-gap:2px;}
  .price-line .note, .price-line .price-or{text-wrap:balance;}
  /* aviso verde do cupom e "Remover cupom" */
  .cupom-msg{font-size:0.86rem; line-height:1.5; text-wrap:balance;}
  .cupom-remover{display:block; margin-left:0; margin-top:4px; padding:6px 0; font-size:0.84rem;}
  /* sem o "ou em até 8x de" (PIX), o preço azul começa alinhado à esquerda, sem recuo */
  .price-line .price-or:empty{display:none;}
  /* data de nascimento (etapa Dados): em telas de 320px as 3 caixinhas + calendário passavam da largura */
  .dob-group{max-width:340px; gap:6px;}
  .dob-group .dob-input{flex:1 1 0; width:0; min-width:0;}
  .dob-group .dob-input.dob-year{flex:1.5 1 0; width:0;}
  .dob-calendar-btn{flex:0 0 46px; width:46px; height:50px; margin-left:2px;}
}

/* ================== CHAVE: MODO TEMPORÁRIO x MODO OFICIAL (Habla DJ) ==================
   MODO TEMPORÁRIO (ligado agora, enquanto o vídeo oficial do Habla DJ não sai):
     - esconde a seção Habla DJ da página inicial e o item "Habla DJ" do menu em todas as páginas;
     - mostra no lugar a seção "A Academia" (cópia temporária, id #academia-temp).
   Para voltar ao MODO OFICIAL: comente as duas regras do bloco "MODO TEMPORÁRIO" abaixo
   (transformando-as em comentário) e troque o link do vídeo na seção Habla do index.html. */
#academia-temp{display:none;}  /* padrão: a seção temporária fica escondida */

/* --- MODO TEMPORÁRIO: início --- */
#habladj, nav a[href$="#habladj"]{display:none !important;}
#academia-temp{display:block;}
/* menu: "A Academia" vem antes de "DJ Por 1 Dia/Noite" (mesma ordem das seções da página inicial) */
nav a[href$="a-academia.html"]{order:1;}
nav a[href$="dj-por-1-dia.html"]{order:2;}
nav a[href$="#contato"]{order:3;}
/* --- MODO TEMPORÁRIO: fim --- */