/* =========================================================================
   redesign-apple.css — camada visual "Apple" da EMVIAGEM (homepage)
   Só APRESENTAÇÃO. Carregada depois de styles.css/home-hotels.css,
   apenas na index.html. Não altera nenhuma lógica, id, name, data-* nem JS.
   Princípios: Apple HIG + skill apple-design (movimento sóbrio, materiais
   translúcidos, tipografia por tamanho, feedback imediato, reduced-motion).
   ========================================================================= */

:root {
  /* Superfícies */
  --ap-bg: #f5f5f7;
  --ap-surface: #ffffff;
  --ap-surface-2: #f0f0f2;
  --ap-hairline: rgba(0, 0, 0, .08);

  /* Texto */
  --ap-text: #1d1d1f;
  --ap-text-2: #5e5e64;
  --ap-note: #6e6e73;

  /* Ação — laranja com contraste AA sobre branco */
  --ap-accent: #b43c00;
  --ap-accent-press: #9a3300;
  --ap-ink: #1d1d1f;          /* botões escuros (ações secundárias) */
  --ap-brand: #ff7900;        /* só detalhes de marca não-textuais */

  /* Forma e profundidade */
  --ap-r-card: 24px;
  --ap-r-lg: 28px;
  --ap-r-field: 14px;
  --ap-r-pill: 980px;
  --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .06);
  --ap-shadow-pop: 0 10px 44px rgba(0, 0, 0, .14);

  /* Material translúcido */
  --ap-glass: rgba(245, 245, 247, .72);
  --ap-glass-blur: saturate(180%) blur(20px);

  /* Tipografia / sistema */
  --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --ap-tap: 44px;

  /* Easing e durações (curtas, compositor-friendly) */
  --ap-ease: cubic-bezier(.32, .72, 0, 1);
  --ap-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ap-dur: .34s;
}

/* ---- Base ------------------------------------------------------------- */
body {
  background: var(--ap-bg);
  color: var(--ap-text);
  font-family: var(--ap-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main#conteudo {
  color: var(--ap-text);
}

/* Feedback imediato ao premir (anima só transform) */
.button,
.unified-tab,
.promo-banner,
.promo-cta,
.nav-cta,
.whatsapp-float,
.mobile-action-bar a,
.newsletter-control button,
.search-reset,
.integrated-search-submit {
  transition: transform .1s var(--ap-ease-out),
              box-shadow var(--ap-dur) var(--ap-ease-out),
              background-color .18s ease, color .18s ease;
}
.button:active,
.unified-tab:active,
.promo-banner:active,
.promo-cta:active,
.nav-cta:active,
.whatsapp-float:active,
.mobile-action-bar a:active,
.newsletter-control button:active,
.search-reset:active,
.integrated-search-submit:active {
  transform: scale(.97);
}

/* Tipografia por tamanho */
h1, .hero h1,
.section h2,
.proposal-contact-section h2,
.closing-cta h2,
.newsletter-card h2,
.agencies-section h2 {
  letter-spacing: -.025em;
  line-height: 1.05;
}
p, li, label, input, select, textarea, .hero-copy {
  letter-spacing: normal;
  line-height: 1.45;
}

/* ---- Cabeçalho fixo translúcido -------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ap-glass);
  -webkit-backdrop-filter: var(--ap-glass-blur);
  backdrop-filter: var(--ap-glass-blur);
  border-bottom: 1px solid var(--ap-hairline);
}
.site-header .utility-bar {
  background: transparent;
  color: var(--ap-note);
  border-bottom: 1px solid var(--ap-hairline);
  font-size: .8rem;
}
.site-header .utility-bar a { color: var(--ap-text-2); }
.site-header .nav-wrap { align-items: center; }
.brand-word {
  letter-spacing: -.02em;
  font-weight: 650;
  color: var(--ap-text);
}
.main-nav a {
  color: var(--ap-text-2);
  font-weight: 500;
  border-radius: var(--ap-r-pill);
  white-space: nowrap;      /* evita "A minha / viagem" partido em duas linhas */
}
.main-nav a:hover { color: var(--ap-text); }
.main-nav a.nav-account {
  color: var(--ap-text);
  font-weight: 560;
}
.main-nav a.nav-cta {
  background: var(--ap-accent);
  color: #fff;
  border-radius: var(--ap-r-pill);
  padding: .5rem 1.05rem;
  min-height: var(--ap-tap);
  display: inline-flex;
  align-items: center;
  box-shadow: none;
}
.main-nav a.nav-cta:hover { background: var(--ap-accent-press); }
.menu-toggle {
  border-radius: var(--ap-r-pill);
  border: 1px solid var(--ap-hairline);
  min-height: var(--ap-tap);
}

/* ---- Hero -------------------------------------------------------------- */
.hero-content .kicker {
  color: #fff;
  opacity: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 600;
}
.hero h1 {
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.04;
}
.hero-copy { color: rgba(255, 255, 255, .92); }

/* ---- Segmented control (abas da pesquisa) ---------------------------- */
.unified-search-panel {
  background: var(--ap-surface);
  border-radius: var(--ap-r-lg);
  box-shadow: var(--ap-shadow-sm);
  border: 1px solid var(--ap-hairline);
}
.unified-tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--ap-surface-2);
  border-radius: var(--ap-r-pill);
  border: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.unified-tabs::-webkit-scrollbar { display: none; }
.unified-tab {
  flex: 1 0 auto;
  border: none;
  background: transparent;
  color: var(--ap-text-2);
  font-weight: 550;
  font-size: .92rem;
  border-radius: var(--ap-r-pill);
  padding: .6rem 1rem;
  min-height: 40px;
  white-space: nowrap;
  cursor: pointer;
}
.unified-tab.is-active {
  background: var(--ap-surface);
  color: var(--ap-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.unified-tab span[aria-hidden="true"] { opacity: .7; margin-right: .15rem; }
/* Rótulos da aba Disney: herdam o tamanho/peso do botão (styles.css:106 põe
   todos os <span> da aba a 1.05rem — isso é só para os ícones). */
.unified-tab .u-tab-full,
.unified-tab .u-tab-mini { font-size: inherit; font-weight: inherit; }
/* Rótulo curto da aba Disney — só aparece no telemóvel. */
.u-tab-mini { display: none; }

/* Telemóvel: as 5 abas cabem numa só linha, sem scroll horizontal.
   Fora os ícones decorativos e "Disneyland Paris" → "Disney" para caberem. */
@media (max-width: 560px) {
  .unified-tabs { gap: 1px; padding: 3px; }
  .unified-tab {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .76rem;
    padding: .5rem .3rem;
    letter-spacing: -.01em;
  }
  .unified-tab span[aria-hidden="true"] { display: none; }
  .u-tab-full { display: none; }
  .u-tab-mini { display: inline; }
}

/* ---- Campos de formulário (estilo iOS) ------------------------------- */
.integrated-search-form label,
.proposal-form label,
.assisted-search-form label {
  color: var(--ap-text-2);
  font-weight: 550;
  font-size: .88rem;
}
.integrated-search-form input,
.integrated-search-form select,
.proposal-form input,
.proposal-form select,
.proposal-form textarea,
.assisted-search-form input,
.assisted-search-form select {
  background: var(--ap-surface);
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-r-field);
  color: var(--ap-text);
  min-height: var(--ap-tap);
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.integrated-search-form input:focus,
.integrated-search-form select:focus,
.proposal-form input:focus,
.proposal-form select:focus,
.proposal-form textarea:focus,
.assisted-search-form input:focus,
.assisted-search-form select:focus {
  outline: none;
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 3px rgba(180, 60, 0, .16);
}

/* ---- Botões ----------------------------------------------------------- */
.button-primary,
.integrated-search-submit {
  background: var(--ap-accent);
  color: #fff;
  border: none;
  border-radius: var(--ap-r-pill);
  min-height: var(--ap-tap);
  font-weight: 600;
  box-shadow: none;
}
.button-primary:hover,
.integrated-search-submit:hover { background: var(--ap-accent-press); }
.button-light {
  background: var(--ap-surface);
  color: var(--ap-ink);
  border-radius: var(--ap-r-pill);
  min-height: var(--ap-tap);
  font-weight: 600;
}

/* ---- Calendário: manter o verde "voo direto confirmado" -------------- */
.holiday-date-calendar {
  border-radius: var(--ap-r-card);
  box-shadow: var(--ap-shadow-pop);
  border: 1px solid var(--ap-hairline);
  background: var(--ap-surface);
}

/* ---- Ofertas sazonais: carrossel no telemóvel, grelha no desktop ----- */
.promo-band .container {
  gap: 1rem;
}
.promo-band .promo-banner {
  border-radius: var(--ap-r-card);
  box-shadow: var(--ap-shadow-sm);
}
.promo-band .promo-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--ap-shadow-pop);
}
.promo-band .promo-cta {
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--ap-r-pill);
  color: #fff;
}

/* Fotos dos cartoes de charter (Verao 2027). Em classe CSS (nao no style
   inline) porque o &amp; num atributo style inline corrompia o url. */
.vt-charter-creta, .vt-charter-djerba, .vt-charter-saidia,
.vt-charter-sardenha, .vt-charter-monastir { background-size: cover; background-position: center; }
.vt-charter-creta { background-image: url('https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=1200&q=80'); }
.vt-charter-djerba { background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80'); }
.vt-charter-saidia { background-image: url('https://images.unsplash.com/photo-1512100356356-de1b84283e18?auto=format&fit=crop&w=1200&q=80'); }
.vt-charter-sardenha { background-image: url('https://images.unsplash.com/photo-1596436889106-be35e843f974?auto=format&fit=crop&w=1200&q=80'); }
.vt-charter-monastir { background-image: url('https://images.unsplash.com/photo-1601581875039-e899893d520c?auto=format&fit=crop&w=1200&q=80'); }

/* Hero sem subtitulo -> nao deixar o espaco do paragrafo vazio. */
.hero-content .hero-copy:empty { display: none; }

/* ---- Blocos de secção: cartões brancos sobre fundo cinzento ---------- */
.offers-section,
.agencies-section {
  background: var(--ap-bg);
}
.newsletter-card,
.proposal-form,
.home-hotel-card,
.agency-card {
  background: var(--ap-surface);
  border-radius: var(--ap-r-card);
  box-shadow: var(--ap-shadow-sm);
  border: 1px solid var(--ap-hairline);
}
.eyebrow,
.offers-availability-note,
.offers-note { color: var(--ap-note); }

/* Newsletter: era um cartão laranja com texto branco → passa a cartão branco
   limpo com texto escuro, campo neutro e botão no acento. */
.newsletter-section { background: var(--ap-bg); }
.newsletter-card { color: var(--ap-text); }
.newsletter-card h2 { color: var(--ap-text); }
.newsletter-card p { color: var(--ap-text-2); }
.newsletter-control {
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-hairline);
}
.newsletter-control input {
  background: transparent;
  color: var(--ap-text);
  min-height: var(--ap-tap);
}
.newsletter-control input::placeholder { color: var(--ap-note); }
.newsletter-control button {
  background: var(--ap-accent);
  color: #fff;
  border-radius: var(--ap-r-pill);
  min-height: calc(var(--ap-tap) - 6px);
  font-weight: 600;
}
.newsletter-control button:hover { background: var(--ap-accent-press); }
.newsletter-note { color: var(--ap-note); }

/* Cartões de ofertas dinâmicas (#offers-grid, vindos da função catálogo):
   eram quadrados e creme → cartões brancos arredondados com sombra suave,
   preço a ink e a ação no acento. */
.offer-card {
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-r-card);
  background: var(--ap-surface);
  box-shadow: var(--ap-shadow-sm);
}
.offer-card:hover { box-shadow: var(--ap-shadow-pop); }
.offer-card h3 a:hover { color: var(--ap-accent); }
.offer-meta, .offer-summary { color: var(--ap-text-2); }
.offer-bottom { border-top-color: var(--ap-hairline); }
.offer-bottom > p { color: var(--ap-note); }
.offer-bottom strong { color: var(--ap-text); }
.offer-bottom a { color: var(--ap-accent); }
.offer-bottom .poster-link { color: var(--ap-text-2); }
.offer-photo > p { border-top-left-radius: var(--ap-r-field); }

/* ---- Bloco escuro "Vamos falar sobre a sua viagem." ------------------ */
.closing-cta {
  background: var(--ap-ink);
  color: #fff;
  border-radius: var(--ap-r-lg);
  margin: 2rem auto;
}
.closing-cta .eyebrow { color: rgba(255, 255, 255, .7); }
.closing-cta h2 { color: #fff; }
.closing-cta p { color: rgba(255, 255, 255, .85); }

/* ---- Rodapé ----------------------------------------------------------- */
.site-footer { background: var(--ap-ink); }

/* ---- Barra de ação / WhatsApp flutuante no telemóvel ----------------- */
.whatsapp-float {
  border-radius: var(--ap-r-pill);
  box-shadow: var(--ap-shadow-pop);
}
.mobile-action-bar {
  background: var(--ap-glass);
  -webkit-backdrop-filter: var(--ap-glass-blur);
  backdrop-filter: var(--ap-glass-blur);
  border-top: 1px solid var(--ap-hairline);
}
.mobile-action-bar a { color: var(--ap-text); min-height: var(--ap-tap); }
.mobile-action-bar .mobile-action-primary {
  background: var(--ap-accent);
  color: #fff;
  border-radius: var(--ap-r-pill);
}

/* ---- WhatsApp: folha inferior (bottom sheet) ------------------------- */
.whatsapp-assistant[open] {
  border: none;
  border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0;
  box-shadow: var(--ap-shadow-pop);
  background: var(--ap-surface);
  color: var(--ap-text);
}
.whatsapp-assistant .whatsapp-assistant-options button {
  background: var(--ap-surface-2);
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-r-field);
  color: var(--ap-text);
  min-height: var(--ap-tap);
}
.whatsapp-assistant .whatsapp-assistant-options button strong { color: var(--ap-text); }
.whatsapp-assistant .whatsapp-assistant-options button span { color: var(--ap-note); }

@media (max-width: 780px) {
  .whatsapp-assistant[open] {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 86vh;
    border-radius: var(--ap-r-lg) var(--ap-r-lg) 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    animation: ap-sheet-in var(--ap-dur) var(--ap-ease);
    touch-action: none;
  }
  /* "pega" de arrastar */
  .whatsapp-assistant[open]::before {
    content: "";
    display: block;
    width: 38px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    margin: 2px auto .6rem;
  }
  /* Ofertas: carrossel horizontal com scroll-snap.
     section.promo-band (0,1,1 + .container = 0,2,1) vence o <style> inline
     da index (.promo-band .container = 0,2,0) sem o editar. O contentor-intro
     dos charters tem style="display:block" inline (1,0,0,0) e fica de fora. */
  section.promo-band .container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .9rem;
    padding-bottom: .4rem;
    scrollbar-width: none;
  }
  section.promo-band .container::-webkit-scrollbar { display: none; }
  section.promo-band .container > .promo-banner {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

@keyframes ap-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---- Polimento ao pormenor (homepage) -------------------------------- */
/* Foco de teclado acessível, com o acento (não nos campos — esses já têm
   anel próprio via :focus). */
a:focus-visible,
button:focus-visible,
.unified-tab:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ap-accent);
  outline-offset: 2px;
  border-radius: var(--ap-r-field);
}
/* Eyebrows uniformes em todo o site. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  font-size: .78rem;
  color: var(--ap-note);
}
/* Respiro de leitura no hero. */
.hero-content .hero-copy { max-width: 46ch; }
/* Pílula ativa do segmented com um pouco mais de presença. */
.unified-tab.is-active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .05);
}
/* Carrossel do telemóvel: primeiro cartão alinhado e respiro nas pontas. */
@media (max-width: 780px) {
  section.promo-band .container {
    scroll-padding-left: 16px;
    padding-left: 2px;
    padding-right: 16px;
  }
}

/* ---- Páginas charter (template ch-*: creta/djerba/saidia/sardenha/…) --
   Partilham header/rodapé/botões (já apanham a base). Aqui só os componentes
   próprios. Os gradientes dos heros estão em style="" inline e ficam intactos. */
.ch-hero h1 { letter-spacing: -.025em; line-height: 1.05; }
.ch-section h2 { letter-spacing: -.02em; line-height: 1.08; }
.ch-section { border-top-color: var(--ap-hairline); }
.ch-lead, .ch-cols p { color: var(--ap-text-2); }
.ch-note, .ch-fact .ch-fact-k { color: var(--ap-note); }
.ch-fact {
  border: 1px solid var(--ap-hairline);
  border-radius: var(--ap-r-field);
  box-shadow: var(--ap-shadow-sm);
  background: var(--ap-surface);
}
.ch-fact .ch-fact-v { color: var(--ap-text); }
.ch-btn {
  border-radius: var(--ap-r-pill);
  min-height: var(--ap-tap);
  transition: transform .1s var(--ap-ease-out), box-shadow var(--ap-dur) var(--ap-ease-out), background-color .18s ease;
}
.ch-btn:active { transform: scale(.97); }
.ch-btn-primary { background: var(--ap-accent); box-shadow: none; }
.ch-btn-primary:hover { background: var(--ap-accent-press); transform: none; }
.ch-faq summary::before { color: var(--ap-accent); }
.ch-faq details { border-bottom-color: var(--ap-hairline); }
.ch-faq p { color: var(--ap-text-2); }
.ch-cta { background: var(--ap-ink); border-radius: var(--ap-r-lg); }

@media (prefers-reduced-motion: reduce) {
  .ch-btn:active { transform: none; }
}

/* ---- Páginas de destino SEO (cv-* / dest-*) -------------------------- */
/* Partilham header/rodapé/body/botões globais. Aqui só os botões e acentos
   próprios do template. Heros com gradiente em style="" inline ficam intactos. */
.cv-btn, .dest-btn {
  border-radius: var(--ap-r-pill);
  min-height: var(--ap-tap);
  transition: transform .1s var(--ap-ease-out), box-shadow var(--ap-dur) var(--ap-ease-out), background-color .18s ease;
}
.cv-btn:active, .dest-btn:active { transform: scale(.97); }
.cv-btn-primary, .dest-btn-primary { background: var(--ap-accent); box-shadow: none; }
.cv-btn-primary:hover, .dest-btn-primary:hover { background: var(--ap-accent-press); transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cv-btn:active, .dest-btn:active { transform: none; }
}

/* ---- Banner de cookies (harmonizado com a paleta Apple) -------------- */
/* Classes globais de consent.css; aqui só na homepage, por cima, sem editar
   o ficheiro partilhado. Migra para consent.css quando alargarmos o redesign. */
.emv-consent__card {
  background: var(--ap-surface);
  color: var(--ap-text);
  border: 1px solid var(--ap-hairline);
  border-top: 3px solid var(--ap-accent);
  border-radius: var(--ap-r-card);
  box-shadow: var(--ap-shadow-pop);
}
.emv-consent__title { color: var(--ap-text); font-weight: 650; }
.emv-consent__text { color: var(--ap-text-2); }
.emv-consent__text a { color: var(--ap-accent); }
.emv-consent__opt input { accent-color: var(--ap-accent); }
.emv-consent__opt-text strong { color: var(--ap-text); }
.emv-consent__opt-text span { color: var(--ap-note); }
.emv-consent__btn { border-radius: var(--ap-r-pill); font-weight: 600; min-height: var(--ap-tap); }
.emv-consent__btn--primary { background: var(--ap-accent); }
.emv-consent__btn--primary:hover { background: var(--ap-accent-press); }
.emv-consent__btn--ghost { color: var(--ap-ink); border-color: var(--ap-hairline); }
.emv-consent__btn--ghost:hover { border-color: var(--ap-ink); }
.emv-consent__btn--link:hover { color: var(--ap-accent); }
@media (max-width: 480px) {
  .emv-consent__card { border-radius: var(--ap-r-card) var(--ap-r-card) 0 0; }
}

/* ---- Acessibilidade: reduzir movimento / transparência --------------- */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-assistant[open] { animation: ap-fade-in .2s ease; }
  .button:active,
  .unified-tab:active,
  .promo-banner:active { transform: none; }
  * { scroll-behavior: auto !important; }
}
@keyframes ap-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .mobile-action-bar { background: var(--ap-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}