/* Taller Serra — конфигуратор сметы и запись (presupuesto.html, cita.html):
   шаги, работы, чек, липкая полоса, календарь, окна, листок заявки. */

/* ══ конфигуратор сметы ═══════════════════════════════════════════════ */
.rail { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--linea); counter-reset: r; }
.rail li { position: relative; }
.rail li + li { border-left: 1px solid var(--linea); }
.rail a {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px; text-decoration: none;
  font-family: var(--cond); font-weight: 600; font-size: 15px; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
}
.rail a:hover { color: var(--texto); }
.rail .cod { flex: none; }
@media (max-width: 699px) { .rail a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 12px 10px; font-size: 14px; letter-spacing: .06em; } }
@media (min-width: 700px) { .rail a { font-size: 17px; padding: 10px 18px; gap: 14px; } }
.config__env { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1000px) {
  .config__env { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
  .ticket { position: sticky; top: calc(var(--cab) + 20px); }
}
@media (min-width: 1200px) { .config__env { grid-template-columns: minmax(0, 1fr) 430px; gap: 64px; } }
.config__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; min-width: 0; }
.paso-conf { display: grid; gap: 22px; }
.paso-conf__titulo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 4px; padding-bottom: 14px; border-bottom: 2px solid var(--texto); width: 100%;
  font-family: var(--cond); font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); line-height: 1; text-transform: uppercase;
}
.paso-conf__titulo .cod { min-width: 38px; height: 38px; font-size: 16px; border-color: var(--amarillo); color: var(--amarillo); }
.tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tipos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tipo { position: relative; display: flex; }
.tipo input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tipo__caja {
  flex: 1; display: grid; justify-items: start; gap: 4px; padding: 14px 14px 12px; border: 1px solid var(--linea-2); background: var(--asfalto); cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.tipo__caja svg { width: 72px; height: 32px; margin-bottom: 8px; color: var(--texto-2); transition: color .15s, transform .25s; }
.tipo__caja b { font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.tipo__caja small { font-size: 14px; color: var(--texto-2); }
.tipo:hover .tipo__caja { border-color: #8b9198; }
.tipo input:checked + .tipo__caja { border-color: var(--amarillo); background: var(--panel); box-shadow: inset 0 -3px 0 var(--amarillo); }
.tipo input:checked + .tipo__caja svg { color: var(--texto); transform: translateX(4px); }
.tipo input:focus-visible + .tipo__caja { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.config__doble { display: grid; gap: 18px; }
@media (min-width: 600px) { .config__doble { grid-template-columns: 1fr 1fr; } }
.trabajos { display: grid; border-top: 1px solid var(--linea); }
.trabajo { border-bottom: 1px solid var(--linea); transition: background-color .2s; }
.trabajo.activo { background: linear-gradient(90deg, rgba(245, 180, 0, .06), transparent 60%); }
.trabajo__cab { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 10px 4px; cursor: pointer; position: relative; }
.trabajo__cab > input, .casilla > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trabajo__cab:hover .caja { border-color: var(--texto); }
.trabajo__nombre { font-family: var(--cond); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.trabajo__nombre small { display: block; margin-top: 3px; font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.trabajo__precio { font-family: var(--cond); font-weight: 600; font-size: 19px; white-space: nowrap; color: var(--texto-2); }
.trabajo.activo .trabajo__precio { color: var(--texto); }
.trabajo.fuera .trabajo__cab { cursor: not-allowed; }
.trabajo.fuera .trabajo__nombre, .trabajo.fuera .trabajo__precio { opacity: .4; text-decoration: line-through; text-decoration-thickness: 1px; }
.trabajo__opciones { display: grid; gap: 12px; padding: 0 4px 18px 46px; }
.js .trabajo:not(.activo) .trabajo__opciones { display: none; }
.trabajo__nota { margin: -6px 4px 16px 46px; padding: 10px 12px; border-left: 2px solid var(--ambar); background: rgba(245, 158, 11, .07); font-size: 14.5px; line-height: 1.45; color: #d9d6cc; }
.trabajo.fuera .trabajo__nota { border-color: var(--linea-2); background: var(--panel); }
@media (min-width: 700px) { .trabajo__opciones--doble { grid-template-columns: 1fr 1fr; } }
.segmentos__op--peque span { min-height: 44px; font-size: 15px; }
@media (max-width: 479px) {
  .segmentos__op label:nth-last-child(n+4) ~ label span, .segmentos__op label:nth-last-child(n+4) span { padding-inline: 3px; font-size: 14px; letter-spacing: .03em; }
}
.neum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: end; }
.neum .casilla { grid-column: 1 / -1; }
@media (min-width: 700px) { .neum { grid-template-columns: auto minmax(0, 1fr) auto; } .neum .casilla { grid-column: auto; } }
.contador { display: grid; gap: 7px; }
.contador__caja { display: flex; border: 1px solid var(--linea-2); height: 50px; }
.contador__caja button { width: 46px; border: 0; background: var(--asfalto); color: var(--texto); cursor: pointer; display: grid; place-items: center; }
.contador__caja button:hover:not(:disabled) { background: var(--panel-2); }
.contador__caja button:disabled { color: var(--linea-2); cursor: not-allowed; }
.contador__caja output { display: grid; place-items: center; min-width: 44px; border-inline: 1px solid var(--linea-2); font-family: var(--cond); font-weight: 700; font-size: 24px; }
.entrada--medida { font-family: var(--cond); font-weight: 600; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.casilla { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; cursor: pointer; font-size: 16px; }
.medida { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--linea); background: var(--asfalto); }
@media (min-width: 700px) { .medida { grid-template-columns: 200px minmax(0, 1fr); gap: 8px 22px; align-items: center; } .medida__pista { grid-column: 1 / -1; } }
.medida__flanco { width: 200px; height: 110px; color: var(--linea-2); }
.medida__texto { font-family: var(--cond); font-weight: 700; font-size: 17px; letter-spacing: .12em; fill: var(--texto); }
.medida__lectura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.medida__lectura:empty { display: none; }
.medida__lectura dt { font-family: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.medida__lectura dd { font-family: var(--cond); font-weight: 600; font-size: 18px; line-height: 1.2; }
.medida__pista { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.medida--error { border-color: var(--ambar); }
.medida--error .medida__pista { color: #f3c77a; }
.medida--error .medida__texto { fill: var(--ambar); }
/* смета как отрывной чек */
.ticket {
  display: grid; background: var(--panel); border: 1px solid var(--linea);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 97%, #000) 0 0 / 22px 100% repeat-x;
          mask: radial-gradient(circle 7px at 50% 0, transparent 97%, #000) 0 0 / 22px 100% repeat-x;
}
.ticket__cab { display: grid; gap: 12px; padding: 26px 22px 18px; border-bottom: 1px dashed var(--linea-2); }
.ticket__coche { display: flex; align-items: center; gap: 12px; font-family: var(--cond); font-weight: 600; font-size: 19px; letter-spacing: .03em; }
.ticket__coche svg { width: 56px; height: 25px; flex: none; }
.ticket__lineas { list-style: none; padding: 10px 22px; min-height: 90px; }
.ticket__lineas li { display: grid; grid-template-columns: minmax(0, auto) minmax(10px, 1fr) auto; gap: 8px; align-items: end; padding: 10px 0; }
.ticket__que b { display: block; font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.ticket__que small { display: block; margin-top: 2px; font-size: 14px; color: var(--texto-2); line-height: 1.3; }
.ticket__lineas i { border-bottom: 2px dotted #4a5057; margin-bottom: 5px; }
.ticket__precio { font-family: var(--cond); font-weight: 600; font-size: 19px; white-space: nowrap; }
.ticket__lineas .ticket__vacio { display: block; padding: 14px 0; color: var(--texto-2); font-size: 15px; }
.ticket__total { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 18px 22px; border-top: 1px solid var(--linea); background: var(--panel-2); }
.ticket__total span { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.ticket__total strong { grid-row: span 2; font-family: var(--cond); font-weight: 700; font-size: 38px; line-height: 1; color: var(--amarillo); white-space: nowrap; }
.ticket__total small { font-size: 13px; color: var(--texto-2); }
.ticket__tiempo { display: flex; gap: 10px; align-items: flex-start; padding: 14px 22px 0; font-size: 15px; }
.ticket__tiempo .ico { color: var(--amarillo); margin-top: 1px; }
.ticket__aviso { padding: 10px 22px 0; font-size: 14px; color: var(--texto-2); }
.ticket__acciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 22px 4px; }
@media (min-width: 480px) { .ticket__acciones { grid-template-columns: 1fr 1fr; } }
.ticket { min-width: 0; }
.ticket__acciones .btn { padding: 0 12px; }
.ticket .boton-texto { justify-self: start; margin: 4px 22px 14px; }
/* липкая полоса итога — только на телефоне и планшете */
.barra-total { display: none; }
@media (max-width: 999px) {
  .con-barra { padding-bottom: 76px; }
  .barra-total {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--lado) calc(10px + env(safe-area-inset-bottom)); background: rgba(17, 19, 21, .97); border-top: 1px solid var(--linea-2);
    transition: transform .25s ease-out;
  }
  .barra-total--oculta { transform: translateY(110%); }
  .barra-total__dato { display: grid; }
  .barra-total__dato span { font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
  .barra-total__dato b { font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--amarillo); }
  .barra-total__ir { min-height: 48px; }
}
/* как складывается цена */
.formula { display: grid; gap: 32px; }
@media (min-width: 1000px) { .formula { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.formula__lado { display: grid; }
.formula__lado .sec-cab { margin-bottom: 28px; }
.formula__foto { display: grid; gap: 8px; }
.formula__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.formula__cuenta { display: grid; gap: 10px; }
.formula__termino { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 22px; border: 1px solid var(--linea); background: var(--asfalto); }
.formula__termino .cod { grid-row: span 2; width: 40px; height: 40px; font-size: 17px; }
.formula__termino b { font-family: var(--cond); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: .03em; }
.formula__termino p { color: var(--texto-2); font-size: 15px; }
.formula__termino--total { border-color: var(--amarillo); }
.formula__termino--total .cod { background: var(--amarillo); border-color: var(--amarillo); color: var(--sobre-amarillo); }
.formula__op { display: grid; place-items: center; font-family: var(--cond); font-weight: 700; font-size: 34px; color: var(--linea-2); line-height: 1; }
/* ══ запись: что дальше, календарь, окна, листок ═════════════════════ */
.despues { list-style: none; display: grid; border-top: 1px solid var(--linea); }
.despues li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.despues .cod { min-width: 34px; height: 30px; font-size: 13px; }
.despues p { color: var(--texto-2); font-size: 15.5px; line-height: 1.45; }
.despues b { display: block; margin-bottom: 2px; font-family: var(--cond); font-weight: 700; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto); }
.calendario { border: 1px solid var(--linea-2); background: var(--asfalto); }
.calendario__cab { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; border-bottom: 1px solid var(--linea); }
.calendario__flecha { height: 52px; border: 0; background: none; color: var(--texto); cursor: pointer; display: grid; place-items: center; }
.calendario__flecha:hover:not(:disabled) { background: var(--panel-2); }
.calendario__flecha:disabled { color: var(--linea); cursor: default; }
.calendario__mes { text-align: center; font-family: var(--cond); font-weight: 700; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; }
.calendario__semana, .calendario__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario__semana span { padding: 10px 0 6px; text-align: center; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--texto-2); }
.calendario__dias { gap: 4px; padding: 4px 6px 8px; }
.calendario__sin { grid-column: 1 / -1; padding: 16px 10px; color: var(--texto-2); font-size: 15px; }
.dia {
  position: relative; min-height: 46px; border: 1px solid var(--linea); background: var(--panel); color: var(--texto); cursor: pointer;
  font-family: var(--cond); font-weight: 600; font-size: 19px; transition: background-color .12s, border-color .12s, color .12s;
}
.dia:hover:not(:disabled) { border-color: var(--texto); }
.dia--vacio { border: 0; background: none; }
.dia--no { background: repeating-linear-gradient(-45deg, transparent 0 4px, #1d2023 4px 5px); color: #50565c; cursor: default; }
.dia--hoy::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--texto-2); }
.dia--festivo { color: #6b5f45; }
.dia--sel { background: var(--amarillo); border-color: var(--amarillo); color: var(--sobre-amarillo); }
.dia--sel.dia--hoy::after { background: var(--sobre-amarillo); }
@media (min-width: 700px) { .dia { min-height: 56px; font-size: 21px; } .calendario__dias { gap: 6px; padding: 6px 10px 12px; } }
.calendario__leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 14px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-2); }
.calendario__leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.calendario__leyenda i { width: 16px; height: 16px; border: 1px solid var(--linea); background: var(--panel); }
.calendario__leyenda .l-cerrado { background: repeating-linear-gradient(-45deg, transparent 0 3px, #2a2f34 3px 4px); }
.calendario__leyenda .l-hoy { position: relative; border: 0; background: none; }
.calendario__leyenda .l-hoy::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-2); }
.franjas { display: grid; gap: 18px; }
.franjas__vacio { color: var(--texto-2); }
.franja__t { margin-bottom: 10px; font-size: 15px; color: var(--texto-2); }
.franja__t b { font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); }
.franja__horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 6px 14px; border: 1px solid var(--linea-2); background: var(--asfalto);
  font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); text-align: center; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.chip:hover span { color: var(--texto); border-color: #8b9198; }
.chip input:checked + span { background: var(--panel-2); border-color: var(--amarillo); color: var(--texto); box-shadow: inset 0 -3px 0 var(--amarillo); }
.chip input:focus-visible + span { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.chip input:disabled + span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.chip--hora span { font-size: 20px; letter-spacing: .02em; text-transform: none; }
.motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket--cita .ticket__cab { border-bottom: 0; padding-bottom: 6px; }
.hoja { margin: 8px 22px 0; border: 1px solid var(--linea-2); background: var(--asfalto); text-align: center; overflow: hidden; }
.hoja__mes { padding: 8px 0 6px; background: var(--linea); font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.hoja--llena .hoja__mes { background: var(--amarillo); color: var(--sobre-amarillo); }
.hoja__dia { padding-top: 10px; font-family: var(--cond); font-weight: 700; font-size: 96px; line-height: .95; }
.hoja__semana { padding: 4px 10px 16px; font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.solicitud { margin: 16px 22px 0; border-top: 1px solid var(--linea); }
.solicitud > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.solicitud dt { font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); padding-top: 2px; }
.solicitud dd { font-family: var(--cond); font-weight: 600; font-size: 19px; line-height: 1.2; }
.ticket__falta { padding: 4px 22px 16px; font-size: 14px; color: var(--ambar); min-height: 8px; }
.ticket__falta:empty { padding-bottom: 10px; }
.antes { display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 900px) { .antes { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; } }
.antes__col { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 26px 0; border-bottom: 1px solid var(--linea); }
.antes__col svg { width: 52px; height: 52px; color: var(--amarillo); }
.antes__col h3 { font-size: 26px; }
.antes__col p { color: var(--texto-2); }
@media (min-width: 900px) {
  .antes__col { padding: 0 32px; border-bottom: 0; border-left: 1px solid var(--linea); }
  .antes__col:first-child { padding-left: 0; border-left: 0; }
}
.llamar-grande { border-top: 1px solid var(--linea); padding-block: 64px 72px; background: var(--negro); }
@media (min-width: 900px) { .llamar-grande { padding-block: 110px; } }
.llamar-grande__env { display: grid; gap: 14px; justify-items: start; }
.llamar-grande__foto { display: grid; gap: 8px; width: 100%; margin-bottom: 26px; }
.llamar-grande__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 900px) {
  /* текст — одной группой по центру высоты фото: пустые ряды сверху и снизу */
  .llamar-grande__env { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 56px; }
  .llamar-grande__env > .rotulo { grid-column: 1; grid-row: 2; }
  .llamar-grande__num { grid-column: 1; grid-row: 3; }
  .llamar-grande__horas { grid-column: 1; grid-row: 4; }
  .llamar-grande__foto { grid-column: 2; grid-row: 1 / -1; margin: 0; }
  .llamar-grande__foto img { aspect-ratio: 4 / 5; }
}
.llamar-grande__num {
  font-family: var(--cond); font-weight: 700; font-size: clamp(64px, 15vw, 200px); line-height: .9; letter-spacing: .01em;
  text-decoration: none; color: var(--texto); transition: color .2s;
}
.llamar-grande__num:hover { color: var(--amarillo); }
.llamar-grande__horas { display: flex; align-items: center; gap: 10px; font-family: var(--cond); font-weight: 500; font-size: 20px; color: var(--texto-2); }
@media (max-width: 399px) { .calendario__dias { gap: 2px; padding: 3px 1px 6px; } }
/* рядом с фото номер обязан влезть в одну строку */
@media (min-width: 900px) { .llamar-grande__num { font-size: clamp(72px, 8.4vw, 128px); white-space: nowrap; } }