/* =========================================================
   Tono común (2026-11-14, pedido del usuario: «que todo vaya en la misma tónica»)
   Va de último en TODAS las páginas (portada, servicios, pagos, términos, privacidad, certificado y registro) y
   pone al estilo nuevo lo que quedaba del anterior: la cabecera y sus menús, el botón de Certificado, los
   encabezados de las páginas sencillas, los formularios, la sección de contacto y el pie.
   Mismos colores de sitio.css y de la app: grafito, amarillo para los íconos, naranja solo en el botón principal.
   No cambia ninguna estructura: solo colores, letras, bordes y fondos de lo que ya está en style.css.
   ========================================================= */
:root {
  --t-noche: #14161b;
  --t-asfalto: #20232a;
  --t-asfalto-2: #262a32;
  --t-via: #f5b800;
  --t-pin: #ff5a3c;
  --t-papel: #f3f4f6;
  --t-tinta: #111418;
  --t-gris: #59616c;
  --t-gris-claro: #a3abb5;
  --t-linea: #e1e4e8;
  --t-linea-oscura: rgba(255, 255, 255, 0.12);
  --t-display: "Saira Semi Condensed", "Saira", "Oswald", system-ui, sans-serif;
  --t-cuadros: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* ---------- Cabecera ---------- */
html body .site-header {
  background: rgba(20, 22, 27, 0.9);
  border-color: var(--t-linea-oscura);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
html body .header-actions .btn.btn-ghost,
html body .header-actions .btn.btn-ghost.btn-cert {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}
html body .header-actions .btn.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.09); }
html body .header-actions .btn-cert i { color: var(--t-via); }

/* Menús que se despliegan (Servicios y Contacto): panel grafito e íconos amarillos en cuadro oscuro, todos iguales */
html body .site-header .dropdown-panel {
  background: var(--t-asfalto);
  background-image: none;
  border: 1px solid var(--t-linea-oscura);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
}
html body .dropdown-panel .dropdown-title span { color: #fff; }
html body .dropdown-panel .dropdown-title small,
html body .dropdown-panel .dropdown-item small { color: var(--t-gris-claro); }
html body .dropdown-panel .dropdown-item { border-color: transparent; background: none; }
html body .dropdown-panel .dropdown-item:hover,
html body .dropdown-panel .dropdown-item[aria-current="page"] { background: rgba(255, 255, 255, 0.06); border-color: transparent; }
html body .dropdown-panel .dropdown-icon,
html body .dropdown-panel .dropdown-icon.is-auto,
html body .dropdown-panel .dropdown-icon.is-moto,
html body .dropdown-panel .dropdown-icon.is-flota,
html body .dropdown-panel .dropdown-icon.is-personal {
  background: var(--t-noche);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: var(--t-via);
  box-shadow: none;
}
html body .dropdown-panel .dropdown-icon i { color: var(--t-via); }
html body .dropdown-panel .dropdown-item:hover .dropdown-icon,
html body .dropdown-panel .dropdown-item[aria-current="page"] .dropdown-icon { border-color: var(--t-via); }

/* ---------- Páginas sencillas (certificado, registro, pagos, términos, privacidad): encabezado ---------- */
html body .hero.hero-simple {
  min-height: 0;
  padding: clamp(8.2rem, 13vw, 10.5rem) 0 clamp(2.6rem, 5vw, 3.8rem);
  background: var(--t-noche);
  background-image: var(--t-cuadros);
  background-size: 44px 44px;
}
html body .hero.hero-simple::before,
html body .hero.hero-simple::after { display: none; }
html body .hero-simple .eyebrow { display: none; }
html body .hero-simple h1 {
  font-family: var(--t-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.012em;
  text-transform: none;
  color: #fff;
}
html body .hero-simple p { color: var(--t-gris-claro); }
html body .section.section-light { background: var(--t-papel); background-image: none; }
html body .section.section-light::before,
html body .section.section-light::after { display: none; }

/* ---------- Formularios (cotización, certificado, registro) ---------- */
html body .contact-form {
  background: #fff;
  background-image: none;
  border: 1px solid var(--t-linea);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(17, 20, 24, 0.08);
}
html body .contact-form .form-heading {
  background: var(--t-papel);
  background-image: none;
  border: 1px solid var(--t-linea);
  border-radius: 16px;
  box-shadow: none;
}
html body .contact-form .form-heading h3 { color: var(--t-tinta); letter-spacing: -0.01em; }
html body .contact-form .form-heading p { color: var(--t-gris); }
html body .form-icon-main {
  background: var(--t-noche);
  background-image: none;
  color: var(--t-via);
  border-radius: 12px;
  box-shadow: none;
}
html body .form-icon-main i { color: var(--t-via); }
html body .form-icon-main.is-ok { background: #12372c; }
html body .form-icon-main.is-ok i { color: #34d399; }
html body .contact-form label { color: var(--t-tinta); }
html body .contact-form input[type="text"],
html body .contact-form input[type="email"],
html body .contact-form input[type="tel"],
html body .contact-form input[type="number"],
html body .contact-form input[type="file"],
html body .contact-form select,
html body .contact-form textarea,
html body .contact-form .input-icon-wrap {
  background: #fff;
  border: 1px solid #d3d8de;
  border-radius: 12px;
  box-shadow: none;
}
html body .contact-form .input-icon-wrap input,
html body .contact-form .input-icon-wrap select,
html body .contact-form .input-icon-wrap textarea { border: 0; background: none; box-shadow: none; }
html body .contact-form input:focus,
html body .contact-form select:focus,
html body .contact-form textarea:focus,
html body .contact-form .input-icon-wrap:focus-within {
  border-color: var(--t-noche);
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.38);
  outline: 0;
}
html body .contact-form .input-icon-wrap input:focus,
html body .contact-form .input-icon-wrap select:focus,
html body .contact-form .input-icon-wrap textarea:focus { box-shadow: none; }
html body .contact-form .input-icon-wrap > i { color: var(--t-gris); }
html body .contact-form ::placeholder { color: #9aa1ab; font-style: normal; }
/* Botón principal: naranja liso, como los de la página nueva */
html body .btn.btn-primary {
  background: var(--t-pin);
  background-image: none;
  border-radius: 12px;
  box-shadow: none;
  color: #fff;
}
html body .btn.btn-primary:hover { background: #ff6d52; transform: none; box-shadow: 0 10px 24px rgba(255, 90, 60, 0.28); }
html body .btn.btn-outline { border-color: var(--t-noche); color: var(--t-noche); background: #fff; border-radius: 12px; box-shadow: none; }
html body .btn.btn-outline:hover { background: var(--t-noche); color: #fff; }
html body .contact-form a { color: #c2410c; }
html body .vehicles-box,
html body .terms-box,
html body .signature-box,
html body .cert-opcion { background: var(--t-papel); background-image: none; border-color: var(--t-linea); box-shadow: none; }

/* ---------- Sección de contacto de la portada ---------- */
html body .section.section-contact {
  background: var(--t-noche);
  background-image: var(--t-cuadros);
  background-size: 44px 44px;
}
html body .section.section-contact::before,
html body .section.section-contact::after { display: none; }
html body .section-contact .contact-info-panel {
  background: var(--t-asfalto);
  background-image: none;
  border: 1px solid var(--t-linea-oscura);
  box-shadow: none;
}
html body .section-contact .eyebrow { display: none; }
html body .section-contact .contact-title { font-family: var(--t-display); font-weight: 800; letter-spacing: -0.01em; text-transform: none; }
html body .section-contact .contact-benefits > div,
html body .section-contact .contact-cards > a,
html body .section-contact .contact-cards > div {
  background: var(--t-noche);
  background-image: none;
  border: 1px solid var(--t-linea-oscura);
  box-shadow: none;
}
html body .section-contact .contact-benefits i { color: var(--t-via); background: none; }
html body .section-contact .contact-card-icon {
  background: var(--t-asfalto-2);
  background-image: none;
  color: var(--t-via);
  border-radius: 12px;
  box-shadow: none;
}
html body .section-contact .contact-card-icon i { color: var(--t-via); }
html body .section-contact .contact-card-icon.contact-card-icon-whatsapp { background: #12372c; }
html body .section-contact .contact-card-icon.contact-card-icon-whatsapp i { color: #34d399; }

/* ---------- Pie ---------- */
html body .site-footer {
  background: var(--t-noche);
  background-image: var(--t-cuadros);
  background-size: 44px 44px;
  border-top: 1px solid var(--t-linea-oscura);
}
html body .site-footer::before,
html body .site-footer::after { display: none; }
html body .site-footer .footer-card {
  background: var(--t-asfalto);
  background-image: none;
  border: 1px solid var(--t-linea-oscura);
  box-shadow: none;
}
html body .site-footer .footer-card i { color: var(--t-via); }
html body .site-footer .footer-card a:hover { color: var(--t-via); }
html body .site-footer .footer-badges span,
html body .site-footer .footer-contact-list a,
html body .site-footer .footer-contact-list > div > div,
html body .site-footer .footer-contact-list li {
  background-image: none;
  box-shadow: none;
}
html body .site-footer .footer-contact-list a > span:first-child,
html body .site-footer .footer-contact-list a > i { background: var(--t-noche); background-image: none; }
html body .site-footer .footer-bottom { border-color: var(--t-linea-oscura); color: var(--t-gris-claro); }

@media (max-width: 860px) {
  html body .hero.hero-simple { padding-top: 7rem; }
}

/* La cabecera, también al bajar por la página y en las páginas de formulario */
html body .site-header.is-scrolled,
html body.form-page .site-header { background: rgba(20, 22, 27, 0.94); }

/* Pie: los tres datos de contacto con el mismo cuadro oscuro e ícono amarillo */
html body .site-footer .footer-contact-list > a > i,
html body .site-footer .footer-contact-list > div > i {
  background: var(--t-noche);
  background-image: none;
  color: var(--t-via);
  box-shadow: none;
}
/* Registro: el título de cada vehículo, sin rojo */
html body .vehicle-title { color: var(--t-gris); }

/* ---------- Menú en el celular y la tableta (hasta 1060 px): el panel es opaco ---------- */
@media (min-width: 1061px) {
  html body .site-header .main-nav { background: rgba(255, 255, 255, 0.05); border-color: var(--t-linea-oscura); }
}
@media (max-width: 1060px) {
  html body .site-header .main-nav {
    background: #1b1e24;
    background-image: none;
    border: 1px solid var(--t-linea-oscura);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html body .site-header .main-nav .dropdown-panel { background: var(--t-noche); box-shadow: none; }
}

/* ---------- Etiquetas pequeñas encima de los títulos: texto sencillo, sin píldora ni mayúsculas ---------- */
html body .eyebrow {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--t-gris); font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}
html body .eyebrow::before { display: none; }
html body .section-dark .eyebrow,
html body .section-contact .eyebrow { color: var(--t-gris-claro); }

/* ---------- Página de pagos ---------- */
html body .payment-main-card,
html body .payment-contact-card,
html body .payment-info-card {
  background: #fff;
  background-image: none;
  border: 1px solid var(--t-linea);
  box-shadow: 0 24px 60px rgba(17, 20, 24, 0.07);
}
html body .payment-main-card::before, html body .payment-main-card::after,
html body .payment-contact-card::before, html body .payment-contact-card::after,
html body .payment-info-card::before, html body .payment-info-card::after { display: none; }
html body .payment-card-icon,
html body .payment-info-card > i,
html body .payment-info-card .payment-card-icon,
html body .payment-contact-list a > i,
html body .payment-contact-list a > span:first-child,
html body .payment-contact-list div > i,
html body .payment-contact-list div > span:first-child {
  background: var(--t-noche);
  background-image: none;
  color: var(--t-via);
  border-radius: 12px;
  box-shadow: none;
}
html body .payment-card-icon i,
html body .payment-contact-list a > span:first-child i,
html body .payment-contact-list div > span:first-child i { color: var(--t-via); }
html body .payment-check-list li,
html body .payment-contact-list a,
html body .payment-contact-list > div { background: var(--t-papel); background-image: none; border-color: var(--t-linea); box-shadow: none; }
html body .payment-check-list li i,
html body .payment-check-list li::before { color: #1f9d74; background: rgba(34, 176, 125, 0.14); border-color: transparent; }
html body .section.section-dark {
  background: var(--t-noche);
  background-image: var(--t-cuadros);
  background-size: 44px 44px;
}
html body .section.section-dark::before, html body .section.section-dark::after { display: none; }
html body .payment-step {
  background: var(--t-asfalto);
  background-image: none;
  border: 1px solid var(--t-linea-oscura);
  box-shadow: none;
}
html body .payment-step span,
html body .payment-step > i,
html body .payment-step .step-number { background: var(--t-via); background-image: none; color: var(--t-noche); box-shadow: none; }
html body .cta-card {
  background: var(--t-noche);
  background-image: var(--t-cuadros);
  background-size: 44px 44px;
  border: 1px solid var(--t-linea-oscura);
  box-shadow: none;
}
html body .cta-card::before, html body .cta-card::after { display: none; }
html body .btn.btn-secondary {
  background: none; background-image: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; border-radius: 12px; box-shadow: none;
}
html body .btn.btn-secondary:hover { border-color: #fff; }
html body .hero-simple .btn.btn-ghost { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.4); background: none; }

/* Títulos de las secciones viejas que quedan: la letra de los títulos nuevos */
html body .section-heading h2,
html body .payment-main-card h2,
html body .payment-contact-card h2,
html body .cta-card h2 { font-family: var(--t-display); font-weight: 800; letter-spacing: -0.01em; text-transform: none; }

/* ---------- Ajustes finos ---------- */
/* Los botones de la cabecera dentro del menú del celular (Certificado e Iniciar sesión) */
html body .nav-mobile-actions .btn,
html body .nav-mobile-actions .btn.btn-cert {
  background: rgba(255, 255, 255, 0.05);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}
html body .nav-mobile-actions .btn-cert i { color: var(--t-via); }
/* Etiquetas pequeñas sobre fondo claro */
html body .section-light .eyebrow,
html body .payment-contact-card .eyebrow,
html body .payment-main-card .eyebrow { color: var(--t-gris); }
/* Pagos: los vistos de la lista, las filas y el ícono de cada paso */
html body .payment-check-list > div { background: var(--t-papel); background-image: none; border-color: var(--t-linea); box-shadow: none; }
html body .payment-check-list i { color: #1f9d74; background: rgba(34, 176, 125, 0.14); border-color: transparent; box-shadow: none; }
html body .payment-step > i { background: none; color: rgba(255, 255, 255, 0.28); box-shadow: none; }
html body .section.section-cta { background: none; box-shadow: none; }