html { scroll-behavior: smooth; }

:root{
  --rosa:#F6E6F0;
  --lilas:#EADCF9;
  --roxo:#9B6AAE;
  --texto:#5B5863;
  --branco:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--texto);
  background:linear-gradient(180deg,var(--rosa),var(--lilas));
  background-attachment: fixed;
}
.container{width:min(1100px,92%);margin:0 auto}
.topbar{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid #eee}
.topbar nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
/* topo: logo maior, mas fluido */
.topbar nav .brand img{
  height: clamp(42px, 5vw, 78px);
  transition: height .2s ease;
}

.topbar nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.topbar nav a{color:#6e6276;text-decoration:none;font-weight:600}

/* ===== MENU HAMBURGUER (mobile) ===== */
.nav-toggle{
  display: none; /* só aparece no mobile */
  border: 1px solid #e7dff1;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  color: #4f3d58;
  line-height: 1;
}

.nav-bars{
  display:block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  border-radius: 999px;
}
.nav-bars::before,
.nav-bars::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}
.nav-bars::before{ top: -6px; }
.nav-bars::after{ top: 6px; }

/* vira um “X” quando abre */
.topbar nav.menu-open .nav-bars{ background: transparent; }
.topbar nav.menu-open .nav-bars::before{ top: 0; transform: rotate(45deg); }
.topbar nav.menu-open .nav-bars::after{ top: 0; transform: rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; }
  .topbar nav{ position: relative; }

  /* some com o menu no mobile */
  .topbar nav ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 10px 0 0;
    padding: 10px;
    flex-direction: column;
    gap: 6px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(231,223,241,.85);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,.14);
    max-height: calc(100vh - 90px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* abre quando o JS coloca .menu-open */
  .topbar nav.menu-open ul{ display: flex; }

  .topbar nav ul a{
    display: block;
    padding: 12px 12px;
    border-radius: 14px;
  }
  .topbar nav ul a:active{ background: rgba(155,106,174,.10); }
}


.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 72px) 0;
  /* fallback caso as fotos não carreguem */
  background: url('/assets/bg-aquarela.webp') center/cover no-repeat;
}

/* monograma/logo do HERO */
.hero .hero-mark{
  display: block;
  margin: 0 auto 10px;
  width: clamp(260px, 36vw, 720px); /* aumenta bem e continua responsivo */
  height: auto;
  max-width: 78vw;                 /* garante que não estoure */
  opacity: .70;
  transition: opacity .2s ease;
}


/* garante que conteúdo (logo/textos/botões) fique na frente */
.hero .hero-inner{ 
  position: relative; 
  z-index: 2;
  text-align: center; 
}

/* carrossel atrás */
.hero-carousel{
  position: absolute;
  inset: 0;
  z-index: 0;
}

:root{
  /* controla “o quão clarinho” fica. Ajusta entre 0.18 e 0.45 */
  --heroSlideOpacity: 0.70;
}

.hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03); /* leve “zoom” pra ficar mais chique */
  animation: heroFade 18s infinite;
  filter: saturate(0.92) contrast(0.98);
}

/* delays pra cada foto */
.hero-slide.s1{ animation-delay: 0s; }
.hero-slide.s2{ animation-delay: 6s; }
.hero-slide.s3{ animation-delay: 12s; }

/* overlay suave pra deixar tudo legível e elegante */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.72),
    rgba(255,255,255,.52)
  );
}

/* animação de crossfade */
@keyframes heroFade{
  0%   { opacity: 0; }
  8%   { opacity: var(--heroSlideOpacity); }
  33%  { opacity: var(--heroSlideOpacity); }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}

/* acessibilidade: reduz animação se o usuário preferir */
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation: none; }
  .hero-slide.s1{ opacity: var(--heroSlideOpacity); }
  .hero-slide.s2, .hero-slide.s3{ opacity: 0; }
}

.hero h1{
  font-family: "Italianno","Playfair Display",serif;
  font-size: clamp(36px, 5vw, 56px);
  margin: .6rem 0;
  color:#4f3d58;
  font-weight: 400;
  line-height: 1.05;
  -webkit-font-smoothing: antialiased;
}


.hero .date-place{opacity:.9}
.hero .countdown{margin:12px auto 18px;font-weight:600}
.hero .actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

.section{padding:64px 0}
h2{
  font-family: "Italianno","Playfair Display",serif;
  font-weight: 400;                 /* Italianno só tem 400 */
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.0;
  color:#4f3d58;
  margin: 0 0 18px;
}

.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.timeline .step{background:rgba(255,255,255,.8);border:1px solid #eee;padding:16px;border-radius:16px}
.timeline .step span{display:block;color:var(--roxo);font-weight:700;margin-bottom:6px}

.cotas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}
.cota{background:#fff;border:1px solid #e7dff1;border-radius:14px;padding:14px;font-weight:700;cursor:pointer}
.cota.selected{outline:2px solid var(--roxo)}
.outro-valor{margin:10px 0}
.outro-valor input{width:160px;padding:10px;border-radius:10px;border:1px solid #ddd}
.pagar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pagar input{padding:10px;border:1px solid #ddd;border-radius:10px}
.hint{font-size:.9rem;opacity:.7}

.rsvp-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.rsvp-form input,.rsvp-form textarea{padding:12px;border:1px solid #ddd;border-radius:12px;background:#fff}
.ok{margin-top:10px;background:#ffffffb0;border:1px solid #eee;padding:12px;border-radius:10px}
.hidden{display:none}

.map-wrap{border-radius:16px;overflow:hidden;border:1px solid #eee}
.map-wrap iframe{width:100%;height:340px;border:0}

.dicas{display:grid;gap:8px;padding-left:18px}

.footer{padding:26px 0;border-top:1px solid #eee;background:#ffffffb8}
.footer .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}

.btn{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;

  /* 👇 garante que <a> e <button> fiquem iguais */
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
button.btn{
  font-family: inherit;
  font-size: inherit;
}

.btn.primary{background:var(--roxo);color:#fff}
.btn.ghost{background:#fff;color:#4f3d58;border:1px solid #e7dff1}
.btn:active{transform:translateY(1px)}
@media (max-width: 420px){
  .hero .hero-mark{
    width: clamp(200px, 70vw, 360px);
    max-height: 38vh;
  }
}

.cotas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

.cota-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #e8e5e0;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cota-card:hover { 
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  border-color: #d8d3cc;
}

.cota-card.selected {
  border-color: #bfae9b;
  box-shadow: 0 8px 30px rgba(191,174,155,.35);
}

.cota-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: #f5f2ee;
}

/* Ajuste de enquadramento só da Luinha (evita cortar o topo) */
.cota-img--luinha{
  object-position: center 20%;
}
/* Ajuste de enquadramento só do “Passeio de barco” (evita cortar o rosto) */
.cota-img--barco{
  object-position: center 75%;
}

/* MOBILE: não cortar as imagens específicas (Luinha e Barco) */
@media (max-width: 560px){
  .cota-img--luinha,
  .cota-img--barco{
    object-fit: contain;     /* mostra a imagem inteira */
    object-position: center; /* centraliza */
    background: #f5f2ee;     /* mantém “cara” de card se sobrar área */
  }
}


/* placeholder visual quando ainda não há imagem */
.cota-img.ph {
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #9a9287;
  border: 2px dashed #e1dbd3;
}

.cota-title {
  font: 600 16px/1.3 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: #2b2b2b;
  margin: 4px 0 0;
}

.cota-price {
  font: 700 18px/1 Inter, sans-serif;
  color: #2f302e;
}

.cota-cta {
  margin-top: 2px;
  display: inline-block;
  font: 500 14px/1 Inter, sans-serif;
  color: #5a4c3f;
  opacity: .9;
}
/* ==== SWIPER DE COTAS ==== */
.cotas-swiper {
  position: relative;
  margin: 16px 0 10px;
}

.cotas-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 8px 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cotas-rail > li { list-style: none; scroll-snap-align: start; }

.cota-card { min-width: 240px; } /* usa o estilo existente e garante largura mínima */

.cota-qty {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font: 600 14px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto;
}
.cota-qty button {
  width: 28px; height: 28px; border-radius: 10px; border: 1px solid #e1dbd3;
  background: #fff; cursor: pointer; font-weight: 800;
}
.cota-qty input {
  width: 44px; text-align: center; border: 1px solid #e1dbd3; border-radius: 8px; padding: 6px 4px;
  font-weight: 700;
}
.cota-subtotal {
  font: 600 14px/1.2 Inter, sans-serif; opacity: .8; margin-top: 2px;
}

/* Nav do swiper */
.cotas-nav {
  position: absolute; inset: 0; pointer-events: none;
}
.cotas-nav .nav {
  pointer-events: auto;
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: #fff; border: 1px solid #e8e5e0;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.cotas-nav .prev { left: -4px; } 
.cotas-nav .next { right: -4px; }

/* Resumo */
.cotas-summary {
  margin-top: 10px;
  background: #ffffffc7; border: 1px solid #eee; border-radius: 12px;
  padding: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.cotas-summary strong { font-weight: 800; }
.cotas-summary .total { font-weight: 900; }

/* Ajustes mobile */
@media (max-width: 560px) {
  .cotas-nav .prev { left: 4px; } 
  .cotas-nav .next { right: 4px; }
}
/* ====== ÁLBUM (swiper-like) ====== */
.album-sub{
  margin-top:-6px; margin-bottom:10px; opacity:.85;
}

.album-swiper{
  position: relative;
  margin-top: 8px;
}

/* trilho horizontal com scroll-snap, igual às cotas */
.album-rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding: 8px 6px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* máscara suave nas bordas para um fade bonito */
  mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
}
.album-rail > li{ list-style: none; scroll-snap-align: start; }

.album-card{
  background:#fff;
  border:1px solid #e8e5e0;
  border-radius:16px;
  padding:10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.album-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color:#d8d3cc;
}

.album-img{
  width:100%;
  aspect-ratio: 3 / 2;           /* formato mais fotográfico */
  border-radius:12px;
  object-fit: cover;
  background:#f5f2ee;
  display:block;
}

/* placeholder visual até chegar as fotos */
.album-img.ph{
  display:grid;
  place-items:center;
  font-size:14px;
  color:#9a9287;
  border: 2px dashed #e1dbd3;
}

.album-card figcaption{
  margin-top:8px;
  font: 500 14px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto;
  color:#2f302e;
  opacity:.9;
  text-align:center;
}

/* setas — aproveita o mesmo visual das cotas */
.album-nav{ position:absolute; inset:0; pointer-events:none; }
.album-nav .nav{
  pointer-events:auto;
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e8e5e0; background:#fff; cursor:pointer;
  font-size:18px; font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.album-nav .prev{ left:-4px; }
.album-nav .next{ right:-4px; }

@media (max-width:560px){
  .album-nav .prev{ left:4px; }
  .album-nav .next{ right:4px; }
}
/* ===== Atalhos abaixo do HERO ===== */
.quicklinks{
  padding: 18px 0 8px;
}

.quicklinks-inner{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  /* visual premium (pílula) */
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}

.quicklinks-inner .btn{
  white-space: nowrap;
}

/* mobile: vira “card” e deixa os botões respirarem */
@media (max-width: 560px){
  .quicklinks-inner{
    border-radius: 18px;
    padding: 12px;
  }
  .quicklinks-inner .btn{
    flex: 1 1 220px;
    justify-content: center;
  }
}
.quicklinks{
  margin-top: -55px; /* “puxa” a pílula pra encostar no HERO */
  position: relative;
  z-index: 3;
}
.album-card { overflow: hidden; }
.album-img{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
/* ===== Lightbox (Zoom) do Álbum ===== */
.album-img{ cursor: zoom-in; }

body.lb-lock{ overflow: hidden; }

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.lightbox.is-open{ display: block; }

.lb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 18, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lb-dialog{
  position: relative;
  width: min(1100px, 92vw);
  height: min(86vh, 720px);
  margin: 7vh auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
}

.lb-figure{
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#lbImg{
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: linear-gradient(180deg, rgba(246,230,240,.35), rgba(234,220,249,.25));
}

.lb-cap{
  padding: 10px 14px;
  text-align: center;
  font: 500 14px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto;
  color: #4f3d58;
  background: rgba(255,255,255,.65);
  border-top: 1px solid rgba(231,223,241,.8);
}

.lb-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(231,223,241,1);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: #4f3d58;
}

.lb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(231,223,241,1);
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  color: #4f3d58;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.lb-nav.prev{ left: 10px; }
.lb-nav.next{ right: 10px; }

@media (max-width: 560px){
  .lb-dialog{ height: 86vh; margin-top: 6vh; }
  .lb-nav.prev{ left: 6px; }
  .lb-nav.next{ right: 6px; }
}
/* ===== Nossa história (texto contínuo) ===== */
.story{
  max-width: 860px;
  margin-top: 10px;

  /* “papel” leve por trás do texto (não é card por blocos; é um bloco contínuo só) */
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  padding: 18px 18px 8px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.story p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.85;
  color: #5b5863;
}

.story-lead::first-letter{
  font-family: "Playfair Display", serif;
  font-size: 44px;
  line-height: .9;
  float: left;
  padding-right: 10px;
  color: #4f3d58;
}

.story-year{
  display: inline-block;
  margin-right: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(155,106,174,.12);
  color: var(--roxo);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  vertical-align: middle;
}

.story-ending{
  font-weight: 600;
  color: #4f3d58;
}

@media (max-width: 560px){
  .story{
    padding: 16px 14px 6px;
  }
  .story p{
    font-size: 15.5px;
    line-height: 1.8;
  }
}
/* ===== RECADOS (Guestbook) ===== */
.recados-sub{
  margin-top:-6px;
  opacity:.85;
}

.recados-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  margin-top: 12px;
}

.recados-card{
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 50px rgba(0,0,0,.10);
}

.recados-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.recados-title{
  margin: 0;
  font-family: "Playfair Display", serif;
  color:#4f3d58;
  font-size: 18px;
}

.recados-count{
  font-weight: 800;
  font-size: 13px;
  color: #6e6276;
  background: rgba(155,106,174,.10);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(155,106,174,.14);
}

.recados-form{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.recados-form input,
.recados-form textarea{
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  font-family: inherit;
}

.recados-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.recados-hint{
  opacity: .7;
  font-weight: 600;
}

.recados-empty{
  margin: 6px 0 0;
  opacity: .75;
  display: none;
}

/* lista (mural) */
.recados-list{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 6px;
}

.recado{
  background:#fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.recado-avatar{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #4f3d58;
  background: linear-gradient(180deg, rgba(246,230,240,.9), rgba(234,220,249,.9));
  border: 1px solid rgba(231,223,241,.9);
}

.recado-meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}

.recado-nome{
  font-weight: 900;
  color: #2f302e;
}

.recado-data{
  font-size: 12px;
  opacity: .7;
  font-weight: 700;
}

.recado-texto{
  margin: 6px 0 0;
  line-height: 1.55;
  color: #5B5863;
  white-space: pre-wrap;
}

/* honeypot anti-bot */
.hp{ display:none; }

@media (max-width: 860px){
  .recados-grid{ grid-template-columns: 1fr; }
  .recados-list{ max-height: 460px; }
}
/* ===== Spotify fixo no rodapé ===== */
.musicbar{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0 auto;
  width: min(520px, calc(100vw - 32px));
  z-index: 8000;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(231,223,241,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}

/* Pra não “comer” o final da página por causa do player fixo */
body{
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}