/* =========================================================================
   Beyblade X — GP 2026 São Paulo
   Reproducao dos layouts HAS-0001.26. Grade de referencia: 1920 x 1080.

   ORGANIZACAO: mobile e o padrao (fluxo empilhado, sem posicionamento
   absoluto). O layout de palco dos mockups vive inteiro dentro do
   @media (min-width:901px) no fim do arquivo. Isso evita a disputa de
   especificidade que acontecia quando o desktop era o padrao e o mobile
   precisava anular regra por regra.

   No desktop as medidas sao escritas em pixels do design e convertidas por
   var(--px), entao a tela fica 1:1 em 1920x1080 e escala junto em qualquer
   outra janela. No mobile var(--px) vale 1px e o layout e fluido.
   ========================================================================= */

html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
}

:root{
  --px: 1px;                      /* no desktop vira calc(1rem / 16) */

  --yellow:      #FFF001;
  --red:         #FE0000;
  --orange:      #D15B2D;
  --field-bg:    #191919;
  --field-line:  rgba(255,255,255,.55);
  --ink:         #FFFFFF;
  --ink-soft:    #E4E4E4;

  --grad: linear-gradient(180deg,#FEED01 0%,#FAD103 22%,#F3A608 45%,#EC7E0D 64%,#E04413 84%,#DB2317 100%);
  --grad-h: linear-gradient(90deg,#FFF001 0%,#F3A608 48%,#FE2A15 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:#000;
  color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* =========================================================================
   TROCA DE TELAS
   ========================================================================= */
.view{ display:none; position:relative; }
body[data-view="home"]        #view-home,
body[data-view="inscricao"]   #view-inscricao,
body[data-view="info"]        #view-info,
body[data-view="local"]       #view-local,
body[data-view="regulamento"] #view-regulamento{ display:flex; }

/* os filhos precisam ficar posicionados para serem pintados acima do .bg */
.view > *:not(.bg){ position:relative; z-index:1; }
.view > .topbar{ z-index:3; }

/* ---------- fundos ---------- */
.bg{
  position:absolute; inset:0; z-index:0;
  background-color:#000; background-repeat:no-repeat;
  background-size:cover; background-position:center;
}
.bg-hero{  background-image:url("../img/hero-bg.jpg"); }
.bg-inner{ background-image:url("../img/inner-bg.jpg"); }
.bg-inner-dark::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); }
.bg-local{ background-image:url("../img/local-bg.jpg"); }

/* =========================================================================
   COMPONENTES (visual compartilhado entre mobile e desktop)
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:700; text-transform:uppercase; white-space:nowrap;
  border:0; cursor:pointer; text-align:center;
}
.btn-yellow{
  background:var(--yellow); color:#000;
  box-shadow:0 0 calc(30 * var(--px)) rgba(255,240,1,.28);
  transition:filter .18s, transform .18s;
}
.btn-yellow:hover{ filter:brightness(1.08); }
.btn-yellow:active{ transform:translateY(1px); }

.btn-arrow{
  border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,#F8C405 0%,#F0870C 55%,#DC3115 100%);
  display:grid; place-items:center;
  box-shadow:0 0 calc(26 * var(--px)) rgba(240,135,12,.35);
  transition:filter .18s;
}
.btn-arrow:hover{ filter:brightness(1.1); }
.btn-arrow svg{ fill:#000; }

.nav a{ transition:color .18s; }
.nav a:hover{ color:var(--yellow); }
.nav-sep{ opacity:.85; font-weight:500; }

/* ---------- titulos com barra degrade ---------- */
.page-title{ position:relative; }
.page-title::before{
  content:""; position:absolute; left:0; top:0;
  width:calc(13 * var(--px)); height:100%;
  background:var(--grad);
  border-radius:calc(2 * var(--px));
}
.page-title h1,
.page-title h2{
  margin:0;
  font-family:"Roboto Condensed",sans-serif; font-weight:900;
  text-transform:uppercase; color:var(--ink);
  letter-spacing:calc(.5 * var(--px));
  line-height:1;
}
.page-title p{
  margin:0; font-weight:400; color:var(--ink-soft);
}

/* ---------- campos do formulario ---------- */
.field{
  position:relative;
  border-radius:calc(26 * var(--px));
  background:var(--field-bg);
  border:calc(1 * var(--px)) solid var(--field-line);
  display:flex; align-items:center;
}
.field + .field{ margin-top:calc(10 * var(--px)); }

.field-ico{
  position:absolute; left:calc(15 * var(--px));
  width:calc(20 * var(--px)); height:calc(20 * var(--px));
  display:grid; place-items:center; pointer-events:none;
}
.field-ico svg{ width:100%; height:100%; fill:#fff; }

.field input{
  width:100%; height:100%;
  background:transparent; border:0; outline:0;
  padding:0 calc(22 * var(--px)) 0 calc(42 * var(--px));
  color:#fff; font-family:inherit; font-weight:400;
}
.field input::placeholder{ color:#F0F0F0; opacity:1; }
.field:focus-within{ border-color:#fff; }

.group{ border:0; margin:calc(37 * var(--px)) 0 0; padding:0; min-inline-size:0; }
.group-label{
  display:block; margin:0 0 calc(9 * var(--px)); padding:0;
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:700; text-transform:uppercase; color:#fff;
  font-size:calc(16 * var(--px)); letter-spacing:calc(.4 * var(--px));
}
.group .field:first-of-type{ margin-top:0; }

.choices{ display:grid; gap:calc(10 * var(--px)); }
.choice{
  position:relative; display:flex; align-items:center;
  padding-left:calc(42 * var(--px));
  border-radius:calc(26 * var(--px));
  background:var(--field-bg);
  border:calc(1 * var(--px)) solid var(--field-line);
  cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s;
}
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice .dot{
  position:absolute; left:calc(15 * var(--px));
  width:calc(17 * var(--px)); height:calc(17 * var(--px));
  border-radius:50%; border:calc(2 * var(--px)) solid #fff;
  display:grid; place-items:center;
}
.choice .dot::after{
  content:""; width:calc(7 * var(--px)); height:calc(7 * var(--px));
  border-radius:50%; background:#fff;
}
.choice:has(input:checked){ background:var(--red); border-color:var(--red); }

.check{
  display:flex; gap:calc(12 * var(--px));
  margin-top:calc(35 * var(--px));
  cursor:pointer; user-select:none;
}
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check .box{
  flex:none;
  width:calc(22 * var(--px)); height:calc(22 * var(--px));
  border:calc(2 * var(--px)) solid #fff; border-radius:calc(4 * var(--px));
  display:grid; place-items:center;
}
.check .box::after{
  content:""; width:calc(11 * var(--px)); height:calc(6 * var(--px));
  border-left:calc(2.5 * var(--px)) solid #000;
  border-bottom:calc(2.5 * var(--px)) solid #000;
  transform:rotate(-45deg) translate(calc(.5 * var(--px)), calc(-1 * var(--px)));
  opacity:0;
}
.check:has(input:checked) .box{ background:var(--yellow); border-color:var(--yellow); }
.check:has(input:checked) .box::after{ opacity:1; }

/* estados condicionais controlados pelo app.js */
.is-hidden{ display:none !important; }

/* "Tipo de deficiencia" segue o par de radios de "Sou PCD": fica no mesmo
   grupo, mas com folga maior que a de campo para campo (10) e menor que a
   de um grupo para o outro (37). No mockup esse espaco e de 12. */
#campo-deficiencia{ margin-top:calc(22 * var(--px)); }

/* ---------- slides ---------- */
.slide{ display:none; }
.view-info[data-slide="1"] .slide[data-index="1"],
.view-info[data-slide="2"] .slide[data-index="2"]{ display:block; }
.view-info[data-slide="2"] #info-next{ visibility:hidden; }

/* ---------- cards ---------- */
.card{
  position:relative;
  border-radius:calc(28 * var(--px));
  background:
    linear-gradient(#000,#000) padding-box,
    var(--grad-h) border-box;
  border:calc(2 * var(--px)) solid transparent;
  box-shadow:
    calc(-14 * var(--px)) calc(10 * var(--px)) calc(38 * var(--px)) rgba(255,240,1,.16),
    calc(14 * var(--px)) calc(10 * var(--px)) calc(38 * var(--px)) rgba(254,42,21,.16);
}
.card-num{
  font-family:"Roboto Condensed",sans-serif; font-weight:900;
  line-height:1; color:#fff;
}
.card-row .card-body h3{
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:700; text-transform:uppercase;
  letter-spacing:calc(.3 * var(--px)); line-height:1;
}

/* ---------- tela de local ---------- */
.local-card{
  border-radius:calc(28 * var(--px));
  background:rgba(11,11,11,.84);
  backdrop-filter:blur(calc(2 * var(--px)));
}
.local-line strong{ font-weight:700; }

/* =========================================================================
   LAYOUT MOBILE (padrao)
   Nao ha mockup de celular no material recebido; o empilhamento abaixo
   mantem a hierarquia das telas de desktop.
   ========================================================================= */
.view{
  flex-direction:column; align-items:center;
  width:100%; min-height:100vh;
  padding:26px 20px 60px;
}

/* --- topbar --- */
.topbar{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  width:100%;
}
.brand-wordmark img{ width:210px; }
.brand-lockup img{ width:230px; }

.nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 14px;
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:1px;
}
.nav .nav-sep{ display:none; }          /* separadores nao fazem sentido com quebra */
.nav a{
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.35);
}

.topbar-actions{
  display:flex; align-items:center; justify-content:center;
  gap:12px; width:100%;
}
.btn-voltar{
  flex:1 1 auto; max-width:300px;
  height:48px; border-radius:24px; font-size:15px; letter-spacing:.4px;
  padding:0 16px;
}
.btn-arrow{ flex:none; width:48px; height:48px; }
.btn-arrow svg{ width:21px; height:16px; }

/* --- titulos ---
   sem ">" de proposito: nas telas de informacoes gerais o titulo fica
   dentro do .slide, e nao como filho direto da .view */
.page-title{
  width:100%; margin:30px 0 22px; padding-left:18px;
}
.page-title::before{ width:7px; border-radius:4px; }
.page-title h1,
.page-title h2{ font-size:34px; }
.page-title p{ font-size:15.5px; line-height:1.4; margin-top:10px; }

/* --- home --- */
.hero-lockup{
  order:1;                              /* a arte vem antes do botao no celular */
  width:100%; max-width:330px;
  margin:38px 0 30px;
}
.hero-cta{
  order:2;
  width:100%; max-width:300px; height:60px;
  border-radius:30px; font-size:18px; letter-spacing:.4px;
}

/* --- formulario --- */
.form{ display:flex; flex-direction:column; width:100%; }
.field,.choice{ height:50px; }
.field input,.choice-text,.check-text{ font-size:16px; }
.check{ align-items:flex-start; }
.check-text{ line-height:1.35; }
.btn-finalizar{
  width:100%; max-width:300px; height:54px;
  border-radius:27px; font-size:17px; letter-spacing:.4px;
  margin:30px auto 0;
}

/* --- slides de informacoes gerais --- */
.slide{ width:100%; }
.cards{ display:grid; grid-template-columns:1fr; gap:16px; width:100%; }
.card{ padding:24px 20px 28px; }
.card-num{ font-size:46px; margin-bottom:10px; }
.card-art{ display:flex; justify-content:center; margin:4px 0 18px; }
.card-art img{ width:auto; max-width:68%; max-height:150px; }
.cards-3 .card-text{
  margin:0; font-size:15.5px; line-height:1.45;
}
.card-row .card-body h3{ font-size:17px; margin:0 0 9px; }
.card-row .card-body p{ margin:0; font-size:15.5px; line-height:1.45; }
/* as quebras manuais seguem o mockup de 1920: no celular atrapalham */
.cards-3 .card-text br,
.card-row .card-body p br,
.local-line br{ display:none; }

/* --- local --- */
.local-card{
  width:100%; padding:28px 20px 34px;
  background:rgba(11,11,11,.9);
}
.local-lockup{ width:100%; max-width:300px; margin:0 auto 28px; }
.local-info{ display:block; }
.local-line{
  position:relative; margin:0;
  padding-left:62px; min-height:44px;
  display:flex; flex-direction:column; justify-content:center;
  font-size:16px; line-height:1.45;
}
.local-line + .local-line{ margin-top:22px; }
.local-ico{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
.local-line:nth-child(1) .local-ico{ width:34px; }
.local-line:nth-child(2) .local-ico{ width:46px; }
.btn-voltar-local{
  width:100%; max-width:300px; height:54px;
  border-radius:27px; font-size:16px; letter-spacing:.4px;
  margin:30px auto 0;
}

/* --- regulamento --- */
.reg-cta{
  width:100%; max-width:300px; height:54px;
  border-radius:27px; font-size:16px; letter-spacing:.4px;
  margin:40px auto 0;
}

/* =========================================================================
   LAYOUT DE DESKTOP — o palco de 1920x1080 dos mockups.
   Tudo que e posicionamento por coordenada do design vive aqui dentro.
   ========================================================================= */
@media (min-width: 901px){

  /* 1rem = 16px quando a viewport e 1920x1080; encolhe junto em telas
     menores, limitado por largura E altura, para o palco sempre caber */
  html{ font-size: max(8px, min(0.83333vw, 1.48148vh)); }
  :root{ --px: calc(1rem / 16); }

  /* o palco tem exatamente 1920 unidades e fica centralizado; apenas os
     fundos sangram para a largura total da janela */
  .view{
    display:none;
    width:calc(1920 * var(--px)); margin-inline:auto;
    min-height:100vh; padding:0;
  }
  body[data-view="home"]        #view-home,
  body[data-view="inscricao"]   #view-inscricao,
  body[data-view="info"]        #view-info,
  body[data-view="local"]       #view-local,
  body[data-view="regulamento"] #view-regulamento{ display:block; }

  .view::after{ content:""; display:block; height:calc(1080 * var(--px)); }

  .view > .topbar,
  .view > .page-title,
  .view > .form,
  .view > .hero-cta,
  .view > .hero-lockup,
  .view > .local-card,
  .view > .slide,
  .view > .reg-cta{ position:absolute; }
  .view > .slide{ z-index:1; }

  /* As artes de fundo tem 2560x1080, com os 1920 centrais correspondendo ao
     palco e 320px espelhados de cada lado so para preencher sobras laterais.
     Assim os retoques feitos nas artes caem sempre atras dos elementos que
     os cobrem, em qualquer proporcao de janela. */
  .bg{
    inset:auto; top:0; bottom:0; left:50%; transform:translateX(-50%);
    width:100vw;
    background-size: calc(2560 * var(--px)) calc(1080 * var(--px));
    background-position: center top;
  }

  /* ---------------- topbar ---------------- */
  .topbar{
    display:block; top:0; left:0; width:100%;
    height:calc(200 * var(--px)); padding:0;
  }
  .brand-wordmark{ position:absolute; left:calc(152 * var(--px)); top:calc(55 * var(--px)); }
  .brand-wordmark img{ width:calc(368 * var(--px)); }

  /* a arte da lockup tem 6px de folga transparente em volta do conteudo:
     as posicoes abaixo ja descontam essa folga */
  .brand-lockup{ position:absolute; left:calc(93.9 * var(--px)); top:calc(51.9 * var(--px)); }
  .brand-lockup img{ width:calc(364.3 * var(--px)); }

  .nav{
    position:absolute; right:calc(79 * var(--px)); top:calc(84 * var(--px));
    transform:translateY(-50%);
    flex-wrap:nowrap; align-items:center; gap:calc(49 * var(--px));
    font-size:calc(18 * var(--px)); letter-spacing:calc(2 * var(--px));
    white-space:nowrap;
  }
  .nav .nav-sep{ display:inline; }
  .nav a{ padding:0; border:0; background:none; border-radius:0; }

  .topbar-actions{
    position:absolute; right:calc(79 * var(--px)); top:calc(105 * var(--px));
    transform:translateY(-50%);
    width:auto; gap:calc(47 * var(--px));
  }
  .btn-voltar{
    flex:none; max-width:none; padding:0;
    width:calc(336 * var(--px)); height:calc(64 * var(--px));
    border-radius:calc(32 * var(--px));
    font-size:calc(20 * var(--px)); letter-spacing:calc(.6 * var(--px));
  }
  .btn-arrow{ width:calc(74 * var(--px)); height:calc(74 * var(--px)); }
  .btn-arrow svg{ width:calc(32 * var(--px)); height:calc(24 * var(--px)); }

  /* ---------------- titulos ---------------- */
  .page-title::before{ width:calc(13 * var(--px)); border-radius:calc(2 * var(--px)); }
  .page-title p{ font-size:calc(20.5 * var(--px)); line-height:1; }

  /* Inscricao — barra em 103/502, altura 108; caixa alta comeca em 505 */
  .view > .page-title-inscricao{
    left:calc(103 * var(--px)); top:calc(502 * var(--px));
    height:calc(108 * var(--px));
    width:calc(430 * var(--px));
    margin:0; padding-left:calc(34 * var(--px));
  }
  .page-title-inscricao h1{
    font-size:calc(71 * var(--px));
    margin-top:calc(9.3 * var(--px));
  }
  .page-title-inscricao p{ margin-top:calc(11.8 * var(--px)); }

  /* Mecanica / Arena — barra em 601/221, altura 107 */
  .page-title-center{
    position:absolute; left:calc(601 * var(--px)); top:calc(221 * var(--px));
    height:calc(107 * var(--px));
    /* width:auto: o 100% herdado do mobile esticaria a caixa ate o fim do
       palco e criaria rolagem horizontal */
    width:auto;
    margin:0; padding-left:calc(37 * var(--px));
  }
  .page-title-center h2{
    font-size:calc(71 * var(--px));
    margin-top:calc(6.3 * var(--px));
  }
  .page-title-center p{ margin-top:calc(13.8 * var(--px)); }

  /* ---------------- home ---------------- */
  .hero-cta{
    order:0; left:calc(188 * var(--px)); top:calc(509 * var(--px));
    width:calc(320 * var(--px)); height:calc(81 * var(--px));
    max-width:none; margin:0;
    border-radius:calc(41 * var(--px));
    font-size:calc(24 * var(--px)); letter-spacing:calc(.5 * var(--px));
  }
  .hero-lockup{
    order:0; left:calc(863.5 * var(--px)); top:calc(369.5 * var(--px));
    width:calc(991 * var(--px)); max-width:none; margin:0;
  }

  /* ---------------- formulario ---------------- */
  /* o formulario cresce/encolhe conforme os blocos condicionais; nos mockups
     ele fica centrado em y=582 (nao no meio exato da tela) */
  .form{
    left:calc(577 * var(--px)); top:calc(582 * var(--px));
    transform:translateY(-50%);
    width:calc(766 * var(--px));
  }
  .field,.choice{ height:calc(51 * var(--px)); }
  .choice{ height:calc(52 * var(--px)); }
  .field input{ font-size:calc(19.5 * var(--px)); }
  .choice-text,.check-text{ font-size:calc(19.5 * var(--px)); }
  .check-text{ line-height:normal; }
  .choices{ grid-template-columns:1fr 1fr; gap:calc(22 * var(--px)); }
  .check{ align-items:center; justify-content:center; }
  .btn-finalizar{
    width:calc(271 * var(--px)); height:calc(56 * var(--px));
    max-width:none; border-radius:calc(28 * var(--px));
    font-size:calc(21 * var(--px)); letter-spacing:calc(1 * var(--px));
    margin:calc(44 * var(--px)) auto 0;
  }

  /* ---------------- slides ---------------- */
  .slide{ position:absolute; inset:0; width:auto; }
  .cards{ position:absolute; }
  .cards-3{
    left:calc(79 * var(--px)); top:calc(435 * var(--px));
    width:calc(1762 * var(--px)); height:calc(523 * var(--px));
    grid-template-columns:repeat(3,1fr); gap:calc(35 * var(--px));
  }
  .cards-4{
    left:calc(234 * var(--px)); top:calc(380 * var(--px));
    width:calc(1451 * var(--px)); height:calc(639 * var(--px));
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:calc(309 * var(--px)) calc(308 * var(--px));
    column-gap:calc(17 * var(--px)); row-gap:calc(22 * var(--px));
  }

  .card{ padding:calc(2 * var(--px)); }
  .card-num{
    position:absolute; left:calc(39 * var(--px)); margin:0;
  }
  .cards-3 .card-num{ font-size:calc(82 * var(--px)); top:calc(44.3 * var(--px)); }
  .cards-4 .card-num{ font-size:calc(70 * var(--px)); top:calc(40.2 * var(--px));
                      left:calc(37 * var(--px)); }

  /* slide 1: numero, ilustracao e texto em coordenadas do mockup */
  .card-art{ display:block; margin:0; }
  .cards-3 .card-art{ position:absolute; }
  .cards-3 .card:nth-child(1) .card-art{ left:calc(149 * var(--px)); top:calc( 61 * var(--px)); width:calc(232 * var(--px)); }
  .cards-3 .card:nth-child(2) .card-art{ left:calc(136 * var(--px)); top:calc( 41 * var(--px)); width:calc(268 * var(--px)); }
  .cards-3 .card:nth-child(3) .card-art{ left:calc(112 * var(--px)); top:calc( 27 * var(--px)); width:calc(352 * var(--px)); }
  .card-art img{ width:100%; max-width:none; max-height:none; }

  .cards-3 .card-text{
    position:absolute; left:0; right:0;
    top:calc(386 * var(--px)); transform:translateY(-50%);
    padding:0 calc(24 * var(--px));
    text-align:center;
    font-size:calc(19.5 * var(--px)); line-height:calc(24.3 * var(--px));
  }

  /* slide 2: numero, ilustracao e corpo em coordenadas do mockup */
  .card-row .card-art{ position:absolute; }
  .cards-4 .card:nth-child(2) .card-art{ left:calc(80 * var(--px)); top:calc(52 * var(--px)); width:calc(224 * var(--px)); }
  .cards-4 .card:nth-child(3) .card-art{ left:calc(42 * var(--px)); top:calc(71 * var(--px)); width:calc(276 * var(--px)); }
  .cards-4 .card:nth-child(4) .card-art{ left:calc(78 * var(--px)); top:calc(53 * var(--px)); width:calc(232 * var(--px)); }

  .card-row .card-body{
    position:absolute; left:calc(370 * var(--px)); right:calc(30 * var(--px));
    top:50%; transform:translateY(-50%);
  }
  .card-row .card-body h3{
    margin:0 0 calc(20 * var(--px)); font-size:calc(23 * var(--px));
  }
  .card-row .card-body p{ font-size:calc(19.5 * var(--px)); line-height:calc(24.3 * var(--px)); }
  .cards-3 .card-text br,
  .card-row .card-body p br,
  .local-line br{ display:inline; }

  /* ---------------- local ---------------- */
  .local-card{
    left:50%; transform:translateX(-50%); top:calc(80 * var(--px));
    width:calc(814 * var(--px)); height:calc(930 * var(--px));
    padding:0; background:rgba(11,11,11,.84);
  }
  .local-lockup{
    position:absolute; left:calc(58 * var(--px)); top:calc(100 * var(--px));
    width:calc(698 * var(--px)); max-width:none; margin:0;
  }
  .local-info{ position:absolute; inset:0; }
  .local-line{
    position:absolute; display:block;
    left:calc(189 * var(--px)); right:calc(56 * var(--px));
    padding:0; min-height:0;
    font-size:calc(22.5 * var(--px)); line-height:calc(36 * var(--px));
  }
  .local-line + .local-line{ margin-top:0; }
  .local-line:nth-child(1){ top:calc(466.5 * var(--px)); }
  .local-line:nth-child(2){ top:calc(592.5 * var(--px)); }

  .local-ico{ position:absolute; transform:none; }
  .local-line:nth-child(1) .local-ico{ left:calc(-88 * var(--px));  top:calc(1 * var(--px));  width:calc(60 * var(--px)); }
  .local-line:nth-child(2) .local-ico{ left:calc(-102 * var(--px)); top:calc(22 * var(--px)); width:calc(88 * var(--px)); }

  .btn-voltar-local{
    position:absolute; left:calc(216 * var(--px)); top:calc(803 * var(--px));
    width:calc(382 * var(--px)); height:calc(72 * var(--px));
    max-width:none; margin:0;
    border-radius:calc(36 * var(--px));
    font-size:calc(22 * var(--px)); letter-spacing:calc(.6 * var(--px));
  }

  /* ---------------- regulamento ----------------
     Sem layout no material recebido: titulo e um unico botao centralizado. */
  .reg-cta{
    left:50%; top:calc(560 * var(--px)); transform:translate(-50%,-50%);
    width:calc(382 * var(--px)); height:calc(72 * var(--px));
    max-width:none; margin:0;
    border-radius:calc(36 * var(--px));
    font-size:calc(22 * var(--px)); letter-spacing:calc(.6 * var(--px));
  }
}