/* ══════════════════════════════════════════════════════════════════════════════
   CATÁLOGO DE AMENIDADES — las hojas
   ─────────────────────────────────────────────────────────────────────────────
   El catálogo es un documento de la casa, igual que la ficha del predio y la
   cotización: hoja A4, el árbol de la marca con sus tres reglas en el margen
   izquierdo, el logotipo centrado arriba y el contacto al pie. Las cotas del
   membrete son las de assets/css/documento.css (medidas sobre el papel
   membretado del arquitecto), y la paleta es la de pdf-marca.js. Si el
   cliente pone la ficha, la cotización y el catálogo sobre la mesa, tienen que
   leerse como tres piezas de la misma empresa.

   Lo que el catálogo añade sobre esos dos es la fotografía: una portada a
   sangre y un mosaico por conexión.

   Tres maneras de verlo:
   · escritorio   las hojas a su tamaño real (210 × 297 mm), una bajo otra;
                  si el panel es más angosto, catalog.js las escala con zoom
                  para que quepan sin cambiar su maqueta.
   · celular      ≤ 600 px: la hoja deja de ser A4 y se vuelve una columna
                  fluida — a escala, el texto de un A4 no se lee en un teléfono.
   · impresión    cada hoja cae exactamente en su página (catalog.js inyecta
                  @page A4 sin márgenes al descargar).

   Stara solo en versales —es la regla de la marca—; Manrope para lo demás.
   ══════════════════════════════════════════════════════════════════════════ */

/* El fondo del visor: el de un documento sobre la mesa, no el de la página. */
.catalog-body { background: #1b2224; }
html[data-theme="light"] .catalog-body { background: #e4e0d4; }

.ct-hojas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 28px 24px 44px;
}

/* ── La hoja ── */
.ct-hoja {
  position: relative;
  flex: none;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 38 mm a la izquierda contra 16 a la derecha: el margen del membrete. */
  padding: 0 16mm 0 38mm;
  background: #fff;
  color: #23282a;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .ct-hoja { box-shadow: 0 16px 44px rgba(14, 34, 37, 0.18); }

/* Reset con el peso de UNA clase: le gana al p { margin-bottom } de
   Bootstrap y empata con .ct-kicker, .ct-titulo y compañía, que van después
   en este archivo y por eso mandan. Con más peso les borraba los márgenes. */
.ct-hoja :where(*) { box-sizing: border-box; }
.ct-hoja :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }

/* ── Marca de agua (calcada de documento.css) ── */
.ct-agua { position: absolute; left: 0; top: 0; bottom: 0; width: 38mm; z-index: 0; }
.ct-membrete { position: absolute; left: 16.02mm; top: 7.4mm; width: 21.4mm; height: auto; }
.ct-regla { position: absolute; top: 36.6mm; bottom: 0; width: 0.34mm; background: #d6d4c0; }
.ct-regla--1 { left: 16.17mm; }
.ct-regla--2 { left: 17.78mm; }
.ct-regla--3 { left: 19.30mm; }

.ct-cab, .ct-cuerpo, .ct-pie { position: relative; z-index: 1; }

/* ── Membrete ── */
.ct-cab { flex: none; padding: 13mm 0 0; text-align: center; }
.ct-cab-logo { height: 19mm; width: auto; display: inline-block; }
.ct-cab-regla {
  margin: 7mm 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ece7d8 12%, #ece7d8 88%, transparent);
}

/* Mismo recorte de seguridad que la ficha: si algo crece de más, se corta
   —y se ve— en vez de montarse sobre el pie. */
.ct-cuerpo {
  flex: 1;
  padding: 7mm 0 0;
  min-height: 0;
  overflow: hidden;
  /* En columna: la foto marcada para crecer (.ct-mosaico, .ct-relleno,
     .ct-foto--banda) se queda con el alto que sobre, así ninguna hoja queda
     con un hueco al pie aunque traiga menos amenidades que otra. */
  display: flex;
  flex-direction: column;
}

/* ── Pie ── */
.ct-pie { flex: none; padding: 0 0 12mm; text-align: center; }
.ct-pie-regla {
  margin-bottom: 4mm;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ece7d8 12%, #ece7d8 88%, transparent);
}
.ct-pie-linea {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c7570;
}
.ct-pie-linea i { font-style: normal; color: #a9a390; margin: 0 2.5mm; }
.ct-pie-sub { margin-top: 1.6mm; font-size: 8px; letter-spacing: 0.06em; color: #a9a390; }
/* El folio va a la altura de la línea de contacto, contra el margen derecho. */
.ct-folio {
  position: absolute;
  right: 0;
  bottom: 12mm;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #a9a390;
}
.ct-folio i { font-style: normal; margin: 0 0.8mm; color: #d6d4c0; }

/* ── Vocabulario común ── */
.ct-kicker {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7a6830;
  margin-bottom: 3mm;
}
.ct-h2 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.08;
  text-transform: uppercase;
  color: #23282a;
  margin-bottom: 4.5mm;
}
.ct-h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.12;
  text-transform: uppercase;
  color: #23282a;
  margin-bottom: 3mm;
}
.ct-p { font-size: 11px; line-height: 1.65; color: #6c7570; max-width: 132mm; }

/* Rótulo de sección: versales espaciadas con su regla debajo. */
.ct-titulo {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a9a390;
  padding-bottom: 2mm;
  margin: 7mm 0 3mm;
  border-bottom: 1px solid #ece7d8;
}

/* Caja clara para cifras que acompañan; la oscura, para la que manda. */
.ct-caja {
  background: #faf8f2;
  border: 1px solid #ece7d8;
  border-radius: 3mm;
  padding: 4mm 4.5mm;
}
.ct-caja-l {
  display: block;
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  color: #a9a390;
  margin-bottom: 2.5mm;
  min-height: 7mm;
}
.ct-caja-v { display: block; font-size: 26px; font-weight: 300; line-height: 1; color: #1a1a1a; }
.ct-caja-v small { font-size: 12px; color: #9b9481; margin-left: 0.8mm; }
.ct-oscuro { background: #071316; border-color: #071316; color: #c8c07e; }
.ct-oscuro .ct-caja-l { color: rgba(200, 192, 126, 0.7); }
.ct-oscuro .ct-caja-v { color: #c8c07e; }

.ct-sello {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2.2mm 4mm;
  border-radius: 20px;
  background: #c8c07e;
  color: #071316;
}

.ct-foto { position: relative; margin: 0; border-radius: 3mm; overflow: hidden; background: #ece7d8; }
.ct-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-relleno { flex: 1 1 auto; min-height: 40mm; margin-top: 6mm; }

/* ══ 01 · Portada ══════════════════════════════════════════════════════ */
.ct-hoja--portada { background: #071316; color: #ded7ba; }
.ct-portada-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Arriba se oscurece lo justo para el logotipo; abajo, lo necesario para
   que el título se lea sobre la selva sin cajas. */
.ct-portada-velo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 19, 22, 0.62) 0%,
      rgba(7, 19, 22, 0.08) 24%,
      rgba(7, 19, 22, 0.10) 46%,
      rgba(7, 19, 22, 0.78) 70%,
      #071316 94%);
}
.ct-hoja--portada .ct-agua { z-index: 1; }
.ct-hoja--portada .ct-cab { z-index: 2; }
.ct-portada-texto { position: relative; z-index: 2; margin-top: auto; padding-bottom: 9mm; }
.ct-portada-kicker {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(200, 192, 126, 0.9);
}
.ct-portada-titulo {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ded7ba;
  margin: 5mm 0 5mm;
}
.ct-portada-lema { font-size: 12.5px; line-height: 1.6; color: rgba(240, 234, 210, 0.74); }
.ct-portada-conexiones {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 10mm;
  padding-top: 5mm;
  border-top: 1px solid rgba(200, 192, 126, 0.32);
}
.ct-portada-conexiones li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4mm;
  text-align: center;
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ded7ba;
}
.ct-portada-conexiones li + li { border-left: 1px solid rgba(200, 192, 126, 0.2); }
.ct-portada-conexiones .jt-ico { width: 8mm; height: 8mm; color: #c8c07e; stroke-width: 1.1; }
.ct-pie--luz { z-index: 2; }
.ct-pie--luz .ct-pie-linea { color: rgba(222, 215, 186, 0.62); }
.ct-pie--luz .ct-pie-linea i { color: rgba(200, 192, 126, 0.55); }

/* ══ 02 · El proyecto y las cinco conexiones ═══════════════════════════ */
.ct-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
  margin-top: 7mm;
}

/* El cuadro de la presentación: tinta con los iconos, banda arena con los
   nombres y, debajo, lo más representativo de cada conexión. Sin separación
   entre columnas para que las dos bandas corran enteras de lado a lado. */
.ct-cuadro {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 3mm;
  overflow: hidden;
  border: 1px solid #ece7d8;
  /* Las mismas tres bandas pintadas en el fondo: con cinco columnas de ancho
     fraccionario, entre una y otra puede quedar un hilo de subpíxel, y así
     ese hilo sale del color de su banda en vez de una raya blanca. */
  background: linear-gradient(180deg, #071316 0 25mm, #d6d4c0 25mm 34mm, #faf8f2 34mm);
}
.ct-cuadro-col { display: flex; flex-direction: column; min-width: 0; }
.ct-cuadro-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25mm;
  background: #071316;
  color: #d6d4c0;
}
.ct-cuadro-ico .jt-ico { width: 11mm; height: 11mm; stroke-width: 1; }
.ct-cuadro-nombre {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9mm;
  background: #d6d4c0;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #071316;
}
.ct-cuadro-lista {
  flex: 1;
  list-style: none;
  background: #faf8f2;
  padding: 4.5mm 3mm 5mm 3.5mm;
}
.ct-cuadro-col + .ct-cuadro-col .ct-cuadro-lista { border-left: 1px solid #ece7d8; }
.ct-cuadro-lista li {
  position: relative;
  padding-left: 3mm;
  font-size: 9.5px;
  line-height: 1.35;
  color: #23282a;
}
.ct-cuadro-lista li + li { margin-top: 2mm; }
.ct-cuadro-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 1.2mm;
  height: 1.2mm;
  border-radius: 50%;
  background: #c8c07e;
}

/* ══ 03…07 · Una hoja por conexión ═════════════════════════════════════ */
/* El bloque oscuro que preside la ficha del predio y la cotización. */
.ct-ident {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6mm;
  background: #071316;
  color: #c8c07e;
  border-radius: 3mm;
  padding: 6mm 7mm;
}
.ct-ident-k {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 192, 126, 0.7);
}
.ct-ident-k i { font-style: normal; margin: 0 1mm; opacity: 0.55; }
.ct-ident-t {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: #ded7ba;
  margin: 3.2mm 0 2.6mm;
}
.ct-ident-lema { font-size: 11px; color: rgba(240, 234, 210, 0.58); }
.ct-ident-meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4mm;
}
.ct-ident-ico { color: #c8c07e; line-height: 0; }
.ct-ident-ico .jt-ico { width: 13mm; height: 13mm; stroke-width: 1; }
.ct-ident-desc {
  font-size: 11px;
  line-height: 1.65;
  color: #6c7570;
  margin: 5mm 0 5mm;
  max-width: 140mm;
}

/* Una vertical a la izquierda y dos horizontales apiladas: cada conexión
   trae una de cada, así el mosaico sale igual en las cinco hojas. */
.ct-mosaico {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5mm;
  flex: 1 1 auto;
  min-height: 94mm;
}
.ct-foto--alta { grid-row: span 2; }

.ct-lista {
  list-style: none;
  columns: 2;
  column-gap: 7mm;
}
.ct-lista li {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  padding: 1.9mm 0;
  border-bottom: 1px dotted #e2ddcc;
  font-size: 10.5px;
  line-height: 1.3;
  color: #23282a;
  break-inside: avoid;
}
.ct-lista--larga li { padding: 1.6mm 0; }
.ct-num {
  flex: none;
  min-width: 5mm;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #7a6830;
}

/* ══ 08 · Ubicación, inversión y contacto ══════════════════════════════ */
.ct-foto--banda { flex: 1 1 auto; min-height: 58mm; }
.ct-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
  margin-top: 5mm;
}
.ct-caja--texto { padding: 5mm 5mm 4mm; }
.ct-caja--texto .ct-p { font-size: 10px; line-height: 1.6; margin-bottom: 3mm; }
.ct-datos { list-style: none; }
.ct-datos li {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  padding: 1.5mm 0;
  border-top: 1px dotted #e2ddcc;
  font-size: 10px;
  color: #23282a;
}
.ct-datos i { flex: none; width: 3.5mm; text-align: center; font-size: 9px; color: #7a6830; }

.ct-cta {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 7mm;
  margin-top: 5mm;
  border-radius: 3mm;
  padding: 7mm;
}
.ct-cta-t {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.12;
  text-transform: uppercase;
  color: #ded7ba;
  margin-bottom: 3mm;
}
.ct-cta-p { font-size: 10.5px; line-height: 1.6; color: rgba(240, 234, 210, 0.6); }
.ct-cta-contactos { list-style: none; }
.ct-cta-contactos li + li { border-top: 1px solid rgba(200, 192, 126, 0.16); }
.ct-cta-contactos a {
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 2mm 0;
  font-size: 10.5px;
  color: #ded7ba;
  text-decoration: none;
}
.ct-cta-contactos a:hover { color: #fff; }
.ct-cta-contactos i { flex: none; width: 4mm; text-align: center; color: #c8c07e; }
.ct-legal { margin-top: 4mm; font-size: 8px; color: #b0aa9a; text-align: center; }

/* ══ Celular: la hoja se vuelve una columna fluida ═════════════════════ */
@media screen and (max-width: 600px) {
  .ct-hojas { padding: 12px 10px 28px; gap: 14px; }
  .ct-hoja {
    width: 100%;
    height: auto;
    padding: 0 18px;
    border-radius: 10px;
  }
  .ct-agua, .ct-folio { display: none; }
  .ct-cab { padding-top: 22px; }
  .ct-cab-logo { height: 54px; }
  .ct-cab-regla { margin-top: 18px; }
  .ct-cuerpo { padding-top: 20px; overflow: visible; }
  .ct-pie { padding: 26px 0 22px; }

  .ct-hoja--portada { min-height: 150vw; }
  .ct-portada-texto { padding-bottom: 20px; }
  .ct-portada-titulo { font-size: 34px; margin: 14px 0; }
  .ct-portada-lema { font-size: 13px; }
  .ct-portada-conexiones { margin-top: 26px; padding-top: 16px; }
  .ct-portada-conexiones li { font-size: 6.5px; letter-spacing: 0.08em; gap: 8px; }
  .ct-portada-conexiones .jt-ico { width: 26px; height: 26px; }

  .ct-h2 { font-size: 22px; }
  .ct-p, .ct-ident-desc { font-size: 13px; }
  .ct-cifras { gap: 8px; margin-top: 20px; }
  .ct-caja { padding: 12px; border-radius: 10px; }
  .ct-caja-v { font-size: 22px; }

  /* El cuadro pasa de cinco columnas a cinco filas: icono a la izquierda,
     nombre y lista a la derecha. */
  .ct-cuadro { grid-template-columns: 1fr; border-radius: 10px; }
  .ct-cuadro-col {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto 1fr;
  }
  .ct-cuadro-col + .ct-cuadro-col { border-top: 1px solid #ece7d8; }
  .ct-cuadro-ico { grid-row: span 2; height: auto; }
  .ct-cuadro-ico .jt-ico { width: 32px; height: 32px; }
  .ct-cuadro-nombre { justify-content: flex-start; height: auto; padding: 8px 14px; }
  .ct-cuadro-col + .ct-cuadro-col .ct-cuadro-lista { border-left: 0; }
  .ct-cuadro-lista { padding: 10px 14px 12px; }
  .ct-cuadro-lista li { font-size: 12px; }

  .ct-ident { padding: 18px; border-radius: 10px; }
  .ct-ident-t { font-size: 26px; }
  .ct-ident-ico .jt-ico { width: 38px; height: 38px; }
  .ct-mosaico { flex: none; min-height: 0; height: 78vw; gap: 6px; }
  .ct-relleno { flex: none; height: 56vw; margin-top: 16px; }
  .ct-cuadro { background: #faf8f2; }
  .ct-foto { border-radius: 8px; }
  .ct-lista { columns: 1; }
  .ct-lista li { font-size: 13px; padding: 8px 0; }
  .ct-num { font-size: 9px; }

  .ct-foto--banda { flex: none; min-height: 0; height: 48vw; }
  .ct-duo, .ct-cta { grid-template-columns: 1fr; }
  .ct-duo { gap: 10px; }
  .ct-caja--texto .ct-p, .ct-datos li { font-size: 12.5px; }
  .ct-h3 { font-size: 18px; }
  .ct-cta { padding: 20px; gap: 16px; border-radius: 10px; }
  .ct-cta-contactos a { font-size: 13px; padding: 8px 0; }
}

/* ══ Impresión / Descargar PDF ═════════════════════════════════════════ */
@media print {
  body.is-catalog-open { overflow: visible !important; }
  /* Fuera todo menos el catálogo. El sprite de iconos (#jt-iconos) se queda:
     los <use> de las hojas dibujan desde él. */
  body.is-catalog-open > *:not(#catalogModal):not(#jt-iconos) { display: none !important; }

  body.is-catalog-open #catalogModal {
    display: block !important;
    position: static !important;
    padding: 0 !important;
  }
  body.is-catalog-open .catalog-modal-overlay,
  body.is-catalog-open .catalog-hdr { display: none !important; }
  body.is-catalog-open .catalog-modal-panel {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    background: none !important;
  }
  body.is-catalog-open .catalog-body {
    overflow: visible !important;
    height: auto !important;
    background: none !important;
  }
  /* El zoom del visor (catalog.js) no aplica al papel. */
  body.is-catalog-open .ct-hojas { display: block !important; zoom: 1 !important; padding: 0 !important; }
  body.is-catalog-open .ct-hoja {
    box-shadow: none !important;
    border-radius: 0 !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }
  body.is-catalog-open .ct-hoja:last-child { break-after: auto; page-break-after: auto; }
}