/* ============================================================
   ORVIAN — base.css
   Reset, tipografía, elementos, botones y utilidades.
   Sin valores de color literales: todo viene de tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sp-4));
}

body {
  margin: 0;
  background-color: var(--seashell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* El body nunca hace scroll horizontal. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: var(--fw-black); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); }
h3 { font-size: var(--fs-h3); }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, iframe, video {
  display: block;
  max-width: 100%;
}
img { height: auto; }

a {
  color: var(--chrysler-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--coquelicot-ink); }

strong, b { font-weight: var(--fw-bold); }

button { font: inherit; color: inherit; }

/* ---------- Foco visible (WCAG AA) ---------- */
:focus-visible {
  outline: 3px solid var(--chrysler-blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Sobre fondo violeta el azul pierde contraste: se usa el lienzo claro. */
.on-violet :focus-visible,
.nav__panel :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--seashell);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Contenedores ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--violet {
  background-color: var(--russian-violet);
  color: var(--on-violet);
  overflow: hidden;
}
.section--violet h2,
.section--violet h3 { color: var(--on-violet); }
.section--seashell { background-color: var(--seashell); }

/* ---------- Encabezados de sección ----------
   Sistema editorial del manual: folio numerado, etiqueta en versalitas y
   una regla fina que abre la sección. */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  /* Coquelicot sobre Seashell da 3.4:1: aquí el color lo lleva sólo el
     folio, que es un dato, y la etiqueta va en tinta legible. */
  color: var(--ink-soft);
}
.eyebrow__num {
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--coquelicot);
}
.eyebrow__txt { display: block; }
.section--violet .eyebrow { color: var(--on-violet-soft); }

.section__head {
  max-width: 46rem;
  margin-bottom: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--bw) solid var(--line);
}
.section--violet .section__head { border-top-color: var(--violet-line); }
.section__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--wrap-text);
}
.section--violet .section__sub { color: var(--on-violet-soft); }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--coquelicot);
  --btn-fg: var(--on-coquelicot);
  --btn-bd: var(--coquelicot);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-alt);
  /* 19px en negrita = "texto grande" para WCAG: con Seashell sobre
     Coquelicot (3.29:1) el mínimo exigible baja a 3:1 y se cumple AA. */
  font-weight: var(--fw-bold);
  font-size: 1.1875rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover {
  /* Azul e índigo sólo en estados. */
  --btn-bg: var(--chrysler-blue);
  --btn-bd: var(--chrysler-blue);
  --btn-fg: var(--seashell);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

/* Secundario sobre lienzo claro */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
}
/* Secundario sobre violeta */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--seashell);
  --btn-bd: var(--seashell);
}
.btn--indigo {
  --btn-bg: var(--tropical-indigo);
  --btn-fg: var(--indigo-ink);
  --btn-bd: var(--tropical-indigo);
}
/* Variante compacta: a este tamaño el texto claro sobre Coquelicot ya no
   cumple AA, así que el rótulo pasa a tinta violeta (5.18:1). Las
   variantes fantasma y de contorno conservan su propio color. */
.btn--sm {
  --btn-fg: var(--on-coquelicot-sm);
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
}
.btn--ghost.btn--sm { --btn-fg: var(--ink); }
.btn--outline.btn--sm { --btn-fg: var(--seashell); }
.btn--block { width: 100%; }
.btn__icon { width: 1.125em; height: 1.125em; flex: none; }

/* Enlace con flecha */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-alt);
  font-weight: var(--fw-semi);
  font-size: var(--fs-detail);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chrysler-blue);
}
.link-arrow:hover { gap: var(--sp-3); }

/* ---------- Etiquetas y badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background-color: var(--tropical-indigo);
  color: var(--indigo-ink);
  font-family: var(--font-num);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
/* Rótulo pequeño sobre Coquelicot: tinta violeta para cumplir AA. */
.badge--venta { background-color: var(--coquelicot); color: var(--on-coquelicot-sm); }
.badge--renta { background-color: var(--chrysler-blue); color: var(--seashell); }

.tipo-label {
  font-family: var(--font-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-detail);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Bullet con ícono de llave ----------
   Es la llave del manual de identidad: proporción 2.26:1, no cuadrada. */
.icon-key {
  width: 1.9em;
  aspect-ratio: 175.23 / 77.55;
  height: auto;
  color: var(--coquelicot);
  flex: none;
}
.key-list { display: grid; gap: var(--sp-3); }
.key-list li {
  display: grid;
  grid-template-columns: 1.9em 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.key-list .icon-key { margin-top: 0.42em; }

/* ---------- Cinta (elemento gráfico de marca) ----------
   Acento de esquina tomado del manual. Va siempre fuera del área de texto
   y por debajo del contenido: nunca cruza un texto ni un CTA. Es una pieza
   fija, sin animación de entrada. */
.ribbon {
  position: absolute;
  z-index: var(--z-ribbon);
  pointer-events: none;
  user-select: none;
}
.ribbon img { width: 100%; height: auto; display: block; }

/* ---------- Aparición al entrar en viewport ----------
   Cortinilla: el bloque se descubre de arriba hacia abajo con un
   recorte, no con un desvanecido. Es más editorial y no deja el texto
   a media opacidad mientras entra.
   Al terminar se quita el recorte (.is-done) para no cortar las sombras
   de las tarjetas. La clase la pone assets/js/app.js. */
.reveal {
  clip-path: inset(0 0 100% 0);
  transform: translateY(12px);
  transition: clip-path 640ms var(--ease-out),
              transform 640ms var(--ease-out);
}
.reveal.is-visible { clip-path: inset(0 0 0 0); transform: none; }
.reveal.is-done { clip-path: none; transform: none; transition: none; }

/* Escalonado dentro de un mismo grupo: las tarjetas no entran a la vez. */
.reveal:nth-child(2) { transition-delay: 90ms; }
.reveal:nth-child(3) { transition-delay: 180ms; }
.reveal:nth-child(4) { transition-delay: 270ms; }

/* ---------- Utilidades ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: calc(var(--z-nav) + 1);
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--seashell);
  color: var(--ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.overflow-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.no-scroll { overflow: hidden; }
.stack { display: grid; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster--center { justify-content: center; }
.text-lead { font-size: var(--fs-lead); color: var(--ink-soft); }
.measure { max-width: var(--wrap-text); }

/* Título grande en Coquelicot: permitido sólo ≥24px y bold. */
.accent-title {
  color: var(--coquelicot);
  font-weight: var(--fw-black);
  font-size: max(1.5rem, var(--fs-h3));
}

/* ---------- Movimiento reducido ---------- */
/* Quien pidió menos movimiento ve el contenido ya colocado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { clip-path: none; transform: none; }
}