:root{
  --bg:#071612;
  --bg2:#0d211b;
  --card:#132b24;
  --line:rgba(255,255,255,.12);
  --green:#55c96d;
  --green2:#8ae5a0;
  --text:#f7faf8;
  --muted:#aab9b3;
  --orange:#f1a447;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#030906;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  display:flex;
  justify-content:center;
}

button,select{font:inherit}

button{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#app{
  width:100%;
  max-width:480px;
  min-height:100dvh;
  background:
    radial-gradient(circle at 50% -20%,#174a38 0%,transparent 38%),
    linear-gradient(180deg,#0b1b16,var(--bg));
  position:relative;
  overflow:hidden;
}

.screen{
  min-height:100dvh;
  display:none;
  flex-direction:column;
}

.screen.active{display:flex}

header{
  min-height:70px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  letter-spacing:.08em;
  font-size:12px;
}

header>div{
  display:flex;
  flex-direction:column;
  align-items:center;
}

header small{color:var(--muted)}
header strong{font-size:14px;margin-top:2px}

main{
  padding:30px 24px;
  flex:1;
}

footer{
  padding:18px 24px calc(20px + env(safe-area-inset-bottom));
}

h1,h2,h3,p{margin-top:0}
h2{text-align:center;font-size:27px;margin-bottom:6px}
h3{font-size:15px;margin:26px 0 12px}
.subtitle{text-align:center;color:var(--muted);margin-bottom:30px}

.hero{
  min-height:100dvh;
  position:relative;
  background:
    linear-gradient(180deg,rgba(4,15,11,.08),rgba(4,13,10,.95)),
    radial-gradient(circle at 78% 20%,#356b61 0,#173b32 28%,transparent 50%),
    linear-gradient(135deg,#254f44,#07120e);
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 55%,transparent 0 22%,rgba(84,152,123,.35) 23% 25%,transparent 26%),
    linear-gradient(155deg,transparent 45%,rgba(96,185,137,.25) 46%,transparent 47%);
  opacity:.8;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(3,10,7,.95));
}

.hero-content{
  position:absolute;
  inset:0;
  z-index:2;
  padding:70px 30px 40px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:center;
}

.logo-mark{
  width:92px;
  height:92px;
  margin:0 auto 25px;
  border:2px solid rgba(255,255,255,.8);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:50px;
  color:var(--green2);
}

.hero h1{
  font-size:43px;
  line-height:.92;
  letter-spacing:.09em;
  margin-bottom:25px;
}

.hero h1 span{
  font-size:28px;
  letter-spacing:.22em;
}

.tagline{
  line-height:1.5;
  color:#d8e3de;
  margin-bottom:38px;
}

.hero small{
  margin-top:18px;
  color:#859890;
}

.primary,
.secondary,
.danger{
  border-radius:16px;
  padding:16px 18px;
  width:100%;
  border:0;
  font-weight:750;
}

.primary{
  background:linear-gradient(90deg,#35a64d,#61cf75);
  color:white;
}

.primary span{float:right}

.secondary{
  background:rgba(255,255,255,.055);
  border:1px solid var(--line);
  color:white;
}

.danger{
  color:#ff9e9e;
  border:1px solid rgba(255,100,100,.25);
  background:rgba(130,30,30,.12);
}

.back,.close,.menu-btn,.lang-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:0;
  color:white;
  background:transparent;
  font-size:27px;
}

.icon{
  font-size:43px;
  text-align:center;
  margin:18px 0 12px;
  color:var(--green2);
}

.options{display:flex;flex-direction:column;gap:10px}

.option,
.audio-choice{
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:white;
  border-radius:14px;
  padding:15px 16px;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
}

.option span{font-size:23px}
.option b{margin-left:auto;color:var(--green)}

.option.selected,
.audio-choice.selected{
  border-color:rgba(85,201,109,.45);
  background:rgba(85,201,109,.11);
}

.coming{
  margin-top:12px;
  padding:15px;
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.coming span{display:block;margin-top:7px;letter-spacing:.16em}

.field-label{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:7px;
}

.select-box select{
  width:100%;
  padding:16px;
  color:white;
  background:#10231d;
  border:1px solid var(--line);
  border-radius:14px;
}

.journey-card{
  margin-top:15px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  background:rgba(255,255,255,.035);
}

.journey-card div{
  display:flex;
  flex-direction:column;
}

.journey-card small{
  color:var(--muted);
  font-size:10px;
}

.journey-card strong{
  font-size:20px;
  margin-top:4px;
}

.journey-card .route{
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  padding-top:13px;
  font-size:13px;
  color:#c9d6d1;
}

.audio-choice{
  width:100%;
  margin-bottom:9px;
}

.audio-choice>span{
  font-size:22px;
  color:var(--green2);
}

.audio-choice div{
  display:flex;
  flex-direction:column;
}

.audio-choice small{
  color:var(--muted);
  margin-top:3px;
}

.audio-choice b{
  margin-left:auto;
  color:var(--green);
}

#screen-destination .secondary{margin-top:15px}

.center{text-align:center}

.progress-ring{
  width:150px;
  height:150px;
  margin:35px auto 30px;
  border-radius:50%;
  border:10px solid rgba(255,255,255,.08);
  border-top-color:var(--green);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:29px;
  transition:.3s;
}

.checklist{
  max-width:280px;
  margin:30px auto;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:15px;
  color:var(--muted);
}

.checklist div.done{color:var(--green2)}

.ready-message{
  opacity:0;
  color:var(--green2);
  font-weight:800;
  font-size:20px;
  transition:.3s;
}

.ready-message.show{opacity:1}

.traffic-banner{
  display:none;
  background:rgba(241,164,71,.13);
  border-bottom:1px solid rgba(241,164,71,.22);
  padding:12px 18px;
  align-items:center;
  gap:12px;
}

.traffic-banner.active{display:flex}

.traffic-banner span{font-size:24px}

.traffic-banner div{
  display:flex;
  flex-direction:column;
}

.traffic-banner strong{color:#ffc57c;font-size:13px}
.traffic-banner small{color:#d6bea0;font-size:11px;margin-top:2px}

.place-image{
  height:250px;
  position:relative;
  padding:20px;
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.75)),
    radial-gradient(circle at 30% 25%,#61a994,#2d665a 35%,#183b34 65%,#0a1713);
}

.place-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(160deg,transparent 40%,rgba(255,255,255,.07) 41%,transparent 42%),
    radial-gradient(ellipse at 75% 60%,transparent 0 35%,rgba(5,18,13,.65) 36%);
}

.counter{
  position:absolute;
  z-index:2;
  right:15px;
  top:15px;
  background:rgba(0,0,0,.65);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
}

.image-title{
  position:relative;
  z-index:2;
  font-size:12px;
  letter-spacing:.15em;
  opacity:.9;
}

.player-area{padding-top:21px}

.now-playing{
  display:flex;
  gap:11px;
  align-items:center;
  font-size:20px;
}

.wave{color:var(--green);font-size:24px}

#place-copy{
  min-height:70px;
  margin:13px 0 18px;
  line-height:1.55;
  color:#d3ddd9;
  font-size:14px;
}

.timeline{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:var(--muted);
}

.bar{
  height:4px;
  background:rgba(255,255,255,.12);
  border-radius:5px;
  overflow:hidden;
}

#bar-fill{
  width:0%;
  height:100%;
  background:var(--green);
}

.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin:25px 0;
}

.controls button{
  width:54px;
  height:54px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:white;
  font-size:18px;
}

.controls small{
  font-size:9px;
  display:block;
}

.controls .pause-main{
  width:72px;
  height:72px;
  background:var(--green);
  font-size:28px;
}

.next-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.next-card div{display:flex;flex-direction:column}
.next-card small{font-size:9px;color:var(--muted)}
.next-card strong{margin-top:4px;font-size:13px}
.next-card>span{font-size:12px;color:var(--muted)}

.demo-controls{
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:15px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.demo-controls>span{
  grid-column:1/-1;
  color:#71877e;
  font-size:9px;
  letter-spacing:.2em;
}

.demo-controls button{
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px 8px;
  color:#b9c8c2;
  background:rgba(255,255,255,.03);
  font-size:11px;
}

.curiosity-image{
  height:300px;
  background:
    radial-gradient(circle at 55% 40%,#cad73e 0 10%,transparent 11%),
    radial-gradient(circle at 45% 48%,#7daf2c 0 18%,transparent 19%),
    linear-gradient(135deg,#214534,#0e2119);
  display:grid;
  place-items:center;
  font-size:100px;
}

.curiosity-label{
  color:#ffd95f;
  font-size:12px;
  margin-bottom:10px;
}

#screen-curiosity h2{text-align:left}

#screen-curiosity main p{
  line-height:1.65;
  color:#cbd8d3;
}

.dots{text-align:center;margin-top:30px}
.dots b,.dots i{
  display:inline-block;
  width:8px;height:8px;
  margin:0 5px;
  border-radius:50%;
  background:#52645d;
}
.dots b{background:var(--green)}

.pause-circle,.finish-mark{
  margin:75px auto 30px;
  width:120px;
  height:120px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(85,201,109,.08);
  border:1px solid rgba(85,201,109,.25);
  color:var(--green);
  font-size:42px;
}

.pause-option{margin-top:10px}

.stats{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:16px;
  margin:35px 0 20px;
  overflow:hidden;
}

.stats div{
  padding:18px 8px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
}

.stats div:last-child{border-right:0}
.stats strong{font-size:20px}
.stats small{color:var(--muted);font-size:10px;margin-top:5px}

#screen-finish .primary{margin-top:10px}

@media(min-width:700px){
  body{padding:20px}
  #app{
    min-height:calc(100dvh - 40px);
    border-radius:25px;
    box-shadow:0 30px 100px #000;
  }
  .screen{min-height:calc(100dvh - 40px)}
  .hero{min-height:calc(100dvh - 40px)}
}


/* ==========================================================
   V0.2 - VISUAL APROVADO / ECRÃ ABERTURA
   ========================================================== */

#screen-welcome .hero{
  min-height:100dvh;
  position:relative;

  background:
    linear-gradient(
      180deg,
      rgba(4,17,28,.05) 0%,
      rgba(4,17,28,.10) 38%,
      rgba(5,18,24,.62) 68%,
      rgba(4,14,19,.96) 100%
    ),
    url('/media/images/01-welcome.webp');

  background-size:cover;
  background-position:center;
}

#screen-welcome .hero:before{
  display:none;
}

#screen-welcome .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(3,15,22,.14),
      transparent 38%,
      transparent 62%,
      rgba(3,15,22,.12)
    );
}

#screen-welcome .hero-content{
  position:absolute;
  inset:0;
  z-index:2;

  padding:
    calc(55px + env(safe-area-inset-top))
    32px
    calc(30px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  text-align:center;
}

#screen-welcome .logo-mark{
  width:118px;
  height:auto;
  margin:0 auto 13px;

  border:0;
  border-radius:0;

  color:#fff;
  display:block;
}

#screen-welcome .logo-mark svg{
  display:block;
  width:100%;
  height:auto;

  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,.32));
}

#screen-welcome .hero h1{
  margin:0 0 20px;

  font-size:40px;
  line-height:.94;
  font-weight:800;

  letter-spacing:.055em;

  text-shadow:
    0 3px 18px rgba(0,0,0,.45);
}

#screen-welcome .hero h1 span{
  display:block;

  margin-top:7px;

  font-size:24px;
  letter-spacing:.19em;
  font-weight:700;
}

#screen-welcome .tagline{
  margin:0 auto 28px;

  max-width:280px;

  font-size:17px;
  line-height:1.45;

  color:#fff;

  text-shadow:
    0 2px 12px rgba(0,0,0,.65);
}

#screen-welcome .primary{
  min-height:54px;

  border-radius:18px;

  background:
    linear-gradient(
      90deg,
      #2da848,
      #5bcf73
    );

  box-shadow:
    0 10px 30px rgba(19,111,51,.30);

  font-size:15px;
  letter-spacing:.025em;
}

#screen-welcome .hero small{
  margin-top:14px;

  color:rgba(255,255,255,.62);

  font-size:10px;
  letter-spacing:.06em;
}


/* Desktop - mostrar a experiência móvel sem alterar o design */
@media(min-width:700px){

  body{
    background:#020906;
  }

  #app{
    max-width:430px;
  }

  #screen-welcome .hero-content{
    padding-left:30px;
    padding-right:30px;
  }
}

/* ==========================================================
   MADEIRA ROAD GUIDE - VISUAL V3
   REFERÊNCIA: MOCKUP INICIAL APROVADO
   ========================================================== */

#screen-welcome .hero{
  position:relative !important;
  min-height:100dvh !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(7,22,34,.02) 0%,
      rgba(7,22,34,.04) 32%,
      rgba(7,22,34,.35) 58%,
      rgba(5,18,28,.91) 100%
    ),
    url('/media/images/01-welcome.webp?v=3') !important;

  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

#screen-welcome .hero::before{
  content:none !important;
  display:none !important;
}

#screen-welcome .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(5,16,25,.02),
      rgba(5,16,25,.02) 48%,
      rgba(5,16,25,.34) 66%,
      rgba(4,15,24,.68) 80%,
      rgba(3,13,20,.96) 100%
    ) !important;
}

#screen-welcome .hero-content{
  position:absolute !important;
  inset:0 !important;
  z-index:2;

  display:flex !important;
  flex-direction:column;
  justify-content:flex-end !important;

  padding:
    calc(45px + env(safe-area-inset-top))
    30px
    calc(28px + env(safe-area-inset-bottom)) !important;

  text-align:center;
}

#screen-welcome .logo-mark{
  width:132px !important;
  height:auto !important;

  margin:0 auto 10px !important;

  border:0 !important;
  border-radius:0 !important;
  background:none !important;

  color:white;
}

#screen-welcome .logo-mark svg{
  display:block;
  width:100%;
  height:auto;

  filter:drop-shadow(0 3px 12px rgba(0,0,0,.45));
}

#screen-welcome h1{
  margin:0 0 22px !important;

  color:#fff;

  font-size:42px !important;
  font-weight:800 !important;
  line-height:.92 !important;

  letter-spacing:.055em !important;

  text-shadow:0 3px 16px rgba(0,0,0,.45);
}

#screen-welcome h1 span{
  display:block;

  margin-top:9px;

  font-size:24px !important;
  font-weight:700 !important;
  letter-spacing:.20em !important;
}

#screen-welcome .tagline{
  margin:0 auto 30px !important;
  max-width:290px;

  color:#fff !important;

  font-size:17px !important;
  line-height:1.45 !important;

  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

#screen-welcome .primary{
  min-height:55px;

  border-radius:18px !important;

  background:
    linear-gradient(
      90deg,
      #2ca947 0%,
      #62d17a 100%
    ) !important;

  box-shadow:0 10px 30px rgba(22,119,53,.30);

  font-size:15px;
}

#screen-welcome .hero small{
  margin-top:15px !important;

  color:rgba(255,255,255,.58) !important;

  font-size:10px !important;
}


/* A partir daqui toda a aplicação abandona
   o verde/preto quase monocromático anterior */

:root{
  --bg:#071612;
  --bg2:#0d211b;
  --card:#132b24;
  --line:rgba(255,255,255,.12);

  --green:#69c84b;
  --green2:#8dd866;

  --text:#ffffff;
  --muted:#b9c7ce;
}

#app{
  background:
    linear-gradient(
      180deg,
      #0b211b 0%,
      #05100c 100%
    ) !important;
}

.screen:not(#screen-welcome){
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(55,135,108,.34) 0%,
      rgba(22,68,56,.20) 30%,
      transparent 56%
    ),
    linear-gradient(
      180deg,
      #12352c 0%,
      #0b241d 42%,
      #071711 72%,
      #040a08 100%
    ) !important;

  background-color:#071711 !important;
}

header{
  background:rgba(5,20,15,.78);
  backdrop-filter:blur(12px);
}

.option,
.audio-choice,
.select-box select,
.journey-card,
.next-card{
  background:rgba(255,255,255,.065) !important;
}

.option.selected,
.audio-choice.selected{
  background:rgba(105,200,75,.12) !important;
  border-color:rgba(105,200,75,.55) !important;
}


/* ==========================================================
   ABERTURA V4 - SEM FOTOGRAFIA
   ========================================================== */

#screen-welcome .hero{
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(40,110,92,.42) 0%,
      rgba(18,61,51,.24) 30%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #14392f 0%,
      #0b211b 42%,
      #07130f 76%,
      #040a08 100%
    ) !important;

  background-image:
    radial-gradient(
      circle at 50% 18%,
      rgba(55,135,108,.40) 0%,
      rgba(22,68,56,.24) 31%,
      transparent 57%
    ),
    linear-gradient(
      180deg,
      #12352c 0%,
      #0b241d 42%,
      #071711 72%,
      #040a08 100%
    ) !important;
}

#screen-welcome .hero-overlay{
  background:
    radial-gradient(
      ellipse at 50% 64%,
      rgba(91,207,115,.06),
      transparent 42%
    ) !important;
}

#screen-welcome .logo-mark{
  width:138px !important;
  margin-bottom:14px !important;
}

#screen-welcome h1{
  font-size:43px !important;
}

#screen-welcome .tagline{
  color:rgba(255,255,255,.88) !important;
}


/* === ABERTURA FINAL V4 - SEM IMAGEM === */

html body #app #screen-welcome .hero {
    background-image:
        radial-gradient(
            circle at 50% 16%,
            rgba(55,135,108,.42) 0%,
            rgba(24,72,59,.24) 30%,
            rgba(7,23,17,0) 57%
        ),
        linear-gradient(
            180deg,
            #14392f 0%,
            #0b241d 43%,
            #071711 73%,
            #040a08 100%
        ) !important;

    background-color:#071711 !important;
}

html body #app #screen-welcome .hero::before {
    display:none !important;
    content:none !important;
}


/* ÍCONE DA ABERTURA = ÍCONE OFICIAL DA APP/FAVICON */

#screen-welcome .logo-mark{
    width:112px !important;
    height:112px !important;
    margin:0 auto 18px !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
}

#screen-welcome .logo-mark img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
}



/* ==========================================================
   V6 - FRAME ÚNICO E ÍCONE OFICIAL
   ========================================================== */

@media (min-width:700px){

  html,
  body{
    width:100%;
    height:100%;
    min-height:100dvh;
    margin:0;
  }

  body{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:24px !important;

    overflow:hidden !important;

    background:#020906 !important;
  }

  #app{
    width:390px !important;
    max-width:390px !important;

    height:min(760px, calc(100dvh - 48px)) !important;
    min-height:0 !important;
    max-height:none !important;

    position:relative;

    overflow:hidden !important;

    border-radius:24px !important;

    box-shadow:
      0 28px 90px rgba(0,0,0,.50) !important;
  }

  #app .screen{
    width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    overflow-y:auto;
    overflow-x:hidden;
  }

  #screen-welcome .hero{
    width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
  }
}


/* MOBILE - ocupa o dispositivo */
@media (max-width:699px){

  body{
    padding:0 !important;
    overflow:hidden;
  }

  #app{
    width:100% !important;
    max-width:none !important;

    height:100dvh !important;
    min-height:100dvh !important;

    border-radius:0 !important;
  }

  #app .screen{
    height:100dvh !important;
    min-height:100dvh !important;

    overflow-y:auto;
  }

  #screen-welcome .hero{
    height:100% !important;
    min-height:100% !important;
  }
}


/* MESMO ÍCONE DO FAVICON */
#screen-welcome .logo-mark{
  width:104px !important;
  height:104px !important;

  margin:0 auto 18px !important;

  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

#screen-welcome .logo-mark img{
  width:100% !important;
  height:100% !important;

  display:block;

  object-fit:contain;

  background:transparent !important;

  filter:
    drop-shadow(0 6px 18px rgba(0,0,0,.26));
}


/* DESTINO - versão mais compacta */

#screen-destination main{
  padding-top:18px !important;
}

#screen-destination .icon{
  font-size:28px !important;
  margin:6px 0 8px !important;
}

#screen-destination h2{
  margin-bottom:3px !important;
  font-size:25px !important;
}

#screen-destination .subtitle{
  margin-bottom:18px !important;
  font-size:13px !important;
}

#screen-destination .journey-card{
  margin-top:10px !important;
}

#screen-destination h3{
  margin:18px 0 10px !important;
}


/* ==========================================================
   DESTINO V7 - VERDADEIRAMENTE COMPACTO
   ========================================================== */

#screen-destination main{
  padding:16px 20px 8px !important;
}

#screen-destination .destination-heading{
  margin:0 0 14px !important;
}

#screen-destination .destination-heading h2{
  margin:0 !important;
  text-align:left !important;
  font-size:21px !important;
  line-height:1.15 !important;
}

#screen-destination .field-label{
  margin-bottom:5px !important;
}

#screen-destination .select-box select{
  padding:13px 14px !important;
}

#screen-destination .journey-card{
  margin-top:9px !important;
  padding:13px 14px !important;
  gap:10px !important;
}

#screen-destination .journey-card strong{
  font-size:17px !important;
}

#screen-destination .journey-card .route{
  padding-top:9px !important;
}

#screen-destination h3{
  margin:14px 0 8px !important;
}

#screen-destination .audio-choice{
  padding:11px 13px !important;
  margin-bottom:7px !important;
}

#screen-destination .audio-choice small{
  font-size:10px !important;
}

#screen-destination .secondary{
  margin-top:9px !important;
  padding:12px !important;
}

#screen-destination footer{
  padding-top:8px !important;
  padding-bottom:14px !important;
}

#screen-destination footer .primary{
  padding:13px !important;
}


/* ==========================================================
   V9 - POSIÇÃO ABERTURA + PROGRESS RING
   ========================================================== */

/* Subir todo o conjunto da abertura */
#screen-welcome .hero-content{
  padding-bottom:
    calc(92px + env(safe-area-inset-bottom)) !important;
}


/* Roda de preparação real */
.progress-ring{
  --progress: 0%;

  position:relative;

  width:150px !important;
  height:150px !important;

  padding:0 !important;

  border:0 !important;
  border-radius:50%;

  background:
    conic-gradient(
      var(--green) 0 var(--progress),
      rgba(255,255,255,.10) var(--progress) 100%
    ) !important;

  display:grid;
  place-items:center;

  transition:background .25s linear;
}


/* Interior da roda */
.progress-ring::before{
  content:"";

  position:absolute;
  inset:10px;

  border-radius:50%;

  background:#0d211b;
}


/* Número sempre por cima */
.progress-ring span{
  position:relative;
  z-index:2;

  font-size:27px;
  font-weight:800;
  color:#fff;
}


/* ==========================================================
   V11 - BOTÃO INICIAR CENTRADO
   ========================================================== */

#screen-welcome .primary{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#screen-welcome .primary span{
  float:none !important;
}

#screen-welcome #ui-welcome-start{
  display:block !important;
  width:auto !important;

  text-align:center !important;
}

#screen-welcome .primary > span:last-child{
  position:absolute !important;

  right:17px !important;
  top:50% !important;

  transform:translateY(-50%) !important;
}



/* ==========================================================
   V12 - MEDIA REAL NO PLAYER
   ========================================================== */

#screen-journey .place-image{
  position:relative !important;
  height:230px !important;

  padding:0 !important;

  overflow:hidden !important;

  background:#081712 !important;
}

#screen-journey .place-media{
  position:absolute;

  inset:0;

  width:100% !important;
  height:100% !important;

  object-fit:cover;

  display:none;
}

#screen-journey #place-photo{
  display:block;
}

#screen-journey .place-media-shade{
  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.04) 48%,
      rgba(3,15,18,.72) 100%
    );
}

#screen-journey .counter{
  z-index:4 !important;
}

#screen-journey .image-title{
  position:absolute !important;

  left:18px;
  bottom:16px;

  z-index:4 !important;

  font-size:11px !important;

  color:#fff;

  letter-spacing:.14em;

  text-shadow:0 2px 8px rgba(0,0,0,.8);
}



/* ==========================================================
   V13 - POSTER + VIDEO ON DEMAND
   ========================================================== */

#screen-journey .place-media{
  z-index:1;
}

#screen-journey #place-photo{
  display:block;
}

#screen-journey #place-video{
  display:none;
  background:#000;
}

.play-place-video{
  position:absolute;
  z-index:5;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  display:flex;
  align-items:center;
  gap:9px;

  padding:10px 15px;

  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;

  background:rgba(3,15,17,.68);
  backdrop-filter:blur(8px);

  color:#fff;

  font-size:11px;
  font-weight:750;
  letter-spacing:.08em;

  box-shadow:0 5px 22px rgba(0,0,0,.30);
}

.video-play-icon{
  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  padding-left:2px;

  border-radius:50%;

  background:#62d17a;

  color:#07150f;

  font-size:12px;
}

.close-place-video{
  position:absolute;
  z-index:6;

  top:13px;
  left:13px;

  display:none;

  width:36px;
  height:36px;

  border:1px solid rgba(255,255,255,.30);
  border-radius:50%;

  background:rgba(0,0,0,.62);

  color:#fff;

  font-size:23px;
  line-height:1;
}

#screen-journey .place-image.video-active .play-place-video{
  display:none;
}

#screen-journey .place-image.video-active .close-place-video{
  display:block;
}

#screen-journey .place-image.video-active #place-photo{
  display:none !important;
}

#screen-journey .place-image.video-active #place-video{
  display:block !important;
}



/* ==========================================================
   V14 - MADEIRA GREEN THEME
   ========================================================== */

:root{
  --bg:#071612 !important;
  --bg2:#0d211b !important;
  --card:#132b24 !important;

  --green:#61cf75 !important;
  --green2:#7ee081 !important;

  --text:#ffffff !important;
  --muted:#b9c9c2 !important;
}


/*
 * Manter a abertura como está.
 * Todos os restantes ecrãs passam para a mesma família verde.
 */

#screen-language,
#screen-destination,
#screen-preparing,
#screen-journey,
#screen-curiosity,
#screen-pause,
#screen-finish{
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(46,113,84,.46) 0%,
      rgba(26,69,52,.22) 27%,
      transparent 46%
    ),
    linear-gradient(
      180deg,
      #0d281f 0%,
      #0a211a 38%,
      #071812 70%,
      #05100c 100%
    ) !important;
}


/* Cabeçalhos */

#screen-language header,
#screen-destination header,
#screen-preparing header,
#screen-journey header,
#screen-curiosity header,
#screen-pause header,
#screen-finish header{
  background:rgba(5,20,15,.78) !important;
  border-color:rgba(126,224,129,.10) !important;
}


/* Cartões e superfícies */

#screen-language .card,
#screen-destination .card,
#screen-preparing .card,
#screen-journey .card,
#screen-curiosity .card,
#screen-pause .card,
#screen-finish .card{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.11) !important;
}


/* Player - área inferior */

#screen-journey .player-area{
  background:
    linear-gradient(
      180deg,
      rgba(12,40,31,.97),
      rgba(6,24,18,.99)
    ) !important;
}


/* Próximo conteúdo */

#screen-journey .next-card{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(126,224,129,.18) !important;
}


/* ==========================================================
   V14 - KARAOKE / NARRAÇÃO SINCRONIZADA
   ========================================================== */

#place-copy.karaoke-copy{
  display:flex !important;
  flex-direction:column;
  justify-content:center;

  min-height:76px;

  margin-top:10px;

  gap:5px;

  overflow:hidden;
}


.karaoke-line{
  width:100%;

  margin:0;

  transition:
    opacity .20s ease,
    color .20s ease,
    transform .20s ease,
    font-size .20s ease;
}


/* frase anterior */

.karaoke-line.previous{
  color:rgba(126,224,129,.58);

  font-size:10px;
  line-height:1.25;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* frase que está a ser dita */

.karaoke-line.active{
  color:#ffffff;

  font-size:13px;
  font-weight:700;
  line-height:1.42;

  transform:translateX(2px);
}


/* frase seguinte */

.karaoke-line.next{
  color:rgba(255,255,255,.34);

  font-size:10px;
  line-height:1.25;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* pequeno indicador de progresso da frase atual */

.karaoke-line.active::before{
  content:'';

  display:inline-block;

  width:5px;
  height:5px;

  margin-right:7px;
  margin-bottom:2px;

  border-radius:50%;

  background:#61cf75;

  box-shadow:0 0 8px rgba(97,207,117,.6);
}



/* ==========================================================
   V15 - GREEN THEME COMPLETO
   remover superfícies azuis antigas
   ========================================================== */

#screen-language main,
#screen-language footer,
#screen-destination main,
#screen-destination footer,
#screen-preparing main,
#screen-preparing footer,
#screen-curiosity main,
#screen-curiosity footer,
#screen-pause main,
#screen-pause footer,
#screen-finish main,
#screen-finish footer{
  background:transparent !important;
}


/*
 * Evitar que wrappers antigos voltem a introduzir navy.
 */

#screen-language .screen-body,
#screen-language .content,
#screen-language .language-content,

#screen-destination .screen-body,
#screen-destination .content,
#screen-destination .destination-content,

#screen-preparing .screen-body,
#screen-preparing .content,
#screen-preparing .preparing-content{
  background:transparent !important;
}


/*
 * Superfícies no mesmo universo cromático da abertura.
 */

#screen-language main button,
#screen-destination .journey-card,
#screen-destination .audio-choice,
#screen-destination .secondary,
#screen-destination select{
  background-color:rgba(255,255,255,.055) !important;
}


/*
 * A cor geral que deve aparecer por baixo de todos
 * os conteúdos.
 */

#screen-language,
#screen-destination,
#screen-preparing,
#screen-curiosity,
#screen-pause,
#screen-finish{
  background:
    radial-gradient(
      circle at 50% -18%,
      rgba(40,111,80,.55) 0%,
      rgba(20,65,46,.27) 30%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #103126 0%,
      #0b241c 38%,
      #071812 72%,
      #04100c 100%
    ) !important;
}


/* ==========================================================
   V15 - KARAOKE MAIS LIMPO
   ========================================================== */

#place-copy.karaoke-copy{
  min-height:86px !important;
  margin:7px 0 3px !important;

  display:flex !important;
  flex-direction:column;
  justify-content:center;

  gap:5px;

  overflow:hidden;
}

#place-copy .karaoke-line{
  margin:0 !important;
}

#place-copy .karaoke-line.previous{
  color:rgba(105,216,120,.52) !important;
  font-size:10px !important;
  line-height:1.25 !important;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#place-copy .karaoke-line.active{
  color:#fff !important;

  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.38 !important;

  white-space:normal;
}

#place-copy .karaoke-line.next{
  color:rgba(255,255,255,.32) !important;
  font-size:10px !important;
  line-height:1.25 !important;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* ==========================================================
   V17 - TRANSCRIÇÃO COM REALCE SIMPLES
   ========================================================== */

#place-copy.karaoke-copy{
  min-height:78px !important;

  margin:8px 0 4px !important;

  display:block !important;

  font-size:12px !important;
  line-height:1.48 !important;

  color:rgba(255,255,255,.46) !important;

  overflow:hidden;
}


/*
 * Todas as frases têm exatamente o mesmo tamanho.
 */

#place-copy .karaoke-line{
  display:inline !important;

  margin:0 !important;

  font-size:12px !important;
  line-height:1.48 !important;

  font-weight:400 !important;

  color:rgba(255,255,255,.40) !important;

  white-space:normal !important;

  transition:
    color .20s ease,
    font-weight .20s ease;
}


/*
 * Espaço natural entre frases.
 */

#place-copy .karaoke-line::after{
  content:' ';
}


/*
 * Apenas a frase que está a ser narrada é realçada.
 */

#place-copy .karaoke-line.active{
  color:#ffffff !important;

  font-size:12px !important;
  line-height:1.48 !important;

  font-weight:700 !important;

  transform:none !important;
}


/*
 * Remover bolinha do efeito karaoke anterior.
 */

#place-copy .karaoke-line.active::before{
  display:none !important;
  content:none !important;
}


/*
 * Anterior e seguinte ficam apenas discretas.
 */

#place-copy .karaoke-line.previous,
#place-copy .karaoke-line.next{
  color:rgba(255,255,255,.40) !important;

  font-size:12px !important;
  line-height:1.48 !important;

  font-weight:400 !important;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}



/* ==========================================================
   V18 - REMOÇÃO DEFINITIVA DO TEMA AZUL
   ========================================================== */

/*
 * Fundo base - mesma família cromática da abertura
 */

#screen-language,
#screen-destination,
#screen-preparing,
#screen-journey,
#screen-curiosity,
#screen-pause,
#screen-finish{
  background:
    radial-gradient(
      circle at 50% -18%,
      #174a38 0%,
      rgba(23,74,56,.48) 24%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      #0b1b16 0%,
      #081713 48%,
      #05100c 100%
    ) !important;

  background-color:#071612 !important;
}


/*
 * É AQUI que ainda estava a aparecer o azul.
 * Limpar todos os contentores estruturais.
 */

#screen-language > main,
#screen-language > footer,
#screen-language main > div,

#screen-destination > main,
#screen-destination > footer,

#screen-preparing > main,
#screen-preparing > footer,

#screen-curiosity > main,
#screen-curiosity > footer,

#screen-pause > main,
#screen-pause > footer,

#screen-finish > main,
#screen-finish > footer{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
}


/*
 * Wrappers antigos do protótipo
 */

#screen-language .content,
#screen-language .screen-content,
#screen-language .screen-body,
#screen-language .language-content,

#screen-destination .content,
#screen-destination .screen-content,
#screen-destination .screen-body,
#screen-destination .destination-content,

#screen-preparing .content,
#screen-preparing .screen-content,
#screen-preparing .screen-body,
#screen-preparing .preparing-content{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
}


/*
 * Cabeçalhos - quase preto esverdeado,
 * como na abertura.
 */

#screen-language header,
#screen-destination header,
#screen-preparing header,
#screen-journey header,
#screen-curiosity header,
#screen-pause header,
#screen-finish header{
  background:#071713 !important;

  border-bottom:
    1px solid rgba(97,207,117,.10) !important;
}


/*
 * Opções de idioma
 */

#screen-language .language-option,
#screen-language button.lang-option{
  background:rgba(255,255,255,.055) !important;

  border-color:
    rgba(255,255,255,.15) !important;
}


#screen-language .language-option.selected,
#screen-language button.lang-option.selected{
  background:
    rgba(97,207,117,.10) !important;

  border-color:
    rgba(97,207,117,.60) !important;
}


/*
 * Destino - cartões
 */

#screen-destination select,
#screen-destination .select-box,
#screen-destination .journey-card,
#screen-destination .audio-choice,
#screen-destination .secondary{
  background:
    rgba(255,255,255,.055) !important;

  border-color:
    rgba(255,255,255,.15) !important;
}


#screen-destination .audio-choice.selected{
  background:
    rgba(97,207,117,.10) !important;

  border-color:
    rgba(97,207,117,.60) !important;
}


/*
 * Preparação
 */

#screen-preparing .progress-ring{
  background-color:
    rgba(7,22,18,.72) !important;
}


/*
 * Player
 */

#screen-journey .player-area{
  background:
    linear-gradient(
      180deg,
      #0b281f 0%,
      #071a14 100%
    ) !important;
}


/*
 * Cartão "Próximo"
 */

#screen-journey .next-card{
  background:
    rgba(255,255,255,.045) !important;

  border-color:
    rgba(97,207,117,.22) !important;
}



/* ==========================================================
   V19 - GREEN UI FINAL
   limpar TODAS as superfícies azuis estruturais
   ========================================================== */


/* FUNDO REAL DOS ECRÃS */

#screen-language,
#screen-destination,
#screen-preparing,
#screen-curiosity,
#screen-pause,
#screen-finish{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,105,75,.55) 0%,
      rgba(18,65,45,.30) 28%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #102c22 0%,
      #0b211a 42%,
      #071711 72%,
      #040b08 100%
    ) !important;

  background-color:#071612 !important;
}


/*
 * IMPORTANTE:
 * qualquer wrapper que esteja a ocupar o ecrã inteiro
 * deixa de poder introduzir o azul antigo.
 */

#screen-language > *:not(header),
#screen-destination > *:not(header),
#screen-preparing > *:not(header),
#screen-curiosity > *:not(header),
#screen-pause > *:not(header),
#screen-finish > *:not(header){
  background-color:transparent !important;
  background-image:none !important;
}


/*
 * Limpar também wrappers internos.
 * Não aplicamos isto ao journey porque aí temos vídeo/player.
 */

#screen-language main *,
#screen-destination main *,
#screen-preparing main *,
#screen-curiosity main *,
#screen-pause main *,
#screen-finish main *{
  --old-blue:none;
}


/* CABEÇALHOS */

#screen-language > header,
#screen-destination > header,
#screen-preparing > header,
#screen-curiosity > header,
#screen-pause > header,
#screen-finish > header{
  background:#071713 !important;
  background-image:none !important;
}


/* ==========================================================
   IDIOMA
   ========================================================== */

#screen-language .language-option,
#screen-language .lang-option,
#screen-language button[data-lang]{
  background:
    rgba(255,255,255,.055) !important;

  background-image:none !important;

  border-color:
    rgba(255,255,255,.15) !important;
}

#screen-language .language-option.selected,
#screen-language .lang-option.selected,
#screen-language button[data-lang].selected{
  background:
    rgba(97,207,117,.11) !important;

  border-color:
    rgba(97,207,117,.62) !important;
}


/* ==========================================================
   DESTINO
   ========================================================== */

#screen-destination select,
#screen-destination .select-box select,
#screen-destination .journey-card,
#screen-destination .audio-choice,
#screen-destination .secondary{
  background:
    rgba(255,255,255,.055) !important;

  background-image:none !important;

  border-color:
    rgba(255,255,255,.15) !important;
}

#screen-destination .audio-choice.selected{
  background:
    rgba(97,207,117,.11) !important;

  border-color:
    rgba(97,207,117,.62) !important;
}


/* ==========================================================
   PREPARAÇÃO
   ========================================================== */

#screen-preparing .progress-ring{
  background-color:
    rgba(5,20,15,.62) !important;
}


/* ==========================================================
   ELEMENTOS COMUNS
   ========================================================== */

#screen-language .primary,
#screen-destination .primary,
#screen-preparing .primary,
#screen-curiosity .primary,
#screen-pause .primary,
#screen-finish .primary{
  background:
    linear-gradient(
      90deg,
      #35b950,
      #61cf75
    ) !important;
}


/*
 * Neutralizar pseudo-elementos decorativos antigos
 * que possam estar a desenhar gradientes azuis.
 */

#screen-language::before,
#screen-language::after,
#screen-destination::before,
#screen-destination::after,
#screen-preparing::before,
#screen-preparing::after,
#screen-curiosity::before,
#screen-curiosity::after,
#screen-pause::before,
#screen-pause::after,
#screen-finish::before,
#screen-finish::after{
  background:none !important;
}



/* ==========================================================
   V24 - AÇÃO DE VÍDEO POR BAIXO DA IMAGEM
   ========================================================== */

.media-video-action{
  width:100%;

  display:flex;
  justify-content:flex-end;
  align-items:center;

  min-height:38px;

  padding:5px 16px;

  background:
    rgba(7,27,20,.96);

  border-top:
    1px solid rgba(255,255,255,.045);

  border-bottom:
    1px solid rgba(97,207,117,.08);
}


.media-video-action .play-place-video{
  position:static !important;

  transform:none !important;

  display:inline-flex;
  align-items:center;

  gap:7px;

  padding:4px 9px 4px 5px;

  border:
    1px solid rgba(97,207,117,.30);

  border-radius:999px;

  background:
    rgba(97,207,117,.065);

  color:
    rgba(255,255,255,.88);

  box-shadow:none;

  backdrop-filter:none;

  font-size:9px;
  font-weight:700;

  letter-spacing:.08em;

  cursor:pointer;
}


.media-video-action .play-place-video:hover{
  background:
    rgba(97,207,117,.13);

  border-color:
    rgba(97,207,117,.52);
}


.media-video-action .video-play-icon{
  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  padding-left:1px;

  border-radius:50%;

  background:#61cf75;

  color:#07150f;

  font-size:9px;
}


/*
 * Quando o vídeo está aberto,
 * a barra deixa de ser necessária.
 */

#place-image.video-active + .media-video-action{
  display:none;
}


/*
 * O × continua dentro do vídeo.
 */

#place-image.video-active .close-place-video{
  display:block;
}


/* V25 - só existe ação de vídeo por baixo da imagem */
#place-image > .play-place-video{
  display:none !important;
}



/* ==========================================================
   V27 - PLAY SOBRE A IMAGEM, ALINHADO COM O TÍTULO
   ========================================================== */

#place-image{
  position:relative !important;
}


/* título no canto inferior esquerdo */

#place-image .image-title{
  position:absolute !important;

  left:18px !important;
  bottom:14px !important;

  right:auto !important;
  width:auto !important;
  max-width:190px !important;

  z-index:7 !important;
}


/* botão no canto inferior direito,
   exatamente na mesma linha visual */

#place-image .media-video-action{
  position:absolute !important;

  right:14px !important;
  bottom:9px !important;

  left:auto !important;
  top:auto !important;

  width:auto !important;
  height:auto !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  z-index:8 !important;

  background:transparent !important;
  border:0 !important;

  display:block !important;
}


#place-image .media-video-action .play-place-video{
  position:static !important;

  display:inline-flex !important;
  align-items:center !important;

  margin:0 !important;

  padding:3px 7px 3px 3px !important;

  gap:5px !important;

  background:rgba(3,15,11,.72) !important;

  border:
    1px solid rgba(97,207,117,.48) !important;

  border-radius:999px !important;

  box-shadow:
    0 3px 10px rgba(0,0,0,.28) !important;

  backdrop-filter:blur(5px) !important;

  transform:none !important;
}


#place-image .media-video-action .video-play-icon{
  width:21px !important;
  height:21px !important;

  font-size:8px !important;
}


#place-image .media-video-action #ui-watch-video{
  font-size:8px !important;
  line-height:1 !important;

  white-space:nowrap !important;
}


/* garantir que nada cria uma faixa por baixo */

#place-image .media-video-action::before,
#place-image .media-video-action::after{
  display:none !important;
}


/* vídeo aberto: esconder botão */

#place-image.video-active .media-video-action{
  display:none !important;
}



/* ==========================================================
   V29 - NAVEGAÇÃO NO ECRÃ DE PAUSA
   ========================================================== */

#screen-pause .pause-nav-row{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px;

  width:100%;
  margin-top:9px;
}


#screen-pause .pause-nav-btn{
  width:100%;

  padding:13px 8px !important;

  font-size:10px !important;
  font-weight:750 !important;

  white-space:nowrap;
}


#screen-pause .pause-nav-btn:disabled{
  opacity:.28 !important;
  cursor:default !important;

  border-color:
    rgba(255,255,255,.08) !important;
}


/* terminar viagem ligeiramente separado */

#screen-pause .danger{
  margin-top:10px;
}



/* ==========================================================
   V30 - NAVEGAÇÃO NA PAUSA
   ========================================================== */

#screen-pause .pause-nav-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  width:100% !important;

  gap:10px !important;

  margin-top:9px !important;
}


#screen-pause .pause-nav-btn{
  width:100% !important;

  padding:13px 5px !important;

  font-size:10px !important;
  font-weight:750 !important;

  white-space:nowrap !important;
}


#screen-pause .pause-nav-btn:disabled{
  opacity:.28 !important;

  cursor:default !important;
}


#screen-pause .danger{
  margin-top:10px !important;
}


/* ==========================================================
   V31 - TERMINAR VIAGEM MAIS DISCRETO
   ========================================================== */

#screen-pause .danger{
  width:72% !important;

  align-self:center !important;

  margin:
    12px auto 0 !important;

  padding:
    10px 12px !important;

  font-size:10px !important;
  font-weight:700 !important;

  border-radius:12px !important;

  background:
    rgba(110,25,25,.10) !important;

  border-color:
    rgba(255,106,106,.34) !important;

  color:#ff8d8d !important;
}


/* ==========================================================
   V32 - PAUSA / TERMINAR VIAGEM
   ========================================================== */

#screen-pause .danger{
  width:calc(50% - 5px) !important;

  align-self:center !important;

  margin:
    24px auto 0 !important;

  padding:
    13px 8px !important;

  font-size:10px !important;
  font-weight:750 !important;

  border-radius:12px !important;
}


/* ==========================================================
   V32 - PAUSA / TERMINAR VIAGEM
   ========================================================== */

#screen-pause .danger{
  width:calc(50% - 5px) !important;

  align-self:center !important;

  margin:
    24px auto 0 !important;

  padding:
    13px 8px !important;

  font-size:10px !important;
  font-weight:750 !important;

  border-radius:12px !important;
}



/* ==========================================================
   V33 - ECRÃ DE PAUSA FINAL
   ========================================================== */

#screen-pause .pause-resume{
  width:100% !important;

  margin:
    28px 0 0 !important;

  padding:
    14px 12px !important;

  font-size:12px !important;
  font-weight:750 !important;
}


#screen-pause .pause-nav-row{
  margin-top:10px !important;
}


/*
 * TERMINAR:
 * exatamente a largura de UM botão da linha anterior
 */

#screen-pause .danger{
  width:calc(50% - 5px) !important;

  align-self:center !important;

  margin:
    25px auto 0 !important;

  padding:
    13px 8px !important;

  font-size:10px !important;
  font-weight:750 !important;
}


/*
 * Navegação
 */

#screen-pause .pause-nav-btn{
  min-height:42px !important;
}



/* ==========================================================
   V34 - PAUSA / BOTÕES EQUILIBRADOS
   ========================================================== */

/* RETOMAR - mesma largura dos restantes */

#screen-pause .pause-resume{
  width:calc(50% - 5px) !important;

  align-self:center !important;

  margin:
    28px auto 0 !important;

  padding:
    13px 8px !important;

  font-size:10px !important;
  font-weight:750 !important;

  border-radius:12px !important;
}


/* ANTERIOR / PRÓXIMO */

#screen-pause .pause-nav-row{
  margin-top:10px !important;
}


/* TERMINAR - mesma largura, mas mais afastado */

#screen-pause .danger{
  width:calc(50% - 5px) !important;

  align-self:center !important;

  margin:
    38px auto 0 !important;

  padding:
    13px 8px !important;

  font-size:10px !important;
  font-weight:750 !important;

  border-radius:12px !important;
}



/* ==========================================================
   V35 - PAUSA / HIERARQUIA FINAL
   ========================================================== */

/* texto */

#screen-pause .subtitle{
  max-width:280px !important;

  margin:
    6px auto 0 !important;

  text-align:left !important;

  font-size:12px !important;
  line-height:1.45 !important;

  color:
    rgba(255,255,255,.66) !important;
}


/* RETOMAR - ação principal */

#screen-pause .pause-resume{
  width:100% !important;

  margin:
    30px 0 0 !important;

  padding:
    14px 12px !important;

  font-size:11px !important;
  font-weight:750 !important;

  border-radius:12px !important;
}


/* ANTERIOR / PRÓXIMO */

#screen-pause .pause-nav-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  gap:10px !important;

  width:100% !important;

  margin-top:10px !important;
}

#screen-pause .pause-nav-btn{
  width:100% !important;

  min-height:42px !important;

  padding:
    12px 7px !important;

  font-size:9px !important;
  font-weight:750 !important;

  border-radius:12px !important;
}


/* TERMINAR - deixa de parecer um botão principal */

#screen-pause .danger{
  width:auto !important;

  min-height:0 !important;

  align-self:center !important;

  margin:
    42px auto 0 !important;

  padding:
    7px 12px !important;

  background:none !important;
  background-color:transparent !important;

  border:0 !important;

  box-shadow:none !important;

  color:#ff8585 !important;

  font-size:9px !important;
  font-weight:700 !important;

  opacity:.86 !important;
}

#screen-pause .danger:hover{
  opacity:1 !important;

  background:
    rgba(255,100,100,.06) !important;
}



/* ==========================================================
   V38 - INDICADOR DE IDIOMA SELECIONADO
   ========================================================== */

#screen-language .language-option,
#screen-language .lang-option,
#screen-language button[data-lang]{
  position:relative !important;
  padding-right:46px !important;
}


/* ✓ gerado pelo CSS - não desaparece com traduções JS */

#screen-language .language-option.selected::after,
#screen-language .lang-option.selected::after,
#screen-language button[data-lang].selected::after{
  content:'✓' !important;

  position:absolute !important;

  right:16px !important;
  top:50% !important;

  transform:translateY(-50%) !important;

  display:block !important;

  color:#61cf75 !important;

  font-size:19px !important;
  font-weight:800 !important;
  line-height:1 !important;
}


/* opção selecionada ligeiramente mais evidente */

#screen-language .language-option.selected,
#screen-language .lang-option.selected,
#screen-language button[data-lang].selected{
  border-color:rgba(97,207,117,.62) !important;
  background:rgba(97,207,117,.09) !important;
}



/* ==========================================================
   V39 - SELEÇÃO DE IDIOMA DEFINITIVA
   ========================================================== */

/*
 * O <b> antigo deixa de desenhar o visto.
 * Mantemo-lo no HTML para não quebrar código legado.
 */

#screen-language .option > b{
  display:none !important;
}


/*
 * Só existe UM visto - gerado pelo CSS.
 */

#screen-language .option{
  position:relative !important;
  padding-right:46px !important;
}


#screen-language .option.selected::after{
  content:'✓' !important;

  position:absolute !important;

  right:16px !important;
  top:50% !important;

  transform:translateY(-50%) !important;

  display:block !important;

  color:#61cf75 !important;

  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;
}


#screen-language .option:not(.selected)::after{
  content:none !important;
}


#screen-language .option.selected{
  border-color:
    rgba(97,207,117,.62) !important;

  background:
    rgba(97,207,117,.09) !important;
}



/* ==========================================================
   V40 - GPS ROAD TEST / PAINEL DE DIAGNÓSTICO
   ========================================================== */

#gps-road-debug{
  position:absolute;

  left:10px;
  top:9px;

  z-index:7;

  display:none;

  max-width:225px;

  padding:5px 8px;

  border:
    1px solid rgba(97,207,117,.35);

  border-radius:999px;

  background:
    rgba(3,15,12,.78);

  backdrop-filter:
    blur(6px);

  color:#dcebe4;

  font-size:8px;
  font-weight:650;
  line-height:1.2;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  pointer-events:none;
}


#gps-road-debug.show{
  display:block;
}


#gps-road-debug.good{
  border-color:
    rgba(97,207,117,.55);
}


#gps-road-debug.weak{
  border-color:
    rgba(241,164,71,.65);

  color:#ffd09a;
}


#gps-road-debug.error{
  border-color:
    rgba(255,110,110,.65);

  color:#ffaaaa;
}


/* Se o vídeo estiver aberto, afastar do X */

#place-image.video-active #gps-road-debug{
  left:48px;
}



/* ==========================================================
   V45 - MENU / BIBLIOTECA DE CURIOSIDADES
   ========================================================== */

#screen-journey{
  position:relative !important;
  overflow:hidden;
}


/* BACKDROP */

.roadguide-menu-backdrop{
  position:absolute;
  inset:0;
  z-index:80;

  background:rgba(0,0,0,.58);

  opacity:0;
  visibility:hidden;

  transition:
    opacity .22s ease,
    visibility .22s ease;
}


.roadguide-menu-backdrop.open{
  opacity:1;
  visibility:visible;
}


/* DRAWER */

.roadguide-menu-drawer{
  position:absolute;

  top:0;
  bottom:0;
  left:0;

  z-index:81;

  width:84%;
  max-width:330px;

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      #071b15 0%,
      #061711 100%
    );

  border-right:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    18px 0 50px rgba(0,0,0,.35);

  transform:
    translateX(-103%);

  transition:
    transform .24s ease;
}


.roadguide-menu-drawer.open{
  transform:
    translateX(0);
}


/* HEADER */

.roadguide-menu-header{
  min-height:84px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    18px 20px;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}


.roadguide-menu-brand small{
  display:block;

  margin-bottom:4px;

  color:
    rgba(255,255,255,.55);

  font-size:10px;

  letter-spacing:.16em;
}


.roadguide-menu-brand strong{
  color:white;

  font-size:15px;

  letter-spacing:.04em;
}


.roadguide-menu-close{
  width:38px;
  height:38px;

  border:0;
  border-radius:50%;

  background:
    rgba(255,255,255,.06);

  color:white;

  font-size:25px;
}


/* BODY */

.roadguide-menu-body{
  flex:1;

  padding:
    20px 16px 28px;

  overflow-y:auto;
}


.roadguide-menu-status{
  margin-bottom:20px;

  padding:
    14px 15px;

  border:
    1px solid rgba(97,207,117,.22);

  border-radius:15px;

  background:
    rgba(97,207,117,.06);
}


.roadguide-menu-status small{
  display:block;

  margin-bottom:5px;

  color:
    rgba(255,255,255,.48);

  font-size:10px;

  letter-spacing:.13em;
}


.roadguide-menu-status strong{
  color:white;

  font-size:15px;
}


/* MENU ITEMS */

.roadguide-menu-item{
  width:100%;

  display:flex;
  align-items:center;
  gap:13px;

  padding:
    15px 12px;

  border:0;
  border-bottom:
    1px solid rgba(255,255,255,.07);

  background:transparent;

  color:white;

  text-align:left;
}


.roadguide-menu-item-icon{
  width:32px;

  flex:0 0 32px;

  text-align:center;

  font-size:20px;
}


.roadguide-menu-item-copy{
  flex:1;
}


.roadguide-menu-item-copy strong{
  display:block;

  font-size:14px;
}


.roadguide-menu-item-copy small{
  display:block;

  margin-top:3px;

  color:
    rgba(255,255,255,.5);

  font-size:11px;
}


.roadguide-menu-arrow{
  color:
    rgba(255,255,255,.38);

  font-size:20px;
}


.roadguide-menu-danger{
  margin-top:20px;

  color:#ff9d9d;
}


/* BIBLIOTECA */

.roadguide-library-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:18px;
}


.roadguide-library-back{
  width:34px;
  height:34px;

  border:0;
  border-radius:50%;

  background:
    rgba(255,255,255,.06);

  color:white;

  font-size:20px;
}


.roadguide-library-title h3{
  margin:0;

  color:white;

  font-size:18px;
}


.roadguide-library-progress{
  margin-bottom:18px;

  color:
    rgba(255,255,255,.55);

  font-size:12px;
}


.roadguide-library-empty{
  padding:
    30px 15px;

  text-align:center;

  color:
    rgba(255,255,255,.53);

  font-size:13px;

  line-height:1.55;
}


.roadguide-curiosity-card{
  margin-bottom:10px;

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:14px;

  overflow:hidden;

  background:
    rgba(255,255,255,.035);
}


.roadguide-curiosity-card button{
  width:100%;

  display:flex;
  align-items:center;
  gap:12px;

  padding:
    14px;

  border:0;

  background:transparent;

  color:white;

  text-align:left;
}


.roadguide-curiosity-card-icon{
  width:32px;

  flex:0 0 32px;

  text-align:center;

  font-size:22px;
}


.roadguide-curiosity-card-title{
  flex:1;

  font-size:13px;
  font-weight:700;
}


.roadguide-curiosity-card-arrow{
  color:
    rgba(255,255,255,.38);

  transition:
    transform .2s ease;
}


.roadguide-curiosity-card.open
.roadguide-curiosity-card-arrow{
  transform:
    rotate(90deg);
}


.roadguide-curiosity-card-copy{
  display:none;

  padding:
    0 16px 16px 58px;

  color:
    rgba(255,255,255,.67);

  font-size:12px;

  line-height:1.55;
}


.roadguide-curiosity-card.open
.roadguide-curiosity-card-copy{
  display:block;
}



/* ==========================================================
   V46 - GPS CENTRADO NO TOPO DA IMAGEM
   ========================================================== */

#gps-road-debug,
#place-image.video-active #gps-road-debug{

  left:50% !important;
  right:auto !important;

  top:10px !important;

  transform:
    translateX(-50%) !important;

  max-width:
    calc(100% - 120px) !important;

  text-align:center !important;
}



/* ==========================================================
   V47 - SETE IDIOMAS
   ========================================================== */

#screen-language main{
  overflow-y:auto;
  scrollbar-width:none;
}

#screen-language main::-webkit-scrollbar{
  display:none;
}

#screen-language .options{
  padding-bottom:12px;
}

#screen-language .option{
  flex:0 0 auto;
}



/* ==========================================================
   V47.1 - ECRÃ DE IDIOMAS SEM SCROLL
   ========================================================== */

#screen-language{
  overflow:hidden !important;
}

#screen-language main{
  overflow:hidden !important;

  padding-top:14px !important;
  padding-bottom:8px !important;
}


/* ÍCONE */

#screen-language .icon{
  font-size:34px !important;

  margin:
    4px 0 8px !important;
}


/* TÍTULO */

#screen-language h2{
  margin:
    0 0 4px !important;

  font-size:22px !important;

  line-height:1.15 !important;
}


/* SUBTÍTULO */

#screen-language .subtitle{
  margin:
    0 0 14px !important;

  font-size:13px !important;

  line-height:1.25 !important;
}


/* LISTA */

#screen-language .options{
  gap:7px !important;

  padding-bottom:0 !important;
}


/* CADA IDIOMA */

#screen-language .option{
  min-height:0 !important;

  padding:
    10px 14px !important;

  border-radius:13px !important;

  line-height:1.15 !important;
}


#screen-language .option span{
  font-size:16px !important;
}


/* BOTÃO INFERIOR */

#screen-language footer{
  padding-top:10px !important;
  padding-bottom:16px !important;
}


#screen-language footer .primary{
  min-height:48px !important;
}



/* ==========================================================
   V48 - SELETOR DE 13 IDIOMAS
   ========================================================== */

#screen-language main{
  padding-top:12px !important;
}

#screen-language .icon{
  margin:2px 0 6px !important;
  font-size:30px !important;
}

#screen-language h2{
  font-size:20px !important;
  margin-bottom:3px !important;
}

#screen-language .subtitle{
  margin-bottom:11px !important;
  font-size:12px !important;
}


/* GRELHA */

#screen-language .options{
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:7px !important;
}


/* BOTÕES */

#screen-language .option{
  width:100% !important;

  min-width:0 !important;

  padding:
    10px 10px !important;

  gap:8px !important;

  border-radius:12px !important;

  font-size:12px !important;

  white-space:nowrap !important;
}


/* bandeira/código */

#screen-language .option span{
  font-size:14px !important;

  flex:
    0 0 auto !important;
}


/* check */

#screen-language .option b{
  margin-left:auto !important;

  flex:
    0 0 auto !important;
}


/* último idioma sozinho */

#screen-language .option:last-child{
  grid-column:
    1 / -1;

  width:
    calc(50% - 3.5px) !important;
}


#screen-language footer{
  padding-top:9px !important;
  padding-bottom:14px !important;
}



/* ==========================================================
   V49.1 - 14 IDIOMAS / 7 + 7
   ========================================================== */

#screen-language .option:last-child{
  grid-column:auto !important;
  width:100% !important;
}



/* ==========================================================
   V49.2 - MAIS ESPAÇO ANTES DOS IDIOMAS
   ========================================================== */

#screen-language .options{
  margin-top:12px !important;
}



/* ==========================================================
   V49.3 - DESCER REALMENTE A GRELHA DE IDIOMAS
   ========================================================== */

#screen-language .options{
  margin-top:0 !important;
  position:relative !important;
  top:24px !important;
}



/* ==========================================================
   V49.4 - SOLICITAR IDIOMA
   ========================================================== */

#screen-language .request-language-btn{
  position:relative;
  top:34px;

  display:block;

  width:100%;

  padding:10px 14px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:12px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.72);

  font-size:12px;
  font-weight:600;

  text-align:center;

  cursor:pointer;
}

#screen-language .request-language-btn:hover{
  background:
    rgba(255,255,255,.07);

  color:white;
}


/* V49.5 - afastar Solicitar idioma */
#screen-language .request-language-btn{
  top:48px !important;
}



/* ==========================================================
   V49.6 - SOLICITAR IDIOMA
   ========================================================== */

/* afastar mais da grelha */
#screen-language .request-language-btn{
  top:62px !important;
}


/* MODAL */

.language-request-modal{
  position:fixed;
  inset:0;
  z-index:500;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}


.language-request-modal.open{
  opacity:1;
  visibility:visible;
}


.language-request-backdrop{
  position:absolute;
  inset:0;

  background:
    rgba(0,0,0,.72);

  backdrop-filter:
    blur(3px);
}


.language-request-card{
  position:relative;
  z-index:1;

  width:min(330px,100%);

  padding:
    28px 20px 20px;

  border:
    1px solid rgba(255,255,255,.12);

  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #0b2c22 0%,
      #071c16 100%
    );

  box-shadow:
    0 24px 70px rgba(0,0,0,.5);

  color:white;

  text-align:center;
}


.language-request-close{
  position:absolute;

  top:12px;
  right:12px;

  width:34px;
  height:34px;

  border:0;
  border-radius:50%;

  background:
    rgba(255,255,255,.07);

  color:white;

  font-size:22px;
}


.language-request-icon{
  margin-bottom:10px;

  font-size:30px;
}


.language-request-card h3{
  margin:
    0 0 7px;

  font-size:20px;
}


.language-request-card p{
  margin:
    0 0 18px;

  color:
    rgba(255,255,255,.62);

  font-size:13px;

  line-height:1.45;
}


.language-request-card input{
  box-sizing:border-box;

  width:100%;

  margin-bottom:12px;

  padding:
    14px 15px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:12px;

  outline:none;

  background:
    rgba(255,255,255,.06);

  color:white;

  font-size:14px;
}


.language-request-card input:focus{
  border-color:
    rgba(80,215,110,.7);
}


.language-request-submit{
  width:100%;

  padding:
    13px 15px;

  border:0;
  border-radius:12px;

  background:
    #4fd36b;

  color:
    #062113;

  font-weight:800;

  font-size:12px;
}


.language-request-note{
  display:block;

  min-height:18px;

  margin-top:10px;

  color:
    rgba(255,255,255,.6);

  font-size:11px;
}


/* V50.7 - centrar botão inicial */
#screen-welcome .primary{
  justify-content:center !important;
  text-align:center !important;
}

#screen-welcome #ui-welcome-start{
  margin:0 !important;
}


/* V50.7 - centrar botão inicial */
#screen-welcome .primary{
  justify-content:center !important;
  text-align:center !important;
}

#screen-welcome #ui-welcome-start{
  margin:0 !important;
}



/* ==========================================================
   V50.8 - CORRIGIR POSIÇÃO DO INICIAR APÓS REMOVER SETA
   ========================================================== */

#screen-welcome .primary > #ui-welcome-start{
  position:static !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;

  display:block !important;
  width:100% !important;

  margin:0 !important;

  text-align:center !important;

  float:none !important;
}



/* ==========================================================
   V51.1 - FEITO COM CARINHO POR PESSOAS LOCAIS
   ========================================================== */

#screen-welcome .native-note{
  margin-top:11px;

  color:rgba(255,255,255,.70);

  font-size:11px;
  font-weight:500;

  line-height:1.3;
  text-align:center;
}



/* ==========================================================
   V51.2 - RODAPÉ DA ABERTURA
   ========================================================== */

#screen-welcome .version-note{
  margin-top:26px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;

  color:rgba(255,255,255,.42);

  font-size:9px;
  font-weight:500;
  line-height:1.3;

  letter-spacing:.04em;

  text-align:center;
}

#screen-welcome .version-note span:last-child{
  font-size:8px;
  color:rgba(255,255,255,.30);
}


/* V51.3 - descer versão/copyright */
#screen-welcome .version-note{
  margin-top:42px !important;
}



/* ==========================================================
   V51.2 - WORDMARK SVG MADEIRA
   ========================================================== */

#screen-welcome .welcome-brand-svg{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:16px 0 16px;
}

#screen-welcome .welcome-wordmark{
  width:min(72vw, 260px);
  max-width:260px;
  height:auto;
  display:block;
}

#screen-welcome .welcome-subbrand{
  font-size:20px;
  line-height:1;
  font-weight:700;
  letter-spacing:.28em;
  color:#fff;
  text-align:center;
}

#screen-welcome h1,
#screen-welcome h2{
  display:none !important;
}


/* ==========================================================
   V52 - EXPLORAR MADEIRA
   ========================================================== */

.roadguide-explore-entry{
  width:100%;
  margin:4px 0 8px;
  padding:14px 12px;

  display:flex;
  align-items:center;
  gap:12px;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);

  background:transparent;
  color:#fff;

  text-align:left;
  cursor:pointer;
}

.roadguide-explore-entry-icon{
  width:28px;
  font-size:19px;
  text-align:center;
}

.roadguide-explore-entry-copy{
  flex:1;

  display:flex;
  flex-direction:column;
  gap:3px;
}

.roadguide-explore-entry-copy strong{
  font-size:14px;
}

.roadguide-explore-entry-copy small{
  color:rgba(255,255,255,.52);
  font-size:11px;
}

.roadguide-explore-entry-arrow{
  color:rgba(255,255,255,.45);
  font-size:18px;
}


/* cabeçalho interno */

.roadguide-explore-header{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:15px;
}

.roadguide-explore-back{
  width:34px;
  height:34px;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.07);
  color:#fff;

  font-size:22px;
}

.roadguide-explore-header strong{
  font-size:16px;
}


/* lista */

.roadguide-territory-list{
  display:flex;
  flex-direction:column;
}

.roadguide-territory-row{
  width:100%;

  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 3px;

  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);

  background:transparent;
  color:#fff;

  text-align:left;
}

.roadguide-territory-row-copy{
  flex:1;

  display:flex;
  flex-direction:column;
  gap:3px;
}

.roadguide-territory-row-copy strong{
  font-size:14px;
}

.roadguide-territory-row-copy small{
  color:rgba(255,255,255,.48);
  font-size:11px;
}

.roadguide-territory-arrow{
  color:rgba(255,255,255,.38);
}


/* freguesia */

.roadguide-parish-placeholder{
  margin-top:18px;
  padding:14px;

  border:1px solid rgba(85,207,120,.16);
  border-radius:13px;

  background:rgba(85,207,120,.05);

  color:rgba(255,255,255,.58);

  font-size:12px;
  line-height:1.5;
}



/* ==========================================================
   V53 - CONTEÚDO TERRITORIAL
   ========================================================== */

.roadguide-territory-about{
  margin:4px 0 22px;
  padding:15px;

  border:1px solid rgba(85,207,120,.16);
  border-radius:14px;

  background:
    rgba(85,207,120,.045);
}

.roadguide-territory-kicker{
  display:block;

  margin-bottom:7px;

  color:#55cf78;

  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.roadguide-territory-about p{
  margin:0;

  color:rgba(255,255,255,.72);

  font-size:12px;
  line-height:1.55;
}


.roadguide-territory-section{
  margin-top:8px;
}

.roadguide-territory-section h3{
  margin:
    0
    0
    10px;

  color:rgba(255,255,255,.48);

  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}


.roadguide-territory-content-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}


.roadguide-territory-content-card{
  width:100%;

  display:flex;
  align-items:center;
  gap:12px;

  padding:13px 14px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:13px;

  background:
    rgba(255,255,255,.025);

  color:#fff;

  text-align:left;
}


.roadguide-territory-content-card div{
  flex:1;
}


.roadguide-territory-content-card strong{
  display:block;

  margin-bottom:4px;

  font-size:13px;
}


.roadguide-territory-content-card p{
  margin:0;

  color:
    rgba(255,255,255,.48);

  font-size:10.5px;
  line-height:1.4;
}


.roadguide-territory-content-card > span{
  color:
    rgba(255,255,255,.35);

  font-size:18px;
}


/* scrollbar integrada no design */

.roadguide-menu-body{
  scrollbar-width:thin;
  scrollbar-color:
    rgba(85,207,120,.32)
    transparent;
}

.roadguide-menu-body::-webkit-scrollbar{
  width:4px;
}

.roadguide-menu-body::-webkit-scrollbar-track{
  background:transparent;
}

.roadguide-menu-body::-webkit-scrollbar-thumb{
  background:
    rgba(85,207,120,.30);

  border-radius:999px;
}



/* ==========================================================
   V53.1 - PORTO SANTO
   ========================================================== */

.roadguide-ps-hero{
  margin:2px 0 18px;
  padding:16px;

  border:1px solid rgba(85,207,120,.16);
  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      rgba(85,207,120,.075),
      rgba(255,255,255,.018)
    );
}

.roadguide-ps-island{
  margin-bottom:10px;
  font-size:27px;
}

.roadguide-ps-hero p{
  margin:0;

  color:rgba(255,255,255,.68);

  font-size:11.5px;
  line-height:1.55;
}


.roadguide-ps-travel{
  display:flex;
  flex-direction:column;
  gap:9px;
}


.roadguide-ps-card{
  display:flex;
  gap:12px;

  padding:14px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:14px;

  background:
    rgba(255,255,255,.025);
}


.roadguide-ps-icon{
  width:30px;

  padding-top:1px;

  font-size:21px;
  text-align:center;
}


.roadguide-ps-copy{
  flex:1;
  min-width:0;
}


.roadguide-ps-copy strong{
  display:block;

  margin-bottom:3px;

  color:#fff;
  font-size:12.5px;
}


.roadguide-ps-copy small{
  display:block;

  margin-bottom:10px;

  color:rgba(255,255,255,.45);

  font-size:10px;
}


.roadguide-ps-copy a{
  display:inline-flex;
  align-items:center;
  gap:6px;

  color:#55cf78;

  font-size:9.5px;
  font-weight:800;
  letter-spacing:.055em;

  text-decoration:none;
}


.roadguide-ps-explore{
  margin-top:20px;
  padding-top:17px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.roadguide-ps-explore p{
  margin:
    0
    0
    12px;

  color:
    rgba(255,255,255,.48);

  font-size:10.5px;
  line-height:1.45;
}


.roadguide-ps-explore button{
  width:100%;

  padding:13px 12px;

  border:0;
  border-radius:12px;

  background:#55cf78;

  color:#092018;

  font-size:10.5px;
  font-weight:900;
  letter-spacing:.055em;

  cursor:pointer;
}



/* ==========================================================
   V54.2 - LOCALIZAÇÃO ATUAL
   ========================================================== */

.roadguide-current-location-v542{
  margin:
    5px
    0
    12px;

  padding:
    12px
    12px
    11px;

  border:
    1px solid
    rgba(85,207,120,.19);

  border-radius:13px;

  background:
    rgba(85,207,120,.045);
}


.roadguide-current-location-v542 > small{
  display:block;

  margin-bottom:7px;

  color:
    rgba(255,255,255,.42);

  font-size:8.5px;
  font-weight:800;

  letter-spacing:.12em;
}


.roadguide-current-location-button{
  width:100%;

  display:flex;
  align-items:center;
  gap:10px;

  padding:0;

  border:0;
  background:transparent;

  color:#fff;

  text-align:left;
}


.roadguide-current-location-pin{
  width:24px;

  color:#55cf78;

  font-size:19px;
  text-align:center;
}


.roadguide-current-location-copy{
  flex:1;

  display:flex;
  flex-direction:column;
  gap:2px;
}


.roadguide-current-location-copy strong{
  font-size:13px;
}


.roadguide-current-location-copy span{
  color:
    rgba(255,255,255,.48);

  font-size:10px;
}


.roadguide-current-location-arrow{
  color:
    rgba(255,255,255,.35);

  font-size:18px;
}


.roadguide-current-location-waiting{
  display:flex;
  align-items:center;
  gap:8px;

  color:
    rgba(255,255,255,.52);

  font-size:10.5px;
}


.roadguide-current-location-waiting span{
  color:#55cf78;

  font-size:17px;
}



/* ==========================================================
   V54.3A - LOCALIZAÇÃO
   ========================================================== */

#screen-location main{
  padding-top:42px;
}


.roadguide-location-v543{
  justify-content:flex-start;
}


.roadguide-location-icon-v543{
  width:72px;
  height:72px;

  margin:
    10px
    auto
    24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(85,207,120,.34);

  border-radius:50%;

  background:
    rgba(85,207,120,.055);

  color:#55cf78;

  font-size:34px;
}


#screen-location h2{
  margin-bottom:10px;
}


#screen-location .subtitle{
  max-width:280px;

  margin-left:auto;
  margin-right:auto;

  line-height:1.55;
}


.roadguide-location-result-v543{
  width:100%;

  margin-top:25px;
  padding:16px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(85,207,120,.22);

  border-radius:14px;

  background:
    rgba(85,207,120,.055);

  text-align:left;
}


.roadguide-location-result-v543 small{
  display:block;

  margin-bottom:8px;

  color:#55cf78;

  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}


.roadguide-location-result-v543 strong{
  display:block;

  margin-bottom:3px;

  color:#fff;

  font-size:17px;
}


.roadguide-location-result-v543 span{
  display:block;

  color:
    rgba(255,255,255,.55);

  font-size:11px;
}


.roadguide-location-result-v543 em{
  display:block;

  margin-top:10px;

  color:#55cf78;

  font-size:11px;
  font-style:normal;
  font-weight:700;
}


.roadguide-location-error-v543{
  width:100%;

  margin-top:22px;
  padding:13px;

  box-sizing:border-box;

  border:
    1px solid
    rgba(255,120,120,.18);

  border-radius:12px;

  background:
    rgba(255,80,80,.045);

  color:
    rgba(255,255,255,.68);

  font-size:11px;
  line-height:1.5;
}


.roadguide-location-privacy-v543{
  max-width:270px;

  margin:
    22px
    auto
    0;

  color:
    rgba(255,255,255,.32);

  font-size:9px;
  line-height:1.5;
}


#roadguide-location-enable-v543:disabled{
  opacity:.65;
  cursor:default;
}



/* ==========================================================
   V54.3B - GUIA AUTOMÁTICO / ESTADO DE ESPERA
   ========================================================== */


/* sem história = sem imagem antiga */

#screen-journey.roadguide-territorial-idle-v543b
.place-image{
  display:none !important;
}


/* sem áudio = sem timeline */

#screen-journey.roadguide-territorial-idle-v543b
.timeline{
  display:none !important;
}


/* sem áudio = sem rewind/pause/forward */

#screen-journey.roadguide-territorial-idle-v543b
.controls{
  display:none !important;
}


/* mais espaço para o estado automático */

#screen-journey.roadguide-territorial-idle-v543b
.player-area{
  padding-top:34px;
}


/* GPS ativo */

.roadguide-auto-status-v543b{
  display:none;

  width:max-content;

  margin:
    0
    0
    22px;

  padding:
    7px
    10px;

  align-items:center;
  gap:6px;

  border:
    1px solid
    rgba(85,207,120,.20);

  border-radius:999px;

  background:
    rgba(85,207,120,.055);

  color:#55cf78;

  font-size:8.5px;
  letter-spacing:.08em;
}


#screen-journey.roadguide-territorial-idle-v543b
.roadguide-auto-status-v543b{
  display:inline-flex;
}


.roadguide-auto-status-v543b span{
  font-size:13px;
}


.roadguide-auto-status-v543b strong{
  font-size:8.5px;
}


/* título do estado */

#screen-journey.roadguide-territorial-idle-v543b
.now-playing{
  margin-bottom:15px;
}


#screen-journey.roadguide-territorial-idle-v543b
.now-playing .wave{
  color:#55cf78;
}


/* texto mais respirado */

#screen-journey.roadguide-territorial-idle-v543b
#place-copy{
  max-width:290px;

  line-height:1.6;

  color:
    rgba(255,255,255,.68);
}


/* próximo local */

#screen-journey.roadguide-territorial-idle-v543b
.next-card{
  margin-top:34px;
}


/* topo com localização */

#screen-journey.roadguide-territorial-idle-v543b
> header > div{
  max-width:210px;
}


#screen-journey.roadguide-territorial-idle-v543b
> header > div > strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* ==========================================================
   V55 - CONTEÚDO EDITORIAL AUTOMÁTICO
   ========================================================== */

#screen-journey:not(.roadguide-territorial-idle-v543b)
.player-area{
  transition:
    padding .25s ease;
}


/*
 * Ao regressar do modo idle,
 * a imagem volta a ocupar o espaço normal.
 */

#screen-journey:not(.roadguide-territorial-idle-v543b)
.place-image{
  display:block;
}


/*
 * Media territorial sem vídeo manual
 * nesta primeira fase do motor editorial.
 */

#screen-journey:not(.roadguide-territorial-idle-v543b)
#place-photo{
  object-fit:cover;
}



/* ==========================================================
   V55.2 - LEGENDAS EDITORIAIS SINCRONIZADAS
   ========================================================== */

.roadguide-editorial-sentence-v552{
  color:
    rgba(255,255,255,.48);

  font:inherit;
  font-size:inherit;
  line-height:inherit;

  font-weight:400;

  transition:
    color .18s ease,
    font-weight .18s ease;
}


.roadguide-editorial-sentence-v552.is-active{
  color:#fff;
  font-weight:700;
}


/*
 * Não alterar tamanho da frase ativa.
 * Apenas cor + peso.
 */

#screen-journey:not(.roadguide-territorial-idle-v543b)
#place-copy{
  max-height:96px;
  overflow-y:auto;

  scroll-behavior:smooth;
  scrollbar-width:none;
}


#screen-journey:not(.roadguide-territorial-idle-v543b)
#place-copy::-webkit-scrollbar{
  display:none;
}



/* ==========================================================
   V55.3 - LEGENDAS / SCROLL CORRIGIDO
   ========================================================== */

#screen-journey
.roadguide-editorial-sentence-v552{
  color:
    rgba(255,255,255,.38) !important;

  font-size:inherit !important;
  line-height:inherit !important;

  font-weight:400 !important;
}


#screen-journey
.roadguide-editorial-sentence-v552.is-active{
  color:#ffffff !important;
  font-weight:700 !important;
}


#screen-journey:not(.roadguide-territorial-idle-v543b)
#place-copy{
  scroll-padding-top:24px;
  scroll-padding-bottom:24px;
}



/* ==========================================================
   V56.1 - BLOQUEIO DE ORIENTAÇÃO
   ========================================================== */

.roadguide-portrait-lock-v561{
  display:none;
}


/*
 * Fallback para smartphones onde o browser
 * não permite bloquear fisicamente a rotação,
 * nomeadamente Safari/iPhone.
 */

@media
  (orientation: landscape)
  and (max-height: 600px)
  and (hover: none){

  .roadguide-portrait-lock-v561{

    position:fixed;
    inset:0;

    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;

    background:
      linear-gradient(
        160deg,
        #103e31 0%,
        #061c15 48%,
        #020b08 100%
      );

    color:#fff;

    text-align:center;
  }


  .roadguide-portrait-lock-inner-v561{

    width:min(
      320px,
      90vw
    );

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;
  }


  .roadguide-portrait-phone-v561{

    width:58px;
    height:78px;

    margin-bottom:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
      2px solid
      #55cf78;

    border-radius:12px;

    color:#55cf78;

    font-size:27px;
    font-weight:700;
  }


  .roadguide-portrait-lock-v561 strong{

    font-size:20px;
    line-height:1.2;
  }


  .roadguide-portrait-lock-v561 span{

    max-width:260px;

    color:
      rgba(255,255,255,.66);

    font-size:12px;
    line-height:1.5;
  }

}


/* ==========================================================
   V58 - LAYOUT FLUIDO PELO VIEWPORT
   ========================================================== */

/*
 * PRINCÍPIO:
 *
 * O viewport define o espaço total.
 * Nenhum ecrã é dimensionado para um modelo específico.
 *
 * header / footer     -> tamanho necessário
 * conteúdo            -> espaço restante
 * player media        -> flexível
 * legendas            -> absorvem espaço restante
 *
 * Scroll global       -> não
 * Scroll de legendas  -> sim
 * Scroll de listas    -> apenas quando necessário
 */


/* ==========================================================
   1. VIEWPORT / APP
   ========================================================== */

html,
body{

  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  margin:0;

  overflow:hidden;

}


@supports (height:100dvh){

  html,
  body{

    height:100dvh;

  }

}


@media (max-width:699px){

  body{

    padding:0 !important;

    align-items:stretch;

  }


  #app{

    width:100% !important;
    max-width:none !important;

    height:100vh !important;
    min-height:0 !important;
    max-height:100vh !important;

    overflow:hidden !important;

    border-radius:0 !important;

  }


  @supports (height:100dvh){

    #app{

      height:100dvh !important;
      max-height:100dvh !important;

    }

  }


  /*
   * O screen é sempre exatamente o tamanho
   * disponível dentro da aplicação.
   */
  #app .screen{

    width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    overflow:hidden !important;

    flex-direction:column;

  }


  #app .screen.active{

    display:flex;

  }

}


/* ==========================================================
   2. CABEÇALHOS / FOOTERS
   ========================================================== */

@media (max-width:699px){

  #app .screen > header{

    flex:
      0
      0
      auto;

    min-height:0;

    padding:
      calc(
        clamp(
          9px,
          1.8dvh,
          14px
        )
        +
        env(safe-area-inset-top)
      )
      clamp(
        15px,
        5vw,
        20px
      )
      clamp(
        9px,
        1.8dvh,
        14px
      );

  }


  #app .screen > footer{

    flex:
      0
      0
      auto;

    padding:
      clamp(
        10px,
        2dvh,
        18px
      )
      clamp(
        16px,
        6vw,
        24px
      )
      calc(
        clamp(
          10px,
          2dvh,
          20px
        )
        +
        env(safe-area-inset-bottom)
      );

  }

}


/* ==========================================================
   3. ECRÃS NORMAIS
   idioma / localização / pausa / etc.
   ========================================================== */

@media (max-width:699px){

  #app
  .screen:not(#screen-welcome):not(#screen-journey)
  > main{

    flex:
      1
      1
      auto;

    min-height:0;

    padding:
      clamp(
        14px,
        3.5dvh,
        30px
      )
      clamp(
        16px,
        6vw,
        24px
      );

    overflow-x:hidden;

    /*
     * Se uma lista realmente for maior
     * que o espaço disponível,
     * só o conteúdo central desliza.
     */
    overflow-y:auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;

  }

}


/* ==========================================================
   4. ABERTURA
   ========================================================== */

@media (max-width:699px){

  #screen-welcome{

    height:100% !important;
    min-height:0 !important;

    overflow:hidden !important;

  }


  #screen-welcome .hero{

    width:100% !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    overflow:hidden !important;

  }


  /*
   * Apenas componentes que podem crescer demasiado
   * recebem dimensões fluidas.
   *
   * Não alteramos o desenho/wordmark aprovado.
   */
  #screen-welcome .logo-mark{

    width:
      clamp(
        72px,
        13dvh,
        104px
      ) !important;

    height:
      clamp(
        72px,
        13dvh,
        104px
      ) !important;

    margin-bottom:
      clamp(
        8px,
        2dvh,
        18px
      ) !important;

  }

}


/* ==========================================================
   5. PLAYER TERRITORIAL
   ========================================================== */

@media (max-width:699px){

  #screen-journey{

    height:100% !important;
    min-height:0 !important;

    overflow:hidden !important;

  }


  #screen-journey > header{

    flex:
      0
      0
      auto;

  }


  /*
   * A imagem não tem uma altura absoluta.
   *
   * Cresce em ecrãs altos e encolhe
   * naturalmente quando falta altura.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .place-image{

    flex:
      1
      1
      clamp(
        105px,
        25dvh,
        230px
      );

    height:auto !important;

    min-height:
      92px !important;

    max-height:
      230px !important;

  }


  /*
   * O player fica com a outra parte
   * do viewport.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .player-area{

    flex:
      1
      1
      0;

    min-height:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    padding:

      clamp(
        7px,
        1.8dvh,
        21px
      )

      clamp(
        16px,
        6vw,
        24px
      )

      calc(
        clamp(
          5px,
          1dvh,
          12px
        )
        +
        env(safe-area-inset-bottom)
      );

  }


  /*
   * Título não encolhe.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .now-playing{

    flex:
      0
      0
      auto;

    margin-bottom:
      clamp(
        4px,
        .9dvh,
        10px
      );

    font-size:
      clamp(
        17px,
        2.8dvh,
        20px
      );

  }


  /*
   * O TEXTO É O ELEMENTO ELÁSTICO.
   *
   * Não recebe 76px, 120px, 165px, 210px...
   *
   * Recebe simplesmente tudo o que sobrar
   * entre o título e os controlos.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy{

    flex:
      1
      1
      auto;

    height:auto !important;

    min-height:
      54px !important;

    max-height:
      none !important;

    margin:
      clamp(
        5px,
        1.2dvh,
        13px
      )
      0
      clamp(
        5px,
        1.3dvh,
        18px
      );

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain;

    scroll-behavior:
      smooth;

    scroll-padding-top:
      24px !important;

    scroll-padding-bottom:
      24px !important;

    scrollbar-width:
      none;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy::-webkit-scrollbar{

    display:none;

  }


  .roadguide-editorial-sentence-v552{

    font-size:
      inherit !important;

    line-height:
      inherit !important;

  }


  /*
   * Timeline sempre visível.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .timeline{

    flex:
      0
      0
      auto;

  }


  /*
   * Controlos reduzem progressivamente,
   * sem breakpoint de altura.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls{

    flex:
      0
      0
      auto;

    gap:
      clamp(
        18px,
        8vw,
        32px
      );

    margin:
      clamp(
        7px,
        2dvh,
        25px
      )
      0;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls button{

    width:
      clamp(
        44px,
        7dvh,
        54px
      );

    height:
      clamp(
        44px,
        7dvh,
        54px
      );

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls .pause-main{

    width:
      clamp(
        58px,
        9dvh,
        72px
      );

    height:
      clamp(
        58px,
        9dvh,
        72px
      );

    font-size:
      clamp(
        23px,
        3.6dvh,
        28px
      );

  }


  /*
   * NEXT é sempre um elemento real do layout.
   * Nunca fica escondido pelo overflow.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .next-card{

    flex:
      0
      0
      auto;

    margin-top:
      clamp(
        3px,
        .8dvh,
        10px
      );

    padding:
      clamp(
        9px,
        1.6dvh,
        13px
      )
      clamp(
        11px,
        4vw,
        15px
      );

  }

}


/* ==========================================================
   6. GUIA EM ESPERA
   ========================================================== */

@media (max-width:699px){

  #screen-journey.roadguide-territorial-idle-v543b
  .player-area{

    flex:
      1
      1
      auto;

    min-height:0;

    overflow-y:auto;

    padding:
      clamp(
        20px,
        5dvh,
        34px
      )
      clamp(
        16px,
        6vw,
        24px
      )
      calc(
        16px
        +
        env(safe-area-inset-bottom)
      );

  }


  #screen-journey.roadguide-territorial-idle-v543b
  .next-card{

    margin-top:
      clamp(
        20px,
        5dvh,
        34px
      );

  }

}


/* ==========================================================
   7. DESKTOP
   preservar o frame móvel aprovado
   ========================================================== */

@media (min-width:700px){

  #app{

    height:
      min(
        760px,
        calc(100dvh - 48px)
      ) !important;

    min-height:0 !important;

  }


  #app .screen{

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

  }


  #screen-welcome .hero{

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

  }

}



/* ==========================================================
   V58.1 - TEXTO COMO PRIORIDADE DO PLAYER
   ========================================================== */

@media (max-width:699px){

  /*
   * 1. MEDIA
   *
   * Continua presente, mas deixa de competir
   * com o conteúdo principal.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .place-image{

    flex:
      0
      1
      clamp(
        82px,
        19dvh,
        165px
      ) !important;

    height:auto !important;

    min-height:
      82px !important;

    max-height:
      165px !important;

  }


  /*
   * 2. PLAYER
   *
   * Recebe todo o espaço que sobra.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .player-area{

    flex:
      1
      1
      auto !important;

    min-height:0 !important;

    padding:
      clamp(
        6px,
        1.2dvh,
        12px
      )
      clamp(
        15px,
        5.5vw,
        22px
      )
      calc(
        clamp(
          5px,
          .8dvh,
          9px
        )
        +
        env(safe-area-inset-bottom)
      ) !important;

  }


  /*
   * 3. TÍTULO
   *
   * Compacto, mas sem perder legibilidade.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .now-playing{

    flex:
      0
      0
      auto;

    margin-bottom:
      clamp(
        3px,
        .6dvh,
        7px
      ) !important;

    font-size:
      clamp(
        17px,
        2.4dvh,
        19px
      ) !important;

  }


  /*
   * 4. TEXTO / LEGENDAS
   *
   * É agora o elemento prioritário.
   * Absorve todo o espaço disponível.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy{

    flex:
      1
      1
      auto !important;

    height:auto !important;

    min-height:
      96px !important;

    max-height:
      none !important;

    margin:
      clamp(
        3px,
        .6dvh,
        7px
      )
      0
      clamp(
        4px,
        .8dvh,
        9px
      ) !important;

    overflow-y:
      auto !important;

    scroll-padding-top:
      22px !important;

    scroll-padding-bottom:
      22px !important;

  }


  /*
   * Não reduzimos a letra das legendas.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy,
  #screen-journey
  .roadguide-editorial-sentence-v552{

    font-size:
      inherit !important;

    line-height:
      inherit !important;

  }


  /*
   * 5. TIMELINE
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .timeline{

    flex:
      0
      0
      auto;

    margin-top:
      2px !important;

  }


  /*
   * 6. CONTROLOS
   *
   * Continuam confortáveis para toque,
   * mas deixam de dominar o ecrã.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls{

    flex:
      0
      0
      auto;

    gap:
      clamp(
        14px,
        6vw,
        24px
      ) !important;

    margin:
      clamp(
        5px,
        1.2dvh,
        10px
      )
      0 !important;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls button{

    width:
      clamp(
        40px,
        6.2dvh,
        48px
      ) !important;

    height:
      clamp(
        40px,
        6.2dvh,
        48px
      ) !important;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls .pause-main{

    width:
      clamp(
        52px,
        7.8dvh,
        60px
      ) !important;

    height:
      clamp(
        52px,
        7.8dvh,
        60px
      ) !important;

    font-size:
      clamp(
        21px,
        3dvh,
        25px
      ) !important;

  }


  /*
   * 7. NEXT
   *
   * Sempre visível, mas mais compacto.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .next-card{

    flex:
      0
      0
      auto;

    margin-top:
      2px !important;

    padding:
      clamp(
        7px,
        1.1dvh,
        10px
      )
      clamp(
        10px,
        3.5vw,
        14px
      ) !important;

  }

}



/* ==========================================================
   V58.2 - EQUILÍBRIO MEDIA / TEXTO
   ========================================================== */

@media (max-width:699px){

  /*
   * A imagem mantém presença visual real.
   *
   * 568 px  -> ~131 px
   * 700 px  -> ~161 px
   * 844 px  -> máximo 185 px
   *
   * Não permitimos que o flex a esmague
   * até uma simples faixa.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .place-image{

    flex:
      0
      0
      clamp(
        110px,
        23dvh,
        185px
      ) !important;

    height:
      clamp(
        110px,
        23dvh,
        185px
      ) !important;

    min-height:
      110px !important;

    max-height:
      185px !important;

  }


  /*
   * O player continua a receber
   * todo o espaço restante.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .player-area{

    flex:
      1
      1
      auto !important;

    min-height:
      0 !important;

  }


  /*
   * Texto continua prioritário,
   * mas pode ceder espaço à imagem
   * quando o viewport é pequeno.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy{

    flex:
      1
      1
      auto !important;

    height:
      auto !important;

    min-height:
      72px !important;

    max-height:
      none !important;

  }


  /*
   * Controlos continuam compactos.
   * Não voltamos aos círculos grandes
   * da versão inicial.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls button{

    width:
      clamp(
        42px,
        6.4dvh,
        50px
      ) !important;

    height:
      clamp(
        42px,
        6.4dvh,
        50px
      ) !important;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls .pause-main{

    width:
      clamp(
        54px,
        8dvh,
        62px
      ) !important;

    height:
      clamp(
        54px,
        8dvh,
        62px
      ) !important;

  }

}



/* ==========================================================
   V58.3 - IDIOMAS ADAPTADOS AO ESPAÇO DISPONÍVEL
   ========================================================== */

/*
 * O próprio espaço útil do MAIN determina
 * se usamos 2 ou 3 colunas.
 */
#screen-language main{

  container-type:
    size;

  container-name:
    roadguide-language-space;

}


/*
 * ESTADO NORMAL:
 * 2 colunas.
 */
#screen-language .options{

  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

}


/*
 * ECRÃ COM POUCO ESPAÇO VERTICAL:
 * passar automaticamente para 3 colunas.
 *
 * Não depende do modelo do telefone.
 * Depende da altura realmente disponível
 * dentro do conteúdo do ecrã.
 */
@container roadguide-language-space
  (max-height:430px){

  #screen-language .options{

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    gap:
      6px !important;

    position:static !important;

    top:auto !important;

    margin-top:
      7px !important;

  }


  #screen-language .option{

    width:
      100% !important;

    min-width:
      0 !important;

    padding:
      8px
      16px
      8px
      7px !important;

    gap:
      3px !important;

    font-size:
      10px !important;

    border-radius:
      10px !important;

  }


  #screen-language .option span{

    font-size:
      10px !important;

  }


  #screen-language .option.selected::after{

    right:
      4px !important;

    font-size:
      13px !important;

  }


  /*
   * Eliminar os antigos deslocamentos
   * V49.3 / V49.6 que roubavam espaço.
   */
  #screen-language .request-language-btn{

    position:static !important;

    top:auto !important;

    margin-top:
      7px !important;

    padding:
      7px 10px !important;

    font-size:
      10px !important;

  }


  #screen-language .icon{

    margin:
      0
      0
      3px !important;

    font-size:
      25px !important;

  }


  #screen-language h2{

    margin-bottom:
      2px !important;

    font-size:
      18px !important;

  }


  #screen-language .subtitle{

    margin-bottom:
      5px !important;

    font-size:
      10.5px !important;

  }

}


/*
 * Segurança:
 * o footer nunca é sacrificado.
 */
#screen-language footer{

  flex:
    0
    0
    auto;

}



/* ==========================================================
   V58.4 - EQUILÍBRIO RESPONSIVO DO PLAYER
   ========================================================== */

@media (max-width:699px){


  /*
   * IMAGEM
   *
   * Cresce com o ecrã, mas com limite.
   *
   * 451px -> ~122px
   * 568px -> ~153px
   * 797px -> ~215px
   * >815px -> máximo 220px
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .place-image{

    flex:
      0
      0
      clamp(
        120px,
        27dvh,
        220px
      ) !important;

    height:
      clamp(
        120px,
        27dvh,
        220px
      ) !important;

    min-height:
      120px !important;

    max-height:
      220px !important;

  }


  /*
   * O player utiliza o espaço restante,
   * mas não entrega todo esse espaço ao texto.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .player-area{

    flex:
      1
      1
      auto !important;

    min-height:
      0 !important;

    overflow:
      hidden !important;

  }


  /*
   * TEXTO / LEGENDAS
   *
   * Continua a ter prioridade editorial,
   * mas deixa de crescer indefinidamente.
   *
   * 451px -> ~108px
   * 568px -> ~136px
   * 797px -> ~191px
   * máximo -> 195px
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy{

    flex:
      0
      0
      clamp(
        100px,
        24dvh,
        195px
      ) !important;

    height:
      clamp(
        100px,
        24dvh,
        195px
      ) !important;

    min-height:
      100px !important;

    max-height:
      195px !important;

    overflow-y:
      auto !important;

    overflow-x:
      hidden !important;

  }


  /*
   * CONTROLADORES
   *
   * Legíveis e fáceis de tocar,
   * sem dominarem o player.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls{

    flex:
      0
      0
      auto !important;

    margin:
      clamp(
        4px,
        .9dvh,
        8px
      )
      0 !important;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls button{

    width:
      clamp(
        40px,
        6dvh,
        48px
      ) !important;

    height:
      clamp(
        40px,
        6dvh,
        48px
      ) !important;

  }


  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .controls .pause-main{

    width:
      clamp(
        50px,
        7dvh,
        58px
      ) !important;

    height:
      clamp(
        50px,
        7dvh,
        58px
      ) !important;

  }


  /*
   * O NEXT não cresce e fica no fundo.
   * O espaço adicional de ecrãs altos
   * transforma-se em respiração visual.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .next-card{

    flex:
      0
      0
      auto !important;

    margin-top:
      auto !important;

  }

}



/* ==========================================================
   V58.5 - DISTRIBUIÇÃO VERTICAL DO PLAYER
   ========================================================== */

@media (max-width:699px){

  /*
   * O espaço extra de ecrãs altos não deve
   * transformar-se num vazio antes do NEXT.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .next-card{

    margin-top:
      clamp(
        8px,
        1.8dvh,
        16px
      ) !important;

  }


  /*
   * Em ecrãs altos podemos deixar a imagem
   * respirar um pouco mais, mas sempre com limite.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .place-image{

    flex-basis:
      clamp(
        120px,
        28dvh,
        230px
      ) !important;

    height:
      clamp(
        120px,
        28dvh,
        230px
      ) !important;

    max-height:
      230px !important;

  }


  /*
   * O texto também pode aproveitar ligeiramente
   * mais espaço em ecrãs altos, sem voltar
   * a dominar a interface.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  #place-copy{

    flex-basis:
      clamp(
        100px,
        25dvh,
        205px
      ) !important;

    height:
      clamp(
        100px,
        25dvh,
        205px
      ) !important;

    max-height:
      205px !important;

  }


  /*
   * O player deixa de usar o margin:auto
   * do NEXT como depósito do espaço restante.
   */
  #screen-journey:not(.roadguide-territorial-idle-v543b)
  .player-area{

    justify-content:
      flex-start !important;

  }

}




/* ==========================================================
   V58.8 - HEADER TERRITORIAL EM 3 LINHAS
   ========================================================== */

#screen-journey > header{

  display:grid !important;

  grid-template-columns:
    44px
    minmax(0,1fr)
    44px !important;

  align-items:center !important;

  column-gap:4px !important;

  min-height:60px !important;
  height:60px !important;

  padding:
    0
    10px !important;
}


#screen-journey > header .menu-btn{

  justify-self:start !important;

}


#screen-journey > header .lang-btn{

  justify-self:end !important;

}


/*
 * Área central:
 *
 * GUIA AUTOMÁTICO
 * SANTA CRUZ
 * Caniço
 */
#screen-journey
.roadguide-journey-heading-v588{

  min-width:0 !important;
  width:100% !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:1px !important;

  overflow:hidden !important;

  text-align:center !important;
}


/*
 * O texto legado continua a receber
 * "Caniço · Santa Cruz", mas não aparece.
 */
#screen-journey
.roadguide-journey-location-source-v588{

  display:none !important;

}


/* GUIA AUTOMÁTICO */
#screen-journey
.roadguide-journey-heading-v588
#ui-heading-to{

  display:block !important;

  width:100% !important;
  min-width:0 !important;

  margin:0 !important;

  font-size:
    clamp(
      7px,
      2.25vw,
      9px
    ) !important;

  line-height:1.05 !important;

  font-weight:500 !important;

  letter-spacing:.08em !important;

  white-space:nowrap !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;

  opacity:.78 !important;
}


/* CONCELHO */
#screen-journey
.roadguide-journey-municipality-v588{

  display:block !important;

  width:100% !important;
  min-width:0 !important;

  font-size:
    clamp(
      10px,
      3.35vw,
      13px
    ) !important;

  line-height:1.05 !important;

  font-weight:800 !important;

  letter-spacing:.025em !important;

  color:#fff !important;

  white-space:nowrap !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
}


/* FREGUESIA */
#screen-journey
.roadguide-journey-parish-v588{

  display:block !important;

  width:100% !important;
  min-width:0 !important;

  font-size:
    clamp(
      9px,
      3vw,
      12px
    ) !important;

  line-height:1.05 !important;

  font-weight:650 !important;

  color:
    rgba(
      255,
      255,
      255,
      .88
    ) !important;

  white-space:nowrap !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
}



/* ==========================================================
   V58.9 - FASE INICIAL / APENAS IMAGEM
   ========================================================== */

/*
 * A infraestrutura de vídeo continua no HTML,
 * JavaScript e dados editoriais.
 *
 * Nesta fase apenas não é apresentada ao utilizador.
 *
 * Mais tarde basta retirar este bloco para reativar:
 * - botão VER VÍDEO
 * - reprodução de vídeo
 * - botão fechar vídeo
 */


/* fotografia sempre visível */
#screen-journey
#place-photo{

  display:block !important;

  width:100%;
  height:100%;

  object-fit:cover;

}


/* vídeo totalmente escondido nesta fase */
#screen-journey
#place-video{

  display:none !important;

}


/* retirar botão VER VÍDEO */
#screen-journey
#media-video-action{

  display:none !important;

}


/* retirar botão X do vídeo */
#screen-journey
#close-place-video{

  display:none !important;

}


/*
 * Sem o botão de vídeo,
 * o título da imagem pode aproveitar toda a linha.
 */
#screen-journey
.media-caption-row{

  justify-content:flex-start !important;

}


#screen-journey
.image-title{

  max-width:100% !important;

}




/* ==========================================================
   V60 - SELETOR DE IDIOMA POR BANDEIRA
   ========================================================== */

#screen-journey
#journey-lang{

  width:44px !important;
  min-width:44px !important;
  height:44px !important;

  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:21px !important;
  line-height:1 !important;

  letter-spacing:0 !important;

  overflow:visible !important;

}


/*
 * Evitar que a bandeira aumente
 * ou empurre o cabeçalho territorial.
 */
#screen-journey > header
#journey-lang{

  justify-self:end !important;

}


/* ==========================================================
   FIM V60
   ========================================================== */



/* ==========================================================
   V60.3 - BANDEIRA REAL DO IDIOMA
   ========================================================== */

#screen-journey
#journey-lang
.roadguide-language-flag-v603{

  display:block;

  width:24px;
  height:17px;

  object-fit:cover;

  border-radius:2px;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.18);

}


/* ==========================================================
   FIM V60.3
   ========================================================== */



/* ==========================================================
   V61.1 - CARTÃO DE ACESSO
   ========================================================== */

.roadguide-access-card-v611{

  margin:
    10px
    14px
    14px;

  padding:
    13px
    14px;

  border:
    1px solid
    rgba(82,218,125,.20);

  border-radius:
    14px;

  background:
    rgba(18,71,53,.28);

}


.roadguide-access-card-v611
.roadguide-access-kicker-v611{

  display:block;

  margin-bottom:5px;

  color:
    #58df83;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .10em;

}


.roadguide-access-card-v611
strong{

  display:block;

  color:
    #fff;

  font-size:
    13px;

  line-height:
    1.25;

}


.roadguide-access-card-v611
p{

  margin:
    4px
    0
    0;

  color:
    rgba(255,255,255,.68);

  font-size:
    11px;

  line-height:
    1.35;

}


.roadguide-access-trial_expired-v611{

  border-color:
    rgba(255,194,83,.28);

}


.roadguide-access-trial_expired-v611
.roadguide-access-kicker-v611{

  color:
    #ffd078;

}


.roadguide-access-full-v611{

  border-color:
    rgba(82,218,125,.38);

}


/* ==========================================================
   FIM V61.1
   ========================================================== */



/* ==========================================================
   V61.2 - MADEIRA FULL ACCESS
   ========================================================== */

#screen-journey{

  position:relative;

}


.roadguide-paywall-v612{

  position:absolute;

  inset:0;

  z-index:9000;

  display:none;

  overflow:hidden;

}


.roadguide-paywall-v612.open{

  display:block;

}


.roadguide-paywall-backdrop-v612{

  position:absolute;

  inset:0;

  background:
    rgba(0,18,14,.80);

  backdrop-filter:
    blur(4px);

}


.roadguide-paywall-sheet-v612{

  position:absolute;

  left:10px;
  right:10px;
  bottom:10px;

  max-height:
    calc(100% - 20px);

  overflow-y:auto;

  padding:
    20px
    18px
    16px;

  border:
    1px solid
    rgba(93,225,132,.22);

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      #0b3328 0%,
      #061e18 100%
    );

  box-shadow:
    0 -14px 45px
    rgba(0,0,0,.35);

}


.roadguide-paywall-mark-v612{

  width:48px;
  height:48px;

  margin:
    0 auto
    10px;

}


.roadguide-paywall-mark-v612 img{

  width:100%;
  height:100%;

}


.roadguide-paywall-kicker-v612{

  display:block;

  text-align:center;

  color:
    #5fe18a;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .12em;

}


.roadguide-paywall-sheet-v612 h2{

  margin:
    8px
    0
    8px;

  text-align:center;

  color:#fff;

  font-size:
    21px;

  line-height:
    1.12;

}


.roadguide-paywall-intro-v612{

  margin:
    0 auto
    15px;

  max-width:
    290px;

  text-align:center;

  color:
    rgba(255,255,255,.72);

  font-size:
    12px;

  line-height:
    1.45;

}


.roadguide-paywall-features-v612{

  display:grid;

  gap:8px;

  margin:
    0
    0
    16px;

  padding:0;

  list-style:none;

}


.roadguide-paywall-features-v612 li{

  display:flex;

  gap:9px;

  align-items:flex-start;

}


.roadguide-paywall-features-v612 li > span{

  flex:
    0
    0
    18px;

  width:18px;
  height:18px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:
    50%;

  background:
    rgba(82,218,125,.14);

  color:
    #5fe18a;

  font-size:
    10px;

  font-weight:
    900;

}


.roadguide-paywall-features-v612 p{

  margin:1px 0 0;

  color:
    rgba(255,255,255,.86);

  font-size:
    11px;

  line-height:
    1.35;

}


.roadguide-paywall-price-v612{

  margin:
    0
    0
    12px;

  padding:
    13px;

  text-align:center;

  border:
    1px solid
    rgba(82,218,125,.22);

  border-radius:
    14px;

  background:
    rgba(82,218,125,.07);

}


.roadguide-paywall-price-v612 small{

  display:block;

  color:
    rgba(255,255,255,.55);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .10em;

}


.roadguide-paywall-price-v612 strong{

  display:block;

  margin-top:3px;

  color:#fff;

  font-size:
    27px;

  line-height:
    1;

}


.roadguide-paywall-price-v612 span{

  display:block;

  margin-top:5px;

  color:
    #65df8d;

  font-size:
    10px;

  font-weight:
    700;

}


.roadguide-paywall-buy-v612{

  width:100%;
  min-height:47px;

  border:0;

  border-radius:
    14px;

  background:
    #49cf70;

  color:
    #052017;

  font-size:
    12px;

  font-weight:
    900;

  cursor:pointer;

}


.roadguide-payment-note-v612{

  min-height:0;

  margin-top:7px;

  text-align:center;

  color:
    rgba(255,255,255,.62);

  font-size:
    9px;

  line-height:
    1.3;

}


.roadguide-payment-note-v612:empty{

  display:none;

}


.roadguide-debug-buy-v612{

  width:100%;

  margin-top:8px;

  min-height:36px;

  border:
    1px dashed
    rgba(255,208,120,.40);

  border-radius:
    10px;

  background:
    rgba(255,208,120,.05);

  color:
    #ffd078;

  font-size:
    9px;

  font-weight:
    800;

  cursor:pointer;

}


.roadguide-paywall-later-v612{

  width:100%;

  margin-top:7px;

  min-height:34px;

  border:0;

  background:
    transparent;

  color:
    rgba(255,255,255,.58);

  font-size:
    10px;

  font-weight:
    700;

  cursor:pointer;

}


#roadguide-access-card-v611{

  cursor:pointer;

}


/* Ecrãs particularmente baixos */
@media (max-height:560px){

  .roadguide-paywall-sheet-v612{

    padding:
      13px
      15px
      11px;

  }


  .roadguide-paywall-mark-v612{

    width:35px;
    height:35px;

    margin-bottom:5px;

  }


  .roadguide-paywall-sheet-v612 h2{

    margin:
      5px
      0;

    font-size:
      17px;

  }


  .roadguide-paywall-intro-v612{

    margin-bottom:
      9px;

    font-size:
      10px;

  }


  .roadguide-paywall-features-v612{

    gap:5px;

    margin-bottom:
      9px;

  }


  .roadguide-paywall-price-v612{

    padding:
      8px;

    margin-bottom:
      8px;

  }


  .roadguide-paywall-price-v612 strong{

    font-size:
      22px;

  }

}


/* ==========================================================
   FIM V61.2
   ========================================================== */



/* ==========================================================
   V61.3 - CTA DA ABERTURA MAIS DISCRETO
   ========================================================== */

.roadguide-splash-cta-v613{

  width:
    min(170px, 72%) !important;

  min-width:
    0 !important;

  min-height:
    42px !important;

  height:
    42px !important;

  padding:
    0 18px !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  font-size:
    11px !important;

  line-height:
    1 !important;

  border-radius:
    13px !important;

}


/* telemóveis particularmente estreitos */
@media (max-width:330px){

  .roadguide-splash-cta-v613{

    width:
      min(162px, 70%) !important;

    min-height:
      40px !important;

    height:
      40px !important;

    font-size:
      10.5px !important;

  }

}


/* ==========================================================
   FIM V61.3
   ========================================================== */



/* ==========================================================
   V61.4 - ESTADO INTERATIVO DO ACESSO
   ========================================================== */

/*
 * Durante o trial e com Full Access
 * o cartão é apenas informativo.
 */
#roadguide-access-card-v611{

  cursor:
    default !important;

}


/*
 * Só depois de expirar passa a
 * funcionar como acesso ao paywall.
 */
#roadguide-access-card-v611[
  data-access-status="trial_expired"
]{

  cursor:
    pointer !important;

}


#roadguide-access-card-v611[
  data-access-status="trial_expired"
]:focus-visible{

  outline:
    2px solid
    rgba(95,225,138,.72);

  outline-offset:
    2px;

}


/*
 * O sheet recebe foco programaticamente
 * quando abre, sem mostrar outline visual.
 */
.roadguide-paywall-sheet-v612:focus{

  outline:
    none;

}


/* ==========================================================
   FIM V61.4
   ========================================================== */