/* CROSSINGCAR / IMPORT CANARIAS — shared visual system */
:root {
  --cc-white: #FFFFFF;
  --cc-black: #171819;
  --cc-graphite: #3D4246;
  --cc-secondary: #62666A;
  --cc-silver: #B5B8BC;
  --cc-pearl: #F5F5F5;
  --cc-dark: #111315;
  --cc-line: #D9DADC;
  --cc-success: #176B45;
  --cc-success-bg: #EAF4EE;
  --cc-warning: #795300;
  --cc-warning-bg: #FFF4D9;
  --cc-error: #A12820;
  --cc-error-bg: #FCEDEA;
  --cc-font: Inter, "Segoe UI", system-ui, sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
body { color: var(--cc-black); background: var(--cc-white); font-family: var(--cc-font); font-size: 16px; line-height: 1.6; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--cc-black); }
:focus-visible { outline: 3px solid var(--cc-graphite) !important; outline-offset: 3px; }
button, .btn, [role="button"] { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
button:hover, .btn:hover { filter: brightness(.94); }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { color: var(--cc-black); background: var(--cc-white); border-color: var(--cc-silver); font-size: 16px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cc-graphite); }
label { color: var(--cc-graphite); font-size: 14px; }
::placeholder { color: #717579; opacity: 1; }
.brand-image { display: block; width: 226px; max-width: min(54vw, 250px); height: auto; object-fit: contain; }
.brand-image.light-mark { width: 210px; }
.brand-vertical { display: block; width: 176px; max-width: 58vw; height: auto; margin: 0 auto; object-fit: contain; }
.cc-logo-link { display: inline-flex; align-items: center; min-width: 0; }
body > header .logo,
body > footer .logo {
  display: block;
  width: 252px;
  height: 66px;
  color: transparent !important;
  font-size: 0 !important;
  background: url("branding/crossingcar-horizontal-black.png") left center/contain no-repeat;
}
.hero {
  background-image:
    linear-gradient(90deg, rgba(8,12,16,.72) 0%, rgba(8,12,16,.45) 56%, rgba(8,12,16,.08) 100%),
    url("branding/crossingcar-hero-photo.jpg") !important;
  background-size: cover !important;
  background-position: center 56% !important;
}
.hero .wrap {
  max-width: 620px;
  padding: 28px;
  margin-left: max(24px, calc((100vw - 1180px) / 2));
  margin-right: auto;
}
.hero h1 {
  display: table;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cc-white) !important;
  font-size: clamp(34px, 3.8vw, 50px);
  letter-spacing: -1.4px;
  line-height: 1.08;
  text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.9);
}
.hero h1 em {
  color: var(--cc-white) !important;
  background: transparent;
  padding: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.95);
}
.hero p {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cc-white) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.95);
}
.hero .eyebrow {
  display: table;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cc-white) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.hero .btn.outline {
  border-color: var(--cc-black) !important;
  background: var(--cc-black) !important;
  color: var(--cc-white) !important;
}
.hero .actions .btn {
  border: 1px solid var(--cc-white) !important;
  background: var(--cc-white) !important;
  color: var(--cc-black) !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hero .actions .btn:hover,
.hero .actions .btn:focus-visible,
.hero .actions .btn:active {
  border-color: var(--cc-black) !important;
  background: var(--cc-black) !important;
  color: var(--cc-white) !important;
}
.hero .flag-peninsula {
  flex-basis: 100%;
  width: max-content;
  margin-inline: auto;
  text-align: center;
}

/* Public content surfaces */
body:not(.lg-page) .card,
body:not(.lg-page) .panel,
body:not(.lg-page) .formcard,
body:not(.lg-page) .step {
  background-color: var(--cc-white);
  border-color: var(--cc-line);
  box-shadow: 0 10px 30px rgba(23,24,25,.045);
}
.muted, .sub, .lead, .note, .hint, .fx-muted { color: var(--cc-secondary); }
.btn, button, .primary, .rt-btn, .fx-btn {
  background: var(--cc-black);
  border-color: var(--cc-black);
  color: var(--cc-white);
}
.btn.alt, .btn.ghost, .mini-btn, .rt-btn.alt, .fx-btn.alt {
  color: var(--cc-black);
  background: var(--cc-white);
  border: 1px solid var(--cc-graphite);
}
.tag, .badge, .badge.blue, .fx-badge.ok {
  color: var(--cc-graphite);
  background: var(--cc-pearl);
  border-color: var(--cc-silver);
}
.warn, .status.warn, .fx-warn, .legal-block[data-state=blocked], .legal-block[data-state=error],
.lg-blocked, .lg-status[data-state=blocked], .lg-status[data-state=error] {
  color: var(--cc-warning);
  background: var(--cc-warning-bg);
  border-color: #C69A38;
}
.status.error, .err, .error-text { color: var(--cc-error); }
.status.error { background: var(--cc-error-bg); border-color: var(--cc-error); }
.status.ok, .rt-ok { color: var(--cc-success); background: var(--cc-success-bg); border-color: var(--cc-success); }
table th { background: var(--cc-pearl); color: var(--cc-graphite); }
table td, table th { border-color: var(--cc-line); }
body > footer {
  background: var(--cc-dark);
  color: var(--cc-pearl);
  padding: 32px 20px;
}

/* Shared branded public mastheads */
body > header:not(.top) { background: var(--cc-white); color: var(--cc-black); border-bottom: 1px solid var(--cc-line); }
body > header:not(.top) nav a { color: var(--cc-graphite); }
body > header:not(.top) nav a:hover { color: var(--cc-black); }
body > header:not(.top) > a { color: var(--cc-graphite) !important; }
body > header:not(.top) .logo {
  background-image: url("branding/crossingcar-horizontal-black.png");
}
body > header:not(.top) > b {
  display: block;
  flex: 0 0 auto;
  width: 232px;
  height: 60px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background: url("branding/crossingcar-horizontal-black.png") left center/contain no-repeat;
}
body > header:not(.top) > strong,
body > header:not(.top) > a:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cc-graphite);
}
body > header:not(.top) > strong::before,
body > header:not(.top) > a:first-child::before {
  content: "";
  display: block;
  flex: 0 0 220px;
  width: 220px;
  height: 56px;
  background: url("branding/crossingcar-horizontal-black.png") left center/contain no-repeat;
}
body > header.no-brand > a:first-child::before { display: none; }
body > header.no-brand > a:first-child { gap: 0; }
body > footer .logo {
  background-image: url("branding/crossingcar-horizontal-white.png");
}
.brand-login { width: 168px; max-width: 100%; height: auto; margin-bottom: 24px; }
.side .brand .brand-image.light-mark { width: 190px; max-width: 100%; }
.brand:has(.brand-image)::before { display: none !important; }
.mobilemenu { color: var(--cc-black) !important; border-color: var(--cc-silver) !important; }
.private-area-link{display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;min-height:42px;padding:10px 14px;border-radius:9px;background:#171819!important;color:#fff!important;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
.private-area-link:focus-visible{outline:2px solid #171819;outline-offset:3px}
.private-area-menu{font-weight:700}
@media(max-width:980px){header .nav{gap:8px}header .nav .logo{width:min(38vw,170px);flex-shrink:1}header .private-area-link{font-size:13px;padding:9px 11px}}
.nav#nav { background-color: var(--cc-white); }
.nav#nav a { color: var(--cc-black); }

/* CRM retains its deliberate ink-on-paper architecture, with brand neutrals. */
.floating-wa { background: #171819 !important; color: #fff !important; }
.features { display: none !important; }
.notice { color: var(--cc-graphite); background: var(--cc-pearl); }
.hero h1 em { color: var(--cc-white); }
.hero .eyebrow { color: var(--cc-silver); }
.simula-k { color: var(--cc-graphite); }
.hero h1 em { color: var(--cc-white) !important; }
h1 em { color: var(--cc-graphite) !important; }
.feature, .flag { color: var(--cc-white); }
.features, .darksection, .cta { background: var(--cc-dark) !important; color: var(--cc-white); }
.country { background: #171819 !important; }
.nav > .btn.light { background: var(--cc-black) !important; color: var(--cc-white) !important; }
.estimate, .rt-panel, .fx-card { background-color: var(--cc-white); }
.tags button, .choice, .simula-b { background-color: var(--cc-white); color: var(--cc-black); border-color: var(--cc-graphite); }
.simula-b.strong { background-color: var(--cc-black); color: var(--cc-white); }
.estimate output, .fx-totals dd.big { color: var(--cc-black); }
.rt-tabs .rt-tab[aria-selected=true] { box-shadow: inset 0 -3px 0 var(--cc-silver); }
.notice, .simula { background: var(--cc-pearl); border-color: var(--cc-line); }
.top {
  background-color: var(--cc-white) !important;
  color: var(--cc-black) !important;
  border-bottom: 1px solid var(--cc-line);
}
.top nav a { color: var(--cc-graphite); }
.top .logo {
  color: transparent !important;
  background-image: url("branding/crossingcar-horizontal-black.png") !important;
}
.fx .top .logo {
  display: block !important;
  width: 220px !important;
  height: 58px !important;
  font-size: 0 !important;
  background: url("branding/crossingcar-horizontal-black.png") left center/contain no-repeat !important;
}
.fx .kicker { color: var(--cc-graphite) !important; }
.fx .fx-rules { border-color: var(--cc-graphite); background: var(--cc-pearl); color: var(--cc-graphite); }
.fx .fx-badge.ok { background: var(--cc-pearl); border-color: var(--cc-silver); color: var(--cc-graphite); }
.fx .fx-totals dd.big { color: var(--cc-black); }
.fx .fx-f input:focus, .fx .fx-f select:focus { outline-color: var(--cc-graphite); border-color: var(--cc-graphite); }
.fx .fx-btn:hover { background: var(--cc-graphite); }
.fx .fx-rp-brand span { color: var(--cc-graphite); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand-image { width: 192px; max-width: 51vw; }
  .brand-image.light-mark { width: 178px; }
  body > header .logo, body > footer .logo { width: 210px; height: 54px; }
  body > header:not(.top) > b { width: 210px; height: 54px; }
  .hero {
    min-height: calc(100vh - 130px);
    min-height: calc(100svh - 130px);
    isolation: isolate;
    overflow: hidden;
    background-color: var(--cc-dark);
    background-image: none !important;
  }
  .hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -14px;
    background: url("branding/crossingcar-hero-photo.jpg") center / cover no-repeat;
    filter: blur(10px) brightness(.5);
    transform: scale(1.04);
  }
  .hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(180deg, rgba(17,19,21,.78) 0%, rgba(17,19,21,.64) 43%, rgba(17,19,21,.34) 76%, rgba(17,19,21,.24) 100%),
      url("branding/crossingcar-hero-photo.jpg");
    background-size: 100% 100%, 100% auto;
    background-position: center, center 68%;
    background-repeat: no-repeat;
  }
  .hero .wrap { position: relative; z-index: 2; width: auto !important; max-width: 100%; margin: 0 14px; padding: 18px 20px; }
  .hero h1 { font-size: clamp(32px, 8vw, 36px); letter-spacing: -1.1px; line-height: 1.06; margin: 12px 0 14px; }
  .hero p { font-size: 15px; line-height: 1.45; margin: 12px 0; }
  .hero .flags { gap: 7px; margin: 14px 0; }
  .hero .flag { padding: 8px 10px; font-size: 12px; }
  .hero .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .hero .actions .btn { width: 100%; min-height: 46px; padding: 10px 8px; font-size: 14px; line-height: 1.2; text-align: center; }
  .hero .actions .btn:first-child { grid-column: 1 / -1; }
  .hero .flags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
  }
  .hero .flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 6px;
    text-align: center;
    line-height: 1.2;
  }
  .hero .flag-peninsula { grid-column: 1 / -1; justify-self: center; width: min(100%, 230px); }
  .floating-wa {
    position: fixed !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 20;
    background: #171819 !important;
    color: #fff !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .floating-wa.is-hidden-over-hero {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }
}

@media (min-width: 901px) {
  #nav { gap: 14px; }
  #nav a { flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
  .nav { gap: 16px; }
}

.privacy-first-layer {
  margin: 14px 0;
  color: #3D4246;
  font-size: .92em;
  line-height: 1.55;
}
.privacy-first-layer p { margin: 0 0 8px; }
.privacy-first-layer a { text-decoration: underline; }
.privacy-marketing {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 18px;
  color: #3D4246;
  font-size: .9em;
  line-height: 1.45;
}
.privacy-marketing input { flex: 0 0 auto; margin-top: .25em; }
.legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  width: 100%;
  border-top: 1px solid #ffffff33;
  margin-top: 20px;
  padding-top: 18px;
}
/* The home page has a mobile dropdown rule for every nav element. Keep the
   injected legal navigation in normal footer flow instead of overlaying hero. */
body > footer .legal-footer-links {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: flex !important;
  flex-direction: row !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 18px 0 0 !important;
}
.legal-footer-links a { color: inherit; text-decoration: underline; }

/* La confirmación de privacidad y el permiso comercial son campos separados. */
.privacy-confirmation{display:flex;align-items:flex-start;gap:.55rem;margin:12px 0;font-size:.85rem;line-height:1.45}.privacy-confirmation input{flex:0 0 auto;margin:.2rem 0 0}.privacy-confirmation a{text-decoration:underline;text-underline-offset:2px}