:root {
  --cor1: #2e1747;
  --cor2: #e8461e;
  --amarelo: #f7c81b;
  --creme: #fff8ec;
  --tinta: #2a1d33;
  --linha: rgba(42, 29, 51, .12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--creme); color: var(--tinta); font: 400 16px/1.65 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* cabeçalho */
.topo { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: rgba(255, 248, 236, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { border-radius: 50%; }
.marca span { font: 700 22px/1 Fredoka, sans-serif; display: grid; color: var(--cor1); }
.marca small { font: 500 10px/1.6 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; opacity: .65; color: var(--tinta); }
.menu { display: none; gap: 28px; }
.menu a { text-decoration: none; font-weight: 500; font-size: 14px; }
.menu a:hover { color: var(--cor2); }
.topo-zap { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; background: var(--cor2); padding: 10px 13px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.topo-zap svg { width: 18px; height: 18px; fill: currentColor; }
.topo-zap span { display: none; }

/* capa */
.capa { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--cor1); color: #fff; }
.capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,23,71,.25) 0%, rgba(46,23,71,0) 25%, rgba(46,23,71,.75) 50%, var(--cor1) 80%); }
.capa-texto { position: relative; z-index: 1; padding: 0 22px 48px; max-width: 700px; }
.lema { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--amarelo); font-weight: 600; margin-bottom: 12px; }
h1 { font: 700 clamp(52px, 14vw, 112px)/.95 Fredoka, sans-serif; letter-spacing: -.01em; }
h1 span { color: var(--amarelo); }
.capa-sub { margin: 20px 0 28px; font-size: 18px; max-width: 470px; opacity: .92; }
.botao { display: inline-block; background: var(--cor2); color: #fff; text-decoration: none; font: 600 18px/1 Fredoka, sans-serif; padding: 19px 32px; border-radius: 999px; transition: transform .2s; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.botao:hover { transform: translateY(-2px); }
.nota { margin-top: 22px; font-size: 14px; opacity: .85; }
.nota b { font: 700 24px/1 Fredoka, sans-serif; color: var(--amarelo); }

/* faixa do azulejo: amarelo com patinhas + roxo */
.azulejo { height: 46px; border-bottom: 10px solid #6c3596; background-color: var(--amarelo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='36' viewBox='0 0 46 36'%3E%3Cg fill='%236c3596'%3E%3Cellipse cx='23' cy='22' rx='6' ry='5'/%3E%3Ccircle cx='16' cy='14' r='2.4'/%3E%3Ccircle cx='21' cy='10.5' r='2.4'/%3E%3Ccircle cx='26.5' cy='10.5' r='2.4'/%3E%3Ccircle cx='31' cy='14' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); background-position: center 4px; }

/* seções */
.secao { padding: 96px 22px; max-width: 1180px; margin: 0 auto; }
.rotulo { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--cor2); font-weight: 600; margin-bottom: 12px; }
h2 { font: 700 clamp(42px, 11vw, 78px)/1 Fredoka, sans-serif; color: var(--cor1); margin-bottom: 44px; }
h3 { font: 600 26px/1.1 Fredoka, sans-serif; margin-bottom: 8px; color: var(--cor1); }

/* serviços */
.cards { display: grid; gap: 22px; }
.card { background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 2px 0 var(--linha); }
.card img { width: 100%; height: 300px; object-fit: cover; }
.card > div { padding: 24px; }
.card p { font-size: 15px; opacity: .85; }
.card .valor { opacity: 1; font-weight: 600; color: var(--cor2); margin: 14px 0 16px; font-size: 14px; }
.mini { display: inline-block; background: var(--cor1); color: #fff; text-decoration: none; font: 600 15px/1 Fredoka, sans-serif; padding: 13px 22px; border-radius: 999px; }
.mini:hover { background: var(--cor2); }

/* táxi dog */
.taxi { display: grid; background: var(--cor1); color: #fff; }
.taxi h2 { color: #fff; }
.taxi .rotulo { color: var(--amarelo); }
.taxi-texto { padding: 72px 22px; }
.taxi-texto > p:not(.rotulo) { font-size: 18px; margin-bottom: 30px; max-width: 480px; opacity: .9; }
.taxi img { width: 100%; height: 340px; object-fit: cover; }

/* vantagens */
.grade { display: grid; gap: 14px; margin-bottom: 36px; }
.grade > div { background: #fff; border-radius: 22px; padding: 26px 22px; }
.grade b { font: 700 15px/1 Fredoka, sans-serif; color: #fff; background: var(--cor2); display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin-bottom: 14px; }
.grade p { opacity: .8; }
.casa { width: 100%; height: 320px; object-fit: cover; border-radius: 26px; }

/* como chegar */
.chegar { display: grid; gap: 34px; border-top: 1px solid var(--linha); }
.chegar h2 { font-size: clamp(36px, 9vw, 58px); margin-bottom: 8px; }
.end { font-size: 18px; opacity: .8; margin-bottom: 26px; }
.horario { display: grid; gap: 8px; margin-bottom: 30px; max-width: 400px; }
.horario div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.horario dt { font-weight: 600; }
.horario dd { opacity: .8; text-align: right; }
.mapa { min-height: 320px; border-radius: 26px; overflow: hidden; }
.mapa iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

/* rodapé */
.rodape { text-align: center; padding: 56px 22px 110px; display: grid; gap: 6px; justify-items: center; font-size: 14px; background: var(--cor1); color: #fff; }
.rodape img { border-radius: 50%; margin-bottom: 10px; }
.previa { margin-top: 18px; font-size: 12px; opacity: .6; }

.zap-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.zap-flutuante svg { width: 30px; height: 30px; fill: #fff; }

@media (min-width: 800px) {
  .menu { display: flex; }
  .topo { padding: 12px 40px; }
  .topo-zap span { display: inline; }
  .capa { align-items: center; }
  .capa-foto { left: 50%; width: 50%; object-position: center 25%; }
  .capa::after { background: linear-gradient(90deg, var(--cor1) 0%, var(--cor1) 50%, rgba(46,23,71,0) 62%); }
  .capa-texto { padding: 90px 56px 40px; max-width: 620px; }
  .secao { padding: 130px 40px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card img { height: 340px; }
  .taxi { grid-template-columns: 1fr 1.2fr; align-items: center; }
  .taxi-texto { padding: 90px 64px; }
  .taxi img { height: 100%; min-height: 560px; }
  .grade { grid-template-columns: repeat(4, 1fr); }
  .casa { height: 480px; }
  .chegar { grid-template-columns: 1fr 1.2fr; }
  .zap-flutuante { display: none; }
  .rodape { padding-bottom: 56px; }
}