/* Taller Serra — главная: полоса-фото, индекс услуг, бенто, линейка дня,
   мастерская, неделя и карта. Общее — в estilo.css. */

/* ── полоса-фото с фразой ─────────────────────────────────────────────── */
.banda { position: relative; min-height: 360px; display: grid; align-items: end; overflow: hidden; background: var(--negro); }
.banda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: .78; }
.banda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 12, .92) 0%, rgba(10, 11, 12, .55) 45%, rgba(10, 11, 12, 0) 75%); }
.banda__texto { position: relative; display: grid; gap: 18px; padding-block: 44px; }
.banda__frase { font-family: var(--cond); font-weight: 700; font-size: clamp(38px, 7vw, 92px); line-height: .92; text-transform: uppercase; max-width: 11ch; }
@media (min-width: 900px) { .banda { min-height: 620px; } .banda__texto { padding-block: 72px; } }
/* ── индекс услуг: крупный нумерованный список ───────────────────────── */
.indice { list-style: none; border-top: 1px solid var(--linea); counter-reset: n; }
.indice li { border-bottom: 1px solid var(--linea); }
.indice a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "n nombre precio" "n que que";
  gap: 4px 12px; align-items: baseline; padding: 20px 0; text-decoration: none; position: relative;
  transition: padding .25s, background-color .25s;
}
.indice__n { grid-area: n; font-family: var(--cond); font-weight: 600; font-size: 15px; color: var(--texto-2); letter-spacing: .08em; }
.indice__nombre { grid-area: nombre; font-family: var(--cond); font-weight: 700; font-size: clamp(30px, 5.4vw, 64px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.indice__que { grid-area: que; color: var(--texto-2); font-size: 15px; }
.indice__precio { grid-area: precio; font-family: var(--cond); font-weight: 600; font-size: 20px; white-space: nowrap; }
.indice__precio small { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin-right: 4px; }
.indice .ico { display: none; }
@media (min-width: 800px) {
  .indice a { grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr) 150px 32px; grid-template-areas: "n nombre que precio flecha"; padding: 26px 0; align-items: center; }
  .indice__que { font-size: 16px; }
  .indice__precio { text-align: right; font-size: 24px; }
  .indice .ico { display: block; grid-area: flecha; justify-self: end; width: 22px; height: 22px; color: var(--linea-2); transition: color .2s, transform .2s; }
  .indice a:hover { padding-inline: 14px; background: var(--panel); }
  .indice a:hover .ico { color: var(--amarillo); transform: translateX(3px); }
  .indice a:hover .indice__nombre { color: #fff; }
}
/* ── бенто: инструменты разного размера ──────────────────────────────── */
.bento { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 20px; }
  .bento__grande { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .bento__a { grid-column: 8 / span 5; }
  .bento__b { grid-column: 8 / span 5; }
}
.bento__item {
  position: relative; display: grid; gap: 16px; align-content: start; padding: 24px 20px 14px;
  background: var(--asfalto); border: 1px solid var(--linea);
}
@media (min-width: 600px) { .bento__item { padding: 30px 30px 18px; } }
.bento__item h3 { font-size: clamp(26px, 3.2vw, 36px); }
.bento__item > p { color: var(--texto-2); max-width: 46ch; }
.bento__grande { grid-template-rows: auto auto auto auto 1fr auto; }
.bento__grande .ticket-mini { align-self: start; }
.pasos-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pasos-mini li { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.pasos-mini .cod { min-width: 28px; height: 28px; font-size: 13px; }
.ticket-mini {
  display: grid; background: var(--panel); border: 1px solid var(--linea);
  font-family: var(--cond); font-size: 17px; letter-spacing: .02em;
}
.ticket-mini__cab { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px dashed var(--linea-2); }
.ticket-mini__cab span:first-child { font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.ticket-mini__coche { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 15px; }
.ticket-mini__coche svg { width: 44px; height: 20px; color: var(--texto); }
.ticket-mini__pie { padding: 11px 16px 13px; border-top: 1px dashed var(--linea-2); font-size: 15px; color: var(--texto-2); letter-spacing: .02em; }
.ticket-mini ul { list-style: none; padding: 6px 16px; }
.ticket-mini li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.ticket-mini li span:first-child { flex: none; max-width: 70%; }
.ticket-mini li i { flex: 1; border-bottom: 2px dotted #4a5057; transform: translateY(-4px); }
.ticket-mini li b { font-weight: 600; white-space: nowrap; }
.ticket-mini__total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--linea); background: var(--panel-2); }
.ticket-mini__total span { font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.ticket-mini__total b { font-size: 28px; line-height: 1; color: var(--amarillo); white-space: nowrap; }
@media (min-width: 600px) { .ticket-mini__total b { font-size: 34px; } }
.cuadro {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px;
  background: var(--negro); border: 1px solid #1d2023; border-radius: 14px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .9);
}
.cuadro a { display: grid; justify-items: center; gap: 8px; padding: 10px 4px 8px; border-radius: 8px; text-decoration: none; }
.cuadro a:hover, .cuadro a:focus-visible { background: #15181a; }
.cuadro svg { width: 52px; height: 52px; filter: drop-shadow(0 0 6px currentColor); }
.cuadro span { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); text-align: center; }
.dias-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dias-mini span {
  display: grid; gap: 2px; justify-items: center; padding: 10px 2px; border: 1px solid var(--linea);
  font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2);
}
.dias-mini b { font-size: 24px; letter-spacing: 0; color: var(--texto); line-height: 1; }
.dias-mini span:first-child { border-color: var(--amarillo); }
/* ── один день в мастерской: линейка и выноски ───────────────────────── */
.jornada { display: grid; gap: 28px; }
.regla { position: relative; padding-top: 30px; }
.regla__pista { position: relative; height: 44px; border: 1px solid var(--linea); background: var(--asfalto); }
.regla__tramo { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100%); width: calc((var(--f) - var(--i)) * 100%); background: var(--panel-2); }
.regla__cerrado {
  position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 100%); width: calc((var(--f) - var(--i)) * 100%);
  background: repeating-linear-gradient(-45deg, transparent 0 5px, #2a2f34 5px 6px);
  display: grid; place-items: center; font-family: var(--cond); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
}
.regla__obra { position: absolute; top: 14px; bottom: 14px; left: calc(var(--i) * 100%); width: calc((var(--f) - var(--i)) * 100%); background: #3a4046; }
.regla__hito { position: absolute; top: 50%; left: calc(var(--t) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--texto); border: 2px solid var(--asfalto); }
.regla__ahora { position: absolute; top: -30px; bottom: -8px; left: calc(var(--t) * 100%); width: 2px; margin-left: -1px; background: var(--amarillo); }
.regla__ahora span {
  position: absolute; top: 0; left: 6px; white-space: nowrap; padding: 3px 7px; background: var(--amarillo); color: var(--sobre-amarillo);
  font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.regla__ahora.a-la-izquierda span { left: auto; right: 6px; }
.regla__horas { position: relative; height: 22px; margin-top: 8px; }
.regla__horas span { position: absolute; left: calc(var(--t) * 100%); transform: translateX(-50%); font-family: var(--cond); font-weight: 500; font-size: 13px; color: var(--texto-2); }
.regla__horas span:nth-child(even) { display: none; }
@media (min-width: 700px) { .regla__horas span:nth-child(even) { display: block; } }
.jornada__lineas { display: none; }
.jornada__pasos { list-style: none; display: grid; gap: 0; position: relative; }
.jornada__pasos li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 4px 18px; padding-bottom: 26px; }
.jornada__pasos li::before { content: ""; position: absolute; left: 31px; top: 38px; bottom: 0; width: 1px; background: var(--linea-2); }
.jornada__pasos li:last-child::before { display: none; }
.jornada__pasos .cod { grid-row: span 2; width: 64px; height: 38px; font-size: 17px; background: var(--asfalto); }
.jornada__pasos li:nth-child(3) .cod { border-color: var(--amarillo); color: var(--amarillo); }
.jornada__pasos h3 { font-size: 23px; line-height: 1.05; padding-top: 7px; }
.jornada__pasos p { color: var(--texto-2); font-size: 16px; max-width: 34ch; }
.jornada__hoy { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--linea); background: var(--panel); font-size: 16px; }
.jornada__hoy .ico { color: var(--amarillo); margin-top: 2px; }
@media (min-width: 900px) {
  .jornada__lineas { display: block; width: 100%; height: 70px; margin-top: -20px; overflow: visible; }
  .jornada__lineas path { fill: none; stroke: var(--linea-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .jornada__lineas circle { fill: var(--texto); }
  .jornada__pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: -8px; }
  .jornada__pasos li { grid-template-columns: 1fr; padding-bottom: 0; justify-items: start; }
  .jornada__pasos li::before { display: none; }
  .jornada__pasos .cod { grid-row: auto; margin-bottom: 12px; }
  .jornada__pasos h3 { padding-top: 0; }
}
/* ── мастерская: коллаж и оборудование ──────────────────────────────── */
.taller { display: grid; gap: 40px; }
@media (min-width: 1000px) { .taller { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } }
.taller__texto { display: grid; gap: 20px; align-content: start; }
.equipo { border-top: 1px solid var(--linea); }
.equipo > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.equipo dt { font-family: var(--cond); font-weight: 600; font-size: 14px; color: var(--texto-2); letter-spacing: .08em; padding-top: 2px; }
.equipo dd b { display: block; font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.equipo dd span { color: var(--texto-2); font-size: 15px; }
.collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.collage figure { position: relative; display: grid; gap: 8px; }
.collage img { width: 100%; height: 100%; object-fit: cover; background: var(--panel-2); }
.collage figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 10px; background: rgba(10, 11, 12, .82); }
.collage__a { grid-column: 1 / span 4; aspect-ratio: 4 / 3; }
.collage__b { grid-column: 5 / span 2; }
.collage__c { grid-column: 1 / span 2; }
.collage__d { grid-column: 3 / span 4; aspect-ratio: 16 / 10; }
.collage__b img, .collage__c img { aspect-ratio: auto; }
/* ── часы неделей и карта ─────────────────────────────────────────────── */
.visita { display: grid; gap: 40px; }
@media (min-width: 1000px) { .visita { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.visita__datos { display: grid; gap: 24px; align-content: start; }
.semana { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--linea); }
.semana li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: 12px 2px 12px; border-left: 1px solid var(--linea); position: relative; }
.semana li:first-child { border-left: 0; }
.semana__dia { font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.semana__barra { position: relative; width: 14px; height: 120px; background: var(--panel-2); }
.semana__barra i { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100%); height: calc((var(--f) - var(--i)) * 100%); background: #5b6168; }
.semana__ahora { position: absolute; left: -9px; right: -9px; top: calc(var(--t) * 100%); height: 2px; background: var(--texto); }
.semana__horas { display: none; font-family: var(--cond); font-weight: 500; font-size: 14px; line-height: 1.25; color: var(--texto-2); text-align: center; }
.semana li.hoy { background: var(--panel); box-shadow: inset 0 3px 0 var(--amarillo); }
.semana li.hoy .semana__dia { color: var(--texto); }
.semana li.hoy .semana__barra i { background: var(--amarillo); }
.semana__hoy { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 1px 6px; background: var(--amarillo); color: var(--sobre-amarillo); font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 560px) { .semana__horas { display: block; } }
.horario-texto { font-size: 16px; }
.contacto { list-style: none; border-top: 1px solid var(--linea); }
.contacto li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--linea); }
.contacto .ico { color: var(--texto-2); }
.contacto a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.contacto a:hover { color: var(--amarillo); }
.mapa { display: grid; gap: 10px; }
.mapa__marco { position: relative; border: 1px solid var(--linea-2); padding: 6px; background: var(--panel); }
.mapa__plano { position: relative; height: 340px; overflow: hidden; background-color: var(--asfalto); display: grid; place-items: center; }
.mapa__anillos { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; color: var(--linea-2); max-width: none; }
.mapa__norte { position: absolute; top: 16px; right: 18px; width: 30px; height: 42px; color: var(--texto-2); }
.mapa__cruz { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; color: var(--amarillo); }
.mapa__punto { position: absolute; left: calc(50% + 26px); top: calc(50% - 52px); display: grid; gap: 2px; padding: 8px 12px; background: rgba(10, 11, 12, .88); border-left: 2px solid var(--amarillo); font-size: 14px; line-height: 1.3; color: var(--texto-2); }
.mapa__punto b { font-family: var(--cond); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); }
.mapa__cargar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--asfalto); }
.mapa__cargar:active { transform: translateX(-50%) translateY(1px); }
.mapa iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(.85) invert(.9) contrast(.9) brightness(.95); }
@media (min-width: 1000px) { .mapa__plano, .mapa iframe { height: 540px; } }
.mapa figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center; }
.mapa figcaption a { display: inline-flex; align-items: center; min-height: 44px; }