/* Fresh Frutiger News — mockup Frutiger Aero / Windows Live Messenger */
:root {
  --wlm-ink: #1d3a5f;
  --text: #2f3640;
  --aqua-1: #bfe9ff;
  --aqua-2: #2b9be3;
  --paper: #ffffff;
  --ui: "Segoe UI", "Open Sans", Tahoma, sans-serif;
  --bubbly: "Fredoka", "VAG Rounded", "Arial Rounded MT Bold", sans-serif;
}

* { box-sizing: border-box; }

/* "hidden" sempre esconde, mesmo em elementos com display próprio (grid, flex) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ui);
  color: var(--text);
  background: #3d9be0 url("./assets/aero/skyboxes_34.webp") center top / cover fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; }

.paper {
  position: relative;
  max-width: 1080px;
  margin: 0 auto 48px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 18px 50px rgba(0, 45, 100, .35);
}

/* ---------- Barra preta ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  padding: 0 16px;
  background: linear-gradient(#1a1a1a, #000 55%, #0b0b0b);
  border-bottom: 1px solid #333;
}
.edicao-select { cursor: pointer; font: inherit; border: 0; -webkit-appearance: none; appearance: none; padding-right: 22px !important; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important; background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55% !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; }
.edicao-select option { color: #123; background: #fff; }
.edicao-antiga { display: block; padding: 9px 16px; background: linear-gradient(#fff6c8, #ffe58a); border-bottom: 1px solid #e0c452; color: #5a4300; font: 600 13.5px/1.3 var(--ui); text-align: center; text-decoration: none; }
.edicao-antiga:hover { text-decoration: underline; }
.date-chip {
  background: #fff;
  color: #000;
  font: 700 12px/1 var(--ui);
  padding: 7px 9px;
  border: 1px solid #888;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.aero-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.aero-nav a {
  font: 600 12px/1 var(--ui);
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.08) 50%, rgba(0,0,0,.1) 51%, rgba(80,170,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: background .2s, box-shadow .2s;
}
.aero-nav a:hover, .aero-nav a:focus-visible {
  background: linear-gradient(#9fe0ff, #3aa6ec 50%, #1579c7 51%, #45c0ff);
  box-shadow: 0 0 12px rgba(80,190,255,.8), inset 0 1px 0 rgba(255,255,255,.7);
}

/* menu de seções */
.aero-menu { position: relative; margin-left: auto; }
.aero-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.08) 50%, rgba(0,0,0,.1) 51%, rgba(80,170,255,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  color: #fff;
  font: 600 13px/1 var(--ui);
  cursor: pointer;
}
.aero-menu-btn:hover, .aero-menu-btn:focus-visible, .aero-menu-btn[aria-expanded="true"] {
  background: linear-gradient(#9fe0ff, #3aa6ec 50%, #1579c7 51%, #45c0ff);
  box-shadow: 0 0 12px rgba(80,190,255,.8), inset 0 1px 0 rgba(255,255,255,.7);
}
.burger { display: grid; gap: 3px; }
.burger i { display: block; width: 14px; height: 2px; border-radius: 1px; background: #fff; }
.caret { font-size: 10px; transition: transform .2s; }
.aero-menu-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.aero-menu-list {
  position: absolute;
  z-index: 70;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 10px;
  border: 1px solid rgba(0, 25, 55, .55);
  background: linear-gradient(rgba(235, 247, 255, .92), rgba(200, 228, 248, .88));
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 32px rgba(0, 30, 70, .45);
  animation: menu-in .16s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.aero-menu-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: #1b2a3a;
  font: 400 14px/1.2 var(--ui);
  text-decoration: none;
}
.aero-menu-list a:hover, .aero-menu-list a:focus-visible {
  outline: none;
  border-color: #7fbde8;
  background: linear-gradient(#f2f9ff, #cfe8fb);
  box-shadow: inset 0 1px 0 #fff;
}
.aero-menu-list img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.aero-menu-list .sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(0, 40, 90, .15); }

/* ---------- Cabeçalho em faixas ---------- */
.hero {
  position: relative;
  aspect-ratio: 1080 / 510;
  container-type: inline-size;
  overflow: hidden;
  background: #7fd0f5;
}
.band { position: absolute; inset: 0; }

.band-sky {
  background: url("./assets/aero/skyboxes_31.webp") center 30% / cover;
}
.band-surface {
  bottom: 40%;
  background:
    url("./assets/aero/water_28.webp") center 50% / 104% auto no-repeat,
    linear-gradient(transparent 20%, #5fc4ee 40%, #1a8fd4);
  animation: surface-bob 6s ease-in-out infinite alternate;
}
.caustics {
  position: absolute;
  inset: 0;
  background: url("./assets/aero/flares_25.webp") 30% -40% / 50% auto no-repeat;
  mix-blend-mode: screen;
  opacity: .7;
  animation: rays-sway 9s ease-in-out infinite alternate;
}

.band-aquarium {
  top: 40%;
  bottom: 8%;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  background: url("./assets/aero/water_57.webp") center 62% / cover;
  overflow: hidden;
}
.band-aquarium .rays {
  position: absolute;
  inset: -20% 0 0 20%;
  background: url("./assets/aero/flares_25.webp") center top / 70% auto no-repeat;
  mix-blend-mode: screen;
  opacity: .8;
  transform-origin: top center;
  animation: rays-sway 7s ease-in-out infinite alternate;
}

.fish {
  position: absolute;
  left: 0;
  will-change: transform;
  filter: drop-shadow(0 4px 4px rgba(0, 40, 80, .35));
  pointer-events: none;
}
.fish img { display: block; width: 100%; animation: fish-wobble 2.4s ease-in-out infinite; }

.dolphin {
  position: absolute;
  z-index: 3;
  left: 8%;
  top: 22%;
  width: 11cqw;
  opacity: 0;
  animation: dolphin-jump 16s ease-in-out 4s infinite;
}

.band-masthead-wrap {
  position: absolute;
  inset: 0;
  z-index: 6;
  filter: drop-shadow(0 .8cqw .8cqw rgba(0, 50, 100, .35));
  pointer-events: none;
}
.band-masthead {
  clip-path: polygon(0 19.6%, 100% 28.4%, 100% 58.8%, 0 51%);
  background: linear-gradient(170deg, #ffffff 0%, #ffffff 30%, #eef8ff 60%, #d8eefb 100%);
  overflow: hidden;
}
.masthead-gloss {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  left: -30%;
  background: radial-gradient(closest-side, rgba(160, 220, 255, .45), rgba(160, 220, 255, 0));
  animation: gloss-sweep 7s ease-in-out 2s infinite;
}

/* Letreiro inflado (referência: capa listencorp) */
.logo {
  position: absolute;
  z-index: 8;
  left: 4.5%;
  top: 25.5%;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1.1cqw;
  font-family: var(--bubbly);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
/* plástico inflado: o filtro SVG #puffy faz o relevo e o brilho especular;
   os drop-shadows empilhados fazem a extrusão e a sombra no chão */
.gl {
  position: relative;
  display: inline-block;
  padding: .06em .04em .1em;
  color: transparent;
  background-image: var(--fill);
  -webkit-background-clip: text;
  background-clip: text;
  filter: url(#puffy)
    drop-shadow(0 .018em 0 var(--rim))
    drop-shadow(0 .018em 0 var(--rim))
    drop-shadow(0 .018em 0 var(--deep))
    drop-shadow(0 .06em .05em rgba(0, 30, 80, .45));
}
.gl-blue {
  --rim: #1a55c9;
  --deep: #0c2f82;
  --fill: linear-gradient(#56b0ff, #1f74f5 55%, #1257dc);
}
.gl-green {
  --rim: #4c9c12;
  --deep: #2b6406;
  --fill: linear-gradient(#aef03c, #72c81a 55%, #54a80c);
}
.gl-orange {
  --rim: #d8600a;
  --deep: #8f3a00;
  --fill: linear-gradient(#ffb454, #ff8a1a 55%, #f06d0c);
}
.logo-fresh { font-size: 6.4cqw; transform: rotate(-4deg) translateY(-1.2cqw); }
.logo-frutiger { font-size: 10.6cqw; animation: logo-float 5s ease-in-out infinite; }
.logo-news { font-size: 6.8cqw; transform: rotate(3deg) translateY(2cqw); }
.logo-sparkle {
  position: absolute;
  width: 9cqw;
  top: -2cqw;
  left: 20cqw;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  animation: sparkle-travel 6s ease-in-out 1s infinite;
}

.gull {
  position: absolute;
  z-index: 9;
  left: 76%;
  top: 0;
  width: 23cqw;
  animation: gull-bob 3.6s ease-in-out infinite;
}
.gull-bird { display: block; width: 100%; filter: drop-shadow(0 .6cqw .6cqw rgba(0,40,80,.3)); }
/* mascote: ~tamanho natural do GIF (248px), para o texto da carta ficar nítido */
.gull-bird.mascot { image-rendering: auto; filter: drop-shadow(0 .5cqw .4cqw rgba(0,40,80,.35)); }
.gull-mail {
  position: absolute;
  width: 5.2cqw;
  left: 52%;
  top: 72%;
  transform: rotate(-12deg);
  filter: drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.35));
  animation: mail-swing 3.6s ease-in-out infinite;
}
.tag-sticker {
  position: absolute;
  z-index: 9;
  left: 34%;
  top: 92%;
  font: 600 1.25cqw/1 var(--bubbly);
  color: #1a1a1a;
  padding: 1.1cqw 1.3cqw;
  background: linear-gradient(#fff2a0, #ffd23c 50%, #f5b400 51%, #ffd84d);
  border: .18cqw solid #111;
  box-shadow: .45cqw .45cqw 0 #111;
  transform: rotate(-14deg);
  transform-origin: top left;
  white-space: nowrap;
}

.band-yellow {
  z-index: 4;
  clip-path: polygon(0 82%, 100% 90%, 100% 100%, 0 100%);
  background: linear-gradient(#fff08c, #ffd12e 45%, #ffbd14 55%, #ffc93a);
}
.band-grass {
  z-index: 5;
  top: 73%;
  clip-path: polygon(0 0, 100% 0, 100% 81%, 0 42%);
  background:
    url("./assets/aero/foregrounds_107.webp") center top / 100% auto no-repeat,
    linear-gradient(transparent 40%, #86c93a 55%, #5ea51c 100%);
}
.band-grass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,210,.35) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: grass-light 9s ease-in-out infinite;
}

.hero-rubric {
  position: absolute;
  z-index: 9;
  left: 2.8%;
  bottom: 1.6%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font: 300 3.3cqw/1 var(--ui);
  color: #1b2a3a;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.hero-rubric b { font-weight: 700; }
.hero-arrow { width: 7cqw; height: auto; animation: arrow-nudge 1.6s ease-in-out infinite; }

.butterfly {
  position: absolute;
  z-index: 9;
  width: 4.5cqw;
  left: 0;
  top: 0;
  pointer-events: none;
  animation: butterfly-a 22s linear infinite;
}
.butterfly-2 { width: 3cqw; animation: butterfly-b 17s linear 3s infinite; }

/* ---------- Pensamento do Dia ---------- */
main { position: relative; }

.thought {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: 22px;
  padding: 22px 30px 28px;
  box-shadow: 0 10px 14px -12px rgba(0,0,0,.35);
}
.display-frame {
  padding: 7px;
  border-radius: 10px;
  background: linear-gradient(#c9f59a, #74cf2c 48%, #45a111 52%, #7fd83a);
  border: 1px solid #2f7a0a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 4px 10px rgba(0, 60, 0, .25);
}
.gif-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 262 / 200;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(#6bbcf5, #3a86d8 50%, #2a6fc4 51%, #4b9ae8);
  color: #fff;
  font: 700 22px/1.3 var(--ui);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,30,80,.6);
}
.gif-slot::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.08));
  pointer-events: none;
}
.gif-slot span { position: relative; z-index: 1; }
.thought-gif { position: relative; z-index: 1; display: block; max-width: 100%; height: auto; }
/* com GIF carregado, a caixa perde a proporção fixa e a moldura abraça o GIF */
.gif-slot.has-gif { display: block; aspect-ratio: auto; width: fit-content; max-width: 100%; }
.display-frame:has(.has-gif) { width: fit-content; max-width: 100%; }
.gif-bubble {
  position: absolute;
  width: 58%;
  opacity: .5;
  animation: gif-bubble 6s ease-in-out infinite;
}
.presence { margin: 8px 2px 0; font-size: 13px; color: #333; }
.presence .caret { color: #555; font-size: 10px; }

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: radial-gradient(circle at 35% 30%, #d8ffb0, #3fc01a 55%, #1f7f06);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  vertical-align: middle;
}
.dot.busy { background: radial-gradient(circle at 35% 30%, #ffc9c0, #e6321f 55%, #8e1206); }
.dot.away { background: radial-gradient(circle at 35% 30%, #fff1b0, #f4b400 55%, #9b6d00); }
.dot.off  { background: radial-gradient(circle at 35% 30%, #fff, #b8bec6 55%, #7c848d); }

/* Tipografia estilo "Sign in to Windows Live Messenger" */
.wlm-heading {
  margin: 0 0 12px;
  font: 300 30px/1.15 var(--ui);
  color: var(--wlm-ink);
  letter-spacing: -.01em;
}
.wlm-heading b { font-weight: 600; }
.wlm-heading.small { font-size: 21px; margin-bottom: 6px; }

.thought-body p#thought-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  text-align: justify;
  transition: opacity .3s;
}
.thought-origin { margin: 8px 0 0; font: 700 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #2b86c9; }
#thought-text { white-space: pre-line; }
.thought-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Botões ---------- */
.aqua-button {
  font: 600 14px/1 var(--ui);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #1b6fa8;
  background: linear-gradient(var(--aqua-1) 0%, #6cc3f5 48%, var(--aqua-2) 50%, #5ed0ff 100%);
  text-shadow: 0 1px 1px rgba(0,50,100,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 6px rgba(0,60,120,.3);
  cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .1s;
}
.aqua-button:hover, .aqua-button:focus-visible { filter: brightness(1.08) saturate(1.15); box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(60,180,255,.8); }
.aqua-button:active { transform: translateY(1px); }

.vista-button {
  font: 400 13px/1 var(--ui);
  color: #000;
  padding: 7px 14px;
  border-radius: 3px;
  border: 1px solid #707070;
  background: linear-gradient(#f2f2f2 0%, #ebebeb 49%, #dddddd 50%, #cfcfcf 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
  cursor: pointer;
}
.vista-button:hover, .vista-button:focus-visible {
  border-color: #3c7fb1;
  background: linear-gradient(#eaf6fd 0%, #d9f0fc 49%, #bee6fd 50%, #a7d9f5 100%);
}
.vista-button:active { background: linear-gradient(#e5f4fc, #c4e5f6 50%, #98d1ef 51%, #68b3db); }

/* ---------- Janelas Aero ---------- */
.messenger-row {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 22px;
  padding: 30px;
  background: url("./assets/aero/skyboxes_39.webp") center / cover;
}
.win {
  padding: 0 7px 7px;
  border-radius: 8px;
  border: 1px solid rgba(0, 25, 55, .6);
  background: linear-gradient(rgba(200, 228, 248, .72), rgba(120, 178, 222, .55) 45%, rgba(150, 200, 235, .62));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 32px rgba(0, 40, 90, .4);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
}
.win-title {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  font: 400 13px/1 var(--ui);
  color: #000;
  text-shadow: 0 0 10px #fff, 0 0 6px #fff;
}
.win-title img { width: 18px; height: 18px; }
.win-controls { margin-left: auto; display: flex; align-self: flex-start; }
.win-controls i {
  display: block;
  width: 26px;
  height: 19px;
  border: 1px solid rgba(0, 20, 50, .6);
  border-top: 0;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.15) 50%, rgba(0,40,90,.12) 51%, rgba(255,255,255,.3));
}
.win-controls i:first-child { border-bottom-left-radius: 4px; }
.win-controls i + i { border-left: 0; }
.win-controls .close {
  width: 44px;
  border-bottom-right-radius: 4px;
  background: linear-gradient(#e8a393, #d0604a 50%, #b8321c 51%, #d9734f);
  position: relative;
}
.win-controls .close::before {
  content: "✕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 11px/1 var(--ui);
  color: #fff;
  font-style: normal;
  text-shadow: 0 0 3px #000;
}
.win-body {
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 3px;
  background: linear-gradient(#d4ecfa 0, #f3faff 110px, #fff 170px);
  padding: 14px;
}

.chat-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #cfe3f1; }
.chat-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  padding: 3px;
  border-radius: 7px;
  background: linear-gradient(#c9f59a, #45a111 52%, #7fd83a);
  border: 1px solid #2f7a0a;
  background-clip: padding-box;
}
.personal-msg { margin: 0; font-size: 12px; color: #5b6b7c; font-style: italic; }
.chat-log {
  height: 190px;
  overflow-y: auto;
  padding: 10px 2px;
  font-size: 14px;
  line-height: 1.5;
}
.msg { margin: 0 0 8px; animation: msg-in .35s ease-out; }
.msg b { display: block; font-weight: 400; color: #6d7b8a; font-size: 12px; }
.msg.me b { color: #2f7a0a; }
.chat-toolbar { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid #cfe3f1; }

.contacts { list-style: none; margin: 4px 0 12px; padding: 0; }
.contacts li {
  display: grid;
  grid-template-columns: 16px 1fr;
  column-gap: 6px;
  padding: 6px 6px;
  border-radius: 3px;
  font-size: 13px;
  border: 1px solid transparent;
}
.contacts li:hover { border-color: #b8d6fb; background: linear-gradient(#f2f8fe, #dcecfc); }
.contacts li .dot { grid-row: span 2; margin-top: 3px; }
.contacts li span { font-size: 11.5px; color: #6d7b8a; }
.bubble-score { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-top: 8px; border-top: 1px solid #cfe3f1; }
.bubble-score img { width: 28px; }

.shake { animation: nudge .6s linear; }

/* ---------- Caderno de vidro ---------- */
.caderno {
  padding: 28px 30px 34px;
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0) 90px),
    url("./assets/aero/water_59.webp") center 70% / cover;
}
.section-heading { margin-bottom: 18px; }
.glass-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.glass-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: 0 10px 28px rgba(0, 40, 90, .3), inset 0 1px 0 #fff;
  transition: transform .25s, box-shadow .25s;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,0));
  border-radius: 16px 16px 50% 50% / 16px 16px 20px 20px;
  pointer-events: none;
}
.glass-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 40, 90, .4), 0 0 18px rgba(120, 210, 255, .7); }
.glass-card img { position: relative; width: 56px; height: 56px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.glass-card h3 { position: relative; margin: 8px 0 6px; font: 300 22px/1.15 var(--ui); color: var(--wlm-ink); }
.glass-card h3 b { font-weight: 600; }
.glass-card p { position: relative; margin: 0; font-size: 14px; line-height: 1.55; }

/* ---------- Frases do Tio Ed ---------- */
.tio-ed {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 22px;
  padding: 30px;
  background: url("./assets/aero/skyboxes_31.webp") center 40% / cover;
}
.eyebrow-aero { margin: 0 0 4px; font: 700 10.5px/1.2 var(--ui); letter-spacing: .14em; color: #2b86c9; }
.ed-intro .win-body { height: calc(100% - 32px); display: flex; flex-direction: column; gap: 10px; }
.ed-intro .win-body p { margin: 0; font-size: 14px; line-height: 1.55; }
.ed-intro .wlm-heading { margin: 0; font-size: 34px; }
.ed-intro .aqua-button { margin-top: auto; align-self: flex-start; }
.ed-intro .ed-status { font-size: 12.5px; color: #5b6b7c; font-style: italic; }

.ed-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 12px 30px rgba(0, 40, 90, .3), inset 0 1px 0 #fff;
  transition: transform .25s, box-shadow .25s;
}
.ed-card:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 18px 36px rgba(0, 40, 90, .4), 0 0 20px rgba(140, 215, 255, .8); }
.ed-frame { padding: 5px; }
.ed-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.3);
}
.ed-card blockquote {
  position: relative;
  flex: 1;
  margin: 16px 0 12px;
  padding: 10px 12px 12px;
  border-radius: 10px;
  border: 1px solid #a9cbe6;
  background: linear-gradient(#ffffff, #e8f4fd);
  box-shadow: 0 2px 6px rgba(0, 50, 100, .15);
}
/* rabinho do balão */
.ed-card blockquote::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 22px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid #a9cbe6;
  border-top: 1px solid #a9cbe6;
  transform: rotate(45deg);
}
.ed-says { margin: 0 0 4px; font-size: 12px; color: #6d7b8a; }
.ed-line { margin: 0; font: 300 20px/1.3 var(--ui); color: var(--wlm-ink); }
.ed-line b { font-weight: 600; }
.source-pill {
  display: inline-block;
  font: 600 11.5px/1 var(--ui);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #1b6fa8;
  background: linear-gradient(var(--aqua-1), #6cc3f5 48%, var(--aqua-2) 50%, #5ed0ff);
  text-shadow: 0 1px 1px rgba(0,50,100,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.source-pill:hover, .source-pill:focus-visible { filter: brightness(1.1); box-shadow: inset 0 1px 0 #fff, 0 0 12px rgba(60,180,255,.8); }

/* ---------- Teste de daltonismo ---------- */
.ct-banner {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 108px;
}
.ct-title,
.ct-shout {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ct-title {
  z-index: 1;
  margin-right: -4%;
  padding: 0 30px;
  font: 600 clamp(28px, 4.6vw, 50px)/1 var(--bubbly);
  color: #fff;
  text-shadow: 0 2px 0 #9a0000, 0 4px 10px rgba(80,0,0,.45);
  background: linear-gradient(#ff5a4a, #f01405 48%, #cf0000 52%, #ff2a1a);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.ct-shout {
  justify-content: center;
  padding: 0 18px 0 8%;
  text-align: center;
  font: italic 700 clamp(15px, 1.9vw, 21px)/1.3 "Comic Sans MS", "Comic Neue", cursive;
  color: #111;
  background: linear-gradient(#c6f58b, #8fdc4a 48%, #74c92c 52%, #9ae35b);
  animation: shout-pulse 1.8s ease-in-out infinite;
}
.ct-title::after,
.ct-shout::after {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.08));
  pointer-events: none;
}

.ct-game {
  padding: 26px 30px 30px;
  background: linear-gradient(#ffffff 0, #eaf6fe 100%);
}
.ct-question { text-align: center; font-size: 34px; margin-bottom: 8px; }
.ct-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.ct-progress i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c9d3dc 60%, #93a0ad);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.ct-progress i.now { background: radial-gradient(circle at 35% 30%, #fff, #5ec8ff 55%, #1672c4); box-shadow: 0 0 8px rgba(60,170,255,.9); }
.ct-progress i.ok { background: radial-gradient(circle at 35% 30%, #d8ffb0, #3fc01a 55%, #1f7f06); }
.ct-progress i.miss { background: radial-gradient(circle at 35% 30%, #ffc9c0, #e6321f 55%, #8e1206); }

.ct-stage {
  display: grid;
  grid-template-columns: auto 300px;
  justify-content: center;
  align-items: center;
  gap: 34px;
}
.ct-plate-wrap {
  position: relative;
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 10px;
  background: linear-gradient(#f8fcff, #b9d9ef);
  box-shadow: 0 14px 30px rgba(0, 40, 90, .3), inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(0, 60, 110, .25);
}
/* lente de vidro por cima da placa */
.ct-plate-wrap::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 70% 45% at 40% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 64%, rgba(0,40,80,.18) 100%);
  pointer-events: none;
}
.ct-plate { display: block; width: 100%; height: 100%; border-radius: 50%; transition: transform .35s, opacity .35s; }
.ct-plate.swap { transform: scale(.85) rotate(-25deg); opacity: 0; }
.ct-feedback {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 10px 18px;
  border-radius: 12px;
  font: 600 20px/1.2 var(--bubbly);
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  scale: .6;
  transition: opacity .2s, scale .25s cubic-bezier(.2, .9, .3, 1.4);
  pointer-events: none;
}
.ct-feedback.show { opacity: 1; scale: 1; }
.ct-feedback.ok { background: linear-gradient(#8fe35a, #3fae16 52%, #2f9a0c); text-shadow: 0 1px 1px #1d5c05; box-shadow: 0 6px 18px rgba(30,100,0,.45); }
.ct-feedback.miss { background: linear-gradient(#ff8a7a, #e0281a 52%, #b81508); text-shadow: 0 1px 1px #6e0703; box-shadow: 0 6px 18px rgba(120,10,0,.45); }

.ct-panel label { display: block; font-size: 13px; margin-bottom: 6px; }
.ct-input-row { display: flex; gap: 8px; }
.aero-input {
  flex: 1;
  min-width: 0;
  font: 400 18px/1 var(--ui);
  padding: 8px 10px;
  border: 1px solid #abadb3;
  border-top-color: #7a7d86;
  border-radius: 3px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.aero-input:focus { outline: none; border-color: #3d7bad; box-shadow: 0 0 0 1px #3d7bad, 0 0 8px rgba(80,170,255,.6); }
.ct-none { width: 100%; margin-top: 8px; }
.ct-score {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #cfe3f1;
  font-size: 13px;
  color: #5b6b7c;
}
.ct-score b { font: 300 30px/1 var(--ui); color: var(--wlm-ink); }
.ct-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid #cfe3f1; }
.ct-result p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.ct-disclaimer { margin: 22px 0 0; text-align: center; font-size: 12px; color: #6d7b8a; }

@keyframes shout-pulse { 50% { filter: brightness(1.08) saturate(1.2); } }

/* ---------- Duck Hunt: gaivota alvo, cachorro rindo e janela do jogo ---------- */
button.gull { padding: 0; border: 0; background: none; cursor: crosshair; }
button.gull:focus-visible { outline: 3px solid #ffd21f; outline-offset: 4px; border-radius: 8px; }
.gull.shot { animation: none; pointer-events: none; }
.gull.falling { animation: gull-fall 1.3s cubic-bezier(.55, 0, .9, .5) forwards; pointer-events: none; }
.gull.falling .gull-bird { animation: gull-spin .16s steps(1) infinite; }
@keyframes gull-fall { to { transform: translateY(55cqw); } }
@keyframes gull-spin { 50% { transform: scaleX(-1); } }
/* clarão do tiro, como no NES */
.hero.flash::before { content: ""; position: absolute; inset: 0; z-index: 20; background: #fff; animation: shot-flash .12s steps(1) forwards; pointer-events: none; }
@keyframes shot-flash { 0% { opacity: .9; } 100% { opacity: 0; } }

.duck-dog {
  position: absolute;
  z-index: 4;
  left: 8%;
  bottom: 4%;
  width: 11.5cqw;
  aspect-ratio: 29 / 39;
  background: url("./assets/mascote/cachorro-rindo.png") 0 0 / 200% 100% no-repeat;
  image-rendering: pixelated;
  transform: translateY(110%);
  pointer-events: none;
}
.duck-dog.up { animation: dog-up 2.8s ease-in-out forwards, dog-laugh .2s steps(1) infinite; }
@keyframes dog-up {
  0% { transform: translateY(110%); }
  18%, 82% { transform: translateY(-14%); }
  100% { transform: translateY(110%); }
}
@keyframes dog-laugh { 50% { background-position: 100% 0; } }

.duck-play {
  position: absolute;
  z-index: 9;
  left: 79%;
  top: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4cqw;
  padding: 1.2cqw 1.8cqw;
  border-radius: 1cqw;
  border: .25cqw solid #111;
  background: linear-gradient(#5a5a5a, #1a1a1a);
  box-shadow: .5cqw .5cqw 0 rgba(0,0,0,.6), inset 0 .15cqw 0 rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
  animation: duck-pop .45s cubic-bezier(.2, .9, .3, 1.4);
}
.duck-play-kicker { font: 400 .95cqw/1 "Press Start 2P", monospace; color: #ffd21f; letter-spacing: .05em; }
.duck-play-label { font: 400 1.5cqw/1.2 "Press Start 2P", monospace; color: #5ce1ff; text-shadow: .15cqw .15cqw 0 #0b1f4d; }
.duck-play:hover, .duck-play:focus-visible { filter: brightness(1.2); transform: translateY(-2px); }
@keyframes duck-pop { from { transform: scale(.3); opacity: 0; } }

.duck-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 20, 50, .55); }
.duck-win { max-width: calc(100vw - 24px); }
.duck-close {
  width: 44px;
  height: 19px;
  border: 1px solid rgba(0, 20, 50, .6);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#e8a393, #d0604a 50%, #b8321c 51%, #d9734f);
  color: #fff;
  font: 700 11px/1 var(--ui);
  text-shadow: 0 0 3px #000;
  cursor: pointer;
}
.duck-frame { position: relative; overflow: hidden; background: #000; border: 1px solid rgba(0,0,0,.5); }
.duck-frame iframe { position: absolute; left: 0; top: 0; width: 768px; height: 720px; border: 0; transform-origin: 0 0; }
.duck-credit { margin: 6px 2px 0; font-size: 11.5px; color: #1b2a3a; text-shadow: 0 0 6px #fff; }
.duck-credit a { color: #0b4f96; }

/* ---------- Rádio (União FM) ---------- */
.radio {
  padding: 22px 30px 28px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .8), transparent 60%),
    linear-gradient(#d9f0ff, #aedcf7);
  border-bottom: 1px solid #9cc9e6;
}
.radio-title { margin: 0 0 16px; font: 700 clamp(24px, 4vw, 42px)/1.1 var(--bubbly); text-transform: uppercase; }
.radio-box {
  display: flex;
  align-items: stretch;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 26px;
  border: 1px solid rgba(0, 30, 70, .45);
  background: linear-gradient(#f4f8fb, #c9d6e0 48%, #aebfcc 52%, #d3dee6);
  box-shadow: inset 0 2px 0 #fff, inset 0 -3px 0 rgba(0,0,0,.12), 0 14px 30px rgba(0, 40, 90, .3);
}
/* alto-falantes com furinhos */
.radio-speaker {
  flex: 0 0 110px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(#5d6b77, #2b343c);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 #fff;
}
.radio-speaker span {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, #6f7d89 1.4px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(circle at 35% 30%, #4a5661, #1b2127);
  box-shadow: inset 0 0 0 4px #3a454f, inset 0 3px 8px rgba(0,0,0,.7);
  transition: transform .08s;
}
.radio.playing .radio-speaker span { animation: speaker-pulse .45s ease-in-out infinite alternate; }
@keyframes speaker-pulse { to { transform: scale(1.04); } }
.radio-panel { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* visor com brilho de vidro */
.radio-display {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  padding: 12px 16px 10px;
  border-radius: 12px;
  border: 1px solid #0b2a4a;
  background: linear-gradient(#0d3558, #0a2440);
  color: #bfe9ff;
  text-align: left;
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(80, 190, 255, .35);
}
.radio-display::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.radio-live { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: 700 11px/1 var(--ui); letter-spacing: .12em; color: #7a8c9c; }
.radio-live i { width: 9px; height: 9px; border-radius: 50%; background: #5a2320; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.radio.playing .radio-live { color: #ff8a7a; }
.radio.playing .radio-live i { background: radial-gradient(circle at 35% 30%, #ffc9c0, #ff3b25 60%, #b01005); box-shadow: 0 0 8px #ff3b25; animation: live-blink 1.2s steps(1) infinite; }
@keyframes live-blink { 50% { opacity: .35; } }
.radio-freq { font: 700 38px/1 Consolas, "Courier New", monospace; color: #7fe3ff; text-shadow: 0 0 10px rgba(80, 210, 255, .8); }
.radio-freq small { font-size: 16px; }
.radio-name { font: 600 14px/1.2 var(--ui); color: #d9f3ff; }
.radio-dial {
  grid-column: 1 / -1;
  position: relative;
  height: 14px;
  margin-top: 8px;
  background: repeating-linear-gradient(90deg, rgba(191, 233, 255, .7) 0 1px, transparent 1px 10px) center / 100% 60% no-repeat;
}
/* 105.3 entre 88 e 108 MHz */
.radio-needle { position: absolute; top: -2px; bottom: -2px; left: 86.5%; width: 3px; border-radius: 2px; background: #ff5a3a; box-shadow: 0 0 6px #ff5a3a; }
.radio-eq { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 8px; }
.radio-eq i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(#b8ff7a, #3fd0ff); opacity: .9; transition: height .08s linear; }
.radio-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.radio-play {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #1b6fa8;
  background: linear-gradient(#bfe9ff 0%, #6cc3f5 48%, #2b9be3 50%, #5ed0ff 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), 0 4px 10px rgba(0, 60, 120, .35);
  cursor: pointer;
  transition: transform .1s, filter .15s;
}
.radio-play:hover, .radio-play:focus-visible { filter: brightness(1.08) saturate(1.2); box-shadow: inset 0 2px 0 #fff, 0 0 16px rgba(60, 180, 255, .8); }
.radio-play:active { transform: scale(.95); }
/* ícone: triângulo (tocar) ou duas barras (pausar) */
.radio-icon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -11px 0 0 -7px; border-left: 20px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; filter: drop-shadow(0 1px 1px rgba(0,50,100,.6)); }
.radio-play[aria-pressed="true"] .radio-icon { margin: -11px 0 0 -9px; width: 18px; height: 22px; border: 0; background: linear-gradient(90deg, #fff 0 6px, transparent 6px 12px, #fff 12px 18px); }
.radio-play.loading .radio-icon { border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: none; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.radio-volume { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--ui); color: #2c4c7c; }
.radio-volume input { width: 140px; accent-color: #2b9be3; }
.radio-status { flex-basis: 100%; margin: 0; text-align: left; font-size: 13px; color: #3d4b5a; }

/* atalho da rádio na barra do topo */
.topbar { gap: 10px; }
/* botão de Libras na barra do topo; sem ele ligado, o VLibras fica escondido */
.libras-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #555; border-radius: 14px; background: linear-gradient(#3a3a3a, #1c1c1c); color: #ddd; font: 600 12px/1 var(--ui); cursor: pointer; }
.libras-toggle[aria-pressed="true"] { border-color: #2f7a0a; background: linear-gradient(#c9f59a, #74cf2c 48%, #45a111 52%, #7fd83a); color: #0b3a00; }
html:not(.libras-on) #vlibras-access-wrapper, html:not(.libras-on) #vlibras-app-root { display: none !important; }

.boombox {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  margin-right: auto;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: #cfd8e0;
  font: 600 12px/1 var(--ui);
  cursor: pointer;
}
.boombox img { height: 38px; width: auto; filter: grayscale(.6) brightness(.85); transition: filter .2s; }
.boombox:hover img, .boombox:focus-visible img { filter: none; }
.boombox:hover, .boombox:focus-visible { border-color: rgba(255,255,255,.2); }
.boombox[aria-pressed="true"] { color: #ffe033; border-color: rgba(255, 224, 51, .45); box-shadow: 0 0 12px rgba(255, 200, 40, .45); }
.boombox[aria-pressed="true"] img { filter: none; }

/* ---------- Horóscopo (Frutiger Aero + psicodélico: céu roxo/laranja, mandalas e vidro) ---------- */
.horoscopo {
  position: relative;
  overflow: hidden;
  padding: 34px 30px 30px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 170, 60, .55), transparent 55%),
    radial-gradient(ellipse at 15% 0%, rgba(200, 120, 255, .45), transparent 50%),
    linear-gradient(#240a45 0%, #4b1580 40%, #9a2f8f 70%, #f07a2a 100%);
}
/* aurora ondulando + estrelas piscando */
.horo-swirl {
  position: absolute;
  z-index: -1;
  inset: -20% -10% 0;
  /* some aos poucos em baixo, sem deixar quina */
  -webkit-mask-image: linear-gradient(#000 45%, transparent 85%);
  mask-image: linear-gradient(#000 45%, transparent 85%);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 42%, #ffe6f7, transparent),
    radial-gradient(2px 2px at 44% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 63% 30%, #fff, transparent),
    radial-gradient(2px 2px at 78% 16%, #fff0e0, transparent),
    radial-gradient(1.5px 1.5px at 90% 38%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 6% 55%, #fff, transparent),
    radial-gradient(2px 2px at 55% 58%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 84% 62%, #fff, transparent),
    linear-gradient(100deg, transparent 20%, rgba(255, 140, 90, .28) 35%, rgba(255, 110, 200, .3) 50%, rgba(190, 140, 255, .25) 62%, transparent 78%);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, 200% 100%;
  animation: aurora 14s ease-in-out infinite alternate, twinkle 3s ease-in-out infinite alternate;
}
@keyframes aurora { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 0; } to { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0; } }
@keyframes twinkle { to { opacity: .75; } }
/* bolhas de vidro flutuando nas laterais */
.horoscopo::before,
.horoscopo::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: url("./assets/aero/bubbles_22.webp") center / contain no-repeat;
  opacity: .55;
  filter: hue-rotate(160deg) saturate(1.3);
  animation: horo-orb 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.horoscopo::before { width: 150px; aspect-ratio: 1; left: -40px; top: 90px; }
.horoscopo::after { width: 110px; aspect-ratio: 1; right: -20px; bottom: 60px; animation-delay: -4s; }
@keyframes horo-orb { to { transform: translateY(-24px) scale(1.05); } }

/* mandalas anos 70 misturadas ao céu Aero: brilham como luz (screen) e giram devagar */
.horo-mandalas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mandala { position: absolute; mix-blend-mode: screen; opacity: .42; filter: saturate(1.3) drop-shadow(0 0 18px rgba(255, 170, 60, .45)); }
.mandala.m1 { width: 560px; left: 50%; top: -150px; margin-left: -280px; animation: mandala-spin 90s linear infinite, mandala-hue 12s ease-in-out infinite alternate; }
.mandala.m2 { width: 330px; left: -120px; bottom: -110px; opacity: .38; animation: mandala-spin 60s linear infinite reverse, mandala-hue 9s ease-in-out infinite alternate; }
.mandala.m3 { width: 280px; right: -100px; top: 120px; opacity: .34; animation: mandala-spin 70s linear infinite, mandala-hue 10s ease-in-out -4s infinite alternate; }
@keyframes mandala-spin { to { rotate: 360deg; } }
@keyframes mandala-hue { to { filter: saturate(1.5) hue-rotate(35deg) drop-shadow(0 0 22px rgba(200, 90, 255, .5)); } }
.horo-inner { max-width: 860px; margin: 0 auto; text-align: center; }
/* turma hippie: em pé nas laterais, balançando */
.horo-crew { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.crew { position: absolute; image-rendering: auto; filter: drop-shadow(0 6px 8px rgba(40, 0, 50, .45)); animation: crew-sway 3.2s ease-in-out infinite alternate; transform-origin: bottom center; }
.crew.c-chapeu { width: 104px; left: 14px; top: 330px; }
.crew.c-paz { width: 88px; right: 18px; top: 360px; animation-delay: -1.2s; }
.crew.c-casal { width: 116px; left: 8px; bottom: 150px; animation-delay: -2s; }
@keyframes crew-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
.horo-inner { position: relative; z-index: 1; }
.horo-title-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.horo-badge { width: 64px; border-radius: 10px; filter: drop-shadow(0 4px 8px rgba(40, 0, 50, .5)); animation: badge-bob 2.6s ease-in-out infinite alternate; }
.horo-badge.flip { animation-delay: -1.3s; }
@keyframes badge-bob { from { transform: translateY(-4px) rotate(-6deg); } to { transform: translateY(4px) rotate(6deg); } }
.horo-peace { height: 16px; vertical-align: -3px; border-radius: 3px; }
/* mural de polaroids de vidro */
.horo-mural { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 22px 0 4px; }
.polaroid {
  margin: 0;
  padding: 8px 8px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(rgba(255, 250, 245, .92), rgba(250, 232, 255, .86));
  box-shadow: 0 10px 22px rgba(40, 0, 50, .45), inset 0 1px 0 #fff;
  transition: transform .25s, box-shadow .25s;
}
.polaroid img { display: block; height: 130px; width: auto; max-width: 220px; object-fit: contain; border-radius: 3px; background: #fff; }
.polaroid figcaption { margin-top: 5px; font: 400 15px/1 "Righteous", var(--ui); color: #6a1f8f; text-align: center; }
.polaroid.p1 { rotate: -4deg; }
.polaroid.p2 { rotate: 3deg; translate: 0 -6px; }
.polaroid.p3 { rotate: -2deg; }
.polaroid:hover { transform: scale(1.06) rotate(0deg); box-shadow: 0 16px 30px rgba(40, 0, 50, .55), 0 0 18px rgba(255, 170, 90, .7); }
.horo-title { margin: 0; font: 700 clamp(40px, 7vw, 70px)/1.1 var(--bubbly); }
.horo-sub { margin: 10px 0 18px; font: 300 17px/1.3 var(--ui); color: #ffe6d1; text-shadow: 0 1px 6px rgba(50, 0, 60, .8); }
.horo-signs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 20px; }
/* botões em bolha de vidro */
.horo-signs button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.08) 50%, rgba(200, 120, 255, .14) 51%, rgba(255, 170, 120, .3));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff1e6;
  font: 600 12px/1.1 var(--ui);
  text-shadow: 0 1px 3px rgba(60, 0, 60, .7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(40, 0, 50, .35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.horo-signs .sym { font-size: 22px; line-height: 1; color: #ffd8a8; text-shadow: 0 0 8px rgba(255, 170, 80, .9); }
.horo-signs button:hover, .horo-signs button:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 0 16px rgba(255, 170, 90, .8); }
.horo-signs button[aria-pressed="true"] {
  border-color: #ffd8a8;
  background: linear-gradient(#ffd08a 0%, #ff9a3c 48%, #e0620f 50%, #ffae52 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 18px rgba(255, 150, 60, .95);
}
.horo-signs button[aria-pressed="true"] .sym { color: #fff; }
/* cartão de vidro fosco */
.horo-card {
  position: relative;
  overflow: hidden;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(rgba(255, 248, 242, .86), rgba(250, 232, 255, .8));
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: #2e1a3a;
  text-align: left;
  box-shadow: 0 16px 36px rgba(40, 0, 50, .45), inset 0 1px 0 #fff;
}
.horo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0));
  border-radius: 18px 18px 50% 50% / 18px 18px 24px 24px;
  pointer-events: none;
}
.horo-card > * { position: relative; }
.horo-card.flip { animation: horo-flip .45s ease-out; }
@keyframes horo-flip { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.horo-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.horo-symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #ffe3c4, #ff8a3d 40%, #b0328f 75%, #5b1a86 100%);
  box-shadow: inset 0 -4px 8px rgba(60, 0, 80, .35), 0 4px 12px rgba(120, 40, 120, .4);
  text-shadow: 0 1px 3px rgba(60, 0, 80, .6);
}
.horo-name { margin: 0; font: 300 32px/1 var(--ui); color: #4b1580; }
.horo-info { margin: 5px 0 0; font: 600 12.5px/1.2 var(--ui); color: #d9621a; letter-spacing: .03em; }
.horo-card dl { display: grid; grid-template-columns: 190px 1fr; gap: 10px 14px; margin: 0; }
.horo-card dt { font: 600 14px/1.45 var(--ui); color: #6a1f8f; }
.horo-card dd { margin: 0; font-size: 15px; line-height: 1.55; }
.horo-card footer { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ecc9e8; font-size: 13.5px; color: #5a4466; }
.horo-card footer b { font-weight: 700; color: #d9621a; }
.horo-foot { margin: 16px 0 0; font-size: 12px; color: #ffe6d1; text-shadow: 0 1px 3px rgba(50, 0, 60, .8); }

/* ---------- Alta do Dólar (clima de programa de auditório) ---------- */
.dolar {
  position: relative;
  overflow: hidden;
  padding: 30px 30px 24px;
  text-align: center;
  color: #fff;
  background: radial-gradient(ellipse at 50% 0%, #2b6fff 0%, #0b2a8f 45%, #050f3d 100%);
  isolation: isolate;
}
/* holofotes girando atrás */
.dolar-rays {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -40%;
  width: 180%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0 8deg, transparent 8deg 22deg);
  animation: swirl 40s linear infinite;
  mask-image: radial-gradient(circle, #000 20%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%);
}
.dolar-title {
  margin: 0;
  font: 800 italic clamp(36px, 6vw, 62px)/1 var(--ui);
  text-transform: uppercase;
  letter-spacing: -.01em;
  background: linear-gradient(#fff7c2, #ffd84d 45%, #d18a00 55%, #ffe27a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #06206b) drop-shadow(0 0 18px rgba(255, 210, 80, .5));
}
.dolar-title span { font-size: 1.15em; }
.dolar-sub { margin: 4px 0 20px; font: 600 14px/1.2 var(--ui); color: #b9d4ff; text-transform: uppercase; letter-spacing: .12em; }
.dolar-board { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; max-width: 900px; margin: 0 auto 22px; }
.dolar-main, .plate {
  border-radius: 16px;
  border: 2px solid #ffd84d;
  background: linear-gradient(#1d4fd6, #0a2a8a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.3), 0 0 18px rgba(255, 200, 60, .3);
}
.dolar-main { padding: 16px 18px 12px; }
.dolar-headline { margin: 0; font: 800 14px/1 var(--ui); letter-spacing: .14em; color: #ffe27a; }
.dolar-price { margin: 6px 0 2px; font: 700 clamp(36px, 5vw, 52px)/1 Consolas, "Courier New", monospace; color: #fff; text-shadow: 0 0 14px rgba(120, 190, 255, .9); }
.dolar-change, .plate-change { font: 700 15px/1 var(--ui); }
.dolar-change { margin: 4px 0 8px; }
.up { color: #7dff8a; }
.down { color: #ff8a7a; }
.dolar-spark { display: block; width: 100%; height: 70px; }
.dolar-meta { margin: 6px 0 0; font-size: 12.5px; color: #b9d4ff; line-height: 1.5; }
.dolar-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plate { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 10px; }
.plate-name { font: 800 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #ffe27a; }
.plate-price { font: 700 18px/1.1 Consolas, "Courier New", monospace; color: #fff; }
.plate-note { font-size: 11px; color: #9fbcf0; }
/* cotação escondida enquanto é a pergunta do jogo */
.secret .dolar-price, .secret .plate-price, .secret .dolar-change, .secret .plate-change, .secret .dolar-spark, .secret .dolar-meta { filter: blur(9px); user-select: none; }
.secret { position: relative; }
.secret::after { content: "?"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; font: 800 40px/1 var(--ui); color: #ffd84d; text-shadow: 0 0 12px rgba(255, 200, 60, .8); pointer-events: none; }

.quiz {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 3px solid #ffd84d;
  background: linear-gradient(#0d1f66, #081447);
  box-shadow: 0 0 0 5px #0a2a8a, 0 0 28px rgba(255, 210, 80, .35);
}
.quiz-kicker { margin: 0; font: 700 13px/1 var(--ui); letter-spacing: .16em; color: #b9d4ff; }
.quiz-kicker b { color: #ffd84d; }
.quiz-question { margin: 8px 0 14px; font: 700 clamp(18px, 2.4vw, 24px)/1.25 var(--ui); color: #fff; }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-answer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid #ffd84d;
  background: linear-gradient(#2a5cf0, #0f2f9e);
  color: #fff;
  font: 700 17px/1 var(--ui);
  cursor: pointer;
  overflow: hidden;
  transition: filter .15s;
}
.quiz-answer:hover:not(.picked):not(.right):not(.wrong), .quiz-answer:focus-visible { filter: brightness(1.2); }
.quiz-answer .letter { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #ffd84d; color: #0a2a8a; font-weight: 800; }
.quiz-answer.picked { background: linear-gradient(#ffb84d, #e07a00); animation: quiz-blink .4s steps(1) infinite; }
.quiz-answer.right { background: linear-gradient(#5be36a, #1f9a2c); animation: none; }
.quiz-answer.wrong { background: linear-gradient(#ff6a5a, #b8190a); animation: none; }
@keyframes quiz-blink { 50% { filter: brightness(1.35); } }
/* barras dos universitários */
.quiz-bars { position: absolute; right: 12px; bottom: 6px; width: 60px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); }
.quiz-bars::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: #ffd84d; }
.quiz-bars::after { content: attr(data-p); position: absolute; right: 0; bottom: 8px; font-size: 11px; color: #ffe27a; }
.quiz-result { min-height: 1.4em; margin: 12px 0 8px; font: 700 15px/1.3 var(--ui); }
.quiz-result.suspense { color: #ffd84d; }
.quiz-result.win { color: #7dff8a; }
.quiz-result.lose { color: #ffb0a6; }
.quiz-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.quiz-btn { padding: 8px 16px; border-radius: 999px; border: 1px solid #ffd84d; background: rgba(255, 216, 77, .12); color: #ffe27a; font: 600 13px/1 var(--ui); cursor: pointer; }
.quiz-btn:hover:not(:disabled) { background: rgba(255, 216, 77, .25); }
.quiz-btn:disabled { opacity: .45; cursor: not-allowed; }
.dolar-foot { margin: 14px 0 0; font-size: 11.5px; color: #8fb0e8; }

/* ---------- Pausas entre seções: imagem do grupo + GIFs rindo ---------- */
.interlude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 34px 16px;
  background: linear-gradient(#ffffff, #f1f7fb);
  border-top: 1px solid #dde9f2;
  border-bottom: 1px solid #dde9f2;
}
.interlude-photo {
  /* imagem do canal em destaque: ocupa boa parte da largura */
  width: min(500px, 58%);
  max-height: 480px;
  object-fit: contain;
  padding: 10px 10px 28px;
  background: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 10px 22px rgba(0, 30, 60, .22);
  transform: rotate(var(--r, 0deg));
}
.interlude-laugh {
  width: clamp(64px, 12vw, 120px);
  height: auto;
  max-height: 130px;
  object-fit: contain;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.18));
}

/* ---------- Sebo do Silelo ---------- */
.sebo {
  padding: 28px 30px 30px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 220, 150, .35), transparent 60%),
    linear-gradient(#fdf6ea, #f1e4cc);
  border-top: 1px solid #e3cfa8;
}
.sebo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sebo-head .wlm-heading { margin: 0; color: #4a2c10; }
.sebo-titles { margin-right: auto; }
/* vitrola + dançarino em cima do disco */
.sebo-player { position: relative; width: 122px; height: 92px; flex: none; }
.sebo-turntable { position: absolute; left: 0; bottom: 0; width: 122px; filter: drop-shadow(0 6px 6px rgba(60, 30, 0, .3)); }
.sebo-dancer { position: absolute; left: 56px; bottom: 38px; width: 46px; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); }
/* dono do sebo no rodapé da seção */
.sebo-owner { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: end; margin-top: 16px; }
.sebo-oldman { grid-row: span 2; width: 78px; filter: drop-shadow(0 6px 6px rgba(60, 30, 0, .3)); }
.sebo-bubble {
  position: relative;
  justify-self: start;
  margin: 0 0 8px;
  padding: 9px 13px;
  max-width: 420px;
  border-radius: 12px;
  border: 1px solid #c9a36a;
  background: linear-gradient(#fffdf6, #fbeed3);
  font: italic 13.5px/1.4 var(--ui);
  color: #4a2c10;
  box-shadow: 0 3px 8px rgba(60, 30, 0, .15);
}
.sebo-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  background: #fcf1da;
  border-left: 1px solid #c9a36a;
  border-bottom: 1px solid #c9a36a;
  transform: rotate(45deg);
}
.sebo-owner .sebo-foot { margin: 0; }
.sebo .eyebrow-aero { color: #b5520a; }
.sebo-tabs { display: flex; gap: 6px; }
.sebo-tabs button {
  font: 600 13px/1 var(--ui);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #b08850;
  background: linear-gradient(#fffaf0, #f3e2c2 49%, #e8d0a4 50%, #f2dfb8);
  color: #4a2c10;
  cursor: pointer;
}
.sebo-tabs button[aria-selected="true"] {
  color: #fff;
  border-color: #7a3d0a;
  background: linear-gradient(#f7b267, #e07a1f 49%, #c55f0a 50%, #eb8a2e);
  text-shadow: 0 1px 1px rgba(80, 30, 0, .6);
  box-shadow: 0 0 10px rgba(240, 150, 50, .6);
}
.sebo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; min-height: 220px; }
.lp { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
/* capa + disco que sai da capa ao passar o mouse */
.lp-sleeve { position: relative; aspect-ratio: 1; }
.lp-disc {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #e0452b 0 15%, #111 15.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #1a1a1a 0 2px, #262626 2px 3px);
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
}
.lp-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 40%); }
.lp-cover {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: linear-gradient(135deg, #d9c29a, #b8946a);
  box-shadow: 0 8px 18px rgba(60, 30, 0, .35), inset 0 0 0 1px rgba(255,255,255,.3);
}
.lp:hover .lp-disc, .lp:focus-visible .lp-disc { transform: translateX(34%) rotate(40deg); }
.lp:hover .lp-cover, .lp:focus-visible .lp-cover { transform: translateX(-6%); transition: transform .45s; }
.lp-price {
  position: absolute;
  z-index: 2;
  right: -6px;
  top: -8px;
  padding: 5px 8px;
  border-radius: 999px;
  font: 700 12.5px/1 var(--ui);
  color: #3a1d00;
  background: linear-gradient(#fff2a0, #ffd23c 50%, #f5b400 51%, #ffd84d);
  border: 1px solid #8a5a00;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transform: rotate(6deg);
}
.lp-name { font: 600 13.5px/1.3 var(--ui); color: #3a2410; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-more { font-size: 12px; color: #b5520a; font-weight: 600; }
.sebo-empty { grid-column: 1 / -1; padding: 40px 10px; text-align: center; color: #8a6a44; font-style: italic; }
.sebo-foot { margin: 18px 0 0; font-size: 12px; color: #7a5a34; }
.sebo-foot a { color: #b5520a; }

/* ---------- Manchetes do g1 ---------- */
.headlines {
  padding: 26px 30px 30px;
  background: linear-gradient(#f4fbff, #e2f2fc);
  border-top: 1px solid #cfe3f1;
}
.headlines-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.headlines-head .wlm-heading { margin: 0; }
.headlines-source { font-size: 12px; color: #6d7b8a; }
.headlines-tabs { display: flex; gap: 6px; margin-left: auto; }
.headlines-tabs button {
  font: 600 13px/1 var(--ui);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #9fb8cc;
  background: linear-gradient(#ffffff, #eef3f7 49%, #dfe7ee 50%, #f1f5f8);
  color: #2c4c7c;
  cursor: pointer;
}
.headlines-tabs button[aria-selected="true"] {
  color: #fff;
  border-color: #1b6fa8;
  background: linear-gradient(var(--aqua-1), #6cc3f5 48%, var(--aqua-2) 50%, #5ed0ff);
  text-shadow: 0 1px 1px rgba(0,50,100,.6);
}

/* ---------- Metrópolis (TV Cultura) ---------- */
.metropolis {
  padding: 26px 30px 30px;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(#262a3a, #111420);
  color: #e8ecf5;
  border-top: 1px solid #0a0c14;
}
.metropolis .wlm-heading { color: #fff; margin: 0 0 16px; }
.metropolis .eyebrow-aero { color: #ffd84d; }
.metropolis-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: center; }
/* televisor com moldura de vidro escuro */
.metropolis-tv {
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(#4a4f63, #1d2030 55%, #2b2f42);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.5), 0 14px 30px rgba(0,0,0,.5);
}
.metropolis-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000; box-shadow: inset 0 0 20px rgba(0,0,0,.8); }
.metropolis-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.metropolis-cover { position: absolute; inset: 0; width: 100%; border: 0; background: #000 center / cover no-repeat; cursor: pointer; }
.metropolis-cover::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0)); pointer-events: none; }
.metropolis-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(#bfe9ff 0%, #6cc3f5 48%, #2b9be3 50%, #5ed0ff 100%);
  border: 1px solid #1b6fa8;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), 0 6px 18px rgba(0,0,0,.5);
  transition: transform .15s;
}
.metropolis-play::before { content: ""; position: absolute; left: 30px; top: 22px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.metropolis-cover:hover .metropolis-play, .metropolis-cover:focus-visible .metropolis-play { transform: scale(1.08); }
.metropolis-info h3 { margin: 0 0 6px; font: 700 22px/1.25 var(--ui); color: #fff; }
.metropolis-date { margin: 0 0 12px; font-size: 13px; color: #ffd84d; }
.metropolis-summary { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: #c9d1e3; }
.metropolis-summary p { margin: 0 0 8px; }
.metropolis-note { font-style: italic; color: #9aa6c0; }
.metropolis-chapters { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.metropolis-chapters button {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #e8ecf5;
  font: 13.5px/1.35 var(--ui);
  text-align: left;
  cursor: pointer;
}
.metropolis-chapters button:hover, .metropolis-chapters button:focus-visible { background: rgba(255, 216, 77, .14); }
.metropolis-chapters .time { flex: none; min-width: 44px; font: 700 12.5px/1.35 Consolas, monospace; color: #ffd84d; }

.newsletter-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.newsletter-toggle input { width: 17px; height: 17px; accent-color: #3a9a12; }

/* ---------- Notícias da Europa (Euronews) ---------- */
.europa { padding: 24px 30px 28px; background: linear-gradient(#f3f7fc, #e3ecf7); border-top: 1px solid #c9d8ea; }
.europa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.europa-title { margin: 0; font: 300 30px/1.1 var(--ui); color: #0c2a5c; }
.europa-title b { font-weight: 800; color: #1d4fbf; }
.europa-fonte { font: 600 13px/1 var(--ui); color: #1d4fbf; text-decoration: none; }
.europa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.eu-card { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; color: #0c1a33; text-decoration: none; box-shadow: 0 4px 14px rgba(12,42,92,.12); transition: transform .2s; }
.eu-card:hover { transform: translateY(-2px); }
.eu-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #dfe8f4; }
.eu-lead { grid-column: span 2; grid-row: span 2; }
.eu-corpo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.eu-titulo { font: 700 14.5px/1.3 var(--ui); }
.eu-lead .eu-titulo { font-size: 22px; }
.eu-resumo { font: 14.5px/1.45 Georgia, serif; color: #3a4a60; }
.eu-meta { margin-top: auto; font-size: 11.5px; font-weight: 600; color: #1d4fbf; }

/* ---------- Futebol e Tecnologia & diversão (duas colunas, como Tua cidade) ---------- */
.futebol { padding: 24px 30px 28px; background: linear-gradient(#0f5c2e, #0b4423); color: #fff; }
.futebol-title { margin: 0 0 14px; font: 900 30px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; }
.tecnologia { padding: 24px 30px 28px; background: linear-gradient(#0e1a2e, #17294a); color: #e8f0ff; }
.tec-title { margin: 0 0 14px; font: 300 30px/1 var(--ui); color: #fff; }
.tec-title b { font-weight: 800; color: #7fe3ff; }
.dupla-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dupla-fonte { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 7px; border-bottom: 2px solid rgba(255,255,255,.35); font: 700 15px/1.2 var(--ui); }
.dupla-fonte a { font: 600 12px/1 var(--ui); color: #bfe9ff; text-decoration: none; }
.yt-lista { display: grid; gap: 12px; }
.yt-card { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: start; }
.yt-card.yt-grande { grid-template-columns: 1fr; }
.yt-player { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.yt-capa, .yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-capa { display: grid; place-items: center; background: #000 center / cover no-repeat; cursor: pointer; }
.yt-play { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(230,0,0,.9); color: #fff; font-size: 18px; }
.yt-grande .yt-play { width: 68px; height: 68px; font-size: 28px; }
.yt-card figcaption { display: flex; flex-direction: column; gap: 4px; }
.yt-card figcaption a { color: #fff; font: 700 14.5px/1.3 var(--ui); text-decoration: none; }
.yt-grande figcaption a { font-size: 18px; }
.yt-card figcaption span { font-size: 12px; opacity: .75; }
.nt-lista { list-style: none; margin: 0; padding: 0; }
.nt-lista li + li { border-top: 1px solid rgba(255,255,255,.15); }
.nt-lista a { display: flex; gap: 12px; padding: 9px 2px; color: inherit; text-decoration: none; }
.nt-lista img { flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: rgba(255,255,255,.1); }
.nt-titulo { display: block; font: 700 14px/1.3 var(--ui); }
.nt-lista a:hover .nt-titulo { text-decoration: underline; }
.nt-cred { display: block; margin-top: 4px; font-size: 11.5px; opacity: .7; }

/* ---------- Entretenimento (vídeo do DevLast) ---------- */
.entretenimento { padding: 24px 30px 28px; background: linear-gradient(#1a1030, #2d1b55); color: #eee; }
.ent-title { margin: 0 0 14px; font: 900 28px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ent-box { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr; gap: 20px; align-items: center; }
.ent-player-wrap { position: relative; }
.ent-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.ent-player.ent-short { aspect-ratio: 9 / 16; max-height: 560px; margin: 0 auto; }
.ent-player iframe, .ent-capa { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ent-capa { display: grid; place-items: center; background: #000 center / cover no-repeat; cursor: pointer; }
.ent-play { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(230,0,0,.9); color: #fff; font-size: 30px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.ent-novo { position: absolute; z-index: 2; top: -14px; left: -10px; padding: 6px 14px; border-radius: 6px; background: linear-gradient(#fff36b, #ffb300); color: #7a1f00; font: 900 18px/1 Impact, 'Arial Black', sans-serif; letter-spacing: .1em; transform: rotate(-6deg); animation: ent-brilho 1.2s ease-in-out infinite; }
@keyframes ent-brilho { 0%, 100% { box-shadow: 0 0 6px 2px rgba(255,230,0,.6); filter: brightness(1); } 50% { box-shadow: 0 0 22px 8px rgba(255,230,0,.95); filter: brightness(1.25); } }
.ent-info h3 { margin: 0 0 6px; font: 800 22px/1.25 var(--ui); color: #fff; }
.ent-info p { margin: 0 0 12px; color: #c9b8f0; font-size: 14px; }

/* ---------- Outfit do Dia (editorial europeu) ---------- */
.outfit { padding: 28px 30px 32px; background: #f6f3ee; color: #111; border-top: 1px solid #ddd5c8; }
.outfit-head, .receita-head { text-align: center; margin-bottom: 18px; }
.outfit-eyebrow, .receita-eyebrow { margin: 0 0 4px; font: 600 11px/1 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: #8a7f70; }
.outfit-title, .receita-title { margin: 0; font: 400 40px/1 'Bodoni Moda', Didot, Georgia, serif; letter-spacing: .02em; }
.outfit-title em, .receita-title em { font-style: italic; }
.outfit-looks { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.outfit-look { margin: 0; width: min(340px, 44%); }
.outfit-principal { width: min(420px, 52%); }
.outfit-look img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; background: #e8e1d6; }
.outfit-look figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; border-top: 1px solid #111; margin-top: 8px; }
.outfit-look figcaption b { font: italic 400 17px/1.2 'Bodoni Moda', Georgia, serif; }
.outfit-look figcaption span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #6d6356; }

/* ---------- Receita do Dia (Provença) ---------- */
.receita { padding: 28px 30px 32px; background: #fbf7ef; color: #2b2418; border-top: 1px solid #e5dccb; }
.receita-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.receita-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: #eee3cf; }
.receita-nome { margin: 0 0 4px; font: 400 28px/1.15 'Bodoni Moda', Georgia, serif; }
.receita-rende { margin: 0 0 12px; font: italic 14px/1.3 Georgia, serif; color: #7a6a50; }
.receita-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; }
.receita-cols h4 { margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid #2b2418; font: 600 11px/1 var(--ui); letter-spacing: .25em; text-transform: uppercase; }
.receita-cols ul, .receita-cols ol { margin: 0; padding-left: 18px; font: 14px/1.5 Georgia, serif; }
.receita-cols li { margin-bottom: 5px; }
.receita-credito { margin: 16px 0 0; font-size: 12.5px; color: #7a6a50; }
.receita-credito a { color: #2b2418; }

/* ---------- Teste musical ---------- */
.musica { padding: 26px 30px 30px; background: linear-gradient(#fdfbf5, #f1ece0); color: #222; border-top: 1px solid #ddd3bd; }
.musica-head { margin-bottom: 12px; }
.musica-title { margin: 0; font: 400 34px/1 Georgia, 'Times New Roman', serif; color: #3a2a10; }
.musica-title b { font-weight: 700; }
.musica-sub { margin: 6px 0 0; font: italic 14px/1.3 Georgia, serif; color: #6a5a40; }
.musica-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.musica-opcoes { display: grid; gap: 12px; }
.musica-opcao { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px; border: 2px solid #d8ccb0; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; }
.musica-opcao:hover { border-color: #b08a3a; box-shadow: 0 4px 12px rgba(120,90,30,.15); }
.musica-letra { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3a2a10; color: #fff; font: 700 16px/1 Georgia, serif; }
.musica-partitura { flex: 1; min-width: 0; overflow-x: auto; }
.musica-partitura svg { display: block; }
.musica-opcoes.respondido .certa { border-color: #3a9a12; background: #effbe6; }
.musica-opcoes.respondido .certa .musica-letra { background: #3a9a12; }
.musica-opcoes.respondido .errada { border-color: #e0a0a0; opacity: .75; }
.musica-resultado { min-height: 1.4em; margin: 12px 0 0; font: 15px/1.4 Georgia, serif; color: #3a2a10; }

/* ---------- Fofoca dos Famosos (revista de fofoca) ---------- */
.fofoca { padding: 26px 30px 30px; background: radial-gradient(circle at 15% 10%, #ff9fd2, transparent 40%), linear-gradient(135deg, #ff2d8a, #b3127a); color: #fff; }
.fofoca-head { margin-bottom: 16px; }
.fofoca-title { margin: 0; font: 900 44px/1 Impact, 'Arial Black', sans-serif; text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 3px 3px 0 #6a0045; }
.fofoca-title span { display: inline-block; padding: 0 10px; background: #ffe600; color: #d4006a; transform: rotate(-3deg); text-shadow: none; box-shadow: 4px 4px 0 #6a0045; }
.fofoca-title b { color: #ffe600; }
.fofoca-sub { margin: 10px 0 0; font: italic 13px/1.3 Georgia, serif; color: #ffe0f1; }
.fofoca-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ff-card { position: relative; display: flex; flex-direction: column; background: #fff; color: #222; border-radius: 10px; overflow: hidden; text-decoration: none; box-shadow: 0 8px 18px rgba(80,0,50,.35); transition: transform .2s; }
.ff-card:hover { transform: rotate(-1deg) scale(1.02); }
.ff-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: #fcd; }
.ff-lead { grid-column: span 2; grid-row: span 2; }
.ff-lead img { aspect-ratio: 16 / 11; }
.ff-selo { position: absolute; top: 8px; left: 8px; padding: 3px 7px; background: #ffe600; color: #d4006a; font: 900 11px/1 Impact, 'Arial Black', sans-serif; letter-spacing: .06em; transform: rotate(-4deg); box-shadow: 2px 2px 0 #6a0045; }
.ff-corpo { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; }
.ff-titulo { font: 800 14.5px/1.25 var(--ui); color: #1a0010; }
.ff-lead .ff-titulo { font-size: 22px; }
.ff-resumo { font: 14px/1.4 Georgia, serif; color: #444; }
.ff-credito { margin-top: auto; font-size: 11.5px; color: #b3127a; font-weight: 600; }

/* ---------- BOM DIA! ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bomdia { position: relative; overflow: hidden; padding: 26px 30px 34px; border-bottom: 6px double #e79ac4;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1.5px, transparent 2px) 0 0 / 38px 38px,
    radial-gradient(circle, rgba(255,215,120,.8) 0 1px, transparent 1.6px) 19px 19px / 38px 38px,
    radial-gradient(ellipse at 50% 0%, #fff4fa 0%, #ffd6ea 45%, #e9c7f5 100%); }
.bomdia::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 3px) 7px 11px / 61px 53px;
  animation: bomdia-brilho 2.6s steps(2) infinite; }
@keyframes bomdia-brilho { 50% { opacity: .15; } }
.bomdia-topo { position: relative; text-align: center; margin-bottom: 18px; }
.bomdia-flor { position: absolute; font-size: 44px; filter: drop-shadow(0 3px 4px rgba(120,0,60,.25)); animation: bomdia-flor 5s ease-in-out infinite; }
.bomdia-flor.f1 { left: 4%; top: 6px; } .bomdia-flor.f2 { right: 5%; top: 0; animation-delay: -1.5s; }
.bomdia-flor.f3 { left: 13%; top: 74px; font-size: 32px; animation-delay: -3s; } .bomdia-flor.f4 { right: 14%; top: 78px; font-size: 30px; animation-delay: -2s; }
@keyframes bomdia-flor { 50% { transform: translateY(-6px) rotate(6deg); } }
.bomdia-title { position: relative; margin: 0; font: 400 clamp(64px, 12vw, 124px)/1.05 'Great Vibes', 'Dancing Script', cursive; color: #d6247a;
  background: linear-gradient(100deg, #b8006b 0%, #ff4fa3 30%, #fff1a8 45%, #ffcf3f 52%, #ff4fa3 68%, #b8006b 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #fff) drop-shadow(0 4px 6px rgba(140,0,70,.35));
  animation: bomdia-reflexo 4s linear infinite; }
@keyframes bomdia-reflexo { to { background-position: -250% 0; } }
.bomdia-data { margin: 4px 0 2px; font: 700 22px/1.2 'Dancing Script', cursive; color: #8a1f5c; }
.bomdia-data::first-letter { text-transform: uppercase; }
.thought-rubric { position: static !important; grid-column: 1 / -1; width: 100%; margin: 0 0 4px !important; font-size: 30px !important; gap: 10px !important; }
.thought-rubric .hero-arrow { width: 62px; }
.bomdia-frase { margin: 4px auto 0; max-width: 560px; font: 600 20px/1.35 'Dancing Script', cursive; color: #6b2a8a; }
.bomdia-cols { position: relative; display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.bomdia-sub { margin: 0 0 12px; font: 700 26px/1.1 'Dancing Script', cursive; color: #b3126e; text-align: center; }
.bomdia-gifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bd-card { margin: 0; padding: 10px; background: #fff; border-radius: 6px; box-shadow: 0 8px 18px rgba(140,0,80,.2);
  border: 3px solid #fff; outline: 2px dotted #e98bbf; outline-offset: -8px; transform: rotate(var(--r, 0deg)); }
.bd-card:nth-child(1) { --r: -2deg; } .bd-card:nth-child(3) { --r: 2deg; }
.bd-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: #ffe4f1; }
.bd-card figcaption { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bd-btn { flex: 1 1 auto; padding: 6px 8px; border: 1px solid #d0679e; border-radius: 14px; background: linear-gradient(#fff, #ffd1e6); color: #8a1450; font: 700 12px/1 var(--ui); text-align: center; text-decoration: none; cursor: pointer; }
.bd-zap { border-color: #1ea952; background: linear-gradient(#e2ffe9, #7fe0a0); color: #0b4a20; }
.cafe-dica { position: relative; background: #fffafc; border: 3px solid #fff; outline: 2px dotted #e98bbf; outline-offset: -9px; border-radius: 10px; padding: 18px 18px 16px; box-shadow: 0 8px 20px rgba(140,0,80,.18); }
.cafe-dica .bomdia-sub { font-size: 30px; }
.louro-row { display: flex; justify-content: center; }
.louro img { display: block; width: 120px; height: 120px; image-rendering: pixelated; }
.louro { flex: none; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 90%; }
.louro:hover { animation: egg-wobble .7s; }
.louro-balao { position: relative; margin: 0; padding: 9px 12px; background: #fff; border: 1px solid #efb3d2; border-radius: 14px; font-size: 13.5px; line-height: 1.35; color: #5a2a45; }
.cafe-nome { margin: 12px 0 4px; font: 700 34px/1.05 'Dancing Script', cursive; color: #b3126e; text-align: center; }
.cafe-texto { margin: 0 0 10px; font: 15px/1.5 Georgia, serif; color: #4a2a3a; text-align: center; }
.cafe-tag { margin: 0 0 12px; font: 600 13px/1.4 var(--ui); color: #7a2a8a; text-align: center; word-break: break-word; }

/* ---------- Previsão do tempo (gadget do Vista) ---------- */
.tempo { padding: 20px 30px; background: linear-gradient(#bfe6ff, #e9f7ff); }
.tempo-gadget { border-radius: 18px; padding: 16px 20px; color: #fff; background: linear-gradient(160deg, #3fa9f5, #1565c0 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(10,60,120,.3); position: relative; overflow: hidden; }
.tempo-gadget::before { content: ''; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.tempo-agora { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tempo-icone { font-size: 64px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.tempo-cidade { margin: 0; font: 700 14px/1 var(--ui); opacity: .9; }
.tempo-temp { margin: 2px 0; font: 300 58px/1 var(--ui); }
.tempo-temp small { font-size: 24px; vertical-align: top; }
.tempo-desc { margin: 0; font-size: 14px; }
.tempo-extra { margin-left: auto; font-size: 13px; line-height: 1.6; text-align: right; opacity: .95; }
.tempo-extra p { margin: 0; }
.tempo-horas, .tempo-dias { position: relative; display: flex; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; overflow-x: auto; }
.tempo-horas li, .tempo-dias li { flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 10px; background: rgba(255,255,255,.14); font-size: 12.5px; }
.tempo-horas b, .tempo-dias b { font-size: 22px; font-weight: 400; }
.tempo-horas small { opacity: .8; }
.tempo-dias li { flex-basis: 76px; text-transform: capitalize; }
.tempo-fonte { position: relative; margin: 10px 0 0; font-size: 11.5px; opacity: .85; }
.tempo-fonte a { color: #fff; }

/* ---------- Mande sua charge ---------- */
.charge-envio { padding: 20px 30px 26px; background: #fff3e0; border-top: 1px dashed #e0a060; }
.envio-title { margin: 0 0 4px; font: 300 24px/1.1 var(--ui); color: #d85a00; }
.envio-title b { font-weight: 800; }
.charge-envio > p { margin: 0 0 12px; font-size: 14px; color: #5a4020; }
.envio-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: end; }
.envio-form label { display: flex; flex-direction: column; gap: 4px; font: 600 12.5px/1.2 var(--ui); color: #5a4020; }
.envio-form .envio-ok { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }

/* ---------- Frase em Libras ---------- */
.libras { padding: 22px 30px; background: linear-gradient(135deg, #e8f0ff, #f3e8ff); }
.libras-box { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; border-radius: 16px; padding: 18px 20px; background: rgba(255,255,255,.8); border: 1px solid #cdb8f0; box-shadow: 0 6px 18px rgba(80,40,140,.12); }
.libras-video { margin: 0; flex: 0 0 min(320px, 100%); }
.libras-video video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #ddd4f0; box-shadow: 0 6px 16px rgba(80,40,140,.2); }
.libras-video figcaption { margin-top: 6px; font-size: 11.5px; color: #6a5a8a; text-align: center; }
.libras-video a { color: #6a3fc0; }
.libras-texto { flex: 1 1 260px; }
.libras-eyebrow { margin: 0 0 6px; font: 700 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #6a3fc0; }
.libras-title { margin: 0; font: 800 30px/1.15 var(--ui); color: #2a1660; }
.libras-como { margin: 6px 0 12px; font-size: 14px; color: #5a4a80; }
.libras-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.libras-nota { margin: 12px 0 0; font-size: 12px; color: #6a5a8a; }

/* Quote do Ed: contexto, contador e compartilhar */
.ed-contexto { margin: 6px 0 0; font: italic 14px/1.35 Georgia, serif; color: #5a6f82; }
.ed-contador { margin: 6px 0 10px; font-size: 12.5px; color: #5a6f82; }
.ed-compartilhar { margin-left: 8px; }

/* ---------- Títulos de caderno (como no jornal de papel) ---------- */
.caderno-sep { padding: 22px 30px 16px; background: #fbf9f4; color: #111; text-align: center; border-top: 4px solid #111; }
.caderno-rotulo { display: block; font: 600 11px/1 var(--ui); letter-spacing: .4em; text-transform: uppercase; color: #6d6356; }
.caderno-nome { margin: 6px 0 6px; padding: 6px 0; border-top: 1px solid #111; border-bottom: 1px solid #111; font: 700 clamp(30px, 5vw, 46px)/1.05 'Bodoni Moda', Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.caderno-sub { margin: 0; font: italic 14px/1.3 Georgia, serif; color: #6d6356; }
.aero-menu-list .menu-grupo { padding: 8px 12px 3px; font: 700 10.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #6d7b8a; pointer-events: none; }
.aero-menu-list .menu-grupo:not(:first-child) { margin-top: 4px; border-top: 1px solid rgba(0,0,0,.08); }

/* ---------- Palavra cruzada (cara de jornal) ---------- */
.cruzada { --cz-cell: 32px; padding: 26px 30px 30px; background: #f7f3ea; border-top: 3px double #222; color: #111; overflow: hidden; }
.cruzada-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #222; }
.cruzada-title { margin: 0; font: 400 32px/1 Georgia, 'Times New Roman', serif; color: #111; text-transform: uppercase; letter-spacing: .04em; }
.cruzada-title b { font-weight: 700; }
.cruzada-status { margin-left: auto; font: italic 13px/1.3 Georgia, serif; color: #555; min-height: 1.3em; }
.cruzada-painel { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.cz-box { background: none; border: 0; padding: 0; box-shadow: none; }
.cruzada-grid { display: grid; gap: 0; border: 2px solid #111; background: #111; width: max-content; }
.cz-preta { width: var(--cz-cell); height: var(--cz-cell); background: #111; }
.cz-cell { position: relative; width: var(--cz-cell); height: var(--cz-cell); background: #fff; outline: 1px solid #111; transition: transform .7s cubic-bezier(.4,1.5,.5,1), opacity .5s, background .2s; }
.cz-cell input { width: 100%; height: 100%; border: 0; padding: 4px 0 0; background: transparent; text-align: center; font: 700 17px/1 Georgia, serif; color: #111; text-transform: uppercase; caret-color: transparent; cursor: pointer; }
.cz-cell input:focus { outline: none; background: #ffe98a; }
.cz-num { position: absolute; left: 2px; top: 1px; font: 400 9px/1 Georgia, serif; color: #111; pointer-events: none; }
.cz-ativa { background: #dcebf7; }
.cz-certa input { color: #1d5fa8; }
.cz-errada { background: #ffd6d0; }
.cz-dada input { color: #888; font-style: italic; }
.cz-pula { animation: cz-pula .45s; }
@keyframes cz-pula { 50% { transform: scale(1.18); } }
.cz-dicas { columns: 2; column-gap: 24px; font: 14px/1.4 Georgia, serif; }
.cz-dicas h3 { margin: 0 0 6px; font: 700 13px/1 Georgia, serif; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid #111; padding-bottom: 4px; break-after: avoid; }
.cz-dicas ol { list-style: none; margin: 0 0 14px; padding: 0; }
.cz-dicas li { padding: 2px 4px; cursor: pointer; break-inside: avoid; transition: transform .5s cubic-bezier(.4,1.5,.5,1); }
.cz-dicas li b { display: inline-block; min-width: 20px; }
.cz-dicas li.ativa { background: #dcebf7; }
.cz-dicas li.feita { color: #999; text-decoration: line-through; }
.cruzada-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cruzada-acoes button { font: 13px Georgia, serif; padding: 6px 12px; border: 1px solid #111; background: #fff; color: #111; border-radius: 0; cursor: pointer; }
.cruzada-acoes button:hover { background: #111; color: #fff; }
/* trollagens (silenciosas): transições longas para o leitor só perceber depois que começou */
.cruzada { transition: transform 45s linear; transform-origin: 50% 0; }
.cz-cell { transition: transform 30s ease-in-out, filter 25s linear, background .2s; }
.cz-cell::after { content: ''; position: absolute; inset: 0; background: #111; opacity: 0; transition: opacity 35s linear; pointer-events: none; }
.tr-escura::after { opacity: .6; }
.cz-cell input { transition: opacity 30s linear; }
.tr-fantasma input { opacity: .15; }
.tr-fantasma input:focus { opacity: 1; transition: opacity .2s; }
.tr-gira { animation: tr-gira 60s linear infinite; z-index: 1; }
@keyframes tr-gira { to { transform: rotate(360deg); } }
.cz-dicas li { transition: transform 30s ease-in-out !important; }

/* ---------- Charge da semana ---------- */
.charge { padding: 26px 30px 30px; background: #fffdf5; border-top: 1px solid #e7dfc8; }
.charge-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.charge-title { margin: 0; font: 300 30px/1.1 var(--ui); color: #d85a00; }
.charge-title b { font-weight: 800; }
.charge-meta { font-size: 13px; color: #6d6150; }
.charge-meta b { color: #3b3024; }
.charge-nav { margin-left: auto; display: flex; gap: 6px; }
.charge-nav button:disabled { opacity: .4; cursor: default; }
.charge-fig { margin: 0; }
.charge-fig img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px #e1d6bb, 0 8px 22px rgba(80,50,0,.15); cursor: zoom-in; background: #fff; }
.charge-zoom { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; padding: 20px; background: rgba(10,10,10,.85); cursor: zoom-out; }
.charge-zoom img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* ---------- Lugar do dia (tela de bloqueio do Windows 10) ---------- */
.lugar { padding: 0; background: #0b1a2a; }
.lugar-foto { position: relative; min-height: min(62vw, 560px); background: #0b1a2a center / cover no-repeat; color: #fff; overflow: hidden; }
.lugar-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.55)); pointer-events: none; }
.lugar-eyebrow { position: absolute; z-index: 1; top: 16px; left: 22px; margin: 0; padding: 5px 10px; border-radius: 4px; background: rgba(0,0,0,.35); font: 600 12px/1 'Segoe UI', var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.lugar-relogio { position: absolute; z-index: 1; left: 30px; bottom: 26px; display: flex; flex-direction: column; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.lugar-hora { font: 200 clamp(56px, 10vw, 104px)/1 'Segoe UI Light', 'Segoe UI', var(--ui); }
.lugar-data { font: 400 clamp(18px, 2.6vw, 28px)/1.2 'Segoe UI', var(--ui); }
.lugar-data::first-letter { text-transform: uppercase; }
.lugar-info { position: absolute; z-index: 1; right: 24px; bottom: 24px; max-width: 46%; text-align: right; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.lugar-titulo { margin: 0 0 4px; font: 600 clamp(18px, 2.4vw, 26px)/1.2 'Segoe UI', var(--ui); }
.lugar-local { margin: 0 0 6px; font: 400 14px/1.35 'Segoe UI', var(--ui); }
.lugar-credito { margin: 0; font: 400 12px/1.3 'Segoe UI', var(--ui); opacity: .85; }
.lugar-credito a { color: #fff; }

/* ---------- Tua cidade ---------- */
.cidade { padding: 26px 30px 30px; background: linear-gradient(#f4fbff, #e3f2fb); border-top: 1px solid #bcdcef; }
.cidade-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cidade-title { margin: 0; font: 300 28px/1.1 var(--ui); color: #0b4f7a; }
.cidade-title b { font-weight: 700; }
.cidade-pick { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--ui); color: #235; }
.cidade-pick select { padding: 5px 8px; border: 1px solid #8fb9d6; border-radius: 4px; background: linear-gradient(#fff, #e8f3fa); font: 13px var(--ui); color: #123; }
.cidade-updated { margin-left: auto; font-size: 12px; color: #5b7d94; }
.cidade-vazio { margin: 0; color: #4a6a80; font-size: 14px; }
.cidade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cidade-fonte { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 2px solid #7fb8dc; font: 700 15px/1.2 var(--ui); color: #0b4f7a; }
.cidade-fonte a { font: 600 12px/1 var(--ui); color: #1f79b5; text-decoration: none; }
.cidade-list { list-style: none; margin: 0; padding: 0; }
.cidade-list li + li { border-top: 1px solid #cfe3f0; }
.cidade-list a { display: flex; gap: 12px; padding: 10px 2px; color: inherit; text-decoration: none; }
.cidade-list a:hover .cidade-t { color: #1f79b5; text-decoration: underline; }
.cidade-list img { flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: #d6e8f3; box-shadow: 0 1px 3px rgba(0,40,80,.2); }
.cidade-t { display: block; font: 700 14.5px/1.3 var(--ui); color: #123; }
.cidade-r { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: #4a6072; }
.cidade-cred { display: block; margin-top: 4px; font-size: 11.5px; color: #5b7d94; font-style: italic; }

/* ---------- Hoje no Letterboxd ---------- */
.letterboxd { padding: 26px 30px 30px; background: #14181c; color: #9ab; border-top: 1px solid #2c3440; }
.lb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.lb-dots { display: inline-flex; gap: 4px; }
.lb-dots i { width: 16px; height: 16px; border-radius: 50%; }
.lb-dots i:nth-child(1) { background: #ff8000; }
.lb-dots i:nth-child(2) { background: #00e054; }
.lb-dots i:nth-child(3) { background: #40bcf4; }
.lb-title { margin: 0; font: 300 30px/1.1 var(--ui); color: #fff; }
.lb-title b { font-weight: 700; }
.lb-updated { margin-left: auto; font-size: 12px; color: #678; }
.lb-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; }
.lb-label { margin: 0 0 10px; font: 700 11.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #9ab; border-bottom: 1px solid #2c3440; padding-bottom: 8px; }
.lb-review-inner { display: flex; gap: 14px; }
.lb-review-poster { width: 96px; flex: none; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.5); background: #2c3440; }
.lb-review h3 { margin: 0 0 4px; font: 700 20px/1.2 var(--ui); color: #fff; }
.lb-review h3 small { font-weight: 400; color: #9ab; }
.lb-review-meta { margin: 0 0 10px; font-size: 13px; }
.lb-review-meta b { color: #fff; }
.lb-stars { color: #00e054; letter-spacing: 1px; }
.lb-review-text { margin: 0 0 10px; font: 400 15px/1.55 Georgia, serif; color: #def; transition: filter .3s; }
.lb-review-text.spoiler { filter: blur(6px); user-select: none; }
.lb-spoiler { display: block; margin: -4px 0 10px; padding: 5px 10px; border: 1px solid #456; border-radius: 3px; background: #2c3440; color: #def; font: 600 12px/1 var(--ui); cursor: pointer; }
.lb-link { font: 600 13px/1 var(--ui); color: #40bcf4; text-decoration: none; }
.lb-link:hover { color: #fff; }
.lb-films { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.lb-films a { position: relative; display: flex; flex-direction: column; gap: 5px; color: #9ab; text-decoration: none; }
.lb-films img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #2c3440; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow .15s; }
.lb-films a:hover img, .lb-films a:focus-visible img { box-shadow: 0 0 0 3px #00e054; }
.lb-rank { position: absolute; top: 4px; left: 4px; min-width: 24px; padding: 3px 5px; border-radius: 3px; background: rgba(20, 24, 28, .88); color: #fff; font: 800 13px/1 var(--ui); text-align: center; }
.lb-film-name { font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Metrópoles (seção própria) ---------- */
.metropoles-news { background: linear-gradient(#fff, #f4f4f4); border-top: 4px solid #111; }
.met-title { margin: 0; font: 900 34px/1 var(--ui); letter-spacing: -.02em; color: #111; text-transform: uppercase; }
.metropoles-news .headline-kicker { color: #e3001b; }
.metropoles-news .headline-more { color: #e3001b; }
.metropoles-news .headlines-source b { color: #e3001b; }

/* ---------- Dior (moda e perfumes) ---------- */
.dior {
  padding: 36px 30px 30px;
  background: #f5f3ef;
  color: #1a1a1a;
  border-top: 1px solid #d9d4cc;
  border-bottom: 1px solid #d9d4cc;
}
.dior-head { text-align: center; margin-bottom: 22px; }
.dior-kicker { margin: 0; font: 400 11px/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; color: #8a8278; }
.dior-heading { margin: 10px 0 4px; font: 400 64px/1 "Bodoni Moda", "Didot", Georgia, serif; letter-spacing: .06em; color: #111; }
.dior-sub { margin: 0 0 16px; font: italic 400 16px/1.3 "Bodoni Moda", Georgia, serif; color: #5a534b; }
.dior-tabs { display: inline-flex; border: 1px solid #1a1a1a; }
.dior-tabs button { padding: 8px 22px; border: 0; background: transparent; font: 400 12px/1 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #1a1a1a; cursor: pointer; }
.dior-tabs button[aria-selected="true"] { background: #1a1a1a; color: #f5f3ef; }
.dior-list { list-style: none; max-width: 780px; margin: 0 auto; padding: 0; counter-reset: dior; }
.dior-list li { border-top: 1px solid #d9d4cc; }
.dior-list li:last-child { border-bottom: 1px solid #d9d4cc; }
.dior-list a { display: flex; gap: 18px; align-items: center; padding: 14px 4px; color: inherit; text-decoration: none; transition: padding .2s, background .2s; }
.dior-list a:hover, .dior-list a:focus-visible { padding-left: 12px; background: rgba(0,0,0,.03); }
.dior-thumb { flex: none; width: 120px; aspect-ratio: 8 / 5; overflow: hidden; background: #ece7df; box-shadow: 0 0 0 1px #d9d4cc; }
.dior-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .4s; }
.dior-list a:hover .dior-thumb img { transform: scale(1.06); }
.dior-thumb.vazio { display: grid; place-items: center; }
.dior-thumb.vazio::after { content: "DIOR"; font: 400 18px/1 "Bodoni Moda", Georgia, serif; letter-spacing: .25em; color: #b3aa9e; }
.dior-num { flex: none; font: 400 22px/1 "Bodoni Moda", Georgia, serif; color: #b3aa9e; }
.dior-body { display: flex; flex-direction: column; gap: 4px; }
.dior-title { font: 400 19px/1.35 "Bodoni Moda", Georgia, serif; color: #111; }
.dior-meta { font: 400 11.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #8a8278; }
.dior-foot { margin: 16px 0 0; text-align: center; font-size: 11.5px; color: #8a8278; }
.headlines-source b { color: #c4170c; }
.headline-lead,
.headline-card {
  display: flex;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 22px rgba(0, 40, 90, .18), inset 0 1px 0 #fff;
  transition: transform .2s, box-shadow .2s;
}
.headline-lead:hover, .headline-card:hover,
.headline-lead:focus-visible, .headline-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 40, 90, .28), 0 0 16px rgba(120, 210, 255, .7); }
.headline-pic { position: relative; flex: none; background: #cfe3f1; overflow: hidden; }
.headline-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* reflexo de vidro por cima da foto */
.headline-pic::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.headline-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-width: 0; }
.headline-kicker { font: 700 11px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: #c4170c; }
.headline-title { font: 700 16px/1.3 var(--ui); color: var(--wlm-ink); }
.headline-sub { font-size: 14px; line-height: 1.5; color: #3d4b5a; }
.headline-more { margin-top: auto; font: 600 12px/1 var(--ui); color: #1777c9; }

.headline-lead { margin-bottom: 16px; min-height: 250px; }
.headline-lead .headline-pic { width: 52%; }
.headline-lead .headline-body { padding: 20px 22px; justify-content: center; }
.headline-lead .headline-title { font: 800 clamp(22px, 2.6vw, 30px)/1.15 var(--ui); text-transform: uppercase; letter-spacing: -.01em; }

.headline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.headline-card { flex-direction: column; }
.headline-card .headline-pic { aspect-ratio: 16 / 9; }

/* ---------- Mundo Silelo ---------- */
.mundo {
  position: relative;
  padding: 0 0 30px;
  background:
    linear-gradient(rgba(255,255,255,0) 60%, rgba(255,255,255,.5)),
    linear-gradient(#3b8bd8, #6cc0f2 45%, #c6ecff);
}
.mundo-banner {
  padding: 22px 30px 20px;
  text-align: center;
  background: linear-gradient(rgba(0, 40, 100, .28), rgba(0, 40, 100, .12));
  border-bottom: 1px solid rgba(255,255,255,.5);
}
.mundo-heading { margin: 0; font: 700 clamp(26px, 4.4vw, 46px)/1.1 var(--bubbly); letter-spacing: -.01em; text-transform: uppercase; }
.mundo-join {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 26px 30px 0;
}
.join-win { width: min(560px, 100%); }
.join-body { display: flex; flex-direction: column; gap: 10px; }
.join-step { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--ui); color: var(--wlm-ink); }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #bfe9ff, #2b9be3 60%, #1672c4);
  box-shadow: 0 0 0 1px #1b6fa8;
}
.join-code { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.code-input { font-family: Consolas, "Courier New", monospace; letter-spacing: .45em; text-align: center; font-size: 22px; }
.link-button { align-self: flex-start; padding: 0; border: 0; background: none; font: 12.5px var(--ui); color: #1777c9; text-decoration: underline; cursor: pointer; }
.join-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: #4b5b6b; }
.join-msg.ok { color: #2f7a0a; }
.join-msg.bad { color: #c81d0e; }
.join-note { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid #cfe3f1; font-size: 13.5px; line-height: 1.55; color: #3d4b5a; }
.join-avatar { width: 150px; filter: drop-shadow(0 12px 16px rgba(0, 40, 90, .35)); animation: logo-float 5s ease-in-out infinite; }
.mundo-offline {
  margin: 18px 30px 0;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #e6b400;
  background: linear-gradient(#fff8d6, #ffeaa0);
  font-size: 13px;
  text-align: center;
}
.mundo-offline code { background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 3px; }

/* Cartão de jogador (inspirado no Club Penguin) */
.mundo-profile {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  align-items: start;
  padding: 26px 30px 0;
}
.player-card {
  position: relative;
  padding: 10px 12px 14px;
  border-radius: 18px;
  border: 3px solid #0a4f96;
  background: linear-gradient(#3fa6f0, #1a7fd6 40%, #0f63b8);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.2), 0 14px 30px rgba(0, 40, 90, .4);
}
.card-tab {
  position: absolute;
  top: -18px;
  left: 30%;
  width: 40%;
  height: 22px;
  border-radius: 10px 10px 0 0;
  border: 3px solid #0a4f96;
  border-bottom: 0;
  background: linear-gradient(#5ab8f5, #2b8fe0);
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.member-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 46px;
  padding: 3px 0 2px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: #fff6c0;
  background: linear-gradient(#ffd54a, #e0a000);
  border: 2px solid #8a5a00;
  text-shadow: 0 1px 0 #8a5a00;
}
.member-badge small { font: 700 7px/1 var(--ui); letter-spacing: .06em; color: #5a3a00; text-shadow: none; }
.card-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #0a4f96;
  background: radial-gradient(circle at 35% 30%, #d4efff, #6ab8ee 60%, #2b7fcf);
  color: #0a3f7a;
  font: 700 14px/1 var(--ui);
  cursor: pointer;
}
.card-close:hover { filter: brightness(1.1); }
.avatar-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  border: 3px solid #0a4f96;
  background:
    url("./assets/aero/foregrounds_107.webp") center bottom / 260% auto no-repeat,
    url("./assets/aero/skyboxes_31.webp") center / cover;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  cursor: grab;
}
.avatar-stage:active { cursor: grabbing; }
.avatar-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.avatar-loading { position: absolute; inset: auto 0 12px; margin: 0; text-align: center; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000; }
.card-name { margin: 10px 0 6px; font: 600 20px/1.1 var(--bubbly); color: #fff; text-align: center; text-shadow: 0 2px 0 #0a4f96; overflow-wrap: anywhere; }
.card-stats { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #e6f4ff; }
.card-stats span { display: flex; align-items: center; gap: 6px; }
.card-stats img { width: 22px; height: 22px; }
.card-stats b { color: #fff; }

.profile-form {
  padding: 18px 20px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 40, 90, .25), inset 0 1px 0 #fff;
}
.profile-row { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: start; margin-bottom: 16px; }
.profile-label { padding-top: 7px; font: 700 14px/1.25 var(--ui); color: var(--wlm-ink); text-transform: uppercase; }
.profile-label small { display: block; font-weight: 400; text-transform: none; color: #6d7b8a; }
.palette-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.2);
  cursor: pointer;
  position: relative;
}
.swatch::after { content: ""; position: absolute; inset: 3px 6px 50% 6px; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,0)); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px #1e8fe6, 0 0 12px rgba(60,170,255,.9); }
.chip-box { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 8px; background: #0f1a26; }
.chip {
  font: 500 14px/1 var(--ui);
  padding: 8px 12px;
  border: 1px solid #c9d3dc;
  border-radius: 4px;
  background: linear-gradient(#ffffff, #eef3f7);
  color: #1b2a3a;
  cursor: pointer;
  transition: transform .1s;
}
.chip:hover { border-color: #3c7fb1; }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  color: #fff;
  border-color: #1b6fa8;
  background: linear-gradient(var(--aqua-1), #6cc3f5 48%, var(--aqua-2) 50%, #5ed0ff);
  text-shadow: 0 1px 1px rgba(0,50,100,.6);
}
.mood-box .chip { text-transform: lowercase; font-size: 13px; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
a.vista-button { text-decoration: none; display: inline-block; }

/* menus suspensos no estilo combobox do Vista */
.aero-select {
  width: 100%;
  font: 14px/1.2 var(--ui);
  padding: 7px 30px 7px 10px;
  border: 1px solid #abadb3;
  border-radius: 3px;
  color: #1b2a3a;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #3d5a7a 50%) calc(100% - 13px) 55% / 5px 5px no-repeat,
    linear-gradient(135deg, #3d5a7a 50%, transparent 50%) calc(100% - 8px) 55% / 5px 5px no-repeat,
    linear-gradient(#ffffff, #f0f4f7);
  box-shadow: inset 0 1px 0 #fff;
  cursor: pointer;
}
.aero-select:hover { border-color: #3c7fb1; background-color: #eaf6fd; }
.aero-select:focus { outline: none; border-color: #3d7bad; box-shadow: 0 0 0 1px #3d7bad, 0 0 8px rgba(80,170,255,.6); }
.card-tag {
  margin: -2px auto 8px;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 12px/1.2 var(--bubbly);
  color: #1a1a1a;
  background: linear-gradient(#fff2a0, #ffd23c 50%, #f5b400 51%, #ffd84d);
  border: 1px solid #8a5a00;
}
/* bloco "social" do Orkut */
.orkut-box {
  margin: 0 0 16px;
  padding: 10px 14px 14px;
  border: 1px solid #c7d7e8;
  border-radius: 8px;
  background: linear-gradient(#e8f0fb, #d5e3f5);
}
.orkut-box legend { padding: 0 6px; font: 700 13px/1 var(--ui); color: #2c4c7c; text-transform: uppercase; letter-spacing: .04em; }
.orkut-logo { font: 700 18px/1 Verdana, Arial, sans-serif; color: #e8239b; text-transform: none; letter-spacing: -.02em; }
.orkut-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.orkut-field { display: grid; gap: 3px; }
.orkut-field span { font-size: 12px; font-weight: 600; color: #2c4c7c; }

/* ---------- Letreiro SILELO NEWS (referência: logo do iCarly) ---------- */
.logo-silelo {
  left: 3.5%;
  top: 21%;
  gap: 1.4cqw;
  align-items: flex-end;
  transform: rotate(-3deg);
  letter-spacing: -.01em;
}
.silelo-plate {
  position: absolute;
  z-index: -1;
  left: -2.2cqw;
  right: 9cqw;
  top: 2.2cqw;
  bottom: -1.2cqw;
  transform: skewX(-12deg);
  border-radius: .8cqw;
  border: .35cqw solid #fff;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.45), transparent 55%),
    linear-gradient(#ff3fb4, #e0148f 55%, #b50a72);
  box-shadow: 0 .6cqw 1.2cqw rgba(80, 0, 50, .4), inset 0 -.4cqw 0 rgba(0,0,0,.18);
}
.silelo-plate i {
  position: absolute;
  font-style: normal;
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 .6cqw rgba(255,255,255,.9);
  animation: star-twinkle 2.4s ease-in-out infinite;
}
.silelo-plate i:nth-child(1) { left: 6%; top: -34%; font-size: 3cqw; }
.silelo-plate i:nth-child(2) { right: 4%; top: -40%; font-size: 3.6cqw; animation-delay: .8s; }
.silelo-plate i:nth-child(3) { right: -9%; bottom: 10%; font-size: 2.4cqw; animation-delay: 1.6s; color: #fff38a; }
.word { position: relative; display: inline-block; }
/* contorno marinho grosso + extrusão 3D atrás do preenchimento inflado */
.word-outline {
  position: absolute;
  left: 0;
  top: 0;
  padding: .06em .04em .1em;
  color: #0b1f4d;
  -webkit-text-stroke: .14em #0b1f4d;
  filter:
    drop-shadow(.02em .03em 0 #0b1f4d)
    drop-shadow(.02em .03em 0 #0b1f4d)
    drop-shadow(0 .1em .08em rgba(0, 0, 40, .45));
}
.word-main { font-size: 11.5cqw; }
.word-tail { font-size: 6.6cqw; margin-bottom: .6cqw; transform: rotate(4deg); }
.word .gl { position: relative; }
.word-main .gl { animation: logo-float 5s ease-in-out infinite; }
.gl-cyan {
  --rim: #0a8fc4;
  --deep: #0b1f4d;
  --fill: linear-gradient(#b8f4ff, #33d0ff 45%, #0aa6e8 60%, #1fc2ff);
}
.gl-yellow {
  --rim: #d99a00;
  --deep: #0b1f4d;
  --fill: linear-gradient(#fff6a8, #ffe033 45%, #ffc400 60%, #ffd83d);
}
.logo-silelo .logo-sparkle { left: 30cqw; }
@keyframes star-twinkle { 50% { opacity: .35; transform: scale(.75) rotate(20deg); } }

/* letreiro 3D por cima da placa; o texto em CSS some quando o 3D carrega */
/* o canvas cobre o cabeçalho todo; o logo fica encaixado na faixa branca */
.logo-3d {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity .2s;
}
.logo-3d.ready { opacity: 1; }
.logo-3d.grabbing { cursor: grabbing; }
.logo-silelo.has-3d { transform: none; }
.logo-silelo.has-3d .word,
.logo-silelo.has-3d .silelo-plate,
.logo-silelo.has-3d .logo-sparkle { visibility: hidden; }

/* Contornos da referência plana, compartilhados pelo SVG e pelo modelo GLB. */
.logo.logo-silelo {
  left: 4.5%;
  top: 38%;
  width: 56%;
  display: block;
  transform: translateY(-50%);
  filter: none;
}
.silelo-flat { display: block; width: 100%; height: auto; }
.logo.logo-silelo.has-3d { transform: translateY(-50%); }
.logo-silelo.has-3d .silelo-flat { visibility: hidden; }

/* Quote do Ed do dia */
.ed-today { flex-direction: row; gap: 20px; align-items: center; }
.ed-today .ed-frame { flex: 0 0 46%; }
.ed-today-body { flex: 1; min-width: 0; }
.ed-today blockquote { margin: 14px 0 14px; }
.ed-today blockquote::before { top: 50%; left: -8px; transform: translateY(-50%) rotate(-45deg); }
.ed-today .ed-line { font-size: 28px; }
/* última novidade do Ed: faixa à parte, com cara de nota de jornal (não é a citação) */
.ed-news { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; padding: 12px 16px; background: #fff; border: 1px solid #111; border-left: 6px solid #111; color: #111; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: transform .2s; }
.ed-news:hover, .ed-news:focus-visible { transform: translateY(-2px); }
.ed-news-ask { grid-row: span 2; padding-right: 16px; border-right: 1px solid #ccc; font: 700 11px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #555; max-width: 150px; }
.ed-news-title { font: 700 17px/1.3 Georgia, 'Times New Roman', serif; color: #111; }
.ed-news-meta { font-size: 12px; color: #666; }
.ed-date { margin: 0; font: 700 11px/1.2 var(--ui); letter-spacing: .14em; color: #2b86c9; }

/* chamada acima do chat */
.chat-call { text-align: center; margin: 0 0 20px; }
.chat-call-title { margin: 0; font: 700 clamp(22px, 3.6vw, 38px)/1.15 var(--bubbly); text-transform: uppercase; }
.chat-call-sub { margin: 6px 0 0; font: 300 22px/1.2 var(--ui); color: #fff; text-shadow: 0 2px 6px rgba(0, 40, 90, .6); }

/* ---------- Chat com contatos reais ---------- */
.room-layout { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1000px; margin: 0 auto; align-items: start; }
.room-layout .room-win { max-width: none; margin: 0; }
.online-count {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  font: 600 12px/1.2 var(--ui);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background: linear-gradient(#8fe35a, #3fae16 52%, #2f9a0c);
}
#online-list li { grid-template-columns: 16px 1fr; }
#online-list .room-icon { grid-row: span 2; margin-top: 2px; }
#online-list .me b::after { content: " (você)"; font-weight: 400; color: #6d7b8a; }
.online-empty { padding: 10px 6px; font-size: 12.5px; color: #8795a3; font-style: italic; }
.lurkers { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid #cfe3f1; font-size: 12px; color: #6d7b8a; }

/* editor do avatar */
.avatar-editor { margin: 0 0 16px; padding: 10px 14px 4px; border: 1px solid #b9d7ee; border-radius: 8px; background: linear-gradient(#f3faff, #e2f1fb); }
.avatar-editor legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font: 700 13px/1 var(--ui); color: #2c4c7c; text-transform: uppercase; letter-spacing: .04em; }
.avatar-editor legend .link-button { text-transform: none; letter-spacing: 0; font-weight: 400; }
.avatar-editor .profile-row { margin-bottom: 12px; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #1e8fe6, 0 0 12px rgba(60,170,255,.9); }
.color-pair, .acc-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: #2c4c7c; }
.color-pair label, .acc-row label { display: flex; align-items: center; gap: 6px; }
input[type="color"] { width: 38px; height: 28px; padding: 1px; border: 1px solid #9fb8cc; border-radius: 4px; background: #fff; cursor: pointer; }
input[type="color"]:disabled { opacity: .4; cursor: not-allowed; }
.opt-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.shine-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #2c4c7c; }
.shine-row input { flex: 1; max-width: 200px; accent-color: #2b9be3; }
.glasses-toggle input { accent-color: #2b9be3; width: 16px; height: 16px; }

/* ---------- Frutiger-chat ---------- */
.chat-room {
  padding: 30px;
  background: url("./assets/aero/water_61.webp") center 30% / cover;
}
.room-win { max-width: 900px; margin: 0 auto; }
.room-online { margin-left: 10px; font-size: 11.5px; color: #4b5b6b; }
.room-online.live { color: #2f7a0a; font-weight: 600; }
.room-body { padding: 0; background: #fff; }
.room-log {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  height: 340px;
  overflow-y: auto;
  border-left: 6px solid #3b8bd8;
  font-size: 13.5px;
}
.room-msg {
  display: grid;
  grid-template-columns: 18px auto 1fr;
  column-gap: 6px;
  align-items: baseline;
  padding: 4px 4px;
  border-bottom: 1px solid #eef4f9;
  animation: msg-in .3s ease-out;
}
.room-msg:nth-child(odd) { background: #f7fbfe; }
.room-icon { width: 14px; height: 18px; border-radius: 7px 7px 4px 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); align-self: center; }
.room-msg b { color: #1d3a5f; }
.room-meta { font-size: 11px; color: #8795a3; }
.room-text { grid-column: 2 / -1; overflow-wrap: anywhere; white-space: pre-wrap; }
.room-empty { padding: 30px 10px; text-align: center; color: #8795a3; font-style: italic; }
.room-form { padding: 10px 12px 12px; border-top: 1px solid #cfe3f1; background: linear-gradient(#f3f9fd, #e3f0fa); }
.emote-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 6px; }
.emote-bar button { font-size: 17px; line-height: 1; padding: 3px 5px; border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer; }
.emote-bar button:hover:not(:disabled) { border-color: #b8d6fb; background: linear-gradient(#f2f8fe, #dcecfc); }
.emote-bar button:disabled { opacity: .4; cursor: default; }
/* emoticons GIF dos anos 2000 */
.emote { width: 19px; height: 19px; object-fit: contain; vertical-align: -4px; image-rendering: pixelated; }
.emote-bar .emote { width: 22px; height: 22px; vertical-align: middle; }
.quiz-btn .emote { vertical-align: -5px; }
.room-hint { margin: 6px 0 0; font-size: 12px; color: #6d7b8a; }
.aero-input:disabled, .aqua-button:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }

/* ---------- Rodapé ---------- */
.aero-footer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 190px;
  padding: 24px 30px 110px;
  background: linear-gradient(#fff, #e3f4ff);
  overflow: hidden;
}
.footer-globe { width: 92px; animation: logo-float 6s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0,40,90,.3)); }
.footer-copy p { margin: 0; font-size: 13px; color: #4b5b6b; }
.footer-daisies {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: url("./assets/aero/foregrounds_5.webp") center bottom / max(116%, 900px) auto no-repeat;
  transform-origin: bottom center;
  animation: daisy-sway 6s ease-in-out infinite alternate;
}

/* ---------- Bolhas ---------- */
.bubble-field {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}
.bubble {
  position: absolute;
  bottom: -120px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
}
.bubble img { display: block; width: 100%; pointer-events: none; }
.bubble.local { pointer-events: none; cursor: default; }
.hero .bubble { z-index: 3; }

/* ---------- Notificação MSN ---------- */
.toast {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 16px;
  width: 260px;
  border-radius: 6px;
  border: 1px solid #6f9fcb;
  background: linear-gradient(#ffffff, #e2f0fb);
  box-shadow: 0 8px 24px rgba(0, 40, 90, .35);
  transform: translateY(160%);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.show { transform: translateY(0); }
.toast-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: #2d4a6b;
  border-bottom: 1px solid #c3dbef;
  background: linear-gradient(#f7fbff, #dcebf8);
  border-radius: 6px 6px 0 0;
}
.toast-title img { width: 16px; }
.toast-body { display: flex; gap: 10px; align-items: center; padding: 10px; font-size: 13px; }
.toast-body p { margin: 0; }
.toast-pic {
  image-rendering: pixelated;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  border: 2px solid #5cc21d;
  background: #fff;
}

/* ---------- Animações ---------- */
@keyframes surface-bob { from { background-position: 35% 47%, 0 0; } to { background-position: 65% 53%, 0 0; } }
@keyframes rays-sway { from { transform: rotate(-4deg); opacity: .55; } to { transform: rotate(5deg); opacity: .9; } }
@keyframes fish-wobble { 50% { transform: translateY(-6%) rotate(2deg); } }
@keyframes gloss-sweep { 0% { left: -30%; } 45%, 100% { left: 115%; } }
@keyframes logo-float { 50% { transform: translateY(-.5cqw); } }
@keyframes sparkle-travel {
  0% { opacity: 0; transform: translateX(0) scale(.4) rotate(0); }
  15% { opacity: 1; }
  45% { opacity: 1; transform: translateX(34cqw) scale(1) rotate(90deg); }
  60%, 100% { opacity: 0; transform: translateX(44cqw) scale(.4) rotate(140deg); }
}
@keyframes gull-bob { 50% { transform: translateY(-.8cqw) rotate(-3deg); } }
@keyframes mail-swing { 50% { transform: rotate(-4deg) translateY(.3cqw); } }
@keyframes grass-light { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes daisy-sway { from { transform: skewX(-1.5deg); } to { transform: skewX(1.5deg); } }
@keyframes arrow-nudge { 50% { transform: translateX(.8cqw); } }
@keyframes gif-bubble { 50% { transform: translateY(-8%) scale(1.06); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes dolphin-jump {
  0% { opacity: 0; transform: translate(0, 60%) rotate(-35deg); }
  3% { opacity: 1; }
  8% { transform: translate(90%, -45%) rotate(0deg); }
  14% { opacity: 1; transform: translate(180%, 60%) rotate(35deg); }
  16%, 100% { opacity: 0; transform: translate(180%, 90%) rotate(40deg); }
}
@keyframes butterfly-a {
  0%   { transform: translate(-6cqw, 40cqw) rotate(10deg); }
  20%  { transform: translate(18cqw, 33cqw) rotate(-8deg); }
  40%  { transform: translate(38cqw, 42cqw) rotate(12deg); }
  60%  { transform: translate(60cqw, 34cqw) rotate(-10deg); }
  80%  { transform: translate(82cqw, 41cqw) rotate(8deg); }
  100% { transform: translate(106cqw, 35cqw) rotate(-6deg); }
}
@keyframes butterfly-b {
  0%   { transform: translate(104cqw, 36cqw) scaleX(-1); }
  25%  { transform: translate(76cqw, 43cqw) scaleX(-1) rotate(10deg); }
  50%  { transform: translate(50cqw, 35cqw) scaleX(-1) rotate(-8deg); }
  75%  { transform: translate(24cqw, 42cqw) scaleX(-1) rotate(8deg); }
  100% { transform: translate(-6cqw, 36cqw) scaleX(-1); }
}
@keyframes nudge {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 4px); }
  20% { transform: translate(9px, -6px); }
  30% { transform: translate(-8px, -3px); }
  40% { transform: translate(10px, 5px); }
  50% { transform: translate(-7px, 6px); }
  60% { transform: translate(8px, -4px); }
  70% { transform: translate(-6px, 3px); }
  80% { transform: translate(5px, -2px); }
  90% { transform: translate(-3px, 1px); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .gl { filter: url(#puffy-sm) drop-shadow(0 .03em 0 var(--rim)) drop-shadow(0 .03em 0 var(--deep)) drop-shadow(0 .06em .05em rgba(0, 30, 80, .45)); }
  .paper { margin-bottom: 0; }
  .topbar { height: auto; padding: 8px 16px; flex-wrap: wrap; }
  .thought, .messenger-row { grid-template-columns: 1fr; padding: 18px 16px; }
  .display-pic { max-width: 300px; }
  .glass-cards { grid-template-columns: 1fr; }
  .metropolis { padding: 20px 16px; }
  .metropolis-body { grid-template-columns: 1fr; }
  .dior { padding: 26px 16px; }
  .cidade { padding: 22px 16px; }
  .charge { padding: 22px 16px; }
  .europa { padding: 22px 16px; }
  .europa-grid { grid-template-columns: 1fr 1fr; }
  .eu-lead { grid-row: auto; }
  .caderno-sep { padding: 18px 16px 12px; }
  .futebol, .tecnologia { padding: 22px 16px; }
  .dupla-cols { grid-template-columns: 1fr; }
  .yt-card { grid-template-columns: 1fr; }
  .musica { padding: 22px 16px; }
  .entretenimento, .outfit, .receita { padding: 22px 16px; }
  .ent-box, .receita-box, .receita-cols { grid-template-columns: 1fr; }
  .outfit-look, .outfit-principal { width: 100%; }
  .fofoca { padding: 22px 16px; }
  .fofoca-title { font-size: 32px; }
  .fofoca-grid { grid-template-columns: 1fr 1fr; }
  .ff-lead { grid-row: auto; }
  .bomdia { padding: 18px 16px 24px; }
  .bomdia-cols { grid-template-columns: 1fr; }
  .bomdia-gifs { grid-template-columns: 1fr 1fr; }
  .tempo, .libras, .charge-envio { padding: 18px 16px; }
  .tempo-extra { margin-left: 0; text-align: left; }
  .envio-form { grid-template-columns: 1fr; }
  .cruzada { --cz-cell: 26px; padding: 22px 16px; }
  .cruzada-painel { grid-template-columns: 1fr; }
  .cz-dicas { columns: 1; }
  .cruzada-status { margin-left: 0; }
  .cz-gridbox { overflow-x: auto; }
  .lugar-foto { min-height: 440px; }
  .lugar-info { left: 16px; right: 16px; bottom: 150px; max-width: none; text-align: left; }
  .lugar-relogio { left: 16px; bottom: 18px; }
  .cidade-cols { grid-template-columns: 1fr; }
  .dior-thumb { width: 84px; }
  .dior-list a { gap: 12px; }
  .letterboxd { padding: 20px 16px; }
  .lb-body { grid-template-columns: 1fr; }
  .lb-films { grid-template-columns: repeat(3, 1fr); }
  .dior-heading { font-size: 48px; }
  .headlines-tabs { margin-left: 0; }
  .horoscopo { padding: 26px 14px; }
  .horo-signs { grid-template-columns: repeat(4, 1fr); }
  .mandala.m1 { width: 380px; margin-left: -190px; top: -90px; }
  .mandala.m3 { display: none; }
  .horo-crew { display: none; }
  .horo-badge { width: 44px; }
  .polaroid img { height: 100px; }
  .horo-card dl { grid-template-columns: 1fr; gap: 2px; }
  .horo-card dd { margin-bottom: 8px; }
  .dolar { padding: 24px 14px 20px; }
  .dolar-board, .quiz-answers { grid-template-columns: 1fr; }
  .radio { padding: 18px 12px 22px; }
  .radio-box { flex-direction: column; }
  .radio-speaker { display: none; }
  .sebo { padding: 20px 16px; }
  .sebo-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .headlines { padding: 20px 16px; }
  .headline-lead { flex-direction: column; min-height: 0; }
  .headline-lead .headline-pic { width: 100%; aspect-ratio: 16 / 9; }
  .headline-grid { grid-template-columns: 1fr; }
  .mundo-join { flex-direction: column-reverse; padding: 18px 16px 0; }
  .join-avatar { width: 100px; }
  .mundo-profile { grid-template-columns: 1fr; padding: 18px 16px 0; }
  .player-card { max-width: 300px; margin: 0 auto; width: 100%; }
  .profile-row { grid-template-columns: 1fr; gap: 6px; }
  .orkut-grid { grid-template-columns: 1fr; }
  .chat-room { padding: 18px 10px; }
  .room-layout { grid-template-columns: 1fr; }
  .room-log { height: 300px; }
  .tio-ed { grid-template-columns: 1fr; padding: 18px 16px; }
  .ed-quotes { grid-template-columns: 1fr; }
  .ed-today { flex-direction: column; }
  .ed-today .ed-frame { flex: none; width: 100%; }
  .ed-today blockquote::before { top: -8px; left: 22px; transform: rotate(45deg); }
  .ed-today .ed-line { font-size: 22px; }
  .ct-banner { grid-template-columns: 1fr; }
  .ct-title { clip-path: none; margin-right: 0; padding: 22px 16px; }
  .ct-shout { padding: 14px 16px; }
  .ct-game { padding: 22px 16px; }
  .ct-question { font-size: 26px; }
  .ct-stage { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .ct-plate-wrap { width: min(300px, 100%); }
  .ct-panel { width: 100%; }
  .caderno { padding: 22px 16px; }
  .aero-footer { padding: 20px 16px 110px; }
  .wlm-heading { font-size: 26px; }
  .toast { left: 16px; right: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dolphin, .logo-sparkle { display: none; }
}


/* =====================================================================
   Revisão estética Frutiger Aero / Windows Vista
   Mantém a identidade de cada seção e mistura com a linguagem do Vista:
   céus e água no fundo, painéis de vidro (translúcidos, borda branca,
   brilho no topo), títulos em Segoe UI Light. A Dior fica como está.
   ===================================================================== */
:root {
  --vidro: rgba(255, 255, 255, .62);
  --vidro-borda: rgba(255, 255, 255, .9);
  --vidro-sombra: 0 8px 24px rgba(10, 60, 110, .18), inset 0 1px 0 rgba(255, 255, 255, .95);
  --vidro-escuro: rgba(8, 24, 48, .55);
}
/* painel de vidro genérico */
.vidro, .dupla-col, .cidade-col, .cz-box, .envio-form, .libras-box, .musica-opcoes, .charge-fig, .receita-box {
  position: relative;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: 12px;
  box-shadow: var(--vidro-sombra);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.dupla-col, .cidade-col, .envio-form, .musica-opcoes, .charge-fig, .receita-box { padding: 14px 16px; }
/* reflexo do Vista: metade de cima um pouco mais clara */
.dupla-col::before, .cidade-col::before, .envio-form::before, .musica-opcoes::before, .receita-box::before {
  content: ''; position: absolute; inset: 0 0 60% 0; border-radius: 12px 12px 0 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
}

/* ---------- Títulos de caderno: faixa de céu com vidro azul (cabeçalho do Vista), com o nome de jornal ---------- */
.caderno-sep {
  position: relative; overflow: hidden; border-top: 0;
  background: #1f78c8 url("./assets/aero/skyboxes_39.webp") center 40% / cover no-repeat;
  color: #fff; padding: 26px 30px 22px;
}
.caderno-sep::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(6, 60, 130, .55), rgba(20, 110, 200, .25) 55%, rgba(6, 50, 110, .55)); }
.caderno-sep::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .05)); pointer-events: none; }
.caderno-sep > * { position: relative; z-index: 1; }
.caderno-rotulo { color: #cdeeff; }
.caderno-nome { border-color: rgba(255, 255, 255, .7); color: #fff; text-shadow: 0 0 18px rgba(160, 220, 255, .9), 0 2px 6px rgba(0, 40, 90, .5); }
.caderno-sub { color: #e6f6ff; }

/* ---------- Esportes: céu e gramado, colunas em vidro verde ---------- */
.futebol {
  background: url("./assets/aero/foregrounds_107.webp") center bottom / 100% auto no-repeat, url("./assets/aero/skyboxes_39.webp") center / cover;
  padding-bottom: 60px;
}
.futebol-title { color: #fff; text-shadow: 0 2px 10px rgba(0, 60, 20, .5); }
.futebol .dupla-col { background: rgba(10, 70, 30, .55); border-color: rgba(200, 255, 200, .6); color: #fff; }

/* ---------- Cultura (vídeos e games): aurora de Media Center ---------- */
.entretenimento, .tecnologia {
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(90, 200, 255, .35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(80, 255, 170, .22), transparent 70%),
    linear-gradient(#0a2a55, #041430);
}
.entretenimento .ent-box, .tecnologia .dupla-col {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(160, 220, 255, .35); border-radius: 12px; padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 24px rgba(0, 0, 0, .35);
}
.tecnologia .dupla-col::before { background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, 0)); }
.ent-title, .tec-title { text-shadow: 0 0 16px rgba(120, 200, 255, .7); }

/* Letterboxd: mantém as cores da marca, com brilho de vidro */
.letterboxd { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(64, 188, 244, .18), transparent 70%), #14181c; }
.lb-review, .lb-top { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* ---------- Fofoca: continua rosa-choque, com bolhas e cartões de vidro ---------- */
.fofoca {
  background:
    url("./assets/aero/bubbles_29.webp") right -40px top -30px / 260px auto no-repeat,
    radial-gradient(circle at 15% 10%, #ffb3dc, transparent 45%),
    linear-gradient(135deg, #ff4fa0, #c01883);
}
.ff-card { border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 20px rgba(90, 0, 50, .35), inset 0 1px 0 #fff; }

/* ---------- Outfit e Receita: editorial, sobre fundo perolado com vidro ---------- */
.outfit, .receita {
  background: url("./assets/aero/bubbles_1.webp") left -80px top -60px / 280px auto no-repeat, linear-gradient(#fbfdff, #e6f2fb);
}
.outfit-look { background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: 12px; padding: 10px; box-shadow: var(--vidro-sombra); }
.outfit-look img { border-radius: 6px; }
.receita-img { border-radius: 8px; }

/* ---------- Passatempos: céu claro ao fundo, conteúdo em vidro ---------- */
.charge, .charge-envio, .musica, .cruzada {
  background: url("./assets/aero/ceu-seamless-cc0.webp") 0 0 / auto 100% repeat-x, #bfe3f7;
}
.charge-title, .envio-title, .musica-title, .cruzada-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
.charge-fig img { box-shadow: none; }
.cruzada-head { border-bottom-color: rgba(255, 255, 255, .8); }
.cz-box { padding: 14px; }
.cz-gridbox { background: rgba(255, 255, 255, .8); }
.musica-opcoes { display: grid; }
.musica-opcao { background: rgba(255, 255, 255, .85); }

/* ---------- Notícias ---------- */
.europa { background: url("./assets/aero/globes_16.webp") right -60px top -50px / 220px auto no-repeat, linear-gradient(#f3f9ff, #dcebf8); }
.eu-card { border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(12, 42, 92, .15), inset 0 1px 0 #fff; }
.cidade { background: url("./assets/aero/skyboxes_34.webp") center / cover; }
.cidade-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }

/* títulos das seções claras em Segoe UI Light, como no Vista */
.europa-title, .cidade-title, .musica-title, .envio-title, .charge-title { font-family: 'Segoe UI Light', 'Segoe UI', var(--ui); }

/* =====================================================================
   Topo mais Frutiger Aero / Vista
   ===================================================================== */
/* barra de cima: vidro azul-escuro da barra de tarefas do Vista */
.topbar {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.06) 48%, rgba(0,0,0,0) 50%),
    radial-gradient(ellipse 60% 140% at 15% 120%, rgba(60,200,255,.35), transparent 70%),
    linear-gradient(#1d4f86, #0b2748 55%, #081d38);
  border-bottom: 1px solid rgba(140,215,255,.75);
  box-shadow: 0 1px 0 rgba(0,20,50,.6), 0 4px 16px rgba(20,120,220,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.date-chip, .edicao-select {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background-color: rgba(255,255,255,.14) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.08) 50%, rgba(0,0,0,0) 51%) !important;
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%, 0 0 !important;
  background-size: 5px 5px, 5px 5px, 100% 100% !important;
  color: #fff !important;
  padding: 7px 26px 7px 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 8px rgba(80,180,255,.35) !important;
}
.libras-toggle { border-color: rgba(255,255,255,.45); background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.06) 50%, rgba(0,0,0,.12) 51%, rgba(80,170,255,.25)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }

/* faixa do logo: vidro fosco sobre o céu, com fio de brilho */
.band-masthead {
  background:
    linear-gradient(170deg, rgba(255,255,255,.93) 0%, rgba(245,252,255,.86) 35%, rgba(222,242,255,.8) 70%, rgba(196,230,252,.82) 100%),
    url("./assets/aero/ceu-seamless-cc0.webp") center / cover;
}
.band-masthead::before {
  content: ""; position: absolute; left: 0; right: 0; top: 19.6%; height: .5cqw;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 30%, rgba(160,225,255,.9) 70%, transparent);
  transform: skewY(.47deg); transform-origin: left;
}

/* faixa de baixo (era amarela e ficou vazia): vidro aqua com reflexo passando */
.band-yellow {
  background:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 45%, transparent 55%) 0 0 / 300% 100%,
    linear-gradient(#c9f3ff, #5ccbf5 45%, #1b92d8 55%, #53c6f5);
  animation: faixa-brilho 8s ease-in-out infinite;
}
@keyframes faixa-brilho { 0% { background-position: 120% 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0; } }

/* =====================================================================
   Dior: chique + Frutiger Aero ("vidro de perfume")
   pérola e champanhe, bolhas iridescentes, vidro com fio dourado, preto piano
   ===================================================================== */
.dior {
  position: relative; overflow: hidden;
  background:
    url("./assets/aero/bubbles_23.webp") right -90px top -70px / 300px auto no-repeat,
    url("./assets/aero/bubbles_23.webp") left -50px bottom 40px / 130px auto no-repeat,
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(160deg, #fbf7f0 0%, #f1ede6 40%, #e9eef4 100%);
}
.dior::before { /* brilho de champanhe atrás do título */
  content: ''; position: absolute; left: 50%; top: -40px; width: 420px; height: 260px; margin-left: -210px;
  background: url("./assets/aero/flares_17.webp") center / contain no-repeat; opacity: .35; mix-blend-mode: screen; pointer-events: none;
}
.dior > * { position: relative; }
.dior-kicker { color: #9a8a6a; }
.dior-heading {
  background: linear-gradient(180deg, #2a2a2a 0%, #000 45%, #4a4a4a 55%, #111 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 6px 14px rgba(120,100,60,.25));
}
.dior-tabs {
  border: 1px solid rgba(160,130,80,.6); border-radius: 999px; overflow: hidden; padding: 3px; gap: 3px;
  background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.4) 50%, rgba(235,225,205,.5) 51%, rgba(255,255,255,.7));
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(120,100,60,.15);
}
.dior-tabs button { border-radius: 999px; transition: background .25s, color .25s; }
.dior-tabs button[aria-selected="true"] {
  background: linear-gradient(#4a4a4a, #111 48%, #000 52%, #2a2a2a); color: #f7f0e1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.3);
}
.dior-list {
  padding: 6px 18px; border-radius: 14px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.95);
  outline: 1px solid rgba(190,160,100,.45); outline-offset: -6px;
  box-shadow: 0 14px 34px rgba(110,90,50,.14), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
.dior-list li { border-top-color: rgba(190,160,100,.28); }
.dior-list li:first-child { border-top: 0; }
.dior-list li:last-child { border-bottom: 0; }
.dior-list a:hover, .dior-list a:focus-visible { background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.dior-thumb { position: relative; border-radius: 6px; box-shadow: 0 0 0 1px rgba(190,160,100,.45), 0 4px 10px rgba(80,60,30,.15); }
.dior-thumb::before { /* reflexo de vidro na miniatura */
  content: ''; position: absolute; inset: 0 0 55% 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0));
}
.dior-num { color: #b39a6a; }

/* ---------- Descontos em viagens (Aero: céu e mar, vidro, selo de preço brilhante) ---------- */
.viagens { position: relative; padding: 26px 30px 30px; background: url("./assets/aero/water_59.webp") center bottom / cover no-repeat, #6cc4ee; }
.viagens::before { content: ''; position: absolute; inset: 0 0 45% 0; background: url("./assets/aero/skyboxes_39.webp") center / cover; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); pointer-events: none; }
.viagens > * { position: relative; }
.viagens-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.viagens-title { margin: 0; font: 300 32px/1.1 'Segoe UI Light', 'Segoe UI', var(--ui); color: #fff; text-shadow: 0 2px 10px rgba(0,60,120,.55); }
.viagens-title b { font-weight: 700; }
.viagens-fonte { font: 600 13px/1 var(--ui); color: #fff; text-decoration: none; text-shadow: 0 1px 4px rgba(0,50,100,.6); }
.viagens-sub { margin: 6px 0 16px; font-size: 13.5px; color: #eaf8ff; text-shadow: 0 1px 4px rgba(0,50,100,.6); }
.viagens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vg-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border-radius: 12px; color: #0b2a44; text-decoration: none;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 8px 22px rgba(0,50,100,.25), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s; }
.vg-card:hover { transform: translateY(-3px); }
.vg-foto { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #bfe6fa; }
.vg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-foto::after { content: ''; position: absolute; inset: 0 0 60% 0; background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,0)); pointer-events: none; }
.vg-preco { position: absolute; z-index: 1; right: 6px; bottom: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid #2f7a0a;
  background: linear-gradient(#c9f59a, #74cf2c 48%, #45a111 52%, #7fd83a); color: #fff; font: 800 14px/1 var(--ui); text-shadow: 0 1px 1px #1d5c05; box-shadow: 0 3px 8px rgba(0,40,0,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.vg-preco small { font-weight: 600; font-size: 10px; }
.vg-titulo { font: 700 13.5px/1.3 var(--ui); }
.vg-meta { margin-top: auto; font-size: 11.5px; color: #3a6a8a; font-weight: 600; }
@media (max-width: 720px) { .viagens { padding: 22px 16px; } .viagens-grid { grid-template-columns: 1fr 1fr; } }
.viagens::before { background: linear-gradient(rgba(10,70,140,.55), rgba(10,90,170,.15)), url("./assets/aero/skyboxes_39.webp") center / cover; }
.viagens-title, .viagens-sub, .viagens-fonte { text-shadow: 0 1px 2px rgba(0,30,70,.8), 0 2px 12px rgba(0,40,90,.6); }

/* =====================================================================
   Bom Dia: cozinha de fazenda ao amanhecer, com o galo servindo café (parallax)
   ===================================================================== */
.bomdia { position: relative; padding: 0 0 34px; background: linear-gradient(#f3e1bd, #f7ead0 30%, #fbf3e2); border-bottom: 0; overflow: hidden; }
.bomdia::before, .bomdia::after { display: none; }
.bd-cena { position: relative; height: clamp(420px, 56vw, 680px); overflow: hidden; margin-bottom: 24px; }
.bd-cozinha { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 85%; }
.bd-cena::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255,220,140,.35), transparent 70%), linear-gradient(transparent 86%, #f3e1bd); }
/* galo e xícara centralizados na página, sobre a mesa; o título vai logo abaixo */
.bd-galo { position: absolute; z-index: 2; left: 50%; bottom: 36%; width: min(42%, 500px); transform: translateX(-42%); }
.bd-galo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(80,40,0,.35)); }
/* vapor do café: fiapos brancos desfocados que sobem balançando e somem, saindo da xícara */
.bd-vapor { position: absolute; left: 4%; top: 30%; width: 20%; height: 50%; pointer-events: none; }
.bd-vapor i { position: absolute; bottom: 0; left: 35%; width: max(26px, 34%); height: max(60px, 40%); border-radius: 50%;
  background: radial-gradient(ellipse at center, #fff 0%, rgba(255,250,240,.75) 40%, rgba(255,255,255,0) 72%);
  filter: blur(5px); mix-blend-mode: screen; opacity: 0; animation: vapor 3s ease-out infinite; }
.bd-vapor i:nth-child(2) { left: 20%; animation-delay: .3s; animation-duration: 3.4s; }
.bd-vapor i:nth-child(3) { left: 50%; animation-delay: .6s; }
.bd-vapor i:nth-child(4) { left: 28%; animation-delay: .9s; animation-duration: 2.8s; }
.bd-vapor i:nth-child(5) { left: 42%; animation-delay: 1.2s; animation-duration: 3.3s; }
.bd-vapor i:nth-child(6) { left: 32%; animation-delay: 1.5s; }
.bd-vapor i:nth-child(7) { left: 24%; animation-delay: 1.8s; animation-duration: 3.6s; }
.bd-vapor i:nth-child(8) { left: 46%; animation-delay: 2.1s; animation-duration: 2.9s; }
.bd-vapor i:nth-child(9) { left: 36%; animation-delay: 2.4s; }
.bd-vapor i:nth-child(10) { left: 30%; animation-delay: 2.7s; animation-duration: 3.2s; }
@keyframes vapor {
  0% { transform: translate(0, 0) scale(.45, .5); opacity: 0; }
  15% { opacity: 1; }
  45% { transform: translate(-30%, -70%) scale(.9, 1.1) rotate(-8deg); opacity: .9; }
  75% { transform: translate(25%, -140%) scale(1.2, 1.5) rotate(10deg); opacity: .5; }
  100% { transform: translate(-10%, -210%) scale(1.5, 1.9) rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bd-vapor i { animation-duration: 8s; } }
.bd-cena .bomdia-topo { position: absolute; z-index: 3; left: 50%; bottom: 14%; width: min(90%, 720px); transform: translateX(-50%); margin: 0; text-align: center; }
.bd-cena .bomdia-title { margin: 0; font: 400 clamp(64px, 11vw, 150px)/.9 'Great Vibes', cursive; color: #111; background: none; -webkit-text-fill-color: #111;
  filter: none; animation: none; text-shadow: 0 2px 0 rgba(255,245,220,.8), 0 10px 22px rgba(90,50,0,.25); }
.bd-cena .bomdia-data { margin: 10px 0 4px; font: italic 600 clamp(15px, 1.6vw, 20px)/1.2 Georgia, serif; color: #4a2e10; text-shadow: 0 1px 0 rgba(255,245,220,.9); }
.bd-cena .bomdia-frase { margin: 0; font: italic 400 clamp(14px, 1.5vw, 18px)/1.4 Georgia, serif; color: #5a3a18; text-shadow: 0 1px 0 rgba(255,245,220,.9); }
.bomdia-cols { padding: 0 30px; }
.bomdia-sub { font: italic 700 24px/1.2 Georgia, serif; color: #6a3e10; text-align: left; }
.bd-card { background: #fffaf0; border: 1px solid #ecd6a8; outline: 2px solid rgba(90,120,200,.28); outline-offset: -8px; border-radius: 4px; box-shadow: 0 10px 22px rgba(110,70,20,.18); }
.bd-btn { border-color: #d4a85a; background: linear-gradient(#fffaf0, #f7e2b3); color: #6a3e10; }
.cafe-dica { background: #fffaf0; outline: 2px solid rgba(90,120,200,.28); border: 1px solid #ecd6a8; box-shadow: 0 10px 22px rgba(110,70,20,.18); }
.cafe-dica .bomdia-sub { text-align: center; }
.cafe-nome { font-family: 'Great Vibes', cursive; font-weight: 400; font-size: 42px; color: #111; }
.cafe-texto { color: #4a3018; }
.cafe-tag { color: #6a3e10; }
@media (max-width: 720px) {
  .bd-cena { height: 460px; }
  .bd-galo { bottom: 42%; width: 68%; transform: translateX(-45%); }
  .bd-cena .bomdia-topo { width: 92%; bottom: 12%; }
  .bomdia-cols { padding: 0 16px; }
}

/* Bom Dia: galo sempre com o pé na toalha.
   A cena usa a proporção exata da foto da cozinha (1672×941), então a foto nunca é recortada e o galo
   é posicionado em coordenadas da própria foto: ocupa de 27,5% a 72,5% da largura, com o pé a 66% da altura. */
.bd-cena { height: auto; aspect-ratio: 1672 / 941; }
.bd-cozinha { object-position: center; }
.bd-galo { left: 27.5%; bottom: 34%; width: 45%; transform: none; }
.bd-cena .bomdia-topo { bottom: 3%; }
.bd-cena .bomdia-title { font-size: clamp(48px, 8vw, 118px); }
@media (max-width: 720px) {
  /* no celular a cena tem altura fixa e a foto é cortada só dos lados (fica 420px de altura = 746px de largura),
     então o galo usa a mesma conta, só que em pixels a partir do centro */
  .bd-cena { aspect-ratio: auto; height: 420px; }
  .bd-galo { left: calc(50% - 168px); width: 336px; bottom: 34%; transform: none; }
  .bd-cena .bomdia-topo { bottom: 3%; width: 94%; }
  .bd-cena .bomdia-title { font-size: 52px; }
  .bd-cena .bomdia-data { font-size: 14px; margin-top: 4px; }
  .bd-cena .bomdia-frase { font-size: 13px; }
}

/* ---------- Convite para a Praça Silelo 3D ---------- */
.praca-convite { position: relative; display: block; margin: 0 auto 22px; max-width: 980px; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 14px 34px rgba(0,60,110,.35); transition: transform .25s, box-shadow .25s; }
.praca-convite img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s; }
.praca-convite:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #fff, 0 20px 44px rgba(0,60,110,.45); }
.praca-convite:hover img { transform: scale(1.03); }
.praca-convite-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 60px 26px 22px; background: linear-gradient(transparent, rgba(4,40,80,.82)); }
.praca-convite-info strong { font: 800 30px/1.1 var(--ui); text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.praca-convite-info > span:not(.praca-selo):not(.praca-botao) { max-width: 560px; font-size: 15px; line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.praca-selo { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: linear-gradient(#ff6b6b, #d8342a); font: 700 11px/1.4 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.praca-botao { align-self: flex-start; margin-top: 6px; }
@media (max-width: 600px) { .praca-convite img { aspect-ratio: 4 / 5; } .praca-convite-info strong { font-size: 22px; } .praca-convite-info { padding: 40px 16px 16px; } }

/* ---------- Fragrantica: grade de lançamentos (frascos) ---------- */
.frag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; max-width: 780px; margin: 0 auto; }
.frag-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border-radius: 14px; background: linear-gradient(#fffdf8, #f4efe6); box-shadow: 0 0 0 1px rgba(160,140,100,.25), 0 6px 16px rgba(80,60,20,.08); color: inherit; text-decoration: none; text-align: center; transition: transform .25s, box-shadow .25s; }
.frag-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(160,140,100,.45), 0 12px 24px rgba(80,60,20,.16); }
.frag-card img { width: 100%; max-width: 110px; aspect-ratio: 125 / 140; object-fit: contain; mix-blend-mode: multiply; }
.frag-marca { font: 600 10.5px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #9a8a6e; }
.frag-nome { font: 400 15px/1.25 "Bodoni Moda", Georgia, serif; color: #2b2419; }
.dior-foot a { color: inherit; font-weight: 600; }

/* ---------- Bom Dia: link do Instagram ---------- */
.bd-insta { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 16px 8px 12px; border-radius: 99px; background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); color: #fff; font: 600 14px/1 var(--ui); text-decoration: none; box-shadow: 0 4px 14px rgba(160,40,120,.35), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .2s, box-shadow .2s; }
.bd-insta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(160,40,120,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.bd-insta svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; }
.bd-insta svg circle:last-child { fill: #fff; stroke: none; }
@media (max-width: 600px) { .bd-insta { font-size: 12.5px; padding: 6px 12px 6px 9px; margin-top: 6px; } }