/* /cliente */
.nav { display: flex; gap: 22px; }
.sub { font-size: 1.3rem; }
.nav a { color: var(--basalto); text-decoration: none; font-weight: 600; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero { padding-top: clamp(24px, 4vw, 48px); padding-bottom: 12px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px 48px; align-items: end; }
.hero .para { grid-column: 1 / -1; margin-bottom: 0; }
.hero h1 { font-size: clamp(2.3rem, 4.8vw, 4.1rem); }
.hero .lead { margin-bottom: 6px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.para { color: var(--gris); font-weight: 600; margin-bottom: 18px; }

/* corte del cerro */
.corte { margin: 0; padding: 8px 0 40px; }
.corte-lienzo { position: relative; }
#corte { width: 100%; height: auto; overflow: visible; }
#corte .banco { cursor: pointer; transition: fill .25s; }
#corte .banco:hover, #corte .banco:focus, #corte .banco.on { fill: var(--amarillo); outline: none; }
#corte .eje { font-size: 13px; fill: var(--gris); font-family: 'Archivo'; }
#corte .rotulo { font-size: 14px; font-weight: 700; font-family: 'Archivo'; fill: var(--basalto); }
#corte .rotulo.claro { fill: var(--caliza-2); }
#corte .naves, #corte .original { transition: opacity .8s; }
.corte-ficha {
  position: absolute; left: 4%; top: 0;
  background: var(--caliza-2); border-left: 4px solid var(--amarillo);
  padding: 10px 14px; min-width: 210px; display: flex; flex-direction: column; gap: 2px;
}
.corte-ficha strong { font-variation-settings: 'wdth' 112; }
.corte-pie {
  display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 18px; padding-top: 14px;
  border-top: 2px solid var(--basalto);
}
.corte-pie b { font-size: 1.35rem; margin-right: 6px; }

/* planos */
.planos { padding: clamp(48px, 7vw, 88px) 0; }
.planos h2 { margin-bottom: 16px; }
.planos .sub { margin: 40px 0 6px; }
.medidas { display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0 0; border-top: 2px solid var(--basalto); }
.medidas div { padding: 14px 16px 0 0; }
.medidas dt { color: var(--gris); font-size: .92rem; }
.medidas dd { margin: 2px 0 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.calendario { display: flex; height: 64px; margin-top: 14px; }
.calendario .nivel { min-width: 28px; display: flex; flex-direction: column; justify-content: center; padding: 0 6px; border-right: 2px solid var(--caliza); color: #fff; font-size: .82rem; line-height: 1.15; overflow: hidden; }
.calendario .cal-n { font-weight: 800; }
.calendario .n1 { background: #7a2fd0; } .calendario .n2 { background: #1d2bd8; } .calendario .n3 { background: #1a7fe0; }
.calendario .n4 { background: #12b5a0; } .calendario .n5 { background: #2fa64a; } .calendario .n6 { background: #7fae1c; }
.calendario .n7 { background: #d8b400; color: var(--basalto); } .calendario .n8 { background: #e2541b; } .calendario .n9 { background: #c8102e; }
.calendario .n1 .cal-m, .calendario .n2 .cal-m, .calendario .n3 .cal-m { display: none; }
.calendario-eje { display: flex; justify-content: space-between; font-size: .85rem; color: var(--gris); margin-top: 6px; }
.galeria { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin: 44px 0 16px; }
.galeria figure { margin: 0; }
.galeria .g-grande { grid-row: span 3; }
.galeria figcaption { font-size: .92rem; color: var(--gris); margin-top: 8px; }
.ampliar { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.ampliar img { width: 100%; height: auto; border: 1px solid var(--polvo); }
.visor { max-width: 96vw; max-height: 94vh; padding: 12px; border: 0; background: var(--basalto); }
.visor::backdrop { background: rgba(20, 22, 25, .85); }
.visor form { text-align: right; margin-bottom: 8px; }
.visor img { max-width: calc(96vw - 24px); max-height: calc(94vh - 80px); width: auto; height: auto; margin: 0 auto; }

/* precio */
.precio { background: var(--basalto); color: var(--caliza-2); padding: clamp(56px, 8vw, 104px) 0; }
.precio-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.precio h2 { margin-bottom: 26px; }
.precio-cifra { display: flex; align-items: flex-end; gap: 14px; margin: 0 0 26px; max-width: none; }
.precio-cifra .num { font-size: clamp(4rem, 11vw, 8.5rem); line-height: .85; color: var(--amarillo); font-variation-settings: 'wdth' 125; font-weight: 850; }
.precio-cifra .unidad { font-weight: 600; padding-bottom: 6px; line-height: 1.25; }
.precio p { color: #c9cac5; }
.calc { border: 2px solid #4a5056; padding: 24px; }
.calc h3 { margin-bottom: 16px; }
.calc-label { display: block; font-size: .95rem; color: #c9cac5; margin-bottom: 8px; }
.calc input[type=range] { width: 100%; accent-color: var(--amarillo); height: 32px; }
.calc-salida { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.calc-salida .num { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.calc-salida div:last-child .num { color: var(--amarillo); }
.precio .muted { color: #a3a6a2; }
.calc-nota { font-size: .9rem; margin: 0; }

/* precio por volumen */
.calc-fact { margin: 0 0 8px; }
.calc-fact .num { font-size: 1.5rem; color: var(--amarillo); }
.tramos-caja { margin-top: clamp(48px, 7vw, 80px); }
.tramos-intro { color: #c9cac5; max-width: 70ch; }
.tramos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 24px; align-items: end; }
.tramo {
  font: inherit; color: var(--caliza-2); background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; height: 250px; text-align: left;
}
.tramo-vol { font-size: 1.05rem; }
.tramo-barra { flex: 0 0 auto; margin-top: auto; background: #4a5056; display: flex; align-items: flex-start; padding: 12px; transition: background .2s; }
.tramo-precio { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1; }
.tramo-fact { font-size: .85rem; color: #a3a6a2; }
.tramo:hover .tramo-barra { background: #5b6168; }
.tramo[aria-pressed=true] .tramo-barra { background: var(--amarillo); color: var(--basalto); }

/* justificación del precio */
.justifica { margin-top: clamp(48px, 7vw, 80px); }
.just-titulo { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 24px; padding-top: 32px; border-top: 1px solid #4a5056; }
.comparar { margin-bottom: 40px; }
.cmp-fila { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: center; margin-bottom: 12px; }
.cmp-et { color: #c9cac5; font-size: .95rem; line-height: 1.3; }
.cmp-pista { background: var(--basalto-2); height: 46px; }
.cmp-barra { height: 100%; display: flex; align-items: center; padding: 0 14px; font-weight: 750; font-variation-settings: 'wdth' 110; white-space: nowrap; }
.cmp-barra.solo { background: #5b6168; color: var(--caliza-2); }
.cmp-barra.todo { background: var(--amarillo); color: var(--basalto); }
.cmp-nota { color: #a3a6a2; font-size: .9rem; margin-top: 10px; }
.razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.razones div { border-top: 3px solid var(--amarillo); padding-top: 14px; }
.razones h4 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; font-variation-settings: 'wdth' 110; color: var(--caliza-2); }
.razones p { margin: 0; color: #c9cac5; font-size: .97rem; }

/* medición */
.medicion { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(56px, 8vw, 100px) var(--gutter); }
.medicion h2 { margin-bottom: 20px; }
.arco .haz { animation: escaneo 2.6s ease-in-out infinite; }
@keyframes escaneo { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* operación */
.operacion { background: var(--caliza-2); padding: clamp(56px, 8vw, 100px) 0; }
.operacion h2 { margin-bottom: 14px; }
.ruta {
  list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr);
  position: relative;
}
.ruta::before { content: ''; position: absolute; left: 0; right: 0; top: 21px; border-top: 4px dashed var(--polvo); }
.ruta li { position: relative; }
.ruta button {
  font: inherit; font-weight: 650; background: none; border: 0; padding: 0 4px 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--basalto); text-align: left; width: 100%;
}
.ruta-n {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--caliza-2); border: 3px solid var(--basalto); font-variation-settings: 'wdth' 118; font-weight: 800;
  position: relative; z-index: 1; transition: background .2s;
}
.ruta button[aria-pressed=true] .ruta-n, .ruta button:hover .ruta-n { background: var(--amarillo); }
.etapa { margin-top: 28px; display: grid; grid-template-columns: 260px 1fr; gap: 32px; border-top: 2px solid var(--basalto); padding-top: 26px; min-height: 150px; }
.etapa .num { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; display: block; }
.etapa h3 { font-size: 1.5rem; margin-bottom: 10px; }

/* recursos */
.recursos { padding: clamp(56px, 8vw, 100px) var(--gutter); }
.recursos h2 { margin-bottom: 30px; }
.recursos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); }
.lista { width: 100%; border-collapse: collapse; }
.lista caption { text-align: left; font-weight: 800; font-variation-settings: 'wdth' 112; padding-bottom: 10px; font-size: 1.1rem; }
.lista td { border-top: 1px solid var(--polvo); padding: 11px 0; vertical-align: top; }
.lista td.num { width: 56px; font-size: 1.3rem; line-height: 1.1; }

/* preparación */
.preparacion { background: var(--caliza-2); padding: clamp(56px, 8vw, 100px) 0; border-top: 6px solid var(--oxido); }
.prep-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 6vw, 80px); }
.preparacion h2 { margin-bottom: 20px; }
.alcance { padding-left: 20px; margin: 0; }
.alcance li { margin-bottom: 6px; }
.prep-total { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.prep-total .num { font-size: clamp(3rem, 7vw, 5rem); line-height: .9; font-variation-settings: 'wdth' 122; }
.prep-total .unidad { font-weight: 600; padding-bottom: 4px; white-space: nowrap; }
.pagos { display: flex; margin: 22px 0 14px; min-height: 76px; }
.pago { flex: 1 1 0; min-width: 96px; padding: 10px 12px; font-size: .92rem; line-height: 1.25; color: var(--caliza-2); background: var(--basalto); border-right: 3px solid var(--caliza-2); }
.pago:nth-child(2) { background: var(--basalto-2); }
.pago:nth-child(3) { background: var(--oxido); border-right: 0; }
.pago .num { display: block; font-size: 1.3rem; }
.chica { font-size: .9rem; }

/* condiciones */
.condiciones { padding: clamp(56px, 8vw, 100px) var(--gutter); }
.condiciones h2 { margin-bottom: 28px; }
.cond { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 5vw, 64px); margin: 0; }
.cond div { border-top: 1px solid var(--polvo); padding: 16px 0; }
.cond dt { font-weight: 750; font-variation-settings: 'wdth' 110; margin-bottom: 4px; }
.cond dd { margin: 0; }

/* cierre */
.cierre { background: var(--amarillo); padding: clamp(48px, 7vw, 88px) 0; }
.cierre-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; }
.pasos { margin: 0; padding-left: 26px; font-size: 1.15rem; font-weight: 600; }
.pasos li { padding: 6px 0; border-bottom: 1px solid rgba(36, 40, 45, .25); }

.pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 26px; padding-bottom: 32px; font-size: .92rem; }

@media (max-width: 860px) {
  .nav { display: none; }
  .precio-grid, .medicion, .recursos-grid, .prep-grid, .cond, .cierre-grid, .galeria { grid-template-columns: 1fr; }
  .galeria .g-grande { grid-row: auto; }
  .razones { grid-template-columns: 1fr; }
  .tramos { gap: 6px; }
  .tramo { height: 200px; }
  .tramo-fact { display: none; }
  .cmp-fila { grid-template-columns: 1fr; gap: 6px; }
  .medidas { grid-template-columns: repeat(2, 1fr); }
  .calendario .cal-m { display: none; }
  .corte-ficha { position: static; margin-top: 12px; }
  .ruta { grid-template-columns: repeat(4, 1fr); row-gap: 20px; }
  .ruta::before { display: none; }
  .etapa { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 480px) {
  .ruta { grid-template-columns: repeat(2, 1fr); }
  .precio-cifra { flex-direction: column; align-items: flex-start; }
}