/* ============================================================
   Juridika — tokens
   Marca nueva 2026-10-08 (marketing/brandkit/paleta_aprobada.json): "Lacre + Cempasúchil".
     Lacre #7A1F2B          → color principal: logo, nombre, títulos, precios, enlaces, botones.
     Lacre profundo #4F121B → fondos fuertes (la portada, la franja del Blindado).
     Papel hueso #F7F2EA    → fondo de todo el sitio.
     Cempasúchil #F4A81D    → SOLO botones de compra / acción principal (.btn-compra), con texto
                              en tinta encima. Regla de marketing: en nada más.
     Tinta #1E1A1C          → texto.
     Rosa sello #EBD3CD     → etiquetas y detalles.
   Los contratos (vista previa y PDF) se quedan en blanco y negro: esto es solo el sitio.
   Los nombres de token (olive, stamp…) se conservan para no tocar las ~170 reglas que ya los
   usan; su significado es por ROL:
     olive       → color de marca (lacre)
     olive-deep  → texto secundario
     olive-soft  → texto terciario / divisores
     stamp       → acento secundario (precios, sello, palomitas)
   Tipografía del template "Vitara" (2026-10-03): titulares en Inria Serif, texto en Helvetica.
   ============================================================ */
@font-face { font-family: 'Inria Serif'; src: url('../fonts/inria-serif-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Inria Serif'; src: url('../fonts/inria-serif-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inria Serif'; src: url('../fonts/inria-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inria Serif'; src: url('../fonts/inria-serif-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --color-bg: #F7F2EA;          /* papel hueso: fondo de página */
  --color-hoja: #FFFDF9;        /* hoja: tarjetas, campos, maqueta del contrato */
  --color-paper: #F0E7DB;       /* paneles y secciones alternas (hueso tostado) */
  --color-paper-line: #E2D5C5;  /* líneas y bordes */
  --color-olive: #7A1F2B;       /* lacre: marca, botones, enlaces */
  --color-olive-deep: #574B4D;  /* texto secundario (tinta suavizada, 6.8:1 sobre paneles) */
  --color-olive-soft: #6E5F63;  /* texto terciario (4.9:1 sobre paneles) */
  --color-ink: #1E1A1C;         /* tinta: texto principal */
  --color-stamp: #7A1F2B;       /* acento: precios, sello, palomitas */
  --color-stamp-deep: #7A1F2B;
  --color-on-olive: #F7F2EA;    /* texto sobre lacre */
  --marca-hover: #4F121B;
  --color-lacre-profundo: #4F121B;
  --color-cempasuchil: #F4A81D; /* SOLO botones de compra */
  --color-cempasuchil-hover: #F7B740;
  --color-cempasuchil-borde: #D18A0C;
  --color-rosa: #EBD3CD;        /* rosa sello: etiquetas y detalles */
  --color-rosa-suave: #F6E9E5;  /* fondo de avisos */
  --color-rosa-linea: #E3C5BE;

  --font-display: 'Inria Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;

  --radius: 8px;
  --radius-seal: 50%;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --wrap: 1180px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; margin: 0; text-wrap: balance; color: var(--color-olive); }
::selection { background: rgba(122, 31, 43, 0.18); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input { font: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-olive);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin: 0 0 0.6rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.15s var(--ease);
  white-space: nowrap;
}
/* Botones: lacre sólido para el resto de las acciones; el cempasúchil (.btn-compra) se reserva
   para comprar o empezar el documento. */
.btn-primary {
  background: var(--color-olive);
  color: var(--color-on-olive);
  position: relative;
  overflow: hidden;
}
.btn-primary:hover { background: var(--marca-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
/* Flecha que entra al pasar el cursor (solo en botones marcados .btn-arrow) */
.btn-arrow::after {
  content: "→";
  display: inline-block;
  width: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: width 0.18s var(--ease), opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn-arrow:hover::after { width: 1em; opacity: 1; transform: translateX(0); }
.btn-ghost {
  background: transparent;
  color: var(--color-olive);
  border-color: var(--color-olive);
}
.btn-ghost:hover { border-color: var(--color-olive); background: var(--color-rosa-suave); }
/* Cempasúchil: SOLO compra / acción principal ("Crear mi documento", "Elegir", "Pagar"). Texto en
   tinta (8.6:1). El borde inferior más oscuro es el de la paleta aprobada. */
.btn-compra {
  position: relative;
  overflow: hidden;
  background: var(--color-cempasuchil);
  color: var(--color-ink);
  box-shadow: inset 0 -3px 0 var(--color-cempasuchil-borde);
  font-weight: 700;
}
.btn-compra:hover { background: var(--color-cempasuchil-hover); }
.btn-compra:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--color-cempasuchil-borde); }
.btn-compra:disabled, .btn-compra[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

.link-muted {
  font-size: 0.9rem;
  color: var(--color-olive-soft);
  transition: color 0.18s var(--ease);
}
.link-muted:hover { color: var(--color-ink); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 242, 234, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-paper-line);
}
.header-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
}
/* Logo: la J (img/j_logo.svg) + "Juridika." en serif lacre, con el punto en cempasúchil. */
.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-olive);
  letter-spacing: -0.02em;
}
.brand-j { display: block; width: auto; height: 1.85rem; flex: none; margin-right: 0.5rem; }
.brand-dot { color: var(--color-cempasuchil); }

.main-nav { display: flex; gap: clamp(1.1rem, 1.8vw, 2rem); }
.main-nav a {
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--color-olive-deep);
  transition: color 0.18s var(--ease);
}
.main-nav a:hover { color: var(--color-olive); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.4rem;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* ============================================================
   Hero
   ============================================================ */
/* Estructura de siempre (texto | maqueta del contrato | asistente). Marca nueva: la portada va
   en lacre profundo ("versión fuerte" de la paleta aprobada) con un brillo de lacre detrás de la
   maqueta; los textos en hueso y rosa sello. z-index propio para que el asistente fijado
   (.is-pinned) quede por encima del resto de la página. */
.hero {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 8vh, 6rem);
  background:
    radial-gradient(46rem 30rem at 60% 42%, rgba(122, 31, 43, 0.75), transparent 70%),
    var(--color-lacre-profundo);
  color: var(--color-bg);
}
/* La portada es solo el hero: ocupa la pantalla y centra su contenido. */
.pagina-inicio .hero {
  min-height: calc(100svh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pagina-inicio .hero > .wrap { width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
}
/* El hero de arriba (con asistente) usa una 3ª columna propia para la tarjeta del
   recomendador; #empresas reutiliza .hero-grid con su layout original de 2 columnas. */
#hero .hero-grid {
  grid-template-columns: 1.05fr 0.68fr 260px;
  gap: 2.4rem;
}
.hero-title {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.05em;
  font-weight: 400;
  margin-bottom: 1.2rem;
  color: var(--color-bg);
}
.hero-lead {
  font-size: var(--fs-lead);
  color: var(--color-olive-deep);
  max-width: 46ch;
  margin-bottom: 1.9rem;
}
.hero-actions { display: flex; gap: 1rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-rosa);
  border-top: 1px solid rgba(235, 211, 205, 0.25);
  padding-top: 1.2rem;
}

/* Animación del template: cada palabra sube y aparece con 0.1 s de diferencia (js/main.js
   envuelve las palabras de .anim-palabras; sin JS, el texto se ve normal). */
@keyframes sube-palabra {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.palabra { display: inline-block; opacity: 0; animation: sube-palabra 0.6s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .palabra { opacity: 1; animation: none; } }

/* Maqueta del contrato: hoja blanca, ligeramente girada, sello de lacre. */
.hero-doc { display: flex; justify-content: center; }
.doc-mock {
  width: 100%;
  max-width: 340px;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 1.7rem 1.8rem 2rem;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.1deg);
}
.doc-mock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
.doc-code {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--color-olive-soft);
}
.seal { color: var(--color-stamp); flex-shrink: 0; }
.doc-mock-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 1.3rem;
  color: var(--color-ink);
}
.doc-line {
  height: 7px;
  border-radius: 2px;
  background: var(--color-paper-line);
  margin-bottom: 0.6rem;
  width: 92%;
}
.doc-line.long { width: 100%; }
.doc-line.short { width: 55%; }
.doc-clause {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0.6rem;
}
.doc-clause span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-olive);
  flex-shrink: 0;
}
.doc-clause .doc-line { margin-bottom: 0; flex: 1; }
.doc-mock-sign {
  margin-top: 1.8rem;
  display: flex;
  gap: 1.4rem;
}
.sign-line {
  flex: 1;
  height: 32px;
  border-bottom: 1px solid var(--color-olive-soft);
  display: flex;
  align-items: flex-end;
}
.firma { width: 100%; height: 30px; color: var(--color-olive); }

/* Animación de la maqueta (solo con movimiento permitido; si no, se ve terminada):
   las líneas se escriben, aparecen las cláusulas, se firma y al final cae el sello. */
@media (prefers-reduced-motion: no-preference) {
  .doc-mock .doc-line { transform-origin: left center; animation: escribe-linea 0.55s var(--ease) both; }
  .doc-mock > .doc-line:nth-child(3) { animation-delay: 0.35s; }
  .doc-mock > .doc-line:nth-child(4) { animation-delay: 0.6s; }
  .doc-mock > .doc-line:nth-child(5) { animation-delay: 0.85s; }
  .doc-mock > .doc-clause:nth-child(6) span, .doc-mock > .doc-clause:nth-child(6) .doc-line { animation-delay: 1.15s; }
  .doc-mock > .doc-clause:nth-child(7) span, .doc-mock > .doc-clause:nth-child(7) .doc-line { animation-delay: 1.45s; }
  .doc-mock > .doc-clause:nth-child(8) span, .doc-mock > .doc-clause:nth-child(8) .doc-line { animation-delay: 1.75s; }
  .doc-clause span { animation: aparece 0.35s ease-out both; }
  .firma path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: firma-trazo 1.2s ease-out 2.2s forwards; }
  .firma-2 path { animation-delay: 2.9s; }
  .seal { animation: sello 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 4s both; }
}
@keyframes escribe-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes firma-trazo { to { stroke-dashoffset: 0; } }
@keyframes sello {
  0% { opacity: 0; transform: scale(1.9) rotate(-22deg); }
  70% { opacity: 1; transform: scale(0.92) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

/* ============================================================
   Asistente recomendador — vive en su propia columna del hero. Al salir
   el hero de pantalla, js/main.js le agrega .is-pinned y se vuelve un
   widget fijo en la esquina derecha. Marca nueva: tarjeta de papel hueso
   sobre la portada en lacre, con Juri como la carita del asistente.
   ============================================================ */
.hero-assist-rail { align-self: start; }
.hero-assist {
  position: relative;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-rosa-linea);
  border-radius: 1rem;
  padding: 1.15rem 1.15rem 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
  animation: hero-assist-in 0.6s var(--ease) 0.3s both;
}
@keyframes hero-assist-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-assist { animation: none; }
}

/* Estado fijo: activo mientras el hero está fuera de pantalla (ver observer en js/main.js).
   Solo aplica desde 960px — en mobile el asistente se queda en flujo normal, apilado. */
@media (min-width: 960px) {
  .hero-assist.is-pinned {
    position: fixed;
    top: 5.5rem;
    right: 1.5rem;
    width: 260px;
    z-index: 40;
    animation: hero-assist-pin-in 0.3s var(--ease) both;
  }
  @keyframes hero-assist-pin-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-assist.is-pinned { animation: none; }
  }
}

.hero-assist-head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; }
.hero-assist h3 { font-size: 1rem; line-height: 1.25; margin: 0; color: var(--color-olive); }
.hero-assist > p { font-size: 0.8rem; color: var(--color-olive-deep); margin: 0 0 0.85rem; line-height: 1.45; }
/* La columna es angosta (260px): se permite que el texto del botón salte de línea. */
.hero-assist #recomendador-form .btn-primary {
  white-space: normal;
  line-height: 1.3;
}
.hero-assist .recomendador-resultado {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-top: 0;
  border-radius: 10px;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  color: var(--color-ink);
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: 5rem; }
.section-alt { background: var(--color-paper); }
.section-head { margin-bottom: 2.6rem; max-width: 56ch; }
.section-head h1, .section-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }

/* Category index */
.category-index {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-paper-line);
  border: 1px solid var(--color-paper-line);
}
.category-tab {
  background: var(--color-hoja);
  padding: 1.7rem 1.6rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: background-color 0.18s var(--ease);
}
.category-tab:hover { background: var(--color-paper); }
.cat-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--color-olive); margin-top: 0.15rem; }
.category-tab h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.category-tab p { font-size: 0.85rem; color: var(--color-olive-soft); }
.cat-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-olive-soft);
  flex-shrink: 0;
}

/* Document cards */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.doc-card {
  position: relative;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  overflow: hidden;
}
.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -24px rgba(79, 18, 27, 0.35);
}
.doc-card-fold {
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, transparent 50%, var(--color-paper-line) 50%);
  transition: width 0.2s var(--ease), height 0.2s var(--ease);
}
.doc-card:hover .doc-card-fold { width: 32px; height: 32px; }
.doc-card-cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-stamp-deep);
  margin-bottom: 0.5rem;
}
.doc-card h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  min-height: 2.6em;
}
.doc-card-nota { font-size: 0.85rem; color: var(--color-olive-soft); margin-bottom: 1.3rem; line-height: 1.4; }
.rating { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.3rem; }
.stars {
  --pct: 90%;
  display: inline-block;
  width: 80px;
  height: 13px;
  background: linear-gradient(90deg, var(--color-stamp) var(--pct), var(--color-paper-line) var(--pct));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
          mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px);
}
.rating-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-olive-soft); }
.doc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.price { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--color-olive); }
.price small { font-size: 0.65rem; color: var(--color-olive-soft); }
.price-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-olive-soft);
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.step { border-top: 2px solid var(--color-olive); padding-top: 1.3rem; }
.step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-stamp);
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.step p { color: var(--color-olive-deep); font-size: 0.96rem; }

/* Señales de confianza (honestas — sin reseñas ni cifras inventadas) */
.confianza-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.confianza-item { border-top: 2px solid var(--color-olive); padding-top: 1.2rem; }
.confianza-icon { width: 28px; height: 28px; color: var(--color-olive); margin-bottom: 0.9rem; }
.confianza-item h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.confianza-item p { font-size: 0.88rem; color: var(--color-olive-deep); line-height: 1.5; }
@media (max-width: 860px) {
  .confianza-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .confianza-grid { grid-template-columns: 1fr; }
}

/* Planes (paquete único / membresía) — ver #cuenta en index.html y js/cuenta.js */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-bottom: 2rem;
}
.plan-card {
  background: var(--color-paper);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan-card-nombre { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-ink); }
.plan-card-precio { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--color-olive); }
.plan-card-precio small { font-size: 0.75rem; font-weight: 400; color: var(--color-olive-soft); }
.plan-card-detalle { font-size: 0.9rem; color: var(--color-olive-deep); margin-bottom: 0.6rem; flex: 1; }

/* Checkout compartido (nombre/correo/opt-in + botón único a Stripe Checkout) — ver
   js/checkout.js. Vive dentro de un contenedor .account-form (fondo papel), así que hereda
   ese padding/gap. Ya NO hay selector de método de pago propio (tarjeta/PayPal/OXXO): Stripe
   los muestra dinámicamente en su propia página según lo configurado en su Dashboard — ver
   nota de "dynamic payment methods" en CLAUDE.md. */
.checkout { display: flex; flex-direction: column; gap: 1.1rem; }
.checkout-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-olive-deep);
  cursor: pointer;
}
.checkout-optin input { margin-top: 0.2rem; accent-color: var(--color-olive); flex-shrink: 0; }
.checkout-monto { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; color: var(--color-olive); }
.checkout-continuar { width: 100%; }
.checkout-mensaje { font-size: 0.88rem; color: var(--color-stamp-deep); font-family: var(--font-mono); }

/* Pantalla de agradecimiento (gracias.html, js/gracias.js) -- a donde Stripe redirige
   siempre tras un pago, documento o membresía. */
.gracias-shell { padding-block: 4rem 6rem; }
.gracias-shell .wrap { display: flex; justify-content: center; }
.gracias-card {
  position: relative;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 3rem 2.6rem;
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.gracias-cargando { color: var(--color-olive-soft); font-style: italic; }
.gracias-icono-wrap { color: var(--color-olive); }
.gracias-icono-wrap.is-pendiente { color: var(--color-stamp); }
.gracias-icono-wrap.is-error { color: #B4482F; }
.gracias-icono { width: 64px; height: 64px; }
.gracias-titulo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-olive);
  text-wrap: balance;
}
.gracias-detalle { font-size: var(--fs-lead); color: var(--color-ink); }
.gracias-envio { font-size: 0.9rem; color: var(--color-olive-deep); }
.gracias-envio a, .gracias-detalle a { color: var(--color-olive); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gracias-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 0.6rem; }

.account-form {
  background: var(--color-paper);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* Cualquier clase de autor con `display` distinto de `none` empata en especificidad con la
   regla nativa del navegador `[hidden] { display: none }` y, al ganar por ser regla de autor,
   deja VISIBLE el elemento pese al atributo `hidden` (bug real, encontrado antes con `.field` y
   otra vez con `.account-form`/`.plan-grid` en la sección de planes — cualquier clase nueva con
   `display:flex/grid` que use el atributo `hidden` para ocultarse necesita este mismo patrón). */
.field[hidden], .account-form[hidden], .plan-grid[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-olive-deep);
  font-weight: 600;
}
.field input {
  width: 100%;
  min-width: 0;
  background: var(--color-hoja);
  border: 1.5px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  color: var(--color-ink);
  font-size: 1rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-olive-soft); opacity: 0.85; }
.field input:focus {
  border-color: var(--color-olive);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-olive) 18%, transparent);
}

/* Campo de fecha: 3 selects (Día/Mes/Año, ver renderCampoFecha en js/wizard.js) en vez del
   calendario nativo — más rápido para fechas lejanas al mes actual (ej. vigencias a futuro).
   Cada select ya hereda el estilo de `.field select`; aquí solo se define la proporción de
   ancho entre los 3 (mes necesita más espacio por el nombre en español). */
.fecha-dmy { display: flex; gap: 0.6rem; }
.fecha-dmy select { min-width: 0; font-variant-numeric: tabular-nums; }
.fecha-dmy select[data-fecha-parte="d"] { flex: 1 1 0; max-width: 6.5rem; }
.fecha-dmy select[data-fecha-parte="m"] { flex: 2 1 0; }
.fecha-dmy select[data-fecha-parte="y"] { flex: 1.3 1 0; max-width: 7.5rem; }

.form-note { text-align: center; font-size: 0.85rem; color: var(--color-olive-soft); }
.form-note a { color: var(--color-olive); font-weight: 600; }
.form-confirm {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-stamp-deep);
  font-family: var(--font-mono);
}

/* ============================================================
   Catálogo completo
   (el asistente recomendador ya no vive aquí — ver .hero-assist arriba)
   ============================================================ */
.catalogo-layout { display: block; }
.catalogo-lista {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 0.6rem;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem;
  background: var(--color-hoja);
}
.catalogo-categoria h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-stamp-deep);
  margin-bottom: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-paper-line);
}
.catalogo-items { display: flex; flex-direction: column; gap: 0.9rem; }
.catalogo-item {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  row-gap: 0.2rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-paper-line);
}
.catalogo-items li:last-child { border-bottom: none; padding-bottom: 0; }
.catalogo-item-nombre { font-weight: 600; color: var(--color-ink); grid-column: 1; }
.catalogo-item-nota { font-size: 0.86rem; color: var(--color-olive-soft); grid-column: 1; }
/* Solo posicionamiento dentro de la fila — el estilo visual del botón ("Comenzar") lo da
   .btn.btn-primary.btn-sm, mismo patrón que el resto del sitio (punto 3: antes era un link de
   texto con flecha, distinto al botón sólido usado en destacados/wizard). */
.catalogo-item-link {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.catalogo-item.is-disabled { opacity: 0.6; }
.catalogo-item-estado {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-olive-soft);
  white-space: nowrap;
  text-align: right;
}

#recomendador-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
#recomendador-input {
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.94rem;
  resize: vertical;
  transition: border-color 0.18s var(--ease);
}
#recomendador-input:focus { border-color: var(--color-olive); outline: none; }
.recomendador-resultado {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-paper-line);
}
.recomendador-match-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-olive-soft);
  margin-bottom: 0.35rem;
}
.recomendador-match-nombre { font-weight: 600; font-size: 1.05rem; margin-bottom: 0.8rem; color: var(--color-ink); }
.recomendador-honesto { font-size: 0.9rem; color: var(--color-olive-deep); }
.recomendador-honesto a { color: var(--color-olive); font-weight: 600; }
.recomendador-cargando {
  font-size: 0.88rem;
  color: var(--color-olive-soft);
  font-style: italic;
}
.disclaimer-note {
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--color-olive-soft);
  font-style: italic;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .catalogo-lista { max-height: none; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--color-paper-line);
  padding-block: 3.5rem 2rem;
  background: var(--color-paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-brand p { margin-top: 0.8rem; font-size: 0.85rem; color: var(--color-olive-soft); max-width: 28ch; }
.footer-col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin-bottom: 0.3rem;
}
.footer-col a { font-size: 0.88rem; color: var(--color-olive-deep); }
.footer-col a:hover { color: var(--color-ink); }
.footer-bottom {
  border-top: 1px solid var(--color-paper-line);
  padding-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--color-olive-soft);
  font-family: var(--font-mono);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid, #hero .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-doc { order: -1; }
  .doc-mock { max-width: 320px; }
  .hero-assist-rail { max-width: 320px; margin-inline: auto; }
  .category-index { grid-template-columns: repeat(2, 1fr); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .testimonials { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Con seis opciones el menú ya no cabe en una fila abajo de ~1180 px: pasa al botón de menú. */
@media (max-width: 1180px) {
  .main-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-paper-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s var(--ease);
  }
  .main-nav.is-open { max-height: 420px; }
  .main-nav a { padding: 0.9rem 1.5rem; border-top: 1px solid var(--color-paper-line); }
  .header-actions .link-muted { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 720px) {
  .category-index { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Asistente de creación de documento (crear.html)
   ============================================================ */
.wizard-header {
  border-bottom: 1px solid var(--color-paper-line);
  padding-block: 1.05rem;
}
.wizard-header .header-row { justify-content: space-between; }
.back-link {
  font-size: 0.88rem;
  color: var(--color-olive-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.18s var(--ease);
}
.back-link:hover { color: var(--color-ink); }
.wizard-doc-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-olive);
}

.wizard-shell {
  max-width: 1320px;
  margin-inline: auto;
  padding-block: 0.85rem 4rem;
}

.stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.6rem;
  counter-reset: step;
}
.stepper-item {
  flex: 1;
  position: relative;
  text-align: center;
}
.stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 55%;
  right: -45%;
  height: 1px;
  background: var(--color-paper-line);
  z-index: 0;
}
.stepper-item.is-complete:not(:last-child)::after { background: var(--color-olive); }
.stepper-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-paper-line);
  background: var(--color-hoja);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-olive-soft);
  margin-bottom: 0.55rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.stepper-item.is-active .stepper-num {
  border-color: var(--color-olive);
  color: var(--color-olive);
  font-weight: 700;
}
.stepper-item.is-complete .stepper-num {
  background: var(--color-olive);
  border-color: var(--color-olive);
  color: var(--color-on-olive);
}
.stepper-label {
  display: block;
  font-size: 0.76rem;
  color: var(--color-olive-soft);
}
.stepper-item.is-active .stepper-label { color: var(--color-ink); font-weight: 600; }

.step-panel { display: none; animation: panel-in 0.3s var(--ease); }
.step-panel.is-active { display: block; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .step-panel { animation: none; }
}

.step-panel h2 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}
.step-panel > p.step-intro {
  color: var(--color-olive-deep);
  font-size: 0.94rem;
  margin-bottom: 0.65rem;
}

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: dense;
  gap: 0.75rem 1.1rem;
}
.field-grid .field.full { grid-column: 1 / -1; }

.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-paper-line);
}

/* Resumen */
.summary-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--color-hoja);
  border-bottom: 1px solid var(--color-paper-line);
  font-size: 0.9rem;
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-olive-soft);
  flex-shrink: 0;
}
.summary-row dd { margin: 0; color: var(--color-ink); text-align: right; }

.price-reveal {
  background: var(--color-paper);
  border: 1px solid var(--color-olive-soft);
  border-radius: var(--radius);
  padding: 1.8rem 1.9rem;
  text-align: center;
  animation: price-in 0.45s var(--ease);
}
@keyframes price-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .price-reveal { animation: none; }
}
.price-reveal .eyebrow { justify-content: center; }
.price-reveal-amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-stamp-deep);
  margin-bottom: 0.3rem;
}
.price-reveal-amount small {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-olive-soft);
}
.price-reveal p.price-note {
  font-size: 0.85rem;
  color: var(--color-olive-deep);
  margin-bottom: 1.4rem;
}

.wizard-confirm {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-stamp-deep);
  margin-top: 1rem;
}

/* ============================================================
   Wizard genérico — selects, textareas, notas de ayuda
   ============================================================ */
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  background: var(--color-hoja);
  border: 1.5px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field select:focus,
.field textarea:focus {
  border-color: var(--color-olive);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-olive) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 4.6rem; }
.field label .field-optional {
  text-transform: none;
  font-weight: 400;
  opacity: 0.75;
}

/* Ícono "ⓘ" con texto largo oculto hasta pedirse (ver infoTipHtml en js/wizard.js) — reemplaza
   el bloque de texto siempre visible que antes usaba .step-note, para no ocupar espacio
   vertical fijo en cada paso. Se muestra por :hover/:focus-visible sin JS; wireInfoTips (JS)
   solo cubre fijarlo con clic (necesario en touch) y cerrarlo al hacer clic afuera. */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.55rem;
}
.info-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1.5px solid var(--color-paper-line);
  background: var(--color-paper);
  color: var(--color-olive);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.info-tip-trigger:hover,
.info-tip-trigger:focus-visible {
  border-color: var(--color-olive);
  background: var(--color-olive);
  color: var(--color-on-olive);
  outline: none;
}
.info-tip-bubble {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(340px, 82vw);
  background: var(--color-paper);
  border: 1px solid var(--color-paper-line);
  border-left: 3px solid var(--color-olive);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--color-olive-deep);
  box-shadow: 0 10px 28px rgba(79, 18, 27, 0.14);
}
.info-tip-trigger:hover + .info-tip-bubble,
.info-tip-trigger:focus-visible + .info-tip-bubble,
.info-tip.is-open .info-tip-bubble {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .info-tip-bubble { animation: panel-in 0.15s var(--ease); }
}

/* Selector inicial de documento (cuando crear.html se abre sin ?doc=) */
.wizard-picker { max-width: 560px; margin-inline: auto; }
.wizard-picker h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.wizard-picker > p { color: var(--color-olive-deep); margin-bottom: 2rem; }
.wizard-picker-link {
  display: block;
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--color-olive);
  font-weight: 600;
}

/* Enlace al recomendador desde dentro del wizard */
.wizard-asistente-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-olive-soft);
}
.wizard-asistente-link:hover { color: var(--color-olive); }

/* Paso opcional de antecedentes (chat con guardarraíl) */
.antecedentes-chat {
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  background: var(--color-hoja);
  padding: 1.2rem;
  margin-bottom: 1.4rem;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.antecedentes-msg { font-size: 0.9rem; line-height: 1.5; }
.antecedentes-msg-usuario { color: var(--color-ink); text-align: right; }
.antecedentes-msg-usuario .antecedentes-msg-bubble {
  background: var(--color-olive); color: var(--color-on-olive);
  display: inline-block; padding: 0.55rem 0.85rem; border-radius: var(--radius);
}
.antecedentes-msg-asistente .antecedentes-msg-bubble {
  background: var(--color-paper); border: 1px solid var(--color-paper-line);
  display: inline-block; padding: 0.55rem 0.85rem; border-radius: var(--radius);
}
.antecedentes-form { display: flex; gap: 0.7rem; margin-bottom: 0.6rem; }
.antecedentes-form textarea { flex: 1; min-height: 3rem; }
.antecedentes-estado {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-olive-soft);
  margin-bottom: 1rem;
}

/* Previsualización final del contrato — dibujada en <canvas>, no descargable ni copiable */
.contract-canvas-wrap {
  position: relative;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  background: var(--color-hoja);
  margin-bottom: 1.4rem;
  overflow: hidden;
  box-shadow: 0 20px 48px -28px rgba(79, 18, 27, 0.3);
}
.contract-preview-badge {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-stamp-deep);
  color: var(--color-on-olive);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
}
/* Qué se ve antes de pagar: datos y títulos claros, redacción en gris (documento/vista_previa.js). */
.contract-preview-nota {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-olive-deep);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-paper-line);
}
.resumen-incluye { margin: 0.4rem 0 1.2rem; }
.resumen-incluye ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 12rem 2; /* dos columnas solo si caben (el panel del formulario es angosto) */
  column-gap: 1.8rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.resumen-incluye li { break-inside: avoid; }
.contract-canvas-scroll {
  max-height: 78vh;
  min-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  padding: 14px;
  background: #E9E1D5; /* mesa cálida detrás de las hojas (las hojas siguen en blanco y negro) */
}
/* Hojas carta, una por <canvas>, sobre una mesa gris claro, como la vista de páginas de Word. */
.contract-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.contract-pages canvas,
.contract-pages img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12), 0 8px 22px -12px rgba(17, 24, 39, 0.28);
}
.btn[disabled], .btn.btn-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn.btn-locked:hover { background: inherit; }

/* ============================================================
   Wizard lado a lado
   ============================================================ */
.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  gap: 2.2rem;
  align-items: start;
}
.wizard-capture {
  background: var(--color-paper);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 1.4rem 1.8rem 1.4rem;
}
.wizard-livepreview { position: sticky; top: 6.4rem; } /* debajo del encabezado fijo (~90px) */
.en-resumen .wizard-livepreview { position: static; } /* con el gancho arriba ya no cabe fija */

.progress-bar-wrap { margin-bottom: 0.9rem; }
.progress-bar {
  height: 6px;
  border-radius: 4px;
  background: var(--color-paper-line);
  overflow: hidden;
  margin-bottom: 0.55rem;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-olive);
  border-radius: 4px;
  transition: width 0.3s var(--ease);
}
.progress-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--color-olive-deep);
  font-weight: 600;
}

@media (max-width: 960px) {
  .wizard-layout { grid-template-columns: 1fr; }
  .wizard-livepreview { position: static; order: -1; }
  .contract-canvas-scroll { max-height: 360px; }
}


/* ============================================================
   Ficha por contrato (crear.html?doc=... antes de iniciar el wizard)
   ============================================================ */
.ficha { max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: 3rem; }
.ficha-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 2rem;
  align-items: center;
}
/* display:flex column explícito para que el eyebrow, título, descripción y botón siempre
   queden apilados sin ambigüedad — el botón nunca debe quedar posicionado fuera de este flujo. */
.ficha-hero-texto { display: flex; flex-direction: column; align-items: flex-start; }
.ficha-hero-texto #ficha-comenzar { position: static; }
.ficha-hero h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0.3rem 0 1rem; }
.ficha-desc { font-size: 1.05rem; color: var(--color-olive-deep); max-width: 62ch; margin-bottom: 1.6rem; }
/* Segundo intento: se descarta `aspect-ratio` por completo (el primer intento, separarlo del
   padding/border en cajas distintas, NO resolvió el bug reportado en Safari real — seguía
   viéndose encimado). En vez de eso, se usa la técnica clásica de "padding-top: 100%" para
   forzar proporción 1:1 — el padding porcentual en top/bottom SIEMPRE se calcula sobre el ANCHO
   del contenedor (spec de CSS2, no depende de aspect-ratio como feature), técnica usada desde
   antes de que aspect-ratio existiera como propiedad y sin bugs de cálculo conocidos en ningún
   motor, incluyendo Safari/WebKit viejo. */
.ficha-hero-imagen { position: relative; width: 100%; height: 0; padding-top: 100%; }
.ficha-hero-imagen-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-sizing: border-box;
}
.ficha-ilustracion { width: 100%; height: 100%; color: var(--color-olive); }
@media (max-width: 720px) {
  .ficha-hero { grid-template-columns: 1fr; }
  .ficha-hero-imagen { order: -1; max-width: 200px; margin-inline: auto; }
}

.ficha-como h2, .ficha-faq h2, .ficha-dudas h2 { font-size: 1.3rem; margin-bottom: 1.4rem; }
.ficha-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
/* display:flex column explícito (en vez de dejarlo al flujo por default) para que el círculo
   numerado, el título y el párrafo de cada paso siempre queden apilados sin ambigüedad. */
.ficha-steps li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 2px solid var(--color-olive);
  padding-top: 1.1rem;
}
.ficha-step-num {
  position: static;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-olive);
  color: var(--color-on-olive);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.ficha-steps h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.ficha-steps p { font-size: 0.9rem; color: var(--color-olive-deep); }

.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item {
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  background: var(--color-paper);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-ink);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--color-olive);
  font-weight: 700;
}
.faq-item[open] summary::before { content: "–"; }
.faq-item p { margin: 0.7rem 0 0.1rem 1.1em; font-size: 0.92rem; color: var(--color-olive-deep); }

.ficha-dudas .antecedentes-chat { background: var(--color-paper); }

@media (max-width: 720px) {
  .ficha-steps { grid-template-columns: 1fr; }
}

/* Toque dinámico del home: aparición sutil al hacer scroll (ver js/main.js) */
.reveal-init { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal-init.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Los "Comenzar" del catálogo y de las tarjetas son acciones repetidas en lista: van con
   contorno; el botón sólido se reserva para la acción principal de cada pantalla.
   ============================================================ */
.catalogo-item-link.btn-primary,
.doc-card .btn-primary.btn-sm {
  background: transparent;
  color: var(--color-olive);
  box-shadow: inset 0 0 0 1px var(--color-olive);
}
.catalogo-item-link.btn-primary:hover,
.doc-card .btn-primary.btn-sm:hover {
  background: var(--color-olive);
  color: var(--color-on-olive);
}

/* Base para cualquier campo sin estilo propio (p. ej. el chat de dudas de la ficha). Con
   :where() la especificidad es 0, así que las reglas de .field / #recomendador-input ganan. */
:where(textarea, select, input:not([type="checkbox"]):not([type="radio"])) {
  background: #fff;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
:where(textarea, select, input):focus { border-color: var(--color-olive); outline: none; }
:where(textarea, input)::placeholder { color: var(--color-olive-soft); }
.field input, .field select, .field textarea { background: #fff; }

/* El panel del wizard mide ~300px en escritorio: dos columnas de 140px dejaban campos
   apretados y, cuando el siguiente campo es de ancho completo, uno suelto a media fila.
   Con container query, una sola columna mientras el panel sea angosto. */
.step-panel { container-type: inline-size; }
@container (max-width: 380px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Arrendamiento general → sugerencia de la versión de Jalisco (ver wireAvisoJalisco) */
.aviso-jalisco {
  margin-top: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: var(--color-rosa-suave);
  box-shadow: inset 0 0 0 1px var(--color-rosa-linea);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-ink);
}
.aviso-jalisco a { color: var(--color-olive); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.aviso-jalisco .link-boton { font-size: inherit; font-weight: 600; }
.icono-escudo { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }

/* ============================================================
   Arrendamiento en dos versiones (2026-10-06): Esencial y Blindado. Elección al empezar
   (.versiones), gancho en el último paso (.upsell) y pago arriba, sin bajar (.pago-card).
   ============================================================ */
.versiones { margin-block: 2.5rem 3rem; }
.versiones h2 { text-wrap: balance; margin-bottom: 0.4rem; }
.versiones-intro { color: var(--color-olive-deep); max-width: 62ch; margin-bottom: 1.4rem; }
.versiones-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2rem; align-items: stretch; }
.version {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.5rem 1.5rem 1.3rem;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  background: var(--color-hoja);
}
.version h3 { font-family: var(--font-display); font-size: 1.7rem; margin: 0; }
.version-sello {
  display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-olive-deep); margin: 0;
}
.version-precio { font-weight: 600; color: var(--color-stamp-deep); margin: 0; }
.version-caso { font-size: 0.92rem; color: var(--color-ink); font-weight: 600; margin: 0.3rem 0 0; }
.version-lista { margin: 0 0 0.6rem; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.93rem; }
.version-lista li { position: relative; padding-left: 1.4rem; line-height: 1.45; }
.version-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--color-stamp); font-weight: 700; }
.version .btn { margin-top: auto; }
.version-nota { font-size: 0.8rem; color: var(--color-olive-soft); margin: 0; }
.version-riesgos li::before { content: "?"; color: var(--color-olive); }
.version-cubre { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--color-stamp-deep); margin: 0 0 0.4rem; }
.upsell .upsell-riesgos li::before { content: "✕"; color: var(--color-rosa); }
.upsell-cierre { margin: 0.6rem 0 0; color: var(--color-bg); }
/* Dentro del Blindado ya se ve cómo protege (la solución), junto al pago. */
.pago-mini { font-size: 0.8rem; color: var(--color-olive-deep); text-align: center; margin: 0 0 0.8rem; }
.blindaje { margin: 0.2rem 0 0.6rem; padding: 0.85rem 0.95rem; border-radius: var(--radius); background: var(--color-rosa-suave); box-shadow: inset 0 0 0 1px var(--color-rosa-linea); }
.blindaje-titulo { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--color-stamp-deep); margin: 0 0 0.45rem; font-size: 0.9rem; }
.blindaje-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.86rem; }
.blindaje-lista li { position: relative; padding-left: 1.3rem; }
.blindaje-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--color-stamp); font-weight: 700; }
.version-blindado {
  border: 2px solid var(--color-stamp);
  background: var(--color-hoja);
  box-shadow: 0 18px 40px -26px rgba(79, 18, 27, 0.5);
}
.version-blindado .version-sello { color: var(--color-olive); background: var(--color-rosa); padding: 0.3rem 0.6rem; border-radius: 999px; }
@media (max-width: 760px) {
  .versiones-grid { grid-template-columns: 1fr; }
}

/* Gancho: franja oscura arriba de la vista previa, solo en el último paso (el pago queda a la
   izquierda, arriba). Oscuro para que se vea entre tanto texto; el caso es una pregunta corta. */
.upsell {
  display: none;
  margin: 0 0 1rem;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius);
  background: var(--color-lacre-profundo);
  color: var(--color-bg);
  gap: 1.2rem 1.4rem;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
  align-items: center;
}
.en-resumen .upsell:not([hidden]) { display: grid; }
.upsell-cuerpo { min-width: 0; }
.upsell-accion { display: grid; gap: 0.45rem; }
@media (max-width: 900px) {
  .upsell { grid-template-columns: 1fr; }
}
.upsell-pregunta { display: flex; gap: 0.5rem; align-items: flex-start; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25; margin: 0 0 0.45rem; }
.upsell-pregunta .icono-escudo { color: var(--color-rosa); margin-top: 0.15rem; }
.upsell-texto { font-size: 0.88rem; color: var(--color-rosa); margin: 0 0 0.55rem; }
.upsell-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.35rem 1.2rem; font-size: 0.9rem; }
.upsell-lista li { position: relative; padding-left: 1.3rem; }
.upsell-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--color-rosa); font-weight: 700; }
.upsell-lista strong { color: var(--color-bg); }
/* Es compra ("$100 más"): cempasúchil, vía .btn-compra en js/wizard.js. */
.upsell-btn { width: 100%; padding-block: 0.85rem; white-space: normal; line-height: 1.25; text-align: center; }
.upsell-nota { font-size: 0.78rem; color: #D9BDB6; text-align: center; margin: 0; }

/* Pago del último paso: arriba, en la columna del formulario, para no tener que bajar. */
.price-reveal.pago-card {
  text-align: left;
  padding: 1.25rem 1.25rem 1rem;
  margin: 0.4rem 0 1.1rem;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-top: 4px solid var(--color-stamp);
  box-shadow: 0 16px 36px -28px rgba(79, 18, 27, 0.45);
}
.pago-cabeza { display: grid; gap: 0.1rem; margin-bottom: 0.7rem; }
.pago-titulo { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-stamp-deep); margin: 0; }
.pago-card .price-reveal-amount { font-size: 2.6rem; line-height: 1.05; margin: 0; }
.pago-iva { font-size: 0.82rem; color: var(--color-olive-deep); margin: 0; }
.pago-beneficios { list-style: none; margin: 0 0 0.9rem; padding: 0.7rem 0 0; border-top: 1px solid var(--color-paper-line); display: grid; gap: 0.35rem; font-size: 0.88rem; }
.pago-beneficios li { position: relative; padding-left: 1.35rem; }
.pago-beneficios li::before { content: "✓"; position: absolute; left: 0; color: var(--color-stamp); font-weight: 700; }
.pago-card .checkout-monto { display: none; } /* el monto ya va grande arriba */
.pago-card .checkout-continuar { padding-block: 0.95rem; font-size: 1.02rem; white-space: normal; line-height: 1.25; }
.pago-card .price-note { margin-bottom: 0.4rem; text-align: center; }
.resumen-nota { font-size: 0.86rem !important; }
.aviso-pasadas {
  display: flex; gap: 0.5rem; align-items: flex-start;
  margin: 0 0 1rem; padding: 0.7rem 0.9rem;
  border-radius: var(--radius); background: var(--color-rosa-suave); box-shadow: inset 0 0 0 1px var(--color-rosa-linea);
  font-size: 0.88rem; color: var(--color-stamp-deep);
}


/* ============================================================
   Sitio en varias páginas (2026-10-03): menú con página actual, páginas interiores,
   precios, Mi cuenta, entrega del documento y páginas legales.
   ============================================================ */
.seal { transform: rotate(-8deg); }
.main-nav a[aria-current="page"], .header-actions a[aria-current="page"] { color: var(--color-olive); font-weight: 600; }
.pagina-interior { min-height: 60vh; }

/* Precios */
.precios-grid { align-items: stretch; }
.plan-card-destacado { background: var(--color-hoja); border-color: var(--color-olive); box-shadow: 0 18px 40px -24px rgba(79, 18, 27, 0.35); }
.plan-card-etiqueta {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-stamp-deep);
  background: var(--color-rosa);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.plan-card-unitario { font-size: 0.9rem; color: var(--color-stamp-deep); font-weight: 600; }
.precios-checkout { max-width: 30rem; margin: 0 auto 2.5rem; }
.precios-incluye, .precios-preguntas { max-width: 46rem; margin-top: 2.6rem; }
.precios-incluye h3, .precios-preguntas h3 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.precios-incluye ul { display: grid; gap: 0.45rem; padding-left: 1.2rem; list-style: disc; color: var(--color-olive-deep); }
.precios-preguntas details { border-top: 1px solid var(--color-paper-line); padding: 0.85rem 0; }
.precios-preguntas details:last-child { border-bottom: 1px solid var(--color-paper-line); }
.precios-preguntas summary { cursor: pointer; font-weight: 600; color: var(--color-ink); }
.precios-preguntas details p { margin-top: 0.5rem; color: var(--color-olive-deep); }

/* Mi cuenta */
#cuenta .account-form { max-width: 28rem; }
.cuenta-resumen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
  padding: 1.6rem;
  background: var(--color-paper);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
}
.cuenta-resumen .hero-actions { margin: 0; }
.cuenta-subtitulo { font-size: 1.3rem; margin: 2.4rem 0 1rem; }
.doc-lista { display: grid; gap: 0.8rem; }
.doc-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
}
.doc-fila-nombre { font-weight: 600; color: var(--color-ink); }
.doc-fila-nota { font-size: 0.85rem; color: var(--color-olive-deep); }
.doc-fila-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Solicitud de factura (js/cuenta.js, facturas.py): el formulario se abre debajo de la compra. */
.compra-fila .factura-form {
  flex-basis: 100%;
  display: grid;
  gap: 0.9rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-paper-line);
}
.compra-fila [hidden], .factura-form [hidden] { display: none; }

/* Entrega del documento (formulario y gracias.html) */
.entrega-titulo { font-size: 1.15rem; margin-bottom: 0.8rem; }
.entrega-descargas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.gracias-entrega { display: grid; justify-items: center; gap: 0.8rem; }
.gracias-entrega .entrega-descargas { justify-content: center; }
.entrega-error { color: #9B3A26; font-weight: 600; }
.entrega-faltan { padding-left: 1.2rem; list-style: disc; font-size: 0.88rem; color: var(--color-olive-deep); }
.aviso-borrador {
  font-size: 0.86rem;
  color: var(--color-olive-deep);
  background: var(--color-rosa-suave);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}
.link-boton { color: var(--color-stamp-deep); text-decoration: underline; text-underline-offset: 2px; font: inherit; }

/* Páginas legales */
.legal-wrap { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.4rem; }
.legal h2 { font-size: 1.3rem; margin: 2.2rem 0 0.7rem; }
.legal p, .legal li { color: var(--color-olive-deep); line-height: 1.7; }
.legal p + p { margin-top: 0.8rem; }
.legal ul { padding-left: 1.2rem; list-style: disc; display: grid; gap: 0.4rem; margin: 0.6rem 0; }
.legal a { color: var(--color-stamp-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal-fecha { font-size: 0.85rem; color: var(--color-olive-soft); margin-bottom: 1.6rem; }
.dato-pendiente { background: #FFF1B8; color: #5C4A00; padding: 0 0.25rem; border-radius: 3px; }

/* ============================================================
   Portada: los 3 más pedidos (gancho, un clic y se empieza) y
   página de Documentos (más pedidos + lista completa). Sin precios:
   el precio se ve al terminar de llenar el documento.
   ============================================================ */
.pagina-inicio .hero { padding-block: clamp(1.75rem, 4.5vh, 4rem); }
.pagina-inicio .hero-actions { margin-bottom: 1.8rem; }
.hero-pedidos { margin-top: clamp(1.6rem, 4vh, 2.8rem); }
.hero-pedidos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.hero-pedidos-head .eyebrow { margin: 0; }
.hero-pedidos-todos { font-size: 0.86rem; color: var(--color-stamp-deep); font-weight: 600; text-decoration: none; }
.hero-pedidos-todos:hover { text-decoration: underline; }
.hero-pedidos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pedido-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.2rem;
  padding: 0.85rem 1.1rem;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pedido-card:hover,
.pedido-card:focus-visible {
  border-color: var(--color-olive);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.pedido-cat {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-stamp-deep);
}
.pedido-nombre { grid-column: 1; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.pedido-pie { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.pedido-ir { font-size: 0.84rem; font-weight: 600; color: var(--color-olive); }
@media (max-width: 760px) {
  .hero-pedidos-grid { grid-template-columns: 1fr; }
}

.pagina-documentos .docs-subtitulo {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-stamp-deep);
  margin: 0 0 1rem;
  scroll-margin-top: 90px;
}
.pagina-documentos .doc-grid + .docs-subtitulo { margin-top: 3.2rem; }
/* Aquí la lista se recorre con el scroll de la página, sin caja con scroll propio. */
.pagina-documentos .catalogo-lista { max-height: none; overflow: visible; }

/* Documentos, más fácil de recorrer (2026-10-16): buscador, atajos por área, los más pedidos en
   carrusel en celular y la lista en tarjetitas (dos columnas en computadora). La descripción se
   corta a dos renglones; el texto completo sigue en la página y en la ficha de cada documento. */
.docs-buscar { max-width: 34rem; margin-bottom: 1rem; }
.docs-buscar[hidden], .docs-vacio[hidden], .pagina-documentos .catalogo-item[hidden], .pagina-documentos .catalogo-categoria[hidden] { display: none; }
.docs-buscar label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--color-olive-deep); }
.docs-buscar-caja { position: relative; }
.docs-buscar-caja svg.ico { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--color-olive); pointer-events: none; }
.docs-buscar-caja input { width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem; font-size: 1rem; color: var(--color-ink);
  background: var(--color-hoja); border: 1.5px solid var(--color-paper-line); border-radius: 999px; }
.docs-buscar-caja input:focus { outline: none; border-color: var(--color-olive); box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.15); }
.docs-areas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.4rem; }
.docs-areas a { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; padding: 0.5rem 0.85rem; border-radius: 999px;
  background: var(--color-hoja); border: 1px solid var(--color-paper-line); font-size: 0.88rem; font-weight: 600; color: var(--color-ink);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease); }
.docs-areas a:hover { border-color: var(--color-olive); background: var(--color-rosa-suave); }
.docs-areas a span { font-weight: 400; color: var(--color-olive-deep); }
.docs-areas svg.ico { width: 1.05rem; height: 1.05rem; color: var(--color-olive); }
.docs-buscando .pedidos-bloque, .docs-buscando .docs-areas { display: none; }
.docs-vacio { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--color-rosa-suave); border: 1px solid var(--color-rosa-linea); }
.docs-vacio a { color: var(--color-olive); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.carrusel-pista { display: none; }
.pagina-documentos .pedidos-bloque + .docs-subtitulo { margin-top: 3.2rem; }

.pagina-documentos .catalogo-lista { gap: 2.6rem; padding: 0; border: 0; background: none; }
.pagina-documentos .catalogo-categoria { scroll-margin-top: 90px; }
.pagina-documentos .catalogo-categoria h3 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0; border: 0;
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em; text-transform: none; color: var(--color-olive); }
.catalogo-cuenta { margin-left: auto; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--color-paper); font-family: var(--font-body);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--color-olive-deep); white-space: nowrap; }
.pagina-documentos .catalogo-items { display: grid; gap: 0.6rem; }
.pagina-documentos .catalogo-items .catalogo-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 0.3rem; padding: 0.95rem 1rem;
  background: var(--color-hoja); border: 1px solid var(--color-paper-line); border-radius: var(--radius); }
.pagina-documentos .catalogo-item-nombre { font-size: 1rem; line-height: 1.3; }
.pagina-documentos .catalogo-item-nota { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.4; color: var(--color-olive-deep); }
.pagina-documentos .catalogo-item-link { grid-row: 1 / span 3; }
.catalogo-item-versiones { grid-column: 1; justify-self: start; margin-top: 0.15rem; padding: 0.18rem 0.6rem; border-radius: 999px; background: var(--color-rosa);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-stamp-deep); }
@media (min-width: 760px) {
  .pagina-documentos .catalogo-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
}
/* En celular los más pedidos se deslizan de lado: uno a la vista y el siguiente asomándose. */
@media (max-width: 759px) {
  .pagina-documentos .pedidos-carrusel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 0.8rem;
    overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.5rem; padding: 0.2rem 1.5rem 0.8rem; scroll-padding-inline: 1.5rem; scrollbar-width: none; }
  .pagina-documentos .pedidos-carrusel::-webkit-scrollbar { display: none; }
  .pagina-documentos .pedidos-carrusel .doc-card { scroll-snap-align: start; }
  .pagina-documentos .pedidos-carrusel .doc-card-foot { flex-wrap: wrap; gap: 0.6rem; }
  .carrusel-pista { display: block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 600; color: var(--color-olive-deep); }
  .docs-areas { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.5rem; padding: 0 1.5rem 0.3rem; scrollbar-width: none; }
  .docs-areas::-webkit-scrollbar { display: none; }
}

/* Acceso sin cuenta: correo → código de 6 dígitos (js/acceso.js). */
.acceso-codigo { display: grid; gap: 0.6rem; }
.acceso-fila { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.acceso-fila[hidden], .acceso-codigo [hidden], .usar-paquete [hidden] { display: none; }
.acceso-caja .form-note { text-align: left; margin-top: 0.9rem; }
.acceso-fila input { flex: 1 1 12rem; min-width: 0; }
.acceso-fila [inputmode="numeric"] { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.acceso-mensaje { font-size: 0.86rem; color: var(--color-olive-deep); }
.usar-paquete { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--color-paper-line); }
.usar-paquete .link-boton { font-size: 0.88rem; text-align: left; }
.usar-paquete #usar-paquete { margin-top: 0.6rem; }

/* ============================================================
   Marca nueva (2026-10-08): portada en lacre profundo y Juri, la mascota.
   ============================================================ */

/* Portada: encabezado en lacre profundo, como la "versión fuerte" de la paleta aprobada.
   <body class="es-portada"> solo en index.html; la J va en su versión clara (img/j_logo_claro.svg). */
.es-portada .site-header {
  background: rgba(79, 18, 27, 0.96);
  border-bottom-color: rgba(235, 211, 205, 0.16);
}
.es-portada .site-header .brand { color: var(--color-bg); }
.es-portada .main-nav a,
.es-portada .header-actions .link-muted { color: var(--color-rosa); }
.es-portada .main-nav a:hover,
.es-portada .header-actions .link-muted:hover { color: var(--color-bg); }
.es-portada .site-header .btn-primary { background: var(--color-bg); color: var(--color-olive); }
.es-portada .site-header .btn-primary:hover { background: var(--color-rosa); }
.es-portada .nav-toggle span { background: var(--color-bg); }
.es-portada a:focus-visible, .es-portada button:focus-visible { outline-color: var(--color-rosa); }
.es-portada .hero-assist a:focus-visible, .es-portada .hero-assist button:focus-visible,
.es-portada .hero-pedidos a:focus-visible { outline-color: var(--color-olive); }
@media (max-width: 1180px) {
  .es-portada .main-nav { background: var(--color-lacre-profundo); border-bottom-color: rgba(235, 211, 205, 0.16); }
  .es-portada .main-nav a { border-top-color: rgba(235, 211, 205, 0.16); }
}

.pagina-inicio .hero .eyebrow { color: var(--color-rosa); }
.pagina-inicio .hero-lead { color: var(--color-rosa); }
.pagina-inicio .hero .btn-ghost { color: var(--color-bg); border-color: rgba(247, 242, 234, 0.55); }
.pagina-inicio .hero .btn-ghost:hover { background: rgba(247, 242, 234, 0.1); border-color: var(--color-bg); }
.pagina-inicio .hero-pedidos-todos { color: var(--color-bg); }
.pagina-inicio .pedido-card { border-color: transparent; }
.pagina-inicio .pedido-card:hover,
.pagina-inicio .pedido-card:focus-visible { border-color: var(--color-rosa); }
.pagina-inicio .pedido-nombre { color: var(--color-olive); }

/* Juri en la portada, junto al título: se balancea pensando (±2° desde los pies, 4 s) y da un
   brinquito cuando el cursor pasa por el botón principal (solo CSS, con :has(); sin JS). Con
   "reducir movimiento" se queda quieto. El brinco va en el contenedor y el balanceo en la imagen
   para que uno no corte al otro. */
.hero-titulo-fila { display: flex; align-items: flex-end; gap: 0.9rem; }
.hero-titulo-fila .hero-title { flex: 1 1 auto; min-width: 0; }
.juri-portada { flex: none; width: clamp(112px, 11vw, 168px); margin: 0 0 1.1rem; }
.juri-avatar, .juri-mini, .juri-aviso-img, .juri-portada picture, .gracias-juri picture { display: block; }
.juri-portada img, .juri-mini img, .juri-aviso-img img, .gracias-juri img, .juri-avatar img {
  display: block;
  width: 100%;
  height: auto;
}
.juri-portada img { transform-origin: 50% 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); }
@media (prefers-reduced-motion: no-preference) {
  .juri-portada img { animation: juri-piensa 4s ease-in-out infinite; }
  .hero-copy:has(.hero-actions .btn-compra:hover, .hero-actions .btn-compra:focus-visible) .juri-portada {
    animation: juri-brinco 0.6s cubic-bezier(0.3, 0.7, 0.4, 1);
  }
}
@keyframes juri-piensa {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes juri-brinco {
  0% { transform: translateY(0); }
  35% { transform: translateY(-18px); }
  60% { transform: translateY(0); }
  78% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
/* En celular la portada se apila: Juri más chico y arriba del título, sin estorbar. */
@media (max-width: 960px) {
  .hero-titulo-fila { flex-direction: column-reverse; align-items: stretch; gap: 0.4rem; }
  .juri-portada { width: 78px; margin: 0; }
}
/* En celular el encabezado (J + nombre + botón + menú) no cabía en 390 px: todo un poco más chico. */
@media (max-width: 480px) {
  .header-row { gap: 0.75rem; }
  .header-actions { gap: 0.75rem; }
  .brand { font-size: 1.3rem; }
  .brand-j { height: 1.55rem; margin-right: 0.4rem; }
  .header-actions .btn-sm { padding-inline: 0.8rem; }
  .back-link-j { display: none; } /* el encabezado de crear.html ya va apretado en celular */
}

/* Juri como la carita de los asistentes de IA (recomendador y dudas). */
.juri-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-rosa);
}
.juri-avatar-sm { width: 30px; height: 30px; box-shadow: 0 0 0 1.5px var(--color-rosa); }
.juri-nombre {
  margin: 0 0 0.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-olive-soft);
}
.juri-nombre strong { color: var(--color-olive); letter-spacing: 0.04em; }
/* Recomendador dentro de crear.html (sin ?doc=) */
.juri-firma { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.9rem; }
.juri-firma p { margin: 0; font-size: 0.9rem; color: var(--color-olive-deep); }
/* Chat de dudas de la ficha: encabezado con Juri y su carita junto a cada respuesta. */
.ficha-dudas-cabeza { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.ficha-dudas-cabeza h2 { margin: 0; }
.ficha-dudas-cabeza .juri-avatar { width: 56px; height: 56px; }
.antecedentes-msg-asistente { display: flex; align-items: flex-start; gap: 0.55rem; }
.antecedentes-msg-asistente .antecedentes-msg-bubble { background: var(--color-hoja); }

/* Formulario paso a paso: un Juri chiquito junto a la barra de avance. */
.wizard-capture-cabeza { display: flex; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.9rem; }
.wizard-capture-cabeza .progress-bar-wrap { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.juri-mini { flex: none; width: 38px; margin-bottom: -2px; }
.juri-mini img { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .juri-mini img { animation: juri-piensa 5s ease-in-out infinite; }
}

/* Momento de elegir versión (último paso del Esencial): Juri "señala" el Blindado. Hoy usa la
   pose pensando (img/juri-senala.*, copia de juri.*); para la pose de Juri preocupado señalando
   basta reemplazar esos dos archivos con el mismo nombre. */
.juri-aviso {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: end;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
}
.juri-aviso-img img { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); }
.juri-aviso-globo {
  position: relative;
  margin: 0 0 1.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 0.82rem;
  line-height: 1.4;
}
.juri-aviso-globo strong { color: var(--color-olive); }
/* Colita del globo, hacia Juri. */
.juri-aviso-globo::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 14px;
  border-width: 7px 8px 7px 0;
  border-style: solid;
  border-color: transparent var(--color-bg) transparent transparent;
}
@media (max-width: 900px) {
  .juri-aviso { grid-template-columns: 64px minmax(0, 1fr); max-width: 34rem; }
}

/* gracias.html: Juri (img/juri-celebra.*: hoy la pose pensando; para la pose celebrando basta
   reemplazar esos dos archivos) con la palomita de pago confirmado, y el confeti de js/confeti.js. */
.gracias-juri { position: relative; width: 132px; margin: -0.4rem auto 0.2rem; }
.gracias-juri img { transform-origin: 50% 100%; }
.gracias-juri .gracias-icono {
  position: absolute;
  right: -10px;
  bottom: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-hoja);
  color: var(--color-olive);
}
@media (prefers-reduced-motion: no-preference) {
  .gracias-juri img { animation: juri-salta 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s both; }
}
@keyframes juri-salta {
  0% { transform: translateY(14px) scale(0.92); opacity: 0; }
  55% { transform: translateY(-12px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.confeti-lienzo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* La J en el enlace de regreso de crear.html */
.back-link-j { height: 1.15rem; width: auto; }

/* ============================================================
   Fotos de las INE (js/ine_fotos.js, 2026-10-09) — en el formulario (paso de la hoja de
   identificaciones), en gracias.html y en Mis documentos. Los recuadros de subir van en lacre con
   borde punteado (como el recuadro de la hoja del contrato), NUNCA en cempasúchil: ese color es
   solo para comprar.
   ============================================================ */
.ine-fotos-campo { grid-column: 1 / -1; }
.ine-fotos-campo[hidden], .ine-error[hidden], .ine-descarga-nota[hidden] { display: none; }
.ine-fotos {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  background: var(--color-hoja);
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  text-align: left;
}
.ine-fotos-titulo { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--color-olive); }
.ine-opcional { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--color-olive-soft); }
.ine-fotos-intro { margin: 0; font-size: 0.92rem; color: var(--color-olive-deep); }
.ine-partes { display: grid; gap: 1rem; }
.ine-parte { display: grid; gap: 0.5rem; }
.ine-parte + .ine-parte { padding-top: 0.9rem; border-top: 1px solid var(--color-paper-line); }
.ine-parte-rol { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--color-ink); }
.ine-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; max-width: 30rem; } /* en escritorio no crecen de más */
.ine-lado { min-width: 0; }
.ine-subir {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%; /* con aspect-ratio, el ancho manda: si no, el min-height lo ensancha fuera de su columna */
  aspect-ratio: 85.6 / 54; /* una credencial */
  min-height: 6rem;
  padding: 0.6rem;
  border: 1.5px dashed var(--color-olive);
  border-radius: var(--radius);
  background: var(--color-rosa-suave);
  color: var(--color-olive);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.ine-subir:hover { background: var(--color-rosa); }
.ine-subir:focus-within { outline: 3px solid color-mix(in srgb, var(--color-olive) 35%, transparent); outline-offset: 2px; }
.ine-subir-texto { font-size: 0.95rem; font-weight: 700; }
.ine-subir-ayuda { font-size: 0.78rem; line-height: 1.3; color: var(--color-olive-deep); }
.ine-subir.is-procesando { cursor: progress; opacity: 0.75; }
.ine-mini { display: grid; gap: 0.3rem; margin: 0; }
.ine-mini img {
  display: block;
  width: 100%;
  aspect-ratio: 85.6 / 54;
  object-fit: contain; /* se ve la foto completa, como irá en la hoja */
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius);
  background: var(--color-paper);
}
.ine-mini figcaption { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.82rem; color: var(--color-olive-deep); }
.ine-mini figcaption span::before { content: "✓ "; font-weight: 700; color: var(--color-olive); }
.ine-quitar {
  min-height: 2.2rem;
  padding: 0.3rem 0.2rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-olive);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ine-error { margin: 0; font-size: 0.86rem; font-weight: 600; color: #9B3A26; }
.ine-privacidad {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  background: var(--color-rosa-suave);
  font-size: 0.82rem;
  color: var(--color-olive-deep);
}
.ine-privacidad svg { flex: none; margin-top: 0.15rem; color: var(--color-olive); }
.ine-cargando { margin: 0; font-size: 0.88rem; color: var(--color-olive-soft); }
.ine-descarga-nota { margin: 0; font-size: 0.85rem; color: var(--color-olive-deep); }
.ine-descarga-nota.is-error { font-weight: 600; color: #9B3A26; }
.gracias-ine { justify-self: stretch; width: 100%; }
.doc-fila .ine-descarga-nota, .doc-fila-ine { flex-basis: 100%; }
@media (max-width: 380px) {
  .ine-fotos { padding: 0.85rem; }
  .ine-lados { gap: 0.5rem; }
  .ine-subir-ayuda { font-size: 0.72rem; }
}
.ine-panel-descarga { display: flex; justify-content: flex-end; margin-top: 0.7rem; }

/* ============================================================
   Orientación legal gratis (orientacion.html)
   ============================================================ */
.orientacion-form { margin-top: 2rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.orientacion-form[hidden], .orientacion-listo[hidden] { display: none; }
/* Trampa para robots: fuera de la vista, no con display:none (algunos robots se lo saltan). */
.orientacion-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.orientacion-acepto { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; color: var(--color-ink); line-height: 1.45; }
.orientacion-acepto input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--color-olive); }
.orientacion-acepto a { color: var(--color-olive); font-weight: 600; }
.orientacion-error { margin: 0; color: var(--color-stamp-deep); font-size: 0.92rem; font-weight: 600; }
.orientacion-error[hidden] { display: none; }
.orientacion-form .btn { align-self: flex-start; }
.orientacion-listo { margin-top: 2rem; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.orientacion-listo h2 { font-size: 1.6rem; }
@media (max-width: 640px) {
  .orientacion-form .field-grid { grid-template-columns: minmax(0, 1fr); }
  .orientacion-form .btn { align-self: stretch; }
}
.orientacion-portada { padding-top: 0; }
.orientacion-portada-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
  background: var(--color-paper); border: 1px solid var(--color-paper-line); border-radius: var(--radius); padding: 2rem; }
.orientacion-portada-caja > div { flex: 1 1 26rem; min-width: 0; }
.orientacion-portada-caja h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0.2rem 0 0.5rem; }
/* El .hero-lead de la portada es rosa para el fondo vino; en estas cajas claras va en tinta suavizada. */
.orientacion-portada-caja .hero-lead { color: var(--color-olive-deep); }

/* ============================================================
   Páginas propias de cada documento (contratos/*.html, gen_paginas_documentos.py)
   ============================================================ */
.doc-pagina .section-head { max-width: 760px; }
.doc-pagina .section-head .btn { margin-top: 1.2rem; }
.doc-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem 3rem; margin-top: 2.5rem; }
.doc-pagina h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 0.9rem; }
.doc-bloque { margin-top: 3rem; max-width: 900px; }
.docp-lista { margin: 0; padding-left: 1.2rem; list-style: disc; display: grid; gap: 0.55rem; color: var(--color-ink); line-height: 1.5; }
.docp-riesgos li::marker { color: var(--color-olive); }
.doc-precios-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.doc-precio { background: var(--color-paper); border: 1px solid var(--color-paper-line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.doc-precio p { margin: 0; }
.doc-precio-nombre { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-olive-deep); font-weight: 600; }
.doc-precio-monto { font-family: var(--font-display); font-size: 2rem; color: var(--color-olive); margin: 0.2rem 0 0.4rem !important; font-variant-numeric: tabular-nums; }
.doc-precios .form-note { text-align: left; margin-top: 0.8rem; }
.doc-relacionados { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.doc-relacionados a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; border-radius: 999px; background: var(--color-hoja);
  border: 1px solid var(--color-paper-line); color: var(--color-olive); font-weight: 600; transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease); }
.doc-relacionados a::after { content: "→"; }
.doc-relacionados a:hover { border-color: var(--color-olive); background: var(--color-rosa-suave); }

/* Páginas de contratos con el kit visual (2026-10-16): mismo texto, en piezas que se leen de un vistazo. */
.docp-chips { margin-top: 1.1rem; }
.doc-pagina .palomitas { margin: 0; }
.doc-pagina .palomitas li { font-size: 1rem; }
.docp-riesgos-caja { padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--radius); background: var(--color-rosa-suave); border: 1px solid var(--color-rosa-linea); }
.docp-riesgos { display: grid; gap: 0.65rem; }
.docp-riesgos li { display: flex; gap: 0.65rem; align-items: flex-start; font-weight: 600; line-height: 1.4; color: var(--color-ink); }
.docp-riesgos svg.ico { margin-top: 0.05rem; color: var(--color-olive); }
.docp-incluye { display: grid; column-gap: 1.6rem; padding: 0.3rem 1.1rem; background: var(--color-hoja); border: 1px solid var(--color-paper-line); border-radius: var(--radius); }
.docp-incluye li { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.75rem 0; line-height: 1.4; color: var(--color-ink); border-bottom: 1px dashed var(--color-paper-line); }
.docp-incluye li:last-child { border-bottom: 0; }
.docp-incluye svg.ico { color: var(--color-olive); }
.doc-pagina .sello-paso h3 { color: var(--color-olive); }
@media (min-width: 760px) { .docp-incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } .docp-incluye li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
@media (max-width: 640px) {
  .doc-pagina.section { padding-block: 2.4rem 3.2rem; }
  .doc-pagina .doc-bloque { margin-top: 2.4rem; }
  .doc-pagina .section-head .btn-compra { width: 100%; }
}
.docp-nota { margin: 1rem 0 0; padding: 0.8rem 1rem; border-left: 3px solid var(--color-olive); background: var(--color-paper); color: var(--color-ink); font-size: 0.95rem; max-width: 760px; }

/* ============================================================
   Kit visual (2026-10-16): piezas para que una página se lea de un vistazo, sin muros de texto.
   Íconos dentro de un sello rosa, palomitas, chips, mosaicos, pasos con sello de lacre, notas
   y acordeones. Lo usan investigacion.html, documentos.html y contratos/*.html.
   ============================================================ */
svg.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-sello { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--color-rosa-suave); color: var(--color-olive); box-shadow: inset 0 0 0 1px var(--color-rosa-linea); }
.ico-sello svg.ico { width: 1.35rem; height: 1.35rem; }

.section.bloque { padding-block: 3.6rem; }
.bloque-titulo { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1.5rem; }
@media (max-width: 640px) { .section.bloque { padding-block: 2.6rem; } }

/* Palomitas: lo esencial en dos o tres renglones, con la palabra clave en negritas. */
.palomitas { display: grid; gap: 0.75rem; margin: 0 0 1.8rem; }
.palomitas li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1.05rem; line-height: 1.45; color: var(--color-ink); }
.palomitas svg.ico { width: 1.55rem; height: 1.55rem; padding: 0.28rem; border-radius: 50%; background: var(--color-olive); color: var(--color-on-olive); stroke-width: 2.6; }
.palomitas b { color: var(--color-olive); font-weight: 700; }

/* Chips: datos cortos de confianza (solo cosas que el sitio ya promete). */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.8rem; border-radius: 999px; background: var(--color-hoja);
  border: 1px solid var(--color-paper-line); font-size: 0.84rem; font-weight: 600; color: var(--color-olive-deep); line-height: 1.2; }
.chips svg.ico { width: 1rem; height: 1rem; color: var(--color-olive); }

/* Mosaicos: situaciones con su ícono, dos por fila en celular y tres en computadora. */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tile { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; padding: 1rem; background: var(--color-hoja); border: 1px solid var(--color-paper-line);
  border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--color-ink); }
.tile small { display: block; margin-top: 0.3rem; font-weight: 400; font-size: 0.84rem; color: var(--color-olive-deep); }
@media (min-width: 760px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .tile { flex-direction: row; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem; }
}

/* Pasos con sello de lacre: el número va en un sello girado, unido al siguiente por una línea
   punteada (vertical en celular, horizontal en computadora). Solo para cosas que sí son una secuencia. */
.sellos { display: grid; gap: 1.5rem; }
.sello-paso { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; align-content: start; }
.sello-paso:not(:last-child)::before { content: ""; position: absolute; left: 1.3rem; top: 3rem; bottom: -1.3rem; width: 2px;
  background: repeating-linear-gradient(var(--color-rosa-linea) 0 6px, transparent 6px 11px); }
.sello-num { display: inline-grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--color-olive);
  color: var(--color-on-olive); font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; transform: rotate(-8deg);
  box-shadow: inset 0 0 0 3px var(--color-olive), inset 0 0 0 4.5px rgba(247, 242, 234, 0.35), 0 6px 12px -6px rgba(79, 18, 27, 0.5); }
.sello-paso h3 { font-size: 1.15rem; line-height: 1.25; margin: 0.4rem 0 0.25rem; }
.sello-paso p { color: var(--color-olive-deep); font-size: 0.96rem; }
@media (min-width: 760px) {
  .sellos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .sello-paso { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .sello-paso:not(:last-child)::before { left: 3.4rem; right: -1.4rem; top: 1.35rem; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-rosa-linea) 0 6px, transparent 6px 11px); }
}

/* Nota: una sola idea importante, con su ícono. .nota-fuerte es la promesa que no debe perderse. */
.nota-sello { display: flex; gap: 0.7rem; align-items: flex-start; max-width: 760px; margin-top: 1.4rem; padding: 0.9rem 1rem;
  border-radius: var(--radius); background: var(--color-rosa-suave); border: 1px solid var(--color-rosa-linea); color: var(--color-ink); font-size: 0.95rem; line-height: 1.45; }
.nota-sello svg.ico { color: var(--color-olive); margin-top: 0.05rem; }
.nota-fuerte { background: var(--color-hoja); border-color: var(--color-olive); border-left-width: 4px; font-weight: 700; font-size: 1.02rem; }

/* Acordeón: la letra fina y las preguntas, cerradas hasta que se piden. */
.acordeon { display: grid; gap: 0.5rem; }
.acordeon details { background: var(--color-hoja); border: 1px solid var(--color-paper-line); border-radius: var(--radius); }
.acordeon summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; font-weight: 600; color: var(--color-ink); line-height: 1.35; border-radius: var(--radius); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--color-rosa-suave); color: var(--color-olive); font-size: 1.15rem; font-weight: 700; line-height: 1; }
.acordeon details[open] summary::after { content: "−"; }
.acordeon summary:hover { color: var(--color-olive); }
.acordeon summary:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 2px; }
.acordeon details > :not(summary) { padding: 0 1rem 1rem; color: var(--color-olive-deep); line-height: 1.55; }
.acordeon details > :not(summary) + :not(summary) { padding-top: 0; margin-top: -0.4rem; }

/* ============================================================
   Búsqueda de juicios (investigacion.html, rehecha 2026-10-16: menos texto corrido)
   ============================================================ */
.opcional { font-weight: 400; color: var(--color-olive-deep); text-transform: none; letter-spacing: 0; }
.section.inv-hero { padding-block: 3rem 3.4rem; }
/* El encabezado es fijo: al saltar a #pedir (botón de arriba) el título no queda debajo de él. */
.pagina-busqueda .section[id] { scroll-margin-top: 4rem; }
.inv-hero-grid { display: grid; gap: 2.4rem; align-items: center; }
.inv-hero-texto { min-width: 0; }
.inv-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; max-width: 17ch; margin-bottom: 1.2rem; }
.inv-lead { font-size: var(--fs-lead); color: var(--color-olive-deep); margin-bottom: 0.9rem; }
.inv-hero-btn { margin-bottom: 1.3rem; }
@media (min-width: 900px) { .inv-hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 3rem; } }
@media (max-width: 640px) {
  .section.inv-hero { padding-block: 2.2rem 2.6rem; }
  .inv-hero-btn { width: 100%; }
  .inv-hero .am-telefono { width: min(14rem, 100%); }
}

.servicios { display: grid; gap: 1rem; }
.servicio { display: grid; gap: 1rem; align-content: start; min-width: 0; padding: 1.3rem; background: var(--color-hoja);
  border: 1px solid var(--color-paper-line); border-radius: var(--radius); }
.servicio-cab { display: flex; align-items: center; gap: 0.9rem; }
.servicio-cab h3 { font-size: 1.5rem; line-height: 1.1; }
.servicio-cuando { font-size: var(--fs-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--color-olive-deep); margin-bottom: 0.2rem; }
.servicio-puntos { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px dashed var(--color-paper-line); }
.servicio-puntos li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.98rem; line-height: 1.45; color: var(--color-ink); }
.servicio-puntos svg.ico { color: var(--color-olive); margin-top: 0.1rem; }
@media (min-width: 760px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } }

.pedir-grid { display: grid; gap: 2rem; }
.pedir-saber, .pedir-forma { min-width: 0; }
.pedir-cab { display: flex; align-items: flex-end; gap: 0.9rem; margin-bottom: 1.6rem; }
.pedir-cab .bloque-titulo { margin: 0; }
.pedir-juri { display: block; flex: none; width: 4.4rem; transform: rotate(-4deg); }
.pedir-juri img { display: block; width: 100%; height: auto; }
.saber-titulo { font-size: 1.15rem; margin-bottom: 0.8rem; }
.inv-form.orientacion-form, .pedir-forma .orientacion-listo { margin: 0; max-width: none; }
.form-grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-grupo + .form-grupo { margin-top: 0.6rem; }
.form-grupo legend { display: flex; align-items: center; gap: 0.6rem; padding: 0; margin-bottom: 1rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--color-olive); }
.sello-num.sello-mini { width: 1.85rem; height: 1.85rem; font-size: 0.95rem; }
@media (min-width: 960px) {
  .pedir-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
  .pedir-juri { width: 5.6rem; }
}
@media (max-width: 640px) { .orientacion-form.account-form { padding: 1.3rem; } }

/* Orientación legal (orientacion.html, 2026-10-16): mismas piezas que la búsqueda de juicios. */
.section.orient-hero { padding-block: 3rem 3rem; }
.orient-hero .section-head { margin-bottom: 0; max-width: 40rem; }
.orient-hero .palomitas { margin-bottom: 1.4rem; }
.orient-cab, #caso .orientacion-form, #caso .orientacion-listo { max-width: 760px; margin-left: auto; margin-right: auto; }
#caso .orientacion-form, #caso .orientacion-listo { margin-top: 0; }
@media (max-width: 640px) { .section.orient-hero { padding-block: 2.2rem 2.4rem; } }

/* Muestra animada del aviso (datos ficticios). Bucle en js/investigacion.js; quieta con «reducir movimiento». */
.aviso-muestra { display: grid; justify-items: center; gap: 0.7rem; min-width: 0; }
.am-telefono { width: min(15.5rem, 100%); aspect-ratio: 9 / 18; border-radius: 2.2rem; background: #1E1A1C; padding: 0.5rem; box-sizing: border-box; box-shadow: 0 20px 40px -24px rgba(79, 18, 27, .6); }
.am-pantalla { position: relative; height: 100%; border-radius: 1.8rem; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(120% 80% at 30% 10%, #9C3442 0%, #7A1F2B 45%, #4F121B 100%); }
.am-isla { position: absolute; top: 0.45rem; left: 50%; width: 30%; height: 1.1rem; border-radius: 0.6rem; background: #000; transform: translateX(-50%); z-index: 3; }
.am-bloqueo { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; padding-top: 2.6rem; color: #FFFDF9; transition: opacity .5s ease; }
.am-fecha { font-size: 0.72rem; font-weight: 600; }
.am-hora { font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.am-noti { position: absolute; left: 0.45rem; right: 0.45rem; top: 8.4rem; display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.5rem;
  padding: 0.6rem 0.65rem; border-radius: 0.95rem; background: rgba(255, 253, 249, .95); color: #1E1A1C; font-size: 0.7rem; line-height: 1.3;
  transform: translateY(-14rem); opacity: 0; transition: transform .7s cubic-bezier(.2, 1.3, .4, 1), opacity .3s ease; }
.am-noti b { display: block; font-size: 0.76rem; }
.am-noti p { margin: 0.1rem 0 0; color: #1E1A1C; }
.am-icono { width: 1.8rem; height: 1.8rem; border-radius: 0.5rem; background: #FFFDF9; border: 1px solid #E4D9CC; display: grid; place-items: center; }
.am-cab { display: flex; justify-content: space-between; font-size: 0.6rem; color: #6B5F61; text-transform: uppercase; letter-spacing: .04em; }
.am-toque { position: absolute; width: 2.4rem; height: 2.4rem; border-radius: 50%; left: 55%; top: 9.6rem; background: rgba(255, 253, 249, .55); border: 2px solid #FFFDF9; opacity: 0; pointer-events: none; }
.am-detalle { position: absolute; inset: 0; background: #FFFDF9; color: #1E1A1C; padding: 2.2rem 0.85rem 0.8rem; display: grid; align-content: start; gap: 0.45rem;
  transform: translateY(100%); transition: transform .55s cubic-bezier(.3, .9, .3, 1); }
.am-etiqueta { justify-self: start; font: 800 0.55rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #FFFDF9; background: #7A1F2B; padding: 0.3rem 0.5rem; border-radius: 999px; }
.am-titulo { margin: 0; font: 700 1rem/1.15 var(--font-display); color: #1E1A1C; }
.am-nombre { justify-self: start; font: 700 1rem/1.2 var(--font-display); color: #7A1F2B; box-shadow: inset 0 -0.35rem 0 rgba(244, 168, 29, .55); }
.am-datos { margin: 0; display: grid; border-top: 1px solid #E4D9CC; font-size: 0.66rem; }
.am-datos div { display: grid; grid-template-columns: 4.3rem 1fr; gap: 0.4rem; padding: 0.35rem 0; border-bottom: 1px solid #E4D9CC; }
.am-datos dt { color: #6B5F61; }
.am-datos dd { margin: 0; font-weight: 600; }
.am-pie { margin: 0; font-size: 0.62rem; color: #6B5F61; line-height: 1.35; }
.am-ejemplo { font-size: 0.8rem; font-weight: 700; color: var(--color-olive-deep); border: 1.5px dashed var(--color-paper-line); padding: 0.35rem 0.75rem; border-radius: 999px; }
.am-llega .am-noti, .am-toque-on .am-noti { transform: none; opacity: 1; }
.am-toque-on .am-toque { animation: am-toque .6s ease-out forwards; }
.am-abierto .am-bloqueo { opacity: 0; }
.am-abierto .am-detalle { transform: none; }
@keyframes am-toque { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .am-noti, .am-detalle, .am-bloqueo { transition: none; } .am-toque { display: none; } }