/* Hoja A4 de Ingeniería Aplicada. Mismo CSS en pantalla, en la vista previa y al imprimir. */
@font-face{font-family:'Outfit';src:url(/fonts/Outfit-Variable.ttf) format('truetype');font-weight:100 900}
@font-face{font-family:'DM Serif Display';src:url(/fonts/DMSerifDisplay-Regular.ttf) format('truetype')}
:root{
  --negro:#14201a; --verde:#4c9a2a; --verde2:#6fb74c; --verde3:#9ee86d; --verde-o:#2f6a1c; --teal:#2fb5a0; --azul:#0b2a3d;
  --verde-p:#edf7e4; --verde-b:#c5eaa0; --txt:#2f3a33; --gris:#7c887f; --linea:#e1e8e3; --cards:#f6f9f5;
  --rojo:#c94b3a; --ambar:#b57a09;
  --g:linear-gradient(135deg,#3f8a24 0%,#6fb74c 60%,#8fd35f 100%);
  --g-marca:linear-gradient(135deg,#0b2a3d 0%,#14705f 55%,#6fb74c 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Outfit','Segoe UI',Arial,sans-serif;color:var(--txt);background:#e9eeea;-webkit-print-color-adjust:exact;print-color-adjust:exact}
em,i{font-style:normal}

.docs{display:flex;flex-direction:column;align-items:center;gap:22px;padding:22px 0}
.pg{position:relative;width:794px;height:1123px;background:#fff;overflow:hidden;box-shadow:0 12px 40px -16px rgba(20,32,26,.35);border-radius:4px;display:flex;flex-direction:column;font-size:12.4px;line-height:1.55}

/* cabecera pensada para imprimir: blanca, con filete degradado y poca tinta */
.pg::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(90deg,#3f8a24,#6fb74c 55%,#2fb5a0);z-index:2}
.pg::after{content:"";position:absolute;right:-70px;top:-60px;width:230px;height:190px;transform:skewX(-24deg);background:linear-gradient(135deg,rgba(111,183,76,.16),rgba(111,183,76,0));border-radius:30px;pointer-events:none}
.pg-cab{position:relative;z-index:1;padding:34px 44px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.pg-cab::after{content:"";position:absolute;left:44px;right:44px;bottom:0;height:1.5px;background:linear-gradient(90deg,#6fb74c,rgba(111,183,76,.15))}
.pg-tit{max-width:600px;padding-bottom:12px}
/*kicker retirado*/.pg-tit small.x{display:inline-block;font-weight:700;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--verde-o);background:var(--verde-p);border-radius:6px;padding:3px 9px;margin-bottom:8px}
.pg-tit h1{margin:0;font-size:26px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--negro)}
.pg-tit p{margin:5px 0 0;font-size:12px;line-height:1.35;color:var(--gris);font-weight:500;max-width:430px;text-align:left}
.pg-logo{flex:none;padding-bottom:10px}
.pg-logo img{display:block;height:44px;width:auto}
.pg.slim .pg-cab{padding:30px 44px 10px}
.pg.slim .pg-tit h1{font-size:17px}.pg.slim .pg-tit p{display:none}
.pg.slim .pg-logo img{height:32px}

.pg-cuerpo{flex:1;padding:18px 44px 14px;overflow:hidden;position:relative;z-index:1}
.pg-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:11px 44px 14px;border-top:1px solid var(--linea);font-size:8.6px;line-height:1.45;color:var(--gris)}
.pg-pie b{color:var(--txt);font-weight:600}
.pg-num{display:flex;align-items:center;gap:12px;flex:none}
.pg-num small{font-size:8px;letter-spacing:.12em;color:#a3ada5}
.pg-num span{border:1.6px solid var(--verde);color:var(--verde-o);font-weight:800;font-size:12px;border-radius:9px;padding:3px 9px}
.pg-num i{font-weight:500;opacity:.75;font-size:10px}

/* barras de sección: texto verde con filete, sin rellenos oscuros */
.barra{margin:16px 0 9px;display:flex;align-items:center;gap:10px}
.barra span{display:inline-flex;align-items:center;gap:9px;color:var(--verde-o);font-weight:800;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}
.barra span::before{content:"";width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#3f8a24,#6fb74c)}
.barra::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,rgba(111,183,76,.7),rgba(111,183,76,0))}
.pg-cuerpo>.barra:first-child{margin-top:0}

p{margin:0 0 7px;text-align:justify;hyphens:auto}
p.c{text-align:left}
b,strong{font-weight:600;color:var(--negro)}
.val{font-weight:600;color:var(--negro);border-bottom:1px solid var(--verde-b);padding:0 2px}
.hueco{display:inline-block;border-bottom:1px solid #aeb8b0;height:1.05em;vertical-align:-1px;margin:0 2px}
.lista{margin:3px 0 8px;padding:0;list-style:none}
.lista li{position:relative;padding:3px 0 3px 22px;text-align:justify}
.lista li::before{content:"";position:absolute;left:3px;top:8px;width:9px;height:9px;border-radius:3px;background:var(--g)}
.num-cl{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;background:var(--verde-p);color:var(--verde-o);font-weight:700;font-size:10.5px;margin-right:7px}
.cl{margin:0 0 7px}
.cl h3{font-size:11.5px;margin:9px 0 3px;color:var(--negro);font-weight:700;letter-spacing:.01em}

.caja{background:var(--cards);border:1px solid var(--linea);border-radius:12px;padding:11px 15px;margin:8px 0}
.caja.verde{background:var(--verde-p);border-color:var(--verde-b)}
.caja.nota{font-size:10px;color:var(--gris);line-height:1.5}
.caja.total{background:var(--negro);color:#fff;border-color:var(--negro)}
.caja.total b{color:var(--verde3)}

.datos{display:grid;gap:8px 18px;margin:6px 0 10px}
.datos.c2{grid-template-columns:1fr 1fr}.datos.c3{grid-template-columns:1fr 1fr 1fr}.datos.c4{grid-template-columns:repeat(4,1fr)}.datos.c1{grid-template-columns:1fr}
.datos small{display:block;font-size:8.8px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:2px}
.datos>div>div{border-bottom:1px solid var(--linea);padding:2px 0 3px;min-height:20px}
.datos .span2{grid-column:span 2}

.cas{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:5px;border:1.5px solid #9aa79d;vertical-align:-3px;margin-right:6px;background:#fff}
.cas.on{background:var(--g);border-color:var(--verde)}
.cas svg{width:10px;height:10px}
.cas-t{margin-right:16px}

.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:11px;margin:6px 0 10px;border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.tb th{background:var(--negro);color:#fff;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:8px 10px;text-align:left}
.tb td{padding:7px 10px;border-top:1px solid var(--linea);vertical-align:top}
.tb tbody tr:nth-child(even){background:var(--cards)}
.tb .n{text-align:right;white-space:nowrap}

/* firmas */
.firmas{display:flex;gap:28px;margin-top:14px}
.firma{flex:1 1 0;text-align:center;min-width:0}
.firma small{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:600}
.firma-esp{height:64px}
.firma-linea{border-top:1.5px solid var(--negro);margin:0 8px 5px}
.firma b{display:block;font-size:11.5px}
.firma span{font-size:10px;color:var(--gris)}

/* sello vertical de revisión */
.rev{position:absolute;right:10px;top:50%;transform:rotate(90deg) translateX(-50%);transform-origin:right top;font-size:7.5px;letter-spacing:.2em;color:#b8c1ba}

@page{size:A4;margin:0}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{
  html,body{background:#fff;width:210mm}
  .docs{display:block;padding:0;gap:0}
  .pg{width:210mm;height:297mm;box-shadow:none;border-radius:0;page-break-after:always;break-after:page;margin:0;overflow:hidden}
  .pg:last-child{page-break-after:auto;break-after:auto}
  .no-print{display:none!important}
}

/* contrato: cláusulas con número en el margen */
.cl2{display:grid;grid-template-columns:34px 1fr;gap:0 10px;margin:0 0 9px}
.cl2>.n{font:400 21px/1.05 'DM Serif Display',serif;color:var(--verde)}
.cl2 p{margin-bottom:5px}.cl2>div>p:last-child{margin-bottom:0}
.sub{display:grid;grid-template-columns:20px 1fr;margin:0 0 5px}.sub>b{color:var(--verde-o);font-weight:700}
p{text-align:left;hyphens:none}
.lista li{text-align:left}
.clave{display:flex;border-top:1.5px solid var(--negro);border-bottom:1px solid var(--linea);margin:6px 0 4px}
.clave>div{flex:1;padding:9px 12px 8px 0;min-width:0}.clave>div+div{padding-left:12px;border-left:1px solid var(--linea)}
.clave small{display:block;font-size:8.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:600}
.clave b{display:block;font-size:13px;line-height:1.25;color:var(--negro);margin-top:2px;word-break:break-word}
.titulo-sec{display:flex;align-items:baseline;gap:12px;margin:15px 0 8px}.titulo-sec span{font-size:15px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--negro)}.titulo-sec::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,var(--verde2),rgba(111,183,76,0));align-self:center}
.pg-cuerpo>.titulo-sec:first-child{margin-top:0}
.grandes .firma-esp{height:92px}