/* Identidade: Forever Curls · Tour Internacional 2027 (moodboard 02) */
:root {
  --preto: #171311;
  --marfim: #f3ebdd;
  --cobre: #c85a23;
  --chocolate: #49352d;
  --areia: #cdbaa4;
  --metal: #a7aaa9;

  --bg: var(--marfim);
  --ink: var(--preto);
  --muted: #6b5d55;
  --line: #ddd0bd;
  --card: #f8f3ea;
  --ok: #2f6b3f;
  --danger: #a3341b;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --script: 'Pinyon Script', cursive;
  --body: 'Inter', system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 64px);
  --max: 1180px;
}

* { box-sizing: border-box; }
/* "hidden" sempre vence: sem isso, .field e .checkout (display:grid) apareciam mesmo escondidos */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Rótulos no estilo do moodboard: caixa alta, negrito, espaçado */
.label {
  font: 700 12px/1.3 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.display {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.005em;
  margin: 0;
}
.copper { color: var(--cobre); }
.rule { height: 2px; background: var(--cobre); border: 0; margin: 0; }

/* Cabeçalho */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  max-width: var(--max); margin: 0 auto;
}
.site-header.on-dark { color: var(--marfim); }
.brand { text-decoration: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.brand-name, .brand-tour { font: 700 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.brand-name::after { content: ' /'; }
@media (max-width: 520px) {
  .brand { display: grid; gap: 3px; }
  .brand-name::after { content: none; }
  .brand-name, .brand-tour { font-size: 10.5px; }
  .brand-tour { color: var(--cobre); }
}
.langs { display: flex; gap: 2px; }
.langs button {
  background: none; border: 1px solid transparent; padding: 6px 9px; cursor: pointer;
  font: 700 11px/1 var(--body); letter-spacing: .12em; opacity: .65;
}
.langs button[aria-pressed='true'] { opacity: 1; border-color: currentColor; }
.langs button:hover { opacity: 1; }

/* Hero — aplicação do pôster: fundo claro e quente, INTERNATIONAL + assinatura "Tour 360" em cobre */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 78% 55%, rgba(200, 90, 35, .22), transparent 70%),
    linear-gradient(180deg, #efe4d6 0%, #e8d3c2 55%, #f3ebdd 100%);
}
.hero-inner {
  position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) var(--gutter) clamp(48px, 7vw, 88px);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center;
}
@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } }
.hero-academy { font: 400 clamp(34px, 4vw, 46px)/1 var(--script); color: var(--chocolate); margin: 0; }
.hero-academy small { display: block; font: 600 10px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; margin: 4px 0 0 .4em; }
/* O lockup escala pela largura da coluna (cqi), então "INTERNATIONAL" nunca é cortado */
.lockup { position: relative; margin: clamp(18px, 3vw, 30px) 0 0; line-height: 1; container-type: inline-size; max-width: 640px; }
.lockup .intl { display: block; font: 700 18.6cqi/.86 var(--display); text-transform: uppercase; color: var(--chocolate); letter-spacing: -.01em; }
.lockup .sign {
  position: absolute; left: 5%; top: 30%;
  font: 400 17cqi/1 var(--script); color: var(--cobre); white-space: nowrap;
  transform: rotate(-6deg); text-shadow: 0 0 1px rgba(200, 90, 35, .4);
}
.lockup .year { display: block; margin: .1em 0 0 33%; font: 700 11cqi/.9 var(--display); color: var(--marfim); text-shadow: 0 1px 2px rgba(73, 53, 45, .55), 0 2px 18px rgba(73, 53, 45, .35); }
.hero .quote { margin: clamp(26px, 4vw, 40px) 0 22px; font: 400 clamp(20px, 2.6vw, 30px)/1.08 var(--body); text-transform: uppercase; letter-spacing: -.02em; color: var(--chocolate); max-width: 22ch; }
.hero .quote em { font-style: italic; }
.hero .quote b { font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.hero-cta .btn { font: 700 clamp(18px, 2vw, 22px)/1 var(--display); letter-spacing: .02em; min-height: 52px; }
.hero-cta .dates { font: 700 12px/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--chocolate); }

.hero-photo {
  position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 460px; justify-self: end;
  background: linear-gradient(170deg, #dcc3ae 0%, #c99c7e 60%, #a8735a 100%);
  overflow: hidden;
}
.hero-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Com a arte no lugar, a linha e o degradê de reserva saem para não cobrir a frase do pôster */
.hero-photo:has(img) { aspect-ratio: 687 / 864; box-shadow: 0 24px 60px -28px rgba(73, 53, 45, .55); }
/* Celular com o pôster no ar: ele já traz título e frase, então o texto repetido sai da tela
   (o título continua no HTML para leitores de tela e buscadores) e o pôster vem antes do botão */
@media (max-width: 860px) {
  .hero-inner:has(.hero-photo img) { gap: 22px; padding-top: 8px; }
  .hero-inner:has(.hero-photo img) .hero-photo { order: -1; aspect-ratio: 687 / 864; max-width: 520px; justify-self: center; }
  .hero-inner:has(.hero-photo img) .hero-academy,
  .hero-inner:has(.hero-photo img) .quote { display: none; }
  .hero-inner:has(.hero-photo img) .lockup {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .hero-inner:has(.hero-photo img) .hero-cta { justify-content: center; text-align: center; }
  .hero-inner:has(.hero-photo img) .hero-cta .btn { width: 100%; max-width: 520px; }
}
.hero-photo:has(img)::after, .hero-photo:has(img) .hero-line { display: none; }
.hero-photo::after { content: ''; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, #f3ebdd); pointer-events: none; }
@media (max-width: 860px) {
  .hero-photo { justify-self: stretch; max-width: none; aspect-ratio: 4 / 3; }
  .hero-photo:not(:has(img)) { display: none; } /* sem foto ainda: não ocupa a tela do celular */
}
.hero-line { position: absolute; inset: 0; width: 100%; height: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--cobre); color: #fff;
  font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  transition: background .15s, transform .15s;
}
.btn:hover { background: #b14d1c; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.dark { background: var(--preto); }
.btn.dark:hover { background: var(--chocolate); }
.btn.ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn.block { width: 100%; }

/* Lista de cidades */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { font-size: clamp(40px, 6vw, 64px); }
.section-head p { margin: 0; color: var(--muted); max-width: 52ch; }

.cities { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--preto); }
.city {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 8px 24px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background .2s;
}
a.city:hover { background: linear-gradient(90deg, transparent, rgba(200, 90, 35, .07)); }
a.city:hover .city-name { color: var(--cobre); }
.city-num { font: 700 14px/1 var(--body); letter-spacing: .1em; color: var(--cobre); }
.city-name { font-size: clamp(34px, 5.4vw, 58px); transition: color .2s; }
.city-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; color: var(--muted); font-size: 14px; }
.city-meta strong { color: var(--ink); font-weight: 600; }
.city-side { text-align: right; display: grid; gap: 10px; justify-items: end; }
.city-price { font-size: 14px; color: var(--muted); }
.city-price b { display: block; font: 700 26px/1 var(--display); color: var(--ink); }
.city.is-out { opacity: .55; }
.badge { display: inline-block; padding: 5px 9px; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; background: var(--preto); color: var(--marfim); }
.badge.copper { background: var(--cobre); color: #fff; }

@media (max-width: 720px) {
  .city { grid-template-columns: 1fr; padding: 22px 0; }
  .city-num { order: -1; }
  .city-side { text-align: left; justify-items: start; grid-auto-flow: column; align-items: end; justify-content: space-between; }
}

/* Faixa de manifesto */
.manifesto { background: var(--chocolate); color: var(--marfim); }
.manifesto .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); }
.manifesto h2 { font-size: clamp(38px, 5.5vw, 64px); }
.manifesto p { color: var(--areia); margin: 0; max-width: 40ch; }
.manifesto .rule { margin: 18px 0; max-width: 260px; }
@media (max-width: 720px) { .manifesto .wrap { grid-template-columns: 1fr; } }

.site-footer { padding-top: 28px; padding-bottom: 40px; color: var(--muted); font-size: 13px; }
.site-footer p { margin: 0; }
.footer-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink); }
.credit .label { font-size: 10.5px; }
.credit img { height: 18px; width: auto; }
.contacts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 14px !important; color: var(--ink); }
.contacts a { font-weight: 600; text-decoration-color: var(--cobre); text-underline-offset: 3px; }
.contacts a:hover { color: var(--cobre); }

/* Página da cidade */
.event-top {
  color: var(--chocolate); border-bottom: 2px solid var(--cobre);
  background:
    radial-gradient(ellipse 60% 90% at 85% 40%, rgba(200, 90, 35, .18), transparent 70%),
    linear-gradient(180deg, #efe4d6, #e8d3c2);
}
.event-top .wrap { padding-top: clamp(16px, 3vw, 28px); padding-bottom: clamp(32px, 5vw, 56px); position: relative; }
.back { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--cobre); }
.back:hover { color: var(--chocolate); }
.event-top .sign { font: 400 clamp(40px, 6vw, 72px)/1 var(--script); color: var(--cobre); margin: 18px 0 -.3em; transform: rotate(-4deg); transform-origin: left; }
.event-top h1 { font-size: clamp(56px, 11vw, 132px); }
.event-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; }
.event-facts b { color: var(--preto); font-weight: 600; }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); padding: clamp(32px, 5vw, 56px) 0; align-items: start; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }
.step { margin-bottom: 40px; }
.step-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--preto); }
.step-title .display { font-size: 30px; }

.ticket-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.ticket-row .t-name { font: 700 24px/1 var(--display); text-transform: uppercase; }
.ticket-row .t-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.ticket-row .t-price { font-weight: 600; margin-top: 6px; }
.ticket-row .t-left { color: var(--cobre); font-size: 13px; font-weight: 600; }
.ticket-row .t-day { margin-bottom: 6px; font-size: 11px; }
.ticket-row .t-badge { margin-top: 8px; background: var(--chocolate); }

.alumni { margin-top: 18px; padding: 18px; background: var(--card); border-left: 3px solid var(--cobre); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-weight: 600; margin-bottom: 14px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--chocolate); flex: none; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--preto); }
.qty button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 20px; }
.qty button:hover:not([disabled]) { background: var(--areia); }
.qty button[disabled] { opacity: .3; cursor: not-allowed; }
.qty output { min-width: 30px; text-align: center; font-weight: 700; }

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.field input {
  height: 50px; padding: 0 14px; border: 1.5px solid var(--areia); background: var(--card);
  border-radius: 0; outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--preto); }
.field small { color: var(--muted); font-size: 13px; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .fields-2 { grid-template-columns: 1fr; } }

/* Pago total × reserva com sinal */
.plans { display: grid; gap: 10px; margin-bottom: 16px; }
.plan { position: relative; cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan span { display: grid; gap: 4px; padding: 14px 16px 14px 46px; border: 1.5px solid var(--areia); background: var(--card); position: relative; }
.plan span::before { content: ''; position: absolute; left: 16px; top: 16px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--chocolate); }
.plan input:checked + span { border-color: var(--preto); }
.plan input:checked + span::before { background: var(--cobre); border-color: var(--cobre); box-shadow: inset 0 0 0 3px var(--card); }
.plan input:focus-visible + span { outline: 2px solid var(--cobre); outline-offset: 2px; }
.plan b { font-weight: 700; }
.plan small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.summary-split { margin: -6px 0 16px; padding: 12px 0 0; border-top: 1px dashed var(--line); }

.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.method { position: relative; }
.method input { position: absolute; opacity: 0; }
.method span {
  display: flex; align-items: center; justify-content: center; height: 54px; cursor: pointer;
  border: 1.5px solid var(--areia); background: var(--card); font-weight: 600;
}
.method input:checked + span { border-color: var(--preto); background: var(--preto); color: var(--marfim); }
.method input:focus-visible + span { outline: 2px solid var(--cobre); outline-offset: 2px; }

.summary { position: sticky; top: 20px; background: var(--card); border-top: 4px solid var(--cobre); padding: 24px; }
.summary h3 { font-size: 28px; margin-bottom: 14px; }
.summary-lines { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; font-size: 15px; }
.summary-lines li { display: flex; justify-content: space-between; gap: 12px; }
.summary-empty { color: var(--muted); font-size: 14px; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 18px; border-top: 1px solid var(--line); }
.summary-total b { font: 700 32px/1 var(--display); }
/* Celular: total e botão sempre à mão numa barra fixa embaixo */
.mobile-bar { display: none; }
@media (max-width: 900px) {
  .summary { position: static; }
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; inset: auto 0 0; z-index: 10;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--preto); color: var(--marfim);
    box-shadow: 0 -10px 30px -12px rgba(23, 19, 17, .5);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .mobile-bar.show { transform: none; }
  .mobile-bar b { display: block; font: 700 26px/1 var(--display); }
  .mobile-bar small { font: 700 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--areia); }
  .mobile-bar .btn { min-height: 46px; padding: 0 18px; }
  body.has-bar .site-footer { padding-bottom: 110px; }
}
.form-error { color: var(--danger); font-weight: 600; font-size: 14px; margin: 12px 0 0; min-height: 1em; }
.notice { padding: 14px 16px; background: var(--areia); font-size: 14px; }

/* Página do pedido */
.order { max-width: 760px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) 0; }
.order h1 { font-size: clamp(44px, 8vw, 80px); margin: 10px 0 8px; }
.status-pill { display: inline-flex; gap: 8px; align-items: center; }
.status-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--metal); }
.status-pill.paid::before { background: var(--ok); }
.status-pill.reserved::before { background: var(--cobre); }
.btn.wa { background: #1f7a4a; }
.btn.wa:hover { background: #18633c; }
.status-pill.pending::before { background: var(--cobre); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.pay-box { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; background: var(--card); padding: 24px; margin: 28px 0; }
@media (max-width: 620px) { .pay-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.pay-box img { width: 220px; height: 220px; background: #fff; padding: 8px; }
.pix-code { display: flex; gap: 8px; margin-top: 14px; }
.pix-code input { flex: 1; min-width: 0; height: 46px; padding: 0 10px; border: 1.5px solid var(--areia); background: #fff; font: 13px/1 ui-monospace, monospace; }
.test-box { border: 1.5px dashed var(--cobre); padding: 16px; margin: 20px 0; display: grid; gap: 12px; justify-items: start; }

.tickets { display: grid; gap: 18px; margin: 28px 0; }
.ticket {
  display: grid; grid-template-columns: 1fr 170px; background: var(--preto); color: var(--marfim);
  position: relative; overflow: hidden; break-inside: avoid;
}
.ticket-main { padding: 22px 24px; display: grid; gap: 14px; align-content: space-between; }
.ticket-main .display { font-size: 40px; }
.ticket-kind { color: var(--cobre); }
.ticket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; font-size: 14px; color: var(--areia); }
.ticket-meta b { display: block; color: var(--marfim); font-weight: 600; }
.ticket-qr { background: var(--marfim); padding: 14px; display: grid; justify-items: center; align-content: center; gap: 8px; border-left: 2px dashed var(--chocolate); }
.ticket-qr img { width: 140px; height: 140px; }
.ticket-qr code { font: 700 13px/1 ui-monospace, monospace; color: var(--preto); letter-spacing: .06em; }
@media (max-width: 560px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket-qr { border-left: 0; border-top: 2px dashed var(--chocolate); }
  .ticket-qr img { width: 200px; height: 200px; }
}

.lines-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lines-table td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.lines-table td:last-child { text-align: right; }
.lines-table tr.total td { border-bottom: 0; font-weight: 700; font-size: 18px; }

.skeleton { color: var(--muted); padding: 40px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .ticket { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}