/* ORTMEL — tokens de marca y estilos base compartidos (sitio, cotizador y marca) */
:root {
  --azul-950: #061322;
  --azul-900: #0A1F38;
  --azul: #0E2A4D;
  --azul-700: #1B3E6B;
  --azul-500: #3D6597;
  --azul-100: #E3EAF3;
  --naranja: #F26B21;
  --naranja-600: #D9561A;
  --naranja-100: #FDE9DC;
  --arena: #F5F3EF;
  --arena-2: #ECE7DF;
  --blanco: #FFFFFF;
  --tinta: #121A24;
  --gris: #586374;
  --gris-claro: #8C95A3;
  --linea: #DDD7CD;
  --verde-senal: #0B6B3A;
  --ok: #1F8A4C;
  --error: #C2361B;

  --f-titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 10px;
  --radio-lg: 18px;
  --sombra: 0 1px 2px rgb(10 31 56 / .06), 0 8px 24px rgb(10 31 56 / .08);
  --sombra-lg: 0 2px 6px rgb(10 31 56 / .08), 0 24px 48px rgb(10 31 56 / .14);
  --ancho: 1180px;
  --skew: -12deg;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--arena);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }

/* Botones */
.btn {
  --bg: var(--naranja); --fg: #fff; --bd: var(--naranja);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.4em;
  border: 2px solid var(--bd);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-titulo);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:hover { --bg: var(--naranja-600); --bd: var(--naranja-600); transform: translateY(-1px); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--fantasma { --bg: transparent; --fg: currentColor; --bd: currentColor; }
.btn--fantasma:hover { --bg: rgb(255 255 255 / .1); --bd: currentColor; }
.btn--azul { --bg: var(--azul); --bd: var(--azul); }
.btn--azul:hover { --bg: var(--azul-700); --bd: var(--azul-700); }
.btn--claro { --bg: #fff; --fg: var(--azul); --bd: var(--linea); }
.btn--claro:hover { --bg: var(--arena); --bd: var(--azul-500); }
.btn--sm { font-size: .95rem; padding: .55em 1.05em; }
.btn--wa { --bg: #1FAF5A; --bd: #1FAF5A; }
.btn--wa:hover { --bg: #178F49; --bd: #178F49; }

/* Etiqueta superior en secciones */
.ceja {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--naranja-600);
  margin-bottom: .9rem;
}
.ceja::before {
  content: ""; width: 28px; height: 6px; background: var(--naranja);
  transform: skewX(var(--skew));
}

/* Ilustraciones de unidades */
.unidad-svg .u-body { fill: var(--azul); }
.unidad-svg .u-accent { fill: var(--naranja); }
.unidad-svg .u-glass { fill: #A9C2DE; }
.unidad-svg .u-dark { fill: #1B2430; }
.unidad-svg .u-wheel { fill: #1B2430; }
.unidad-svg .u-hub { fill: #C9D1DB; }
.unidad-svg .u-ribs rect { fill: rgb(255 255 255 / .1); }
.unidad-svg .u-rack rect { fill: var(--azul-700); }
.unidad-svg .u-cargo { fill: #B7A68B; }
.unidad-svg .u-strap { stroke: var(--naranja); stroke-width: 3; fill: none; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}