/*
 * Documento de cotización Foro.
 * Réplica del diseño "Foro - Landing Page - Diseño + Programación" (Illustrator, carta 612 × 792 pt).
 * Todas las medidas están en puntos del documento original: calc(var(--pt) * N).
 * --pt escala con el ancho de la hoja (container query), así que en pantalla se adapta
 * y al imprimir (8.5in) 1 --pt = 1pt exacto.
 */

@font-face {
  font-family: "Aktiv Grotesk";
  src: url("/assets/fonts/aktiv-grotesk-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Aktiv Grotesk";
  src: url("/assets/fonts/aktiv-grotesk-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* Las descripciones del Alcance usan Univers 55 Roman en el original. */
@font-face {
  font-family: "Foro Univers";
  src: local("Univers LT Std 55 Roman"), local("UniversLTStd"), local("Univers 55 Roman"), local("Univers");
  font-weight: 400;
}

.hoja {
  --pt: calc(100cqw / 612);
  --negro: #000;
  --blanco: #fff;
  --gris: #777776;
  --tinta-50: rgba(0, 0, 0, 0.5);

  position: relative;
  width: 816px;
  aspect-ratio: 612 / 792;
  container-type: inline-size;
  overflow: hidden;
  background: var(--blanco);
  color: var(--negro);
  font-family: "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.hoja *,
.hoja *::before,
.hoja *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:where(.hoja) :where(h1, h2, h3, p) {
  font-size: inherit;
  font-weight: inherit;
}

.hoja--negra {
  --tinta-50: rgba(255, 255, 255, 0.5);
  background: var(--negro);
  color: var(--blanco);
}

/* ---------- Encabezado ---------- */

.hoja__marca {
  position: absolute;
  left: calc(var(--pt) * 30);
  top: calc(var(--pt) * 23.1);
  font-size: calc(var(--pt) * 32);
  line-height: calc(var(--pt) * 38.4);
  white-space: nowrap;
}

.hoja__ojo {
  position: absolute;
  left: calc(var(--pt) * 541.69);
  top: calc(var(--pt) * 31.02);
  width: calc(var(--pt) * 40.31);
  height: calc(var(--pt) * 20.39);
  display: block;
}

/* ---------- Pie ---------- */

.hoja__direccion,
.hoja__fecha {
  position: absolute;
  top: calc(var(--pt) * 739.65);
  font-size: calc(var(--pt) * 9);
  line-height: calc(var(--pt) * 12);
  white-space: pre;
}

.hoja__direccion { left: calc(var(--pt) * 30); }
.hoja__fecha { left: calc(var(--pt) * 256.79); }

.hoja__web {
  position: absolute;
  right: calc(var(--pt) * 30);
  top: calc(var(--pt) * 735.74);
  font-size: calc(var(--pt) * 26);
  line-height: calc(var(--pt) * 31.2);
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

/* ---------- Etiqueta de sección (columna izquierda) ---------- */

.hoja__etiqueta {
  position: absolute;
  left: calc(var(--pt) * 30);
  top: calc(var(--pt) * 169.11);
  width: calc(var(--pt) * 105);
  font-size: calc(var(--pt) * 12.2078);
  line-height: calc(var(--pt) * 14.1915);
  color: var(--tinta-50);
}

/* ---------- Portada ---------- */

.portada__attn {
  position: absolute;
  left: calc(var(--pt) * 30);
  top: calc(var(--pt) * 240.09);
  width: calc(var(--pt) * 104);
  font-size: calc(var(--pt) * 12.2078);
  line-height: calc(var(--pt) * 14.1915);
  overflow-wrap: break-word;
}

.portada__attn-etiqueta,
.portada__empresa { color: var(--tinta-50); }

.portada__intro {
  position: absolute;
  left: calc(var(--pt) * 256.79);
  top: calc(var(--pt) * 239.9);
  width: calc(var(--pt) * 275.24);
  font-size: calc(var(--pt) * 12.2078);
  line-height: calc(var(--pt) * 14.1915);
  color: var(--tinta-50);
  white-space: pre-line;
}

/* Título vertical: se lee de abajo hacia arriba; la primera línea queda a la izquierda. */
.portada__titulo {
  --titulo: 32;
  position: absolute;
  /* Primera línea base en x = 138.86 + ascendente (0.857em), igual que en Illustrator. */
  left: calc(var(--pt) * (138.86 + 0.06925 * var(--titulo)));
  top: calc(var(--pt) * 641.7);
  width: calc(var(--pt) * 540);
  transform-origin: 0 0;
  transform: rotate(-90deg);
  font-size: calc(var(--pt) * var(--titulo));
  line-height: calc(var(--pt) * var(--titulo) * 0.8875);
  text-transform: uppercase;
  white-space: pre-line;
}

/* ---------- Contenido (páginas blancas) ---------- */

.hoja__cuerpo {
  position: absolute;
  left: calc(var(--pt) * 143.4);
  width: calc(var(--pt) * 438.6);
}

.texto-grande {
  font-size: calc(var(--pt) * 27);
  line-height: calc(var(--pt) * 28.5);
  margin-left: calc(var(--pt) * -1.75);
}

/* Alcance */

.alcance {
  top: calc(var(--pt) * 158.24);
  display: grid;
  grid-template-columns: repeat(2, calc(var(--pt) * 211.8));
  column-gap: calc(var(--pt) * 14.99);
  row-gap: calc(var(--pt) * 41.65);
  grid-auto-rows: minmax(calc(var(--pt) * 86.05), auto);
  align-items: start;
}

/* La primera fila (tipo de proyecto) va más separada, como en el original. */
.alcance__item:nth-child(-n + 2) { margin-bottom: calc(var(--pt) * 17.65); }

.alcance__titulo {
  font-size: calc(var(--pt) * 23);
  line-height: calc(var(--pt) * 28.5);
  margin-left: calc(var(--pt) * -1.8);
  overflow-wrap: break-word;
}

.alcance__descripcion {
  margin-top: calc(var(--pt) * 14.35);
  font-family: "Foro Univers", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--pt) * 9);
  line-height: calc(var(--pt) * 10.8);
  letter-spacing: -0.011em;
  color: var(--gris);
  white-space: pre-line;
}

/* Presupuesto */

.presupuesto { top: calc(var(--pt) * 156.86); }

.presupuesto__titulo { white-space: pre-line; }

.presupuesto__etapa {
  display: grid;
  grid-template-columns: calc(var(--pt) * 226.79) 1fr;
  margin-top: calc(var(--pt) * 28.5);
}

.presupuesto > :first-child { margin-top: 0; }

.presupuesto__conceptos { overflow-wrap: break-word; padding-right: calc(var(--pt) * 8); }

.presupuesto__duracion {
  margin-top: calc(var(--pt) * -1.94);
  font-size: calc(var(--pt) * 12.2078);
  line-height: calc(var(--pt) * 14.1915);
  color: var(--tinta-50);
  white-space: pre-line;
}

.presupuesto__cierre { padding-top: calc(var(--pt) * 21.87); }

.presupuesto__linea {
  width: calc(var(--pt) * 324.86);
  height: calc(var(--pt) * 1);
  background: var(--gris);
}

.presupuesto__total {
  display: grid;
  grid-template-columns: calc(var(--pt) * 113.39) 1fr;
  margin-top: calc(var(--pt) * 18.5);
}

.presupuesto__total > .texto-grande:first-child { margin-left: calc(var(--pt) * -1.7); }

.presupuesto__cifra-linea {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.presupuesto__cifra { margin-left: calc(var(--pt) * -0.1); }

.presupuesto__moneda,
.presupuesto__nota {
  font-size: calc(var(--pt) * 12.2078);
  line-height: calc(var(--pt) * 14.1915);
  color: var(--tinta-50);
}

.presupuesto__moneda { margin-left: calc(var(--pt) * 8.1); }

.presupuesto__nota {
  margin-top: calc(var(--pt) * -2.06);
  margin-left: calc(var(--pt) * -0.3);
}

/* Cláusulas */

.clausulas__titulo {
  top: calc(var(--pt) * 157.5);
  margin-left: 0;
  white-space: pre-line;
}

.clausulas {
  top: calc(var(--pt) * 254.26);
  /* Columnas de 211.5 pt (el original mide ~213; se deja holgura para cortar líneas como Illustrator). */
  width: calc(var(--pt) * 438.29);
  column-count: 2;
  column-gap: calc(var(--pt) * 15.29);
  column-fill: balance;
  font-size: calc(var(--pt) * 12.2078);
  line-height: calc(var(--pt) * 14.1915);
  color: var(--tinta-50);
}

.clausulas--continuacion { top: calc(var(--pt) * 169.11); }

.clausulas__parrafo {
  padding-bottom: calc(var(--pt) * 14.1915);
  break-inside: avoid;
  white-space: pre-line;
}

/* Cierre */

.hoja__ojo--centro {
  left: calc(var(--pt) * 285.84);
  top: calc(var(--pt) * 385.8);
}

/* ---------- Impresión ---------- */

@page {
  size: letter;
  margin: 0;
}

@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }

  .no-imprimir { display: none !important; }

  .hojas { display: block !important; padding: 0 !important; gap: 0 !important; }

  .hoja {
    width: 8.5in !important;
    height: 11in !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    break-after: page;
    page-break-after: always;
  }

  .hoja:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}