/* =========================================================================
   Domus — /domus/ y su traduccion /en/domus/
   Cargado DESPUES de styles.css y solo en esas dos paginas. Hereda todos los
   tokens, la tipografia, el fondo atmosferico (body::before), el sistema de
   reveals, :focus-visible y el guard .vk-js-reveal de la hoja principal.
   Aqui solo vive lo que la landing no usa.

   Mapa de nombres del brief -> tokens reales de la hoja:
     paper-cream -> --cream         linen -> --cream-soft
     stone       -> --cream-mute    honey -> --gold-honey
     ink         -> --bg-obsidian   amber -> --amber (ya existe)
     sienna (texto) -> --sienna-text  (--sienna cruda no pasa AA en texto)
   ========================================================================= */

:root {
  /* El brief pide --panel; no existia. Mismo valor que ya usan
     .vk-diag__item y .vk-cta__inner, ahora con nombre propio. */
  --panel: rgba(244, 237, 224, 0.02);
}

/* ---- Nav simplificado: logo + selector ES | EN + CTA. Sin hamburguesa ----
   El empuje a la derecha lo da el selector (margin-left:auto), que va justo
   antes del CTA. El CTA ya NO lleva auto: con los dos en auto el sobrante se
   repartiria entre ambos y el CTA quedaria a media barra. CLAUDE.md §3.
   gap fijo de 16px en todos los anchos: el selector ya trae 14px de aire
   propio, y los 48/32px del nav de la landing lo separaban del CTA de mas. */
.dm-nav { gap: 16px; }
.dm-nav .vk-nav__cta { margin-left: 0; }
/* La landing solo garantiza 44px de alto en movil; aqui el brief lo exige
   en todos los anchos. */
.dm-nav .vk-btn--compact { min-height: 44px; }

/* ---- Selector de idioma ES | EN (/domus/ y /en/domus/) ----
   El idioma actual es texto, no enlace; el otro enlaza a la misma pagina en
   ese idioma. Cajas de 44px de alto y ancho para el tap target; el aire es
   padding fijo de 14px, no centrado por min-width, para poder alinear la
   tinta con la gotera en movil (ver el bloque de ≤768px). */
.dm-lang {
  margin-left: auto;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
}
.dm-lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--cream-mute);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.dm-lang__item--current { color: var(--cream); }
a.dm-lang__item:hover { color: var(--amber); }
/* Divisor dibujado, no un caracter "|": sin texto no entra en el calculo de
   contraste ni en el arbol de accesibilidad. */
.dm-lang__sep {
  display: block;
  width: 1px;
  height: 12px;
  background: var(--border-3);
}
/* Solo para lectores de pantalla: "ES" / "EN" se expanden a "Español" /
   "English" sin ocupar sitio. */
.dm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Hero ---- */
.dm-hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px max(64px, env(safe-area-inset-right)) 96px max(64px, env(safe-area-inset-left));
}
.dm-hero__h {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  /* display-lg: por debajo del h1 de la landing (84px) — esta pagina abre
     con utilidad, no con drama. */
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
  max-width: 900px;
  margin: 0 0 28px;
  text-wrap: balance;
  position: relative;
}
.dm-hero__lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--cream-soft);
  max-width: 620px;
  margin: 0 0 36px;
}

/* Titular en ingles: cada frase es un bloque en linea, asi el corte cae entre
   las dos frases. Con `balance` el ingles se partia en "Get / it back". En
   espanol los span existen (mismo marcado) pero no actuan: alli el corte ya
   caia donde cae, y cambiarlo alargaria el hero en movil. */
.dm-hero__h:lang(en) .dm-hero__s { display: inline-block; }

/* Hilo dorado: mismo tratamiento que la landing, anclado bajo el h1. */
.dm-hero__h .vk-hero__thread { bottom: -14px; }

/* ---- Micro-etiqueta mono (SIN COSTO · ...) ---- */
.dm-micro {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-top: 18px;
}
/* Grupos de la micro-etiqueta: cada uno es indivisible, asi la linea solo se
   parte despues de un "·" y nunca deja una palabra huerfana ("Venezuela"). */
.dm-micro > span { white-space: nowrap; }

/* ---- Aviso bajo el CTA (solo /en/domus/): el formulario es en espanol ----
   Va pegado al boton para que se lea antes de pulsarlo. El enlace de correo
   hereda el estilo base de `a` (styles.css); es un enlace de texto dentro de
   la frase, exento del tap target de 44px (WCAG 2.5.8). El pie lleva el mismo
   correo con caja de 44px. */
.dm-cta-note {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream-mute);
  margin: 14px 0 0;
}

/* ---- Boton honey ---- */
.vk-btn--honey {
  background: var(--gold-honey);
  color: var(--bg-obsidian);
}
.vk-btn--honey:hover { background: var(--gold-warm); color: var(--bg-obsidian); }

/* ---- Divisor de pelo entre secciones ---- */
.dm-rule {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(64px, env(safe-area-inset-right)) 0 max(64px, env(safe-area-inset-left));
}
.dm-rule span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(244, 237, 224, 0) 0%,
    rgba(244, 237, 224, 0.18) 30%,
    rgba(244, 237, 224, 0.18) 70%,
    rgba(244, 237, 224, 0) 100%);
}

/* ---- Titulos y cuerpo de seccion ---- */
.dm-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
  margin: 0 0 32px;
  text-wrap: balance;
}
.dm-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream-soft);
  margin: 0;
  max-width: 680px;
}
.dm-body + .dm-body { margin-top: 20px; }
.dm-body--lg { font-size: 19px; line-height: 1.6; max-width: 620px; }

/* ---- 02 · Tres pasos ---- */
.dm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.dm-step__n {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 16px;
}
.dm-step__h {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 24px;
  letter-spacing: var(--tracking-snug);
  color: var(--cream);
  margin: 0 0 12px;
}

/* ---- 03 · Panel de compromiso ---- */
.dm-panel {
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  padding: 48px;
}

/* ---- 04 · Acceso, centrado ---- */
.dm-access { text-align: center; }
.dm-access .dm-h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.dm-access .dm-body { margin-left: auto; margin-right: auto; }
.dm-access__cta { margin-top: 36px; }

/* ---- Footer ---- */
.dm-footer__line { font-size: 13px; color: var(--cream-soft); }
/* El enlace y su flecha no se separan: sin esto la flecha caia sola en la
   linea siguiente (/domus/ a 414px, /en/domus/ a 390px). */
.dm-keep { white-space: nowrap; }
.dm-footer__line a {
  color: var(--cream-soft);
  text-decoration: none;
  /* padding vertical para alcanzar el tap target de 44px sin sacar el
     enlace del flujo de la frase */
  display: inline-block;
  padding: 14px 0;
  transition: color var(--duration-base) var(--ease-standard);
}
.dm-footer__line a:hover { color: var(--amber); }
.dm-footer__meta { font-size: 13px; color: var(--cream-mute); }
.dm-footer__meta a {
  color: var(--cream-mute);
  text-decoration: none;
  display: inline-block;
  padding: 15px 0;
  transition: color var(--duration-base) var(--ease-standard);
}
.dm-footer__meta a:hover { color: var(--amber); }

/* =========================================================================
   Movil
   ========================================================================= */
@media (max-width: 768px) {
  /* styles.css tenia `.vk-nav .vk-btn--compact { display: none }` y esa regla
     ocultaba en movil los CTA de nav de LAS DOS paginas. Se elimino para que
     la landing muestre el suyo con etiqueta corta; /domus/ conserva aqui el
     comportamiento de siempre —en movil, solo el wordmark— porque su CTA no
     tiene variante corta y mostrarlo es una decision de producto sin tomar.
     Quitar esta regla es lo unico que hace falta si se decide mostrarlo. */
  .dm-nav .vk-btn--compact { display: none; }
  /* Con el CTA oculto, el selector es el elemento del borde derecho: se retrae
     su propio padding para que la tinta de "EN" acabe en la gotera, igual que
     la hamburguesa de la landing. CLAUDE.md §3. */
  .dm-lang { margin-right: -14px; }
  .dm-hero { padding: 32px max(24px, env(safe-area-inset-right)) 56px max(24px, env(safe-area-inset-left)); }
  .dm-hero__h { font-size: clamp(34px, 8.6vw, 48px); line-height: 1.1; }
  .dm-hero__lead { font-size: 16px; }
  .dm-hero__cta .vk-btn { width: 100%; justify-content: center; }
  .dm-rule { padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); }
  .dm-h2 { font-size: clamp(26px, 6.4vw, 36px); line-height: 1.18; margin-bottom: 24px; }
  .dm-steps { grid-template-columns: 1fr; gap: 32px; }
  .dm-step__h { font-size: 21px; }
  .dm-body--lg { font-size: 16px; }
  .dm-panel { padding: 28px 20px; }
  .dm-access__cta .vk-btn { width: 100%; justify-content: center; }
}