/* ============================================================
   Dinâmica Rent a Car — CSS principal
      Mobile-first, sem dependências externas de build.
         ============================================================ */
         
         :root {
               /* Identidade visual oficial Dinâmica: azul marinho + dourado */
                 --color-primary: #003F77;
                   --color-primary-dark: #002850;
                     --color-primary-light: #0F5FA6;
                       --color-accent: #E6BE3C;
                         --color-accent-dark: #C9A02E;
                           --color-dark: #001A33;
                             --color-text: #1f2937;
                               --color-muted: #6b7280;
                                 --color-bg: #ffffff;
                                   --color-bg-alt: #f8fafc;
                                     --color-border: #e5e7eb;
                                       --radius: 12px;
                                         --radius-sm: 8px;
                                           --shadow: 0 4px 20px rgba(0, 26, 51, 0.08);
                                             --shadow-lg: 0 12px 40px rgba(0, 26, 51, 0.16);
                                               --container-width: 1180px;
                                                 --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         }
         
         * { box-sizing: border-box; }
         html { scroll-behavior: smooth; }
         body {
               margin: 0;
                 font-family: var(--font-family);
                   color: var(--color-text);
                     background: var(--color-bg);
                       line-height: 1.55;
                         -webkit-font-smoothing: antialiased;
         }
         img { max-width: 100%; display: block; }
         a { color: inherit; text-decoration: none; }
         ul { list-style: none; margin: 0; padding: 0; }
         h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.2; color: var(--color-dark); }
         p { margin: 0 0 1em; color: var(--color-muted); }
         
         .container {
               width: 100%;
                 max-width: var(--container-width);
                   margin: 0 auto;
                     padding: 0 20px;
         }
         
         /* ---------- Botões ---------- */
         .btn {
               display: inline-flex;
                 align-items: center;
                   justify-content: center;
                     gap: 8px;
                       padding: 12px 24px;
                         border-radius: var(--radius-sm);
                           font-weight: 600;
                             font-size: 15px;
                               border: 2px solid transparent;
                                 cursor: pointer;
                                   transition: all .15s ease;
                                     text-align: center;
         }
         .btn--primary { background: var(--color-primary); color: #fff; }
         .btn--primary:hover { background: var(--color-primary-dark); }
         .btn--outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
         .btn--outline:hover { background: var(--color-primary); color: #fff; }
         .btn--accent { background: var(--color-accent); color: var(--color-dark); }
         .btn--accent:hover { background: var(--color-accent-dark); }
         .btn--block { width: 100%; }
         .btn--lg { padding: 15px 28px; font-size: 16px; }
         .btn:disabled { opacity: .5; cursor: not-allowed; }
         
         /* ---------- Topbar ---------- */
         .topbar { background: var(--color-dark); color: #cbd5e1; font-size: 13px; }
         .topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; flex-wrap: wrap; gap: 6px; }
         .topbar a { color: #cbd5e1; }
         .topbar a:hover { color: #fff; }
         .topbar__contacts, .topbar__links { display: flex; gap: 18px; flex-wrap: wrap; }
         .topbar__email { display: none; }
         @media (min-width: 640px) { .topbar__email { display: inline-flex; } }
         
         /* ---------- Header / Navegação ---------- */
         .site-header {
               position: sticky; top: 0; z-index: 100;
                 background: var(--color-primary);
                   box-shadow: 0 2px 10px rgba(0,0,0,.15);
         }
         .site-header__inner {
               display: flex; align-items: center; justify-content: space-between;
                 padding: 14px 20px;
         }
         .brand img { height: 56px; width: auto; }
         
         .nav-toggle {
               display: flex; flex-direction: column; justify-content: center; gap: 5px;
                 width: 40px; height: 40px; background: none; border: none; cursor: pointer;
         }
         .nav-toggle span { display: block; height: 2px; width: 24px; background: #fff; border-radius: 2px; }
         
         .main-nav {
               display: none;
                 position: absolute; top: 100%; left: 0; right: 0;
                   background: var(--color-primary); box-shadow: var(--shadow);
                     flex-direction: column; padding: 10px 20px 20px;
         }
         .main-nav.open { display: flex; }
         .main-nav a { padding: 12px 6px; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255,255,255,.15); }
         .main-nav a.active { color: var(--color-accent); }
         .main-nav .nav-cta { margin-top: 12px; border-bottom: none; }
         
         .nav-dropdown__toggle {
               width: 100%; text-align: left; background: none; border: none; padding: 12px 6px;
                 font: inherit; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255,255,255,.15);
                   display: flex; justify-content: space-between; cursor: pointer;
         }
         .nav-dropdown__menu { display: none; padding-left: 14px; }
         .nav-dropdown.open .nav-dropdown__menu { display: block; }
         .nav-dropdown.open .chev { transform: rotate(180deg); }
         .chev { transition: transform .15s ease; }
         
         @media (min-width: 992px) {
               .nav-toggle { display: none; }
                 .main-nav {
                         display: flex !important; position: static; flex-direction: row; align-items: center;
                             box-shadow: none; padding: 0; gap: 4px; background: transparent;
                 }
                   .main-nav a { border-bottom: none; padding: 10px 12px; border-radius: var(--radius-sm); }
                     .main-nav a:hover, .main-nav a.active { background: rgba(255,255,255,.12); color: var(--color-accent); }
                       .main-nav .nav-cta { margin-top: 0; margin-left: 8px; background: var(--color-accent); color: var(--color-dark); }
                         .main-nav .nav-cta:hover { background: var(--color-accent-dark); color: var(--color-dark); }
                         
                           .nav-dropdown { position: relative; }
                             .nav-dropdown__toggle { width: auto; padding: 10px 12px; border-bottom: none; border-radius: var(--radius-sm); }
                               .nav-dropdown__toggle:hover { background: rgba(255,255,255,.12); }
                                 .nav-dropdown__menu {
                                         display: block; position: absolute; top: 100%; left: 0; min-width: 220px;
                                             background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius-sm);
                                                 padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
                                                     transition: all .15s ease; padding-left: 8px;
                                 }
                                   .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown.open .nav-dropdown__menu {
                                           opacity: 1; visibility: visible; transform: translateY(0);
                                   }
                                     .nav-dropdown__menu a { display: block; padding: 10px 12px; border-radius: 6px; border-bottom: none; color: var(--color-text); }
                                       .nav-dropdown__menu a:hover { background: var(--color-bg-alt); color: var(--color-primary); }
         }
         
         /* ---------- Hero ---------- */
         .hero {
               position: relative;
                 background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
                   color: #fff;
                     padding: 48px 0 220px;
                       overflow: hidden;
         }
         .hero::before {
               content: '';
                 position: absolute; top: -120px; right: -120px; width: 420px; height: 420px;
                   border-radius: 50%; background: radial-gradient(circle, rgba(230,190,60,.16), transparent 70%);
                     pointer-events: none;
         }
         .hero::after {
               content: '';
                 position: absolute; bottom: 40px; left: -80px; width: 260px; height: 260px;
                   border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
                     pointer-events: none;
         }
         .hero__skyline {
               position: absolute; right: 0; bottom: 0; top: 15%; width: 58%; z-index: 0; overflow: hidden; pointer-events: none;
                 -webkit-mask-image: linear-gradient(to left, black 45%, transparent 92%);
                   mask-image: linear-gradient(to left, black 45%, transparent 92%);
         }
         .hero__skyline img { width: 100%; height: 100%; object-fit: cover; object-position: bottom right; opacity: .5; }
         @media (max-width: 767px) { .hero__skyline { display: none; } }
         .hero__inner { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
         .hero__badge {
               display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
                 background: rgba(230,190,60,.15); border: 1px solid rgba(230,190,60,.4); color: var(--color-accent);
                   font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 30px; letter-spacing: .02em;
         }
         .hero__text h1 { color: #fff; font-size: 28px; max-width: 720px; }
         .hero__text p { color: #cfe0f2; font-size: 16px; max-width: 620px; }
         @media (min-width: 768px) { .hero__text h1 { font-size: 40px; } }
         
         .hero__stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 4px; position: relative; z-index: 1; }
         .hero__stat { display: flex; flex-direction: column; }
         .hero__stat strong { font-size: 24px; color: var(--color-accent); font-weight: 800; }
         .hero__stat span { font-size: 13px; color: #cfe0f2; }
         
         /* ---------- Icone circular (destaques) ---------- */
         .icon-circle {
               width: 60px; height: 60px; border-radius: 50%; background: rgba(230,190,60,.14);
                 display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
         }
         .icon-circle svg { width: 28px; height: 28px; stroke: var(--color-primary); }
         .feature-card { position: relative; }
         .feature-card--dark .icon-circle { background: rgba(255,255,255,.12); }
         .feature-card--dark .icon-circle svg { stroke: var(--color-accent); }
         
         /* ---------- Como funciona ---------- */
         .how-steps { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; counter-reset: step; }
         @media (min-width: 768px) { .how-steps { grid-template-columns: repeat(3, 1fr); } }
         .how-step { text-align: center; padding: 0 12px; position: relative; }
         .how-step__num {
               width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff;
                 display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
                   margin: 0 auto 16px;
         }
         .how-step h3 { font-size: 16px; }
         .how-step p { font-size: 14px; margin-bottom: 0; }
         @media (min-width: 768px) {
               .how-step:not(:last-child)::after {
                       content: ''; position: absolute; top: 22px; left: calc(50% + 45px); width: calc(100% - 60px);
                           height: 2px; background: var(--color-border);
               }
         }
         
         /* ---------- Banner CTA (terceirizacao) ---------- */
         .cta-banner {
               background: linear-gradient(120deg, var(--color-dark), var(--color-primary-dark));
                 border-radius: var(--radius); padding: 36px 28px; color: #fff;
                   display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
                     border: 1px solid rgba(230,190,60,.25);
         }
         .cta-banner h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
         .cta-banner p { color: #cbd5e1; margin-bottom: 0; max-width: 560px; }
         @media (min-width: 900px) {
               .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }
         }
         
         /* ---------- Widget de reserva (busca rápida) ---------- */
         .booking-widget {
               background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
                 padding: 22px; margin-top: -180px; position: relative; z-index: 10;
         }
         .booking-widget h3 { font-size: 18px; margin-bottom: 16px; color: var(--color-primary-dark); }
         .booking-widget__grid {
               display: grid; grid-template-columns: 1fr; gap: 14px;
         }
         @media (min-width: 768px) {
               .booking-widget__grid { grid-template-columns: repeat(2, 1fr); }
         }
         @media (min-width: 1100px) {
               .booking-widget { margin-top: -90px; }
                 .booking-widget__grid { grid-template-columns: 1.4fr 1fr 1.4fr 1fr auto; align-items: end; }
         }
         
         .field { display: flex; flex-direction: column; gap: 6px; }
         .field label { font-size: 13px; font-weight: 600; color: var(--color-muted); }
         .field select, .field input {
               padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
                 font-family: inherit; font-size: 15px; color: var(--color-text); background: #fff;
         }
         .field select:focus, .field input:focus { outline: none; border-color: var(--color-primary); }
         .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
         
         .form-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
         .form-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
         .form-hint { font-size: 12px; color: var(--color-muted); margin-top: 4px; }
         
         /* ---------- Seções gerais ---------- */
         .section { padding: 60px 0; }
         .section--alt { background: var(--color-bg-alt); }
         .section__head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
         .section__head h2 { font-size: 26px; }
         @media (min-width: 768px) { .section__head h2 { font-size: 32px; } }
         
         .features-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
         @media (min-width: 768px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }
         .feature-card { text-align: center; padding: 28px 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
         .feature-card img { height: 56px; margin: 0 auto 16px; }
         .feature-card h3 { font-size: 17px; }
         .feature-card p { font-size: 14px; margin-bottom: 0; }
         
         /* ---------- Cards de veículo / categoria ---------- */
         .vehicles-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
         @media (min-width: 640px) { .vehicles-grid { grid-template-columns: repeat(2, 1fr); } }
         @media (min-width: 1024px) { .vehicles-grid { grid-template-columns: repeat(4, 1fr); } }
         
         .vehicle-card {
               background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
                 overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; display: flex; flex-direction: column;
         }
         .vehicle-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
         .vehicle-card__img { aspect-ratio: 16/10; background: var(--color-bg-alt); display: flex; align-items: center; justify-content: center; }
         .vehicle-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
         .vehicle-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
         .vehicle-card__title { font-size: 16px; margin-bottom: 4px; }
         .vehicle-card__model { font-size: 13px; color: var(--color-muted); margin-bottom: 12px; }
         .vehicle-card__specs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
         .spec-pill { font-size: 12px; background: var(--color-bg-alt); color: var(--color-muted); padding: 4px 10px; border-radius: 20px; }
         .vehicle-card__price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-border); }
         .vehicle-card__price .from { font-size: 12px; color: var(--color-muted); display: block; }
         .vehicle-card__price .value { font-size: 22px; font-weight: 800; color: var(--color-primary-dark); }
         .vehicle-card__price .value span { font-size: 13px; font-weight: 500; color: var(--color-muted); }
         
         /* ---------- Seminovos ---------- */
         .seminovo-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
         .seminovo-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg-alt); }
         .seminovo-card__img img { width: 100%; height: 100%; object-fit: cover; }
         .seminovo-card__body { padding: 16px; }
         .seminovo-card__price { font-size: 20px; font-weight: 800; color: var(--color-primary-dark); margin: 6px 0 12px; }
         
         /* ---------- Steps (motor de reserva) ---------- */
         .booking-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
         .booking-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); }
         .booking-step__num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-border); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
         .booking-step.active .booking-step__num, .booking-step.done .booking-step__num { background: var(--color-primary); }
         .booking-step.active { color: var(--color-primary-dark); font-weight: 600; }
         
         .summary-box { background: var(--color-bg-alt); border-radius: var(--radius); padding: 20px; }
         .summary-box h4 { font-size: 15px; margin-bottom: 12px; }
         .summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--color-text); border-bottom: 1px dashed var(--color-border); }
         .summary-row:last-child { border-bottom: none; }
         .summary-row.total { font-weight: 800; font-size: 17px; color: var(--color-primary-dark); border-top: 2px solid var(--color-border); margin-top: 8px; padding-top: 12px; }
         
         .option-card {
               display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--color-border);
                 border-radius: var(--radius); cursor: pointer; transition: border-color .15s ease, background .15s ease;
         }
         .option-card:hover { border-color: var(--color-primary-light); }
         .option-card.selected { border-color: var(--color-primary); background: #f0fdfa; }
         .option-card input[type="radio"], .option-card input[type="checkbox"] { margin-top: 3px; accent-color: var(--color-primary); width: 18px; height: 18px; }
         .option-card__body { flex: 1; }
         .option-card__title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
         .option-card__desc { font-size: 13px; color: var(--color-muted); margin-bottom: 0; }
         .option-card__price { font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; }
         
         .two-col { display: grid; grid-template-columns: 1fr; gap: 28px; }
         @media (min-width: 992px) { .two-col { grid-template-columns: 2fr 1fr; align-items: start; } }
         .sticky-summary { position: sticky; top: 100px; }
         
         /* ---------- Página institucional ---------- */
         .content-page h2 { margin-top: 1.4em; }
         .content-page p, .content-page li { color: var(--color-text); }
         .info-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
         @media (min-width: 768px) { .info-cards { grid-template-columns: repeat(3, 1fr); } }
         .info-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; }
         .info-card h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary); margin-bottom: 10px; }
         
         /* ---------- FAQ ---------- */
         .faq-item { border-bottom: 1px solid var(--color-border); }
         .faq-item summary { cursor: pointer; padding: 18px 4px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
         .faq-item summary::-webkit-details-marker { display: none; }
         .faq-item summary::after { content: '+'; font-size: 22px; color: var(--color-primary); }
         .faq-item[open] summary::after { content: '−'; }
         .faq-item p { padding: 0 4px 18px; }
         
         /* ---------- Formulário genérico ---------- */
         .form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
         @media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
         textarea { font-family: inherit; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); resize: vertical; min-height: 110px; font-size: 15px; }
         textarea:focus { outline: none; border-color: var(--color-primary); }
         
         /* ---------- Footer ---------- */
         .site-footer { background: var(--color-dark); color: #cbd5e1; padding: 56px 0 0; margin-top: 60px; }
         .footer__grid { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
         @media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
         @media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
         .footer__col h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
         .footer__col p { color: #94a3b8; font-size: 14px; }
         .footer__col a { color: #94a3b8; }
         .footer__col a:hover { color: #fff; }
         .footer__about { font-size: 13px; margin-top: 14px; }
         .footer__hours li { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: #94a3b8; }
         .footer__links li { padding: 5px 0; }
         .footer__bottom { border-top: 1px solid #1f2937; margin-top: 10px; }
         .footer__bottom-inner { padding: 18px 20px; font-size: 13px; color: #64748b; text-align: center; }
         
         .whatsapp-float {
               position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%;
                 background: #25d366; display: flex; align-items: center; justify-content: center; font-size: 26px;
                   box-shadow: var(--shadow-lg); z-index: 200;
         }
         
         /* ---------- Utilitários ---------- */
         .text-center { text-align: center; }
         .mt-0 { margin-top: 0; }
         .badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
         .badge--pendente { background: #fef3c7; color: #92400e; }
         .badge--confirmada { background: #d1fae5; color: #065f46; }
         .badge--recusada { background: #fee2e2; color: #991b1b; }
         .badge--cancelada { background: #e5e7eb; color: #374151; }
         
         }
         }
         }
         }
         }
         }
         }
         }
         }
         }
               }
         }
         }
         }
         }
         }
         }
         }
         }
                                   }
                                 }
                 }
         }
         }
         }
         }
         }
         }
         }
         }
         }
         }