/* Taller Serra — каталог услуг и страница услуги (servicios.html, frenos.html):
   чертёж, табло, сравнение, шкала, деталировка, вкладки цен, этапы, FAQ. */

/* чертёж машины с точками услуг */
.plano { display: grid; gap: 10px; }
.plano__titulo { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--linea); }
.plano__dibujo { position: relative; aspect-ratio: 800 / 340; color: var(--texto); }
.plano__dibujo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plano__suelo, .plano__cota { stroke: var(--linea-2); }
.punto {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; text-decoration: none;
}
.punto .cod { position: relative; min-width: 26px; height: 26px; padding: 0 4px; font-size: 13px; background: var(--asfalto); border-color: var(--amarillo); color: var(--amarillo); transition: background-color .15s, color .15s; }
.punto .cod::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--amarillo); opacity: 0; animation: radar 3s ease-out infinite; }
.punto:nth-of-type(2) .cod::after { animation-delay: .5s; }
.punto:nth-of-type(3) .cod::after { animation-delay: 1s; }
.punto:nth-of-type(4) .cod::after { animation-delay: 1.5s; }
.punto:nth-of-type(5) .cod::after { animation-delay: 2s; }
.punto:nth-of-type(6) .cod::after { animation-delay: 2.5s; }
@keyframes radar { 0% { opacity: .8; transform: scale(.9); } 60%, 100% { opacity: 0; transform: scale(1.5); } }
.punto:hover .cod, .punto:focus-visible .cod { background: var(--amarillo); color: var(--sobre-amarillo); }
.punto__txt { display: none; }
@media (min-width: 700px) {
  .punto { transform: translate(-22px, -50%); justify-content: flex-start; }
  .punto .cod { min-width: 30px; height: 30px; font-size: 14px; }
  .punto__txt {
    display: block; padding: 5px 9px; background: rgba(17, 19, 21, .9); border: 1px solid var(--linea);
    font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  }
  .punto:hover .punto__txt, .punto:focus-visible .punto__txt { border-color: var(--amarillo); }
}

/* ══ каталог: оглавление сбоку и группы с табло ════════════════════════ */
.catalogo__env { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .catalogo__env { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start; }
  .catalogo__indice { position: sticky; top: calc(var(--cab) + 28px); }
}
.catalogo__indice ol { list-style: none; margin-top: 12px; border-top: 1px solid var(--linea); }
.catalogo__indice a {
  display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--linea); text-decoration: none;
  font-family: var(--cond); font-weight: 600; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  transition: color .15s;
}
.catalogo__indice a .cod { min-width: 28px; height: 26px; font-size: 13px; transition: border-color .15s, color .15s; }
.catalogo__indice a:hover, .catalogo__indice a.activa { color: var(--texto); }
.catalogo__indice a.activa .cod { border-color: var(--amarillo); color: var(--amarillo); }
.catalogo__nota { margin-top: 14px; font-size: 14px; color: var(--texto-2); }
@media (max-width: 999px) { .catalogo__indice ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
.catalogo__grupos { display: grid; gap: 60px; }
@media (min-width: 900px) { .catalogo__grupos { gap: 96px; } }
.grupo__cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 22px; }
.grupo__cab > .cod { min-width: 42px; height: 42px; font-size: 16px; }
.grupo__txt h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: .95; }
.grupo__txt p { margin-top: 10px; color: var(--texto-2); max-width: 52ch; }
/* фото группы: на телефоне полосой под заголовком, на мониторе — карточкой справа */
.grupo__foto { position: relative; grid-column: 1 / -1; aspect-ratio: 16 / 7; overflow: hidden; background: var(--panel-2); }
.grupo__foto img { width: 100%; height: 100%; object-fit: cover; }
.grupo__foto figcaption { position: absolute; left: 0; bottom: 0; padding: 5px 9px; background: rgba(10, 11, 12, .82); }
@media (min-width: 700px) {
  .grupo__cab { grid-template-columns: auto minmax(0, 1fr) 232px; gap: 22px; }
  .grupo__foto { grid-column: auto; aspect-ratio: 3 / 2; }
}
.tarifa { list-style: none; border-top: 2px solid var(--texto); }
.tarifa li {
  display: grid; grid-template-columns: minmax(0, auto) minmax(14px, 1fr) auto;
  grid-template-areas: "que lider precio" "tiempo tiempo tiempo";
  column-gap: 10px; align-items: end; padding: 15px 0; border-bottom: 1px solid var(--linea);
}
.tarifa__que { grid-area: que; font-weight: 500; font-size: 16px; line-height: 1.35; }
.tarifa li > i { grid-area: lider; margin-bottom: 7px; border-bottom: 2px dotted #4a5057; }
.tarifa__precio { grid-area: precio; font-family: var(--cond); font-weight: 600; font-size: 23px; line-height: 1; white-space: nowrap; }
.tarifa__precio small { margin-right: 5px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.tarifa__tiempo { grid-area: tiempo; margin-top: 5px; font-size: 14px; color: var(--texto-2); }
.tarifa__tiempo::before { content: "≈ "; }
@media (min-width: 700px) {
  .tarifa li { grid-template-columns: minmax(0, auto) minmax(28px, 1fr) auto 96px; grid-template-areas: "que lider precio tiempo"; padding: 17px 0; }
  .tarifa__que { font-size: 17px; }
  .tarifa__tiempo { margin: 0; text-align: right; font-family: var(--cond); font-weight: 500; font-size: 17px; }
}
.grupo__mas { margin-top: 14px; }

/* ══ сравнение проверок ═══════════════════════════════════════════════ */
.comparar__marco { overflow-x: auto; border: 1px solid var(--linea); background: var(--asfalto); }
.comparar__tabla { width: 100%; min-width: 320px; border-collapse: collapse; }
.comparar__tabla th, .comparar__tabla td { padding: 14px 10px; border-bottom: 1px solid var(--linea); text-align: center; }
.comparar__tabla tbody tr:last-child > * { border-bottom: 0; }
.comparar__tabla thead th {
  vertical-align: bottom; background: var(--panel-2); border-bottom: 2px solid var(--texto);
  font-family: var(--cond); font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
}
.comparar__tabla thead small { display: block; margin-top: 4px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.comparar__tabla tbody th { text-align: left; font-weight: 500; font-size: 15px; line-height: 1.35; }
.comparar__tabla td { width: 19%; }
.comparar__tabla td span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.comparar__tabla td.si::before { content: ""; display: inline-block; width: 14px; height: 8px; border-left: 3px solid var(--texto); border-bottom: 3px solid var(--texto); transform: translateY(-3px) rotate(-45deg); }
.comparar__tabla td.no::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--linea-2); vertical-align: middle; }
.comparar__tabla tbody tr:hover > * { background: var(--panel); }
@media (min-width: 900px) {
  .comparar__tabla th, .comparar__tabla td { padding: 16px 22px; }
  .comparar__tabla thead th { font-size: 20px; }
  .comparar__tabla tbody th { font-size: 17px; }
}

/* ══ шкала: цена по типу машины ═══════════════════════════════════════ */
.escala { display: grid; gap: 40px; }
@media (min-width: 1000px) { .escala { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; } }
.escala__texto { display: grid; gap: 18px; align-content: start; }
.escala__lista { list-style: none; border-top: 1px solid var(--linea); }
.escala__lista li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 104px; grid-template-areas: "coche nombre precio" "coche barra factor";
  gap: 8px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--linea);
}
.escala__lista svg { grid-area: coche; width: 64px; height: 29px; color: var(--texto); }
.escala__nombre { grid-area: nombre; font-family: var(--cond); font-weight: 700; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; }
.escala__barra { grid-area: barra; position: relative; height: 8px; background: var(--panel-2); }
.escala__barra i { position: absolute; inset: 0 auto 0 0; width: calc(var(--f) / 1.3 * 100%); background: #5b6168; transition: background-color .2s; }
.escala__lista li:hover .escala__barra i { background: var(--amarillo); }
.escala__factor { grid-area: factor; font-family: var(--cond); font-weight: 600; font-size: 15px; color: var(--texto-2); justify-self: end; }
.escala__lista b { grid-area: precio; justify-self: end; font-family: var(--cond); font-weight: 600; font-size: 23px; white-space: nowrap; }
@media (min-width: 600px) {
  .escala__lista li { grid-template-columns: 88px 120px minmax(0, 1fr) 56px 110px; grid-template-areas: "coche nombre barra factor precio"; }
  .escala__lista svg { width: 80px; height: 36px; }
  .escala__lista b { justify-self: end; }
}

/* ══ врезка с большим фото ════════════════════════════════════════════ */
.destacado { display: grid; background: var(--negro); border-block: 1px solid var(--linea); }
@media (min-width: 900px) { .destacado { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 560px; } }
.destacado__foto { position: relative; min-height: 260px; }
.destacado__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destacado__texto { display: grid; gap: 20px; align-content: center; justify-items: start; padding: 40px var(--lado) 52px; }
@media (min-width: 900px) { .destacado__texto { padding: 72px 64px; } }

/* ══ страница услуги: первый экран с деталировкой ═════════════════════ */
.servicio { display: grid; gap: 40px; }
@media (min-width: 1000px) { .servicio { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; } }
.servicio__texto { display: grid; gap: 22px; align-content: start; }
.ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--linea); }
.ficha > div { padding: 14px 12px 14px 0; }
.ficha > div + div { padding-left: 14px; border-left: 1px solid var(--linea); }
.ficha dt { font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.ficha dd { margin-top: 6px; font-family: var(--cond); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1; text-transform: uppercase; }
.ficha dd small { font-size: 13px; letter-spacing: .12em; color: var(--texto-2); }
.despiece { display: grid; gap: 12px; }
.despiece__dibujo { position: relative; aspect-ratio: 640 / 440; color: var(--texto); }
.despiece__dibujo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.despiece__marca { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; }
.despiece__marca .cod { min-width: 26px; height: 26px; padding: 0 4px; font-size: 13px; background: var(--asfalto); border-color: var(--amarillo); color: var(--amarillo); }
.despiece__txt { display: none; }
@media (min-width: 700px) {
  .despiece__marca { transform: translate(-15px, -50%); }
  .despiece__marca .cod { min-width: 30px; height: 30px; font-size: 14px; }
  .despiece__txt { display: block; padding: 4px 8px; background: rgba(17, 19, 21, .9); font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
}

/* ══ симптомы ══════════════════════════════════════════════════════════ */
.sintomas { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 600px) { .sintomas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sintomas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sintomas li { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "ico n" "ico h" "ico p"; column-gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--linea); }
.sintomas svg { grid-area: ico; width: 56px; height: 56px; color: var(--amarillo); }
.sintomas__n { grid-area: n; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .12em; color: var(--texto-2); }
.sintomas h3 { grid-area: h; margin: 6px 0 8px; font-size: 26px; }
.sintomas p { grid-area: p; color: var(--texto-2); font-size: 16px; }
@media (min-width: 1000px) {
  .sintomas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sintomas li { grid-template-columns: 96px 1fr; padding: 38px 40px 38px 0; }
  .sintomas li:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--linea); }
  .sintomas svg { width: 76px; height: 76px; }
  .sintomas h3 { font-size: 32px; }
  .sintomas p { font-size: 17px; max-width: 44ch; }
}

/* ══ цены тормозов по типу машины ═════════════════════════════════════ */
.tipos-coche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--linea-2); border-bottom: 0; }
.tipos-coche [role=tab] {
  display: grid; justify-items: center; gap: 6px; min-height: 76px; padding: 10px 4px; border: 0; background: var(--asfalto); cursor: pointer;
  font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.tipos-coche [role=tab] + [role=tab] { border-left: 1px solid var(--linea-2); }
.tipos-coche svg { width: 52px; height: 24px; }
.tipos-coche [role=tab]:hover { color: var(--texto); }
.tipos-coche [role=tab][aria-selected="true"] { background: var(--panel-2); color: var(--texto); box-shadow: inset 0 -3px 0 var(--amarillo); }
.tipos-coche [role=tab]:focus-visible { outline-offset: -3px; }
@media (min-width: 700px) { .tipos-coche [role=tab] { display: flex; align-items: center; justify-content: center; min-height: 64px; font-size: 17px; gap: 14px; } .tipos-coche svg { width: 64px; height: 29px; } }
.tabla-frenos__marco { border: 1px solid var(--linea-2); background: var(--asfalto); overflow-x: auto; }
.tabla-frenos { width: 100%; border-collapse: collapse; }
.tabla-frenos th, .tabla-frenos td { padding: 15px 14px; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla-frenos tbody tr:last-child > * { border-bottom: 0; }
.tabla-frenos thead th { font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); background: var(--panel-2); }
.tabla-frenos tbody th { font-weight: 500; font-size: 16px; }
.tabla-frenos td { font-family: var(--cond); font-weight: 600; font-size: 20px; white-space: nowrap; color: var(--texto-2); transition: color .15s, background-color .15s; }
.tabla-frenos .tabla-frenos__t { font-weight: 500; font-size: 17px; }
/* выбранная колонка: на мониторе подсвечена, на телефоне — единственная видимая */
.tabla-frenos[data-col="1"] :is(th, td):nth-child(2), .tabla-frenos[data-col="2"] :is(th, td):nth-child(3),
.tabla-frenos[data-col="3"] :is(th, td):nth-child(4), .tabla-frenos[data-col="4"] :is(th, td):nth-child(5) { color: var(--texto); background: rgba(245, 180, 0, .07); }
.tabla-frenos[data-col="1"] thead th:nth-child(2), .tabla-frenos[data-col="2"] thead th:nth-child(3),
.tabla-frenos[data-col="3"] thead th:nth-child(4), .tabla-frenos[data-col="4"] thead th:nth-child(5) { color: var(--amarillo); }
@media (max-width: 699px) {
  .tabla-frenos :is(th, td):nth-child(n+2):nth-child(-n+5) { display: none; }
  .tabla-frenos[data-col="1"] :is(th, td):nth-child(2), .tabla-frenos[data-col="2"] :is(th, td):nth-child(3),
  .tabla-frenos[data-col="3"] :is(th, td):nth-child(4), .tabla-frenos[data-col="4"] :is(th, td):nth-child(5) { display: table-cell; }
  .tabla-frenos th, .tabla-frenos td { padding: 14px 10px; }
  .tabla-frenos tbody th { font-size: 15px; }
}
.nota-tabla { margin-top: 14px; font-size: 14px; color: var(--texto-2); }

/* ══ этапы работы ══════════════════════════════════════════════════════ */
.proceso { display: grid; gap: 36px; }
@media (min-width: 1000px) {
  .proceso { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
  .proceso__lado { position: sticky; top: calc(var(--cab) + 28px); }
}
.proceso__lado { display: grid; gap: 20px; }
.proceso__foto { display: grid; gap: 8px; margin-top: 8px; }
.proceso__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.etapas { list-style: none; position: relative; }
.etapas li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linea); }
.etapas li:first-child { border-top: 1px solid var(--linea); }
.etapas .cod { width: 44px; height: 44px; font-size: 16px; }
.etapas li:nth-child(2) .cod { border-color: var(--amarillo); color: var(--amarillo); }
.etapas h3 { font-size: 24px; padding-top: 2px; }
.etapas p { margin-top: 6px; color: var(--texto-2); }
.etapas__t { font-family: var(--cond); font-weight: 600; font-size: 17px; color: var(--texto-2); white-space: nowrap; padding-top: 4px; }

/* ══ большая цитата ═══════════════════════════════════════════════════ */
.cita-grande { border-block: 1px solid var(--linea); padding-block: 64px; }
@media (min-width: 900px) { .cita-grande { padding-block: 120px; } }
.cita-grande blockquote { position: relative; margin: 0; padding-left: 22px; border-left: 4px solid var(--amarillo); }
.cita-grande blockquote p { font-family: var(--cond); font-weight: 700; font-size: clamp(34px, 5.6vw, 76px); line-height: .98; text-transform: uppercase; max-width: 20ch; text-wrap: balance; }
.cita-grande__pie { margin-top: 24px; padding-left: 26px; max-width: 60ch; color: var(--texto-2); font-size: 17px; }

/* ══ частые вопросы ═══════════════════════════════════════════════════ */
.faq { display: grid; gap: 32px; }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; } .faq__cab { position: sticky; top: calc(var(--cab) + 28px); } }
.faq__cab { display: grid; gap: 18px; justify-items: start; }
.faq__lista { border-top: 1px solid var(--linea); }
.faq__lista details { border-bottom: 1px solid var(--linea); }
.faq__lista summary {
  position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 44px 14px 0; cursor: pointer; list-style: none;
  font-family: var(--cond); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
}
.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista summary::after, .faq__lista summary::before { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: var(--amarillo); transition: transform .2s; }
.faq__lista summary::before { transform: rotate(90deg); }
.faq__lista details[open] summary::before { transform: rotate(0); }
.faq__lista summary:hover { color: #fff; }
.faq__lista details p { padding: 0 44px 22px 0; color: var(--texto-2); max-width: 62ch; }

/* ══ похожие услуги: карточки разного размера ═════════════════════════ */
.relacion { display: grid; gap: 16px; }
@media (min-width: 900px) { .relacion { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 20px; } .relacion__grande { grid-row: span 2; min-height: 480px; } .relacion__peque { min-height: 230px; } }
.relacion a { text-decoration: none; }
.relacion__grande { position: relative; display: grid; min-height: 260px; overflow: hidden; background: var(--negro); border: 1px solid var(--linea); }
.relacion__grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .3s, transform .6s; }
.relacion__grande:hover img { opacity: .7; transform: scale(1.03); }
.relacion__txt { position: relative; align-self: end; display: grid; gap: 12px; padding: 26px; background: linear-gradient(0deg, rgba(10, 11, 12, .95), rgba(10, 11, 12, 0)); }
.relacion b { font-family: var(--cond); font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1; text-transform: uppercase; }
.relacion__peque { display: grid; gap: 12px; align-content: end; min-height: 260px; padding: 26px; background: var(--asfalto); border: 1px solid var(--linea); transition: border-color .2s; }
.relacion__peque:hover { border-color: var(--linea-2); }
.relacion__peque--luz svg { width: 56px; height: 56px; filter: drop-shadow(0 0 6px currentColor); }

/* ══ деталь за деталью: полоса из пяти колонок ════════════════════════ */
.piezas__foto { position: relative; margin-bottom: 28px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--negro); }
.piezas__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.piezas__foto figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 11px; background: rgba(10, 11, 12, .82); }
@media (min-width: 700px) { .piezas__foto { aspect-ratio: 16 / 7; margin-bottom: 44px; } }
.piezas { list-style: none; display: grid; border-top: 1px solid var(--linea); }
@media (min-width: 700px) { .piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1100px) { .piezas { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; border-top: 0; } }
.piezas li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.piezas .cod { grid-row: span 2; width: 40px; height: 40px; font-size: 15px; border-color: var(--amarillo); color: var(--amarillo); }
.piezas h3 { font-size: 24px; padding-top: 2px; }
.piezas p { color: var(--texto-2); font-size: 15.5px; line-height: 1.45; }
@media (min-width: 1100px) {
  .piezas li { grid-template-columns: 1fr; align-content: start; gap: 14px; padding: 4px 24px 8px; border-bottom: 0; border-left: 1px solid var(--linea); min-height: 230px; }
  .piezas li:first-child { padding-left: 0; border-left: 0; }
  .piezas .cod { grid-row: auto; }
}

.tarifa__que small { font-weight: 400; font-size: 14px; color: var(--texto-2); }