/* ==========================================================================
   PÁGINA — Servicios
   ========================================================================== */

/* ========================================================= ÍNDICE PEGAJOSO
   Barra de salto a cada familia. Se queda bajo la barra principal. */

.indice-familias {
  position: sticky;
  top: var(--barra-h-compacta);
  z-index: 40;
  background: color-mix(in srgb, var(--gris-50) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--gris-200);
}

.indice-familias__fila {
  display: flex;
  gap: clamp(var(--e-4), 2.2vw, var(--e-7));
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Sin scroll-snap: alineaba el primer enlace contra el borde del
     scrollport y se comía el margen izquierdo del contenedor. */
}
.indice-familias__fila::-webkit-scrollbar { display: none; }

.indice-familias__enlace {
  flex: none;
  position: relative;
  padding-block: 1.05rem;
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--gris-500);
  white-space: nowrap;
  transition: color var(--d-rapido) var(--ease-out);
}

.indice-familias__enlace::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 2px;
  background: var(--naranja-600);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-medio) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .indice-familias__enlace:hover { color: var(--gris-900); }
  .indice-familias__enlace:hover::after { clip-path: inset(0 0 0 0); }
}

/* ================================================================= CATÁLOGO */

.catalogo { padding-top: clamp(3rem, 2.4rem + 3.4vw, 5rem); }

.bloque-familia {
  display: grid;
  gap: clamp(var(--e-5), 3vw, var(--e-7));
  padding-block: clamp(3rem, 2.2rem + 4.2vw, 5.5rem);
  border-top: 1px solid var(--borde);
  scroll-margin-top: calc(var(--barra-h-compacta) + 88px);
}
.bloque-familia:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 1000px) {
  .bloque-familia {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3.4fr);
    gap: clamp(var(--e-6), 3vw, var(--e-8));
    align-items: start;
  }
}

.bloque-familia__cabecera { display: grid; gap: var(--e-3); align-content: start; }
.bloque-familia__icono { color: var(--naranja-600); margin-bottom: var(--e-2); }
.bloque-familia__nombre { text-transform: uppercase; font-weight: 750; font-stretch: 104%; }
@media (min-width: 1000px) { .bloque-familia__nombre { max-width: 12ch; } }
.bloque-familia__resumen { font-size: var(--t-pie); line-height: 1.62; max-width: 34ch; }
.bloque-familia__cuenta { color: var(--naranja-700); }

.bloque-familia__cuerpo .spec { border-top: 0; }
.bloque-familia__cuerpo .spec__fila:first-child { padding-top: 0; }

.bloque-familia__figura { margin: 0; }
.bloque-familia__figura .obra__marco { --chaflan: 16px; }
.bloque-familia__figura img { aspect-ratio: 4 / 3; }

@media (min-width: 1000px) {
  .bloque-familia__figura .obra__marco img { aspect-ratio: 3 / 4; }
}