/* ================================================================
   CONF. DOS FILHOS 26 — recomposição por largura
   O mobile não é o desktop reduzido: linhas, ordem e escala mudam.
   ================================================================ */

/* ---- ≤ 1200px -------------------------------------------------- */
@media (max-width:1200px){
  .row--a .cell--colo{grid-column:1/7}
  .row--a .cell--ado{grid-column:7/13}
  .row--b .cell--pal{grid-column:1/10}
  .row--b .row__note{grid-column:10/13}
  .row--marca .cell{grid-column:2/13}
  .row--int .cell{grid-column:4/11}
  .info{grid-template-columns:repeat(3,1fr)}
  .info__i:nth-child(3){border-right:0}
  .info__i:nth-child(n+4){border-top:1px solid rgba(25,26,22,.12)}
}

/* ---- ≤ 1024px (tablet) ----------------------------------------- */
@media (max-width:1024px){
  .hdr__nav{gap:1.35rem}
  .hdr__nav a{font-size:.7rem;letter-spacing:.1em}
  .row--int .cell{grid-column:3/11}
  .lineup__head{align-items:flex-start;flex-direction:column}
  .lineup__ans{padding-bottom:0}
}

/* ---- ≤ 900px --------------------------------------------------- */
@media (max-width:900px){
  .hdr__nav{display:none}
  .burger{display:block;margin-left:auto}
  .hdr__cta{order:2}
  .hdr__in{gap:.5rem}

  .row--trio .cell:nth-child(1){grid-column:1/7}
  .row--trio .cell:nth-child(2){grid-column:7/13;margin-top:clamp(2rem,6vw,4rem)}
  .row--trio .cell:nth-child(3){grid-column:3/11;margin-top:clamp(1.5rem,4vw,3rem)}
  .row--marca .cell{grid-column:1/13}
  .row--int .cell{grid-column:2/12}
  .info{grid-template-columns:repeat(2,1fr)}
  .info__i{border-right:1px solid rgba(25,26,22,.12)}
  .info__i:nth-child(2n){border-right:0}
  .info__i:nth-child(n+3){border-top:1px solid rgba(25,26,22,.12)}
  .info__i:nth-child(5){grid-column:1/-1}
}

/* ================================================================
   ≤ 700px — MOBILE: composição própria
   ================================================================ */
@media (max-width:700px){

  /* --- header --- */
  .hdr__in{padding-block:.85rem}
  .hdr__logo img{width:98px}

  /* --- hero: CONF. / DOS / FILHOS / 26 --- */
  .hero{min-height:100svh}
  /* no celular o cartaz fica centrado na folha, não encostado embaixo */
  .hero__sheet{justify-content:center;
    padding-block:clamp(5.5rem,20vw,7rem) clamp(5rem,14vw,6.5rem)}
  .hero__logo{width:100%}
  .hero__meta{margin-top:1.8rem;font-size:.7rem;letter-spacing:.16em;gap:.7rem}
  .hero__act{margin-top:1.4rem;gap:.9rem;flex-direction:column;align-items:flex-start}
  .hero__act .btn{width:100%;justify-content:center}
  .hero__scroll{gap:.6rem;font-size:.58rem;letter-spacing:.2em;bottom:1.1rem}
  .hero__scroll i{width:30px}

  /* --- manifesto --- */
  .manifesto__h{max-width:none}
  .manifesto__body{margin-left:0;max-width:none}
  .manifesto__end{text-align:left}

  /* --- muro fotográfico: sequência cinematográfica --- */
  .row{display:flex;flex-direction:column;gap:clamp(2rem,7vw,3rem);
    margin-block:clamp(2.6rem,9vw,4rem)}
  .row .cell{grid-column:auto!important;margin:0!important;width:100%}

  /* alternância de largura para criar ritmo */
  .row--a .cell--colo{width:100%}
  .row--a .cell--ado{width:78%;margin-left:auto!important}
  .row--b .cell--pal{width:100%}
  .row--b .row__note{font-size:1.45rem;padding:0;max-width:16ch}
  .row--trio .cell:nth-child(1){width:82%}
  .row--trio .cell:nth-child(2){width:100%}
  .row--trio .cell:nth-child(3){width:70%;margin-left:auto!important}
  .row--c .cell--lou{width:100%}
  .row--c .cell--emp{width:80%;margin-left:auto!important}
  .row--par .cell:nth-child(1){width:74%}
  .row--par .cell:nth-child(2){width:74%;margin-left:auto!important}
  .row--marca .cell{width:100%}
  .row--int .cell{width:100%}

  /* imagens de sangria ocupam a largura toda */
  .row--a,.row--b,.row--c,.row--par,.row--trio,.row--marca,.row--int{padding-inline:var(--pad)}
  .cap--over{left:var(--pad);right:var(--pad);bottom:1rem}
  .cap--over span{display:block;margin-top:.2rem}

  /* --- frase --- */
  .frase__b{margin-top:2rem}

  /* --- lineup --- */
  /* no celular o card de preletor ocupa a largura toda */
  .cards{gap:2.6rem}
  .pre{max-width:none;flex-basis:100%}
  .pre__bio{max-width:none}
  .lineup__foot{flex-direction:column;align-items:flex-start}
  .lineup__foot .btn{width:100%;justify-content:center}

  /* --- data: 22 23 24 lado a lado --- */
  .data__grid{flex-direction:column;align-items:stretch;gap:2rem}
  .data__days{flex-direction:row;justify-content:space-between;font-size:26vw;
    letter-spacing:-.05em;line-height:.8}
  .data__side{text-align:left;margin-left:0;padding-bottom:0;gap:1.5rem}
  .count__grid{grid-template-columns:repeat(4,1fr);gap:.5rem}
  .count__grid b{font-size:2.3rem}
  .count__grid span{font-size:.55rem;letter-spacing:.14em}

  /* --- estrutura --- */
  .info{grid-template-columns:1fr}
  .info__i{border-right:0;border-top:1px solid rgba(25,26,22,.12);
    padding:1.3rem 0 1.5rem;display:grid;grid-template-columns:auto 1fr;
    column-gap:1.2rem;align-items:baseline}
  .info__i:first-child{border-top:0}
  .info__i:nth-child(n){grid-column:auto}
  .info__k{margin-bottom:0}
  .info__i h3{grid-column:2}
  .info__i--kids h3{justify-self:start}
  .info__i p{grid-column:2}

  /* --- inscrição --- */
  .comu .btn{width:100%;justify-content:center}

  /* --- footer --- */
  .ft__top{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .ft__id{text-align:left}
  .ft__nav{gap:.9rem 1.6rem}

  /* --- CTA fixo: o rodapé abre espaço para ele não cobrir nada --- */
  .stick{display:flex}
  .ft{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}

/* ---- ≤ 430px --------------------------------------------------- */
@media (max-width:430px){
  .hdr__cta{display:none}
  .hero__meta{flex-direction:column;align-items:flex-start;gap:.45rem}
  .hero__meta .dot{display:none}
  .row--a .cell--ado,.row--c .cell--emp{width:86%}
  .row--trio .cell:nth-child(3),.row--par .cell{width:80%}
  .count__grid b{font-size:2rem}
  .cap--over::before{width:24px}
}

/* ---- telas largas ---------------------------------------------- */
@media (min-width:1600px){
  :root{--wrap:1560px}
}

/* ---- celular deitado: o hero encolhe em vez de estourar --------- */
@media (max-height:560px) and (max-width:900px){
  .hero__sheet{padding-block:4rem 2.4rem}
  .hero__logo{width:min(100%,62vh)}
  .hero__scroll{display:none}
}

/* ---- impressão -------------------------------------------------- */
@media print{
  .hdr,.stick,.drawer,.consent,.grain,.hero__scroll,.marquee{display:none!important}
  body{background:#fff;color:#000}
}