/* Residencial Ibiza 20 — versão RIVIERA (protótipo, 17/10/2026).

   O pedido do Guto: "uma variação um pouco mais feliz do Ibiza. A FOR é preta e branca, precisa de requinte;
   o Ibiza tem que ser menos preto e branco. Felicidade tipo sul da França, Mônaco e Nude Project; não o
   Carnaval do Rio". Mesma página e mesmo texto da versão FOR, outra luz:
   - fotos em cor desde o começo, com a LUT "FOR Filme 90 Site" (a mais leve e viva da marca);
   - o fundo todo em areia (o Guto, 2ª rodada: "o fundo devesse ser todo dessa cor bege bem clara"),
     azul-marinho no lugar do preto e azul francês como o único acento;
   - o calor vem das fotos (a fachada, a madeira, o sol), não da interface: zero laranja.
   2ª rodada (17/10/2026, noite): "os botões arredondados estão muito fracos de design"; "as imagens estão ruins
   de apresentação, só fotos soltas"; "o rodapé ficou sem finalizar". Então:
   - FORMA: tudo reto, como na versão FOR. O caráter vem da tipografia e da cor, não do arredondado:
     o botão é uma etiqueta de clube de praia — rótulo em caixa alta espaçada e uma casa com a seta;
   - a galeria virou "um domingo no Ibiza 20", hora a hora (scripts no site.js, seção 3b);
   - o rodapé tem o logo grande, o fecho em duas batidas, quatro colunas e o texto legal.
   Liga com <html data-tema="riviera"> (endereço /riviera ou ?tema=riviera; ver o <head> do index).
   Este arquivo só SOBRESCREVE o estilo.css: o que não está aqui é igual nas duas versões. */

:root[data-tema="riviera"] {
  --papel: #f6f0e6;        /* areia: o fundo da página inteira */
  --papel-2: #f6f0e6;      /* sem faixas alternadas: o ritmo vem do espaço e das linhas */
  --tinta: #13233a;        /* azul-marinho no lugar do preto */
  --tinta-2: #3b4a5e;
  --cinza: #5d6a79;        /* 4,8:1 sobre a areia */
  --linha: #ddd3c3;        /* a linha fina, puxada para a areia */
  --noite: #0d1b2e;
  --noite-tinta: #eef3f7;
  --noite-cinza: #a9b7c6;  /* 8:1 sobre a noite */
  --azul: #2357a6;         /* azul francês: 7:1 com texto branco */
  --borda-campo: #8a8273;  /* 3,3:1 sobre o branco do campo */
  /* a seta dos botões: Phosphor "ArrowRight" (regular), a mesma família de ícones do site da FOR */
  --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
}

/* grão mais fino: menos filme velho */
[data-tema="riviera"] body::after { opacity: .03; }

/* ── tipografia: a mesma Anek Latin, na largura normal e mais firme (títulos de dia, não de noite) ── */
[data-tema="riviera"] :is(.titulo, .topo h1, .topo-grande) {
  font-stretch: 100%; font-weight: 500; letter-spacing: -.032em; line-height: 1; max-width: 24ch;
}
[data-tema="riviera"] .titulo { font-size: clamp(2.1rem, 4.1vw, 3.7rem); }
[data-tema="riviera"] .titulo-grande { font-size: clamp(2.3rem, 4.3vw, 4rem); max-width: none; }
[data-tema="riviera"] :is(.topo h1, .topo-grande) { font-size: clamp(2.5rem, 4.8vw, 4.4rem); max-width: none; }
[data-tema="riviera"] .noite .titulo { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: none; }
[data-tema="riviera"] .numeros dt { font-stretch: 100%; font-weight: 300; letter-spacing: -.045em; color: var(--azul); }
[data-tema="riviera"] .planta-ficha h3 { font-stretch: 100%; font-weight: 500; letter-spacing: -.03em; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
[data-tema="riviera"] .planta-area { font-stretch: 100%; font-weight: 300; letter-spacing: -.045em; }
/* o espaço negativo do número grande é herdado em pixels: o texto pequeno de baixo volta ao normal */
[data-tema="riviera"] .planta-area small { letter-spacing: normal; }
[data-tema="riviera"] .passos h3 { font-stretch: 100%; font-weight: 500; letter-spacing: -.03em; font-size: 1.75rem; }

/* ── o botão: etiqueta de clube de praia ─────────────────────────────────────
   Retângulo azul francês, rótulo em caixa alta espaçada e, à direita, uma casa separada por um fio com a
   seta. No mouse o azul vira marinho e a seta anda. Um rótulo só no site inteiro: "Receber plantas e tabela". */
[data-tema="riviera"] .botao {
  position: relative; border: 0; border-radius: 0;
  min-height: 56px; padding: 0 calc(56px + 22px) 0 24px; gap: 0;
  background: var(--azul); color: #fff;
  font-stretch: 112.5%; font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s var(--curva), color .3s var(--curva), transform .15s var(--curva);
}
[data-tema="riviera"] .botao::before {   /* o fio entre o rótulo e a seta */
  content: ''; position: absolute; top: 0; bottom: 0; right: 56px; width: 1px; background: currentColor; opacity: .3;
}
[data-tema="riviera"] .botao::after {    /* a seta, na cor do texto */
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 56px;
  background: currentColor; -webkit-mask: var(--seta) no-repeat center / 18px; mask: var(--seta) no-repeat center / 18px;
  transition: transform .35s var(--curva);
}
[data-tema="riviera"] .botao:hover { background: var(--tinta); }
[data-tema="riviera"] .botao:hover::after { transform: translateX(4px); }
[data-tema="riviera"] .botao-claro { background: #fff; color: var(--tinta); }
[data-tema="riviera"] .botao-claro:hover { background: var(--papel); color: var(--tinta); }
[data-tema="riviera"] .botao-contorno { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
[data-tema="riviera"] .botao-contorno:hover { background: var(--tinta); color: #fff; }
[data-tema="riviera"] .botao-pequeno { min-height: 44px; padding: 0 calc(44px + 16px) 0 18px; font-size: .75rem; letter-spacing: .12em; }
[data-tema="riviera"] .botao-pequeno::before { right: 44px; }
[data-tema="riviera"] .botao-pequeno::after { width: 44px; -webkit-mask-size: 15px; mask-size: 15px; }
/* sobre a foto do topo, o botão da barra é claro (a regra do estilo.css já pinta; aqui só a forma) */
[data-tema="riviera"] .topo-barra.sobre-foto .botao:hover { background: var(--papel); }
/* os dois botões do aviso de cookies são escolhas, não chamadas: sem a seta */
[data-tema="riviera"] .aviso-cookies .botao { padding: 0 18px; }
[data-tema="riviera"] .aviso-cookies .botao::before,
[data-tema="riviera"] .aviso-cookies .botao::after { display: none; }
/* o link com seta usa a mesma seta */
[data-tema="riviera"] .link-seta::after {
  content: ''; display: inline-block; width: 1em; height: 1em; margin-left: .45em; vertical-align: -.16em;
  background: currentColor; -webkit-mask: var(--seta) no-repeat center / contain; mask: var(--seta) no-repeat center / contain;
}

/* ── 1. topo: o giro em cor desde o primeiro quadro ─────────────────────── */
/* +30% de saturação no giro (o Guto testou +15% e pediu "mais um pouco"; aprovado em 18/10/2026: "sim"). */
[data-tema="riviera"] .giro { filter: saturate(1.3); background: var(--noite) url('/giro/rd/001.webp') 52% 50% / cover no-repeat; }
[data-tema="riviera"] .giro-poster { visibility: hidden; }   /* o primeiro quadro da Riviera vem pelo fundo acima */
/* a sombra atrás do texto é NEUTRA: a 1ª versão era azul-marinho e deixava a foto azulada (o Guto notou) */
[data-tema="riviera"] .topo-palco::after {
  background: linear-gradient(90deg, rgb(12 12 12 / .5) 0, rgb(12 12 12 / .28) 34%, rgb(12 12 12 / 0) 62%),
              linear-gradient(180deg, rgb(12 12 12 / .28) 0, rgb(12 12 12 / 0) 20%, rgb(12 12 12 / 0) 52%, rgb(12 12 12 / .45) 100%);
}
@media (max-width: 760px) {
  /* no celular os números ficam em duas colunas: "42 a 99 m²" numa linha só */
  [data-tema="riviera"] .numeros dt { font-stretch: 87.5%; font-size: 2.1rem; white-space: nowrap; }
  [data-tema="riviera"] .giro { background-image: url('/giro/rm/001.webp'); background-position: 50% 50%; }
  [data-tema="riviera"] :is(.topo h1, .topo-grande) { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  [data-tema="riviera"] .topo-texto .botao-claro { background: var(--azul); color: #fff; }
  /* o botão do topo divide a linha com o logo: no celular, sem a casa da seta e com o rótulo mais justo */
  [data-tema="riviera"] .topo-barra { gap: 16px; }
  [data-tema="riviera"] .topo-barra .botao { min-height: 40px; padding: 0 12px; font-size: .6875rem; letter-spacing: .06em; }
  [data-tema="riviera"] .topo-barra .botao::before,
  [data-tema="riviera"] .topo-barra .botao::after { display: none; }
  /* a barra de baixo é estreita: o rótulo aperta um pouco */
  [data-tema="riviera"] .barra-celular .botao { letter-spacing: .06em; padding: 0 calc(44px + 12px) 0 14px; font-size: .72rem; }
  [data-tema="riviera"] .barra-celular .botao::before { right: 44px; }
  [data-tema="riviera"] .barra-celular .botao::after { width: 44px; }
}

/* ── fotos: em cor, sempre ───────────────────────────────────────────────── */
[data-tema="riviera"] .filme img,
[data-tema="riviera"] .filme.em-cor img { filter: none; }
@media (hover: hover) { [data-tema="riviera"] .filme:hover img { filter: none; } }

/* ── 3. um domingo no Ibiza 20 ───────────────────────────────────────────────
   Seis cenas na ordem do dia, cada uma com a hora grande em azul, a frase da cena e o fato do apartamento.
   Embaixo, a linha das horas com o sol (um ponto azul) que anda com a rolagem. As fotos têm a mesma altura e
   a largura de cada uma (retrato, quadrada, paisagem), o que dá ritmo ao trilho. */
[data-tema="riviera"] .domingo { position: relative; padding-top: clamp(84px, 11vw, 168px); }
[data-tema="riviera"] .domingo-cabeca .titulo { max-width: none; }
[data-tema="riviera"] .domingo-janela { overflow: hidden; margin-top: clamp(36px, 5vh, 64px); }
[data-tema="riviera"] .domingo-trilho {
  display: flex; gap: clamp(20px, 2.4vw, 40px); padding-inline: var(--margem); width: max-content; will-change: transform;
}
[data-tema="riviera"] .domingo-cena { flex: none; }
[data-tema="riviera"] .domingo-cena figure { margin: 0; }
[data-tema="riviera"] .domingo-cena img {
  height: var(--altura-cena, clamp(260px, 50svh, 560px)); width: auto; aspect-ratio: var(--ar); object-fit: cover; max-width: none;
}
[data-tema="riviera"] .domingo-cena figcaption {
  display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: baseline; margin-top: 16px;
  width: 0; min-width: 100%;   /* a legenda acompanha a largura da foto, nunca a alarga */
}
[data-tema="riviera"] .domingo-hora {
  font-stretch: 100%; font-weight: 300; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.05em;
  color: #857c6c; transition: color .5s var(--curva);   /* apagada: 3,6:1 sobre a areia (texto grande); acesa: azul */
}
[data-tema="riviera"] .domingo-cena.agora .domingo-hora { color: var(--azul); }
[data-tema="riviera"] .domingo-cena-texto { font-size: .9375rem; line-height: 1.45; color: var(--cinza); text-wrap: pretty; }
[data-tema="riviera"] .domingo-cena-texto strong { display: block; font-weight: 500; font-size: 1.125rem; color: var(--tinta); }

[data-tema="riviera"] .domingo-relogio { position: relative; margin-top: clamp(22px, 3.5vh, 40px); padding-top: 16px; border-top: 1px solid var(--linha); }
[data-tema="riviera"] .domingo-relogio ol { position: relative; height: 18px; }
[data-tema="riviera"] .domingo-relogio li {
  position: absolute; top: 0; left: calc(var(--x, 0) * 100%); transform: translateX(-50%);
  font-stretch: 112.5%; font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--cinza);
  transition: color .4s var(--curva);
}
[data-tema="riviera"] .domingo-relogio li:first-child { transform: none; }
[data-tema="riviera"] .domingo-relogio li:last-child { transform: translateX(-100%); }
[data-tema="riviera"] .domingo-relogio li.agora { color: var(--azul); }
[data-tema="riviera"] .domingo-sol {   /* o sol: um ponto azul que anda na linha das horas */
  position: absolute; top: -6px; left: calc(var(--x, 0) * 100%); width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 5px var(--papel);
}

/* no computador a seção fica presa e a rolagem passa o dia (a altura extra é o comprimento do trilho) */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  [data-tema="riviera"] .domingo.domingo-preso { height: calc(100svh + var(--percurso, 0px)); padding-top: 0; }
  [data-tema="riviera"] .domingo.domingo-preso .domingo-palco {
    position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--barra); padding-bottom: clamp(20px, 3vh, 36px);
  }
  [data-tema="riviera"] .domingo.domingo-preso .domingo-cena img { --altura-cena: clamp(240px, 48svh, 540px); }
}
/* tela baixa (notebook de 768 px de altura): a foto encolhe para o título, a legenda e as horas caberem */
@media (min-width: 761px) and (max-height: 820px) and (prefers-reduced-motion: no-preference) {
  [data-tema="riviera"] .domingo.domingo-preso .domingo-cena img { --altura-cena: clamp(220px, 41svh, 480px); }
  [data-tema="riviera"] .domingo.domingo-preso .domingo-janela { margin-top: 28px; }
}
/* no celular (e para quem pede menos movimento) as fotos deslizam com o dedo, uma de cada vez */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  [data-tema="riviera"] .domingo { padding-bottom: clamp(48px, 10vw, 84px); }
  [data-tema="riviera"] .domingo-janela { overflow: visible; }
  [data-tema="riviera"] .domingo-trilho {
    width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  [data-tema="riviera"] .domingo-trilho::-webkit-scrollbar { display: none; }
  [data-tema="riviera"] .domingo-cena { scroll-snap-align: start; width: min(80vw, 420px); }
  [data-tema="riviera"] .domingo-cena img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
}

/* ── 4. plantas: a planta solta na areia, a lista em linhas retas ──────────── */
[data-tema="riviera"] .abas { gap: 28px; border-bottom: 1px solid var(--linha); }
[data-tema="riviera"] .abas button {
  flex: none; padding: 0; min-height: 46px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-stretch: 112.5%; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza);
}
[data-tema="riviera"] .abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--azul); }
[data-tema="riviera"] .linhas button:hover { background: rgb(255 255 255 / .55); }
[data-tema="riviera"] .linhas button[aria-pressed="true"] {
  background: #fff; color: var(--tinta); border-bottom-color: var(--linha);
  box-shadow: inset 3px 0 0 var(--azul);
}
[data-tema="riviera"] .linhas button[aria-pressed="true"] :is(.linha-detalhe, .linha-status) { color: var(--cinza); }
[data-tema="riviera"] .selo { border-radius: 50%; width: 10px; height: 10px; }
[data-tema="riviera"] :is(.selo-livre, .linhas button .selo-livre, .linhas button[aria-pressed="true"] .selo-livre) {
  color: var(--azul); background: var(--azul); border-color: var(--azul);
}

/* ── 6. o bairro: o mapa em cor (chão de areia, água azul, praças verdes, ruas brancas) ─── */
[data-tema="riviera"] .mapa-desenho { background: #efe7da; }
[data-tema="riviera"] .m-fundo { fill: #efe7da; }
[data-tema="riviera"] .m-verde path { fill: #d3e2c4; }
[data-tema="riviera"] .m-agua path { fill: #b7d5ee; stroke: #a6c9e6; }
[data-tema="riviera"] .m-vias path { stroke: #fff; }
[data-tema="riviera"] .m-bairros text { fill: #857c6c; }
[data-tema="riviera"] .m-bairros .m-bairro-ibiza { fill: var(--tinta); }
[data-tema="riviera"] .m-rota { stroke: var(--azul); }
[data-tema="riviera"] .m-lugar rect { fill: #fff; stroke: var(--tinta); rx: 7px; ry: 7px; }
[data-tema="riviera"] .m-lugar text { stroke: #efe7da; }
[data-tema="riviera"] .m-lugar.ativo rect { fill: var(--azul); stroke: var(--azul); }
[data-tema="riviera"] .m-lugar.ativo text { fill: var(--azul); }
[data-tema="riviera"] .lugares button[aria-pressed="true"] span:first-child::before { border-radius: 50%; background: var(--azul); }

/* ── 7. como comprar: os passos numerados ────────────────────────────────── */
[data-tema="riviera"] .passos { counter-reset: passo; }
[data-tema="riviera"] .passos li { border-top-color: var(--linha); }
[data-tema="riviera"] .passos li::before {
  counter-increment: passo; content: counter(passo, decimal-leading-zero);
  display: block; margin-bottom: 14px; color: var(--azul); font-weight: 600; font-size: .8125rem; letter-spacing: .14em;
}

/* ── 8. perguntas ────────────────────────────────────────────────────────── */
[data-tema="riviera"] summary::after { color: var(--azul); }

/* ── 9. fecho: campos retos e brancos sobre a areia ──────────────────────── */
[data-tema="riviera"] .formulario { border-top-color: var(--linha); }
[data-tema="riviera"] .formulario input { border-radius: 0; padding: 0 16px; background: #fff; border-color: var(--borda-campo); }
[data-tema="riviera"] .formulario input::placeholder { color: #7a7364; }
[data-tema="riviera"] .formulario input:focus-visible { outline-color: var(--azul); border-color: var(--azul); }

/* ── rodapé: noite de Mônaco, terminado ─────────────────────────────────────── */
[data-tema="riviera"] .rodape-riviera {
  background: var(--noite); color: var(--noite-cinza); font-size: .9375rem;
  padding: clamp(72px, 9vw, 128px) 0 clamp(28px, 3vw, 40px);
}
[data-tema="riviera"] .rr-topo {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 120px); align-items: end;
  padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid rgb(255 255 255 / .14);
}
[data-tema="riviera"] .rr-marca { width: clamp(180px, 22vw, 300px); color: var(--papel); }
[data-tema="riviera"] .rr-frase {
  justify-self: end; text-align: right; color: #fff;
  font-weight: 500; letter-spacing: -.032em; line-height: 1; font-size: clamp(1.9rem, 3.6vw, 3.2rem);
}
[data-tema="riviera"] .rr-colunas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: clamp(36px, 4vw, 56px) 0;
  border-bottom: 1px solid rgb(255 255 255 / .14); line-height: 1.7;
}
[data-tema="riviera"] .rr-titulo {
  margin-bottom: 14px; color: #fff; font-stretch: 112.5%; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
[data-tema="riviera"] .rodape-riviera address { font-style: normal; }
[data-tema="riviera"] .rodape-riviera a { color: var(--noite-tinta); text-decoration-color: rgb(255 255 255 / .35); }
[data-tema="riviera"] .rodape-riviera a:hover { color: #fff; text-decoration-color: currentColor; }
[data-tema="riviera"] .rodape-riviera ul a { text-decoration: none; }
[data-tema="riviera"] .rodape-riviera .for-svg { width: 92px; color: #fff; margin-bottom: 8px; }
[data-tema="riviera"] .rodape-riviera .link-seta { margin-top: 6px; }
[data-tema="riviera"] .rr-legal { margin-top: clamp(24px, 3vw, 36px); max-width: 110ch; color: var(--noite-cinza); font-size: .8125rem; line-height: 1.6; }
@media (max-width: 860px) {
  [data-tema="riviera"] .rr-topo { grid-template-columns: 1fr; align-items: start; }
  [data-tema="riviera"] .rr-frase { justify-self: start; text-align: left; }
  [data-tema="riviera"] .rr-colunas { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 760px) {
  /* a barra fixa de baixo cobre o fim da página no celular */
  [data-tema="riviera"] .rodape-riviera { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ── caixas flutuantes ───────────────────────────────────────────────────── */
[data-tema="riviera"] .aviso-cookies { background: #fff; border-color: var(--linha); box-shadow: 0 14px 40px rgb(19 35 58 / .12); }
[data-tema="riviera"] .barra-celular { box-shadow: 0 -8px 24px rgb(19 35 58 / .06); }