/* Bio (link do Instagram) da Vila Beija-Flor. Mesma estrutura da /bio do Hostel da Jô e das advogadas,
   com a identidade da Vila: cal clara, turquesa das janelas, magenta do muro, Courgette + Karla,
   a cabana num arco de porta com moldura de azulejo e o beija-flor que chega voando. */
:root {
  --cal: #FFFFFF;
  --areia: #F7F2EA;
  --texto: #1E2B33;
  --suave: #4A5A63;
  --marca: #0B7480;
  --marca-clara: #3BB3B9;
  --funda: #0B3F47;
  --acento: #B5135F;
  --acento-escuro: #8E0E4A;
  --folha: #3A7535;
  --sol: #F2C94C;
  --linha: #E4DBCF;
  --letra: 'Courgette', 'Brush Script MT', cursive;
  --corpo: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --margem: clamp(18px, 5vw, 32px);
  --lento: cubic-bezier(0.22, 0.61, 0.36, 1);
  --raio: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.bio {
  position: relative; margin: 0; min-height: 100svh;
  background: var(--cal) radial-gradient(90% 40% at 50% 0%, rgba(59, 179, 185, 0.22), rgba(59, 179, 185, 0) 100%) no-repeat;
  color: var(--texto);
  font: 400 1rem/1.55 var(--corpo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

/* Aviso do painel (o mesmo do site) */
.aviso { position: relative; z-index: 2; background: var(--acento); color: #fff; font-weight: 700; font-size: 0.92rem; }
.aviso p { margin: 0 auto; max-width: 600px; padding: 9px var(--margem); display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.aviso svg { flex: none; width: 16px; height: 16px; }

/* Flor gigante em linha ao fundo (a caixa corta o que passa da largura da tela) */
.fundo { position: absolute; inset: 0; overflow: clip; z-index: 0; pointer-events: none; }
.fundo__flor {
  position: absolute; top: -42vw; left: 50%; translate: -50% 0;
  width: 160vw; max-width: 1000px; aspect-ratio: 1;
  color: var(--marca); opacity: 0.08;
}

.pagina { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 30px var(--margem) 30px; overflow: clip; }

/* ---- Capa: a cabana num arco de porta, com moldura de azulejo e a flor atrás ---- */
.capa { text-align: center; }
.capa__moldura { position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin: 0 auto 20px; }
.capa__brilho {
  position: absolute; inset: -24%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(242, 201, 76, 0.32), rgba(242, 201, 76, 0) 64%);
}
.capa__flor-caixa { position: absolute; inset: 0; }
.capa__flor { width: 100%; height: 100%; color: var(--marca-clara); opacity: 0.85; }
.capa__foto {
  position: absolute; inset: 13% 22%; overflow: hidden; display: block;
  border-radius: 999px 999px 18px 18px;
  border: 3px solid var(--marca);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--marca-clara), 0 22px 44px rgba(11, 63, 71, 0.28);
}
.capa__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.capa__ave { position: absolute; left: -2%; top: 8%; width: 30%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(11, 63, 71, 0.25)); }
.capa__selo {
  position: absolute; right: 8%; bottom: 9%; width: 66px; height: 66px; display: grid; place-items: center;
  filter: drop-shadow(0 6px 12px rgba(142, 14, 74, 0.35));
}
.capa__selo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa__selo b { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sol); color: var(--texto); font: 700 0.82rem/1 var(--corpo); }

.capa__rotulo { margin: 0 0 6px; font: 700 0.72rem/1.3 var(--corpo); letter-spacing: 0.18em; text-transform: uppercase; color: var(--marca); }
.capa__nome { margin: 0; font: 400 clamp(2.4rem, 11.5vw, 3.1rem)/1.05 var(--letra); color: var(--marca); }
.capa__nota { margin: 10px 0 0; font-size: 0.88rem; font-weight: 700; color: var(--acento-escuro); }
.capa__nota span { color: var(--sol); letter-spacing: 0.06em; text-shadow: 0 0 1px var(--acento-escuro); }
.capa__frase { margin: 12px auto 0; max-width: 31ch; font-size: 1.02rem; line-height: 1.5; color: var(--suave); }
.capa__ramo { width: 170px; height: 28px; margin: 16px auto 0; }

/* ---- Faixa corrida ---- */
.faixa {
  margin: 24px calc(-1 * var(--margem)) 0; padding: 12px 0;
  background: var(--marca); color: #fff;
  overflow: hidden;
}
.faixa__trilho { display: flex; width: max-content; animation: corre 40s linear infinite; }
.faixa__lista { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; }
.faixa__lista i { font: 400 1.15rem/1.2 var(--letra); font-style: normal; }
.faixa__lista svg { width: 16px; height: 16px; animation: gira 10s linear infinite; }
@keyframes corre { to { transform: translateX(-50%); } }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---- Rumos (os links) ---- */
.rumos__titulo { margin: 28px 0 14px; text-align: center; font: 700 1.2rem/1.3 var(--corpo); color: var(--texto); }
.rumos__titulo em { font: 400 1.3rem/1 var(--letra); font-style: normal; color: var(--acento); }

.rumos { display: grid; gap: 14px; }
.rumo {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr 44%; min-height: 210px;
  border-radius: var(--raio); background: #fff; border: 1.5px solid var(--linha);
  box-shadow: 0 10px 28px rgba(11, 63, 71, 0.08);
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.35s, box-shadow 0.6s var(--lento), transform 0.25s var(--lento);
}
.rumo:hover, .rumo:focus-visible { border-color: var(--marca-clara); box-shadow: 0 20px 44px rgba(11, 63, 71, 0.16); }
.rumo:active { transform: scale(0.985); }

.rumo__texto { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 7px; padding: 20px 4px 20px 20px; min-width: 0; }
.rumo__rotulo { display: inline-flex; align-items: center; gap: 8px; font: 700 0.7rem/1.3 var(--corpo); letter-spacing: 0.15em; text-transform: uppercase; color: var(--marca); }
.rumo__flor { width: 16px; height: 16px; flex: none; }
.rumo__titulo { font: 700 1.35rem/1.12 var(--corpo); color: var(--texto); }
.rumo__desc { font-size: 0.9rem; line-height: 1.45; color: var(--suave); }
.rumo__ir { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 8px; font: 700 0.95rem/1 var(--corpo); color: var(--acento); }
.rumo__ir svg { width: 18px; height: 18px; transition: translate 0.45s var(--lento); }
.rumo:hover .rumo__ir svg, .rumo:active .rumo__ir svg, .rumo:focus-visible .rumo__ir svg { translate: 5px 0; }

.rumo__foto { position: relative; z-index: 1; overflow: hidden; margin: 10px 10px 10px 0; border-radius: 50% 50% 14px 14px / 28% 28% 14px 14px; }
.rumo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); transform: scale(1.03); transition: transform 1.4s var(--lento); }
.rumo:hover .rumo__foto img { transform: scale(1.09); }
/* Foto à esquerda no cartão do meio */
.rumo--esq { grid-template-columns: 44% 1fr; }
.rumo--esq .rumo__foto { order: -1; margin: 10px 0 10px 10px; }
.rumo--esq .rumo__texto { padding: 20px 20px 20px 8px; }
.rumo--esq .rumo__numero { left: auto; right: 12px; }
.rumo__numero {
  position: absolute; z-index: 0; left: 12px; bottom: -26px; pointer-events: none;
  font: 400 8rem/1 var(--letra); color: var(--marca); opacity: 0.07;
}
.rumo__numero::after { content: attr(data-numero); } /* texto só no pseudo-elemento: marca d'água, não conteúdo */

/* WhatsApp: o cartão magenta do muro */
.rumo--wa {
  grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 0;
  padding: 16px; background: var(--acento); border-color: transparent; color: #fff;
  box-shadow: 0 14px 30px rgba(142, 14, 74, 0.28);
}
.rumo--wa:hover { background: var(--acento-escuro); border-color: transparent; }
.rumo--wa .rumo__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.rumo--wa .rumo__icone svg { width: 28px; height: 28px; }
.rumo--wa .rumo__texto { padding: 0; gap: 2px; }
.rumo--wa .rumo__titulo { color: #fff; font: 400 1.45rem/1.15 var(--letra); }
.rumo--wa .rumo__desc { color: #FFE3EF; font-size: 0.86rem; }
.rumo--wa .rumo__seta { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--acento); }
.rumo--wa .rumo__seta svg { width: 18px; height: 18px; transition: translate 0.45s var(--lento); }
.rumo--wa:hover .rumo__seta svg, .rumo--wa:active .rumo__seta svg { translate: 4px 0; }
.rumo--wa::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.3) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: brilha-loop 6s 2.8s var(--lento) infinite;
}
@keyframes brilha-loop { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }

/* Instagram e Como chegar: a dupla */
.rumos__par { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rumo--mini { grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 0; padding: 14px 12px 14px 14px; }
.rumo--mini .rumo__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(11, 116, 128, 0.1); color: var(--marca); transition: background 0.3s; }
.rumo--mini:hover .rumo__icone { background: rgba(11, 116, 128, 0.18); }
.rumo--mini .rumo__icone svg { width: 22px; height: 22px; }
.rumo--mini .rumo__texto { padding: 0; gap: 2px; }
.rumo--mini .rumo__titulo { font-size: 1.08rem; }
.rumo--mini .rumo__desc { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 480px) { .rumos__par { grid-template-columns: 1fr 1fr; } }

/* ---- Rodapé ---- */
.rodape { margin-top: 30px; padding-top: 20px; border-top: 1px dashed var(--linha); text-align: center; font-size: 0.82rem; line-height: 1.6; color: var(--suave); }
.rodape p { margin: 0 0 4px; }
.rodape p:first-child { display: inline-flex; align-items: center; gap: 8px; font: 400 1.25rem/1.4 var(--letra); color: var(--marca); }
.credito { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 8px; font-size: 0.82rem; color: var(--suave); text-decoration: none; transition: color 0.2s; }
.credito:hover, .credito:focus-visible { color: var(--texto); }
.credito__marca { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--texto); }
.credito__marca svg { width: 20px; height: 18px; }

/* ---- WhatsApp flutuante (some enquanto o cartão magenta está na tela) ---- */
.flutuante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #1F8F4E; color: #fff; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--lento), opacity 0.35s;
}
.flutuante::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #1F8F4E; animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
.flutuante:hover { transform: scale(1.06); }
.flutuante--some { opacity: 0; pointer-events: none; transform: scale(0.7); }

/* ---- Computador ---- */
@media (min-width: 768px) {
  .pagina { max-width: 600px; padding-top: 56px; padding-bottom: 48px; }
  .capa__moldura { width: 320px; }
  .capa__nome { font-size: 3.3rem; }
  .faixa { margin-inline: 0; border-radius: 999px; }
  .rumo { min-height: 228px; }
  .rumo__texto { padding: 24px 6px 24px 24px; }
  .rumo--esq .rumo__texto { padding: 24px 24px 24px 8px; }
  .rumo__titulo { font-size: 1.5rem; }
  .rumo--wa { padding: 18px; }
}

/* ---- Movimento: entrada e revelar ao rolar ---- */
@media (prefers-reduced-motion: no-preference) {
  .capa__brilho { animation: respira 7s ease-in-out infinite alternate; }
  @keyframes respira { from { transform: scale(0.92); opacity: 0.8; } to { transform: scale(1.08); opacity: 1; } }
  .capa__flor-caixa { animation: abre-flor 1.7s 0.05s var(--lento) both; }
  @keyframes abre-flor { from { opacity: 0; rotate: -90deg; scale: 0.6; } to { opacity: 1; rotate: 0deg; scale: 1; } }
  .capa__foto { animation: porta 1.2s 0.3s var(--lento) both; }
  @keyframes porta { from { opacity: 0; clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); translate: 0 16px; } to { opacity: 1; clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); translate: 0 0; } }
  /* o beija-flor chega voando e fica pairando, batendo a asa */
  .capa__ave { animation: chega 1.1s 0.9s cubic-bezier(.2, .8, .3, 1) both, paira 2.6s 2s ease-in-out infinite; }
  @keyframes chega { from { opacity: 0; translate: -90px 50px; rotate: -18deg; scale: 0.6; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
  @keyframes paira { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  .capa__ave .asa { transform-box: fill-box; transform-origin: 30% 100%; animation: bate 0.22s 1s ease-in-out infinite alternate; }
  @keyframes bate { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }
  .capa__selo { animation: carimba 0.6s 1.3s cubic-bezier(.2, .9, .3, 1.4) both; }
  @keyframes carimba { from { opacity: 0; scale: 1.8; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
  .capa__selo svg { animation: gira 24s linear infinite; }
  .entra { opacity: 0; animation: sobe 1s var(--lento) forwards; animation-delay: calc(0.55s + var(--i, 0) * 0.1s); }
  @keyframes sobe { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

  .com-revela .revela { opacity: 0; translate: 0 30px; transition: opacity 0.9s var(--lento), translate 1.05s var(--lento), border-color 0.35s, box-shadow 0.6s var(--lento), transform 0.25s var(--lento), background 0.3s; transition-delay: calc(var(--i, 0) * 90ms); }
  .com-revela .revela.revela--ok { opacity: 1; translate: 0 0; }
  /* A florzinha de cada cartão gira e abre ao entrar na tela */
  .com-revela .rumo .rumo__flor { rotate: -180deg; scale: 0.3; opacity: 0; transition: rotate 1.4s var(--lento), scale 1s var(--lento), opacity 0.6s; transition-delay: calc(var(--i, 0) * 90ms + 0.25s); }
  .com-revela .rumo.revela--ok .rumo__flor { rotate: 0deg; scale: 1; opacity: 1; }
  .com-revela .rumo.revela--ok { transition-delay: calc(var(--i, 0) * 90ms + 0.4s); }
  .com-revela .rumo.revela--ok .rumo__flor { transition-delay: calc(var(--i, 0) * 90ms + 0.65s); }
}
@media (prefers-reduced-motion: reduce) {
  .faixa__trilho, .faixa__lista svg { animation: none; }
  .rumo--wa::after, .flutuante::before { animation: none; }
}

/* Logo oficial colorida no lugar do nome em texto (10/11/2026) */
.capa__nome { line-height: 0; margin-top: 4px; }
.capa__nome img { display: block; margin-inline: auto; width: min(270px, 74vw); height: auto; filter: drop-shadow(0 6px 14px rgba(11, 63, 71, 0.12)); }
/* Airbnb: cartão claro com borda magenta (o magenta cheio é do WhatsApp) */
.rumo--airbnb { grid-template-columns: auto 1fr; border: 2px solid var(--acento, #B5135F); }
.rumo--airbnb .rumo__icone { background: rgba(181, 19, 95, 0.1); color: var(--acento, #B5135F); }
.rumo--airbnb:hover .rumo__icone { background: rgba(181, 19, 95, 0.18); }
.rumo--airbnb .rumo__titulo { color: var(--acento, #B5135F); }
.rumo--airbnb .rumo__seta { color: var(--acento, #B5135F); display: grid; place-items: center; }
.rumo--airbnb .rumo__seta svg { width: 22px; height: 22px; }