/*
 Luxury Layer Stylesheet (lux.css)
 Enhances base theme with refined typography scale, subtle gradients, elevated components,
 and accessibility / motion refinements. Keep overrides minimal; base remains in style.css.
*/

:root {
  /* Typographic scale using clamp for fluid responsiveness */
  --font-size-xs: clamp(0.68rem, 0.55vw + 0.55rem, 0.75rem);
  --font-size-sm: clamp(0.78rem, 0.6vw + 0.62rem, 0.85rem);
  --font-size-base: clamp(0.92rem, 0.5vw + 0.76rem, 1rem);
  --font-size-md: clamp(1.05rem, 1vw + 0.7rem, 1.25rem);
  --font-size-lg: clamp(1.4rem, 1.6vw + 1rem, 1.85rem);
  --font-size-xl: clamp(2.1rem, 2.6vw + 1.4rem, 2.8rem);
  --font-size-xxl: clamp(2.6rem, 4vw + 1.4rem, 3.6rem);

  /* Luxury subtle surface accents */
  --lux-gradient-gold: linear-gradient(92deg,var(--color-accent) 0%,#f7e7b5 70%);
  --lux-gradient-gloss: linear-gradient(135deg,rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 65%);
  --lux-card-bg: linear-gradient(145deg,rgba(20,20,24,.92) 0%, rgba(28,28,32,.92) 100%);
  --lux-border-gold: linear-gradient(90deg,rgba(212,175,55,.9),rgba(247,231,181,.55));
  --lux-timing: cubic-bezier(.16,.7,.3,1);
  /* Altura mínima padrão dos cards da frota */
  --fleet-card-min-h: 420px;
}

/* Light theme palette (CSS variables override when [data-theme="light"]) */
[data-theme="light"] {
  --color-bg:#fafafa;
  --color-surface:#ffffff;
  --color-surface-alt:#f2f2f4;
  --color-text:#222325;
  --color-text-muted:#5b5e63;
  --shadow-sm:0 2px 4px rgba(0,0,0,.12);
  --shadow-md:0 6px 18px -4px rgba(0,0,0,.18);
}

/* Toggle button */
.theme-toggle {
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--color-surface); color:var(--color-text);
  border:1px solid #2d2d33; border-radius:44px; padding:8px 18px;
  font-size:.65rem; text-transform:uppercase; letter-spacing:.15em; font-weight:600;
  cursor:pointer; transition:var(--transition); box-shadow:var(--shadow-sm);
}
.theme-toggle:hover {background:var(--color-accent); color:#111; transform:translateY(-2px); box-shadow:var(--shadow-md);} 
.theme-toggle:focus-visible {outline:2px solid var(--color-accent); outline-offset:2px;}
.theme-toggle .icon {display:inline-flex; width:18px; height:18px;}
body[data-theme="light"] .theme-toggle {background:var(--color-surface-alt);}
body[data-theme="light"] .theme-toggle:hover {background:var(--color-accent);}

/* Back-to-top button */
.back-to-top {
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--color-surface); color:var(--color-text); border:1px solid #2d2d33;
  display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer;
  box-shadow:var(--shadow-sm); opacity:0; transform:translateY(16px); transition:opacity .35s ease, transform .35s ease;
  z-index:120; backdrop-filter:blur(6px);
}
.back-to-top.visible {opacity:1; transform:translateY(0);} 
.back-to-top:hover {background:var(--color-accent); color:#111; box-shadow:var(--shadow-md);}
.back-to-top:focus-visible {outline:2px solid var(--color-accent); outline-offset:2px;}

/* Typography refinements */
body {font-size: var(--font-size-base);}
h1, .hero-title {font-size: var(--font-size-xxl); line-height:1.05; letter-spacing:.6px;}
h2 {font-size: var(--font-size-xl); line-height:1.12;}
h3 {font-size: var(--font-size-md);}
small {font-size: var(--font-size-xs);}

.lux-gradient-text {background: var(--lux-gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lux-divider {height:1px; width:100%; background:linear-gradient(90deg,rgba(212,175,55,.65),rgba(247,231,181,.35) 35%, rgba(212,175,55,.05) 70%, transparent); margin:32px 0; border:none;}

/* Card enhancement layer */
.lux-card, .fleet-vehicles .vehicle, .itinerary-item, .highlight-item, .team-member, .testimonial-card, .service-item {
  background: var(--lux-card-bg);
  position: relative;
}
/* Área de ações no fluxo, empurra para base sem sobrepor conteúdo */
.card-actions {margin-top: 14px; display: flex; justify-content: flex-end;}
.card-actions .card-cta {position: static; right:auto; bottom:auto;}
/* Ajuste do botão agora que não é absoluto */
.card-cta {background: rgba(0,0,0,0.08); color: var(--color-text); padding:8px 14px; border-radius:999px; font-size:.75rem; font-weight:600; letter-spacing:.12em; display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:background .25s var(--lux-timing), transform .25s var(--lux-timing);}
.card-cta:hover {background: var(--color-accent); color:#111; transform:translateY(-2px);}
.card-cta:focus-visible {outline:2px solid var(--color-accent); outline-offset:2px;}

/* Botão fechar interno padronizado */
.card-inner-close {
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35);
  color:var(--color-text); border:1px solid rgba(255,255,255,.15); cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .3s var(--lux-timing), transform .3s var(--lux-timing), box-shadow .3s var(--lux-timing);
  z-index:20;
}
.card-inner-close:hover {background:var(--color-accent); color:#111; transform:scale(1.05); box-shadow:0 4px 14px -4px rgba(0,0,0,.6);}
.card-inner-close:focus-visible {outline:2px solid var(--color-accent); outline-offset:2px;}
.card-inner-close svg {width:18px; height:18px; display:block;}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.lux-card::before, .fleet-vehicles .vehicle::before, .itinerary-item::before, .highlight-item::before, .team-member::before, .testimonial-card::before, .service-item::before {
  content:""; position:absolute; inset:0; pointer-events:none; border:1px solid rgba(212,175,55,.22); border-radius:inherit; z-index:1;
  mix-blend-mode:overlay; opacity:.7;
}
.lux-card-lift:hover, .fleet-vehicles .vehicle:hover, .itinerary-item:hover, .highlight-item:hover, .team-member:hover, .testimonial-card:hover, .service-item:hover {
  transform:translateY(-6px); box-shadow:0 14px 42px -12px rgba(0,0,0,.75), 0 4px 16px -4px rgba(0,0,0,.6);
}

/* Alinhamento vertical consistente dos botões "Saber mais" na frota */
.fleet-vehicles .vehicle {display:flex; flex-direction:column; min-height:var(--fleet-card-min-h);}
.fleet-vehicles .vehicle .card-actions {margin-top:auto; padding-top:12px;}
.fleet-vehicles .vehicle .card-cta {width:100%; justify-content:center; display:flex;}

/* Image refinements */
img.team-photo, .vehicle-image, .itinerary-image, .highlight-image {filter:saturate(1.08) contrast(1.07) brightness(.98); transition:filter .8s var(--lux-timing), transform 1s var(--lux-timing);}
.vehicle:hover .vehicle-image, .itinerary-item:hover .itinerary-image, .highlight-item:hover .highlight-image, .team-member:hover img.team-photo {filter:saturate(1.18) contrast(1.1) brightness(1); transform:scale(1.03);}

/* Ocultar somente conteúdos realmente expansíveis (detalhes e bios). Summaries e quick info permanecem visíveis. */
.vehicle-details,
.itinerary-details,
.team-bio,
.highlight-desc,
.service-panel .service-panel-inner {
  opacity:0; max-height:0; overflow:hidden; transition:opacity .4s var(--lux-timing), max-height .4s var(--lux-timing);
}
/* Itinerary summary/quick: sempre visíveis; sem transição para evitar reflow desnecessário */
.itinerary-summary, .itinerary-quick {opacity:1 !important; max-height:none !important; overflow:visible;}
/* Fleet summary/quick sempre visíveis */
.vehicle-summary, .vehicle-quick {opacity:1 !important; max-height:none !important; overflow:visible;}

/* Mostrar ao abrir via clique (classe .is-open) */
.vehicle.is-open .vehicle-details,
.itinerary-item.is-open .itinerary-details,
.team-member.is-open .team-bio,
.highlight-item.is-open .highlight-desc,
.service-item.is-open .service-panel .service-panel-inner {opacity:1; max-height:600px;}
/* Suporte extra: revelar conteúdo baseado em aria-expanded sem precisar de .is-open (JS atual não adiciona classe) */
.service-toggle[aria-expanded="true"] + .service-panel .service-panel-inner {opacity:1; max-height:600px;}

/* Também permitir hover em desktop como preview (não altera aria) */
@media (hover:hover){
  .team-member:hover .team-bio,
  .highlight-item:hover .highlight-desc,
  .testimonial-card:hover .testimonial-text {
    opacity:1; max-height:600px;
  }
}

/* Media frame effect (shared with about) */
.about-media-wrap, .vehicle-media-wrap, .highlight-media-wrap, .team-media-wrap {position:relative; display:block; overflow:hidden; border-radius:12px;}
.about-media-wrap img.about-image, .vehicle-media-wrap .vehicle-image, .highlight-media-wrap .highlight-image, .team-media-wrap .team-photo {display:block; width:100%; height:auto; border-radius:12px;}
.about-media-overlay, .vehicle-media-overlay, .highlight-media-overlay, .team-media-overlay {position:absolute; inset:0; background:linear-gradient(140deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%); mix-blend-mode:multiply; pointer-events:none; opacity:.55; transition:opacity .8s var(--lux-timing);}
.about-media-frame, .vehicle-media-frame, .highlight-media-frame, .team-media-frame {position:absolute; inset:0; border:2px solid rgba(212,175,55,.28); border-radius:12px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(247,231,181,.25), 0 4px 24px -8px rgba(0,0,0,.6);}
.vehicle:hover .vehicle-media-overlay, .about-media-wrap:hover .about-media-overlay, .highlight-item:hover .highlight-media-overlay, .team-member:hover .team-media-overlay {opacity:.75;}
.vehicle:hover .vehicle-media-frame, .about-media-wrap:hover .about-media-frame, .highlight-item:hover .highlight-media-frame, .team-member:hover .team-media-frame {border-color:rgba(212,175,55,.55);}

/* Stagger utility for reveal animations */
[class*="stagger-"] {opacity:0; transform:translateY(28px); transition:opacity .9s var(--lux-timing), transform .9s var(--lux-timing);} /* initial */
.reveal-active.stagger-1 {transition-delay:.05s;}
.reveal-active.stagger-2 {transition-delay:.15s;}
.reveal-active.stagger-3 {transition-delay:.25s;}
.reveal-active.stagger-4 {transition-delay:.35s;}
.reveal-active.stagger-5 {transition-delay:.45s;}
.reveal-active.stagger-6 {transition-delay:.55s;}
.reveal-active[class*="stagger-"] {opacity:1; transform:translateY(0);}

/* Focus ring upgrade */
/* Forcar textos de summary da frota a estarem sempre visíveis */
.vehicle-summary.always-visible {opacity:1 !important; max-height:600px !important;}
*:focus-visible {outline:2px solid var(--color-accent); outline-offset:3px; border-radius:4px;}

/* Testimonials premium accent */
.testimonial-card {
  overflow: hidden;
  padding: 16px !important; /* reduzir dimensões internas */
}
.testimonial-card .testimonial-text {font-size:0.85rem; line-height:1.4;}
.testimonial-card .testimonial-name {font-size:0.95rem;}
/* Limitar largura total do slider e dos cartões */
.testimonials-grid {max-width:1020px; margin-left:auto; margin-right:auto;}
.testimonials-track .testimonial-card {max-width:320px;}
.testimonial-card::after {content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(247,231,181,.12), transparent 60%); mix-blend-mode:screen; pointer-events:none;}
.testimonial-avatar {box-shadow:0 4px 18px -6px rgba(0,0,0,.7);}

/* Pause/play control styling (added via JS) */
.testimonial-play-toggle {background:var(--color-surface); color:var(--color-text); border:1px solid #2d2d33; padding:0 18px; height:42px; border-radius:42px; display:inline-flex; align-items:center; gap:6px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); transition:var(--transition);}
.testimonial-play-toggle:hover {background:var(--color-accent); color:#111; transform:translateY(-3px); box-shadow:var(--shadow-md);}
.testimonial-play-toggle:focus-visible {outline:2px solid var(--color-accent); outline-offset:2px;}

/* Footer contacts styling */
.footer-contact .contact-icon svg {color:var(--color-accent); stroke:var(--color-accent);}
.footer-contact a, .footer-contact li {color:#fff;}
.footer-contact a:hover {color:var(--color-accent);}
.footer-contact .contact-icon {display:inline-flex; align-items:center; justify-content:center; width:20px;}

/* Luxury subtle section backdrop */
.section::before {content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 18% 28%, rgba(212,175,55,.07), transparent 60%),
  radial-gradient(circle at 78% 72%, rgba(247,231,181,.05), transparent 65%);
  pointer-events:none; z-index:0;}
.section > .container {position:relative; z-index:1;}

/* Divider injection for headings (utility) */
.with-divider > h2 + p {margin-top:-8px;}
.with-divider > h2::after {content:""; display:block; margin-top:14px; height:4px; width:72px; background:var(--lux-border-gold); border-radius:6px; box-shadow:0 2px 8px -2px rgba(0,0,0,.6), 0 0 0 1px rgba(247,231,181,.4);}

/* Utility spacing classes */
.mt-0 {margin-top:0 !important;} .mt-8 {margin-top:8px !important;} .mt-16 {margin-top:16px !important;} .mt-24 {margin-top:24px !important;} .mt-32 {margin-top:32px !important;} .mt-48 {margin-top:48px !important;} .mt-64 {margin-top:64px !important;}
.mb-0 {margin-bottom:0 !important;} .mb-8 {margin-bottom:8px !important;} .mb-16 {margin-bottom:16px !important;} .mb-24 {margin-bottom:24px !important;} .mb-32 {margin-bottom:32px !important;} .mb-48 {margin-bottom:48px !important;} .mb-64 {margin-bottom:64px !important;}
.pt-0 {padding-top:0 !important;} .pt-16 {padding-top:16px !important;} .pt-32 {padding-top:32px !important;} .pt-48 {padding-top:48px !important;} .pt-64 {padding-top:64px !important;}
.pb-0 {padding-bottom:0 !important;} .pb-16 {padding-bottom:16px !important;} .pb-32 {padding-bottom:32px !important;} .pb-48 {padding-bottom:48px !important;} .pb-64 {padding-bottom:64px !important;}

/* Responsive fine tuning: combine small-screen tweaks in one media block */
@media (max-width: 760px){
  /* Reduzir altura mínima em telas menores para economizar espaço vertical */
  :root { --fleet-card-min-h: 360px; }
  h1, .hero-title {font-size: clamp(2.1rem, 6.5vw + 1.2rem, 2.4rem);} 
  h2 {font-size: clamp(1.7rem, 5.5vw + 1rem, 2.2rem);} 

  /* Keep testimonial cards at a consistent (desktop) size on small screens
     The theme uses percentage widths which shrink on mobile. Force a fixed
     pixel basis so the cards remain visually the same size across devices. */
  .testimonial-widget .testimonial-card,
  .testimonials-track .testimonial-card,
  .testimonials-grid .testimonial-card {
    /* Chosen to approximate the original 15% desktop card width (~170-190px)
       Adjust the 180px value if you prefer a different size. */
    flex: 0 0 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
    box-sizing: border-box !important;
  }
}