/*
 * CoelhoTech — camada de acabamento profissional
 * Tokens semânticos e correções de tema, contraste, movimento e responsividade.
 */

:root {
  color-scheme: dark;
  --background: #0c0d0f;
  --background-subtle: #111318;
  --surface: #15181c;
  --surface-elevated: #1b1f24;
  --surface-inverse: #f7f8f9;
  --text-primary: #f3f5f7;
  --text-secondary: #b7bec8;
  --text-muted: #969faa;
  --text-on-dark: #f7f9fb;
  --text-on-accent: #061014;
  --border: #30353d;
  --border-strong: #4a515c;
  --primary: #58d5e6;
  --primary-hover: #82e1ed;
  --primary-foreground: #061014;
  --accent: #9c8aff;
  --success: #69d493;
  --warning: #f1bd67;
  --danger: #ff8880;
  --focus-ring: #7de2f0;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .2);
  --shadow-md: 0 24px 64px rgba(0, 0, 0, .28);
  --radius-control: 10px;
  --radius-card: 18px;
  --radius-container: 24px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --font-sans: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-slow: 420ms;
  --motion-easing: cubic-bezier(.22, .75, .2, 1);

  /* Compatibilidade com os componentes existentes. */
  --bg: var(--background);
  --bg-soft: var(--background-subtle);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --panel: var(--surface);
  --brand-primary: var(--primary);
  --brand-primary-strong: #2cb8cc;
  --cyan: var(--primary);
  --lime: var(--primary);
  --purple: var(--accent);
  --header-bg: rgba(12, 13, 15, .92);
}

html[data-theme="light"] {
  color-scheme: light;
  --background: #f7f7f4;
  --background-subtle: #eeefea;
  --surface: #ffffff;
  --surface-elevated: #f2f3ef;
  --surface-inverse: #111820;
  --text-primary: #111418;
  --text-secondary: #4c5561;
  --text-muted: #66717d;
  --text-on-dark: #f7f9fb;
  --text-on-accent: #061014;
  --border: #d8dce0;
  --border-strong: #b7bdc4;
  --primary: #087f97;
  --primary-hover: #066a7e;
  --primary-foreground: #ffffff;
  --accent: #5d48d7;
  --success: #197a47;
  --warning: #8a5b0a;
  --danger: #b83e39;
  --focus-ring: #0b69c7;
  --shadow-sm: 0 10px 28px rgba(27, 33, 42, .08);
  --shadow-md: 0 24px 64px rgba(27, 33, 42, .12);
  --header-bg: rgba(247, 247, 244, .94);
  --brand-primary-strong: #066a7e;
}

html {
  background: var(--background);
  scroll-padding-top: 96px;
}

body {
  min-width: 320px;
  overflow-x: clip;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

::selection {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
  color: var(--text-primary);
}

section[id],
main[id] { scroll-margin-top: 96px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.site-shell,
.internal-page {
  overflow: visible;
  overflow-x: clip;
  background: var(--background);
  color: var(--text-primary);
}

.site-shell::before,
.internal-page::before,
.ambient { display: none; }

.section-wrap { width: min(1180px, calc(100% - 48px)); }
.section-block { padding-block: clamp(5rem, 8vw, 7.5rem); }

.section-heading h2,
.site-story-intro h2,
.process-section h2,
.internal-hero h1,
.rental-section-heading h2 {
  overflow: visible;
  text-wrap: balance;
  line-height: 1.08;
  padding-block: .06em;
}

.section-heading p,
.site-story-intro p,
.process-line p,
.selected-project-copy p,
.faq-title p { color: var(--text-secondary); }

.main-header {
  background: var(--header-bg);
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}

.desktop-nav a,
.brand-copy small { color: var(--text-secondary); }
.desktop-nav a:hover { color: var(--text-primary); }

.button,
.text-link,
.showcase-arrows button,
.theme-toggle-track,
.mobile-menu summary {
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-easing);
}

.button-primary {
  color: var(--primary-foreground);
  background: var(--primary);
}
.button-primary:hover { background: var(--primary-hover); }
.button-outline {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: transparent;
}
.button-outline:hover {
  border-color: var(--primary);
  background: var(--surface-elevated);
}
.text-link { color: var(--text-primary); }
.text-link:hover { color: var(--primary); }

/* Seletor de tema: os dois símbolos pertencem à mesma família linear. */
.theme-toggle {
  width: 62px;
  height: 44px;
  margin-right: 8px;
  display: grid;
  place-items: center;
}
.theme-toggle-track {
  width: 58px;
  height: 34px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.theme-toggle-track > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  color: var(--text-muted);
  font-size: 0;
}
.theme-toggle-track > i::before,
.theme-toggle-track > i::after {
  content: "";
  position: absolute;
}
.theme-sun::before {
  width: 8px;
  height: 8px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 -6px 0 -3.3px currentColor, 0 6px 0 -3.3px currentColor,
    6px 0 0 -3.3px currentColor, -6px 0 0 -3.3px currentColor;
}
.theme-moon::before {
  width: 10px;
  height: 10px;
  border: 1.6px solid currentColor;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
}
.theme-toggle-track > b {
  left: 5px;
  top: 5px;
  width: 22px;
  height: 22px;
  background: var(--accent);
  box-shadow: none;
  transition: transform var(--motion-slow) var(--motion-easing), background-color var(--motion-slow) ease;
}
html[data-theme="light"] .theme-toggle-track > b {
  transform: translateX(25px);
  background: var(--primary);
}
html[data-theme="light"] .theme-sun { color: var(--warning); }
html[data-theme="light"] .theme-moon,
html:not([data-theme="light"]) .theme-sun { color: var(--text-on-dark); }
html:not([data-theme="light"]) .theme-moon { color: var(--text-muted); }

/* Light mode com superfícies e separação reais. */
html[data-theme="light"] .solution-card,
html[data-theme="light"] .selected-project-card,
html[data-theme="light"] .process-line article,
html[data-theme="light"] .faq-list details,
html[data-theme="light"] .service-blueprint,
html[data-theme="light"] .internal-price-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .info-panel,
html[data-theme="light"] .portfolio-page-card,
html[data-theme="light"] .coelho-form {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Corrige recortes causados por overflow e transforms de entrada. */
.process-section,
.selected-projects,
.section-heading,
.centered-heading { overflow: visible; }
.motion-ready [data-reveal] { will-change: auto; }
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Processo e família de símbolos cinéticos. O container nunca se move. */
.process-line { gap: 16px; }
.process-line article {
  min-height: 300px;
  padding: 28px;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.process-line article:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--surface-elevated);
}
.process-line h3 {
  margin: 16px 0 10px;
  color: var(--text-primary);
  font-size: 1.18rem;
  line-height: 1.25;
}
.process-line p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
}
.process-line b {
  margin-top: 22px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: .08em;
}
.process-icon {
  width: 76px;
  height: 76px;
  overflow: hidden;
  isolation: isolate;
  color: var(--primary);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-elevated);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
  transform: none !important;
}
.process-icon svg {
  width: 58px;
  height: 58px;
  display: block;
  overflow: visible;
}
.kinetic-orbit-outer,
.kinetic-orbit-inner,
.kinetic-glyph {
  transform-box: fill-box;
  transform-origin: center;
}
.kinetic-orbit-outer { animation: kinetic-spin 20s linear infinite; }
.kinetic-orbit-inner { animation: kinetic-spin-reverse 27s linear infinite; }
.kinetic-glyph { animation: kinetic-breathe 8s var(--motion-easing) infinite; }
.process-line article:hover .kinetic-orbit-outer { animation-duration: 17s; }
.process-line article:hover .kinetic-orbit-inner { animation-duration: 23s; }
@keyframes kinetic-spin { to { transform: rotate(360deg); } }
@keyframes kinetic-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes kinetic-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  50% { transform: translate3d(0, -1.3px, 0) rotate(1.2deg); opacity: .88; }
}
.process-result {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}
.process-result span {
  color: var(--primary-foreground);
  background: var(--primary);
}

/* Seção escura autocontida: nunca herda texto escuro do light mode. */
.host-highlight {
  --section-text-primary: #f3f6f8;
  --section-text-secondary: #bdc8ce;
  --section-text-muted: #94a6af;
  color: var(--section-text-primary);
  background: #102128;
}
.host-highlight .eyebrow,
.host-highlight .host-copy h2,
.host-highlight .loc-highlight,
.host-highlight .host-points span { color: var(--section-text-primary); }
.host-highlight .host-copy > p { color: var(--section-text-secondary); }
.host-highlight .host-points span::before { color: var(--primary); }
.host-highlight .host-panel {
  color: var(--section-text-primary);
  border-color: #38515b;
  background: #152c35;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .22);
  backdrop-filter: none;
}
.host-highlight .host-panel-top {
  color: var(--section-text-secondary);
  border-color: #38515b;
}
.host-highlight .host-panel-top i,
.host-highlight .host-metric span { color: var(--section-text-secondary); }
.host-highlight .host-metric small,
.host-highlight .loc-stats small { color: var(--section-text-muted); }
.host-highlight .host-metric strong,
.host-highlight .vehicle-profit-list strong { color: var(--success); }
.host-highlight .vehicle-profit-list > span {
  color: var(--section-text-primary);
  border: 1px solid #314953;
  background: #19333d;
}
.host-highlight .vehicle-profit-list > span:last-child strong { color: var(--danger); }
.host-highlight .loc-stats { border-color: #38515b; }
.host-highlight .button-light {
  color: #102128;
  background: #ffffff;
}

/* Painel do case mantém uma paleta explícita, inclusive dentro do tema escuro. */
.rental-dash-body { color: #18232a; background: #f5f7f8; }
.rental-dash-title b,
.rental-kpis b,
.rental-dash-row b { color: #18232a; }
.rental-kpis small,
.rental-dash-row small { color: #65737c; }
.rental-dash-row > strong { color: #147344; }
.rental-dash-row > strong.negative { color: #a93633; }
.rental-header-cta > span { display: inline; }

/* Carrossel editorial: leitura, toque e continuidade. */
.orbital-viewport {
  overflow: clip;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  border-color: var(--border);
  background: var(--background-subtle);
  box-shadow: var(--shadow-md);
}
.orbital-card {
  border-color: #39414a;
  background: #0f1720;
}
.orbital-copy { width: min(470px, 60%); }
.orbital-copy > small { color: #76dbe8; font-size: .72rem; }
.orbital-copy h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.08; }
.orbital-copy p { color: #c4ceda; font-size: 1rem; line-height: 1.55; }
.orbital-copy li {
  padding: 7px 10px;
  color: #edf2f8;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(8, 13, 20, .72);
  font-size: .74rem;
}
.orbital-copy > a { color: #ffffff; font-size: .9rem; }
.showcase-controls p span { color: var(--text-secondary); font-size: .78rem; }
.showcase-dots { gap: 2px; }
.showcase-dots button {
  width: 44px;
  height: 44px;
  padding: 0;
  position: relative;
  border: 0;
  background: transparent;
}
.showcase-dots button::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 20px;
  height: 4px;
  border-radius: 4px;
  background: var(--border-strong);
}
.showcase-dots button.is-active { width: 52px; background: transparent; }
.showcase-dots button.is-active::before { background: var(--primary); }
.showcase-arrows button {
  width: 46px;
  height: 46px;
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface);
}

/* WhatsApp respeita bordas e safe areas. */
.whatsapp-float {
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  min-width: 48px;
  min-height: 48px;
}

@media (max-width: 1024px) {
  .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-line article { min-height: 270px; }
}

@media (max-width: 980px) {
  .mobile-menu summary {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 78px; }
  section[id], main[id] { scroll-margin-top: 78px; }
  .section-wrap { width: min(100% - 32px, 1180px); }
  .section-block { padding-block: 4.5rem; }
  .main-header {
    width: calc(100% - 16px);
    padding-inline: 8px;
  }
  .theme-toggle { width: 50px; margin-right: 0; }
  .theme-toggle-track { width: 48px; }
  html[data-theme="light"] .theme-toggle-track > b { transform: translateX(15px); }
  .mobile-menu summary {
    width: 44px;
    height: 44px;
    padding: 0;
    border-color: var(--border-strong);
  }
  .mobile-menu > div {
    position: fixed;
    top: calc(76px + env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    min-width: 0;
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
    padding: 10px;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
  }
  .mobile-menu > div a {
    min-height: 48px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 1rem;
  }
  .hero {
    min-height: 0;
    padding-top: 3.2rem;
    padding-bottom: 4rem;
    gap: 1.5rem;
  }
  .hero h1 {
    max-width: 12ch;
    margin-block: 1.1rem 1rem;
    font-size: clamp(2.45rem, 11.4vw, 3.35rem);
    line-height: 1.02;
    letter-spacing: -.055em;
  }
  .hero-lead { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { width: 100%; min-height: 50px; }
  .hero-journey span { color: var(--text-secondary); font-size: .7rem; }
  .site-story-intro p,
  .section-heading p { font-size: 1rem; }
  .process-line { grid-template-columns: 1fr; gap: 14px; }
  .process-line article {
    min-height: 0;
    padding: 22px;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 18px;
  }
  .process-icon { grid-row: 1 / 4; width: 76px; height: 76px; }
  .process-line b { margin: 0; }
  .process-line h3 { margin: 4px 0 7px; font-size: 1.12rem; }
  .process-line p { grid-column: 2; padding-right: 52px; font-size: 1rem; }
  .kinetic-orbit-outer { animation-duration: 25s; }
  .kinetic-orbit-inner { animation-duration: 30s; }
  .process-line article:hover { transform: none; }
  .host-highlight .host-copy h2 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .host-highlight .host-copy > p,
  .host-highlight .host-points span { font-size: 1rem; }
  .rental-header-cta {
    width: auto;
    min-width: 68px;
    min-height: 44px;
    padding-inline: 12px;
  }
  .rental-header-cta > span {
    display: inline;
    font-size: 0;
  }
  .rental-header-cta > span::after {
    content: "Testar";
    font-size: .75rem;
  }
  .orbital-viewport { height: 552px; border-radius: 18px; }
  .orbital-card {
    top: 24px;
    width: calc(100% - 42px);
    height: 496px;
    border-radius: 16px;
  }
  .orbital-card-media::after {
    background: linear-gradient(0deg, rgba(4, 9, 18, .94) 0%, rgba(4, 9, 18, .72) 48%, rgba(4, 9, 18, .06) 78%);
  }
  .orbital-copy {
    left: 20px;
    right: 56px;
    bottom: 22px;
    width: auto;
  }
  .orbital-copy > small { font-size: .67rem; }
  .orbital-copy h3 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .orbital-copy p { font-size: .95rem; }
  .orbital-copy ul { margin: 12px 0; }
  .orbital-copy li { font-size: .68rem; }
  .orbital-copy > a { min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; }
  .orbital-card:not(.is-active) .orbital-copy { left: 16px; bottom: 18px; }
  .orbital-card:not(.is-active) .orbital-copy h3 { font-size: 1.2rem; }
  .showcase-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .showcase-controls p { flex-wrap: wrap; }
  .showcase-dots { grid-column: 1 / -1; }
  .projects-more { gap: 12px; }
  .whatsapp-float { padding: 8px; }
}

@media (max-width: 390px) {
  .section-wrap { width: calc(100% - 28px); }
  .brand-copy b { font-size: .82rem; }
  .hero h1 { font-size: clamp(2.25rem, 11.2vw, 2.72rem); }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof span { padding-block: 7px; }
  .orbital-viewport { height: 568px; }
  .orbital-card { width: calc(100% - 32px); height: 512px; }
  .process-line article { padding: 18px; grid-template-columns: 68px minmax(0, 1fr); }
  .process-icon { width: 68px; height: 68px; }
  .process-icon svg { width: 52px; height: 52px; }
}

@media (min-width: 1440px) {
  .section-wrap { width: min(1240px, calc(100% - 80px)); }
  .orbital-card { width: min(900px, 70%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kinetic-orbit-outer,
  .kinetic-orbit-inner,
  .kinetic-glyph { animation: none !important; transform: none !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; filter: none; }
}