@font-face {
  font-family: "Compacta Std";
  src: url("assets/Compacta-Std.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Gobold High"; src: url("assets/Gobold-High.otf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Gobold High"; src: url("assets/Gobold-High-Thin.otf") format("truetype"); font-weight: 300; }
@font-face { font-family: "Gobold High"; src: url("assets/Gobold-High-Bold.otf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Eurostile LT"; src: url("assets/Eurostile-Regular.otf") format("opentype"); font-weight: 400; }
@font-face { font-family: "Eurostile LT"; src: url("assets/Eurostile-Demi.otf") format("opentype"); font-weight: 600; }
@font-face { font-family: "Eurostile LT"; src: url("assets/Eurostile-Bold.otf") format("opentype"); font-weight: 700; }
@font-face { font-family: "Eurostile Extended"; src: url("assets/Eurostile-Extended.otf") format("opentype"); font-weight: 400; }
@font-face { font-family: "Eurostile Extended"; src: url("assets/Eurostile-BoldExtended.otf") format("opentype"); font-weight: 700; }
@font-face { font-family: "Helvetica Neue LT Std"; src: url("assets/HelveticaNeueLTStd-Bold.otf") format("opentype"); font-weight: 700; }

.page h2 { font-family: "Compacta Std", Impact, sans-serif; font-size: 160px; line-height: .9; }
.page h3 { font-family: "Gobold High", Impact, sans-serif; font-size: 76px; line-height: .92; font-weight: 300; }
.cover h2 { font-size: 180px; }
.cover h3 { font-size: 90px; }
.page p { font-family: "Roboto", Arial, sans-serif; }
.cover-copy p { font-family: "Eurostile Extended", Arial, sans-serif; }
.cover-copy p strong { font-family: "Eurostile Extended", Arial, sans-serif; font-weight: 700; }
.about h3, .thanks h3 { font-family: "Gobold High", Impact, sans-serif; font-weight: 300; }
.about h3 span { font-weight: 700; }
.feature-grid h4, .scope, .thanks p { font-family: "Roboto", Arial, sans-serif; font-weight: 700; }
.check-title { font-family: "Eurostile LT", Arial, sans-serif; font-weight: 600; }
.price h5 { font-family: "Eurostile LT", Arial, sans-serif; font-weight: 400; }
.price h5 span { font-family: "Eurostile LT", Arial, sans-serif; font-weight: 600; }
.price h5 b { font-family: "Eurostile LT", Arial, sans-serif; font-weight: 400; }
.price h5 b strong { font-family: "Eurostile LT", Arial, sans-serif; font-weight: 700; }
.conditions h4 { font-family: "Eurostile LT", Arial, sans-serif; font-weight: 400; }
.conditions h3 { font-family: "Gobold High", Impact, sans-serif; font-weight: 300; }
.thanks p, .thanks footer { font-family: "Helvetica Neue LT Std", Arial, sans-serif; font-weight: 700; }

/* Posiciones fijas tomadas de la maqueta original para evitar saltos por texto variable. */
.proposal .feature-grid {
  position: absolute;
  top: 838px;
  left: 52px;
  right: 50px;
  margin: 0;
  row-gap: 34px;
  column-gap: 29px;
}
.proposal > .lead {
  position: absolute;
  top: 455px;
  left: 49px;
  right: 49px;
  margin: 0;
}
.proposal > p:not(.lead) {
  position: absolute;
  top: 630px;
  left: 49px;
  right: 49px;
  margin: 0;
}
.proposal .feature-grid > div { position: relative; min-height: 82px; }
.proposal .feature-grid > div::before {
  content: "";
  position: absolute;
  top: 39px;
  left: 0;
  width: 16px;
  height: 16px;
  border: 0;
  background: url("assets/check-original-small.png") center / contain no-repeat;
}
.proposal .feature-grid > div::after { content: none; }
.proposal .feature-grid > div h4 { font-size: 21.33px; line-height: 1.2; margin-bottom: 13px; }
.proposal .feature-grid > div p {
  padding-left: 29px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13.33px !important;
  font-weight: 300;
  line-height: 1.6;
}
.proposal .feature-grid[data-density="compact"] {
  top: 838px;
  row-gap: 20px;
  column-gap: 29px;
}
.proposal .feature-grid[data-density="compact"] > div { min-height: 68px; }
.proposal .feature-grid[data-density="compact"] h4 { font-size: 19px; line-height: 1.2; margin-bottom: 8px; }
.proposal .feature-grid[data-density="compact"] p { padding-left: 29px; font-size: 12px !important; line-height: 1.45; }
.proposal .feature-grid[data-density="compact"] > div::before { top: 31px; }
.proposal .feature-grid[data-density="dense"] {
  top: 815px;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 9px;
  column-gap: 22px;
}
.proposal .feature-grid[data-density="dense"] > div { min-height: 48px; }
.proposal .feature-grid[data-density="dense"] h4 { font-size: 14px; margin-bottom: 3px; }
.proposal .feature-grid[data-density="dense"] p { padding-left: 0; font-size: 9px !important; line-height: 1.3; }
.budget .include-block {
  position: absolute;
  top: 460px;
  left: 49px;
  right: 49px;
}
.budget .include-block .check-title { margin: 0 0 18px; padding-left: 39px; }
.budget .included {
  position: absolute;
  top: 164px;
  left: 0;
  right: 0;
  margin: 0;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(20px, auto);
  column-gap: 30px;
  row-gap: 20px;
}
.budget .included-item { min-height: 20px; padding-left: 22px; }
.budget .included-item::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 0;
  background: url("assets/check-original-small.png") center / contain no-repeat;
}
.budget .included-item::after { content: none; }
.budget .included-item h6 {
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.25;
}
.budget .included-item p:empty { display: none; }
.budget .included[data-density="compact"] { gap: 8px 22px; }
.budget .included[data-density="compact"] .included-item { min-height: 36px; }
.budget .included[data-density="compact"] h6 { font-size: 12px; margin-bottom: 2px; }
.budget .included[data-density="compact"] p { font-size: 9px; line-height: 1.3; }
.budget .included[data-density="dense"] {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 15px;
  margin-top: 15px;
}
.budget .included[data-density="dense"] .included-item { min-height: 32px; padding-left: 18px; }
.budget .included[data-density="dense"] h6 { font-size: 10px; margin-bottom: 1px; }
.budget .included[data-density="dense"] p { font-size: 8px; line-height: 1.2; }
.budget .payment-block {
  position: absolute;
  top: 845px;
  left: 49px;
  right: 49px;
}
.budget .payment-block .check-title { margin: 0 0 18px; padding-left: 39px; }
.budget .check-title { position: relative; }
.budget .check-title::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("assets/check-original-large.png") center / contain no-repeat;
}
.budget .check-title::after { content: none; }
.budget .payment-block .price {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
}
.budget .payment-block .price:nth-of-type(1) { top: 52px; }
.budget .payment-block .price:nth-of-type(2) { top: 143px; }
.budget .payment-block .price h5 {
  margin: 0;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0;
}
.budget .payment-block .price p {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35;
}
.conditions section {
  position: absolute;
  left: 58px;
  right: 49px;
  margin: 0;
  padding-left: 52px;
}
.conditions section::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: url("assets/check-original-large.png") center / contain no-repeat;
}
.conditions section::after { content: none; }
.conditions section:nth-of-type(1) { top: 500px; }
.conditions section:nth-of-type(2) { top: 610px; }
.conditions section:nth-of-type(3) { top: 820px; }
.conditions section h4 {
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0;
}
.conditions section p {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.95;
}
.conditions section p strong { font-weight: 700; }

.about > .lead {
  position: absolute;
  top: 455px;
  left: 49px;
  right: 49px;
  margin: 0;
}
.about > p:not(.lead) {
  position: absolute;
  top: 625px;
  left: 49px;
  right: 49px;
  margin: 0;
}
.about > h4 {
  position: absolute;
  top: 789px;
  left: 50px;
  margin: 0;
  font-family: "Eurostile LT", Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Geometría tipográfica medida directamente sobre el PDF A4 original. */
.page > h2,
.cover .cover-copy > h2 {
  position: absolute;
  top: 141px;
  left: 47px;
  width: 128%;
  margin: 0;
  font-size: 181px;
  line-height: .9;
  white-space: nowrap;
  transform: scaleX(.78);
  transform-origin: left top;
}
.page > h3,
.cover .cover-copy > h3 {
  position: absolute;
  top: 312px;
  left: 43px;
  right: 54px;
  margin: 0;
  font-size: 73px;
  line-height: .92;
  white-space: nowrap;
}
.cover .cover-copy { position: static; }
.cover .cover-copy > h2 { font-size: 181px; }
.cover .cover-copy > h3 { font-size: 91px; }
.cover .cover-copy > p {
  position: absolute;
  top: 452px;
  left: 50px;
  margin: 0;
}
.thanks > div > h2 {
  position: absolute;
  top: 309px;
  left: 47px;
  width: 128%;
  margin: 0;
  font-size: 181px;
  line-height: .9;
  white-space: nowrap;
  transform: scaleX(.78);
  transform-origin: left top;
}
.thanks > div > h3 {
  position: absolute;
  top: 480px;
  left: 47px;
  right: 40px;
  margin: 0;
  font-size: 73px;
  line-height: .92;
  white-space: nowrap;
}
.thanks > div > p {
  position: absolute;
  top: 638px;
  left: 49px;
  right: 49px;
  margin: 0;
  font-size: 20px;
}
.page > p:not(.lead) { font-size: 16px; }

.list-item {
  position: relative;
  margin: 9px 0;
  padding: 8px 38px 8px 9px;
  border: 1px solid #ddd7d1;
  border-radius: 9px;
  background: #fff;
}
.list-item label { margin: 3px 0; }
.list-item input, .list-item textarea { margin-top: 3px; }
.remove-item {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: #f3ded9;
  color: #aa2a16;
  font-weight: 800;
  cursor: pointer;
}
.add-item {
  width: 100%;
  padding: 9px;
  border: 1px dashed var(--orange);
  border-radius: 7px;
  background: #fff4f1;
  color: #c9371e;
  font-weight: 800;
  cursor: pointer;
}
.client-logos {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin-top: 15px;
}
.included-item { position: relative; padding-left: 27px; }
.included-item::before { content: "✓"; position: absolute; left: 0; color: var(--orange); }
.included-item h6 { margin: 0 0 4px; font-size: 14px; }
.included-item p { font-size: 11px; line-height: 1.45; }
.editor .brand {
  margin: -28px -26px 30px;
  padding: 25px 27px 27px;
  background: #242526;
  border-bottom: 4px solid var(--orange);
}
.editor .brand img {
  display: block;
  width: 185px;
  height: auto;
}

/* Recursos gráficos extraídos del PDF original de InDesign. */
.page {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.page.cover { background-image: url("assets/fondo-1.png"); }
.page.about {
  background-image: url("assets/fondo-2.png");
  background-size: 100% 100%;
  background-color: #242526;
}
.page.proposal { background-image: url("assets/fondo-3.png?v=2"); }
.page.budget { background-image: url("assets/fondo-4.png?v=2"); }
.page.conditions { background-image: url("assets/fondo-5.png?v=2"); }
.page.thanks { background-image: url("assets/fondo-6.png?v=2"); }
.page .logo, .page .rule, .page .mountains, .client-logos, .thanks footer { visibility: hidden; }
.feature-grid h4::before { content: none; }

@keyframes previewFocusPulse {
  0%, 100% { filter: none; text-shadow: none; }
  20%, 70% { filter: drop-shadow(0 0 8px rgba(255, 75, 43, .75)); text-shadow: 0 0 1px rgba(255, 255, 255, .8); }
}
.preview-focus {
  animation: previewFocusPulse 1.8s ease both;
  border-radius: 4px;
}
.document.exporting {
  width: 794px !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.document.exporting .page {
  width: 794px !important;
  height: 1123px !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.add-item:disabled {
  cursor: default;
  opacity: .55;
  border-style: solid;
}

/* El A4 conserva 794 px de layout aunque se vea escalado. Sin recortar ese
   ancho, el navegador permite scroll lateral y deja toda la UI desplazada. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 760px) {
  .workspace { overflow: hidden; }
  .document {
    margin-left: calc(50% - 397px);
    margin-right: 0;
    transform: scale(.42);
    transform-origin: top center;
    margin-bottom: -3980px;
  }
}