/*
 * Landing — hoja única, en capas.
 *
 * El prototipo traía 293 estilos inline y cero clases: imposible de mantener,
 * imposible de cachear y con el CSS viajando en cada byte del HTML. Aquí el
 * HTML solo dice QUÉ es cada cosa y esta hoja dice cómo se ve.
 *
 * Orden: tokens → base → layout → componentes → utilidades. Nada de
 * `!important` y nada de anidar más de dos niveles: si hace falta, es que la
 * clase está mal nombrada.
 *
 * Los tokens son los mismos de la app (app/src/styles/globals.css). Alguien que
 * entre desde aquí al producto no debe notar el salto.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  --bg: #f6f1e9;
  --card: #ffffff;
  --sunk: #f3ebdf;
  --text: #221b14;
  /* Ver la nota de app/src/styles/globals.css: el mínimo se mide sobre el
     fondo real, que aquí es el chip dorado y no el blanco. */
  --muted: #6f6456;
  --faint: #736858;
  --border: rgba(34, 27, 20, 0.1);
  --border-strong: rgba(34, 27, 20, 0.18);
  --cta: #c88a2e;
  /* Más claro al pasar por encima, no más oscuro: la tinta va encima. */
  --cta-hover: #d99b3f;
  /* Tinta sobre el oro, no blanco: blanco da 2.95:1 y no llega al mínimo. El
     tema de noche ya lo hacía así; ahora los dos coinciden. Ver el mismo
     comentario en app/src/styles/globals.css. */
  --cta-fg: #221b14;
  /*
   * El oro como TEXTO tiene que ser más oscuro que el oro como FONDO.
   *
   * #a6721f daba 4.16:1 sobre blanco y 3.52:1 sobre la superficie hundida: por
   * debajo del mínimo en las dos. Es el color de todos los enlaces y de los
   * botones discretos, así que el fallo estaba repartido por toda la interfaz
   * en vez de concentrado en un sitio donde se hubiera visto.
   */
  --accent: #8f6119;
  /* Variantes de texto: los colores de estado están calibrados como fondo y
     sobre blanco no llegan a 4.5:1. Ver CHANGELOG 0.2.0. */
  --ok: #6f9e6a;
  --ok-text: #4a6a46;
  --cool: #6e8ca8;
  --cool-text: #4a6a86;
  --bad: #c4574a;
  --rim: rgba(200, 138, 46, 0.3);

  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;

  --ancho: 1180px;
  --radio: 14px;
  --radio-sm: 10px;
}

[data-theme='noche'] {
  --bg: #151110;
  --card: #1c1714;
  --sunk: #241e19;
  --text: #ede5da;
  --muted: #9c9083;
  --faint: #8f8477;
  --border: rgba(240, 230, 218, 0.07);
  --border-strong: rgba(240, 230, 218, 0.16);
  --cta: #e8a94f;
  --cta-hover: #f0ba66;
  --cta-fg: #151110;
  --accent: #e8a94f;
  --ok: #7fb079;
  --ok-text: #7fb079;
  --cool: #8fb0ce;
  --cool-text: #8fb0ce;
  --bad: #d4685b;
  --rim: rgba(232, 169, 79, 0.3);
}

/* ── Base ────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 7.2vw, 62px);
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(26px, 4.6vw, 40px);
}
h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
}
/* Un enlace al pasar por encima se oscurece; el que se aclara es el BOTÓN,
   que lleva tinta oscura encima. Antes compartían token y uno de los dos
   tenía que salir mal. */
a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * La monoespaciada es para etiquetas, marcas de tiempo y rótulos: texto que
 * quiere parecer dato. Para el dinero NO —una coma ahí ocupa una casilla
 * entera y «RD$24,850» se lee «RD$24 , 850»—; el dinero va en sans con cifras
 * tabulares, que es exactamente lo que hace la app.
 */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* La voz humana del producto. Acompaña, nunca opera: un botón jamás va en serif. */
.voz {
  font-family: var(--serif);
  font-style: italic;
}
/* La frase que cierra una sección: pesa como un subtítulo sin serlo. */
.voz--grande {
  font-size: 21px;
}

/* Sin esto, el teclado entra en la página sin poder saltar la navegación. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--cta);
  color: var(--cta-fg);
  font-weight: 600;
}
.saltar:focus {
  left: 8px;
  top: 8px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

.seccion {
  padding: clamp(56px, 9vw, 104px) 0;
}
.seccion--sunk {
  background: var(--sunk);
}

.dos-columnas {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .dos-columnas {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.rejilla {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
}
.cabecera nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.marca {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text);
}
.marca__punto {
  color: var(--cta);
  text-shadow: 0 0 5px var(--cta);
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  /* Un botón partido en dos líneas deja de leerse como botón. */
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.boton--principal {
  background: var(--cta);
  color: var(--cta-fg);
}
.boton--principal:hover {
  background: var(--cta-hover);
  color: var(--cta-fg);
}
.boton--secundario {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.boton--secundario:hover {
  border-color: var(--text);
  color: var(--text);
}
.boton--discreto {
  min-height: 40px;
  padding: 8px 14px;
  background: none;
  color: var(--muted);
  font-weight: 500;
}
.boton--discreto:hover {
  color: var(--text);
}
.boton--ancho {
  width: 100%;
}
/* Un botón apagado tiene que PARECER apagado. Sin esto, el «Seguir» de la
   página de reservas se veía idéntico al activo y el que lo pulsaba no
   entendía por qué no pasaba nada. */
.boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Solo en la cabecera: mantiene el alto táctil pero deja de comerse el ancho. */
.boton--compacto {
  min-height: 42px;
  padding: 10px 15px;
  font-size: 15px;
}

/* El contenido que solo aparece cuando hay ancho de sobra. */
.solo-ancho {
  display: none;
}
.solo-ancho-en-linea {
  display: none;
}
@media (min-width: 560px) {
  .solo-ancho {
    display: inline-flex;
  }
  .solo-ancho-en-linea {
    display: inline;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 8vw, 96px);
}
.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.hero__entrada {
  margin-top: 20px;
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--muted);
  max-width: 46ch;
}
.hero__acciones {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__notas {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.tarjeta {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  padding: 22px;
}
/* Filo de luz dorada en el borde superior. */
.tarjeta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rim), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.tarjeta h3 {
  margin-bottom: 8px;
}
.tarjeta p {
  color: var(--muted);
  font-size: 15.5px;
}

/* ── Maqueta del producto (no es imagen: es texto, y Google lo lee) ──────── */

.maqueta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 18px 48px rgba(34, 27, 20, 0.08);
}
[data-theme='noche'] .maqueta {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.maqueta__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.maqueta__rotulo {
  font-size: 13px;
  color: var(--muted);
}
/*
 * En sans, no en mono, y por dos razones que apuntan al mismo sitio.
 *
 * La primera es tipográfica: en una monoespaciada la coma ocupa una casilla
 * entera igual que un dígito, y a este tamaño «RD$24,850» se lee «RD$24 , 850».
 * La segunda es que esto es una maqueta del producto: la app pinta el dinero
 * grande en sans con cifras tabulares (`.money` en app/src/styles/globals.css).
 * Si aquí saliera distinto, la landing estaría enseñando un producto que no es.
 */
.maqueta__cifra {
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 5.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  display: block;
  margin-top: 4px;
}

.barra {
  display: flex;
  gap: 3px;
  height: 9px;
  margin: 16px 0 14px;
}
.barra span {
  border-radius: 999px;
}
.barra__gaveta {
  background: var(--cta);
}
.barra__banco {
  background: var(--faint);
  opacity: 0.55;
}
.barra__ellos {
  background: var(--cool);
}

.lineas {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.linea__etq {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.linea__val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.linea--total {
  padding-top: 11px;
  margin-top: 3px;
  border-top: 1px solid var(--border);
  font-weight: 600;
}
/* Dentro de la calculadora el total va despegado del deslizador. */
.calculadora ~ .linea--total {
  margin-top: 14px;
}
.linea--total .linea__etq {
  color: var(--text);
}
.punto {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.sello {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--muted);
}
.sello--ok {
  color: var(--ok-text);
}

/* ── Precio ──────────────────────────────────────────────────────────────── */

.precio__cifra {
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 8vw, 58px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
}
/* El total de la cuenta manda menos que el precio por sillón del titular. */
.precio__cifra--total {
  font-size: 30px;
}
.precio__cuenta {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.deslizador {
  width: 100%;
  height: 30px;
  accent-color: var(--cta);
  cursor: pointer;
}
.calculadora {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Pasos ───────────────────────────────────────────────────────────────── */

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: 22px;
}
@media (min-width: 760px) {
  .pasos {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pasos li {
  counter-increment: paso;
  padding-top: 14px;
  border-top: 2px solid var(--border-strong);
}
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 8px;
}

/* ── Formulario ──────────────────────────────────────────────────────────── */

.campo {
  display: block;
  margin-bottom: 14px;
}
.campo__etq {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 6px;
}
.campo input,
.campo select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radio-sm);
  font: inherit;
  font-size: 16px; /* 16px o iOS hace zoom al enfocar. */
}
.campo input::placeholder {
  color: var(--faint);
}

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--border);
  padding: 34px 0;
  font-size: 14px;
  color: var(--muted);
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
}
.pie nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* ── Movimiento ──────────────────────────────────────────────────────────── */

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

/* ── Utilidades ──────────────────────────────────────────────────────────── */
/*
 * Un puñado corto y con nombre, no un framework de utilidades: lo justo para
 * no repetir `style="margin-top:18px"` por el HTML. Si esta lista crece mucho,
 * la señal es que falta un componente, no otra utilidad.
 */

.prosa {
  color: var(--muted);
  font-size: 17px;
}
.prosa + .prosa {
  margin-top: 14px;
}

.nota {
  font-size: 13px;
  color: var(--muted);
}
.nota--centrada {
  text-align: center;
}
.nota--tenue {
  color: var(--faint);
}
/* Estados del aviso del formulario; los pone `landing.js`. */
.nota--error {
  color: var(--bad);
}
.nota--ok {
  color: var(--ok-text);
}

/* Texto de apoyo en línea: la coletilla que sigue a un `<strong>`. Sin margen,
   porque un elemento en línea ignora el margen vertical de todas formas. */
.subtexto {
  color: var(--muted);
}

.apunte {
  color: var(--muted);
  margin-top: 6px;
}

.medida-lectura {
  max-width: 720px;
}

.lista-limpia {
  list-style: none;
  margin: 0;
  padding: 0;
}

.apilada {
  display: grid;
  gap: 14px;
}

.mt-s {
  margin-top: 10px;
}
.mt-m {
  margin-top: 18px;
}
.mt-l {
  margin-top: 26px;
}
.mt-xl {
  margin-top: 34px;
}

/* ── Documento legal ────────────────────────────────────────────────────────
   Los subtítulos quedaban pegados a su párrafo y en un móvil el texto se leía
   como un bloque continuo. Es el único documento de la casa que alguien lee
   entero y de arriba abajo, así que el aire importa más que en ningún otro. */
.medida-lectura h3 {
  margin-bottom: 0.4rem;
}
.medida-lectura h2 + h3 {
  margin-top: 1.25rem;
}