/* =========================================================
   CREATIVE — SERVICIOS.CSS
   Estilos exclusivos de la página de Servicios. Depende de:
   - base.css        (tokens, tipografía, botones, header, footer,
                       navegación, miniaturas de servicio, .pagina-intro)
   - imagenes-vars    (variables --img-* generadas desde datos.php)
   Cárgalo siempre después de esos dos.

   No copia la composición de la Home: es un listado editorial por
   familia (Peluquería / Estética avanzada), con foto + nombre +
   descripción + enlace de reserva por servicio, separados por
   líneas finas — mismo lenguaje visual que la Home (sin tarjetas,
   sin bordes redondeados), en un formato más completo porque esta
   página existe específicamente para mostrar servicios.
   ========================================================= */

.servicios-pagina{ background: var(--marfil); padding: 60px 0 90px; }

.familia-bloque{ margin-bottom: 56px; }
.familia-bloque:last-child{ margin-bottom: 0; }
.familia-bloque .familia-eyebrow{ margin-bottom: 28px; }

.servicio-bloque{
  border-top: 1px solid rgba(33,30,31,.14);
  padding: 28px 0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.familia-bloque .servicio-bloque:last-child{ border-bottom: 1px solid rgba(33,30,31,.14); }

.servicio-bloque .foto{
  width:100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.servicio-bloque .nombre{ font-family: var(--serif); font-size: 24px; margin-bottom: 4px; }
.servicio-bloque .desc{ font-size: 14px; line-height:1.6; opacity:.65; max-width: 480px; margin-bottom: 14px; }

/* ============ DESKTOP ============ */
@media (min-width: 900px){
  .servicios-pagina{ padding: 100px 0 130px; }
  .familia-bloque{ margin-bottom: 80px; }

  .servicio-bloque{
    flex-direction: row;
    align-items:center;
    gap: 40px;
    padding: 36px 0;
  }
  .servicio-bloque .foto{ width: 280px; flex-shrink:0; }
  .servicio-bloque .texto{ flex:1; }
  .servicio-bloque .nombre{ font-size: 26px; }
}