/* HK BLUE GREEN · calculadora
   Vive aparte de hkbg.css para no cargar 20 KB en las otras 19 páginas.
   Usa los mismos tokens; no redefine ninguno. */

/* ══════════════ armazón ══════════════ */
.calc{
  display:grid; gap:clamp(24px,3vw,52px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1000px){
  .calc{ grid-template-columns:minmax(0,1fr) 400px; }
  .calc__out{ position:sticky; top:96px; }
}

.paso{ border-top:1px solid var(--line); padding:36px 0 4px; }
.paso:first-child{ border-top:0; padding-top:0; }
.paso__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
}
.paso__h{
  font-family:var(--display); font-size:clamp(26px,3.4vw,38px); line-height:1.1;
  margin:0 0 8px; color:var(--text-primary); font-weight:400;
}
.paso__d{ color:var(--text-secondary); margin:0 0 24px; max-width:56ch; line-height:1.6; }

/* ══════════════ pestañas del paso 1 ══════════════ */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.tabs__b{
  flex:1 1 auto; min-height:48px; padding:11px 16px;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--body); font-size:14px; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.tabs__b:hover{ color:var(--text-primary); border-color:var(--line-strong); }
.tabs__b.is-on{ color:var(--canvas); background:var(--accent); border-color:var(--accent); font-weight:500; }
.tabs__p[hidden]{ display:none; }

/* interruptor pequeño: por planta o total del edificio */
.mini{ display:inline-flex; gap:4px; margin-bottom:16px; }
.mini__b{
  min-height:44px; padding:10px 16px; cursor:pointer;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--body); font-size:13px;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.mini__b:hover{ color:var(--text-primary); border-color:var(--line-strong); }
.mini__b.is-on{ color:var(--canvas); background:var(--accent); border-color:var(--accent); font-weight:500; }
.mini__b:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ══════════════ campos ══════════════ */
.rows{ display:grid; gap:18px; }
@media (min-width:620px){ .rows--2{ grid-template-columns:1fr 1fr; } }

.row > label,
.row > .row__t{
  display:block; font-size:13px; color:var(--text-secondary);
  margin-bottom:7px; letter-spacing:.01em;
}
.row input[type=number],
.row input[type=text],
.row select{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--canvas-2); color:var(--text-primary);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--body); font-size:16px;
  transition:border-color .3s var(--ease);
}
.row input:focus-visible, .row select:focus-visible,
.tabs__b:focus-visible, .prog__b:focus-visible, .mon__b:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.row input:hover, .row select:hover{ border-color:var(--line-strong); }
.row select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-secondary) 50%),
                   linear-gradient(135deg,var(--text-secondary) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px, calc(100% - 14px) 22px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.row__pie{ font-size:12px; color:var(--text-secondary); margin:6px 0 0; opacity:.8; }

.row input[type=range]{
  width:100%; height:34px; accent-color:var(--accent); background:transparent; cursor:pointer;
}

/* casillas y radios */
.opt{
  display:flex; gap:12px; align-items:flex-start;
  min-height:48px; padding:12px 14px; cursor:pointer;
  border:1px solid var(--line); border-radius:2px; background:var(--canvas-2);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.opt:hover{ border-color:var(--line-strong); }
.opt input{ accent-color:var(--accent); width:18px; height:18px; margin-top:2px; flex:none; }
.opt b{ display:block; color:var(--text-primary); font-weight:500; font-size:15px; }
.opt span{ display:block; color:var(--text-secondary); font-size:12.5px; line-height:1.5; margin-top:3px; }
.opt:has(input:checked){ border-color:var(--accent); background:var(--accent-muted); }
.opts{ display:grid; gap:9px; }

/* ══════════════ programa de ambientes ══════════════ */
.prog__g{ margin-bottom:20px; }
.prog__g h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px; font-weight:500;
}
.prog__f{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.prog__f[hidden]{ display:none; }
.prog__n{ font-size:14.5px; color:var(--text-primary); }
.prog__n b{ font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); font-weight:400; margin-left:6px; }
.prog__c{ display:flex; align-items:center; gap:2px; flex:none; }
.prog__b{
  width:44px; height:44px; flex:none;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--line); border-radius:2px;
  font-size:18px; line-height:1; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.prog__b:hover{ color:var(--accent); border-color:var(--accent); }
.prog__v{
  min-width:34px; text-align:center; font-family:var(--mono); font-size:15px;
  color:var(--text-primary);
}
.prog__tot{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line-strong);
}
.prog__tot div{ font-size:12.5px; color:var(--text-secondary); }
.prog__tot b{ display:block; font-family:var(--mono); font-size:19px; color:var(--text-primary); margin-top:3px; }

/* ══════════════ mapa ══════════════ */
.mp{
  position:relative; height:clamp(340px,52vh,520px);
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  background:var(--canvas-2); cursor:crosshair; touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.mp.is-pt{ cursor:grabbing; }
.mp__tiles{ position:absolute; inset:0; }
.mp__t{
  position:absolute; top:0; left:0; width:256px; height:256px;
  will-change:transform; pointer-events:none;
}
.mp__t--no{ visibility:hidden; }
.mp__svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mp__poly{ fill:rgba(63,190,139,.22); stroke:var(--accent); stroke-width:2; stroke-linejoin:round; }
.mp__poly:not(.is-on){ fill:none; }
.mp__pt{
  fill:var(--canvas); stroke:var(--accent); stroke-width:2.5;
  pointer-events:auto; cursor:grab;
}
.mp__pt:hover{ fill:var(--accent); }

.mp__buscar{ position:absolute; top:10px; left:10px; right:64px; z-index:3; display:flex; gap:6px; }
.mp__q{
  flex:1 1 auto; min-width:0; min-height:44px; padding:10px 13px;
  background:rgba(14,26,28,.92); color:var(--text-primary);
  border:1px solid var(--line-strong); border-radius:2px;
  font-family:var(--body); font-size:14px; backdrop-filter:blur(6px);
}
.mp__q::placeholder{ color:var(--text-secondary); }
.mp__geo{
  width:44px; height:44px; flex:none; cursor:pointer;
  background:rgba(14,26,28,.92); color:var(--text-secondary);
  border:1px solid var(--line-strong); border-radius:2px;
  display:grid; place-items:center; backdrop-filter:blur(6px);
}
.mp__geo:hover{ color:var(--accent); }
.mp__geo svg{ width:19px; height:19px; }
.mp__res{
  position:absolute; top:50px; left:0; right:50px; margin:0; padding:0; list-style:none;
  background:rgba(14,26,28,.97); border:1px solid var(--line-strong); border-radius:2px;
  max-height:190px; overflow:auto; backdrop-filter:blur(8px);
}
.mp__res li{
  padding:11px 13px; font-size:13px; color:var(--text-secondary);
  cursor:pointer; border-bottom:1px solid var(--line);
}
.mp__res li:last-child{ border-bottom:0; }
.mp__res li:hover{ background:var(--accent-muted); color:var(--text-primary); }

.mp__zoom{ position:absolute; top:10px; right:10px; z-index:3; display:grid; gap:4px; }
.mp__z{
  width:44px; height:44px; cursor:pointer;
  background:rgba(14,26,28,.92); color:var(--text-primary);
  border:1px solid var(--line-strong); border-radius:2px;
  font-size:19px; line-height:1; backdrop-filter:blur(6px);
}
.mp__z:hover{ color:var(--accent); border-color:var(--accent); }

.mp__hint{
  position:absolute; left:10px; bottom:56px; right:10px; z-index:3; margin:0;
  padding:9px 13px; font-family:var(--mono); font-size:12px; color:var(--text-primary);
  background:rgba(14,26,28,.92); border:1px solid var(--line-strong); border-radius:2px;
  backdrop-filter:blur(6px);
}
.mp__acciones{ position:absolute; left:10px; bottom:10px; z-index:3; display:flex; gap:6px; }
.mp__b{
  min-height:44px; padding:9px 15px; cursor:pointer;
  background:rgba(14,26,28,.92); color:var(--text-secondary);
  border:1px solid var(--line-strong); border-radius:2px;
  font-family:var(--body); font-size:13px; backdrop-filter:blur(6px);
}
.mp__b:hover{ color:var(--accent); border-color:var(--accent); }
.mp__cred{
  margin:8px 0 0; font-size:10.5px; line-height:1.5;
  color:var(--text-secondary); opacity:.72;
}

/* ══════════════ panel de resultado ══════════════ */
.out{
  border:1px solid var(--line-strong); border-radius:2px;
  background:var(--panel); padding:clamp(20px,2.4vw,28px);
}
.out__k{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
.out__big{
  font-family:var(--display); font-weight:400; line-height:1.06;
  font-size:clamp(27px,3.2vw,38px); color:var(--text-primary); margin:0;
}
.out__big i{ font-style:normal; display:block; font-size:.52em; color:var(--text-secondary); margin:3px 0; }
.out__m2{ font-family:var(--mono); font-size:13px; color:var(--text-secondary); margin:12px 0 0; }
.out__tas{margin:0;font-family:var(--display);font-size:clamp(20px,2.2vw,26px);
  color:var(--text-secondary);line-height:1.2}
.out__tas i{display:block;font-style:normal;font-family:var(--mono);font-size:12px;
  margin-top:5px;opacity:.8}
.out__hr{ border:0; border-top:1px solid var(--line); margin:22px 0; }

.mon{ display:flex; gap:4px; margin-bottom:18px; }
.mon__b{
  flex:1; min-height:44px; cursor:pointer;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:12px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.mon__b.is-on{ color:var(--canvas); background:var(--accent); border-color:var(--accent); }

.des__l{ margin-bottom:16px; }
.des__t{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.des__t b{ font-size:14px; color:var(--text-primary); font-weight:500; }
/* el importe nunca parte a media cifra: quien envuelve es el rótulo */
.des__t span{ font-family:var(--mono); font-size:12.5px; color:var(--text-secondary);
  text-align:right; white-space:nowrap; flex:none; }
.des__bar{ height:4px; background:var(--canvas); border-radius:2px; margin:7px 0 5px; overflow:hidden; }
.des__bar i{ display:block; height:100%; background:var(--accent); }
.des__l--dis .des__bar i{ background:var(--glow); }
.des__p{ font-size:11.5px; color:var(--text-secondary); margin:0; opacity:.82; line-height:1.5; }

.cmp{ display:grid; gap:7px; }
.cmp__f{
  display:grid; grid-template-columns:1fr; gap:4px; text-align:left;
  padding:10px 12px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.cmp__f:hover{ border-color:var(--line-strong); }
.cmp__f.is-on{ border-color:var(--accent); background:var(--accent-muted); }
.cmp__n{ font-size:13px; color:var(--text-primary); }
.cmp__bar{ display:block; height:3px; background:var(--canvas); border-radius:2px; overflow:hidden; }
.cmp__bar i{ display:block; height:100%; background:var(--accent); opacity:.7; }
.cmp__f.is-on .cmp__bar i{ opacity:1; }
.cmp__v{ font-family:var(--mono); font-size:11.5px; color:var(--text-secondary); }

.out__acc{ display:grid; gap:8px; margin-top:22px; }
.out__acc .btn{ width:100%; justify-content:center; text-align:center; }
.out__nota{ font-size:11px; color:var(--text-secondary); line-height:1.55; margin:14px 0 0; opacity:.78; }

.out__ojo{
  margin:0 0 14px; padding:11px 13px; font-size:12.5px; line-height:1.55;
  color:var(--glow); border:1px solid var(--glow); border-radius:2px;
  background:rgba(233,192,138,.09);
}
.out__ojo[hidden]{ display:none; }
.nadaaun{ color:var(--text-secondary); font-size:14px; line-height:1.6; margin:0; }

/* ══════════════ letra pequeña ══════════════ */
.fino{ margin-top:14px; }
.fino summary{
  cursor:pointer; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-secondary); padding:10px 0; min-height:44px;
  display:flex; align-items:center;
}
.fino summary:hover{ color:var(--accent); }
.fino ul{ margin:2px 0 0; padding-left:18px; }
.fino li{ font-size:13px; color:var(--text-secondary); line-height:1.65; margin-bottom:5px; }
.fino p{ font-size:13px; color:var(--text-secondary); line-height:1.65; }

/* ══════════════ impresión ══════════════ */
@media print{
  .nav, .foot, .wa, .seam, .env, .motes, .skip,
  .mp__buscar, .mp__zoom, .mp__acciones, .out__acc, .tabs,
  .pagehead__bg{ display:none !important; }
  body{ background:#fff !important; color:#111 !important; }
  .calc{ grid-template-columns:1fr !important; }
  .out{ background:#fff; border:1px solid #999; break-inside:avoid; }
  .out__big, .paso__h, .des__t b, .opt b{ color:#111 !important; }
  .des__p, .out__nota, .paso__d, .cmp__v, .out__tas i{ color:#555 !important; }
  .out__tas{ color:#333 !important; }
  /* los paneles oscuros se comen el toner: en papel van en blanco */
  .opt, .row input, .row select, .mp, .prog__f{
    background:#fff !important; color:#111 !important; border-color:#bbb !important;
  }
  .opt span, .row__pie, .prog__n b{ color:#555 !important; }
  .des__bar, .cmp__bar{ background:#e6e6e6 !important; }
  .des__bar i, .cmp__bar i{ background:#444 !important; }
  .out__k, .paso__n, .prog__g h4{ color:#2b6f52 !important; }
  .out__ojo{ color:#7a4b00 !important; border-color:#7a4b00 !important; background:#fff !important; }
  .fino{ break-inside:avoid; }
  .fino ul, .fino p, .fino li{ color:#333 !important; }
  .fino[open] summary{ display:none; }
  .fino{ break-inside:avoid; }
}

@media (prefers-reduced-motion:reduce){
  .tabs__b, .prog__b, .mon__b, .cmp__f, .opt, .row input, .row select{ transition:none; }
}

/* ══════════════ mezcla del costo directo ══════════════
   Una barra sola: qué parte se va en jornal y qué parte en material.
   Es el dato que hace entender por qué el precio se mueve como se mueve. */
.mezcla{ margin:18px 0 0; }
.mezcla span{
  display:block; height:6px; border-radius:3px; overflow:hidden;
  background:var(--glow);
}
.mezcla i{ display:block; height:100%; background:var(--accent); }
.mezcla p{
  font-size:11px; color:var(--text-secondary); line-height:1.5;
  margin:7px 0 0; opacity:.82;
}

/* ══════════════ aviso legal de las 50 UIT ══════════════ */
.ojo{
  border:1px solid var(--accent); border-radius:2px;
  background:var(--accent-muted); color:var(--text-primary);
  padding:13px 15px; margin:20px 0 0;
  font-size:13px; line-height:1.55;
}
.ojo[hidden]{ display:none; }

/* ══════════════ el bloque profesional ══════════════ */
.pro__p{ margin-top:26px; }
.pro__d{
  color:var(--text-secondary); max-width:74ch; line-height:1.6;
  margin:0 0 20px; font-size:14px;
}

/* Las tablas anchas scrollean dentro de su caja. La página nunca. */
.pres, .pro__p{ overflow-x:auto; }
.pres__c{ margin-bottom:26px; break-inside:avoid; }
.pres__ch{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  border-bottom:1px solid var(--line-strong); padding-bottom:8px; margin-bottom:2px;
}
.pres__ch b{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
}
.pres__ch span{
  font-family:var(--mono); font-size:13px; color:var(--text-primary);
  white-space:nowrap;
}

.pres__t{
  width:100%; border-collapse:collapse; font-size:13px;
  min-width:640px;
}
.pres__t--full{ min-width:520px; }
.pres__t--dos{ min-width:360px; }
.pres__t th{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-secondary); font-weight:400;
  text-align:left; padding:9px 10px; border-bottom:1px solid var(--line);
}
.pres__t td{
  padding:8px 10px; border-bottom:1px solid var(--line);
  color:var(--text-secondary); line-height:1.45; vertical-align:top;
}
.pres__t td:first-child{ color:var(--text-primary); }
.pres__t .n{ text-align:right; font-family:var(--mono); white-space:nowrap; }
.pres__t tbody tr:hover td{ background:var(--panel); }
.pres__t .is-sub td{ color:var(--text-primary); border-top:1px solid var(--line-strong); }
.pres__t .is-tot td{
  color:var(--text-primary); font-family:var(--mono);
  border-top:1px solid var(--accent); border-bottom:0;
}
.pres__id{
  font-family:var(--mono); font-size:11px; color:var(--text-secondary);
  margin-right:7px; opacity:.7;
}

/* Resumen económico: como cierra cualquier presupuesto de obra */
.pres__r{
  width:100%; border-collapse:collapse; font-size:14px;
  margin-top:14px; max-width:620px; margin-left:auto;
}
.pres__r td{
  padding:9px 10px; border-bottom:1px solid var(--line);
  color:var(--text-secondary);
}
.pres__r .n{ text-align:right; font-family:var(--mono); white-space:nowrap; color:var(--text-primary); }
.pres__r .is-sub td{ border-top:1px solid var(--line-strong); color:var(--text-primary); }
.pres__r .is-tot td{
  border-top:1px solid var(--accent); border-bottom:0;
  color:var(--text-primary); font-size:16px; padding-top:12px;
}

@media (max-width:640px){
  .pres__t{ font-size:12px; }
  .pres__t th, .pres__t td{ padding:7px 8px; }
}

@media print{
  .pres, .pro__p{ overflow:visible !important; }
  .pres__t{ min-width:0 !important; }
  .pres__ch b{ color:#2b6f52 !important; }
  .pres__ch span, .pres__t td:first-child,
  .pres__t .is-tot td, .pres__r .n{ color:#111 !important; }
  .pres__t td, .pres__t th, .pres__r td{ color:#444 !important; border-color:#ccc !important; }
  .pres__t tbody tr:hover td{ background:transparent !important; }
  .mezcla span{ background:#e6e6e6 !important; }
  .mezcla i{ background:#444 !important; }
  .ojo{ background:#fff !important; border-color:#7a4b00 !important; color:#7a4b00 !important; }
}

/* ══════════════ las dos vistas ══════════════
   El HTML servido ES el modo técnico: nada lleva `hidden`, se pliega con
   CSS sobre un atributo de la raíz. Sin JavaScript se ve la página entera,
   que es a la vez la exigencia de mejora progresiva y la respuesta correcta
   de SEO — el contenido técnico nunca sale del DOM. */
[data-vista="simple"]  [data-vista-solo="tecnica"]{ display:none !important; }
[data-vista="tecnica"] [data-vista-solo="simple"]{ display:none !important; }

/* En técnica la columna crece y dejar de ser pegajosa es lo correcto:
   a 1366×768 un panel más alto que la ventana se queda clavado a medias. */
[data-vista="tecnica"] .calc__out{ position:static; }

/* ══════════════ línea de supuestos ══════════════
   Lo que el número da por supuesto, confesado en versalitas. */
.supuestos{
  margin:24px 0 0; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-secondary); line-height:1.9;
}
.supuestos__a{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
}
.supuestos__a:hover{ color:var(--text-primary); }

/* ══════════════ qué asume este número ══════════════ */
.asume{ margin:20px 0 0; padding:14px 16px; background:var(--panel); border-radius:2px; }
.asume ul{ margin:8px 0 0; padding:0; list-style:none; }
.asume li{
  font-size:12px; color:var(--text-secondary); line-height:1.6;
  padding:3px 0;
}
.asume li b{ color:var(--text-primary); font-weight:500; }

/* ══════════════ más el proyecto ══════════════ */
.out__tot{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin:10px 0 0; font-size:13px; color:var(--text-secondary);
  border-top:1px solid var(--line); padding-top:10px;
}
.out__tot b{ font-family:var(--mono); font-size:15px; color:var(--text-primary); font-weight:400; }

/* ══════════════ ¿te cuadra? ══════════════ */
.cuadra{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.cuadra[hidden]{ display:none; }
.cuadra a, .cuadra button{
  display:block; width:100%; text-align:left; margin-top:8px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--body); font-size:13px; color:var(--text-secondary);
  text-decoration:underline; text-underline-offset:3px;
}
.cuadra a:hover, .cuadra button:hover{ color:var(--accent); }

/* ══════════════ la puerta ══════════════
   La principal es legible de verdad —un botón con su borde—, porque es el
   lead de mayor valor y el más fácil de perder. Las secundarias sí van
   discretas: quien las busca las encuentra. */
.puerta{ margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line-strong); }
.puerta__b{ width:100%; text-align:center; }
.puerta__p{
  font-size:11px; color:var(--text-secondary); line-height:1.6;
  margin:10px 0 0; opacity:.8;
}

/* ══════════════ índice de anclas del bloque profesional ══════════════ */
.proNav{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin:30px 0 8px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.proNav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-secondary); text-decoration:none;
  padding:4px 0; border-bottom:1px solid transparent;
}
.proNav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.pro__p{ margin-top:46px; scroll-margin-top:90px; }
.pro__h{
  font-family:var(--display); font-size:clamp(20px,2.4vw,26px); font-weight:400;
  color:var(--text-primary); margin:0 0 6px;
}
#pro:focus{ outline:none; }
#pro:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }

/* ══════════════ cierre para el colega ══════════════ */
.colega{
  margin-top:56px; padding:26px 28px;
  border:1px solid var(--line-strong); border-radius:2px;
}
.colega__t{
  font-family:var(--display); font-size:20px; font-weight:400;
  color:var(--text-primary); margin:0 0 8px;
}
.colega p{ color:var(--text-secondary); line-height:1.65; margin:0; max-width:62ch; }
.colega__a{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:18px !important; }

/* ══════════════ prosa de las fuentes ══════════════ */
.wrap--texto{ max-width:min(760px, 92vw); }
.prosa p{ color:var(--text-secondary); line-height:1.75; margin:0 0 16px; }
.prosa p b{ color:var(--text-primary); font-weight:500; }

/* Solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media print{
  /* En papel manda lo que se ve: un propietario que imprime la vista corta
     no debe llevarse doce páginas de análisis de precios que no pidió. */
  .puerta, .cuadra, .proNav, .colega{ display:none !important; }
  .supuestos{ color:#555 !important; }
  .supuestos__a{ display:none !important; }
  .asume{ background:#fff !important; border:1px solid #ccc; }
  .asume li b, .out__tot b{ color:#111 !important; }
  .pro__h{ color:#111 !important; }
}