/* Site 03 · Lançamento da coleção Rivage (Verão 2027). Vem depois do site.css do site 01 (claro, cabeçalho preto).
   Paleta tirada da coleção: linho cru, amarelo da Juliete, turquesa e verde dos bordados. */
:root, :root[data-theme="light"] {
  --verao-linho: #F4EEE4;
  --verao-areia: #E8DCC8;
  --verao-sol: #F2D27A;
  --verao-sol-forte: #C99A2E;
  --verao-turquesa: #3DB6C8;
  --verao-verde: #8FA66A;
  --verao-rosa: #E9A9BC;
}

/* Faixa do topo */
.strip { background: linear-gradient(90deg, #1A1714, #2A2216 50%, #1A1714); color: #F4E6C6; }
.strip b.verao-tag { color: #1A1714; background: var(--verao-sol); padding: 2px 8px; border-radius: 2px; letter-spacing: .2em; }

/* Banner */
.verao-selo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 8px 14px; border: 1px solid rgba(242,210,122,.7); border-radius: 999px; font: 600 11px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: #FBEFD0; background: rgba(26,23,20,.32); backdrop-filter: blur(4px); }
.verao-selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--verao-sol); box-shadow: 0 0 10px var(--verao-sol); }
.hero.verao .verao-titulo { margin: 0 0 12px; line-height: .9; }
.hero.verao .verao-titulo .verao-nome { display: block; font: 400 clamp(60px, 9vw, 140px)/.9 var(--font-serif); letter-spacing: .14em; color: #FFFDF8; }
.hero.verao .verao-titulo .verao-sub { display: block; margin-top: 10px; font: italic 400 clamp(24px, 2.6vw, 38px)/1.1 var(--font-serif); color: var(--verao-sol); letter-spacing: 0; }
.hero.verao .slide h2 em { color: #FBE7B0; }
.hero.verao .slide .eyebrow { color: var(--verao-sol); }

/* Faixa do lançamento (com contagem opcional) */
.verao-faixa { position: relative; overflow: hidden; background: var(--verao-linho); border-bottom: 1px solid var(--line); }
.verao-faixa::before { content: ""; position: absolute; inset: -40% -10%; background: radial-gradient(ellipse 35% 60% at 12% 50%, rgba(242,210,122,.35), transparent 70%), radial-gradient(ellipse 30% 55% at 88% 50%, rgba(61,182,200,.16), transparent 70%); pointer-events: none; }
.verao-faixa-in { position: relative; max-width: 1320px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; }
.verao-faixa-txt p { margin: 0 0 6px; font: 600 11px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--verao-sol-forte); }
.verao-faixa-txt h2 { margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--font-serif); color: var(--ink); }
.verao-cores { display: flex; gap: 8px; align-items: center; }
.verao-cores i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 1px solid rgba(26,23,20,.14); }
.verao-relogio { display: flex; gap: 10px; }
.verao-relogio[hidden] { display: none; }
.verao-relogio div { min-width: 78px; padding: 12px 8px 10px; text-align: center; border: 1px solid var(--line); border-radius: 6px; background: #FFFDF9; }
.verao-relogio b { display: block; font: 600 34px/1 var(--font-sans); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.verao-relogio small { display: block; margin-top: 6px; font: 600 10px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }

/* Como garantir a coleção */
.verao-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: vp; }
.verao-passos li { position: relative; padding: 28px 24px 26px; border: 1px solid var(--line); border-radius: 6px; background: #FFFDF9; }
.verao-passos li::before { counter-increment: vp; content: "0" counter(vp); display: block; margin-bottom: 14px; font: 400 46px/1 var(--font-serif); color: var(--verao-sol-forte); }
.verao-passos h3 { margin: 0 0 6px; font: 500 24px/1.15 var(--font-serif); }
.verao-passos p { margin: 0; color: var(--ink-muted); font-size: 14.5px; }
.verao-passos .btn { margin-top: 16px; }
.verao-aviso { margin: 22px auto 0; max-width: 760px; text-align: center; font-size: 13px; color: var(--ink-muted); }

/* Selo "Verão 27" só nas peças da coleção nova */
.card-media .tag { background: var(--verao-sol); color: #1A1714; }

@media (max-width: 900px) {
  .verao-faixa-in { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .verao-cores, .verao-relogio { justify-content: center; }
  .verao-faixa-in .btn { justify-self: center; }
  .verao-passos { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .verao-relogio div { min-width: 64px; }
  .verao-relogio b { font-size: 28px; }
}